// APP STORE — DOCUMENTATION 🔥

Overview

The store is pure static HTML, CSS, and vanilla JavaScript — no build step, no framework, no backend. It serves three pages over one shared catalog and design system:

• index.html — storefront: hero, search, category filters, product grid.
• product.html — product detail (reads ?id=): overview, features, pricing, buy/download.
• checkout.html — Shopify-style checkout: express wallets, card form, billing, order summary.

All three load store.js (logic + catalog), store.css (commerce surfaces), and the vendored HUD assets hud-static.css / tutorial.css / hud-theme.js.

Architecture

store.js is a single IIFE. On DOMContentLoaded it renders whatever mount points the current page exposes and guards out the rest, so the same script is safe on every page:

• #productGrid → the storefront grid + filters + stats
• #detailRoot → the product detail page (from ?id=)
• #checkoutRoot → the checkout page (reads the cart)
• #cartCount / #modalOverlay → cart badge + modal, on any page

The cart lives in localStorage under appstore-cart; theme / CRT / neon / color-scheme preferences under the appstore-hud-* keys.

Catalog model

The PRODUCTS array in store.js is the single source of truth. Three construction styles keep it DRY:

• Explicit objects — the apps, audio plugins, and CLI tools, each with distinct copy.
• strykePkg(id, glyph, desc) — generates the 30 near-identical stryke-ecosystem packages from a compact table.
• metaProduct(id, glyph, category, tagline, pills, hasRelease) — generates the remaining MenkeTechnologies repos (zsh plugins, dev tools).

Long-form copy (an overview paragraph and a rich features list) lives in the DETAILS map, ported from each repo's README / source, and is merged into PRODUCTS at load. Cards, search, filters, and the stat counters above are all derived — no hardcoded counts.

To add a product: append one object or one table row, and optionally a DETAILS entry. Everything else updates automatically.

Catalog families

The catalog spans eight display categories. Counts below are a snapshot of the current PRODUCTS array; the live hero counters at the top of this page reflect the running catalog.

• Desktop Apps (18) — the Rust/Tauri v2 app suite: zpdf, zphoto, zemail, zoffice, audio haxor, traderview, ztranslator, zcite, zreq, ztunnel, zthrottle, zgo, zftp, zcontainer, zterminal, zpwr-daw, and zstation (17 paid, proprietary — none link a public Source), plus zwire, the free / OSS Chromium-superset browser.
• Audio Plugins (3, paid) — zpwr-synth, zpwr-fx, zpwr-midi-fx: a fully-modular JUCE plugin trio shipping VST3 / AU / CLAP / Standalone. Each carries docs[] entries pointing at its own per-plugin block catalog PDF plus the shared full zpwr-patch-core-block-catalog.pdf, instead of a GitHub Pages site.
• Developer Tools (12, free) — the flagships zshrs and stryke, plus vimlrs, elisprs, zmax, zmax-gui, fusevm, api-rest-generator, LearningCollectionAPI, stryke-demo, VimColorSchemes, and gh_reveal.
• CLI Tools (12, free) — awkrs, lsofrs, nmaprs, iftoprs, htoprs, grcrs, temprs, powerliners, ztmux, storageshower, zpwrchrome, zwire-host.
• Editor Plugins (11, free) — VS Code, Vim/Neovim, and Emacs support for the in-house languages (stryke, zshrs, awkrs), plus zpwr-theme and tmux-fzf-url.
• stryke Packages (30, free, generated) — the stryke-* ecosystem (databases, clouds, data formats, automation), each built by strykePkg() from a compact [id, glyph, desc] row.
• Zsh Plugins (20, free, generated) — zpwr, zsh-more-completions, zsh-expand, and the rest of the zsh-plugin family, built by metaProduct().
• Publications (19, paid) — the companion books and collections: the-stack, the-compiled-mind, the-waking-fleet, the-inheritors, the strykelang, zshrs, zmax, fusevm, elisprs, awkrs, vimlrs, zterminal, powerliners, ztmux, and zwire books, Rewriting the Desktop in Rust, The CLI Fleet (the command-line-tool compendium), Firsts (the invention ledger), and the zpwr-encyclopedia.

Total: 125 products across 8 categories — 39 paid, 86 free / OSS. Third-party forks mirrored in the org (fzf-tab, zsh-z, zunit, etc.) are intentionally excluded to avoid misattributing authorship.

Documentation links

Repos that publish their docs/ to GitHub Pages are listed in the DOC_REPOS array (57 ids). For each, the detail page's Documentation section renders doc-cards built at load:

• Documentation → menketechnologies.github.io/<id>/
• Engineering Report → <base>/report.html
• API Reference → <base>/reference.html, only for the ids in DOC_REFERENCE: strykelang and zshrs.

Products with no published Pages site (the proprietary apps, and the Pages-disabled audio plugins that ship a PDF catalog instead) are omitted so no Docs link 404s. A shipped reference PDF still renders alongside the HTML doc-cards via the product's docs[] array.

Screenshots & lightbox

GUI products (the desktop apps and audio plugins) carry a screenshots array in their DETAILS entry — [{ src, cap }]. When present:

• the grid card and the detail hero render the first screenshot instead of the letter glyph (products with no screenshots keep the glyph);
• the detail page renders a Screenshots gallery when there is more than one shot;
• any image (hero or thumbnail) opens a keyboard-navigable lightbox — ← / → to step, Esc to close.

Images live under assets/ (one folder per multi-shot product). Captures are downsized to ≤1600 px and converted to WebP (cwebp -q 82). A test asserts every referenced asset exists on disk, is WebP, and is size-budgeted, with no orphans.

Discount codes

Codes live in the DISCOUNTS map in store.js and apply at checkout. Two ship by default:

• LAUNCH20 — 20% off the subtotal (percent).
• HUD10 — $10 off the subtotal (flat).

A discount never exceeds the subtotal — discountAmount() clamps with Math.min. Add a code by appending an entry of the form { type: 'pct' | 'flat', value, label }.

Editing the catalog

Everything is data-driven from store.js:

• Add a product — append an explicit object to PRODUCTS, or a row to the strykePkg / metaProduct tables. Set price: 0 (or a $0 first tier) for free; give tiers for paid.
• Change a price — edit the product's tiers (the first tier sets the card price).
• Add rich copy — add a DETAILS entry with an overview and a features list; it merges into the product at load.
• Add screenshots — drop WebP files in assets/ and list them in the product's screenshots array.
• Publish docs — add the id to DOC_REPOS (and to DOC_REFERENCE if it ships reference.html).

Troubleshooting

• Hero counters show "—". The stat spans are filled by store.js; if it failed to load, the dashes stay. Check the console and confirm ../store.js resolves from the page's path.
• A Docs button 404s. The id is in DOC_REPOS but its GitHub Pages site is not published; remove the id or enable Pages on that repo.
• A download link is dead. Free products link releases/latest when hasRelease is true, else the repo's /tags page — flip the flag to match the repo's actual release state.
• Theme / scheme doesn't persist. Preferences are stored under the appstore-hud-* localStorage keys; private-browsing or cleared storage resets them to defaults.

Free vs paid & download targets

A product is free when its first tier price is 0 (the isFree helper). The two paths:

• Free → a Download button. If the repo has a GitHub release it links to releases/latest; if not, it links to the repo's /tags page (per-tag source archives).
• Paid → Add to cart with a license-tier picker, routed through the checkout.

Third-party forks mirrored in the org are intentionally excluded from the catalog — they are not MenkeTechnologies products. Proprietary paid products omit the "Source" link because their repos are private.

Pricing model

Paid products are licensed per major version, not as a one-time purchase. Each sale licenses the current major version including all minor and patch updates within it; a future major version is a separate purchase. Cards show a per major version label and the detail page states the policy explicitly.

Checkout

checkout.html mirrors the Shopify hosted-checkout layout in the HUD theme: express wallet buttons (Shop Pay, PayPal, Google Pay, Venmo), a credit-card / Shop Pay / PayPal method accordion, contact + billing forms, discount codes (DISCOUNTS map), and a sticky order summary.

Note Payments are a client-side placeholder — completeOrder() simulates a confirmed order; no real charge happens. Wire each method to Shopify (redirect), PayPal Smart Buttons, or Stripe before going live. Integration points are marked INTEGRATION HOOKS: in wireCheckoutPage().

Design system

The store vendors the stryke docs HUD system verbatim, so the store and the docs share one visual language: Orbitron + Share Tech Mono, CRT scanline overlays, neon border pulse, and five swappable color schemes (Cyberpunk, Midnight, Matrix, Ember, Arctic) plus a light/dark toggle. Everything resolves from CSS variables, so a scheme switch recolors the entire store. store.css adds only the commerce surfaces — no new colors.

Hosting

Served from GitHub Pages (branch main, root) at menketechnologies.github.io/app-store. Because it is a pure static site, there is no build or deploy step — a push to main updates the live site. Pages requires a public repo on the free plan.

Tests & CI

A dependency-free node:test suite (test/store.test.js) loads store.js into a minimal DOM shim and asserts on the rendered HTML — catalog size and unique ids, free-vs-paid download wiring, per-major-version pricing copy, every detail page having an overview and rich features, checkout totals, and HTML asset references. Run it with node --test.

.github/workflows/ci.yml runs node --check on the JavaScript, the test suite, and an HTML sanity check on every push and pull request.