feat: GitHub Pages site for flow#60
Merged
Merged
Conversation
H.264 encodes of the four-act demo GIFs plus a poster frame each. Encoded locally so CI doesn't need ffmpeg; total weight is ~5MB (down from ~14MB GIFs). The Pages site loads these as <video autoplay muted loop>, with the existing GIFs kept as <noscript> fallback and the reduced-motion path. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a static site under site/ that introduces flow at a glance and embeds the four-act demo as video. Dark-only terminal aesthetic on the hero/demo bands, brief-styled (file-tab header, What/Why/Done-when) treatment on Why flow / How context compounds / Playbooks / Install. - site/index.html, styles.css, script.js — pure HTML/CSS/vanilla JS, no build step. Above-the-fold weight ~50KB, system font stack, videos preload only metadata, prefers-reduced-motion is honored, clipboard copy buttons on install snippets. - site/demo/ — symlink to ../docs/demo/ so local serving and CI deploy share one source of MP4s + posters. - .github/workflows/pages.yml — orphan force-push to gh-pages on push to main, filtered to site/** and docs/demo/**. GitHub Pages still needs to be enabled in repo Settings (one-time) to point at the gh-pages branch the workflow creates. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a Website · Install · Demo · Changelog nav row under the wordmark pointing at the new facets-cloud.github.io/flow site. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the hand-drawn wave icon with the actual w path from assets/flow-logo.svg, centered inside a 64×64 rounded tile. The gradient definition mirrors the wordmark's waveGradient (same stops, same x1=9710 → x2=13250 coords in the path's local space) so the favicon renders the identical green → teal → blue wave as the wordmark and footer mark. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds controls + controlslist="nodownload noremoteplayback noplaybackrate" to all four demo <video> tags so visitors can pause and scrub the timeline. Autoplay + muted + loop still work on first load; the controls just become available on hover/interaction. Drops the v.controls = false toggle from the reduced-motion handler since the HTML attribute now drives the default; reduced-motion still pauses the video and surfaces the poster. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds full light-mode support driven by prefers-color-scheme and a small batch of layout / accessibility fixes surfaced during local testing. Theme: - Inline <head> script sets html[data-theme="light|dark"] synchronously before paint, so the swap can't flash and can't be defeated by stale CSS cache or browser-level "force dark for site" flags. - script.js adds a matchMedia change listener that keeps data-theme in sync with live OS toggles, no refresh needed. - styles.css gains a :where(html[data-theme="light"]) block + an @media (prefers-color-scheme: light) fallback for JS-disabled users. Both define the same light-mode token values. - Surfaces that should stay dark in both themes (terminal frames, code blocks, copy buttons, both architecture diagrams) now key off a new --code-* token family that doesn't flip. --code-accent-1/--code-accent-2 keep the scoop/sweep diagram labels, codeblock prompt sigil, and copy-button "copied" state visible on those dark panels. - Wordmark gradient stops switch to CSS-driven .wm-s1/s2/s3 classes so the wave is one source of truth. Layout: - Hero is back to a single-column centered block (wordmark, tagline, prompt line, CTAs) instead of the empty-on-the-right layout. - Mac-style traffic-light chrome bar at the top of the hero removed. - Brief sections drop the .md tab pill and the path metadata line — just the section title + body. - Demo and Install sections drop the "$ flow show demo" / "$ flow init" kicker pre-titles; sections start clean at the H2. Fixes: - pre code now resets the inline-code border/background/padding so the install bash snippet no longer renders a per-line underline on light bg (each line of a multi-line inline <code> inside <pre> was drawing its own border). - a:not(.btn):hover excludes buttons from the link-hover gradient color so the "See it in action" / "Install" buttons keep readable contrast in their hover state. - All seven external links (hero GitHub icon, five footer GitHub links, Facets Cloud legal link) get target="_blank" rel="noopener noreferrer" so they open in a new tab and don't leak the opener context. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
rr0hit
approved these changes
May 27, 2026
Contributor
rr0hit
left a comment
rr0hit
left a comment
There was a problem hiding this comment.
Reviewed the site locally — looks really good. Merging.
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.
Summary
site/introducing flow at a glance, with the four-act demo embedded as MP4 video..github/workflows/pages.ymlforce-pushes to an orphangh-pagesbranch on push tomain, filtered tosite/**+docs/demo/**.site/demois a symlink to../docs/demoso local serving and the CI publish step share one source of MP4s + posters.<video>source, with the GIFs surviving as<noscript>and reduced-motion fallback.One-time setup required after merge
GitHub Pages isn't enabled on the repo yet (the
/pagesAPI returns 404). After this PR merges and the workflow's first run creates thegh-pagesbranch:gh-pages// (root)https://facets-cloud.github.io/flow/.Test plan
git checkout feat/gh-pages-site && python3 -m http.server 4173 -d site→ open http://127.0.0.1:4173/ and verify the page renders end-to-end (hero, all four demo videos autoplay/loop, brief sheets, both diagrams aligned, install copy buttons work).Install flow from https://github.com/Facets-cloud/flow, manual install copies the full bash snippet).pages.ymlworkflow runs and createsgh-pages(visible in the Actions tab + as a new branch on origin).https://facets-cloud.github.io/flow/.🤖 Generated with Claude Code