Skip to content

WEBSITE.md

Latest commit

 

History

History
84 lines (55 loc) · 5.51 KB

WEBSITE.md

File metadata and controls

84 lines (55 loc) · 5.51 KB
Raw

hyperclaylocal.com Marketing Page

website/index.html is the standalone marketing page for https://hyperclaylocal.com/. It presents Hyperclay Local as a free, local-first desktop app for self-saving HTML applications and links directly to the current platform installers.

What It Includes

  • A static, no-build page in website/.
  • Local UI/runtime assets: vendor/bevel/ (styles, runtime, icons and IBM Plex fonts), site.css, sap.min.js, assets/app-popover.png, and Departure Mono for major headlines.
  • SEO and social metadata for https://hyperclaylocal.com/.
  • A header with the docs mascot, a plain light/dark icon, GitHub and Docs.
  • An OS-aware hero download button backed by the canonical download list.
  • An interactive hero: transparent hotspots over the popover screenshot let visitors click the Serve and Sync switches and the bell to swap between the five captured UI states.
  • Live in-page SAP demos for example single-file apps.
  • Canonical documentation links for creating and saving malleable documents.
  • FAQ answers and links to the canonical setup, saving and troubleshooting documentation.

How To Use It

Open website/index.html directly in a browser, or serve the directory with any static file server:

cd hyperclay-local/website
python3 -m http.server 8080

There is no compile step and no CDN dependency for the page itself. Deploy the whole website/ directory so the local CSS, JavaScript, image, and font paths keep resolving.

Run the website-specific checks from the package root:

npm test -- tests/website

These Jest tests parse the shipped HTML and execute the page's inline behavior scripts against a small test DOM.

Updating Downloads

The download list in #downloads is the single source of truth. When bumping the page to a new app release, update:

  • #downloads[data-version]
  • the five download filenames and href values
  • the five visible file sizes

The hero download button reads that static list at runtime. It chooses macOS, Windows, or desktop Linux from the user agent; macOS defaults to Apple Silicon and switches to Intel only when navigator.userAgentData reports an x86 architecture. Mobile and unknown platforms fall back to the full download list.

Keep the static list usable without JavaScript. The hero button should still point to #downloads, and every row should remain a plain HTTPS download link.

Regenerating the popover screenshots

The hero images in assets/ are captured from the REAL popover renderer, not a mock, so they always match the shipping UI. One command rebuilds the bundle and recaptures every state:

npm run screenshot:setup     # one time: downloads the Chromium used for capture
npm run screenshot:popover   # builds css+react, writes assets/app-popover-*.png

It loads the actual src/renderer/popover.html in headless Chromium with a stubbed electronAPI seeded to each state, and screenshots #root at the real window size (340x500) times deviceScaleFactor 2 → 680x1000 retina. Captured states: on-on, on-off, off-off, off-on (the Serve/Sync matrix) and notices. app-popover.png is kept as an alias of the on-on hero.

  • States live in scripts/popover-scenarios.js (data only; user is @panphora).
  • The engine is scripts/screenshot-popover.js; it asserts its electronAPI stub covers every method the real src/main/popover-preload.js exposes, so a UI change that starts calling a new method fails loudly instead of silently mis-rendering.
  • Capture size follows the real window via the shared src/main/popover-dimensions.js.
  • Single state / custom output: node scripts/screenshot-popover.js --scenario notices --outdir /tmp --scale 2.

Re-run this after any change to the popover UI.

Interactive hero

The hero #hero-shot frame holds one <img id="hero-img"> plus four transparent .shot-hotspot buttons positioned (in %) over the Serve switch, Sync switch, bell, and the notices back-arrow. A small inline script tracks (server, sync, view) and swaps img.src/img.alt between the five PNGs; the back arrow returns to the last toggle combo. Hotspot positions are percentages of the 340x500 frame, so they stay aligned as the shot scales. If the popover layout moves a control, nudge the matching .shot-hotspot--* rule.

Design Notes

The page is intentionally self-contained. vendor/bevel/bevel.css supplies the UI kit and light/dark tokens. site.css owns the page layout, index.html the content and interactions. Body and UI text use IBM Plex Sans, code and numbers use IBM Plex Mono, and major headlines retain Departure Mono. The vendored files are exact copies from the sibling bevel repo, with its font licenses.

Theme state uses the hcl-theme localStorage key. A small guard script runs before Bevel loads to avoid a wrong-theme flash; the footer script updates the toggle icon, ARIA state, and persisted mode. With no saved choice, the page follows the OS color scheme.

The SAP demos are embedded examples, not separate app files. Their collection templates, trigger-add forms, detail panes, computed totals, and tab/panel ARIA relationships are covered by tests/website/marketing-page.structure.test.js.

Maintenance Checklist

  • Keep local references in index.html resolvable inside website/.
  • Preserve the #downloads source-of-truth contract when changing release links.
  • Preserve tab and panel ARIA pairings for the seven demo tabs.
  • Keep target="_blank" links paired with rel="noopener".
  • Run npm test -- tests/website after changing markup, downloads, theme behavior, or live demos.