Skip to content

Marketing site + Docs + Blog#604

Merged
willwashburn merged 25 commits intomainfrom
feature/docs-nextjs
Mar 20, 2026
Merged

Marketing site + Docs + Blog#604
willwashburn merged 25 commits intomainfrom
feature/docs-nextjs

Conversation

@willwashburn
Copy link
Member

@willwashburn willwashburn commented Mar 20, 2026

willwashburn and others added 18 commits March 19, 2026 17:51
Move/rename the openclaw-web app to web, add documentation pages and components, and update CI/workflow and ignores accordingly. Updated .github workflow to watch and deploy the new web paths and set the working-directory to web; updated .gitignore entry for sst-env. Removed legacy openclaw page and sitemap files and added new docs routes, components, public assets, and trajectories. package.json/workspaces and package-lock.json were updated to reflect the workspace rename and dependency changes.
Replace the <p> wrapper around Card children with a <div> to allow block-level content and avoid invalid nested <p> elements. This prevents HTML nesting issues when children include other block elements while preserving styles.cardBody styling.
Introduce a new landing page and global site navigation, and add animated relay visualizations. Integrates SiteNav into Home, Blog index, Blog post and Docs layout; implements a styled hero (landing.module.css) for the homepage; adds interactive NodeRelayAnimation and RelayAnimation components with their styles; includes a small GitHubStars component. Also updates blog/docs components and styles to accommodate the new layout and navigation.
Increase hero area and enable light-mode nodes, and overhaul the NodeRelay animation and styling. Changes include: rename NODE_DEFS→NODE_POOL and expand the node pool; replace hard-coded positions/connections with a generated NODE_POSITIONS spiral/hex layout and buildConnections function; add MIN_NODES/MAX_NODES and connectionsRef; adjust spawn/relay/deactivation logic, tick interval and message speeds; tweak node drift/opacities and card sizing (CARD_W/CARD_H). CSS updates: make canvas background transparent, introduce a dark terminal-style default card and a .light-nodes (global) light-mode variant, update card dimensions, spacing, typography, shadows, and responsive rules.
Group the site logo and primary nav links into a new .navLeft container for easier layout control. Added .navLeft CSS (display:flex, align-items:center, gap:36px) and reduced .links gap from 40px to 28px. Keeps the GitHubStarsBadge separate on the right.
Integrate GitHub Flavored Markdown (remark-gfm) into MDX rendering for blog and docs and add richer code/TOC support. New components HighlightedCode and TableOfContents and a syntax helper (web/lib/syntax.ts) were added; docs page now slugifies h2/h3 headings, uses HighlightedPre for code blocks, and renders a right-hand Table of Contents. globals.css was updated with light/dark token styles and adjusted code background/foreground colors. The site logo SVG and various CSS module files were also updated. remark-gfm was added to package.json to enable GFM features (tables, task lists, autolinks).
Introduce a client-side documentation search (DocsSearch + styles) with Cmd/Ctrl+K activation and integrate it into the docs layout using a lightweight index (getSearchIndex) that extracts headings and plain-text snippets from MDX files. Add a simple waitlist server endpoint (web/app/api/waitlist/route.ts) that validates and persists emails to web/waitlist.json (file added to .gitignore) with POST (add/dedupe) and GET (count). Update WaitlistForm to call the new /api/waitlist endpoint and show an improved success card displaying the submitted email. Also include several UI polish changes: a decorative hero SVG background in the landing page, a center slot for SiteNav, and related CSS adjustments for docs/sidebar, site navigation, and waitlist styling.
Introduce new theme variables and palettes (carolina default, ocean, and updated dark/moss values) and add nav/btn CSS vars for consistent styling. Swap heading font to Sora (--font-heading) and update layout to use the new font and default data-theme. Update landing styles and CTA to use the new button variables and refine typography/sizing. Add a new Features section with preview components (terminal, chat, dashboard) and extensive styles, plus corresponding markup in the homepage. Tweak SiteNav SVG to use currentColor and adjust the wordmark viewBox for proper scaling.
Introduce a new .previewAccentGemini CSS class to render a Gemini-themed background (diagonal multicolor gradient, subtle radial highlights, and an overlaid SVG pattern) behind the preview. Adjust .previewDashboard to be positioned/contained (absolute inset with padding, bg surface, rounded corner, shadow, and overflow hidden) and raise its z-index so the accent sits beneath it. Insert the accent element in the landing page markup so the new background appears behind the dashboard preview for a richer visual presentation.
Reorganize the frontend into packages/web by moving/renaming all web/* files to packages/web/*. Update CI/workflow deploy-openclaw-page.yml to watch packages/web/** and use packages/web as the working directory (adjust SST deploy path). Adjust project config and scripts: remove top-level web workspace, update dev:web to cd into packages/web, update .gitignore paths, and tweak Next/SST path resolution (docs and SKILL.md lookup) to account for the new structure. Also update various internal path references to ensure builds and deployments continue to work after the move.
Add a CopyCodeButton component and update docs UI components (CodeGroup, HighlightedCode, DocsSearch) and CSS to improve code block UX and search styling. Update docs content to tag examples as bash and remove redundant SDK headings in Python/TypeScript reference pages. Update web package metadata and serverless config (packages/web/package.json, sst.config.ts) and add a waitlist API route. package-lock.json was regenerated with updated dependencies (notably many AWS SDK packages) to match package.json changes.
Revamp blog index and post pages with a new layout and UI enhancements. Add a hero and featured post on the index, introduce a readTime helper, and render the rest of posts in a responsive grid; include SiteFooter on pages. Refactor individual post page to use a two-column layout with a sticky sidebar listing related posts and resources, switch back links to next/link, and compute otherPosts for the sidebar. Replace multiple styles and extend blog.module.css with comprehensive styling for hero, featured card, post grid, sidebar, single-post layout, responsive rules, and small article tweaks (e.g. code block border). Minor UX/accessibility: external GitHub link uses target="_blank" with rel="noopener noreferrer".
Introduce a mobile hamburger menu and dropdown in SiteNav (state + markup) and corresponding responsive styles (hamburger, mobileMenu, mobileLink). Adjust responsive layout and spacing in landing.module.css (hero padding/gaps, CTA stacking and sizing, subtitle size, heroRight min-height). Update NodeRelayAnimation canvas colors/gradients to use a blue tone and tweak alpha values for improved visuals. These changes improve mobile UX and unify the visual theme.
Reduce and simplify the node relay animation: trim the NODE_POOL (remove extra roles), lower MIN_NODES/MAX_NODES, and rework the scripted SCRIPT timings and message/spawn ordering. Update NODE_POSITIONS to a single ring layout (center + 7 around) with adjusted center and radius. Increase card dimensions used for layout (CARD_W/H) and update corresponding CSS (.card size and responsive sizes) to prevent overlap and fit larger cards. These changes align the animation with the simplified node set and larger card UI.
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 2 potential issues.

View 7 additional findings in Devin Review.

Open in Devin Review

Comment on lines +25 to +30
function readTime(description: string): string {
// Rough estimate based on description length
const words = description.split(/\s+/).length;
const mins = Math.max(3, Math.ceil(words / 40) + 2);
return `${mins} min read`;
}
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 readTime computes from frontmatter description instead of article content, always showing ~3 min

The readTime function takes the frontmatter description (a 1-2 sentence summary, typically 20-30 words) and computes Math.max(3, Math.ceil(words / 40) + 2). For any description under ~40 words this always returns 3. Both blog posts have descriptions of ~25 and ~33 words respectively, so every post displays "3 min read" regardless of actual article length. The posts themselves are thousands of words long. The function should use the post's content field (the full article body) to compute a meaningful estimate.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

devin-ai-integration[bot]

This comment was marked as resolved.

devin-ai-integration[bot]

This comment was marked as resolved.

Flatten web package from packages/web to a top-level web directory. Updated CI workflow to watch web/** and set the deploy working-directory to web (and adjusted the sst CLI path). Adjusted .gitignore entries to point at web/*. Updated package-lock.json to add the web workspace, relocate workspace links, and incorporate dependency/version updates (notably several @aws-sdk, fast-xml-parser and related packages). Numerous web files were relocated/renamed accordingly.
Add a new GET route (web/app/agents/route.ts) that serves a README.md from the project root or parent directory, falling back to a small default markdown if none is found. The response is served as text/markdown with a public Cache-Control header (max-age=3600). Also update web/components/site-nav.module.css to add .agentLink styles (font, sizing, padding, border, radius, transition) and a hover state for agent links in the site navigation.
Make /openclaw/skill the primary hosted skill route and add canonical/SEO metadata to legacy OpenClaw redirect pages. Serve skill content from /openclaw/skill (static, with OG/twitter metadata and canonical URL), implement generateMetadata and token validation for the OpenClaw invite page (noindex/robots rules, force-dynamic for invite), and render SkillPage directly in the OpenClaw routes. Replace legacy /skill and /skill/invite pages with permanent redirects to the /openclaw/skill equivalents. Also update trajectory records (.trajectories) with a new decision entry and updated lastUpdated/path metadata.
@willwashburn willwashburn merged commit 3464b52 into main Mar 20, 2026
34 checks passed
@willwashburn willwashburn deleted the feature/docs-nextjs branch March 20, 2026 23:54
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.

2 participants