Add project marketing website#44
Draft
SethMorrowSoftware wants to merge 5 commits into
Draft
Conversation
A self-contained, dependency-free landing page for Box2Dxt in website/: - index.html / styles.css / app.js — modern dark theme, fully responsive, with an interactive hero physics toy (a hand-written impulse-based circle solver: gravity, walls, ball-ball collisions, mouse/touch grab + fling, click-to-spawn) that demonstrates the project's premise viscerally. - Sections cover ease of use (the sixty-second b2kQuickStart snippet, paste-and-run examples), abilities (full Box2D surface, the Game Kit, the safety model), the three-layer architecture, all six examples, the docs, and a four-step get-started guide. - website/README.md documents local preview and deployment. - .github/workflows/pages.yml publishes website/ to GitHub Pages on push to main (enable Pages with the GitHub Actions source once). No build step; opens directly in a browser and degrades gracefully to system fonts offline.
Replace the generic dark-SaaS look with a personality rooted in the
project itself: the xTalk/HyperCard lineage and Box2D's signature crate.
- Warm 'paper' background with a faint 1-bit dot grid; ink-on-paper with
one signature colour (Box2D crate-orange).
- Authentic classic-Mac window chrome (striped title bars, square close
boxes) reused across the hero demo, code sample, the layer diagram, and
example cards; hard ink borders with solid offset shadows; tactile
press states on buttons.
- The card/stack metaphor as the actual layout: sections are numbered
'cards' and the three-layer architecture is drawn as a literal stack of
windows.
- Pixel font (Silkscreen) for chrome/labels; Space Grotesk for display;
JetBrains Mono for code. Flat outlined SVG icon badges replace emoji.
- Hero demo reborn as tumbling, stacking Box2D crates (+ cannonballs):
circle colliders for stability, rendered as rotating crates with
X-braces; grab/fling now imparts spin.
- Copy re-voiced around cards & stacks ('physics for the card & stack
people', 'a whole scene in a single paste').
Verified: node --check clean, HTML balanced, zero curly quotes, 25 links
correct; re-screenshotted at desktop + mobile.
Render every docs/*.md as a styled HTML page under website/docs/ so readers stay in one consistent HyperCard-themed experience instead of bouncing to raw Markdown on GitHub. - tools/build-docs.py: a small, dependency-free Markdown->HTML generator (stdlib only, so no pip/network needed in dev or CI). Handles ATX headings with GitHub-compatible anchor slugs, fenced code, GFM pipe tables, blockquotes, nested lists, and inline code/links/bold/italic. Doc-to-doc .md links are rewritten to in-site .html; non-doc links go to GitHub. - website/docs/: generated pages — a manual overview plus one page per doc, each with the menu bar, a sticky 'THE MANUAL' sidebar, and the doc inside a titled Mac window. New .prose styles theme headings, tables, code, callouts (blockquotes), and rules to match the site. - index.html: the docs section, the footer, and 'Read the full guide' now link to the local pages (same tab) — zero .md-on-GitHub doc links remain. - pages.yml: runs the generator before every deploy and redeploys on docs/** changes, so the live site never serves stale docs. - README: documents the generator and the 'edit .md, regenerate' rule. Verified: all 10 pages tag-balanced; JS clean; in-page TOC anchors resolve (the 2 that don't are a pre-existing kit-guide TOC numbering nit, broken on GitHub too); every home->doc link returns 200.
Host only the approachable docs a LiveCode user needs; send the deep/ internal material to GitHub (the hardcore go there anyway). - Hosted: Getting started, Kit guide, Kit reference (the DOCS list). - Moved to GitHub-only: API reference, Architecture, Game engine spec, Building, Expansion prep (a new EXTERNAL list). Doc-to-doc links that point at these are rewritten to GitHub automatically; the removed generated pages are deleted. - Manual overview: three numbered guide cards + a 'Going deeper' list linking the GitHub-only docs; sidebar gains a 'Full docs on GitHub' link. - Home 'Learn it' section: 'Guides, not homework' — three guides plus a one-line 'deeper -> GitHub' pointer (replaces the 8-card grid). Footer docs column points at the hosted pages. Verified: all pages tag-balanced, JS clean, zero curly quotes, and every internal link returns 200 (no dangling links to the removed pages).
Turn the home page from a long scroll into an actual stack of cards you flip through one at a time — more interactive, more logically laid out, and authentically HyperCard, on the same vanilla HTML/CSS/JS. - One card on screen at a time inside a single 'stack window' (with the rest of the stack peeking out behind it). Eight cards: Home, What it is, One paste, What you get, How it works, Examples, Docs, Get started. - Navigation: top menu, a Home-card launcher, a bottom card-nav bar with a live N/8 counter, the title-bar Home box, and the keyboard (left/right to flip, H home, M message). Card-flip transitions (dissolve + directional slide, iris for Home) that honour prefers-reduced-motion. - Deep links + history: every card has a hash and Back/Forward work; the doc pages' menu links jump straight to the matching card. - The Message Box: a HyperTalk-ish console (press M) — 'go to examples', next/prev/home, 'spawn a crate', reset, gravity, help. - Physics is now driven by the active card (runs on Home, pauses elsewhere) and exposes a small API the Message Box calls. - Graceful fallback: an html.js flag gates single-card mode, so with JS off the cards stack into a normal scroll page; the Home card is marked active in markup so it shows even if the script fails to load. Verified: all pages tag-balanced, JS clean, zero curly quotes, no runtime console/page errors; flip + message-box nav exercised headlessly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this adds
A small, self-contained, dependency-free marketing site for Box2Dxt that advertises its ease of use and abilities. Lives in a new isolated
website/folder — it touches none of the existing engine, Kit, examples, or docs.Highlights
b2kQuickStartsnippet (with hand-rolled syntax highlighting, no JS highlighter dependency) and the paste-and-run examples.Deployment
.github/workflows/pages.ymlpublisheswebsite/to GitHub Pages on push tomain(and via manual dispatch). One-time setup: Settings → Pages → Source: GitHub Actions. The workflow only triggers onmain, so this PR won't deploy anything on its own.Verification done
node --check app.js— clean.html.parser— all tags balanced, none out of order.SethMorrowSoftware/Box2Dxt; highlight spans balanced.Notes / open questions
/docsbranch source).https://claude.ai/code/session_01Geg4m95CCarzFwZM8daWdf
Generated by Claude Code