Repository navigation
feat(web): use-case pages built from docs/use-cases - #23
Merged
Merged
Conversation
Each docs/use-cases/<slug>.md publishes to /use-cases/<slug>; the /use-cases index, sitemap.xml and llms.txt list a new file without any other edit. Ten pages to start, covering browser profiles, routing by source app, deep links for meeting/chat/design/media apps, dev links, the picker, and link privacy. - Content collection over ../docs/use-cases with a schema that enforces the page contract (title length, summary window, related /docs ids). - A Sätteri mdast plugin rewrites relative .md links and renders fenced code as the docs page's .code block. Astro 7 replaced the remark pipeline, so @astrojs/markdown-satteri is pinned to the version astro ships. - src/lib/usecases.js checks headings, links, inbound links and JSON samples; it runs from the article route (so a broken page fails the build) and from npm test. - TechArticle + BreadcrumbList JSON-LD generated from frontmatter via a new `schema` prop on Base. - Topbar gains a "Use cases" link; to keep it on one line on phones, the section chip and GitHub link hide at ≤640px and the brand name at ≤380px. - web/README.md documents the authoring contract. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
The process for adding a use-case page: decide page vs section, check every claim against /docs and Sources, write to the README contract, and link it in. verify.py validates every rule sample with `junction config validate`, diffs every pasted `junction test` transcript against the real CLI, and has a `trace` mode that prints output ready to paste. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Use-case pages now share the landing page's 1120px column. Each article gets a sidebar listing every use case in index order, with the current one marked; it reuses the docs sidebar markup, so docs.css and docs-nav.js give it the same sticky rail and the same mobile drawer at ≤900px. The index lays its cards out three across. docs.css loads before the chrome stylesheet on these pages, so the drawer button's ≤900px rule is restated in use-cases.css. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
A long inline code span in a bullet, like a rule's action object, was nowrap and pushed the Chrome profiles page 90px wider than a phone screen. Only table cells keep nowrap now, since tables scroll on their own. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
New pages: a default browser per website (now first on the index, as the hub), Microsoft 365 links in the right account, adding any app's deep link, menu-bar rule toggles, syncing rules across Macs, and why links open in the wrong browser. The Chrome profiles page hands its Microsoft 365 example and screen-sharing section to the new pages and links to them; Zoom & Teams and developer links gain links in. Every rule and trace passes verify.py. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
Index cards show 1-3 icons from a new `icons` frontmatter field: brand marks from public/icons (adds Safari and Edge) or Lucide line glyphs in src/icons, inlined so they take the page color. The schema only accepts names with a file behind them. Seven pages get screenshots of the app: the Rules pane, the Rules menu, Deep Links, the Add App sheet, Slack workspaces, and the picker in both layouts. They were captured from a demo copy of Junction with made-up rules and real browser profiles hidden, never Settings → Browsers. The 2x captures are padded to 1400px so they all render at one scale; the build converts them to WebP. Two new pages fill out the index grid at 18: keeping work and personal browsing separate, and opening several links at once through the picker. The index is renumbered so they sit beside related pages, and existing pages link to them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
write-use-case gains a screenshot step: when a shot earns its place, capturing from a demo copy (never the maintainer's own Junction or the Browsers pane), and padding to 1400px. capture.swift lists a process's windows for `screencapture -l` and sends a link to one Junction process to open its picker. Frontmatter docs cover the new `icons` field. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
Each use case is now also published at /use-cases/<slug>.md: the source file as written, with screenshot paths swapped for the built images (links between use cases already resolve from there). Every page gets a Copy Markdown button and a .md link, and llms.txt points its use-case entries at the .md URLs. The button hands the clipboard a promise instead of awaited text, since Safari only allows a clipboard write inside the click. The code-block copy script now binds only `.code .copy-btn`, so it no longer catches the new button. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
Adds what the screenshot session and the last two batches of pages taught: keep the index grid's rows full (a multiple of 6 pages), renumber `order` to place a page beside related ones, no HTML in table cells, and don't describe undocumented UI a screenshot happens to show. The capture section gains the techniques that worked (single menu windows, hiding every https handler from the picker, scrolling before finding off-screen controls, cropping sheets, the zsh word-splitting trap, a realistic downtime estimate). Verify and report now cover the .md copy and the grid. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN
This branch was successfully deployed
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
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
Adds
/use-cases: 18 SEO-style articles written as Markdown indocs/use-cases/<slug>.md, each published at/use-cases/<slug>and, as raw Markdown, at/use-cases/<slug>.md. A new file shows up on the index, in the article sidebar, insitemap.xml, and inllms.txtwith no other edit.How it works
../docs/use-cases(web/src/content.config.js). The schema enforces the page contract: title ≤ 48 chars, summary 145–160,relatedlimited to/docssection ids,iconslimited to names with an SVG behind them.web/src/lib/markdown.js, on Astro 7's Sätteri processor): rewrites relativeother-page.md#xlinks to/use-cases/other-page#x, and renders fenced code as the docs page's.codeblock (```json rule→ title bar "rule", docs JSON colors, Copy button on JSON blocks).web/src/lib/usecases.js): one H1,## Get Junctionlast, ≥ 2 outbound links that resolve (heading anchors included), ≥ 1 inbound link from another page, uniqueorder, every JSON sample parses, no hand-written JSON-LD. It runs from the article route, so a broken page fails the build and the Vercel deploy, not only CI.public/icons, Lucide glyphs insrc/icons). Articles have a sidebar listing every use case; it reuses the docs sidebar and becomes the same drawer at ≤ 900px./use-cases/<slug>.mdserves the source with screenshot paths swapped for built images. Each article has Copy Markdown and.mdbuttons, andllms.txtlinks the.mdURLs.schemaprop onBase.astro..claude/skills/write-use-case/covers the authoring process.verify.pyvalidates every rule sample withjunction config validateand diffs every pastedjunction testtranscript against the real CLI.capture.swiftplus the screenshot recipe cover capturing app UI safely.Things to review
@astrojs/markdown-remark. Instead I use Sätteri's native plugin API through@astrojs/markdown-satteri, pinned to 0.3.4, the exact version astro 7.0.9 depends on (it dedupes). Bump this pin together with astro, or npm installs a second copy./use-cases:code-copy.jsnow binds only.code .copy-btn, so it ignores the new Copy Markdown button. Docs code-block copying is unchanged./docsdocuments. Real but undocumented features are deliberately left out: the per-rulerewritekey,extraTrackingParams, andpickerHidden. Deep-link traces are only shown where the CLI produced a realdeep link (…)result.public/icons/safari.svgandedge.svgcome from thesvg.org like the existing marks. Thesrc/icons/*glyphs are Lucide (ISC);web/README.mdnotes both.Test plan
cd web && npm test, including the use-case self-check (18 pages)npm run buildpasses, and exits 1 on a dead link or bad frontmatter (tried with a broken link and a badorder)python3 .claude/skills/write-use-case/verify.py: 18 pages, 0 problems. A hand-edited transcript is reported as a mismatch.mdhrefs left in HTML, JSON-LD parses, one H1 per article, no inlinestyle=, every slug in the sitemap andllms.txt.mdfiles built; their screenshot links resolve to files indist/_astro.mdbyte for byte; code-block Copy still works/,/docs,/changelog,/use-cases; sidebar drawer opens and navigates on phones🤖 Generated with Claude Code
https://claude.ai/code/session_01P3vb4C7A9sDDwWs4FyvjYN