docs: re-skin to txn2 design system, add hero mark, OG card, SEO#84
Merged
Conversation
Re-skin mcp-s3.txn2.com to match the txn2 visual identity at token-alignment level 2, mirroring the kubefwd and txeh adoptions. - DESIGN.md records the local adoption decisions and defers to txn2/www DESIGN.md and tokens.json as the canonical source. - mkdocs.yml: single dark slate palette, font: false so the upstream Google Fonts URL loads with trimmed axes, dropped light/dark toggle. - docs/overrides/main.html: upstream Fraunces/Instrument Sans/ JetBrains Mono link, OG and Twitter meta, skiplink. - docs/overrides/home.html: custom homepage template with rail, hero, flagship server and library cards, terminal demos, stack list, coda, and home-footer. - docs/overrides/404.html: restyled not-found page that inherits the rail and footer chrome. - docs/stylesheets/extra.css: homepage components scoped under page--home plus Material chrome restyle on the slate scheme. - docs/index.md: stub front matter pointing at home.html.
Implement the canonical .hero__main / .hero__mark pattern from the upstream txn2/www DESIGN.md (which gained a new component spec for this in the same change set). The mark anchors the hero on the left; the typographic display lives to its right at a tuned smaller scale. - docs/images/mcp-s3-symbol.svg: extracted geometric mark from the historical MCP-S3 banner. Two paths only: paper linework and a signal-orange circle. Inlined into home.html so the accent path can breathe via a 6s scale animation (accelerates on hover, drops under prefers-reduced-motion). overflow: visible on the SVG so the scaled circle does not clip at the viewBox edge. - docs/overrides/home.html: hero rewired to .hero__main flex with the mark on the left and a flush-left three-row Fraunces display on the right. Asymmetric row indents removed (the mark anchors the left edge instead). Sister-project links in the lede and ecosystem stack row point at the docs sites, not GitHub repos. - docs/stylesheets/extra.css: .hero__mark sized clamp(144px, 20vw, 288px), display sized clamp(44px, 8vw, 140px). 880px breakpoint switches .hero__main to a vertical stack and shrinks the mark. - docs/images/mcp-s3-og.svg + .png: 1200x630 social card mirroring the homepage hero (symbol left, typographic display right, mono metadata top and bottom, signal-orange registration ticks and URL). Rasterised with rsvg-convert. - docs/overrides/main.html: full SEO surface. og:image points at the new card with width/height/type/alt; og:locale, og:site_name, per-page-aware og:title and twitter:title (homepage marquee vs. inner-page "Page · Site"); JSON-LD SoftwareApplication block; keywords; canonical; author. - docs/llms.txt: llms.txt convention docs map. - DESIGN.md: file map records the new SVG / PNG / llms.txt entries and notes that mcp-s3 is the first sister project to adopt the canonical hero mark pattern. Sister projects should follow the same extraction (square symbol, two paths, paper + signal).
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
1 participant
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
Brings the mcp-s3.txn2.com documentation site in line with the canonical txn2 design system (token-alignment level 2), matching the kubefwd and txeh adoptions, and ships the new canonical
.hero__main+.hero__markpattern alongside a proper SEO surface.aad2a32): single darkslatepalette, customhome.htmltemplate (rail, hero, flagship cards, terminal demos, stack list, coda, home-footer), Material chrome restyle on the slate scheme, restyled 404, single Google Fonts request loading Fraunces / Instrument Sans / JetBrains Mono.19a18c2): geometric mark extracted from the historical MCP-S3 banner intodocs/images/mcp-s3-symbol.svg(paper linework + signal-orange circle). Inlined into the hero so the accent path can breathe (6s scale animation, accelerates on hover, drops underprefers-reduced-motion). Hero rewired to a.hero__mainflex layout with mark on the left, three-row Fraunces display on the right.docs/images/mcp-s3-og.png(rasterised frommcp-s3-og.svgwithrsvg-convert).docs/overrides/main.htmlcarries the full SEO surface:og:image:type/width/height/alt,og:locale,og:site_name, per-page-awareog:title/twitter:title, JSON-LDSoftwareApplication, keywords, canonical, author.docs/llms.txtfollows the llms.txt convention.mcp-trino.txn2.com,mcp-datahub.txn2.com,mcp-data-platform.txn2.com), not GitHub repos.DESIGN.md: new local adoption record (token-alignment level 2). The hero mark and SEO pattern are documented canonically in the matching upstreamtxn2/www/DESIGN.mdchange so sister projects can adopt the same treatment.Visual
docs/images/mcp-s3-og.png(1200x630) is the same composition shown on the homepage hero: symbol on the left, Fraunces display on the right, mono metadata top and bottom, signal-orange registration ticks.Test plan
python3 -m mkdocs build --strictpasses locally (verified)/server/,/library/,/reference/) inherit the slate scheme and the upstream Google Fontshttps://mcp-s3.txn2.com/images/mcp-s3-og.pngafter deploy; preview in opengraph.xyz and the Twitter card validatorhttps://mcp-s3.txn2.com/llms.txtreachablegrep -RE "—|–" docs/ mkdocs.ymlreturns empty)prefers-reduced-motion: reducecancels the symbol breath, ticker, and rail spinCompanion change
Canonical pattern docs went into a separate commit on
txn2/www(master, not yet pushed) so sister sites can adopt the same hero mark and SEO surface from one source of truth.