CloudMus site

Landing page for CloudMus, a desktop music player (Yandex Music, YouTube Music, local folders). Hosted on GitHub Pages in six languages: English (default, /), Russian, German, French, Spanish and Italian (/ru/, /de/, /fr/, /es/, /it/).

Plain HTML, CSS and vanilla JS, generated by a dependency-free Node script. No framework, no npm packages. Fonts and images are in the repository; the only runtime request is to the GitHub API for the latest release (see below).

Structure

src/index.template.html   the page, with {{key}} placeholders for all text
i18n/<lang>.json          one dictionary per language (en.json is the source of truth)
build.mjs                 generator: template + dictionaries -> dist/
assets/css/style.css      @font-face, keyframes, hover states, language switcher
assets/js/main.js         animations, OS-aware hero buttons, latest-release data
assets/js/lang.js         language remembering and browser-language redirect
assets/js/nav.js          mobile hamburger menu
assets/js/changelog.js    release-notes panel opened from the version badge
assets/js/gallery.js      screenshot carousel: arrows, dots, swipe, autoplay, fullscreen popup
assets/fonts/             self-hosted Rubik and JetBrains Mono (woff2)
assets/img/               logo, service logos and PNG rasters of the logo (og-logo, apple-touch-icon, favicon-48)
assets/img/screenshots/   carousel screenshots (WebP: <name>.webp full size, <name>-960.webp for the carousel)
.github/workflows/pages.yml   builds and deploys to GitHub Pages
dist/                     build output (git-ignored)

Build and preview

Requires Node 18+.

node build.mjs
python -m http.server -d dist 8000

Open http://localhost:8000/. Use a server rather than file://: the language redirect and links between languages expect real URLs.

Setting SITE_URL (for example SITE_URL=https://example.org/cloudmus node build.mjs) also emits canonical and hreflang links, og:url, og:image, JSON-LD, sitemap.xml and robots.txt. CI sets it automatically from the Pages configuration.

Languages

• Every user-visible string is a key in i18n/en.json. The build warns when another language lacks a key (English is used instead) and fails on unknown keys or unknown placeholders in the template.
• Add a language: copy i18n/en.json to i18n/<code>.json, translate it, and add the code to the LANGS table in build.mjs and to SUPPORTED in assets/js/lang.js.
• Translations of de, fr, es and it were drafted by an AI and should be proof-read by native speakers.
• The root page (English) sends first-time visitors to their browser language when a translation exists. The choice made in the switcher is stored in localStorage (cloudmus.lang) and stops further redirects.

Analytics

Google Analytics 4 (measurement ID G-YNEY7DECKV, set in build.mjs) is injected into every page at build time. Override with GA_MEASUREMENT_ID=G-XXXXXXXXXX node build.mjs, or build without analytics using GA_MEASUREMENT_ID= node build.mjs. Note: GA sets cookies, so visitors from the EU/UK normally need a consent banner (not implemented).

Release data

On load, assets/js/main.js (loadRelease) calls https://api.github.com/repos/cloudmus/cloudmus/releases/latest and:

• points every download link (a[data-asset="windows|mac-arm64|mac-x64|linux"], in the hero and in the download cards) at the release's *-Setup.exe / *-arm64.dmg / *-x86_64.dmg / *.AppImage asset; the hero button of the visitor's OS becomes the primary one (on a Mac, the Intel DMG when Chromium reports an x86 CPU, otherwise Apple Silicon),
• replaces the placeholder file names ([data-release-file]) and shows version and size ([data-release-meta], unit from data-unit-mb).

The version badge in the header ([data-release-version]) is filled from the same data; clicking it opens a changelog panel (assets/js/changelog.js) that loads the last releases from /releases on first use (also cached for 10 minutes).

The result is cached in localStorage for 10 minutes (the unauthenticated API limit is 60 requests per hour per IP). If the request fails, the static fallbacks stay: links go to /releases/latest and file names are generic.

Deploy

The site is published by GitHub Actions (.github/workflows/pages.yml) on every push to master, at the custom domain https://cloudmus.app. build.mjs uses that domain by default for canonical/hreflang links, sitemap.xml and robots.txt (override with SITE_URL=..., disable with SITE_URL=).

One-time setup:

1. Create the repository (for example cloudmus/cloudmus-site) and push master.
2. Settings → Pages → Build and deployment → Source: GitHub Actions.
3. At the domain registrar, add DNS records for the apex cloudmus.app:
   • A: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
   • AAAA: 2606:50c0:8000::153, 2606:50c0:8001::153, 2606:50c0:8002::153, 2606:50c0:8003::153
   • optional www → CNAME cloudmus.github.io
4. Settings → Pages → Custom domain: cloudmus.app. With an Actions deploy no CNAME file is needed; the domain is stored in the repository settings.
5. Organization settings → Pages → verify cloudmus.app (TXT record), so no other repository can claim the domain.
6. .app is HSTS-preloaded: browsers only open it over HTTPS. Wait until GitHub issues the certificate, then enable Enforce HTTPS.

SEO ideas that are not done yet are collected in docs/seo.md.