Skip to content

Branded docs homepage, Sandworm announcement bar, and Materialize section#562

Draft
Corey-T1000 wants to merge 16 commits into
mainfrom
docs/promote-materialize
Draft

Branded docs homepage, Sandworm announcement bar, and Materialize section#562
Corey-T1000 wants to merge 16 commits into
mainfrom
docs/promote-materialize

Conversation

@Corey-T1000

@Corey-T1000 Corey-T1000 commented Jun 16, 2026

Copy link
Copy Markdown

What

A docs refresh in three parts, all on this branch.

Homepage & top nav

  • New docs homepage (components/docs-home.*): developer-focused hero ("Everything you need to build with SpiceDB" + a standfirst that names the reference depth — schema modeling, client SDKs, gRPC/HTTP), an ambient permission-graph animation echoing the SpiceDB pitch-deck visuals (a teal node field with colored "checks" that resolve along the graph), a five-surface Docs Index, and What's New / Releases.
  • Auto light/dark via Sandworm tokens (the homepage was previously dark-only).
  • Announcement bar restyled to match the marketing site's terminal style: mono, sand-300 accents, bracketed CTA, live GitHub star count (server-fetched, cached hourly, with a static fallback), and a cli-spinners "hamburger" cursor that runs a short burst on load, rests, and reruns on hover. Now also shown on the homepage.
  • Navbar logo shows /docs; primary CTA adopts the Sandworm button style (mono, high-contrast fill, magenta on hover).

Materialize

  • Promote Materialize from a single concept page to a top-level section (getting-started / concepts / guides / api); nav (_meta.ts) and inbound links updated.

Fix

  • discovering-spicedb: the HTTP/JSON reference linked to SwaggerHub — now points to the local Swagger page (/spicedb/api/http-api).

Notes

  • Light + dark both verified; animations respect prefers-reduced-motion.
  • This bundles the Materialize promotion with the homepage work since they share _meta.ts / page.mdx; happy to split if reviewers prefer.

Update — review-feedback pass

Follow-up changes from team review, layered on the above:

IA + naming

  • "AuthZed" surface renamed Managed SpiceDB (reads as a product, not company info; pairs with open-source SpiceDB above it).
  • Best Practices moved under SpiceDB → /spicedb/best-practices (content is SpiceDB-specific) with a permanent 308 redirect from /best-practices, and dropped from the top nav (also eases nav width).
  • Docs Index trimmed to four surfaces (Best Practices folded into SpiceDB).

Homepage data

  • Releases and What's New now pull from live sources (SpiceDB GitHub releases + recent merged docs PRs) with ISR caching + real fallbacks — replacing the hardcoded placeholder data.

Responsive fixes

  • "Book a demo" CTA is desktop-only (≥1024px) so it doesn't push the top nav into overflow at medium widths.
  • Hero graph no longer stacks below the copy at ≤900px — it's "pushed off" (clipped, behind the text, zero added height) so the Docs Index stays high; dropped entirely on phones (≤560px).

Reviewer aid — non-production only

  • New/modified content pages get a banner ("New" / "Updated"), plus a /changes review index — auto-detected via git diff vs origin/main, scoped to content (app/**/page.mdx), styling excluded.
  • Gated to local dev + Vercel preview: a production build emits an empty manifest (no banners) and /changes returns 404, so live docs readers never see it.

🤖 Generated with Claude Code

…section

Homepage & navigation
- New docs homepage (docs-home): developer-focused hero, ambient
  permission-graph animation echoing the SpiceDB pitch deck, a five-surface
  index, What's New + Releases, auto light/dark via Sandworm tokens
- Announcement bar restyled to the marketing terminal style: mono, sand-300
  accents, bracketed CTA, live (hourly-cached) GitHub star count, and a
  cli-spinners "hamburger" cursor that runs on load, rests, and reruns on hover
- Navbar logo shows "/docs"; primary CTA uses the Sandworm button style

Materialize
- Promote Materialize from a single concept page to a top-level section
  (getting-started / concepts / guides / api); update nav and inbound links

Fixes
- discovering-spicedb: HTTP/JSON reference pointed at SwaggerHub; now links to
  the local Swagger page (/spicedb/api/http-api)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

CLA Assistant Lite bot:
Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.


I have read the CLA Document and I hereby sign the CLA


You can retrigger this bot by commenting recheck in this Pull Request

@github-actions

github-actions Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Preview deployment status for this pull request.

Name Status Preview Updated (UTC)
docs 🟢 Ready Visit Preview Jun 17, 2026 08:38pm

- Landing-page links 404'd under the deploy's basePath (/docs): the homepage
  used plain <a href="/..."> which Next doesn't prefix. Route internal links
  through next/link (external stay anchors) so basePath is applied.
- The home takeover made the navbar fully transparent (killed the blur bg), so
  scrolled content showed through it. Restore Nextra's themed navbar background;
  only soften the border.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Corey-T1000 and others added 4 commits June 17, 2026 11:10
- Fold Best Practices into SpiceDB (content is SpiceDB-specific) — drops the
  index from five surfaces to four; BP now a SpiceDB sublink
- Rename the AuthZed surface to 'Managed SpiceDB' (bare 'AuthZed' read as
  corp info; pairs with open-source SpiceDB above it) — ENTRIES + _meta.ts
- Promote 'Book a demo' from the page TOC to the top nav (persistent
  conversion vs lost beside a short TOC); rail keeps the Cloud self-serve CTA

Physical /best-practices -> /spicedb move + redirect left as a follow-up
(needs an SEO redirect for the indexed URL).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Nav 'Book a demo' CTA is now desktop-only (>=1024px). It rendered at
  medium widths before Nextra collapsed the menu, pushing the 5 nav tabs
  past the viewport edge (the 'Manage...' cutoff).
