Skip to content

Migrate the landing page to React (keep docs & blog on MkDocs)#3980

Draft
peterschmidt85 wants to merge 17 commits into
masterfrom
landing-react-migration
Draft

Migrate the landing page to React (keep docs & blog on MkDocs)#3980
peterschmidt85 wants to merge 17 commits into
masterfrom
landing-react-migration

Conversation

@peterschmidt85

@peterschmidt85 peterschmidt85 commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

What

Replaces the MkDocs home.html landing with the React app from landing-v2 (now in website/), while docs and blog stay on MkDocs. Same single-origin URL structure:

  • / → React landing (new)
  • /docs, /blog → MkDocs (unchanged)

How it fits together

  • website/ — the Vite + React landing. Vite assetsDir is website-assets/ and public files live under public/static/, so the build overlays onto the MkDocs site/ without colliding with MkDocs's /assets/. The app owns only /; /old is kept as a template for future product pages (dev-reachable, not in the production deploy).
  • scripts/docs/build_site.sh — builds the landing + mkdocs build, then overlays website/dist onto site/.
  • CI — build-docs.yml now builds the combined site (so the landing is also validated on PRs); docs.yaml ("Build & Deploy Site") deploys it via the unchanged cross-repo push. No separate/parallel workflow.
  • MkDocs index.md redirects to /docs/ for local mkdocs serve (the React index.html overlays it in the real build, so the redirect never ships).
  • Analytics & social — the landing has its own GA4 tag (same G-JX21114P7B, skipped on localhost) and OG/Twitter metadata, reusing the MkDocs-generated home social card.

Local dev

Tested

Built and deployed end-to-end to a staging Pages site that mirrors dstackai.github.io → dstack.ai: https://peterschmidt85.github.io/. Verified /, /docs, /blog, a blog post, cross-links, GA, and OG. Both a static deploy and the adapted workflow running in real GitHub runners produced identical output.

Notes / follow-ups

  • The React landing and the MkDocs docs/blog chrome look different (React vs Material); harmonizing the docs header is a separate task.
  • Some inherited dead CSS remains in website/src/styles.css (e.g. .site-menu-button); left as-is to keep this diff focused.
  • Real cutover = point dstackai/dstack's deploy at this workflow; the docs/blog content and CNAME are unchanged.

🤖 Generated with Claude Code

Andrey Cheptsov and others added 17 commits June 18, 2026 12:37
@claude
Add React landing (website/) and combined site build, keep docs+blog …
4ba0b1a 
…on MkDocs

Migrates the marketing landing from the MkDocs `home.html` template to the React app
from landing-v2, while docs and blog stay on MkDocs. Same single-origin URL structure:
`/` = React landing, `/docs` + `/blog` = MkDocs.

- website/: the Vite + React landing (copied from landing-v2), made integration-ready:
  - vite assetsDir -> website-assets/ and public/ -> public/static/ so the build can be
    overlaid onto the MkDocs site/ without colliding with MkDocs's /assets/ tree
  - app owns only `/` (dropped the /old and /blog routes and the SPA 404.html copy)
  - docs/blog/terms/privacy links are same-origin (configurable via VITE_DOCS_BASE)
- scripts/docs/build_site.sh: build landing + `mkdocs build` + overlay -> ./site
- .github/workflows/site.yaml: build + cross-repo Pages deploy (adapts docs.yaml;
  inputs allow deploying to a staging Pages repo)
- just recipes: website-dev, website-build, site-build, site-serve

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Build combined site in the existing docs workflow; drop temporary sit…
3a38a61 
…e.yaml

Fold the landing build + overlay into the reusable build-docs.yml (now builds the full
site via scripts/docs/build_site.sh) instead of a separate parallel workflow:
- build-docs.yml: add Node setup and run build_site.sh (landing + mkdocs + overlay).
  Consumed by both docs.yaml (deploy) and build.yml (PR build check), so the landing
  now also gets validated on PRs.
- docs.yaml: unchanged behavior; renamed to "Build & Deploy Site" since it now ships
  the landing too. Still cross-repo deploys to dstackai.github.io.
- Remove the standalone site.yaml that was only used to drive the peterschmidt85
  staging experiment.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Keep the Old React page as a template for future product pages
cd05d14 
Restore src/pages/Old and its wiring (the /old route, the App layout context it uses,
the top-nav drawer trigger, and the Cloudscape placeholder images). It stays reachable in
dev (`npm run dev` at /old) as a starting point for product pages; in production this app
owns only `/`, so MkDocs serves everything else. Same-origin docs/blog link changes are
preserved.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Redirect the MkDocs landing to /docs; drop the old landing template
b8a9019 
The landing ("/") is now the React app in website/. When the docs are served on their own
(`mkdocs serve`), index.md now redirects to /docs/ via a small redirect.html template, and
the 52KB home.html landing template is removed. In the combined build the React index.html
overlays this, so the redirect never ships to production. index.md keeps a title/description
so the social plugin still generates the home card the landing reuses as its OG image.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Add Google Analytics and OG/social metadata to the landing
a9c2f9f 
The landing is now a separate React app, so it needs its own analytics and share metadata
that the MkDocs theme used to provide. Add the GA4 tag (same property as the docs/blog,
G-JX21114P7B; skipped on localhost so dev doesn't pollute the property), a proper title and
description, canonical/favicon, and Open Graph + Twitter tags. The OG image reuses the card
the MkDocs social plugin generates for the home page (assets/images/social/index.png).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
docs: describe the React landing and combined build in DOCS.md
dae6ba6 
Keep DOCS.md focused on the docs, but note the site now has three parts (landing/docs/blog),
how to preview the landing (just website-dev) and build everything (just site-build), and
that `mkdocs serve` alone redirects / to /docs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Add multi-column site footer with brand + social links
ec13c03 
Restructure the footer into a brand block (logo + GitHub/Discord/X/LinkedIn
icons) and content-width link columns (Documentation, Examples, Community,
Company), mirroring dstack.ai. Columns sit flush to the right edge on desktop,
stack below the brand under 1100px, and drop to a clean 2-up grid on phones.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Remove orphaned testimonial images from the old MkDocs landing
3e5dbc0 
mkdocs/overrides/assets/images/quotes/ was used only by the old landing
template (overrides/home.html), which was dropped during the React landing
migration. Nothing references these images anymore; the React landing keeps
its own copies under website/public/static/quotes/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Theme Cloudscape to the dstack visual style + landing polish
c6a7e53 
Theme Cloudscape through its official applyTheme token API (cloudscape-theme.ts):
square corners, text-color hairline borders, dark filled primary buttons,
transparent outlined normal buttons, Geist fonts, and faint theme-aware hovers.
The few details Cloudscape doesn't expose as tokens (0.5px border widths,
text-color tab dividers/underline, the flat 300px Get-started popup, FAQ hover)
are isolated in cloudscape-overrides.css with a maintenance header.

