+
+ );
+}
diff --git a/website/src/app/docs/[id]/page.tsx b/website/src/app/docs/[id]/page.tsx
deleted file mode 100644
index d610decf6..000000000
--- a/website/src/app/docs/[id]/page.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { Docs } from "@/components/docs";
-import { readDocSource } from "@/lib/doc-source";
-import { DOC_PAGES } from "@/lib/docs-data";
-
-export function generateStaticParams() {
- return DOC_PAGES.filter((p) => p.id !== "readme").map((p) => ({ id: p.id }));
-}
-
-export async function generateMetadata({
- params,
-}: {
- params: Promise<{ id: string }>;
-}): Promise
+
+ Browse documentation
+
+
+
+
+ {outline.length > 0 && (
+
+ )}
+
+
+
@@ -142,10 +145,10 @@ export default async function OpenGraphImage() {
justifyContent: "flex-end",
alignItems: "center",
fontFamily: "IBM Plex Sans",
- fontSize: 24,
+ fontSize: 28,
fontWeight: 600,
color: "#7a6b4f",
- borderTop: "1px solid #c9b98e",
+ borderTop: "2px solid #b9a779",
paddingTop: 24,
}}
>
diff --git a/website/src/app/sitemap.ts b/website/src/app/sitemap.ts
index 1bcaadd33..238512728 100644
--- a/website/src/app/sitemap.ts
+++ b/website/src/app/sitemap.ts
@@ -1,45 +1,11 @@
-import fs from "node:fs";
-import path from "node:path";
import type { MetadataRoute } from "next";
-import { DOC_PAGES, type DocPage } from "@/lib/docs-data";
+import { type DocsPage, docsSource } from "@/lib/docs-source";
import { getSiteUrl } from "@/lib/site-url";
const APP_LAST_MODIFIED = new Date();
-function statMtime(filePath: string): Date | null {
- try {
- return fs.statSync(filePath).mtime;
- } catch {
- return null;
- }
-}
-
-function docSourceCandidates(page: DocPage): string[] {
- const cwd = process.cwd();
- const parent = path.resolve(cwd, "..");
- const sourceFromWebsiteRoot =
- page.file === "readme.md"
- ? path.join(parent, "README.md")
- : path.join(parent, "docs", page.file);
- const sourceFromRepoRoot =
- page.file === "readme.md"
- ? path.join(cwd, "README.md")
- : path.join(cwd, "docs", page.file);
-
- return [
- sourceFromWebsiteRoot,
- sourceFromRepoRoot,
- path.join(cwd, "content", "docs", page.file),
- path.join(cwd, "website", "content", "docs", page.file),
- ];
-}
-
-export function getDocLastModified(page: DocPage): Date {
- for (const candidate of docSourceCandidates(page)) {
- const mtime = statMtime(candidate);
- if (mtime) return mtime;
- }
- return APP_LAST_MODIFIED;
+export function getDocLastModified(page: DocsPage): Date {
+ return page.data.lastModified ?? APP_LAST_MODIFIED;
}
export function buildSitemap(
@@ -51,7 +17,6 @@ export function buildSitemap(
const top = [
"/",
"/installation",
- "/docs",
"/compatibility",
"/performance",
"/playground",
@@ -62,11 +27,11 @@ export function buildSitemap(
changeFrequency: "weekly" as const,
priority: path === "/" ? 1.0 : 0.8,
}));
- const docs = DOC_PAGES.filter((p) => p.id !== "readme").map((p) => ({
- url: `${normalizedSiteUrl}/docs/${p.id}`,
- lastModified: getDocLastModified(p),
+ const docs = docsSource.getPages().map((page) => ({
+ url: `${normalizedSiteUrl}${page.url}`,
+ lastModified: getDocLastModified(page),
changeFrequency: "weekly" as const,
- priority: 0.6,
+ priority: page.url === "/docs" ? 0.8 : 0.6,
}));
return [...top, ...docs];
}
diff --git a/website/src/components/command-tabs.tsx b/website/src/components/command-tabs.tsx
index eac55a462..7532863bb 100644
--- a/website/src/components/command-tabs.tsx
+++ b/website/src/components/command-tabs.tsx
@@ -1,14 +1,14 @@
"use client";
-import { type ComponentType, useEffect, useState } from "react";
+import { CodeBlock } from "@astryxdesign/core/CodeBlock";
import {
- HighlightedGeneric,
- HighlightedShell,
-} from "@/components/highlighted-code";
+ SegmentedControl,
+ SegmentedControlItem,
+} from "@astryxdesign/core/SegmentedControl";
+import { type ComponentType, useEffect, useState } from "react";
import {
AppleIcon,
BunIcon,
- CopyIcon,
DenoIcon,
LinuxIcon,
NpmIcon,
@@ -156,50 +156,14 @@ export function CopyableCommand({
command: string;
language?: "shell" | "ts";
}) {
- const [copyTick, setCopyTick] = useState(0);
- const copy = async () => {
- let ok = false;
- try {
- if (navigator.clipboard?.writeText) {
- await navigator.clipboard.writeText(command);
- ok = true;
- }
- } catch {}
- if (ok) setCopyTick((t) => t + 1);
- };
- useEffect(() => {
- if (copyTick === 0) return;
- const id = setTimeout(() => setCopyTick(0), 1500);
- return () => clearTimeout(id);
- }, [copyTick]);
- const copied = copyTick > 0;
return (
- (tabs[0]?.key ?? "");
+ const commandSet = tabs.some((tab) => tab.key === "macos")
+ ? "os"
+ : tabs.some((tab) => tab.key === "npm")
+ ? "package-manager"
+ : "generic";
useEffect(() => {
if (typeof window === "undefined") return;
@@ -267,28 +236,25 @@ export function CommandTabs({
};
return (
-
-
- {SITE_DESCRIPTION}
+
+ Sandbox-first ECMAScript runtime.
+
+
+ Portable. Embeddable. Host-controlled.
+
-
-
+
-
- {language === "shell" ? (
-
-
-
-
@@ -962,7 +974,7 @@ export function Landing({
+
+ );
+ },
+ pre({ children }: ComponentProps<"pre">) {
+ const { code, language } = codeDetails(children);
+ if (language === "mermaid") return ReactElement>;
+}
diff --git a/website/src/components/docs-nav.tsx b/website/src/components/docs-nav.tsx
new file mode 100644
index 000000000..473d55a04
--- /dev/null
+++ b/website/src/components/docs-nav.tsx
@@ -0,0 +1,66 @@
+import {
+ SideNav,
+ SideNavHeading,
+ SideNavItem,
+ SideNavSection,
+} from "@astryxdesign/core/SideNav";
+
+export type DocsNavPage = {
+ href: string;
+ path: string;
+ title: string;
+};
+
+const GROUPS = [
+ { title: "Start here", matches: (path: string) => path === "README.md" },
+ {
+ title: "Guides & reference",
+ matches: (path: string) => /^docs\/[^/]+\.md$/.test(path),
+ },
+ {
+ title: "Contributing",
+ matches: (path: string) => path.startsWith("docs/contributing/"),
+ },
+ {
+ title: "Architecture decisions",
+ matches: (path: string) => path === "docs/adr/README.md",
+ },
+] as const;
+
+export function DocsNav({
+ pages,
+ activeHref,
+}: {
+ pages: DocsNavPage[];
+ activeHref: string;
+}) {
+ return (
+
+ {items.map((page) => (
+
+ );
+ })}
+
+ );
+}
diff --git a/website/src/components/docs.tsx b/website/src/components/docs.tsx
deleted file mode 100644
index aaa353d52..000000000
--- a/website/src/components/docs.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
-import { AnchorH2 } from "@/components/anchor-heading";
-import { Markdown } from "@/components/markdown";
-import { DOC_PAGES, type DocPage } from "@/lib/docs-data";
-
-function findPage(id: string): DocPage {
- return DOC_PAGES.find((p) => p.id === id) ?? DOC_PAGES[0];
-}
-
-export function Docs({
- pageId = "readme",
- source,
-}: {
- pageId?: string;
- /** Markdown source for the active page; null when the file isn't synced. */
- source: string | null;
-}) {
- const page = findPage(pageId);
- const [navOpen, setNavOpen] = useState(false);
-
- // Auto-collapse the mobile sidebar whenever the active page changes.
- // biome-ignore lint/correctness/useExhaustiveDependencies: closes on route change only
- useEffect(() => {
- setNavOpen(false);
- }, [pageId]);
-
- const groups = useMemo(() => {
- const g: Record = {};
- for (const p of DOC_PAGES) {
- if (!g[p.group]) g[p.group] = [];
- g[p.group].push(p);
- }
- return g;
- }, []);
-
- return (
-
-
+
-
+ code={RESULT}
+ language="json"
+ hasLanguageLabel={false}
+ hasLineNumbers
+ hasCopyButton={false}
+ size="sm"
+ width="100%"
+ />
)}
+
{tabs.map((t) => {
- const selected = active === t.key;
return (
-
+ value={t.key}
+ label={t.label}
+ icon={t.Icon ?
+
{children}; + }, + code({ children, className }: ComponentProps<"code">) { + return
{children};
+ },
+ img({ src, alt = "", className, ...props }: ComponentProps<"img">) {
+ const isRepositoryLogo =
+ page.path === "README.md" && alt === "GocciaScript logo";
+ const resolvedSrc =
+ typeof src === "string"
+ ? src === "./logo.png"
+ ? "/logo.png"
+ : src
+ : (src as { src?: string } | undefined)?.src;
+ // Repository docs can contain arbitrary image sizes, so a semantic img
+ // is the honest rendering primitive here; authors still own alt text.
+ return (
+ // biome-ignore lint/performance/noImgElement: repository Markdown has no fixed dimensions
+
-
-
-
- );
-}
diff --git a/website/src/components/landing.tsx b/website/src/components/landing.tsx
index 55b6f5497..493f78bc9 100644
--- a/website/src/components/landing.tsx
+++ b/website/src/components/landing.tsx
@@ -1,5 +1,11 @@
"use client";
+import { Card } from "@astryxdesign/core/Card";
+import { CodeBlock } from "@astryxdesign/core/CodeBlock";
+import { Collapsible, CollapsibleGroup } from "@astryxdesign/core/Collapsible";
+import { Heading } from "@astryxdesign/core/Heading";
+import { Text } from "@astryxdesign/core/Text";
+import { VStack } from "@astryxdesign/core/VStack";
import Link from "next/link";
import {
Fragment,
@@ -13,10 +19,7 @@ import { AnchorH2, AnchorH3 } from "@/components/anchor-heading";
import { AnimatedOutput } from "@/components/animated-output";
import { useRunShortcut } from "@/components/command-tabs";
import { ConsolePanel } from "@/components/console-panel";
-import {
- HighlightedCode,
- HighlightedGeneric,
-} from "@/components/highlighted-code";
+import { HighlightedCode } from "@/components/highlighted-code";
import {
ArrowIcon,
BookIcon,
@@ -29,7 +32,6 @@ import {
ShieldIcon,
} from "@/components/icons";
import { LatestVersion } from "@/components/latest-version";
-import { NumberedCode } from "@/components/numbered-code";
import { QuickInstall } from "@/components/quick-install";
import type { OutputLine } from "@/lib/examples";
import { formatError } from "@/lib/format-error";
@@ -591,9 +593,15 @@ console.log("total:", total);`;
{active === 0 && (
- {/* `null` is reserved for "file isn't synced". An empty string is a
- real (if blank) doc and must still render via `Markdown`. */}
- {source !== null ? (
-
-
- Meanwhile
-
- )}
- {page.title}
- {page.desc && ( -{page.desc}
- )} - -
- Not synced. The markdown file for this page
- wasn't found at
-
- content/docs/{page.file}. Run{" "}
- bun run sync-docs from the website directory to pull
- the latest content from the repo's docs/ folder.
- - You can read the Overview for a summary - of the feature set, or jump into the{" "} - Playground to try the language. -
-example.js
- Design principles
@@ -998,20 +1010,30 @@ export function Landing({
{FEATURES.map((f) => {
const I = FEATURE_ICONS[f.icon];
return (
-
-
+
-
-
- {f.title}
-{f.body}
-
+
+
+
@@ -1144,7 +1166,7 @@ export function Landing({
- FAQ
@@ -1154,18 +1176,25 @@ export function Landing({
embedding the runtime.
- {FAQ_ITEMS.map((item) => (
-
+
-
- ))}
- {item.question}
-{item.answer}
-Compiler pipeline
diff --git a/website/src/components/markdown.tsx b/website/src/components/markdown.tsx
deleted file mode 100644
index 1a7e8375d..000000000
--- a/website/src/components/markdown.tsx
+++ /dev/null
@@ -1,459 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { Fragment, type ReactNode, useMemo } from "react";
-import { slugify } from "@/components/anchor-heading";
-import {
- HighlightedCode,
- HighlightedGeneric,
- HighlightedJson,
- HighlightedShell,
-} from "@/components/highlighted-code";
-import { MermaidBlock } from "@/components/mermaid-block";
-import { DOC_HREF_MAP } from "@/lib/docs-data";
-
-/** Map markdown fence info-strings to one of the highlighter dispatchers. */
-function renderHighlighted(code: string, lang: string): ReactNode {
- const l = lang.toLowerCase().trim();
- if (l === "javascript" || l === "js" || l === "jsx") {
- return {tok.text};
- case "strong":
- return {tok.text};
- case "em":
- return {tok.text};
- case "image": {
- let src = tok.src;
- if (src === "./logo.png") src = "/logo.png";
- return (
- // biome-ignore lint/performance/noImgElement: markdown body inserts dynamic images, no fixed dimensions known
-
- {blocks.map((b, idx) => {
- switch (b.kind) {
- case "heading": {
- const level = Math.min(b.level, 4);
- const inline = renderInline(b.text);
- // h1 is the document/page title; keep it plain (no anchor link).
- if (level === 1) return
; - case "quote": - return
-
-
- );
- case "code":
- if ((b.lang || "").trim().toLowerCase() === "mermaid") {
- return
- );
-}
diff --git a/website/src/components/numbered-code.tsx b/website/src/components/numbered-code.tsx
deleted file mode 100644
index 361882460..000000000
--- a/website/src/components/numbered-code.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ReactNode } from "react";
-
-/** Code block with a left-side line-number gutter — used across the
- * homepage so all rendered code samples have the same look. The
- * `lineCount` is supplied by the caller (from the source string or
- * rendered text) so we don't have to introspect React children to
- * count newlines.
- *
- * Wrap the actual highlighted content as `children`; the component
- * provides only the gutter + container chrome. */
-export function NumberedCode({
- children,
- lineCount,
- className = "",
-}: {
- children: ReactNode;
- lineCount: number;
- className?: string;
-}) {
- const gutter = Array.from({ length: lineCount }, (_, i) => i + 1).join("\n");
- return (
- {inline}
; - const slug = uniqueSlug(b.text); - const anchor = ( - - # - - ); - if (level === 2) - return ( -- {inline} - {anchor} -
- ); - if (level === 3) - return ( -- {inline} - {anchor} -
- ); - return ( -- {inline} - {anchor} -
- ); - } - case "hr": - return; - case "quote": - return
{renderInline(b.text)}; - case "list": - return ( -
-
- {b.items.map((it, j) => (
-
- {renderInline(it)} - ))} -
| {renderInline(h)} | - ))} -
|---|
| {renderInline(c)} | - ))} -
- {renderHighlighted(b.code, b.lang)}
-
- );
- case "p":
- return {renderInline(b.text)}
; - default: - return null; - } - })} -
-
-
- );
-}
diff --git a/website/src/components/performance-dashboard.tsx b/website/src/components/performance-dashboard.tsx
index 9162b8c76..c48fcef09 100644
--- a/website/src/components/performance-dashboard.tsx
+++ b/website/src/components/performance-dashboard.tsx
@@ -1,5 +1,9 @@
"use client";
+import {
+ SegmentedControl,
+ SegmentedControlItem,
+} from "@astryxdesign/core/SegmentedControl";
import { useMemo, useState } from "react";
import type {
PerformanceDashboardData,
@@ -461,19 +465,21 @@ export function PerformanceDashboard({
versions change.
- {children}
-
-
- }
+ variant="ghost"
+ size="sm"
aria-expanded={examplesOpen}
onClick={() => setExamplesOpen((open) => !open)}
- >
-
-
+
-
- }
+ tooltip="Open a GitHub issue with a link to this playground"
+ variant="secondary"
+ size="sm"
+ />
+
-
+
{EXAMPLES.filter((e) => e.id !== "blank").map((e) => (
-
+
))}
{(() => {
diff --git a/website/src/components/sandbox.tsx b/website/src/components/sandbox.tsx
index e418de176..747e48b5b 100644
--- a/website/src/components/sandbox.tsx
+++ b/website/src/components/sandbox.tsx
@@ -1,5 +1,7 @@
"use client";
+import { Button } from "@astryxdesign/core/Button";
+import { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
import { useCallback, useEffect, useId, useRef, useState } from "react";
import { AnchorH2 } from "@/components/anchor-heading";
import { AnimatedOutput } from "@/components/animated-output";
@@ -63,15 +65,14 @@ function ToolCallComparison() {
return (
<>
-
+
-
+ isDisabled={running}
+ label={running ? "Running" : "Run"}
+ icon={
-
-
+ const navigation = (
+ {children}
+ const mobileNavigation = (
+
+
+ {TABS.map((tab) => (
+
+
+ );
-
-
-
-
+ {TABS.map((tab) => (
+
+ );
-