- Hero graph no longer becomes a stacked row at <=900px that shoves the
  docs index down. It's absolutely positioned, bled off the right behind
  the copy (clipped, faded), adding zero flow height. Stack order unchanged.
  Dropped entirely on phones (<=560px) where there's no room beside the text.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Flags pages whose CONTENT is new or modified vs origin/main so the team can
spot what to review. Styling/component changes don't flag a page.

- scripts/build-changed-manifest.mjs: git-diffs app/**/page.mdx vs origin/main
  at dev/build start -> lib/changed-pages.json (route -> new|updated). Skips
  deletions; best-effort (empty manifest if git/base unavailable).
- components/content-status.tsx: per-page banner ('New page' / 'Updated
  content'), basePath-safe link to /changes, renders nothing on unchanged pages.
- app/changes: review index listing all changed pages (hidden from nav).
- Wired into app/layout.tsx; package.json dev/build regenerate the manifest.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Best Practices content is SpiceDB-specific, so it now lives at
/spicedb/best-practices (in the SpiceDB sidebar) instead of as a top-level
nav tab. This also relieves the top-nav width pressure.

- git mv app/best-practices → app/spicedb/best-practices
- drop the top-level 'best-practices' page from app/_meta.ts; add it to the
  SpiceDB section nav (app/spicedb/_meta.ts)
- permanent 308 redirect /best-practices(/*) → /spicedb/best-practices(/*)
  so the indexed URL keeps working (fragments preserved by the browser)
- rewrite inbound links (read-after-write, performance, postgres-fdw, the
  docs-home SpiceDB sublink)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The banners + /changes page must never ship to the live docs. Gate on
NODE_ENV/VERCEL_ENV so it shows in local dev and Vercel preview builds only:
- production build emits an empty manifest (no banners, empty data)
- /changes returns notFound() in production (route not publicly reachable)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Fixes the 'Lint Everything' (oxfmt --check) CI failure across the branch's
new/changed files. Pure formatting, no behavior change.
oxfmt de-indented the list inside <Callout> in two stub pages, which broke
nextra's MDX compile (expected closing tag </Callout>) and failed the build.
Revert those two files to their hand-formatted, building state and add them
to oxfmt ignorePatterns (same as the autogenerated MDX) so lint stays green
without re-mangling them. Verified: oxfmt --check clean + next build succeeds.
There was a public/favicon.ico but nothing linked it, so no <link rel=icon>
was emitted and the /docs basePath meant the browser's root /favicon.ico
request never hit it. Move it to app/favicon.ico so Next auto-emits a
basePath-correct icon link.
- Nextra accent hue 45 -> 28 so links/active-nav read as Sandworm sand, not gold/yellow
- Docs Index sublinks stay open (no hover-collapse) so the sub-navigation is visible at a glance
- Each surface's index number takes its own accent color (SpiceDB magenta, Managed SpiceDB teal, Materialize violet, MCP blue) to color-code the surfaces
The color prop only set hue+saturation, so the accent rendered at Nextra's
default lightness — a muddy orange, not sand. Add explicit lightness so the
docs-page accent (links, active nav, highlights) equals sand-300 exactly in
dark (28 100% 72%) and a readable darker sand step in light.
Replace the ✅/❌ emoji in feature tables with <Yes/> / <No/> components
that mirror the marketing pricing comparison: a teal→violet gradient disc
with a dark Lucide check, and a red-outlined disc with a red Lucide x. Inline
Sandworm colors (no new dep). Registered globally in mdx-components.
The landing route forced the navbar to max-width:1180px + clamp(32-80px)
padding to align with the hero frame, but that made the top nav visibly
narrower/more-padded than on doc pages (which use Nextra's 90rem/1.5rem).
Drop the override so the nav is identical across home and doc pages.
@Corey-T1000

Copy link
Copy Markdown
Author

CI status — the two red checks are not code/build issues

The build is green. Deploy Preview (the real Vercel build + deploy), Lint Everything, CodeQL, both Analyze jobs, Spellcheck, and Snyk all pass.

The two failing checks:

  • Check Signature (CLA) — the CLA-assistant bot requires the committers to sign the CLA; it's a contributor-agreement gate, not a build failure. Resolving by signing on this PR. (A Co-Authored-By trailer on a few early commits may also flag an extra contributor — will strip it if signing alone doesn't clear the check.)

  • Preview Deploy — a pre-existing repo CI mismatch, unrelated to this PR's changes:

    • vercel.json sets git.deploymentEnabled: false (this is on main too, unchanged by this branch), so Vercel's vercel[bot] never posts a git-integration preview deployment.
    • The link-checker.yaml workflow uses patrickedqvist/wait-for-vercel-preview, which polls for exactly that vercel[bot] deployment and errors with no vercel deployment found after 10 retries — so it fails this way on every PR.
    • The real preview deploy happens in vercel-preview.yml (the Deploy Preview job, via the Vercel CLI), which passes. The preview does deploy; only the stale waiter fails.

Net: the code and build are clean. The CLA needs a signature; the Preview Deploy red is a workflow/config reconciliation for the repo (point the link-checker at the CLI deploy, or re-enable git deploys), not anything in this PR.

The Yes disc used the bright dark-mode Sandworm gradient, which washed out on
white table cells. Move styling to feature-icon.css with a light/dark split:
light gets a deeper saturated teal→violet disc + white check (pops on white);
dark keeps the brighter gradient + dark check.
Drop the placeholder Download API stub + nav entry, and its now-moot oxfmt
ignore entry.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant