Add project marketing website#44
Draft
SethMorrowSoftware wants to merge 12 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.
…atformer) Merged latest main and refreshed the site's content to match: - Get started: rewritten to the new install flow — Package box2dxt.lcb into a .lce and install it; the per-platform native library is bundled inside and loads automatically (no download, rename, sudo, or /usr/lib). - 'What it is' + Self-test stats: ~125 -> ~180 deterministic assertions (harness is now v22); 'prebuilt' bullet now describes the bundled, auto-loading library. - Examples: platformer is now six scrolling biome levels (grass, stone, ice, haunted, desert, cavern) with a bestiary, joints, sprites, and audio. - Game Kit feature: player moves updated (duck, drop-through). - Docs: regenerated from the updated docs/*.md (the new install guide flows into the hosted Getting started page); added the new Asset expansion plan to the 'going deeper' GitHub list. Verified: all pages tag-balanced, JS clean, no stale install/count copy; the 2 unresolved in-page anchors are the pre-existing kit-guide TOC nit.
Merged main (61 commits) and reshaped the site per 'user-facing only — no dev docs/info': - Docs: dropped the 'going deeper' developer-doc list entirely (API reference, architecture, building-from-source, internal plans) — several were archived/removed on main anyway. The manual now hosts just the three user guides + one plain 'full source on GitHub' link. - 'How it works' card: reframed from the 4-layer C-shim/FFI/ABI architecture to a friendly three-part story (You call it · The Kit runs it · Box2D powers it) — no internals jargon. - Features: 'Safe by design' drops the C-shim mention; 'Cross-platform' drops the build-it-yourself/CMake line and emphasizes the bundled, auto-loading library. - Examples: platformer is now seven biome levels (adds Stone Keep) with health/hearts, character select, serpents, an art HUD, and more. - Regenerated the hosted guides from the updated docs/*.md. Verified: all pages tag-balanced, JS clean, every internal link 200, and no 'C shim / FFI / CMake / build-it-yourself / prebuilt' language on the site.
Make the site as complete and professional as possible, all within the
HyperCard identity and the vanilla stack:
- New cards (now ten): an FAQ (accordion) answering the real user questions
(free? commercial? need C? which platforms? LiveCode too? fast enough?),
and a 'What's new' card highlighting the v0.3.0 user-facing additions.
Added to the menu, the launcher, deep links, and message-box aliases; a
'★ New in v0.3.0' pill in the hero links to it.
- Accessibility: skip link, an ARIA live-region that announces each card
('Examples, card 6 of 10'), aria-current on the active nav item,
aria-hidden on inactive cards, and visible focus rings throughout.
- SEO/social: canonical + theme-color + Open Graph + Twitter cards + JSON-LD
SoftwareApplication, and a generated 1200x630 og-image.png (a branded Mac
window with a crate pile). Doc pages get canonical/theme-color/skip link too.
- Copy-to-clipboard button on every code block (home + docs).
- A styled 404.html ('card not found') using absolute asset URLs so it
renders from any missing path on Pages.
- A subtle 'deal-in' intro for the stack window (honours reduced-motion).
Verified: 10 cards; HTML balanced (incl. 404 + docs); JS clean; zero curly
quotes; nav to FAQ/What's-new works (menu, deep link, message box); copy
button writes to clipboard ('copied!'); doc pages carry skip link + 7 copy
buttons + canonical; no runtime console/page errors.
Free the content from the one-card carousel while keeping the HyperCard look, and add real interactivity — including running handlers in-page. - New: the PLAYGROUND. Write b2k... handlers and Run them against a live physics world in the browser. A small, sandboxed xTalk interpreter (own tokenizer/parser, no eval, budget-capped) supports b2kSpawnBox/Ball/Gravity/Impulse/Clear, repeat (with i=a to b and N times), put/if, variables, string concat, and random() — plus one-click presets (tower, rain, zero-G, kick, pyramid) and Cmd/Ctrl+Enter to run. - Refactored the physics into a reusable createWorld() factory; the hero toy and the playground are two independent worlds, both drag/fling, paused when off-screen. - Replaced the single-card flipping with a freely scrollable 'desktop' of Mac-style windows: scroll-spy nav (menu highlights the section in view), smooth scrolling, and scroll-reveal windows (all reduced-motion aware). - The Message Box is now a floating HyperTalk console: 'go to <section>', 'run', 'clear', or any b2k... command typed straight in. - Kept all prior polish (a11y, copy buttons, FAQ, SEO/social + OG, 404) and restored the canonical 'one paste' snippet as a section. Verified headlessly: interpreter runs (tower=6, pyramid=15 via nested loops, custom put/concat -> 'answer = 22'), scroll-spy tracks, Message Box spawns + navigates; HTML balanced, JS clean, zero curly quotes, no console or page errors; responsive on mobile.
Grow the in-browser interpreter from a handful of commands into a real (small) xTalk engine — still self-contained, sandboxed (own lexer/parser, no eval), and budget-capped: - Control flow: if / else if / else (single-line + block); every repeat form (with i = a to b [down to], N times, while, until, forever, for each item/word/line/char in); next/exit repeat; exit; return. - User-defined 'on' handlers AND 'function's (params, recursion). - Containers: put into/before/after, get, set, add/subtract/multiply/divide, ask/answer, it, the result, set the itemDelimiter. - Chunk expressions: char/word/item/line N [to M] of X, ordinals (first/last/middle/any, with or without 'the'), the number of ... in X. - Operators: + - * / ^ mod div, & &&, comparisons, is/is not/is in, contains, is a <type>, and/or/not. - Function/constant library: random round abs trunc min max sum average sqrt trig ln exp length offset toUpper/toLower numToChar/charToNum value, the milliseconds/seconds/ticks/date/time; empty space tab return comma quote pi true false ... - HyperTalk touches: unquoted literals evaluate to their own name (so unquoted colours work), line continuation with '\'. - Two new presets (Functions, Chunks); the message box now runs any xTalk line or bare expression; widened the playground note. Verified headlessly: a control-flow/chunk script returns '2,1024,3,20,HI,123,ok'; user-function and chunk presets run; and a 10-case expression battery (the number of words, last item of, char 1 to 3 of, is in, contains, round(x,2), max/min, and/not, & vs &&, offset) all pass — HTML balanced, JS clean, zero curly quotes, no console/page errors.
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