Clipy website

Source for clipy-app.com, built with Eleventy, Nunjucks, and JSON. All languages share one page template.

Local development

Use Node.js 24 (see .nvmrc), then run:

npm ci
npm run dev

Open the local URL printed by Eleventy. Use /en/ or /ja/ to preview a specific language. The root page / selects a supported language based on the browser's preferences and displays English when JavaScript is disabled.

Before opening a pull request, run:

npm run build

This checks translations and builds the site into _site/. Generated files should not be committed.

Translations

To update a translation, edit its JSON file in src/_data/locales/.

To add a language:

1. Copy src/_data/locales/en.json to a file named with the language tag, such as src/_data/locales/fr.json.
2. Translate the text, including image descriptions, and update ogLocale (for example, fr_FR). Keep the same keys and JSON structure as English. Write plain text rather than HTML.
3. Preview the new page at its language path, such as /fr/, and run npm run build before opening a pull request.

New languages are discovered automatically; no template or route changes are needed. Screenshots use the shared English images unless a localized version is provided, so screenshot contributions are optional.

Keep placeholders such as {minimumMacOS}, {issues}, {pullRequests}, and {author} intact. They insert shared values or links and can be moved within a sentence to match the language's grammar. Let text wrap naturally rather than adding manual line breaks or language-specific widths and margins.

To check translations without building the site, run:

npm run i18n:check

Optional localized screenshots

Add images under src/img/screenshots/<language>/, then add their public paths to src/_data/screenshots.json. For example, add a fr entry to clipboardHistory while keeping the existing language entries:

{
  "clipboardHistory": {
    "en": "/img/common/clipboard-history.png",
    "ja": "/img/screenshots/ja/clipboard-history.png",
    "fr": "/img/screenshots/fr/clipboard-history.png"
  }
}

Each image without an override uses its en path. Main slides and thumbnails use the same image; no separate thumbnail files are needed.

Where to make changes

Path	Contents
src/index.njk	Shared page template
src/_data/locales/	Translated text
src/_data/site.json	Shared site metadata and links
src/_data/release.json	Download information and minimum macOS version
src/_data/screenshots.json	Screenshot paths and language overrides
src/img/common/	Shared images and default English screenshots
src/img/screenshots/	Optional localized screenshots
css/	Shared styles
js/slider.js	Screenshot slider behavior