- Nav: restructure the Get-started dropdown (Products/Login groups, descriptions,
  right-aligned external icons, segment divider); slightly larger menu buttons.
- Home: new hero copy; AI-native cards become clickable link-cards with an arrow;
  add section CTAs (Backends, Kubernetes/SSH Fleets, Sign up); trim the GPU list;
  dotted testimonial borders; CEO @ Graphsignal.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Add Resources nav dropdown and unify Cloudscape popup/hover styling
5ba2af4 
- Top nav: replace the standalone Blog link with a hover-opening "Resources"
  dropdown (Case studies / Benchmarks / Blog); mirror it as an expandable
  section in the mobile SideNavigation.
- Dropdown popups: larger, consistent group-header/item label sizing,
  label/description spacing, and top/bottom breathing room that a first/last
  item's hover fill covers (fixes the dark-mode border being painted over).
- Unify the hover tint across normal buttons, cards, and dropdown items via a
  single --cs-hover variable.
- Footer column links now match the column heading size.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Add sticky announcement banner and polish responsive layout
7fa1833 
- Add a sticky top announcement banner (mirrors the docs agentic-orchestration
  announcement): 16px/300, theme-inverted fill, hover-sliding arrow. Banner + nav stick
  to the top together as one header unit (.site-header), kept above the hero gradient.
- Hero CTAs: equal width with centered labels (desktop), one full-width row (mobile).
- Mobile: relocate the hero artwork to just above the footer; lead doc-alternating blocks
  and the footer with their text/links; un-bold the nav section headers.
- FAQ question headers to 16px; copy tweaks (SSH fleets casing, drop Installation button).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Rename "Open-source" to "dstack" in Get started menu and section
7442ec3 
Update the Get started dropdown (desktop + mobile) and the closing
"Get started" section: label "Open-source" becomes "dstack", with copy
describing it as the open-source control plane across clouds,
Kubernetes, and on-prem. Also nudge the banner link to 15px.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Round corners and refine borders, tabs, table, and hover styling
c6fb7c2 
- 12px radius + 1px borders on buttons, containers (tabs/table/quotes), and cards
- Tabs: selected/hovered tab highlighted by a background tint instead of blue
  text + underline indicator; 1px separators bound the strip (the leading one
  only when the strip overflows)
- GPU table: full-bleed 0.5px row separators, trimmed vertical padding
- FAQ: 1px rounded outer frame with 0.5px internal dividers
- Popup: rounded outer border; lighter, non-muted group headers
- Softer hover tint; banner link weight 500; trimmed hero button padding
- scroll-padding-top so anchored sections clear the sticky header
- "Sign up" in "Access marketplace GPUs" is now a primary button

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Rebuild architecture diagram in HTML/CSS; add term highlights and typ…
598bc12 
…ography pass

- Replace the static "Vendor-agnostic, open-source" SVG with an HTML/CSS
  component (ArchitectureDiagram): theme-adaptive monochrome logos via CSS
  masking, an exact 2,6 dotted border (shared DashedBorder inline-SVG rect),
  the blue->pink orchestration gradient, and proportional cqw sizing. Real
  logos under public/static/logos; same dashed border reused on the
  AI-native cards.
- Add a .highlight outline (thin rounded, transparent) + highlightTerms
  helper, applied to dstack/clouds/frameworks/hardware terms in body copy
  only (hero, marketing blocks, FAQ answers, quotes, concept cards).
- Typography tokens: --font-small (15px) for action-card/quote/FAQ/Sky+Ent
  descriptions; --font-card-heading (16px) for their titles + quote names;
  normal body copy 17px; popup descriptions 13px/300/normal color.
- Banner: thin shaft+head arrow (was a bold chevron), 16.5px, slightly
  bolder on dark.
- Copy: "Google TPU" -> "TPU"; drop em-dashes from dstack-authored copy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Refine description of dstack's orchestration capabilities for AI compute
a407249
@claude
Pair the diagram's narrow cells two-up and right-align hardware logos…
fdc882a 
… on mobile

On a narrow container the architecture diagram's three-up rows now use a
2-column grid: the wide first cell ("Any framework" / "Any cloud") spans the
full width on its own row, and the two narrow cells ("Your data" + "Any
models"; "Kubernetes" + "On-prem clusters") pair up below. The "Any hardware"
cell switches from centered to label-left / logos-right.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@claude
Polish the /old Cloudscape reference page
8153272 
Full-height side nav with the footer in the content column; plain 1px
header hairline; right rail "Need help?" Discord CTA; nested side-nav
group aligned to siblings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@peterschmidt85