svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
- className
- )}
- {...props}
- />
- )
-}
-
-function AlertDescription({
- className,
- ...props
-}: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/apps/docs/src/components/ui/breadcrumb.tsx b/apps/docs/src/components/ui/breadcrumb.tsx
deleted file mode 100644
index 4ef7e26..0000000
--- a/apps/docs/src/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from "react"
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-
-import { cn } from "@/lib/utils"
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
-
-function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
- return (
-
- )
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
- return (
-
- )
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
- return (
-
- )
-}
-
-function BreadcrumbLink({
- className,
- render,
- ...props
-}: useRender.ComponentProps<"a">) {
- return useRender({
- defaultTagName: "a",
- props: mergeProps<"a">(
- {
- className: cn("transition-colors hover:text-foreground", className),
- },
- props
- ),
- render,
- state: {
- slot: "breadcrumb-link",
- },
- })
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
- return (
-
- )
-}
-
-function BreadcrumbSeparator({
- children,
- className,
- ...props
-}: React.ComponentProps<"li">) {
- return (
-
svg]:size-3.5", className)}
- {...props}
- >
- {children ??
- )
-}
-
-function BreadcrumbEllipsis({
- className,
- ...props
-}: React.ComponentProps<"span">) {
- return (
-
svg]:size-4",
- className
- )}
- {...props}
- >
- More
-
- )
-}
-
-export {
- Breadcrumb,
- BreadcrumbList,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbPage,
- BreadcrumbSeparator,
- BreadcrumbEllipsis,
-}
diff --git a/apps/docs/src/components/ui/code-block.tsx b/apps/docs/src/components/ui/code-block.tsx
deleted file mode 100644
index c4ef941..0000000
--- a/apps/docs/src/components/ui/code-block.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { createHighlighterCore } from "@shikijs/core"
-import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript"
-import bash from "@shikijs/langs/bash"
-import html from "@shikijs/langs/html"
-import json from "@shikijs/langs/json"
-import markdown from "@shikijs/langs/markdown"
-import mdx from "@shikijs/langs/mdx"
-import ts from "@shikijs/langs/ts"
-import tsx from "@shikijs/langs/tsx"
-import githubDark from "@shikijs/themes/github-dark"
-import githubLight from "@shikijs/themes/github-light"
-
-import { CodeBlockCopyButton } from "@/components/ui/code-block-copy-button"
-
-type CodeBlockHighlighter = Awaited
>
-
-const highlighterStore = globalThis as typeof globalThis & {
- __sitexDocsHighlighter?: Promise
-}
-
-const highlighter = await (highlighterStore.__sitexDocsHighlighter ??=
- createHighlighterCore({
- langs: [bash, html, json, markdown, mdx, ts, tsx],
- themes: [githubLight, githubDark],
- engine: createJavaScriptRegexEngine(),
- }))
-
-type CodeBlockProps = {
- code: string
- lang: "bash" | "html" | "json" | "markdown" | "mdx" | "text" | "ts" | "tsx"
-}
-
-function escapeHtml(value: string) {
- return value
- .replace(/&/g, "&")
- .replace(//g, ">")
- .replace(/"/g, """)
- .replace(/'/g, "'")
-}
-
-function codeToPlainHtml(code: string) {
- return `${escapeHtml(code)}
-
-
- )
-}
-
-export { CodeBlock }
diff --git a/apps/docs/src/components/ui/code-block-copy-button.tsx b/apps/docs/src/components/ui/code-copy-button.tsx
similarity index 64%
rename from apps/docs/src/components/ui/code-block-copy-button.tsx
rename to apps/docs/src/components/ui/code-copy-button.tsx
index daeabb2..f49d5ca 100644
--- a/apps/docs/src/components/ui/code-block-copy-button.tsx
+++ b/apps/docs/src/components/ui/code-copy-button.tsx
@@ -1,13 +1,15 @@
-import { CheckIcon, CopyIcon } from "lucide-react"
import { useState } from "react"
-import { Button } from "@/components/ui/button"
+import { CheckIcon, CopyIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
-type CodeBlockCopyButtonProps = {
+type CodeCopyButtonProps = {
code: string
+ className?: string
}
-function CodeBlockCopyButton({ code }: CodeBlockCopyButtonProps) {
+function CodeCopyButton({ code, className }: CodeCopyButtonProps) {
const [copied, setCopied] = useState(false)
async function copyCode() {
@@ -29,17 +31,18 @@ function CodeBlockCopyButton({ code }: CodeBlockCopyButtonProps) {
}
return (
-
{copied ?
+
)
}
-export { CodeBlockCopyButton }
+export { CodeCopyButton }
diff --git a/apps/docs/src/components/ui/code.tsx b/apps/docs/src/components/ui/code.tsx
new file mode 100644
index 0000000..53989a7
--- /dev/null
+++ b/apps/docs/src/components/ui/code.tsx
@@ -0,0 +1,151 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react"
+
+import { createHighlighterCore } from "@shikijs/core"
+import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript"
+import bash from "@shikijs/langs/bash"
+import css from "@shikijs/langs/css"
+import html from "@shikijs/langs/html"
+import json from "@shikijs/langs/json"
+import markdown from "@shikijs/langs/markdown"
+import mdx from "@shikijs/langs/mdx"
+import ts from "@shikijs/langs/ts"
+import tsx from "@shikijs/langs/tsx"
+import yaml from "@shikijs/langs/yaml"
+import githubDark from "@shikijs/themes/github-dark"
+import githubLight from "@shikijs/themes/github-light"
+
+import { CodeCopyButton } from "@/components/ui/code-copy-button"
+import { cn } from "@/lib/utils"
+
+type CodeHighlighter = Awaited>
+
+const highlighterStore = globalThis as typeof globalThis & {
+ __uiCodeHighlighter?: Promise
+}
+
+const highlighter = await (highlighterStore.__uiCodeHighlighter ??=
+ createHighlighterCore({
+ langs: [bash, css, html, json, markdown, mdx, ts, tsx, yaml],
+ themes: [githubLight, githubDark],
+ engine: createJavaScriptRegexEngine(),
+ }))
+
+type CodeLanguage =
+ | "bash"
+ | "css"
+ | "html"
+ | "json"
+ | "markdown"
+ | "mdx"
+ | "text"
+ | "ts"
+ | "tsx"
+ | "yaml"
+
+const codeLanguages = new Set([
+ "bash",
+ "css",
+ "html",
+ "json",
+ "markdown",
+ "mdx",
+ "text",
+ "ts",
+ "tsx",
+ "yaml",
+])
+
+type CodeProps = {
+ code: string
+ lang?: CodeLanguage
+ className?: string
+}
+
+function escapeHtml(value: string) {
+ return value
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'")
+}
+
+function Code({ code, lang = "text", className }: CodeProps) {
+ const trimmedCode = code.trim()
+ const codeHtml =
+ lang === "text"
+ ? `${escapeHtml(trimmedCode)}
+
+
+ )
+}
+
+function isReactElement(value: ReactNode): value is ReactElement<{
+ className?: string
+ children?: ReactNode
+}> {
+ return typeof value === "object" && value !== null && "props" in value
+}
+
+function readLanguage(className: string | undefined): CodeLanguage {
+ const language = className?.match(/\blanguage-([A-Za-z0-9_-]+)/)?.[1]
+
+ return language && codeLanguages.has(language as CodeLanguage)
+ ? (language as CodeLanguage)
+ : "text"
+}
+
+function readValue(value: ReactNode) {
+ return typeof value === "string" || typeof value === "number"
+ ? String(value)
+ : ""
+}
+
+/**
+ * Drop-in MDX `pre` replacement. Wire it up in vite.config.ts:
+ * sitex({ mdx: { components: { pre: "@/components/ui/code" } } })
+ */
+export default function CodePre({
+ children,
+}: ComponentProps<"pre">): ReactElement {
+ if (!isReactElement(children)) {
+ return {children}
+ }
+
+ return (
+
-
- {children}
- {showCloseButton && (
- Close
-
- )}
-
-
- )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-function DialogFooter({
- className,
- showCloseButton = false,
- children,
- ...props
-}: React.ComponentProps<"div"> & {
- showCloseButton?: boolean
-}) {
- return (
-
- {children}
- {showCloseButton && (
-
- )
-}
-
-function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
- return (
- [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
- className
- )}
- {...props}
- />
- )
-}
-
-const inputGroupAddonVariants = cva(
- "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
- {
- variants: {
- align: {
- "inline-start":
- "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
- "inline-end":
- "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
- "block-start":
- "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
- "block-end":
- "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
- },
- },
- defaultVariants: {
- align: "inline-start",
- },
- }
-)
-
-function InputGroupAddon({
- className,
- align = "inline-start",
- ...props
-}: React.ComponentProps<"div"> & VariantProps
) {
- return (
- {
- if ((e.target as HTMLElement).closest("button")) {
- return
- }
- e.currentTarget.parentElement?.querySelector("input")?.focus()
- }}
- {...props}
- />
- )
-}
-
-const inputGroupButtonVariants = cva(
- "flex items-center gap-2 text-sm shadow-none",
- {
- variants: {
- size: {
- xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
- sm: "",
- "icon-xs":
- "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
- "icon-sm": "size-8 p-0 has-[>svg]:p-0",
- },
- },
- defaultVariants: {
- size: "xs",
- },
- }
-)
-
-function InputGroupButton({
- className,
- type = "button",
- variant = "ghost",
- size = "xs",
- ...props
-}: Omit
, "size" | "type"> &
- VariantProps & {
- type?: "button" | "submit" | "reset"
- }) {
- return (
-
+ )
+}
+
+function LayoutBody({ className, ...props }: React.ComponentProps<"body">) {
+ return (
+
+ )
+}
+
+function LayoutMain({ className, ...props }: React.ComponentProps<"main">) {
+ return (
+
+ )
+}
+
+type LayoutJsonLd = Graph | WithContext
+
+type LayoutHeadProps = Omit, "title"> & {
+ name?: string
+ title?: string
+ description?: string
+ image?:
+ | string
+ | {
+ src: string
+ alt?: string
+ width?: number
+ height?: number
+ type?: string
+ }
+ jsonLd?: LayoutJsonLd | readonly LayoutJsonLd[]
+ openGraphType?: string
+ publishedAt?: string
+ type?: string
+ twitterCard?: "summary" | "summary_large_image"
+ updatedAt?: string
+}
+
+function LayoutHead({
+ children,
+ name,
+ title,
+ description,
+ image,
+ jsonLd,
+ openGraphType,
+ publishedAt,
+ type,
+ twitterCard,
+ updatedAt,
+ ...props
+}: LayoutHeadProps) {
+ const imageProps = typeof image === "string" ? { src: image } : image
+ const resolvedOpenGraphType = openGraphType ?? type
+
+ return (
+
+ {title ? {title} : null}
+ {description ?
-
-export function ThemeToggle({
- className = "relative",
- variant = "outline",
- size = "icon-sm",
- ...props
-}: ThemeToggleProps) {
- const { theme, setTheme } = useTheme()
- const nextTheme = theme === "dark" ? "light" : "dark"
-
- return (
- setTheme(nextTheme)}
- size={size}
- type="button"
- variant={variant}
- className={className}
- {...props}
- >
- Toggle theme
-
- )
-}
diff --git a/apps/docs/src/components/ui/toggle.tsx b/apps/docs/src/components/ui/toggle.tsx
deleted file mode 100644
index 59a0579..0000000
--- a/apps/docs/src/components/ui/toggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
- "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
- {
- variants: {
- variant: {
- default: "bg-transparent",
- outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
- },
- size: {
- default:
- "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
- sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
- lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-
-function Toggle({
- className,
- variant = "default",
- size = "default",
- ...props
-}: TogglePrimitive.Props & VariantProps) {
- return (
- ({
:is(p,blockquote,ul,ol,table,div,section,article,aside,nav,figure,details,pre,small,dl,img,picture,video,iframe):not(:first-child)]:mt-6",
+ "[&>h2:not(:first-child)]:mt-10",
+ "[&>:is(h3,h4):not(:first-child)]:mt-8",
+ "[&>:is(h1,h2,h3,h4)+:is(p,blockquote,ul,ol,table,div,section,article,aside,nav,figure,details,pre,small,dl,img,picture,video,iframe)]:mt-4",
+ "[&>hr]:my-8 [&>hr]:border-border",
+ // Raw elements (e.g. rendered MDX) get the same styling the
+ // Typography* components carry themselves; [data-slot] elements are
+ // excluded so those components stay in charge of their own styling.
+ "[&_h1:not([data-slot])]:scroll-m-20 [&_h1:not([data-slot])]:font-semibold [&_h1:not([data-slot])]:tracking-tight [&_h1:not([data-slot])]:text-balance",
+ "[&[data-size=sm]_h1:not([data-slot])]:text-3xl [&[data-size=default]_h1:not([data-slot])]:text-4xl [&[data-size=lg]_h1:not([data-slot])]:text-5xl",
+ "[&_h2:not([data-slot])]:scroll-m-20 [&_h2:not([data-slot])]:font-semibold [&_h2:not([data-slot])]:tracking-tight",
+ "[&[data-size=sm]_h2:not([data-slot])]:text-2xl [&[data-size=default]_h2:not([data-slot])]:text-3xl [&[data-size=lg]_h2:not([data-slot])]:text-4xl",
+ "[&_h3:not([data-slot])]:scroll-m-20 [&_h3:not([data-slot])]:font-semibold [&_h3:not([data-slot])]:tracking-tight",
+ "[&[data-size=sm]_h3:not([data-slot])]:text-xl [&[data-size=default]_h3:not([data-slot])]:text-2xl [&[data-size=lg]_h3:not([data-slot])]:text-3xl",
+ "[&_h4:not([data-slot])]:scroll-m-20 [&_h4:not([data-slot])]:font-semibold [&_h4:not([data-slot])]:tracking-tight",
+ "[&[data-size=sm]_h4:not([data-slot])]:text-lg [&[data-size=default]_h4:not([data-slot])]:text-xl [&[data-size=lg]_h4:not([data-slot])]:text-2xl",
+ "[&_a:not([data-slot])]:font-medium [&_a:not([data-slot])]:text-primary [&_a:not([data-slot])]:underline [&_a:not([data-slot])]:underline-offset-4",
+ "[&_p:not([data-slot])]:text-base [&_p:not([data-slot])]:leading-7",
+ "[&_blockquote:not([data-slot])]:border-l-2 [&_blockquote:not([data-slot])]:pl-6 [&_blockquote:not([data-slot])]:text-base [&_blockquote:not([data-slot])]:italic",
+ "[&_:is(ul,ol):not([data-slot])]:ml-6 [&_:is(ul,ol):not([data-slot])]:text-base [&_ul:not([data-slot])]:list-disc [&_ol:not([data-slot])]:list-decimal [&_:is(ul,ol)>li:not([data-slot])]:mt-2",
+ "[&>small]:block [&>small]:text-sm [&>small]:leading-none [&>small]:font-medium",
+ "[&_:not(pre)>code:not([data-slot])]:relative [&_:not(pre)>code:not([data-slot])]:rounded [&_:not(pre)>code:not([data-slot])]:bg-muted [&_:not(pre)>code:not([data-slot])]:px-[0.3rem] [&_:not(pre)>code:not([data-slot])]:py-[0.2rem] [&_:not(pre)>code:not([data-slot])]:font-mono [&_:not(pre)>code:not([data-slot])]:text-sm",
+ "[&_table:not([data-slot])]:w-full [&_table:not([data-slot])]:caption-bottom [&_table:not([data-slot])]:border-spacing-0 [&_table:not([data-slot])]:overflow-x-auto [&_table:not([data-slot])]:rounded-xl [&_table:not([data-slot])]:border [&_table:not([data-slot])]:border-border [&_table:not([data-slot])]:text-sm",
+ "[&_tr:not([data-slot])]:border-b [&_tr:not([data-slot])]:transition-colors [&_tbody_tr:not([data-slot]):last-child]:border-b-0",
+ "[&_th:not([data-slot])]:h-10 [&_th:not([data-slot])]:px-2 [&_th:not([data-slot])]:text-left [&_th:not([data-slot])]:align-middle [&_th:not([data-slot])]:text-sm [&_th:not([data-slot])]:font-medium [&_th:not([data-slot])]:whitespace-nowrap [&_th:not([data-slot])]:text-foreground",
+ "[&_th[align=center]:not([data-slot])]:text-center [&_th[align=right]:not([data-slot])]:text-right",
+ "[&_td:not([data-slot])]:p-2 [&_td:not([data-slot])]:text-left [&_td:not([data-slot])]:align-middle [&_td:not([data-slot])]:text-sm [&_td:not([data-slot])]:whitespace-nowrap",
+ "[&_td[align=center]:not([data-slot])]:text-center [&_td[align=right]:not([data-slot])]:text-right",
+ "[&_table:not([data-slot])_:not(pre)>code:not([data-slot])]:rounded-md [&_table:not([data-slot])_:not(pre)>code:not([data-slot])]:leading-5",
+ // Code blocks, including shiki-highlighted MDX output.
+ "[&>pre]:overflow-x-auto [&>pre]:rounded-xl [&>pre]:border [&>pre]:border-border [&>pre]:bg-muted/60 [&>pre]:p-4 [&>pre]:text-sm",
+ "[&>pre.shiki]:leading-(--text-sm--line-height) [&>pre.shiki_code]:text-inherit",
+ "dark:[&>pre.shiki]:[color:var(--shiki-dark,var(--foreground))]",
+ "dark:[&>pre.shiki_span[style*='--shiki-dark']]:[color:var(--shiki-dark)] dark:[&>pre.shiki_span[style*='--shiki-dark']]:[font-style:var(--shiki-dark-font-style,inherit)] dark:[&>pre.shiki_span[style*='--shiki-dark']]:[font-weight:var(--shiki-dark-font-weight,inherit)] dark:[&>pre.shiki_span[style*='--shiki-dark']]:[text-decoration:var(--shiki-dark-text-decoration,inherit)]",
+ className
+ )}
{...props}
/>
)
}
function TypographyA({ className, ...props }: React.ComponentProps<"a">) {
- return
+ return (
+
+ )
}
type TypographyListProps = React.HTMLAttributes<
@@ -137,7 +217,11 @@ function TypographyList({
+ return (
+
+ )
}
function TypographyTable({
@@ -164,11 +258,14 @@ function TypographyTable({
return (
@@ -177,12 +274,22 @@ function TypographyTable({
function TypographyTableCell({
className,
+ align,
...props
}: React.ComponentProps<"td">) {
return (
+
+ {/* Apply the stored theme before first paint to avoid a flash. Must
+ mirror the ThemeProvider defaults in blocks/sidebar-1.tsx. */}
+
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
diff --git a/apps/docs/src/layouts/doc.tsx b/apps/docs/src/layouts/doc.tsx
index 4647a5e..48fea7c 100644
--- a/apps/docs/src/layouts/doc.tsx
+++ b/apps/docs/src/layouts/doc.tsx
@@ -1,7 +1,9 @@
-import type { MarkdownLayoutProps } from "@fulldotdev/sitex"
+import type { LayoutProps } from "@fulldotdev/sitex"
+import type { ComponentProps } from "react"
-import DocLayout from "@/components/layouts/doc"
-import { docsNavigation } from "@/components/layouts/base"
+import { Doc1 } from "@/components/blocks/doc-1"
+import BaseLayout from "@/layouts/base"
+import { docsNavigation } from "@/lib/globals"
type TocItem = {
depth?: number
@@ -9,43 +11,65 @@ type TocItem = {
label: string
}
-type DocFrontmatter = {
- title: string
- description: string
- order?: number
+type DocData = {
tocItems?: readonly TocItem[]
}
-function findPath(path: string | undefined, order: number | undefined) {
- if (path) return path
- if (order !== undefined) return docsNavigation[order - 1]?.href ?? "/"
+function normalizePath(path: string) {
+ if (path === "/") return path
- return "/"
+ return path.replace(/\/$/, "")
}
export default function DocMdxLayout({
title,
description,
headings,
- order,
- path,
tocItems,
children,
-}: MarkdownLayoutProps) {
+ path,
+ url,
+ locale,
+ image,
+ jsonLd,
+ publishedAt,
+ type,
+ updatedAt,
+}: LayoutProps) {
const doc = {
title,
description,
tocItems: tocItems ? [...tocItems] : headings ? [...headings] : undefined,
- }
+ } satisfies Omit<
+ ComponentProps,
+ "children" | "previousPage" | "nextPage"
+ >
+ const currentPath = normalizePath(path)
+ const currentIndex = docsNavigation.findIndex(
+ (item) => normalizePath(item.href) === currentPath
+ )
+ const previousPage =
+ currentIndex > 0 ? docsNavigation[currentIndex - 1] : undefined
+ const nextPage =
+ currentIndex >= 0 ? docsNavigation[currentIndex + 1] : undefined
return (
-
- {children}
-
+
+ {children}
+
+
)
}
diff --git a/apps/docs/src/layouts/home.tsx b/apps/docs/src/layouts/home.tsx
new file mode 100644
index 0000000..ec93e2c
--- /dev/null
+++ b/apps/docs/src/layouts/home.tsx
@@ -0,0 +1,55 @@
+import type { LayoutProps } from "@fulldotdev/sitex"
+
+import { Features1 } from "@/components/blocks/features-1"
+import { Hero1 } from "@/components/blocks/hero-1"
+import BaseLayout from "@/layouts/base"
+
+type HomeData = {
+ hero: {
+ title: string
+ description: string
+ buttons?: readonly { href: string; label: string }[]
+ }
+ features: readonly { title: string; description: string }[]
+}
+
+export default function HomeLayout({
+ title,
+ description,
+ hero,
+ features,
+ children,
+ path,
+ url,
+ locale,
+ headings,
+ image,
+ jsonLd,
+ publishedAt,
+ type,
+ updatedAt,
+}: LayoutProps) {
+ return (
+
+
+ )
+}
diff --git a/apps/docs/src/layouts/mdx-test.tsx b/apps/docs/src/layouts/mdx-test.tsx
deleted file mode 100644
index 44ec770..0000000
--- a/apps/docs/src/layouts/mdx-test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { MarkdownLayoutProps } from "@fulldotdev/sitex"
-
-type MdxTestLayoutProps = MarkdownLayoutProps<{
- title: string
-}>
-
-export default function MdxTestLayout({ title, children }: MdxTestLayoutProps) {
- return (
-
- {title}
- {children}
-
- )
-}
diff --git a/apps/docs/src/lib/globals.ts b/apps/docs/src/lib/globals.ts
new file mode 100644
index 0000000..03f826a
--- /dev/null
+++ b/apps/docs/src/lib/globals.ts
@@ -0,0 +1,40 @@
+import globals from "sitex:globals"
+
+export type NavigationLink = {
+ href: string
+ label: string
+}
+
+export type NavigationGroup = {
+ label: string
+ links: readonly NavigationLink[]
+}
+
+export type SidebarSection = {
+ label: string
+ href: string
+ navigation: readonly NavigationGroup[]
+}
+
+export type DocsGlobals = {
+ name: string
+ logo: {
+ label: string
+ href: string
+ }
+ header: {
+ githubRepo: string
+ navigation: readonly NavigationLink[]
+ }
+ sidebar: {
+ sections: readonly SidebarSection[]
+ }
+}
+
+const docsGlobals = globals as DocsGlobals
+
+export { docsGlobals as globals }
+
+export const docsNavigation = docsGlobals.sidebar.sections.flatMap((section) =>
+ section.navigation.flatMap((group) => group.links)
+)
diff --git a/apps/docs/src/pages/docs/components.mdx b/apps/docs/src/pages/docs/components.mdx
new file mode 100644
index 0000000..fea49fb
--- /dev/null
+++ b/apps/docs/src/pages/docs/components.mdx
@@ -0,0 +1,58 @@
+---
+layout: "doc"
+title: "Components"
+description: "Static rendering by default, client directives, and the pre-built component registry."
+---
+
+Components are plain React. Everything renders to static HTML at build time, and Sitex follows each page's module graph to include exactly the CSS that page imports. Pages ship zero JavaScript unless a component opts in.
+
+## Client Directives
+
+Imported React components opt into browser rendering with a `client:*` directive. Directives live in TSX (layouts, blocks, components), never in MDX bodies, and never on HTML elements or same-file components.
+
+```tsx
+import Search from "@/components/search"
+
+export default function Header() {
+ return
+
+ SiteX 0.3 is out — read the release notes.
+
+
+ )
+}
+```
+
+Key parts:
+
+1. `Banner` renders an `aside` with two variants: `default` (full-width, inverted colors) and `floating` (rounded, bordered, centered).
+2. `storageKey` makes dismissal persist for the session: closing stores a flag in `sessionStorage` and the banner stays hidden on later renders.
+3. `BannerContainer` centers the content and renders the close button; pass `showClose={false}` to hide it, or `onClose` to intercept the click (call `event.preventDefault()` to keep the banner open).
+4. `bannerVariants` is exported for reusing the variant classes elsewhere.
+
+The dismiss behavior and `sessionStorage` check are client-side, so hydrate the banner as an island with a Sitex client directive where you use it in a layout or block, e.g. ``.
diff --git a/apps/docs/src/pages/docs/components/code.mdx b/apps/docs/src/pages/docs/components/code.mdx
new file mode 100644
index 0000000..a5fb272
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/code.mdx
@@ -0,0 +1,43 @@
+---
+layout: "doc"
+title: "Code"
+description: "Code block with shiki syntax highlighting and a copy button; drop-in MDX pre replacement."
+---
+
+A syntax-highlighted code block powered by shiki, with light/dark themes and a copy button. It is designed as the `pre` replacement for MDX code fences, and also works standalone.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/code.json
+```
+
+## Usage
+
+Wire it up as the MDX `pre` component in `vite.config.ts`:
+
+```ts
+import { sitex } from "sitex"
+
+export default defineConfig({
+ plugins: [sitex({ mdx: { components: { pre: "@/components/ui/code" } } })],
+})
+```
+
+Every fenced code block in your MDX pages now renders through this component. For direct use, import the named `Code` export:
+
+```tsx
+import { Code } from "@/components/ui/code"
+
+export function InstallSnippet() {
+ return
+
+
Build sites fast
+
+
+ )
+}
+```
+
+Key details:
+
+1. `variant` is `radial` (default) or `linear`, implemented with CSS mask images.
+2. `direction` sets the gradient origin: `left`, `right`, `top`, `bottom` (default), or `center`.
+3. The element fills its nearest positioned ancestor (`absolute inset-0`), is `pointer-events-none`, and is hidden from assistive tech with `aria-hidden`.
+4. It renders at 50% opacity with the `primary` background color; override both via `className`.
+5. `gradientVariants` is exported for reusing the variant classes elsewhere.
+
+The component is purely decorative and static, so it needs no client directive.
diff --git a/apps/docs/src/pages/docs/components/header.mdx b/apps/docs/src/pages/docs/components/header.mdx
new file mode 100644
index 0000000..87b6b00
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/header.mdx
@@ -0,0 +1,44 @@
+---
+layout: "doc"
+title: "Header"
+description: "Site header with container and grouping primitives."
+---
+
+Structural primitives for a site header: the header bar itself, a centered container, and groups for clustering navigation, logos, and actions.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/header.json
+```
+
+## Usage
+
+```tsx
+import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
+
+export function SiteHeader() {
+ return (
+
+ )
+}
+```
+
+Key parts:
+
+1. `Header` renders a `header` element with two variants: `default` (plain full-width bar) and `floating` (rounded, bordered, centered card that respects the `--container` CSS variable).
+2. `HeaderContainer` centers content with a `max-w-7xl` container and horizontal padding.
+3. `HeaderGroup` is a flex row for clustering items; use `className="ml-auto"` to push a group to the far side.
+4. `headerVariants` is exported for reusing the variant classes elsewhere.
+
+All parts are static and render without a client directive; add one only if you place interactive islands inside.
diff --git a/apps/docs/src/pages/docs/components/layout.mdx b/apps/docs/src/pages/docs/components/layout.mdx
new file mode 100644
index 0000000..f4fee52
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/layout.mdx
@@ -0,0 +1,58 @@
+---
+layout: "doc"
+title: "Layout"
+description: "Document primitives for Sitex layouts: html, head with SEO meta and JSON-LD, body, and main."
+---
+
+Document primitives for building Sitex layouts: `Layout` renders the `html` element, `LayoutHead` the `head` with SEO meta tags and JSON-LD, plus `LayoutBody` and `LayoutMain` for the page shell.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/layout.json
+```
+
+## Usage
+
+```tsx
+import {
+ Layout,
+ LayoutBody,
+ LayoutHead,
+ LayoutMain,
+} from "@/components/ui/layout"
+
+export default function BaseLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+```
+
+Key details:
+
+1. `Layout`, `LayoutBody`, and `LayoutMain` are thin wrappers over `html`, `body`, and `main` with base styling; all standard element props pass through.
+2. `LayoutHead` turns props into meta tags: `title`, `description`, `name` (as `og:site_name`), `image` (string or object with `src`, `alt`, `width`, `height`, `type`), `openGraphType` (alias `type`), and `twitterCard` (`summary` or `summary_large_image`).
+3. For `openGraphType="article"`, `publishedAt` and `updatedAt` emit `article:published_time` and `article:modified_time`.
+4. `jsonLd` accepts a single `schema-dts` object (`Graph` or `WithContext`) or an array, serialized into a `script type="application/ld+json"` tag.
+5. Children of `LayoutHead` render after the generated tags, so you can add extra `link` or `meta` elements. `LayoutHeadProps` and `LayoutJsonLd` types are exported.
diff --git a/apps/docs/src/pages/docs/components/marquee.mdx b/apps/docs/src/pages/docs/components/marquee.mdx
new file mode 100644
index 0000000..6f8d121
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/marquee.mdx
@@ -0,0 +1,39 @@
+---
+layout: "doc"
+title: "Marquee"
+description: "Continuously scrolling strip for logos and quotes."
+---
+
+A CSS-animated strip that scrolls its children in a continuous loop. Use it for logo walls, testimonial tickers, or any row of items you want to drift across the page.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/marquee.json
+```
+
+## Usage
+
+```tsx
+import { Marquee } from "@/components/ui/marquee"
+
+export function LogoMarquee() {
+ return (
+
+
+ )
+}
+```
+
+Key props:
+
+1. `direction` sets the scroll axis and heading: `"left"` (default), `"right"`, `"top"`, or `"bottom"`. Vertical directions stack the children in a column.
+2. `duration` (or the legacy `time` prop, default `30`) controls one loop's length; a number is treated as seconds, a string is passed through as a CSS duration.
+3. `gap` (default `"1rem"`) spaces the items and is also used to offset the loop seam.
+4. `infinite` (default `true`) duplicates the children in an `aria-hidden` copy so the loop is seamless; set it to `false` to animate a single pass without duplication.
+5. `pauseOnHover` pauses the animation while the pointer is over the marquee, and `variant` picks the edge treatment: `"gradient"` (default, fades the edges with a mask) or `"solid"`.
+
+The animation is pure CSS (it also respects `prefers-reduced-motion`), so no client directive is needed. `marqueeVariants` is exported for reusing the variant classes elsewhere.
diff --git a/apps/docs/src/pages/docs/components/price.mdx b/apps/docs/src/pages/docs/components/price.mdx
new file mode 100644
index 0000000..d5f82ad
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/price.mdx
@@ -0,0 +1,41 @@
+---
+layout: "doc"
+title: "Price"
+description: "Locale-aware price display with sale and discount formatting."
+---
+
+A price display that formats amounts with `Intl.NumberFormat` and handles compare-at pricing with a strikethrough and a discount badge. Use it on product cards, pricing tables, and checkout summaries.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/price.json
+```
+
+## Usage
+
+```tsx
+import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
+
+export function ProductPrice() {
+ return (
+
+ per month
+
+ )
+}
+```
+
+Key parts:
+
+1. `Price` is a flex wrapper that lays out its children; `PriceUnit` renders a muted suffix such as a billing period.
+2. `PriceValue` formats `price` and optional `compareAt`. Both accept a `PriceValueType`: a number, a numeric string, a range string like `"10 - 20"`, or a `[min, max]` tuple (ranges render as `"$10.00 - $20.00"`). It renders nothing when `price` is empty.
+3. `currency` (default `"USD"`) and `locale` (default `"en-US"`) drive the currency formatting.
+4. When `compareAt` is higher than `price`, the original price is shown struck through with a "Save …" badge; `discountFormat` switches the badge between `"percentage"` (default) and `"amount"`, and `showDiscount={false}` hides it. The `variant` prop styles the main value: `"default"` or `"sale"` (muted with line-through).
+5. The helpers `formatPriceValue`, `formatPriceDiscount`, and `parseSinglePriceValue` are exported for formatting prices outside the component, along with `priceValueVariants`.
diff --git a/apps/docs/src/pages/docs/components/rating.mdx b/apps/docs/src/pages/docs/components/rating.mdx
new file mode 100644
index 0000000..f34e4c1
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/rating.mdx
@@ -0,0 +1,36 @@
+---
+layout: "doc"
+title: "Rating"
+description: "Star rating display."
+---
+
+A read-only row of five stars that fills to match a numeric rating, including fractional values. Use it for review scores on product cards and testimonials.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/rating.json
+```
+
+## Usage
+
+```tsx
+import { Rating } from "@/components/ui/rating"
+
+export function ReviewScore() {
+ return (
+
+ 4.5 out of 5
+
+ )
+}
+```
+
+Key points:
+
+1. `Rating` is the only export; it renders a `div` and accepts all standard `div` props.
+2. `value` (default `5`) sets how many of the five stars are filled; fractions like `4.5` render a partially filled star.
+3. The stars scale with the surrounding font size (they are sized in `em`), so set `className="text-sm"` or similar to resize them; filled stars use the `primary` color and empty stars a muted track.
+
+It is purely presentational with no state or handlers, so no client directive is needed.
diff --git a/apps/docs/src/pages/docs/components/section.mdx b/apps/docs/src/pages/docs/components/section.mdx
new file mode 100644
index 0000000..4e773be
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/section.mdx
@@ -0,0 +1,39 @@
+---
+layout: "doc"
+title: "Section"
+description: "Page section with consistent vertical rhythm and container."
+---
+
+A `section` element with consistent vertical padding plus a centered container for its content. Use it as the outer shell of every page block so sections share the same rhythm and max width.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/section.json
+```
+
+## Usage
+
+```tsx
+import { Section, SectionContainer } from "@/components/ui/section"
+
+export function FeatureSection() {
+ return (
+
+
+ Features
+ Everything you need to ship a marketing site.
+
+
+ )
+}
+```
+
+Key parts:
+
+1. `Section` renders a `section` with vertical padding, column flex layout, and a scroll margin so anchor links land cleanly below a fixed header.
+2. The `variant` prop picks the shell: `"default"` (full-width on the page background) or `"floating"` (a centered, rounded, bordered card with a shadow, capped at the `--container` width).
+3. `SectionContainer` centers the content, caps it at `max-w-7xl`, and adds horizontal padding and an 8-unit column gap.
+4. `sectionVariants` is exported for reusing the variant classes elsewhere.
+
+Both parts are static wrappers around their children, so no client directive is needed.
diff --git a/apps/docs/src/pages/docs/components/theme-toggle.mdx b/apps/docs/src/pages/docs/components/theme-toggle.mdx
new file mode 100644
index 0000000..b16f3c4
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/theme-toggle.mdx
@@ -0,0 +1,36 @@
+---
+layout: "doc"
+title: "Theme Toggle"
+description: "Light/dark theme provider and toggle button."
+---
+
+A theme provider that applies a `light` or `dark` class to the document root, plus a button that switches between the two. Use it to add a persistent light/dark mode switch to a layout header.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/theme-toggle.json
+```
+
+## Usage
+
+```tsx
+import { ThemeProvider, ThemeToggle } from "@/components/ui/theme-toggle"
+
+export function HeaderThemeToggle() {
+ return (
+
+
+ )
+}
+```
+
+Key parts:
+
+1. `ThemeProvider` holds the current theme in React state, writes it to `localStorage` under `storageKey` (default `"theme"`), and toggles the `light`/`dark` class on `document.documentElement`. `defaultTheme` accepts `"light"`, `"dark"`, or `"system"` (default), where `system` follows `prefers-color-scheme`.
+2. `ThemeToggle` renders an icon button (sun/moon) that flips between `light` and `dark` on click. It accepts all `button` props and sets `aria-pressed` and `data-state` based on the active theme.
+3. `useTheme` returns `{ theme, setTheme }` from the provider context for building custom controls.
+4. The `Theme` type (`"dark" | "light" | "system"`) is exported for typing your own code.
+
+Theme state lives entirely on the client, so hydrate the whole tree as an island with a Sitex client directive where you use it in a layout, e.g. `
+
+
+ Pages
+ File-based routing for MDX and TSX pages.
+
+
+
+
+ Layouts
+ Shared wrappers with SEO baked in.
+
+
+
+ )
+}
+```
+
+Key parts:
+
+1. `Tile` has four variants: `default` (transparent border), `inset` (negative horizontal margin), `outline` (bordered), and `muted` (filled background). Passing `href` renders an `a` instead of a `div` and enables a hover state.
+2. `TileGroup` wraps tiles with `variant="default"` (auto-fit grid) or `variant="masonry"` (CSS columns), and `size` `sm`, `default`, or `lg` controlling the minimum column width (240px, 300px, or 400px).
+3. `TileContent` adds the inner padding and vertical flex layout for text content.
+4. `tileVariants` and `tileGroupVariants` are exported for reusing the variant classes elsewhere.
diff --git a/apps/docs/src/pages/docs/components/toc.mdx b/apps/docs/src/pages/docs/components/toc.mdx
new file mode 100644
index 0000000..2c9c9fe
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/toc.mdx
@@ -0,0 +1,52 @@
+---
+layout: "doc"
+title: "Toc"
+description: "Table of contents navigation for page headings."
+---
+
+A table of contents navigation for the headings on the current page. Use it in a doc layout sidebar so readers can jump to any section.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/toc.json
+```
+
+## Usage
+
+Sitex passes the extracted MDX headings to layouts via the `headings` prop, so a doc layout can map them straight into the menu:
+
+```tsx
+import type { LayoutProps } from "@fulldotdev/sitex"
+
+import {
+ Toc,
+ TocMenu,
+ TocMenuItem,
+ TocMenuLink,
+ TocTitle,
+} from "@/components/ui/toc"
+
+export default function DocLayout({ headings }: LayoutProps) {
+ return (
+
+ On this page
+
+ {headings?.map((heading) => (
+
+
+ {heading.label}
+
+
+ ))}
+
+
+ )
+}
+```
+
+Key parts:
+
+1. `Toc` renders the outer `nav`, `TocTitle` the heading (a `p` by default, changeable via `as`), and `TocMenu`/`TocMenuItem` the `ul`/`li` structure.
+2. `TocMenuLink` indents by `depth` (default `2`; `3` and deeper get increasing left padding), matching the `depth` of each Sitex heading.
+3. Pass `isActive` (or `active`) to `TocMenuLink` to highlight the current section; it sets `data-active` and `aria-current="location"`.
diff --git a/apps/docs/src/pages/docs/components/typography.mdx b/apps/docs/src/pages/docs/components/typography.mdx
new file mode 100644
index 0000000..d550619
--- /dev/null
+++ b/apps/docs/src/pages/docs/components/typography.mdx
@@ -0,0 +1,51 @@
+---
+layout: "doc"
+title: "Typography"
+description: "Prose typography primitives for MDX content."
+---
+
+Styled typography primitives for headings, paragraphs, lists, tables, and inline elements. Use them as MDX component overrides or directly wherever you render prose.
+
+## Install
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/typography.json
+```
+
+## Usage
+
+```tsx
+import {
+ TypographyH1,
+ TypographyInlineCode,
+ TypographyLead,
+ TypographyList,
+ TypographyListItem,
+ TypographyP,
+} from "@/components/ui/typography"
+
+export function Intro() {
+ return (
+ <>
+ Getting started
+ Build static sites with MDX and React.
+
+ Install with pnpm add and
+ create your first page.
+
+
+ Install the package.
+ Add a page.
+
+
+ )
+}
+```
+
+Key parts:
+
+1. Headings: `TypographyH1` through `TypographyH4`, each with a `size` prop (`sm`, `default`, `lg`) that steps the font size up or down one level.
+2. Text: `TypographyP`, `TypographyLead` (larger muted intro text), `TypographyBlockquote`, `TypographyA` (underlined link), and `TypographyInlineCode`.
+3. Lists: `TypographyList` renders a `ul` by default or an `ol` via `as="ol"`; use `TypographyListItem` for items.
+4. Tables: `TypographyTable` (wrapped in a scrollable bordered container, styleable via `containerClassName`) with `TypographyTableRow`, `TypographyTableHead`, and `TypographyTableCell`; the cells respect the `align` attribute.
+5. `Typography` is a generic wrapper (`div` by default, changeable via `as`) with a `size` prop, useful as a prose container.
diff --git a/apps/docs/src/pages/docs/content.mdx b/apps/docs/src/pages/docs/content.mdx
deleted file mode 100644
index 7a9d43a..0000000
--- a/apps/docs/src/pages/docs/content.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
----
-layout: "doc"
-title: "Pages API"
-description: "Share route metadata with typed getPages and getPage helpers."
-order: 6
----
-
-## Overview
-
-Static route files can export JSON page data. Sitex exposes that data through `sitex:pages`, so indexes, cards, sidebars, and metadata can use route-owned values.
-
-Dynamic routes with bracket params are not included.
-
-## data export
-
-Add `export const data` to a static TSX route.
-
-```tsx
-type PostData = {
- title: string
- description: string
- publishedAt: string
-}
-
-export const data = {
- title: "Building content sites with React",
- description: "How route-owned content keeps pages local.",
- publishedAt: "2026-06-03",
-} satisfies PostData
-
-export default function PostPage() {
- return {data.title}
-}
-```
-
-MDX pages use frontmatter as page data.
-
-## getPages
-
-Use `getPages` to read all discovered page data, or pass a slash-prefixed path prefix.
-
-```tsx
-import { getPages } from "sitex:pages"
-
-export default async function BlogPage() {
- const posts = await getPages("/blog")
-
- return (
-
- Blog
- {posts.map((post) => (
-
- {post.title}
- {post.description}
-
- ))}
-
- )
-}
-```
-
-`page.path` follows the configured trailing-slash style.
-
-## getPage
-
-Use `getPage` when you know the route path.
-
-```tsx
-import { getPage } from "sitex:pages"
-
-export default async function FeaturedPost() {
- const post = await getPage("/blog/building-content-sites")
-
- if (!post) return null
-
- return {post.title}
-}
-```
-
-The return value is `Page | undefined`.
-
-## TypeScript
-
-SiteX writes generated `sitex:pages` types from discovered page data.
-
-```ts
-type Page = {
- path: string
- title: string
- description?: string
- publishedAt?: string
-}
-```
-
-Use `satisfies` when a group of pages should share one data shape.
-
-## Limits
-
-`data` can use imported values, constants, and helper functions, but the final value must be JSON-serializable.
-
-```ts
-import { defaultAuthor } from "@/data/authors"
-
-export const data = {
- title: "Building content sites with React",
- author: defaultAuthor.name,
- tags: ["react", "content"],
-}
-```
-
-Use strings, numbers, booleans, arrays, plain objects, and `null`. Do not use JSX, functions, class instances, dates, maps, sets, or cyclic values.
-
-Because route modules run during discovery, top-level page code must be build-safe. Avoid browser-only globals, network side effects, and request-time state.
diff --git a/apps/docs/src/pages/docs/deployment.mdx b/apps/docs/src/pages/docs/deployment.mdx
deleted file mode 100644
index 2d59585..0000000
--- a/apps/docs/src/pages/docs/deployment.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: "doc"
-title: "Deployment"
-description: "Deploy static SiteX sites and sites with server routes."
-order: 10
----
-
-## Overview
-
-Static-only SiteX sites deploy like normal Vite sites.
-
-If any route exports `render = "server"`, deploy to a host that can run server routes. Netlify, Vercel, and Cloudflare are detected automatically.
-
-## Static Sites
-
-```bash
-pnpm build
-```
-
-Publish the generated output directory for your app.
-
-## Server Routes
-
-Server routes run at request time and are not written as static HTML files.
-
-```tsx
-export const render = "server"
-```
diff --git a/apps/docs/src/pages/docs/folder-structure.mdx b/apps/docs/src/pages/docs/folder-structure.mdx
deleted file mode 100644
index 6f2533a..0000000
--- a/apps/docs/src/pages/docs/folder-structure.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: "doc"
-title: "Folder structure"
-description: "Required folders and recommended project shape."
-order: 11
----
-
-```text
-src/
- pages/
- index.tsx
- docs/
- index.mdx
- layouts/
- base.tsx
- doc.tsx
- post.tsx
- components/
- blocks/
- hero.tsx
- sidebar.tsx
- ui/
- button.tsx
- typography.tsx
-```
-
-## Required Folders
-
-Sitex requires `src/pages`. TSX and MDX files in this folder become routes.
-
-MDX pages also use `src/layouts`.
-
-1. `layout: "doc"` uses `src/layouts/doc.tsx`.
-2. `layout: "post"` uses `src/layouts/post.tsx`.
-
-## Recommended Shape
-
-Keep routes thin. Routes choose layouts and provide page content.
-
-Use `src/layouts/base.tsx` for shared metadata, navigation, and site chrome.
-
-Use `src/components` for reusable implementation pieces. This folder is a convention, not a Sitex requirement.
-
-## Blocks
-
-Place blocks in `src/components/blocks`. Blocks are reusable page sections, such as hero sections, feature grids, article frames, and sidebars.
-
-## UI
-
-Place UI components in `src/components/ui`. UI components are low-level design system pieces, such as buttons, typography, inputs, breadcrumbs, and sidebar primitives.
diff --git a/apps/docs/src/pages/docs/index.mdx b/apps/docs/src/pages/docs/index.mdx
index 427d669..429007d 100644
--- a/apps/docs/src/pages/docs/index.mdx
+++ b/apps/docs/src/pages/docs/index.mdx
@@ -1,34 +1,19 @@
---
layout: "doc"
title: "Introduction"
-description: "A simpler, Vite-based React framework for building fast websites with local data."
-order: 1
+description: "An opinionated, Vite-based React framework for building fast content sites."
---
-## Overview
+Sitex is an opinionated React framework for content sites. Pages are MDX documents with typed frontmatter. Structure, chrome, and design live in TSX layouts and components. Every page renders to static HTML at build time; components opt into browser JavaScript with `client:*` directives.
-Sitex renders React routes to fast static HTML by default, while island architecture lets you add browser interactivity exactly where a page needs it.
+The framework handles routing, asset loading, island scripts, head defaults, sitemap, robots.txt, and favicon. Everything else is plain React.
-Routes are local TSX files. Sitex maps them to URLs, keeps routing explicit and file-based. Read more in [Page routing](/docs/page-routing).
+## The Model
-Imported components can opt into client rendering with directives like `client:load`, `client:visible`, and `client:idle`. Read more in [Island rendering](/docs/island-rendering).
+1. `src/pages/**/*.mdx` — routable content documents with typed frontmatter.
+2. `src/layouts/**/*.tsx` — the full document around a page, selected by the `layout` field.
+3. `src/components/**/*.tsx` — blocks, UI primitives, and islands.
-Static routes, server routes, route-level CSS, and island assets are handled by Vite's module graph. Read more in [Rendering and assets](/docs/rendering-and-assets).
+The split is strict on purpose: because every route is a content document flowing through the same pipeline, metadata is always complete and pages stay simple enough that anyone — or any agent — can add one without touching React.
-## Use cases
-
-Sitex is intended for simple content-based websites like landing pages, marketing sites, and documentation. It is especially useful when that content site belongs to a larger product that also has an app-like dashboard built with something like Next.js or TanStack.
-
-In that setup, the content site can reuse the same React components and design system as the app, but render them statically instead of dynamically.
-
-We like building with the React ecosystem. We want to use React components, Vite, TypeScript, Shadcn/ui, and the rest of the ecosystem while still producing extremely fast websites.
-
-## Sitex versus Astro
-
-We love Astro. Fulldev sponsors Astro monthly, and Sitex is mostly inspired by Astro's static-first model and island architecture.
-
-Astro already proves that this model works. Sitex is not trying to replace Astro; it is an experiment around one specific difference.
-
-In Astro, client directives are placed on framework components from inside Astro components. That can make it harder to build the whole website with React components, and you often end up with duplicate components in both `.astro` and `.tsx` syntax to work around that.
-
-Because of this, at Fulldev we've even built [a UI library for Astro](https://ui.full.dev) to work around that limitation. Sitex is the experiment in the other direction: keep the Astro-inspired static output and island architecture, but let client directives be used from TSX so the app feels like a normal React and Vite project.
+Start with [Installation](/docs/installation).
diff --git a/apps/docs/src/pages/docs/installation.mdx b/apps/docs/src/pages/docs/installation.mdx
index c038504..a79c19e 100644
--- a/apps/docs/src/pages/docs/installation.mdx
+++ b/apps/docs/src/pages/docs/installation.mdx
@@ -1,71 +1,31 @@
---
layout: "doc"
title: "Installation"
-description: "Install SiteX and add the Vite and TypeScript configuration."
-order: 2
+description: "Install Sitex and create your first page."
---
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-
-
- Installing with an AI agent?
-
- Share this page URL with your agent and ask it to follow the SiteX
- installation instructions exactly.
-
-
-
-## AI Agent Install
-
-Give your agent this instruction from inside the project you want to set up:
-
-```text
-Read https://sitex.full.dev/docs/installation and install SiteX in this project.
-
-Follow the manual install steps on that page: install the package, add the Vite plugin,
-extend the SiteX TypeScript config, and create the first page.
-```
-
-## Manual Install
-
-Install SiteX, React, Vite+, and the Vite packages your app needs.
+## Install
```bash
pnpm add @fulldotdev/sitex react react-dom vite vite-plus @vitejs/plugin-react
pnpm add -D typescript @types/react @types/react-dom
```
-## Vite Config
-
-Add the SiteX plugin to `vite.config.ts`. Set `appType` to `custom` so Vite does not expect a normal single-page app fallback.
-
```ts
+// vite.config.ts
import { defineConfig } from "vite-plus"
import { sitex } from "@fulldotdev/sitex/plugin"
import react from "@vitejs/plugin-react"
export default defineConfig({
- appType: "custom",
plugins: [react(), sitex()],
})
```
-SiteX writes slashless URLs by default. Pass `sitex({ trailingSlash: true })` if you want directory index output and trailing-slash paths.
-
-## TypeScript Config
-
-Extend the SiteX TypeScript config so JSX client directives like `client:load`, `client:only`, `client:visible`, `client:idle`, and `client:media` are accepted.
-
```json
+// tsconfig.json
{
"extends": "@fulldotdev/sitex/tsconfig",
- "include": [
- "src/**/*",
- ".sitex/**/*.d.ts",
- ".sitex/typecheck/**/*.tsx",
- "vite.config.ts"
- ],
- "exclude": ["dist"],
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
@@ -74,45 +34,81 @@ Extend the SiteX TypeScript config so JSX client directives like `client:load`,
}
```
+The Sitex tsconfig brings the includes and the generated `.sitex` types. The `@/*` alias maps imports to `src/`; Vite picks it up from the tsconfig automatically. Add `.sitex` to `.gitignore` — Sitex regenerates it on every run.
+
+Builds need an absolute site URL for canonical, sitemap, and robots output. Deploy platforms provide one automatically (Netlify `URL`, `VERCEL_PROJECT_PRODUCTION_URL`, `SITE_URL`, and similar); otherwise pass `sitex({ site: { url: "https://example.com" } })`.
+
+## Project Shape
+
+```text
+src/
+ components/ # blocks, UI primitives, islands (convention, not required)
+ globals/
+ index.yaml # shared chrome content, imported via sitex:globals
+ layouts/ # TSX layouts, selected by the layout frontmatter field
+ default.tsx
+ pages/ # MDX pages only — every .mdx file is a route
+ index.mdx
+ index.css # global stylesheet, imported by the base layout
+```
+
## First Page
-Create `src/pages/index.tsx`.
+Create these four files and the site runs:
+
+```css
+/* src/index.css */
+body {
+ font-family: system-ui, sans-serif;
+}
+```
+
+```yaml
+# src/globals/index.yaml
+name: My Site
+```
```tsx
-export default function HomePage() {
+// src/layouts/default.tsx
+import type { LayoutProps } from "@fulldotdev/sitex"
+import globals from "sitex:globals"
+
+import "@/index.css"
+
+export default function DefaultLayout({ title, children }: LayoutProps) {
return (
-
+
- My SiteX site
- {title}
- Hello from SiteX
+
+
+ {title}
+ {children}
+
)
}
```
-`src/pages/index.tsx` becomes `/`. Read [Routing](/docs/page-routing) for file-to-URL behavior, or [MDX pages](/docs/mdx) for prose pages with `src/layouts`.
+```mdx
+---
+layout: "default"
+title: "My Site"
+description: "My first Sitex page."
+---
-## Build Behavior
+Hello from Sitex.
+```
-SiteX runs through Vite+.
+## Commands
```bash
-vp dev
-vp build
-vp preview
+vp dev # dev server with the same rendering pipeline as the build
+vp build # static build
+vp preview # serve the built output
```
-`vp dev` starts the development server. `vp build` writes one HTML file per static route, includes production CSS, and adds the island client script only when a page needs client rendering. `vp preview` serves the built output locally.
-
-## Next Steps
-
-1. Read [Routing](/docs/page-routing) for the route types.
-2. Read [TSX pages](/docs/tsx-pages) for static, dynamic, and server routes.
-3. Read [MDX pages](/docs/mdx) for prose pages with layouts.
-4. Read [Pages API](/docs/content) for indexes, cards, and navigation from route metadata.
-5. Read [Component rendering](/docs/island-rendering) for browser interactivity.
-6. Read [Deployment](/docs/deployment) before deploying server routes.
+`vp build` writes to `dist/`: one HTML file per page (slashless URLs by default; `trailingSlash: true` for directory indexes), `sitemap.xml` (excludes `noindex` pages, `lastmod` from `updatedAt`/`publishedAt`), `robots.txt`, and a generated `/favicon.svg` (configure via the `favicon` plugin option, disable with `favicon: false`). Files in `public/` always win over generated ones. Deploy `dist/` to any static host.
diff --git a/apps/docs/src/pages/docs/island-rendering.mdx b/apps/docs/src/pages/docs/island-rendering.mdx
deleted file mode 100644
index a210e59..0000000
--- a/apps/docs/src/pages/docs/island-rendering.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
----
-layout: "doc"
-title: "Component rendering"
-description: "Add browser interactivity to imported React components."
-order: 9
----
-
-## Overview
-
-SiteX renders components statically unless an imported component uses a client directive.
-
-Client directives only work on imported React components. Do not put them on HTML elements or components declared in the same file.
-
-## Choosing Directives
-
-Use the least eager directive that still matches the interaction.
-
-1. Use `client:load` for controls that must be interactive as soon as possible.
-2. Use `client:idle` for page chrome that is already useful as static HTML, such as a sidebar or theme-aware shell.
-3. Use `client:visible` for below-the-fold widgets and repeated controls, such as copy buttons in long documentation pages.
-4. Use `client:media` for viewport-specific UI that should hydrate only when a media query matches.
-
-## `client:load`
-
-Hydrates immediately.
-
-```tsx
-import Search from "@/components/search"
-
-export default function Page() {
- return `:
+
+```tsx
+import type { LayoutProps } from "@fulldotdev/sitex"
+
+type PostData = { badge?: string }
+
+export default function PostLayout({
+ title,
+ badge,
+ headings,
+ children,
+}: LayoutProps) {
+ return (
+
+
+ {title}
+
+
+
+ {headings.map((h) => (
+
+ {h.label}
+
+ ))}
+
+
+ {title}
+ {badge && {badge} }
+ {children}
+
+
+
+ )
+}
+```
+
+Sitex writes one typecheck file per page to `.sitex/typecheck`, so `tsc` reports frontmatter that does not match the layout props.
+
+## Globals
+
+Shared chrome content — name, logo, navigation, footer links — lives in `src/globals/index.yaml` and is imported with `sitex:globals` (fully typed from the YAML):
+
+```tsx
+import globals from "sitex:globals"
+```
+
+`index.yaml` serves the root locale; its language tag comes from the `site.locale` plugin option (default `"en"`) and sets ``. Files like `nl.yaml` define locale variants served under `/nl` routes, available via the `locales` export and the layout `locale` prop.
+
+## Head Defaults
+
+The layout owns the ``. After rendering, Sitex adds only what is missing:
+
+1. canonical link and `og:url` from the site URL + the page path (`canonical` frontmatter overrides)
+2. `` from the page locale
+3. charset and viewport
+4. robots `noindex` when the page sets `noindex: true`
+5. favicon link and generator meta
+
+For JSON-LD, render a `script type="application/ld+json"` anywhere in the layout — Sitex hoists it into the head. The `layout` component from [pre-built components](/docs/components) wires title, description, Open Graph, Twitter, and JSON-LD props for you.
+
+## MDX Components
+
+Override Markdown elements globally in the plugin config, or per layout with an `mdxComponents` export. Layout entries win. Use this for elements that need more than CSS — the main case is code blocks with syntax highlighting and a copy button, which the registry ships as the [`code` component](/docs/components/code):
+
+```bash
+pnpm dlx shadcn@latest add https://sitex.full.dev/r/code.json
+```
+
+```ts
+// vite.config.ts
+sitex({ mdx: { components: { pre: "@/components/ui/code" } } })
+```
+
+```tsx
+// src/layouts/doc.tsx — per-layout override, wins over the config
+import CodePre from "@/components/ui/code"
+
+export const mdxComponents = { pre: CodePre }
+```
diff --git a/apps/docs/src/pages/docs/mdx-components.mdx b/apps/docs/src/pages/docs/mdx-components.mdx
deleted file mode 100644
index 168d7c6..0000000
--- a/apps/docs/src/pages/docs/mdx-components.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: "doc"
-title: "MDX components"
-description: "Customize Markdown elements rendered inside MDX pages."
-order: 7
----
-
-## Overview
-
-Configure shared MDX components in `vite.config.ts`.
-
-```ts
-import { defineConfig } from "vite-plus"
-import { sitex } from "@fulldotdev/sitex/plugin"
-import react from "@vitejs/plugin-react"
-
-export default defineConfig({
- appType: "custom",
- plugins: [
- react(),
- sitex({
- mdx: {
- components: {
- pre: "@/components/mdx/pre",
- a: "@/components/mdx/link",
- },
- },
- }),
- ],
-})
-```
-
-Each key is an MDX element name. Each value is an import path to a default-exported React component.
-
-## Component Example
-
-```tsx
-import type { ComponentProps } from "react"
-
-export default function MdxLink(props: ComponentProps<"a">) {
- return {children}
-}
-```
-
-Layout components override shared components from `vite.config.ts`.
-
-## Component Names
-
-Use normal MDX tag names such as `pre`, `code`, `a`, `h2`, `table`, `img`, or a custom component name like `Callout`.
-
-Component names must start with a letter and may contain letters, numbers, and dashes.
diff --git a/apps/docs/src/pages/docs/mdx.mdx b/apps/docs/src/pages/docs/mdx.mdx
deleted file mode 100644
index 634f762..0000000
--- a/apps/docs/src/pages/docs/mdx.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
----
-layout: "doc"
-title: "MDX pages"
-description: "Create prose pages with Markdown, React components, and typed layouts."
-order: 5
----
-
-## Overview
-
-Use `.mdx` files for docs, articles, changelogs, and other prose-heavy pages. MDX pages live in `src/pages` and require YAML frontmatter with a `layout` value.
-
-```mdx
----
-layout: post
-title: Building with SiteX
-description: How route-owned content keeps pages local.
----
-
-# Building with SiteX
-
-This body is passed to the layout as `children`.
-```
-
-`layout: post` uses `src/layouts/post.tsx`.
-
-## Layouts
-
-An MDX layout receives frontmatter fields and `children`.
-
-```tsx
-import type { MarkdownLayoutProps } from "@fulldotdev/sitex"
-
-type Props = MarkdownLayoutProps<{
- title: string
- description: string
-}>
-
-export default function PostLayout({ title, description, children }: Props) {
- return (
-
- {title}
- {description}
- {children}
-
- )
-}
-```
-
-The `layout` field selects the layout. It is not passed to the layout component.
-
-## Page Data
-
-MDX frontmatter is available through [Pages API](/docs/content).
-
-Reserved keys:
-
-1. `path` and `children` cannot be defined in page data.
-2. `headings` cannot be defined in MDX frontmatter.
-3. `layout` is included in page data but not passed to the layout component.
-
-## Path And Headings
-
-Layouts can receive the route path and document headings.
-
-```tsx
-import type { MarkdownLayoutProps } from "@fulldotdev/sitex"
-
-type Props = MarkdownLayoutProps<{
- title: string
-}>
-
-export default function DocsLayout({ title, path, headings, children }: Props) {
- return (
-
- {title}
-
- {headings?.map((heading) => (
-
- {heading.label}
-
- ))}
-
- {children}
-
- )
-}
-```
-
-Use `headings` for table-of-contents UI. Use `path` for navigation, breadcrumbs, and canonical links.
-
-## React Components
-
-Import React components directly in MDX.
-
-```mdx
-import { Alert } from "@/components/ui/alert"
-
-Use MDX for prose, TSX for heavily custom pages.
-```
-
-Use [MDX components](/docs/mdx-components) to customize Markdown elements across pages.
diff --git a/apps/docs/src/pages/docs/page-routing.mdx b/apps/docs/src/pages/docs/page-routing.mdx
deleted file mode 100644
index 59e1725..0000000
--- a/apps/docs/src/pages/docs/page-routing.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: "doc"
-title: "Routing"
-description: "Choose TSX or MDX routes and understand how files map to URLs."
-order: 3
----
-
-## Overview
-
-TSX and MDX files in `src/pages` become routes. Routes are static by default.
-
-## Route Types
-
-Use TSX for component-heavy pages, dynamic routes, and server routes. Use MDX for prose-heavy pages.
-
-1. [TSX pages](/docs/tsx-pages) export a React component from `.tsx`.
-2. [MDX pages](/docs/mdx) use Markdown, frontmatter, and a layout.
-3. [Pages API](/docs/content) lets route metadata power indexes, cards, and navigation.
-
-## File Mapping
-
-Files map to URLs by their path inside `src/pages`.
-
-1. `src/pages/index.tsx` becomes `/`.
-2. `src/pages/docs/index.mdx` becomes `/docs`.
-3. `src/pages/about.tsx` becomes `/about`.
-4. `src/pages/docs/routing.mdx` becomes `/docs/routing`.
-
-## Static Routes
-
-Static routes are rendered during build and deployed as HTML.
-
-## Dynamic Routes
-
-A bracket segment becomes a route parameter. Dynamic static routes use TSX and export `paths`.
-
-Read [TSX pages](/docs/tsx-pages) for a full dynamic route example.
-
-## Server Routes
-
-Export `render = "server"` from a TSX route when a page needs request-time data.
-
-Read [Page rendering](/docs/rendering-and-assets) for how static and server routes are rendered, and [Deployment](/docs/deployment) before deploying server routes.
diff --git a/apps/docs/src/pages/docs/pages.mdx b/apps/docs/src/pages/docs/pages.mdx
new file mode 100644
index 0000000..62f0b79
--- /dev/null
+++ b/apps/docs/src/pages/docs/pages.mdx
@@ -0,0 +1,54 @@
+---
+layout: "doc"
+title: "Pages"
+description: "MDX pages with typed frontmatter and the pages API."
+---
+
+Every page is an MDX file in `src/pages`. The file path is the route: `index.mdx` is `/`, `docs/pages.mdx` is `/docs/pages`. Routes are static — no dynamic segments, no TSX pages.
+
+## Frontmatter
+
+`layout`, `title`, and `description` are required. Everything else is optional:
+
+```yaml
+layout: "doc" # renders with src/layouts/doc.tsx; "blog/post" nests
+title: "Pages"
+description: "Create pages with MDX files."
+type: "webpage" # webpage (default) | article | faq
+image: "/covers/pages.png" # social image path or absolute URL
+canonical: "https://example.com/original" # canonical override; excludes page from sitemap
+noindex: true # robots noindex + removed from sitemap
+```
+
+`type: article` requires `publishedAt` (`YYYY-MM-DD`) and allows `updatedAt` and `author`. `type: faq` requires `questions` as a list of `{ question, answer }`.
+
+Any other field passes through to the layout as a prop and to the pages API. `path`, `url`, `locale`, `headings`, and `children` are reserved.
+
+## MDX Body
+
+The body is regular Markdown and can import React components. A fully custom page is one block component in an otherwise empty body:
+
+```mdx
+---
+layout: "base"
+title: "Pricing"
+description: "Simple pricing for teams."
+---
+
+import PricingPage from "@/components/blocks/pricing-page"
+
+About
-
-
- About
-
-
- )
-}
-```
-
-Dynamic static routes export `paths`. Sitex renders one HTML file for each path.
-
-```tsx
-export const paths = [
- { params: { slug: "alpha" } },
- { params: { slug: "beta" } },
-]
-
-export default function Page({ params }) {
- return {params.slug}
-}
-```
-
-## Server Routes
-
-Export `render = "server"` when a route needs the incoming request.
-
-```tsx
-export const render = "server"
-
-export default function RequestPage({ request }) {
- const url = new URL(request.url)
-
- return (
-
-
- Server route
- {url.pathname}
-
-
- )
-}
-```
-
-Server routes are not written as static HTML files. See [Deployment](/docs/deployment).
-
-## CSS Assets
-
-Import CSS from routes, layouts, or components. SiteX includes the CSS needed by each rendered route.
-
-Global CSS usually belongs in `src/layouts/base.tsx`.
-
-```tsx
-import "@/styles/globals.css"
-
-export default function BaseLayout({ children }) {
- return (
-
- {children}
-
- )
-}
-```
-
-## Interactive Components
-
-Pages stay static until an imported component opts into client rendering. Read [Component rendering](/docs/island-rendering) for client directives and island boundaries.
diff --git a/apps/docs/src/pages/docs/tsx-pages.mdx b/apps/docs/src/pages/docs/tsx-pages.mdx
deleted file mode 100644
index f43c1f0..0000000
--- a/apps/docs/src/pages/docs/tsx-pages.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-layout: "doc"
-title: "TSX pages"
-description: "Create static, dynamic, and server-rendered pages with React components."
-order: 4
----
-
-## Overview
-
-Use TSX pages for component-heavy pages, dynamic paths, and request-time server rendering.
-
-```tsx
-export default function AboutPage() {
- return (
-
-
- About
-
-
- About
-
-
- )
-}
-```
-
-`src/pages/about.tsx` becomes `/about`.
-
-## Index Pages
-
-`index.tsx` maps to its parent folder.
-
-1. `src/pages/index.tsx` becomes `/`.
-2. `src/pages/blog/index.tsx` becomes `/blog`.
-
-## Dynamic Pages
-
-A bracket segment becomes a route parameter. Static dynamic routes export `paths`.
-
-```tsx
-import type { PageContext } from "@fulldotdev/sitex"
-
-export const paths = [
- {
- params: { slug: "hello-world" },
- props: { title: "Hello world" },
- },
- {
- params: { slug: "second-post" },
- props: { title: "Second post" },
- },
-]
-
-export default function BlogPost({
- params,
- props,
-}: PageContext<{ title: string }>) {
- return (
-
- {props.title}
- Slug: {params.slug}
-
- )
-}
-```
-
-`src/pages/blog/[slug].tsx` can render `/blog/hello-world` and `/blog/second-post`.
-
-## Server Pages
-
-Export `render = "server"` when a page needs request-time data.
-
-```tsx
-import type { PageContext } from "@fulldotdev/sitex"
-
-export const render = "server"
-
-export default function PreviewPage({ request }: PageContext) {
- const url = request ? new URL(request.url) : undefined
-
- return (
-
-
- Preview
- {url?.searchParams.get("token")}
-
-
- )
-}
-```
-
-Keep pages static unless they need the request.
-
-## Page Data
-
-Static TSX pages can export `data` for indexes, cards, and navigation.
-
-```tsx
-export const data = {
- title: "About",
- description: "Learn about our team.",
-}
-
-export default function AboutPage() {
- return {data.title}
-}
-```
-
-Read [Pages API](/docs/content) for `getPages` and `getPage`.
diff --git a/apps/docs/src/pages/index.mdx b/apps/docs/src/pages/index.mdx
new file mode 100644
index 0000000..40fca1e
--- /dev/null
+++ b/apps/docs/src/pages/index.mdx
@@ -0,0 +1,18 @@
+---
+layout: "home"
+title: "Sitex"
+description: "An opinionated React framework for building fast content sites."
+hero:
+ title: "An opinionated, Vite-based React framework for content sites."
+ description: "Sitex pages are MDX documents rendered through your TSX layouts. Every page ships as static HTML with metadata, social tags, and structured data handled by the framework."
+ buttons:
+ - href: "/docs"
+ label: "Read the introduction"
+features:
+ - title: "MDX pages, TSX layouts"
+ description: "Pages are content documents with typed frontmatter. Structure, chrome, and design live in React layouts and components."
+ - title: "The boring stuff is handled"
+ description: "Layouts render titles, canonical URLs, Open Graph tags, JSON-LD, and favicons with normal TSX. Sitex handles sitemaps and robots.txt."
+ - title: "Islands when needed"
+ description: "Pages ship zero JavaScript by default. Add client rendering at component boundaries with client:load, client:visible, or client:idle."
+---
diff --git a/apps/docs/src/pages/index.tsx b/apps/docs/src/pages/index.tsx
deleted file mode 100644
index d7f4663..0000000
--- a/apps/docs/src/pages/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import Home from "@/components/layouts/home"
-import { TypographyInlineCode } from "@/components/ui/typography"
-
-export const data = {
- title: "Sitex",
- description: "A simpler React framework for building content sites.",
- hero: {
- title:
- "A simpler, Vite-based React framework for building fast websites with local data.",
- description:
- "Sitex renders your React routes to fast static HTML by default, while island architecture lets you add browser interactivity exactly where a page needs it.",
- buttons: [{ href: "/docs", label: "Read the introduction" }],
- },
-}
-
-export default function HomePage() {
- return (
-
- Add plain TSX files under{" "}
- src/pages . Sitex
- maps them to URLs and keeps routing explicit.
-
- ),
- },
- {
- title: "Interactive islands when needed",
- description: (
- <>
- Add client rendering at imported component boundaries with{" "}
- client:load ,{" "}
- client:visible , or{" "}
- client:idle .
-
- ),
- },
- ],
- }}
- />
- )
-}
diff --git a/apps/docs/src/pages/rendering-test/dynamic/[slug].tsx b/apps/docs/src/pages/rendering-test/dynamic/[slug].tsx
deleted file mode 100644
index cdc2b78..0000000
--- a/apps/docs/src/pages/rendering-test/dynamic/[slug].tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { PageContext, StaticPaths } from "@fulldotdev/sitex"
-
-type Props = {
- label: string
-}
-
-export const paths = [
- { params: { slug: "alpha" }, props: { label: "Alpha" } },
- { params: { slug: "beta" }, props: { label: "Beta" } },
-] satisfies StaticPaths
-
-export default function Page({ params, props }: PageContext) {
- return (
-
-
- SiteX dynamic static rendering test
-
-
-
- Dynamic static rendering test
-
- dynamic static route rendered
-
- {props.label}
-
-
-
- )
-}
diff --git a/apps/docs/src/pages/rendering-test/mdx.mdx b/apps/docs/src/pages/rendering-test/mdx.mdx
deleted file mode 100644
index 32a835a..0000000
--- a/apps/docs/src/pages/rendering-test/mdx.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: mdx-test
-title: MDX rendering test
----
-
-This page is rendered from **MDX**.
diff --git a/apps/docs/src/pages/rendering-test/server.tsx b/apps/docs/src/pages/rendering-test/server.tsx
deleted file mode 100644
index 926b4b3..0000000
--- a/apps/docs/src/pages/rendering-test/server.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { PageContext } from "@fulldotdev/sitex"
-
-export const render = "server"
-
-export default async function Page({ request, url }: PageContext) {
- return (
-
-
- SiteX server rendering test
-
-
-
- Server rendering test
- server route rendered
- {url.pathname}
-
-
-
- )
-}
diff --git a/apps/docs/src/pages/rendering-test/static.tsx b/apps/docs/src/pages/rendering-test/static.tsx
deleted file mode 100644
index 8ba1fc9..0000000
--- a/apps/docs/src/pages/rendering-test/static.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function Page() {
- return (
-
-
- SiteX static rendering test
-
-
-
- Static rendering test
- static route rendered
-
-
-
- )
-}
diff --git a/apps/docs/src/styles/globals.css b/apps/docs/src/styles/globals.css
deleted file mode 100644
index 4e7f96a..0000000
--- a/apps/docs/src/styles/globals.css
+++ /dev/null
@@ -1,643 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
- --font-sans: "Geist Variable", sans-serif;
- --font-mono: var(
- --font-geist-mono,
- ui-monospace,
- SFMono-Regular,
- Menlo,
- Monaco,
- Consolas,
- "Liberation Mono",
- "Courier New",
- monospace
- );
-
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-destructive-foreground: var(--destructive-foreground);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-ring: var(--ring);
- --color-chart-1: var(--chart-1);
- --color-chart-2: var(--chart-2);
- --color-chart-3: var(--chart-3);
- --color-chart-4: var(--chart-4);
- --color-chart-5: var(--chart-5);
- --color-sidebar: var(--sidebar);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-ring: var(--sidebar-ring);
-
- --radius-sm: calc(var(--radius) * 0.6);
- --radius-md: calc(var(--radius) * 0.8);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) * 1.4);
-
- --shadow-2xs: var(--shadow-2xs);
- --shadow-xs: var(--shadow-xs);
- --shadow-sm: var(--shadow-sm);
- --shadow: var(--shadow);
- --shadow-md: var(--shadow-md);
- --shadow-lg: var(--shadow-lg);
- --shadow-xl: var(--shadow-xl);
- --shadow-2xl: var(--shadow-2xl);
- --font-heading: var(--font-sans);
- --radius-2xl: calc(var(--radius) * 1.8);
- --radius-3xl: calc(var(--radius) * 2.2);
- --radius-4xl: calc(var(--radius) * 2.6);
-}
-
-:root {
- color-scheme: light;
- --background: oklch(1 0 0);
- --foreground: oklch(0.145 0 0);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.145 0 0);
- --popover: oklch(1 0 0);
- --popover-foreground: oklch(0.145 0 0);
- --primary: #0737ff;
- --primary-foreground: oklch(1 0 0);
- --secondary: oklch(0.967 0.001 286.375);
- --secondary-foreground: oklch(0.21 0.006 285.885);
- --muted: oklch(0.97 0 0);
- --muted-foreground: oklch(0.556 0 0);
- --accent: oklch(0.97 0 0);
- --accent-foreground: oklch(0.205 0 0);
- --destructive: oklch(0.577 0.245 27.325);
- --destructive-foreground: oklch(1 0 0);
- --border: oklch(0.922 0 0);
- --input: oklch(0.922 0 0);
- --ring: oklch(0.708 0 0);
- --chart-1: oklch(0.809 0.105 251.813);
- --chart-2: oklch(0.623 0.214 259.815);
- --chart-3: oklch(0.546 0.245 262.881);
- --chart-4: oklch(0.488 0.243 264.376);
- --chart-5: oklch(0.424 0.199 265.638);
- --sidebar: oklch(0.985 0 0);
- --sidebar-foreground: oklch(0.145 0 0);
- --sidebar-primary: #0737ff;
- --sidebar-primary-foreground: oklch(1 0 0);
- --sidebar-accent: oklch(0.97 0 0);
- --sidebar-accent-foreground: oklch(0.205 0 0);
- --sidebar-border: oklch(0.922 0 0);
- --sidebar-ring: oklch(0.708 0 0);
- --radius: 0.625rem;
- --shadow-x: 0;
- --shadow-y: 1px;
- --shadow-blur: 3px;
- --shadow-spread: 0px;
- --shadow-opacity: 0.1;
- --shadow-color: oklch(0 0 0);
- --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
- --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
- --shadow-sm:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
- --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
- --shadow-md:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
- --shadow-lg:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
- --shadow-xl:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
- --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
- --tracking-normal: 0em;
- --spacing: 0.25rem;
-}
-
-.dark {
- color-scheme: dark;
- --background: oklch(0.145 0 0);
- --foreground: oklch(0.985 0 0);
- --card: oklch(0.205 0 0);
- --card-foreground: oklch(0.985 0 0);
- --popover: oklch(0.205 0 0);
- --popover-foreground: oklch(0.985 0 0);
- --primary: oklch(0.686 0.2105 41.139);
- --primary-foreground: oklch(1 0 0);
- --secondary: oklch(0.274 0.006 286.033);
- --secondary-foreground: oklch(0.985 0 0);
- --muted: oklch(0.269 0 0);
- --muted-foreground: oklch(0.708 0 0);
- --accent: oklch(0.269 0 0);
- --accent-foreground: oklch(0.985 0 0);
- --destructive: oklch(0.704 0.191 22.216);
- --destructive-foreground: oklch(0.985 0 0);
- --border: oklch(1 0 0 / 10%);
- --input: oklch(1 0 0 / 15%);
- --ring: oklch(0.556 0 0);
- --chart-1: oklch(0.809 0.105 251.813);
- --chart-2: oklch(0.623 0.214 259.815);
- --chart-3: oklch(0.546 0.245 262.881);
- --chart-4: oklch(0.488 0.243 264.376);
- --chart-5: oklch(0.424 0.199 265.638);
- --sidebar: oklch(0.205 0 0);
- --sidebar-foreground: oklch(0.985 0 0);
- --sidebar-primary: oklch(0.686 0.2105 41.139);
- --sidebar-primary-foreground: oklch(1 0 0);
- --sidebar-accent: oklch(0.269 0 0);
- --sidebar-accent-foreground: oklch(0.985 0 0);
- --sidebar-border: oklch(1 0 0 / 10%);
- --sidebar-ring: oklch(0.556 0 0);
- --radius: 0.625rem;
- --shadow-x: 0;
- --shadow-y: 1px;
- --shadow-blur: 3px;
- --shadow-spread: 0px;
- --shadow-opacity: 0.1;
- --shadow-color: oklch(0 0 0);
- --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
- --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
- --shadow-sm:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
- --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
- --shadow-md:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
- --shadow-lg:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
- --shadow-xl:
- 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
- --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-}
-
-@layer base {
- * {
- @apply border-border outline-ring/50;
- }
- body {
- @apply bg-background text-foreground;
- }
- html {
- @apply font-sans;
- }
-}
-
-@layer components {
- [data-slot="typography"]
- > :is(
- p,
- blockquote,
- ul,
- ol,
- table,
- [data-slot="typography-lead"],
- [data-slot="typography-p"],
- [data-slot="typography-blockquote"],
- [data-slot="typography-list"],
- [data-slot="typography-table-container"],
- div,
- section,
- article,
- aside,
- nav,
- figure,
- details,
- .docs-code-block,
- pre,
- small,
- dl,
- img,
- picture,
- video,
- iframe
- ):not(:first-child) {
- @apply mt-6;
- }
-
- [data-slot="typography"]
- > :is(h2, [data-slot="typography-h2"]):not(:first-child) {
- @apply mt-10;
- }
-
- [data-slot="typography"]
- > :is(h3, h4, [data-slot="typography-h3"], [data-slot="typography-h4"]):not(
- :first-child
- ) {
- @apply mt-8;
- }
-
- [data-slot="typography"]
- > :is(
- h1,
- h2,
- h3,
- h4,
- [data-slot="typography-h1"],
- [data-slot="typography-h2"],
- [data-slot="typography-h3"],
- [data-slot="typography-h4"]
- )
- + :is(
- p,
- blockquote,
- ul,
- ol,
- table,
- [data-slot="typography-lead"],
- [data-slot="typography-p"],
- [data-slot="typography-blockquote"],
- [data-slot="typography-list"],
- [data-slot="typography-table-container"],
- div,
- section,
- article,
- aside,
- nav,
- figure,
- details,
- .docs-code-block,
- pre,
- small,
- dl,
- img,
- picture,
- video,
- iframe
- ) {
- @apply mt-4;
- }
-
- [data-slot="typography-a"],
- [data-slot="typography"] a:not(.no-typography):not(.no-typography *) {
- @apply font-medium text-primary underline underline-offset-4;
- }
-
- [data-slot="typography-blockquote"],
- [data-slot="typography"]
- blockquote:not(.no-typography):not(.no-typography *) {
- @apply border-l-2 pl-6 text-base italic;
- }
-
- [data-slot="typography-h1"],
- [data-slot="typography"] h1:not(.no-typography):not(.no-typography *) {
- @apply scroll-m-20 font-semibold tracking-tight text-balance;
- }
-
- [data-slot="typography-h1"][data-size="sm"],
- [data-slot="typography"][data-size="sm"]
- h1:not(.no-typography):not(.no-typography *) {
- @apply text-3xl;
- }
-
- [data-slot="typography-h1"][data-size="default"],
- [data-slot="typography"] h1:not(.no-typography):not(.no-typography *),
- [data-slot="typography"][data-size="default"]
- h1:not(.no-typography):not(.no-typography *) {
- @apply text-4xl;
- }
-
- [data-slot="typography-h1"][data-size="lg"],
- [data-slot="typography"][data-size="lg"]
- h1:not(.no-typography):not(.no-typography *) {
- @apply text-5xl;
- }
-
- [data-slot="typography-h2"],
- [data-slot="typography"] h2:not(.no-typography):not(.no-typography *) {
- @apply scroll-m-20 font-semibold tracking-tight;
- }
-
- [data-slot="typography-h2"][data-size="sm"],
- [data-slot="typography"][data-size="sm"]
- h2:not(.no-typography):not(.no-typography *) {
- @apply text-2xl;
- }
-
- [data-slot="typography-h2"][data-size="default"],
- [data-slot="typography"] h2:not(.no-typography):not(.no-typography *),
- [data-slot="typography"][data-size="default"]
- h2:not(.no-typography):not(.no-typography *) {
- @apply text-3xl;
- }
-
- [data-slot="typography-h2"][data-size="lg"],
- [data-slot="typography"][data-size="lg"]
- h2:not(.no-typography):not(.no-typography *) {
- @apply text-4xl;
- }
-
- [data-slot="typography-h3"],
- [data-slot="typography"] h3:not(.no-typography):not(.no-typography *) {
- @apply scroll-m-20 font-semibold tracking-tight;
- }
-
- [data-slot="typography-h3"][data-size="sm"],
- [data-slot="typography"][data-size="sm"]
- h3:not(.no-typography):not(.no-typography *) {
- @apply text-xl;
- }
-
- [data-slot="typography-h3"][data-size="default"],
- [data-slot="typography"] h3:not(.no-typography):not(.no-typography *),
- [data-slot="typography"][data-size="default"]
- h3:not(.no-typography):not(.no-typography *) {
- @apply text-2xl;
- }
-
- [data-slot="typography-h3"][data-size="lg"],
- [data-slot="typography"][data-size="lg"]
- h3:not(.no-typography):not(.no-typography *) {
- @apply text-3xl;
- }
-
- [data-slot="typography-h4"],
- [data-slot="typography"] h4:not(.no-typography):not(.no-typography *) {
- @apply scroll-m-20 font-semibold tracking-tight;
- }
-
- [data-slot="typography-h4"][data-size="sm"],
- [data-slot="typography"][data-size="sm"]
- h4:not(.no-typography):not(.no-typography *) {
- @apply text-lg;
- }
-
- [data-slot="typography-h4"][data-size="default"],
- [data-slot="typography"] h4:not(.no-typography):not(.no-typography *),
- [data-slot="typography"][data-size="default"]
- h4:not(.no-typography):not(.no-typography *) {
- @apply text-xl;
- }
-
- [data-slot="typography-h4"][data-size="lg"],
- [data-slot="typography"][data-size="lg"]
- h4:not(.no-typography):not(.no-typography *) {
- @apply text-2xl;
- }
-
- [data-slot="typography-inline-code"],
- [data-slot="typography"]
- :not(pre)
- > code:not(.no-typography):not(.no-typography *) {
- @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
- }
-
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- :not(pre)
- > code:not(.no-typography):not(.no-typography *) {
- @apply rounded-md text-sm leading-5;
- }
-
- [data-slot="typography-lead"] {
- @apply text-lg text-muted-foreground;
- }
-
- [data-slot="typography-list"],
- [data-slot="typography"] ul:not(.no-typography):not(.no-typography *),
- [data-slot="typography"] ol:not(.no-typography):not(.no-typography *) {
- @apply ml-6 text-base;
- }
-
- [data-slot="typography-list"]:not([data-ordered]),
- [data-slot="typography"] ul:not(.no-typography):not(.no-typography *) {
- @apply list-disc;
- }
-
- [data-slot="typography-list"][data-ordered],
- [data-slot="typography"] ol:not(.no-typography):not(.no-typography *) {
- @apply list-decimal;
- }
-
- [data-slot="typography-list-item"],
- [data-slot="typography-list"] > li,
- [data-slot="typography"]
- ul:not(.no-typography):not(.no-typography *)
- > li:not(.no-typography):not(.no-typography *),
- [data-slot="typography"]
- ol:not(.no-typography):not(.no-typography *)
- > li:not(.no-typography):not(.no-typography *) {
- @apply mt-2;
- }
-
- [data-slot="typography-p"],
- [data-slot="typography"]
- p:not([data-slot]):not(.no-typography):not(.no-typography *) {
- @apply text-base leading-7;
- }
-
- [data-slot="typography-table-container"] {
- @apply w-full overflow-x-auto rounded-xl border border-border;
- }
-
- [data-slot="typography-table"],
- [data-slot="typography"] table:not(.no-typography):not(.no-typography *) {
- @apply w-full caption-bottom text-sm;
- }
-
- [data-slot="typography"] table:not(.no-typography):not(.no-typography *) {
- @apply overflow-x-auto rounded-xl border border-border;
- border-spacing: 0;
- }
-
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- thead,
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- tbody,
- [data-slot="typography"] table:not(.no-typography):not(.no-typography *) tr {
- @apply w-full;
- }
-
- [data-slot="typography-table-row"],
- [data-slot="typography-table"] tr,
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- tr:not(.no-typography):not(.no-typography *) {
- @apply border-b transition-colors;
- }
-
- [data-slot="typography-table"] tbody tr:last-child,
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- tbody
- tr:not(.no-typography):not(.no-typography *):last-child {
- @apply border-b-0;
- }
-
- [data-slot="typography-table-head"],
- [data-slot="typography-table"] th,
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- th:not(.no-typography):not(.no-typography *) {
- @apply h-10 px-2 text-left align-middle text-sm font-medium whitespace-nowrap text-foreground;
- }
-
- [data-slot="typography-table-head"][align="center"],
- [data-slot="typography-table"] th[align="center"],
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- th:not(.no-typography):not(.no-typography *)[align="center"] {
- @apply text-center;
- }
-
- [data-slot="typography-table-head"][align="right"],
- [data-slot="typography-table"] th[align="right"],
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- th:not(.no-typography):not(.no-typography *)[align="right"] {
- @apply text-right;
- }
-
- [data-slot="typography-table-cell"],
- [data-slot="typography-table"] td,
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- td:not(.no-typography):not(.no-typography *) {
- @apply p-2 text-left align-middle text-sm whitespace-nowrap;
- }
-
- [data-slot="typography-table-cell"][align="center"],
- [data-slot="typography-table"] td[align="center"],
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- td:not(.no-typography):not(.no-typography *)[align="center"] {
- @apply text-center;
- }
-
- [data-slot="typography-table-cell"][align="right"],
- [data-slot="typography-table"] td[align="right"],
- [data-slot="typography"]
- table:not(.no-typography):not(.no-typography *)
- td:not(.no-typography):not(.no-typography *)[align="right"] {
- @apply text-right;
- }
-
- [data-slot="typography"] > hr {
- @apply my-8 border-border;
- }
-
- [data-slot="typography"] > pre {
- @apply overflow-x-auto rounded-xl border border-border bg-muted/60 p-4 text-sm;
- }
-
- [data-slot="typography"] > .docs-code-block {
- @apply relative overflow-hidden rounded-md border border-border bg-muted/40 shadow-xs;
- }
-
- [data-slot="typography"] .docs-code-block [data-slot="button"] {
- @apply absolute top-2 right-2 z-10 bg-background/70 shadow-xs backdrop-blur;
- }
-
- [data-slot="typography"] > .docs-code-block > .docs-code-block-content {
- @apply overflow-x-auto;
- }
-
- [data-slot="typography"] > .docs-code-block > .docs-code-block-content > pre,
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre.shiki {
- @apply m-0 min-w-max rounded-none border-0 bg-transparent p-4 pr-14 text-sm leading-[var(--text-sm--line-height)];
- font-family: var(--font-mono);
- background-color: transparent !important;
- }
-
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre
- code,
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre.shiki
- code {
- @apply text-sm leading-[var(--text-sm--line-height)];
- color: var(--shiki-light, var(--foreground));
- }
-
- .dark
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre {
- color: var(--shiki-dark, var(--foreground)) !important;
- }
-
- .dark
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre
- code,
- .dark
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre.shiki
- code {
- color: var(--shiki-dark, var(--foreground)) !important;
- }
-
- .dark
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre
- span[style*="--shiki-dark"] {
- color: var(--shiki-dark) !important;
- font-style: var(--shiki-dark-font-style, inherit) !important;
- font-weight: var(--shiki-dark-font-weight, inherit) !important;
- text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
- }
-
- .dark
- [data-slot="typography"]
- > .docs-code-block
- > .docs-code-block-content
- > pre
- span[style*="--shiki-dark:#6A737D"] {
- color: #8b949e !important;
- }
-
- [data-slot="typography"] > .docs-code-block svg {
- @apply size-4;
- }
-
- [data-slot="typography"] > small {
- @apply block text-sm leading-none font-medium;
- }
-
- [data-slot="typography"] > pre.shiki {
- @apply rounded-xl border border-border bg-muted/60 p-4 text-sm leading-[var(--text-sm--line-height)];
- }
-
- [data-slot="typography"] > pre.shiki code {
- @apply text-inherit;
- }
-
- .dark [data-slot="typography"] > pre.shiki {
- color: var(--shiki-dark, var(--foreground));
- }
-
- .dark [data-slot="typography"] > pre.shiki span[style*="--shiki-dark"] {
- color: var(--shiki-dark);
- font-style: var(--shiki-dark-font-style, inherit);
- font-weight: var(--shiki-dark-font-weight, inherit);
- text-decoration: var(--shiki-dark-text-decoration, inherit);
- }
-}
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 56075fc..955574a 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,19 +1,5 @@
{
"extends": "../../packages/sitex/src/config/tsconfig.json",
- "include": [
- "src/pages/**/*",
- "src/components/blocks/**/*",
- "src/components/layouts/**/*",
- "src/components/mdx-components/**/*",
- "src/components/ui/**/*",
- "src/layouts/**/*",
- "src/components/theme-provider.tsx",
- "src/lib/**/*",
- ".sitex/**/*.d.ts",
- ".sitex/typecheck/**/*.tsx",
- "vite.config.ts"
- ],
- "exclude": ["dist"],
"compilerOptions": {
"paths": {
"@fulldotdev/sitex": ["../../packages/sitex/src/index.ts"],
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
index 8e8f4ce..c7c18f8 100644
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -6,13 +6,15 @@ import react from "@vitejs/plugin-react"
import { sitex } from "../../packages/sitex/src/vite/plugin"
export default defineConfig({
- appType: "custom",
plugins: [
react(),
sitex({
+ site: {
+ url: "https://sitex.full.dev",
+ },
mdx: {
components: {
- pre: "@/components/mdx-components/pre",
+ pre: "@/components/ui/code",
},
},
}),
diff --git a/docs/children-include-handoff.md b/docs/children-include-handoff.md
deleted file mode 100644
index 97e7e27..0000000
--- a/docs/children-include-handoff.md
+++ /dev/null
@@ -1,264 +0,0 @@
-# `children:include` Handoff
-
-This document captures the removed `children:include` experiment so it can be
-revisited later without rediscovering the same design decisions.
-
-## Current Decision
-
-`children:include` is intentionally disabled for now.
-
-The current Sitex island model is:
-
-```tsx
-
-
-```
-
-- `Component` is hydrated as a client island.
-- `Child` is rendered as static HTML.
-- The child stays visible.
-- The child does not get React event handlers, state, or context.
-
-If a child needs interactivity today, mark it as its own island:
-
-```tsx
-
-
-```
-
-This keeps v0 simple, predictable, and cheap.
-
-## Proposed Future API
-
-The preferred syntax for full subtree hydration was:
-
-```tsx
-
-
-```
-
-Meaning:
-
-- `client:*` controls the client render/hydration timing.
-- `children:include` controls the hydration scope.
-- With `children:include`, the parent and children become one React tree.
-
-Examples:
-
-```tsx
-
-
-```
-
-Both `Dashboard` and its children hydrate together, so React context, state, and
-event behavior can cross the parent/child boundary.
-
-```tsx
-
-
-```
-
-The whole tree renders only in the browser.
-
-## Why It Was Removed
-
-The feature worked, but it added a second island compilation path:
-
-- normal component islands
-- generated virtual subtree islands
-
-That made the framework harder to reason about while the core API is still
-settling. The performance default also becomes easier to misuse: one
-`children:include` can ship a much larger subtree to the browser.
-
-For the current Sitex use case, static children already solve the important
-shell/layout case:
-
-```tsx
-
-
-```
-
-The shell can hydrate while the page body stays static.
-
-## Expected Behavior
-
-Without `children:include`:
-
-```tsx
-
-
-```
-
-- `Provider` is the island.
-- `Consumer` is static HTML.
-- `Consumer` cannot read live React context from `Provider`.
-- Child buttons do not update.
-
-With `children:include`:
-
-```tsx
-
-
-```
-
-- `Provider` and `Consumer` are the same island.
-- Both hydrate as one React tree.
-- `Consumer` can read context from `Provider`.
-- Parent and child buttons can update the same state.
-
-## Implementation Sketch
-
-The prior implementation approach was:
-
-1. Detect `children:include` during the Vite transform.
-2. Strip Sitex directives from the original JSX subtree.
-3. Generate a virtual module for that exact subtree.
-4. Register that virtual module in `virtual:sitex-islands`.
-5. Replace the original JSX with a `SitexIsland` pointing at the generated
- subtree island.
-
-Conceptually:
-
-```tsx
-
-
-```
-
-becomes:
-
-```tsx
-
-
- )
-}
-```
-
-The client runtime imports that virtual module and hydrates/renders it as a
-normal island:
-
-```ts
-hydrateRoot(element, createElement(TreeIsland))
-```
-
-## Files That Were Involved
-
-The removed experiment touched:
-
-- `src/vite/plugin.ts`
-- `src/types/virtual.d.ts`
-- `src/pages/examples.tsx`
-- `src/components/shared-counter.tsx`
-
-The important framework pieces were:
-
-- `TreeIsland` registry type
-- `virtual:sitex-tree:*` module IDs
-- `createTreeIslandCode(...)`
-- `stripSitexDirectives(...)`
-- `readChildrenInclude(...)`
-- `children:include` JSX typing
-
-## Verification Test To Recreate
-
-Create a shared context component:
-
-```tsx
-const SharedCounterContext = createContext(null)
-
-export function SharedCounterProvider({ children }) {
- const [count, setCount] = useState(0)
-
- return (
-
- setCount(count + 1)}>Parent: {count}
- {children}
-
- )
-}
-
-export function SharedCounterConsumer() {
- const context = useContext(SharedCounterContext)
-
- return (
- context.setCount(context.count + 1)}>
- Child: {context.count}
-
- )
-}
-```
-
-Then test:
-
-```tsx
-
-
-```
-
-Expected:
-
-- child remains static
-- child does not update parent context
-
-And:
-
-```tsx
-
-
-```
-
-Expected:
-
-- both buttons show the same count
-- clicking either button updates both labels
-
-## Recommendation
-
-Do not re-add this until a real project needs shared React state across a parent
-island and nested children. Most static site/layout use cases are better served
-by:
-
-- hydrating the shell as one island
-- keeping page content static
-- marking small interactive children as their own islands
-
-When reintroduced, keep the API as `children:include`; it matches the
-domain-based directive style:
-
-```tsx
-client:load
-client:only
-client:visible
-client:idle
-client:media
-server:defer
-children:include
-```
diff --git a/netlify.toml b/netlify.toml
index 028ca50..8fe81bd 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,7 +1,77 @@
[build]
-command = "pnpm --filter @fulldotdev/sitex build && pnpm --filter docs build"
+command = "pnpm --filter @fulldotdev/sitex build && pnpm --filter @fulldotdev/ui build && pnpm --filter docs build"
publish = "apps/docs/dist"
[build.environment]
-NODE_VERSION = "22.12.0"
+NODE_VERSION = "22.18.0"
PNPM_VERSION = "11.1.2"
+
+[[redirects]]
+from = "/docs/tsx-pages"
+to = "/docs/pages"
+status = 301
+
+[[redirects]]
+from = "/docs/mdx"
+to = "/docs/pages"
+status = 301
+
+[[redirects]]
+from = "/docs/page-routing"
+to = "/docs/pages"
+status = 301
+
+[[redirects]]
+from = "/docs/folder-structure"
+to = "/docs/installation"
+status = 301
+
+[[redirects]]
+from = "/docs/content"
+to = "/docs/pages"
+status = 301
+
+[[redirects]]
+from = "/docs/mdx-components"
+to = "/docs/layouts"
+status = 301
+
+[[redirects]]
+from = "/docs/seo"
+to = "/docs/layouts"
+status = 301
+
+[[redirects]]
+from = "/docs/rendering-and-assets"
+to = "/docs/components"
+status = 301
+
+[[redirects]]
+from = "/docs/island-rendering"
+to = "/docs/components"
+status = 301
+
+[[redirects]]
+from = "/docs/rendering"
+to = "/docs/components"
+status = 301
+
+[[redirects]]
+from = "/docs/ui"
+to = "/docs/components"
+status = 301
+
+[[redirects]]
+from = "/docs/ui/installation"
+to = "/docs/components"
+status = 301
+
+[[redirects]]
+from = "/docs/ui/components"
+to = "/docs/components"
+status = 301
+
+[[redirects]]
+from = "/docs/ui/*"
+to = "/docs/components/:splat"
+status = 301
diff --git a/package.json b/package.json
index a0ef77f..ab40f83 100644
--- a/package.json
+++ b/package.json
@@ -15,12 +15,12 @@
"release:publish": "vp run -r build && changeset publish"
},
"devDependencies": {
- "@changesets/changelog-github": "^0.7.0",
- "@changesets/cli": "^2.31.0",
- "vite-plus": "^0.1.24"
+ "@changesets/changelog-github": "catalog:",
+ "@changesets/cli": "catalog:",
+ "vite-plus": "^0.2.3"
},
"engines": {
- "node": ">=22.12.0"
+ "node": ">=22.18.0"
},
"packageManager": "pnpm@11.1.2"
}
diff --git a/packages/sitex/CHANGELOG.md b/packages/sitex/CHANGELOG.md
index 00ee6fb..0f10d42 100644
--- a/packages/sitex/CHANGELOG.md
+++ b/packages/sitex/CHANGELOG.md
@@ -6,11 +6,11 @@
- Add MDX pages with layout-based rendering, page data from MDX frontmatter, and configurable MDX components.
- Add server-rendered TSX pages through `export const render = "server"`, while keeping static routes as the default build output.
+ Keep pages static and MDX-only, with TSX layouts and components for structure.
Improve island rendering with `client:load`, `client:only`, `client:visible`, `client:idle`, and `client:media`.
- Refresh the documentation for the 0.3 page model, deployment behavior, component rendering, and project structure.
+ Refresh the documentation for the 0.3 page model, component rendering, and project structure.
## 0.2.1
diff --git a/packages/sitex/README.md b/packages/sitex/README.md
index 75a0fe2..3f6d8a3 100644
--- a/packages/sitex/README.md
+++ b/packages/sitex/README.md
@@ -1,8 +1,8 @@
-# SiteX
+# Sitex
-A simpler, Vite-based React framework for building fast websites with local content.
+An opinionated, Vite-based React framework for building fast content sites.
-SiteX renders React routes to static HTML by default. When a page needs browser interactivity, imported React components can opt into island rendering with `client:load`, `client:only`, `client:visible`, `client:idle`, or `client:media`.
+Pages are MDX documents with typed frontmatter, rendered through your TSX layouts into a Vite HTML pipeline. Sitex owns routing, static output, sitemap, robots.txt, and island scripts. Your layouts import CSS and render native document tags with normal TSX. When a page needs browser interactivity, imported React components opt into island rendering with `client:load`, `client:only`, `client:visible`, `client:idle`, or `client:media`.
## Install
@@ -16,7 +16,7 @@ trusts in your workspace configuration.
## Vite+
-SiteX requires Vite+ with Vite 8 or newer.
+Sitex requires Vite+ with Vite 8 or newer.
```ts
import { defineConfig } from "vite-plus"
@@ -24,20 +24,84 @@ import { sitex } from "@fulldotdev/sitex/plugin"
import react from "@vitejs/plugin-react"
export default defineConfig({
- appType: "custom",
plugins: [react(), sitex()],
})
```
+Builds need an absolute site URL for canonical, sitemap, and robots output. Deploy platforms provide one automatically (`SITE_URL`, `PUBLIC_SITE_URL`, Netlify, Vercel, Cloudflare Pages, Render, Railway, or Koyeb URL/domain vars); otherwise pass `sitex({ site: { url: "https://example.com" } })`.
+
+Create `src/index.css` and import it from your app's base layout. Add Tailwind or any other CSS tooling in your app when you want it.
+
+Sitex generates `/favicon.svg` unless the app provides `public/favicon.svg`. Pass `favicon: false` to disable this.
+
+Create `src/globals/index.yaml` for visible site chrome content that layouts reuse. The root locale name comes from `site.locale` (default `"en"`). Additional files like `src/globals/nl.yaml` define locale variants served under `/nl` routes; layouts read them from the `locales` export of `sitex:globals`.
+
+```yaml
+name: My Site
+logo:
+ label: My Site
+ href: /
+header:
+ navigation:
+ - label: Docs
+ href: /docs
+```
+
+Import it from layouts with `sitex:globals`. Keep Vite `site` config for stable site facts. Keep navigation, logo labels, footer links, and other visible chrome content in `src/globals/index.yaml`.
+
## TypeScript
```json
{
"extends": "@fulldotdev/sitex/tsconfig",
- "include": ["src/**/*", "vite.config.ts"]
+ "compilerOptions": {
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
}
```
+The shared config brings the includes and the generated `.sitex` types; the `@/*` alias maps imports to `src/`.
+
+## First Page
+
+```tsx
+import {
+ Layout,
+ LayoutBody,
+ LayoutHead,
+ type LayoutProps,
+} from "@fulldotdev/sitex"
+
+export default function DefaultLayout({
+ title,
+ description,
+ locale,
+ url,
+ children,
+}: LayoutProps) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+```
+
+```mdx
+---
+layout: "default"
+title: "My Site"
+description: "My first Sitex page."
+---
+
+Hello from Sitex.
+```
+
## Scripts
```bash
@@ -48,7 +112,7 @@ pnpm check # run Vite+ checks
## Documentation
-See the local docs app in `apps/docs/src/pages/docs`.
+See https://sitex.full.dev/docs or the local docs app in `apps/docs/src/pages/docs`.
## License
diff --git a/packages/sitex/package.json b/packages/sitex/package.json
index de15c80..03e527b 100644
--- a/packages/sitex/package.json
+++ b/packages/sitex/package.json
@@ -39,15 +39,14 @@
"scripts": {
"build": "vp pack",
"dev": "vp pack --watch",
- "check": "vp check && pnpm run test",
- "test": "node test/hydration-compiler.test.mjs",
+ "check": "vp check",
"prepublishOnly": "vp run build"
},
"dependencies": {
- "fast-glob": "^3.3.3",
- "nitro": "catalog:",
- "quicktype-core": "^23.2.6",
+ "fast-glob": "catalog:",
+ "parse5": "catalog:",
"satteri": "catalog:",
+ "schema-dts": "catalog:",
"yaml": "catalog:"
},
"peerDependencies": {
@@ -57,16 +56,16 @@
"vite-plus": ">=0.1.24"
},
"devDependencies": {
- "@types/node": "^24.3.1",
- "@types/react": "^19.1.12",
- "@types/react-dom": "^19.1.9",
- "react": "^19.1.1",
- "react-dom": "^19.1.1",
- "typescript": "^5.9.2",
- "vite": "^8.0.16",
- "vite-plus": "^0.1.24"
+ "@types/node": "catalog:",
+ "@types/react": "catalog:",
+ "@types/react-dom": "catalog:",
+ "react": "catalog:",
+ "react-dom": "catalog:",
+ "typescript": "catalog:",
+ "vite": "^8.1.3",
+ "vite-plus": "^0.2.3"
},
"engines": {
- "node": ">=22.12.0"
+ "node": ">=22.18.0"
}
}
diff --git a/packages/sitex/src/config/tsconfig.json b/packages/sitex/src/config/tsconfig.json
index cbfe9d2..0439988 100644
--- a/packages/sitex/src/config/tsconfig.json
+++ b/packages/sitex/src/config/tsconfig.json
@@ -16,7 +16,16 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
- "types": ["vite-plus/client"]
+ "types": ["vite-plus/client"],
+ "paths": {
+ "@/*": ["${configDir}/src/*"]
+ }
},
+ "include": [
+ "${configDir}/src/**/*",
+ "${configDir}/.sitex/**/*.d.ts",
+ "${configDir}/.sitex/typecheck/**/*.tsx",
+ "${configDir}/vite.config.ts"
+ ],
"files": ["../types/virtual.d.ts"]
}
diff --git a/packages/sitex/src/hydration/compiler.ts b/packages/sitex/src/hydration/compiler.ts
index e65ba40..7ecfca2 100644
--- a/packages/sitex/src/hydration/compiler.ts
+++ b/packages/sitex/src/hydration/compiler.ts
@@ -371,5 +371,3 @@ function applyReplacements(code: string, replacements: Replacement[]) {
return result
}
-
-export { collectHydrationEntries as collectIslands }
diff --git a/packages/sitex/src/hydration/protocol.ts b/packages/sitex/src/hydration/protocol.ts
index 7e987d0..99c9e32 100644
--- a/packages/sitex/src/hydration/protocol.ts
+++ b/packages/sitex/src/hydration/protocol.ts
@@ -116,12 +116,3 @@ function isReactElement(value: Record) {
function throwInvalidProp(path: string, reason: string): never {
throw new Error(`Invalid Sitex island prop at ${path}: ${reason}.`)
}
-
-export {
- hydrationAttributes as islandAttributes,
- hydrationModes as islandModes,
- isHydrationMode as isIslandMode,
- parseHydrationProps as parseIslandProps,
- serializeHydrationProps as serializeIslandProps,
- type HydrationMode as IslandMode,
-}
diff --git a/packages/sitex/src/hydration/registry.ts b/packages/sitex/src/hydration/registry.ts
index b213962..69d493c 100644
--- a/packages/sitex/src/hydration/registry.ts
+++ b/packages/sitex/src/hydration/registry.ts
@@ -59,13 +59,3 @@ function normalizeModuleId(source: string, importer: string, root: string) {
return `/${path.relative(root, withExtension).replaceAll(path.sep, "/")}`
}
-
-export {
- createHydrationEntry as createIsland,
- createVirtualHydrationCode as createVirtualIslandsCode,
- registerHydrationEntry as registerIsland,
- resolvedVirtualHydrationId as resolvedVirtualIslandsId,
- virtualHydrationId as virtualIslandsId,
- type HydrationEntry as Island,
- type HydrationRegistry as IslandRegistry,
-}
diff --git a/packages/sitex/src/index.ts b/packages/sitex/src/index.ts
index 61d57ce..009189e 100644
--- a/packages/sitex/src/index.ts
+++ b/packages/sitex/src/index.ts
@@ -1,11 +1,10 @@
export type {
+ FaqQuestion,
JsonValue,
+ LayoutProps,
MarkdownHeading,
- MarkdownLayoutProps,
- PageContext,
+ PageData,
+ PageType,
Route,
- RouteParams,
- RouteRenderMode,
- StaticPath,
- StaticPaths,
} from "./router/runtime.ts"
+export type { SiteConfig } from "./site/config.ts"
diff --git a/packages/sitex/src/nitro/renderer.ts b/packages/sitex/src/nitro/renderer.ts
deleted file mode 100644
index 8f8542a..0000000
--- a/packages/sitex/src/nitro/renderer.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { renderServerResponse } from "virtual:sitex-render"
-
-export default async function renderer({ req }: { req: Request; url: URL }) {
- const response = await renderServerResponse(req)
-
- return response ?? new Response("Not found", { status: 404 })
-}
diff --git a/packages/sitex/src/prefetch/client.ts b/packages/sitex/src/prefetch/client.ts
new file mode 100644
index 0000000..735e7a6
--- /dev/null
+++ b/packages/sitex/src/prefetch/client.ts
@@ -0,0 +1,67 @@
+/**
+ * Fallback link prefetcher for browsers without the Speculation Rules API.
+ * Sitex injects a speculationrules script alongside this module; browsers
+ * that support it prerender links natively and this module stays idle.
+ */
+const prefetchedUrls = new Set()
+
+function supportsSpeculationRules() {
+ return (
+ "supports" in HTMLScriptElement &&
+ HTMLScriptElement.supports("speculationrules")
+ )
+}
+
+function saveDataEnabled() {
+ const connection = (
+ navigator as Navigator & { connection?: { saveData?: boolean } }
+ ).connection
+
+ return connection?.saveData === true
+}
+
+function readPrefetchableUrl(target: EventTarget | null) {
+ if (!(target instanceof Element)) return
+
+ const anchor = target.closest("a[href]")
+
+ if (!(anchor instanceof HTMLAnchorElement)) return
+ if (anchor.target && anchor.target !== "_self") return
+ if (anchor.hasAttribute("download")) return
+ if (anchor.closest("[data-no-prefetch]")) return
+
+ const url = new URL(anchor.href, location.href)
+
+ if (url.origin !== location.origin) return
+ if (url.pathname === location.pathname && url.search === location.search) {
+ return
+ }
+
+ return url
+}
+
+function prefetch(url: URL) {
+ const href = url.pathname + url.search
+
+ if (prefetchedUrls.has(href)) return
+
+ prefetchedUrls.add(href)
+
+ const link = document.createElement("link")
+
+ link.rel = "prefetch"
+ link.href = href
+ document.head.appendChild(link)
+}
+
+function onIntent(event: Event) {
+ const url = readPrefetchableUrl(event.target)
+
+ if (url) prefetch(url)
+}
+
+if (!supportsSpeculationRules() && !saveDataEnabled()) {
+ document.addEventListener("mouseover", onIntent, { passive: true })
+ document.addEventListener("touchstart", onIntent, { passive: true })
+ document.addEventListener("focusin", onIntent, { passive: true })
+}
diff --git a/packages/sitex/src/render/html.ts b/packages/sitex/src/render/html.ts
new file mode 100644
index 0000000..056e5ba
--- /dev/null
+++ b/packages/sitex/src/render/html.ts
@@ -0,0 +1,133 @@
+import type { DefaultTreeAdapterMap } from "parse5"
+import { parse, parseFragment, serialize } from "parse5"
+
+type ChildNode = DefaultTreeAdapterMap["childNode"]
+type Document = DefaultTreeAdapterMap["document"]
+type Element = DefaultTreeAdapterMap["element"]
+type ParentNode = DefaultTreeAdapterMap["parentNode"]
+
+export type HtmlDocument = {
+ body: Element
+ document: Document
+ head: Element
+ html: Element
+}
+
+export function parseHtmlDocument(source: string): HtmlDocument {
+ const document = parse(source)
+ const html = findChildElement(document, "html")
+ const head = html && findChildElement(html, "head")
+ const body = html && findChildElement(html, "body")
+
+ if (!html || !head || !body) {
+ throw new Error(
+ "Sitex could not read , , and from the rendered page."
+ )
+ }
+
+ return { body, document, head, html }
+}
+
+export function serializeHtmlDocument(htmlDocument: HtmlDocument) {
+ const output = serialize(htmlDocument.document)
+
+ return /^${output}`
+}
+
+export function getAttribute(element: Element, name: string) {
+ return element.attrs.find((attr) => attr.name === name)?.value
+}
+
+export function setAttribute(element: Element, name: string, value: string) {
+ const attr = element.attrs.find((entry) => entry.name === name)
+
+ if (attr) {
+ attr.value = value
+ return
+ }
+
+ element.attrs.push({ name, value })
+}
+
+export function appendHtmlFragment(parent: Element, fragment: string) {
+ const parsed = parseFragment(parent, fragment, {})
+
+ for (const node of parsed.childNodes) {
+ node.parentNode = parent
+ parent.childNodes.push(node)
+ }
+}
+
+export function findElements(
+ parent: ParentNode,
+ match: (element: Element) => boolean
+) {
+ const found: Element[] = []
+
+ walkElements(parent, (element) => {
+ if (match(element)) found.push(element)
+ })
+
+ return found
+}
+
+export function hasHeadElement(
+ head: Element,
+ tagName: string,
+ match: (element: Element) => boolean
+) {
+ return head.childNodes.some(
+ (node) => isElement(node) && node.tagName === tagName && match(node)
+ )
+}
+
+export function removeElement(element: Element) {
+ const parent = element.parentNode
+
+ if (!parent) return
+
+ const index = parent.childNodes.indexOf(element)
+
+ if (index !== -1) parent.childNodes.splice(index, 1)
+
+ element.parentNode = null
+}
+
+export function appendElement(parent: Element, element: Element) {
+ element.parentNode = parent
+ parent.childNodes.push(element)
+}
+
+export function escapeHtmlAttribute(value: string) {
+ return value
+ .replaceAll("&", "&")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">")
+ .replaceAll(`"`, """)
+ .replaceAll("'", "'")
+}
+
+function walkElements(node: ParentNode, visit: (element: Element) => void) {
+ for (const child of node.childNodes) {
+ if (!isElement(child)) continue
+
+ visit(child)
+
+ if (child.tagName === "template" && "content" in child) {
+ walkElements(child.content, visit)
+ continue
+ }
+
+ walkElements(child, visit)
+ }
+}
+
+function findChildElement(parent: ParentNode, tagName: string) {
+ return parent.childNodes.find(
+ (node): node is Element => isElement(node) && node.tagName === tagName
+ )
+}
+
+function isElement(node: ChildNode): node is Element {
+ return "tagName" in node
+}
diff --git a/packages/sitex/src/render/render.tsx b/packages/sitex/src/render/render.tsx
new file mode 100644
index 0000000..9178d17
--- /dev/null
+++ b/packages/sitex/src/render/render.tsx
@@ -0,0 +1,278 @@
+import { prerender } from "react-dom/static"
+import { getRoutes } from "virtual:sitex-routes"
+
+import { hydrationAttributes } from "../hydration/protocol.ts"
+import {
+ resolveRouteLocale,
+ routePathToPublicPath,
+ type Route,
+} from "../router/runtime.ts"
+import {
+ appendElement,
+ appendHtmlFragment,
+ escapeHtmlAttribute,
+ findElements,
+ getAttribute,
+ hasHeadElement,
+ parseHtmlDocument,
+ removeElement,
+ serializeHtmlDocument,
+ setAttribute,
+ type HtmlDocument,
+} from "./html.ts"
+
+export type RenderConfig = {
+ defaultLocale: string
+ faviconHref?: string
+ locales: readonly string[]
+ prefetch: boolean
+ siteUrl: string
+ trailingSlash: boolean
+}
+
+export type RenderAssets = {
+ islandClientPreamble?: string
+ islandClientSrc?: string
+ prefetchClientSrc?: string
+ stylesheetHrefs?: readonly string[]
+}
+
+export type ResolveRenderAssets = (page: {
+ hasIslands: boolean
+}) => RenderAssets
+
+const generatorMeta = ` {
+ const node = await route.component()
+ const source = await new Response((await prerender(node)).prelude).text()
+ const htmlDocument = parseHtmlDocument(source)
+
+ hoistJsonLdScripts(htmlDocument)
+ applyDocumentLocale(htmlDocument, route, config)
+ applyHeadDefaults(htmlDocument, route, config)
+
+ const hasIslands = hasIslandElements(htmlDocument)
+ const assets = resolveAssets?.({ hasIslands }) ?? {}
+
+ injectStylesheets(htmlDocument, assets)
+ injectIslandClient(htmlDocument, hasIslands, assets)
+ injectPrefetch(htmlDocument, config, assets)
+
+ return serializeHtmlDocument(htmlDocument)
+}
+
+const speculationRules = JSON.stringify({
+ prefetch: [
+ {
+ where: {
+ and: [
+ { href_matches: "/*" },
+ {
+ not: {
+ selector_matches: "[data-no-prefetch], [data-no-prefetch] a",
+ },
+ },
+ ],
+ },
+ eagerness: "moderate",
+ },
+ ],
+ prerender: [
+ {
+ where: {
+ and: [
+ { href_matches: "/*" },
+ {
+ not: {
+ selector_matches: "[data-no-prefetch], [data-no-prefetch] a",
+ },
+ },
+ ],
+ },
+ eagerness: "moderate",
+ },
+ ],
+})
+
+/**
+ * Browsers with the Speculation Rules API prerender links on hover natively;
+ * the prefetch client module covers the rest with hover prefetching.
+ */
+function injectPrefetch(
+ htmlDocument: HtmlDocument,
+ config: RenderConfig,
+ assets: RenderAssets
+) {
+ if (!config.prefetch) return
+
+ appendHtmlFragment(
+ htmlDocument.head,
+ ``
+ )
+
+ if (!assets.prefetchClientSrc) return
+
+ appendHtmlFragment(
+ htmlDocument.body,
+ ``
+ )
+}
+
+/**
+ * JSON-LD scripts render inline where layouts place them, but belong in the
+ * document head.
+ */
+function hoistJsonLdScripts(htmlDocument: HtmlDocument) {
+ const scripts = findElements(
+ htmlDocument.body,
+ (element) =>
+ element.tagName === "script" &&
+ getAttribute(element, "type") === "application/ld+json"
+ )
+
+ for (const script of scripts) {
+ removeElement(script)
+ appendElement(htmlDocument.head, script)
+ }
+}
+
+function applyDocumentLocale(
+ htmlDocument: HtmlDocument,
+ route: Route,
+ config: RenderConfig
+) {
+ if (getAttribute(htmlDocument.html, "lang")) return
+
+ setAttribute(
+ htmlDocument.html,
+ "lang",
+ resolveRouteLocale(route.path, config.locales, config.defaultLocale)
+ )
+}
+
+function applyHeadDefaults(
+ htmlDocument: HtmlDocument,
+ route: Route,
+ config: RenderConfig
+) {
+ const { head } = htmlDocument
+ const url =
+ typeof route.data.canonical === "string"
+ ? route.data.canonical
+ : createPageUrl(route.path, config)
+ const tags: string[] = []
+
+ const hasCharset = hasHeadElement(
+ head,
+ "meta",
+ (element) =>
+ getAttribute(element, "charset") !== undefined ||
+ getAttribute(element, "http-equiv")?.toLowerCase() === "content-type"
+ )
+
+ if (!hasCharset) tags.push(`
-export type RouteRenderMode = "static" | "server"
+export type PageType = "webpage" | "article" | "faq"
+export type JsonLd = Graph | WithContext
-export type StaticPath = {
- params: RouteParams
- props?: Props
-}
-
-export type StaticPaths =
- | StaticPath[]
- | (() => StaticPath[] | Promise[]>)
-
-export type PageContext = {
- params: RouteParams
- props: Props
- request?: Request
- url: URL
-}
-
-export type PageLayout = (
- context: PageContext
-) => ReactNode | Promise
-
-export type MarkdownLayoutProps = TData & {
- children: ReactNode
- headings?: readonly MarkdownHeading[]
- path?: string
+export type FaqQuestion = {
+ question: string
+ answer: string
}
export type MarkdownHeading = {
@@ -44,32 +24,56 @@ export type MarkdownHeading = {
label: string
}
-export type Route = {
+export type PageData = {
+ layout: string
+ title: string
+ description: string
+ type?: PageType
+ image?: string
+ canonical?: string
+ noindex?: boolean
+ publishedAt?: string
+ updatedAt?: string
+ author?: string
+ questions?: FaqQuestion[]
+ jsonLd?: JsonValue
+ headings: MarkdownHeading[]
+ [key: string]: JsonValue | undefined
+}
+
+export type LayoutProps = TData & {
+ title: string
+ description: string
+ type?: PageType
+ image?: string
+ canonical?: string
+ noindex?: boolean
+ publishedAt?: string
+ updatedAt?: string
+ author?: string
+ questions?: readonly FaqQuestion[]
+ jsonLd?: JsonLd | readonly JsonLd[]
+ path: string
+ url: string
+ locale: string
+ headings: readonly MarkdownHeading[]
+ children: ReactNode
+}
+
+export type Route = {
file: string
- layout: PageLayout
- paramNames: string[]
- params: RouteParams
path: string
- props: Props
- render: RouteRenderMode
- score: number
+ data: PageData
+ component: () => ReactNode | Promise
}
-type PageModule = {
+type PageModule = {
default?: unknown
- paths?: StaticPaths
+ data?: unknown
render?: unknown
}
-type RouteMatch = {
- params: RouteParams
- route: Route
-}
-
-export async function readPageRoutes(
- module: unknown,
- file: string
-): Promise[]> {
+export function readPageRoute(module: unknown, file: string): Route {
const pageModule = module as PageModule
const component = pageModule.default
@@ -77,116 +81,41 @@ export async function readPageRoutes(
throw new Error(`Page module "${file}" must default export a component.`)
}
- if (pageModule.render !== undefined && pageModule.render !== "server") {
- const renderMode = JSON.stringify(pageModule.render)
-
+ if (pageModule.render !== undefined) {
throw new Error(
- `Page module "${file}" has unsupported render mode ${renderMode}. Only "server" is supported.`
+ `Page "${file}" exports render, but Sitex pages are static. Remove the render export.`
)
}
- const render: RouteRenderMode =
- pageModule.render === "server" ? "server" : "static"
- const pattern = pageFileToRoutePattern(file)
- const paramNames = readParamNames(pattern)
-
- if (render === "server") {
- return [
- createRoute({
- file,
- layout: component as PageLayout,
- paramNames,
- params: {},
- path: pattern,
- props: undefined as unknown,
- render,
- }),
- ]
- }
-
- if (paramNames.length === 0) {
- if (pageModule.paths !== undefined) {
- throw new Error(
- `Static page module "${file}" exports paths, but its route has no params.`
- )
- }
+ const data = pageModule.data
- return [
- createRoute({
- file,
- layout: component as PageLayout,
- paramNames,
- params: {},
- path: pattern,
- props: undefined as unknown,
- render,
- }),
- ]
- }
-
- if (pageModule.paths === undefined) {
- throw new Error(
- `Dynamic static page module "${file}" must export paths or render = "server".`
- )
+ if (!data || typeof data !== "object" || Array.isArray(data)) {
+ throw new Error(`Page module "${file}" must export page data.`)
}
- const paths =
- typeof pageModule.paths === "function"
- ? await pageModule.paths()
- : pageModule.paths
-
- if (!Array.isArray(paths)) {
- throw new Error(`Static paths export in "${file}" must return an array.`)
+ return {
+ file,
+ path: pageFileToRoutePath(file),
+ data: data as PageData,
+ component: component as Route["component"],
}
-
- return paths.map((path, index) => {
- validateStaticPath(file, pattern, paramNames, path, index)
-
- return createRoute({
- file,
- layout: component as PageLayout,
- paramNames,
- params: path.params,
- path: fillRoutePattern(pattern, path.params),
- props: path.props as unknown,
- render,
- })
- })
}
export function sortRoutes(routes: Route[]) {
- return [...routes].sort(
- (a: Route, b: Route) => b.score - a.score || a.path.localeCompare(b.path)
- )
+ return [...routes].sort((a, b) => a.path.localeCompare(b.path))
}
-export function matchRoute(
- routes: Route[],
- url: string
-): RouteMatch | undefined {
- const normalizedUrl = normalizeRoutePath(url)
-
- for (const route of sortRoutes(routes)) {
- const params = matchRoutePath(route.path, normalizedUrl)
+export function matchRoute(routes: Route[], url: string): Route | undefined {
+ const path = normalizeRoutePath(safeDecodeUrl(url))
- if (params) return { params: { ...route.params, ...params }, route }
- }
+ return routes.find((route) => route.path === path)
}
-export function createPageContext(
- route: Route,
- params: RouteParams,
- request?: Request
-): PageContext {
- const url = request
- ? new URL(request.url)
- : new URL(route.path, "https://sitex.local")
-
- return {
- params,
- props: route.props,
- request,
- url,
+function safeDecodeUrl(url: string) {
+ try {
+ return decodeURI(url)
+ } catch {
+ return url
}
}
@@ -194,8 +123,7 @@ export function validateUniqueRoutePaths(routes: Route[]) {
const seen = new Map()
for (const route of routes) {
- const key = route.path
- const previous = seen.get(key)
+ const previous = seen.get(route.path)
if (previous) {
throw new Error(
@@ -203,185 +131,42 @@ export function validateUniqueRoutePaths(routes: Route[]) {
)
}
- seen.set(key, route.file)
+ seen.set(route.path, route.file)
}
}
-function createRoute(route: Omit, "score">): Route {
- return {
- ...route,
- path: normalizeRoutePath(route.path),
- score: scoreRoute(route.path),
+export function pageFileToRoutePath(file: string) {
+ if (/\[[^\]]*\]/.test(file)) {
+ throw new Error(
+ `Page "${file}" uses a dynamic segment. Sitex routes are static MDX files.`
+ )
}
-}
-function pageFileToRoutePattern(file: string) {
const route = file
.replace(/^src\/pages/, "")
- .replace(/\/index\.(tsx|mdx)$/, "/")
- .replace(/\.(tsx|mdx)$/, "")
+ .replace(/\/index\.mdx$/, "/")
+ .replace(/\.mdx$/, "")
return normalizeRoutePath(route || "/")
}
-function normalizeRoutePath(path: string) {
+export function normalizeRoutePath(path: string) {
if (!path || path === "/") return "/"
return `/${path.replace(/^\/+|\/+$/g, "")}`
}
-function readParamNames(path: string) {
- return [...path.matchAll(/\[([^\]]+)\]/g)].map((match) => {
- const name = match[1]
-
- if (!name || name.startsWith("...")) {
- throw new Error(`Unsupported route param "[${name}]" in "${path}".`)
- }
-
- return name
- })
-}
-
-function validateStaticPath(
- file: string,
- pattern: string,
- paramNames: string[],
- path: StaticPath,
- index: number
+export function resolveRouteLocale(
+ routePath: string,
+ locales: readonly string[],
+ defaultLocale: string
) {
- if (!path || typeof path !== "object" || Array.isArray(path)) {
- throw new Error(`Static path ${index} in "${file}" must be an object.`)
- }
-
- validateJsonValue(path.props, `${file} paths[${index}].props`, new WeakSet())
-
- const params = path.params
-
- if (!params || typeof params !== "object" || Array.isArray(params)) {
- throw new Error(
- `Static path ${index} in "${file}" must include a params object.`
- )
- }
-
- const actual = Object.keys(params).sort()
- const expected = [...paramNames].sort()
-
- if (actual.join("\0") !== expected.join("\0")) {
- throw new Error(
- `Static path ${index} in "${file}" must provide params { ${expected.join(", ")} } for "${pattern}".`
- )
- }
-
- for (const [key, value] of Object.entries(params)) {
- if (typeof value !== "string" || value.length === 0) {
- throw new Error(
- `Static path ${index} in "${file}" param "${key}" must be a non-empty string.`
- )
- }
- }
-}
-
-function fillRoutePattern(pattern: string, params: RouteParams) {
- return pattern.replace(/\[([^\]]+)\]/g, (_match, key: string) =>
- encodeURIComponent(params[key] ?? "")
- )
-}
-
-function matchRoutePath(
- pattern: string,
- path: string
-): RouteParams | undefined {
- const paramNames = readParamNames(pattern)
-
- if (paramNames.length === 0) {
- return normalizeRoutePath(pattern) === normalizeRoutePath(path)
- ? {}
- : undefined
- }
-
- const patternSegments = normalizeRoutePath(pattern).split("/")
- const pathSegments = normalizeRoutePath(path).split("/")
-
- if (patternSegments.length !== pathSegments.length) return
-
- const params: RouteParams = {}
-
- for (let index = 0; index < patternSegments.length; index++) {
- const patternSegment = patternSegments[index]
- const pathSegment = pathSegments[index]
- const paramMatch = patternSegment.match(/^\[([^\]]+)\]$/)
-
- if (paramMatch) {
- params[paramMatch[1]] = decodeURIComponent(pathSegment)
- continue
- }
-
- if (patternSegment !== pathSegment) return
- }
-
- return params
-}
+ const segment = routePath.split("/").find(Boolean)
-function scoreRoute(path: string) {
- return normalizeRoutePath(path)
- .split("/")
- .reduce((score, segment) => {
- if (!segment) return score
- return score + (segment.startsWith("[") ? 1 : 10)
- }, 0)
+ return segment && locales.includes(segment) ? segment : defaultLocale
}
-function validateJsonValue(
- value: unknown,
- path: string,
- seen: WeakSet
-) {
- if (value === undefined || value === null) return
-
- const valueType = typeof value
-
- if (valueType === "string" || valueType === "boolean") return
-
- if (valueType === "number") {
- if (!Number.isFinite(value)) {
- throw new Error(`${path} contains a non-finite number.`)
- }
-
- return
- }
-
- if (valueType !== "object") {
- throw new Error(`${path} must be JSON-serializable.`)
- }
-
- const objectValue = value as Record
-
- if (seen.has(objectValue)) {
- throw new Error(`${path} contains a circular value.`)
- }
-
- seen.add(objectValue)
-
- if (Array.isArray(objectValue)) {
- objectValue.forEach((item, index) => {
- validateJsonValue(item, `${path}[${index}]`, seen)
- })
- seen.delete(objectValue)
- return
- }
-
- const prototype = Object.getPrototypeOf(objectValue)
-
- if (prototype !== Object.prototype && prototype !== null) {
- throw new Error(`${path} must only contain plain objects and arrays.`)
- }
-
- for (const key of Reflect.ownKeys(objectValue)) {
- if (typeof key === "symbol") {
- throw new Error(`${path} cannot contain symbol keys.`)
- }
-
- validateJsonValue(objectValue[key], `${path}.${key}`, seen)
- }
+export function routePathToPublicPath(path: string, trailingSlash: boolean) {
+ if (path === "/") return "/"
- seen.delete(objectValue)
+ return trailingSlash ? `${path.replace(/\/$/, "")}/` : path.replace(/\/$/, "")
}
diff --git a/packages/sitex/src/site/config.ts b/packages/sitex/src/site/config.ts
new file mode 100644
index 0000000..0532cc6
--- /dev/null
+++ b/packages/sitex/src/site/config.ts
@@ -0,0 +1,110 @@
+export type SiteConfig = {
+ /** Absolute site URL, like "https://example.com". Used for sitemap and robots.txt output. */
+ url?: string
+ /** Language tag of the root locale, like "en" or "nl". Defaults to "en". */
+ locale?: string
+}
+
+export type ResolvedSiteConfig = {
+ url: string
+ locale: string
+}
+
+export function resolveSiteConfig(site: SiteConfig | undefined) {
+ if (site !== undefined && (!site || typeof site !== "object")) {
+ throw new Error(`Sitex site config must be an object when provided.`)
+ }
+
+ const url = site?.url ?? readDeploymentUrl()
+
+ return {
+ // Builds require a URL for canonical, sitemap, and robots output; dev
+ // falls back to localhost. The plugin enforces this in configResolved.
+ url: url === undefined ? "" : readSiteUrl(url),
+ locale: readSiteLocale(site?.locale),
+ } satisfies ResolvedSiteConfig
+}
+
+export function createMissingSiteUrlError() {
+ return new Error(
+ `Sitex needs a site URL for canonical, sitemap, and robots output. Pass sitex({ site: { url } }) or set SITE_URL, PUBLIC_SITE_URL, PUBLIC_URL, APP_URL, BASE_URL, URL, VERCEL_PROJECT_PRODUCTION_URL, CF_PAGES_URL, RENDER_EXTERNAL_URL, RENDER_EXTERNAL_HOSTNAME, RAILWAY_PUBLIC_DOMAIN, KOYEB_PUBLIC_DOMAIN, DEPLOY_PRIME_URL, DEPLOY_URL, VERCEL_BRANCH_URL, or VERCEL_URL.`
+ )
+}
+
+function readSiteLocale(value: unknown) {
+ if (value === undefined) return "en"
+
+ if (
+ typeof value !== "string" ||
+ !/^[A-Za-z]{2,3}(-[A-Za-z0-9]+)*$/.test(value)
+ ) {
+ throw new Error(
+ `Sitex site config "site.locale" must be a language tag like "en" or "nl-NL".`
+ )
+ }
+
+ return value
+}
+
+function readRequiredString(value: unknown, field: string) {
+ if (typeof value !== "string" || value.trim() === "") {
+ throw new Error(`Sitex site config "${field}" must be a non-empty string.`)
+ }
+
+ return value.trim()
+}
+
+function readDeploymentUrl() {
+ const env = process.env
+
+ return (
+ env.SITE_URL ||
+ env.PUBLIC_SITE_URL ||
+ env.PUBLIC_URL ||
+ env.APP_URL ||
+ env.BASE_URL ||
+ env.URL ||
+ env.VERCEL_PROJECT_PRODUCTION_URL ||
+ env.CF_PAGES_URL ||
+ env.RENDER_EXTERNAL_URL ||
+ env.RENDER_EXTERNAL_HOSTNAME ||
+ env.RAILWAY_PUBLIC_DOMAIN ||
+ env.KOYEB_PUBLIC_DOMAIN ||
+ env.DEPLOY_PRIME_URL ||
+ env.DEPLOY_URL ||
+ env.VERCEL_BRANCH_URL ||
+ env.VERCEL_URL
+ )
+}
+
+function readSiteUrl(value: unknown) {
+ const url = normalizeSiteUrl(readRequiredString(value, "site.url"))
+
+ let parsed: URL
+
+ try {
+ parsed = new URL(url)
+ } catch {
+ throw new Error(
+ `Sitex site config "site.url" must be an absolute URL like "https://example.com".`
+ )
+ }
+
+ if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+ throw new Error(`Sitex site config "site.url" must use http or https.`)
+ }
+
+ if (parsed.pathname !== "/" || parsed.search || parsed.hash) {
+ throw new Error(
+ `Sitex site config "site.url" must be a site origin without a path, like "https://example.com".`
+ )
+ }
+
+ return parsed.origin
+}
+
+function normalizeSiteUrl(url: string) {
+ if (url.startsWith("http://") || url.startsWith("https://")) return url
+
+ return `https://${url}`
+}
diff --git a/packages/sitex/src/types/nitro-vite.d.ts b/packages/sitex/src/types/nitro-vite.d.ts
deleted file mode 100644
index 1fa8019..0000000
--- a/packages/sitex/src/types/nitro-vite.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module "nitro/vite" {
- import type { Plugin } from "vite-plus"
-
- export function nitro(pluginConfig?: Record): Plugin[]
-}
diff --git a/packages/sitex/src/types/virtual.d.ts b/packages/sitex/src/types/virtual.d.ts
index 7416de9..a95f5e8 100644
--- a/packages/sitex/src/types/virtual.d.ts
+++ b/packages/sitex/src/types/virtual.d.ts
@@ -13,56 +13,46 @@ declare module "virtual:sitex-routes" {
export function getRoutes(): Promise
}
-declare module "virtual:sitex-render" {
- import type { Route } from "@fulldotdev/sitex"
-
- type RenderOptions = {
- assetTags?: string
- islandClientPreamble?: string
- islandClientSrc?: string
- request?: Request
- }
-
- type RenderResult = {
- html: string
- params: Record
- route: Route
- }
-
- export function getRoutes(): Promise
- export function render(
- url: string,
- options?: RenderOptions
- ): Promise
- export function renderMatchedRoute(
- route: Route,
- params: Record,
- options?: RenderOptions
- ): Promise
- export function renderServerResponse(
- request: Request,
- options?: RenderOptions
- ): Promise
-}
-
declare module "sitex:pages" {
- type JsonValue =
- | string
- | number
- | boolean
- | null
- | JsonValue[]
- | { [key: string]: JsonValue }
+ import type {
+ FaqQuestion,
+ JsonValue,
+ MarkdownHeading,
+ PageType,
+ } from "@fulldotdev/sitex"
type Page = {
- readonly path: string
- readonly [key: string]: JsonValue
+ path: string
+ layout: string
+ title: string
+ description: string
+ type?: PageType
+ image?: string
+ canonical?: string
+ noindex?: boolean
+ publishedAt?: string
+ updatedAt?: string
+ author?: string
+ questions?: FaqQuestion[]
+ headings: MarkdownHeading[]
+ [key: string]: JsonValue | undefined
}
export function getPages(prefix?: string): Promise
export function getPage(path: string): Promise
}
+declare module "sitex:globals" {
+ export interface Globals {
+ readonly [key: string]: unknown
+ }
+
+ const globals: Globals
+ export const locales: Readonly>
+ export { globals }
+ export default globals
+}
+
declare namespace React {
interface Attributes {
"client:idle"?: boolean
diff --git a/packages/sitex/src/vite/plugin.ts b/packages/sitex/src/vite/plugin.ts
index 4b2d1bd..c2bae12 100644
--- a/packages/sitex/src/vite/plugin.ts
+++ b/packages/sitex/src/vite/plugin.ts
@@ -8,16 +8,13 @@ import type {
PreviewServer,
ResolvedConfig,
UserConfig,
+ ViteBuilder,
ViteDevServer,
} from "vite-plus"
-import {
- createServer,
- isRunnableDevEnvironment,
- normalizePath,
-} from "vite-plus"
+import { isRunnableDevEnvironment, normalizePath } from "vite-plus"
import { randomUUID } from "node:crypto"
-import { mkdirSync, readFileSync, writeFileSync } from "node:fs"
+import { mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs"
import {
access,
mkdir,
@@ -27,10 +24,9 @@ import {
writeFile,
} from "node:fs/promises"
import path from "node:path"
-import { fileURLToPath } from "node:url"
+import { fileURLToPath, pathToFileURL } from "node:url"
import fg from "fast-glob"
-import { nitro } from "nitro/vite"
import { defineHastPlugin, mdxToJs } from "satteri"
import { parse as parseYaml } from "yaml"
@@ -44,46 +40,52 @@ import {
virtualHydrationId,
type HydrationRegistry,
} from "../hydration/registry.ts"
+import { escapeHtmlAttribute as escapeXml } from "../render/html.ts"
+import type { RenderConfig } from "../render/render.tsx"
+import { validatePageFrontmatter } from "../router/frontmatter.ts"
+import {
+ matchRoute,
+ pageFileToRoutePath,
+ resolveRouteLocale,
+ routePathToPublicPath,
+ type JsonValue,
+ type MarkdownHeading,
+ type Route,
+} from "../router/runtime.ts"
+import {
+ createMissingSiteUrlError,
+ resolveSiteConfig,
+ type ResolvedSiteConfig,
+ type SiteConfig,
+} from "../site/config.ts"
const packageRoot = path.dirname(path.dirname(fileURLToPath(import.meta.url)))
const packageSourceExtension = path.extname(fileURLToPath(import.meta.url))
const islandClientInput = normalizePath(packageFile("hydration/client", "tsx"))
+const prefetchClientInput = normalizePath(packageFile("prefetch/client", "ts"))
const virtualRoutesId = "virtual:sitex-routes"
const resolvedVirtualRoutesId = `\0${virtualRoutesId}`
-const virtualRenderId = "virtual:sitex-render"
-const resolvedVirtualRenderId = `\0${virtualRenderId}`
const virtualPagesId = "sitex:pages"
const resolvedVirtualPagesId = `\0${virtualPagesId}`
-const pagesTypesFile = ".sitex/pages.d.ts"
+const virtualGlobalsId = "sitex:globals"
+const resolvedVirtualGlobalsId = `\0${virtualGlobalsId}`
const clientBuildDir = ".sitex/client"
const mdxTypecheckDir = ".sitex/typecheck"
+const ssrBuildDir = ".sitex/ssr"
+const globalsDir = "src/globals"
-type JsonValue =
- | string
- | number
- | boolean
- | null
- | JsonValue[]
- | { [key: string]: JsonValue }
-
-type PageData = {
- path: string
- [key: string]: JsonValue
-}
-
-type PageDataRoute = {
- file: string
- path: string
-}
-
-type MarkdownHeading = {
- depth: number
- href: string
- id: string
- label: string
-}
+type RenderModule = typeof import("../render/render.tsx")
export type SitexOptions = {
+ site?: SiteConfig
+ prefetch?: boolean
+ favicon?:
+ | false
+ | {
+ background?: string
+ color?: string
+ text?: string
+ }
mdx?: {
components?: Record
}
@@ -91,6 +93,16 @@ export type SitexOptions = {
}
type ResolvedSitexOptions = {
+ favicon:
+ | false
+ | {
+ background: string
+ color: string
+ text?: string
+ }
+ site: ResolvedSiteConfig
+ locales: string[]
+ prefetch: boolean
mdx: {
components: Record
}
@@ -105,36 +117,40 @@ const isHtmlRequest = (req: Connect.IncomingMessage) => {
return accept.includes("text/html") || accept.includes("*/*")
}
-function shouldGenerateContentTypes() {
- return process.env.SITEX_CONTENT !== "0"
-}
-
export function sitex(options: SitexOptions = {}): PluginOption[] {
const resolvedOptions: ResolvedSitexOptions = {
+ favicon: resolveFaviconOptions(options.favicon),
+ site: resolveSiteConfig(options.site),
+ locales: [],
+ prefetch: options.prefetch !== false,
mdx: {
components: validateMdxComponentImports(options.mdx?.components),
},
trailingSlash: options.trailingSlash ?? false,
}
- const plugins: PluginOption[] = [sitexPlugin(resolvedOptions)]
+ return [sitexPlugin(resolvedOptions), sitexMdxImportResolvePlugin()]
+}
- if (
- process.env.SITEX_INTERNAL_RENDER !== "1" &&
- hasServerPagesSync(process.cwd())
- ) {
- plugins.push(
- ...(nitro({
- renderer: {
- handler: packageFile("nitro/renderer", "ts"),
- },
- serverDir: ".",
- }) as PluginOption[])
- )
- }
+/**
+ * Vite's tsconfig-paths resolution only applies to TS/JS importers, so
+ * aliases like "@/components/alert" fail inside MDX pages. Retry failed
+ * resolutions from .mdx importers with a synthetic .tsx importer path.
+ */
+function sitexMdxImportResolvePlugin(): Plugin {
+ return {
+ name: "sitex:mdx-import-resolve",
+
+ async resolveId(id, importer, options) {
+ if (!importer?.endsWith(".mdx")) return
+ if (id.startsWith(".") || id.startsWith("\0")) return
+
+ const resolved = await this.resolve(id, importer, options)
- plugins.push(sitexBuildInputPlugin())
+ if (resolved) return resolved
- return plugins
+ return this.resolve(id, `${importer}.tsx`, options)
+ },
+ }
}
function validateMdxComponentImports(
@@ -168,22 +184,17 @@ function validateMdxComponentImports(
return validated
}
-function sitexBuildInputPlugin(): Plugin {
- return {
- name: "sitex:build-input",
- enforce: "post",
+function resolveFaviconOptions(options: SitexOptions["favicon"]) {
+ if (options === false) return false
- config(userConfig): UserConfig {
- const configRoot = path.resolve(userConfig.root ?? process.cwd())
+ if (options !== undefined && (!options || typeof options !== "object")) {
+ throw new Error(`Sitex favicon config must be an object or false.`)
+ }
- return {
- build: {
- rollupOptions: {
- input: createBuildInput(configRoot),
- },
- },
- }
- },
+ return {
+ background: options?.background ?? "#111827",
+ color: options?.color ?? "#ffffff",
+ text: options?.text,
}
}
@@ -191,7 +202,6 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
let root = process.cwd()
let config: ResolvedConfig
let cleanedBuildOutput = false
- let wroteStaticHtml = false
const hydration: HydrationRegistry = new Map()
return {
@@ -201,8 +211,14 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
config(userConfig): UserConfig {
const configRoot = path.resolve(userConfig.root ?? process.cwd())
+ applyGlobalsLocales(configRoot, options)
+ writeGlobalsTypes(configRoot, options)
+
return {
+ appType: "custom",
+ builder: {},
resolve: {
+ dedupe: ["react", "react-dom"],
tsconfigPaths: true,
},
build: {
@@ -210,8 +226,32 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
manifest: true,
outDir: "dist",
emptyOutDir: false,
- rollupOptions: {
- input: createBuildInput(configRoot),
+ },
+ environments: {
+ client: {
+ build: {
+ rollupOptions: {
+ input: createBuildInput(configRoot, options.prefetch),
+ },
+ },
+ },
+ ssr: {
+ resolve: {
+ noExternal: ["parse5"],
+ },
+ build: {
+ copyPublicDir: false,
+ emptyOutDir: true,
+ manifest: false,
+ outDir: ssrBuildDir,
+ rollupOptions: {
+ input: { render: packageFile("render/render", "tsx") },
+ output: {
+ chunkFileNames: "chunks/[name]-[hash].mjs",
+ entryFileNames: "[name].mjs",
+ },
+ },
+ },
},
},
}
@@ -220,50 +260,68 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
configResolved(resolvedConfig) {
config = resolvedConfig
root = resolvedConfig.root
+ applyGlobalsLocales(root, options)
+
+ if (!options.site.url) {
+ if (resolvedConfig.command === "build")
+ throw createMissingSiteUrlError()
+
+ options.site.url = "http://localhost"
+ }
},
async buildStart() {
hydration.clear()
+ // Environments build with separate plugin instances, so gate the dist
+ // clean on the client environment instead of instance state alone.
if (
config.command === "build" &&
- !cleanedBuildOutput &&
- process.env.SITEX_INTERNAL_RENDER !== "1"
+ this.environment.name === "client" &&
+ !cleanedBuildOutput
) {
cleanedBuildOutput = true
await rm(path.join(root, "dist"), { recursive: true, force: true })
}
+ writeGlobalsTypes(root, options)
+
const files = await fg("src/**/*.tsx", {
cwd: root,
- ignore: ["src/pages/examples/**"],
onlyFiles: true,
})
+ const pageFiles = files.filter(isTsxPageFile)
- for (const file of files) {
- const absoluteFile = path.join(root, file)
- const code = await readFile(absoluteFile, "utf8")
- collectHydrationEntries(code, absoluteFile, root, hydration)
+ if (pageFiles.length > 0) {
+ throw new Error(createTsxPageError(pageFiles.join('", "')))
}
+ await Promise.all(
+ files.map(async (file) => {
+ const absoluteFile = path.join(root, file)
+ const code = await readFile(absoluteFile, "utf8")
+ collectHydrationEntries(code, absoluteFile, root, hydration)
+ })
+ )
+
await writeMdxTypecheckFiles(root, options)
},
resolveId: {
filter: {
- id: /^(virtual:sitex-islands|virtual:sitex-routes|virtual:sitex-render|sitex:pages)$/,
+ id: /^(virtual:sitex-islands|virtual:sitex-routes|sitex:pages|sitex:globals)$/,
},
handler(id) {
if (id === virtualHydrationId) return resolvedVirtualHydrationId
if (id === virtualRoutesId) return resolvedVirtualRoutesId
- if (id === virtualRenderId) return resolvedVirtualRenderId
if (id === virtualPagesId) return resolvedVirtualPagesId
+ if (id === virtualGlobalsId) return resolvedVirtualGlobalsId
},
},
load: {
filter: {
- id: /^(\0virtual:sitex-islands|\0virtual:sitex-routes|\0virtual:sitex-render|\0sitex:pages)$/,
+ id: /^(\0virtual:sitex-islands|\0virtual:sitex-routes|\0sitex:pages|\0sitex:globals)$/,
},
async handler(id) {
if (id === resolvedVirtualHydrationId) {
@@ -276,13 +334,19 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
return createJavaScriptModule(createVirtualRoutesCode())
}
- if (id === resolvedVirtualRenderId) {
- return createJavaScriptModule(createVirtualRenderCode(root))
- }
-
if (id === resolvedVirtualPagesId) {
return createJavaScriptModule(createPagesModuleCode(options))
}
+
+ if (id === resolvedVirtualGlobalsId) {
+ this.addWatchFile(resolveGlobalsFile(root, options))
+
+ for (const locale of options.locales) {
+ this.addWatchFile(resolveGlobalsFile(root, options, locale))
+ }
+
+ return createJavaScriptModule(createGlobalsModuleCode(root, options))
+ }
},
},
@@ -295,11 +359,10 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
return transformMdxPage(code, id, root, options)
}
- if (hasContentExport(code)) {
- const file = normalizePath(path.relative(root, id))
- throw new Error(
- `Page module "${file}" exports content. Use "export const data" instead.`
- )
+ const file = normalizePath(path.relative(root, id))
+
+ if (isTsxPageFile(file)) {
+ throw new Error(createTsxPageError(file))
}
if (!id.endsWith(".tsx") || !code.includes("client:")) return
@@ -309,13 +372,28 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
},
configureServer(server: ViteDevServer) {
- if (shouldGenerateContentTypes()) {
- void writePageDataTypesFromServer(root, server, options).catch(
- (error: unknown) => {
- server.config.logger.error(formatPageDataTypeError(error))
- }
- )
- }
+ server.middlewares.use(async (req, res, next) => {
+ if (req.url?.split("?")[0] !== "/favicon.svg") {
+ next()
+ return
+ }
+
+ if (await hasPublicFile(root, "favicon.svg")) {
+ next()
+ return
+ }
+
+ const favicon = createGeneratedFavicon(root, options)
+
+ if (!favicon) {
+ next()
+ return
+ }
+
+ res.statusCode = 200
+ res.setHeader("Content-Type", "image/svg+xml")
+ res.end(req.method === "HEAD" ? undefined : favicon)
+ })
server.middlewares.use(async (req, res, next) => {
if (!isHtmlRequest(req)) {
@@ -324,39 +402,38 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
}
const url = req.url?.split("?")[0] ?? "/"
- const request = createWebRequest(req)
try {
- const { render } = await importServerModule(server, virtualRenderId)
- const initialHtml = await render(url, { request })
-
- if (!initialHtml) {
+ const render = (await importServerModule(
+ server,
+ normalizePath(packageFile("render/render", "tsx"))
+ )) as RenderModule
+ const routes = await render.getRoutes()
+ const route = matchRoute(routes, url)
+
+ if (!route) {
next()
return
}
- const stylesheetHrefs = readRouteStylesheetHrefs(
- server.environments.ssr.moduleGraph,
- root,
- initialHtml.route.file
+ const html = await render.renderRoute(
+ route,
+ { ...createRenderConfig(options), prefetch: false },
+ () => ({
+ islandClientPreamble: renderReactRefreshFallbackScript(),
+ islandClientSrc: devServerFileUrl("hydration/client", "tsx"),
+ stylesheetHrefs: readRouteStylesheetHrefs(
+ server.environments.ssr.moduleGraph,
+ root,
+ route.file
+ ),
+ })
)
- const html = await render(url, {
- assetTags: renderStylesheetTags(stylesheetHrefs),
- islandClientPreamble: renderReactRefreshFallbackScript(),
- islandClientSrc: devServerFileUrl("hydration/client", "tsx"),
- request,
- })
-
- if (!html) {
- next()
- return
- }
-
- const transformed = await server.transformIndexHtml(url, html.html)
+ const pageHtml = await server.transformIndexHtml(url, html)
res.statusCode = 200
res.setHeader("Content-Type", "text/html")
- res.end(req.method === "HEAD" ? undefined : transformed)
+ res.end(req.method === "HEAD" ? undefined : pageHtml)
} catch (error) {
next(error)
}
@@ -394,32 +471,54 @@ function sitexPlugin(options: ResolvedSitexOptions): Plugin {
hotUpdate: {
async handler(update) {
const file = normalizePath(update.file)
+ const relativeFile = normalizePath(path.relative(root, file))
+
+ if (isTsxPageFile(relativeFile)) {
+ config.logger.error(`[sitex] ${createTsxPageError(relativeFile)}`)
+ return []
+ }
if (!shouldReloadForFile(file)) return
invalidateVirtualModules(this.environment.moduleGraph, update.timestamp)
- if (
- shouldGenerateContentTypes() &&
- (file.includes("/src/pages/") || file.includes("/src/data/"))
- ) {
- await writePageDataTypesFromServer(root, update.server, options)
+ // Layout exports drive the generated MDX page code (mdxComponents
+ // detection), so layout changes must re-transform MDX pages.
+ if (file.includes("/src/layouts/")) {
+ invalidateMdxPageModules(
+ this.environment.moduleGraph,
+ update.timestamp
+ )
}
if (file.includes("/src/pages/") && file.endsWith(".mdx")) {
await writeMdxTypecheckFiles(root, options)
}
+ if (isGlobalsFile(relativeFile)) {
+ writeGlobalsTypes(root, options)
+ }
+
this.environment.hot.send({ type: "full-reload" })
return []
},
},
- async closeBundle() {
- if (config.command !== "build" || wroteStaticHtml) return
+ async buildApp(builder: ViteBuilder) {
+ const client = builder.environments.client
+ const ssr = builder.environments.ssr
- wroteStaticHtml = true
- await writeStaticHtml(root, options)
+ if (!client || !ssr) {
+ throw new Error(
+ "Sitex requires the client and ssr build environments to build the app."
+ )
+ }
+
+ await builder.build(client)
+
+ const ssrResult = await builder.build(ssr)
+
+ await writeStaticHtml(root, options, collectOutputChunks(ssrResult))
},
}
}
@@ -431,12 +530,14 @@ function createJavaScriptModule(code: string) {
}
}
-function createBuildInput(root: string) {
+function createBuildInput(root: string, prefetch: boolean) {
const clientEntries = writeClientBuildEntriesSync(root)
const input: Record = {
islandClient: clientEntries.islandClient,
}
+ if (prefetch) input.prefetchClient = clientEntries.prefetchClient
+
for (const [file, entry] of clientEntries.styles) {
const name = file.replace(/^src\//, "").replace(/\.css$/, "")
@@ -450,11 +551,18 @@ function writeClientBuildEntriesSync(root: string) {
const clientRoot = path.join(root, clientBuildDir)
const styles = new Map()
+ rmSync(clientRoot, { recursive: true, force: true })
mkdirSync(clientRoot, { recursive: true })
const islandClient = path.join(clientRoot, "island-client.ts")
writeFileSync(islandClient, `import ${JSON.stringify(islandClientInput)}\n`)
+ const prefetchClient = path.join(clientRoot, "prefetch-client.ts")
+ writeFileSync(
+ prefetchClient,
+ `import ${JSON.stringify(prefetchClientInput)}\n`
+ )
+
for (const file of collectStyleFilesSync(root)) {
const entry = path.join(
clientRoot,
@@ -462,79 +570,113 @@ function writeClientBuildEntriesSync(root: string) {
)
mkdirSync(path.dirname(entry), { recursive: true })
- writeFileSync(entry, `import ${JSON.stringify(path.join(root, file))}\n`)
+ writeFileSync(entry, createStyleEntryCode(root, file))
styles.set(file, entry)
}
- return { islandClient, styles }
+ return { islandClient, prefetchClient, styles }
}
-async function writeStaticHtml(root: string, options: ResolvedSitexOptions) {
- const publicRoot = await findBuildPublicRoot(root)
- const manifest = await readManifest(publicRoot)
- const islandClientAsset = Object.values(manifest).find(
- (entry) => entry.name === "islandClient"
- )
- const cssAssetMap = createCssAssetMap(root, manifest)
+function createStyleEntryCode(root: string, file: string) {
+ return `import ${JSON.stringify(path.join(root, file))}\n`
+}
- const previousInternalRender = process.env.SITEX_INTERNAL_RENDER
- process.env.SITEX_INTERNAL_RENDER = "1"
+type BuildOutputChunk = {
+ facadeModuleId: string | null
+ fileName: string
+ imports: string[]
+ moduleIds: string[]
+ type: "chunk"
+}
- const server = await createServer({
- configFile: path.join(root, "vite.config.ts"),
- server: { middlewareMode: true },
- appType: "custom",
- mode: "production",
- })
+function collectOutputChunks(result: unknown): BuildOutputChunk[] {
+ const outputs = Array.isArray(result) ? result : [result]
+ const chunks: BuildOutputChunk[] = []
- try {
- if (shouldGenerateContentTypes()) {
- await writePageDataTypesFromServer(root, server, options)
+ for (const output of outputs) {
+ if (!output || typeof output !== "object" || !("output" in output)) {
+ continue
}
- const { getRoutes, injectRouteHtmlAssets, renderMatchedRoute } =
- await importServerModule(server, virtualRenderId)
- const routes = await getRoutes()
+ for (const entry of (output as { output: unknown[] }).output) {
+ if (
+ entry &&
+ typeof entry === "object" &&
+ "type" in entry &&
+ entry.type === "chunk"
+ ) {
+ chunks.push(entry as BuildOutputChunk)
+ }
+ }
+ }
- for (const route of routes) {
- if (route.render === "server") continue
+ return chunks
+}
- const html = await renderMatchedRoute(route, route.params)
+function createRenderConfig(options: ResolvedSitexOptions): RenderConfig {
+ return {
+ defaultLocale: options.site.locale,
+ faviconHref: options.favicon === false ? undefined : "/favicon.svg",
+ locales: options.locales,
+ prefetch: options.prefetch,
+ siteUrl: options.site.url,
+ trailingSlash: options.trailingSlash,
+ }
+}
- if (!html) {
- throw new Error(`Sitex could not render route "${route.path}".`)
- }
+async function writeStaticHtml(
+ root: string,
+ options: ResolvedSitexOptions,
+ ssrChunks: BuildOutputChunk[]
+) {
+ const publicRoot = await findBuildPublicRoot(root)
+ const manifest = await readManifest(publicRoot)
+ const islandClientAsset = Object.values(manifest).find(
+ (entry) => entry.name === "islandClient"
+ )
+ const prefetchClientAsset = Object.values(manifest).find(
+ (entry) => entry.name === "prefetchClient"
+ )
+ const cssAssetMap = createCssAssetMap(root, manifest)
+ const renderFile = path.join(root, ssrBuildDir, "render.mjs")
+ const render = (await import(pathToFileURL(renderFile).href)) as RenderModule
+ const routes = await render.getRoutes()
- const transformed = stripViteClientScript(
- await server.transformIndexHtml(route.path, html)
- )
- const stylesheetAssets = readRouteStylesheetAssets(
- server.environments.ssr.moduleGraph,
- root,
- route.file,
- cssAssetMap
- )
- if (html.includes("data-sitex-island")) {
- stylesheetAssets.push(...readManifestChunkCss(islandClientAsset))
- }
- const finalHtml = injectRouteHtmlAssets(transformed, {
- assetTags: renderStylesheetTags(stylesheetAssets),
- islandClientSrc: islandClientAsset?.file
- ? publicAssetPath(islandClientAsset.file)
- : undefined,
- })
+ for (const route of routes) {
+ const html = await render.renderRoute(
+ route,
+ createRenderConfig(options),
+ ({ hasIslands }) => {
+ const stylesheetHrefs = readRouteStylesheetAssets(
+ ssrChunks,
+ root,
+ route.file,
+ cssAssetMap
+ )
- await writeHtml(publicRoot, route.path, finalHtml, options)
- }
- } finally {
- await server.close()
+ if (hasIslands) {
+ stylesheetHrefs.push(...readManifestChunkCss(islandClientAsset))
+ }
- if (previousInternalRender === undefined) {
- delete process.env.SITEX_INTERNAL_RENDER
- } else {
- process.env.SITEX_INTERNAL_RENDER = previousInternalRender
- }
+ return {
+ islandClientSrc:
+ hasIslands && islandClientAsset?.file
+ ? publicAssetPath(islandClientAsset.file)
+ : undefined,
+ prefetchClientSrc: prefetchClientAsset?.file
+ ? publicAssetPath(prefetchClientAsset.file)
+ : undefined,
+ stylesheetHrefs,
+ }
+ }
+ )
+
+ await writeHtml(publicRoot, route.path, html, options)
}
+
+ await writeGeneratedFavicon(publicRoot, root, options)
+ await writeSitemap(publicRoot, routes, options)
+ await writeRobots(publicRoot, options)
}
async function writeHtml(
@@ -549,12 +691,153 @@ async function writeHtml(
await writeFile(file, html)
}
-async function collectRouteFiles(root: string) {
- return fg(["src/pages/**/*.tsx", "src/pages/**/*.mdx"], {
- cwd: root,
- ignore: ["src/pages/examples/**"],
- onlyFiles: true,
- })
+async function writeGeneratedFavicon(
+ publicRoot: string,
+ root: string,
+ options: ResolvedSitexOptions
+) {
+ const favicon = createGeneratedFavicon(root, options)
+
+ if (!favicon) return
+
+ const file = path.join(publicRoot, "favicon.svg")
+
+ try {
+ await access(file)
+ return
+ } catch {
+ // No app-provided favicon was copied to dist; write the generated one.
+ }
+
+ await writeFile(file, favicon)
+}
+
+async function hasPublicFile(root: string, file: string) {
+ try {
+ await access(path.join(root, "public", file))
+ return true
+ } catch {
+ return false
+ }
+}
+
+function createGeneratedFavicon(root: string, options: ResolvedSitexOptions) {
+ if (options.favicon === false) return
+
+ const label =
+ options.favicon.text ??
+ readGlobalsNameSync(root, options) ??
+ new URL(options.site.url).hostname
+ const text = createFaviconText(label)
+
+ return [
+ ``,
+ ` ${escapeXml(text)} `,
+ ` `,
+ "",
+ ].join("\n")
+}
+
+function readGlobalsNameSync(root: string, options: ResolvedSitexOptions) {
+ try {
+ const globals = readGlobalsData(root, options)
+ const name = globals.name
+
+ return typeof name === "string" && name.trim() ? name : undefined
+ } catch {
+ return undefined
+ }
+}
+
+function createFaviconText(label: string) {
+ const words = label
+ .replace(/https?:\/\//, "")
+ .split(/[^A-Za-z0-9]+/)
+ .filter(Boolean)
+
+ const initials =
+ words.length >= 2
+ ? `${words[0]?.[0] ?? ""}${words[1]?.[0] ?? ""}`
+ : (words[0]?.slice(0, 2) ?? "S")
+
+ return initials.toUpperCase()
+}
+
+async function writeSitemap(
+ publicRoot: string,
+ routes: Route[],
+ options: ResolvedSitexOptions
+) {
+ const file = path.join(publicRoot, "sitemap.xml")
+
+ try {
+ await access(file)
+ return
+ } catch {
+ // No app-provided sitemap.xml; write the generated one.
+ }
+
+ const entries = routes
+ .filter((route) => {
+ if (route.data.noindex === true) return false
+
+ const publicPath = routePathToPublicPath(
+ route.path,
+ options.trailingSlash
+ )
+
+ // A canonical override means this URL is not the page's canonical
+ // location, so it does not belong in the sitemap.
+ return (
+ route.data.canonical === undefined ||
+ route.data.canonical === `${options.site.url}${publicPath}`
+ )
+ })
+ .map((route) => {
+ const publicPath = routePathToPublicPath(
+ route.path,
+ options.trailingSlash
+ )
+ const loc = `${options.site.url}${publicPath}`
+ const lastmod = route.data.updatedAt ?? route.data.publishedAt
+ const lines = [` ${escapeXml(loc)} `]
+
+ if (lastmod) lines.push(` ${escapeXml(lastmod)} `)
+
+ return [" ", ...lines, " "].join("\n")
+ })
+
+ const sitemap = [
+ ``,
+ ``,
+ ...entries,
+ ` `,
+ "",
+ ].join("\n")
+
+ await writeFile(file, sitemap)
+}
+
+async function writeRobots(publicRoot: string, options: ResolvedSitexOptions) {
+ const file = path.join(publicRoot, "robots.txt")
+
+ try {
+ await access(file)
+ return
+ } catch {
+ // No app-provided robots.txt; write the default.
+ }
+
+ const robots = [
+ "User-agent: *",
+ "Allow: /",
+ "",
+ `Sitemap: ${options.site.url}/sitemap.xml`,
+ "",
+ ].join("\n")
+
+ await writeFile(file, robots)
}
function collectStyleFilesSync(root: string) {
@@ -564,116 +847,200 @@ function collectStyleFilesSync(root: string) {
})
}
-function hasServerPagesSync(root: string) {
- return collectServerRouteFilesSync(root).length > 0
+function writeGlobalsTypes(root: string, options: ResolvedSitexOptions) {
+ const globals = readGlobalsData(root, options)
+ const typeFile = path.join(root, ".sitex/globals.d.ts")
+
+ mkdirSync(path.dirname(typeFile), { recursive: true })
+ writeFileSync(typeFile, createGlobalsTypesCode(globals, options.locales))
}
-function collectServerRouteFilesSync(root: string) {
- const files = fg.sync("src/pages/**/*.tsx", {
- cwd: root,
- ignore: ["src/pages/examples/**"],
- onlyFiles: true,
- })
+function createGlobalsModuleCode(root: string, options: ResolvedSitexOptions) {
+ const globals = readGlobalsData(root, options)
+ const locales: { [key: string]: JsonValue } = {}
- return files.filter((file) => {
- const code = readFileSync(path.join(root, file), "utf8")
+ for (const locale of options.locales) {
+ locales[locale] = readGlobalsData(root, options, locale)
+ }
- return /\bexport\s+const\s+render\s*=\s*["']server["']/.test(code)
- })
+ return [
+ `export const globals = ${JSON.stringify(globals)}`,
+ `export const locales = ${JSON.stringify(locales)}`,
+ `export default globals`,
+ "",
+ ].join("\n")
}
-async function collectPageDataRoutes(
+function readGlobalsData(
root: string,
- options: ResolvedSitexOptions
+ options: ResolvedSitexOptions,
+ locale?: string
) {
- const files = await collectRouteFiles(root)
- const routes: PageDataRoute[] = []
+ const file = resolveGlobalsFile(root, options, locale)
+ let source: string
- for (const file of files) {
- if (hasRouteParams(file)) continue
+ try {
+ source = readFileSync(file, "utf8")
+ } catch {
+ throw new Error(
+ locale
+ ? `Sitex requires ${globalsDir}/${locale}.yaml for the "${locale}" locale.`
+ : `Sitex requires ${globalsDir}/index.yaml. Create it for global layout content.`
+ )
+ }
- if (file.endsWith(".mdx")) {
- routes.push({
- file,
- path: routePathToPublicPath(
- staticPageFileToPath(file),
- options.trailingSlash
- ),
- })
- continue
- }
+ return parseGlobalsYaml(source, normalizePath(path.relative(root, file)))
+}
- const code = await readFile(path.join(root, file), "utf8")
+function resolveGlobalsFile(
+ root: string,
+ options: ResolvedSitexOptions,
+ locale?: string
+) {
+ const names = locale ? [locale] : ["index", options.site.locale]
- if (hasContentExport(code)) {
- throw new Error(
- `Page module "${file}" exports content. Use "export const data" instead.`
- )
- }
+ for (const name of names) {
+ for (const extension of ["yaml", "yml"]) {
+ const file = path.join(root, globalsDir, `${name}.${extension}`)
- if (hasDataExport(code)) {
- routes.push({
- file,
- path: routePathToPublicPath(
- staticPageFileToPath(file),
- options.trailingSlash
- ),
- })
+ if (readFileSyncSafe(file)) return file
}
}
- return routes
+ return path.join(root, globalsDir, `${names[0]}.yaml`)
}
-async function collectPageDataFromServer(
- root: string,
- server: ViteDevServer,
- options: ResolvedSitexOptions
-) {
- const routes = await collectPageDataRoutes(root, options)
- const pages: PageData[] = []
+/**
+ * Globals filenames define the site locales: index.yaml serves the root
+ * locale (named by site.locale) and every other file, like en.yaml, serves
+ * routes under its /{locale} prefix. A single named file without index.yaml
+ * serves the root and sets the locale name.
+ */
+function applyGlobalsLocales(root: string, options: ResolvedSitexOptions) {
+ const files = fg.sync(["*.yaml", "*.yml"], {
+ cwd: path.join(root, globalsDir),
+ onlyFiles: true,
+ })
+ const names = [
+ ...new Set(files.map((file) => file.replace(/\.ya?ml$/, ""))),
+ ].sort()
- for (const route of routes) {
- const module = (await importServerModule(server, `/${route.file}`)) as {
- data?: unknown
- }
+ if (names.includes("index")) {
+ options.locales = names.filter((name) => name !== "index")
+ return
+ }
- if (module.data !== undefined) {
- const data = readJsonData(module.data, route.file)
- validatePageData(data, route.file)
- pages.push({
- path: route.path,
- ...data,
- })
- }
+ const [only] = names
+
+ if (names.length === 1 && only) {
+ options.site.locale = only
+ options.locales = []
+ return
+ }
+
+ if (names.length === 0) {
+ options.locales = []
+ return
}
- return pages
+ throw new Error(
+ `Sitex found multiple globals files in ${globalsDir} without an index file. Add ${globalsDir}/index.yaml for the root locale; every other file like en.yaml serves /en routes.`
+ )
}
-async function writePageDataTypesFromServer(
- root: string,
- server: ViteDevServer,
- options: ResolvedSitexOptions
+function parseGlobalsYaml(source: string, file: string) {
+ const value = parseYaml(source)
+
+ if (!value || typeof value !== "object" || Array.isArray(value)) {
+ throw new Error(`Globals in "${file}" must be a YAML object.`)
+ }
+
+ return readJsonData(value, file)
+}
+
+function createGlobalsTypesCode(
+ globals: { [key: string]: JsonValue },
+ localeNames: readonly string[]
) {
- const typesFile = path.join(root, pagesTypesFile)
- const pages = await collectPageDataFromServer(root, server, options)
+ const localesKey =
+ localeNames.length === 0
+ ? "never"
+ : localeNames.map((name) => JSON.stringify(name)).join(" | ")
- await mkdir(path.dirname(typesFile), { recursive: true })
- await writeFileAtomic(typesFile, await createPagesTypesCode(pages))
+ return [
+ `declare module "sitex:globals" {`,
+ ` export interface Globals ${createJsonType(globals)}`,
+ ` const globals: Globals`,
+ ` export const locales: Readonly>`,
+ ` export { globals }`,
+ ` export default globals`,
+ `}`,
+ "",
+ ].join("\n")
}
-function formatPageDataTypeError(error: unknown) {
- const message = error instanceof Error ? error.message : String(error)
+function createJsonType(value: JsonValue): string {
+ if (typeof value === "string") return JSON.stringify(value)
+ if (typeof value === "number" || typeof value === "boolean") {
+ return String(value)
+ }
+ if (value === null) return "null"
- return `[sitex] Could not generate page data types: ${message}`
+ if (Array.isArray(value)) {
+ return `readonly [${value.map(createJsonType).join(", ")}]`
+ }
+
+ const entries = Object.entries(value).map(([key, item]) => {
+ return `readonly ${JSON.stringify(key)}: ${createJsonType(item)}`
+ })
+
+ return `{ ${entries.join("; ")} }`
+}
+
+async function removeGeneratedDirectory(directory: string) {
+ for (let attempt = 0; attempt < 3; attempt += 1) {
+ try {
+ await rm(directory, { recursive: true, force: true })
+ return
+ } catch (error) {
+ if (attempt === 2 || !isRetryableRemoveError(error)) throw error
+ await new Promise((resolve) => setTimeout(resolve, 25))
+ }
+ }
+}
+
+function isRetryableRemoveError(error: unknown) {
+ return (
+ typeof error === "object" &&
+ error !== null &&
+ "code" in error &&
+ (error.code === "ENOTEMPTY" || error.code === "EBUSY")
+ )
+}
+
+function isTsxPageFile(file: string) {
+ return file.startsWith("src/pages/") && file.endsWith(".tsx")
+}
+
+function createTsxPageError(file: string) {
+ return `Sitex pages are MDX files. Found TSX file "${file}" in src/pages. Move the page markup into a layout in src/layouts and create an MDX page that selects it with "layout" frontmatter.`
}
function shouldReloadForFile(file: string) {
return (
file.includes("/src/pages/") ||
+ file.includes("/src/layouts/") ||
file.includes("/src/components/") ||
- file.includes("/src/data/")
+ file.includes("/src/data/") ||
+ file.includes(`/${globalsDir}/`) ||
+ file.endsWith(".css")
+ )
+}
+
+function isGlobalsFile(file: string) {
+ return (
+ file.startsWith(`${globalsDir}/`) &&
+ (file.endsWith(".yaml") || file.endsWith(".yml"))
)
}
@@ -685,8 +1052,8 @@ function invalidateVirtualModules(
for (const id of [
resolvedVirtualRoutesId,
- resolvedVirtualRenderId,
resolvedVirtualPagesId,
+ resolvedVirtualGlobalsId,
]) {
const module = moduleGraph.getModuleById(id)
@@ -696,6 +1063,19 @@ function invalidateVirtualModules(
}
}
+function invalidateMdxPageModules(
+ moduleGraph: EnvironmentModuleGraph,
+ timestamp: number
+) {
+ const invalidatedModules = new Set()
+
+ for (const module of moduleGraph.idToModuleMap.values()) {
+ if (module.file?.endsWith(".mdx")) {
+ moduleGraph.invalidateModule(module, invalidatedModules, timestamp, true)
+ }
+ }
+}
+
async function importServerModule(server: ViteDevServer, id: string) {
const environment = server.environments.ssr
@@ -722,21 +1102,36 @@ async function transformMdxPage(
options: ResolvedSitexOptions
) {
const file = normalizePath(path.relative(root, id))
- const { headings, result } = compileMdx(code)
- const { data, layoutFile } = await readMdxPageMetadata(
- root,
- file,
- result.frontmatter,
- headings
- )
- const pagePath = routePathToPublicPath(
- staticPageFileToPath(file),
- options.trailingSlash
+
+ if (!file.startsWith("src/pages/")) {
+ throw new Error(
+ `MDX file "${file}" is outside src/pages. Sitex only renders MDX pages; move prose into a page or a component.`
+ )
+ }
+
+ const { headings, result } = compileMdxCached(root, file, code)
+ const { data, layoutFile, layoutHasMdxComponents } =
+ await readMdxPageMetadata(root, file, result.frontmatter, headings)
+ const routePath = pageFileToRoutePath(file)
+ const pagePath = routePathToPublicPath(routePath, options.trailingSlash)
+ const pageUrl = createPageUrl(options.site.url, pagePath)
+ const pageLocale = resolveRouteLocale(
+ routePath,
+ options.locales,
+ options.site.locale
)
+ if (
+ /\bexport\s+(?:const|let|var|function|class)\s+data\b/.test(result.code)
+ ) {
+ throw new Error(
+ `MDX page "${file}" cannot export "data". Page data comes from frontmatter.`
+ )
+ }
+
const mdxCode = result.code.replace(
/export\s+default\s+MDXContent\s*;?\s*$/,
- "const MarkdownContent = MDXContent;"
+ "const _sitexMarkdownContent = MDXContent;"
)
if (mdxCode === result.code) {
@@ -748,15 +1143,15 @@ async function transformMdxPage(
return [
mdxCode,
...createMdxComponentImportCode(options.mdx.components),
- `import * as LayoutModule from ${JSON.stringify(`/${normalizePath(path.relative(root, layoutFile))}`)}`,
- `const Layout = LayoutModule.default`,
- `const mdxComponentsDescriptor = Object.getOwnPropertyDescriptor(LayoutModule, "mdxComponents")`,
- `const layoutMdxComponents = mdxComponentsDescriptor?.get ? mdxComponentsDescriptor.get.call(LayoutModule) : mdxComponentsDescriptor?.value`,
- `const mdxComponents = Object.assign({}, configuredMdxComponents, layoutMdxComponents)`,
+ `import * as _sitexLayoutModule from ${JSON.stringify(`/${normalizePath(path.relative(root, layoutFile))}`)}`,
+ `const _sitexLayout = _sitexLayoutModule.default`,
+ layoutHasMdxComponents
+ ? `const _sitexMdxComponents = Object.assign({}, _sitexConfiguredMdxComponents, _sitexLayoutModule.mdxComponents)`
+ : `const _sitexMdxComponents = _sitexConfiguredMdxComponents`,
`export const data = ${JSON.stringify(data)}`,
- `export default function MdxPage() {`,
- ` const { layout: _layout, path: _path, children: _children, ...props } = data`,
- ` return _jsx(Layout, Object.assign({}, props, { path: ${JSON.stringify(pagePath)}, children: _jsx(MarkdownContent, { components: mdxComponents }) }))`,
+ `export default function _SitexMdxPage() {`,
+ ` const { layout: _layout, ...props } = data`,
+ ` return _jsx(_sitexLayout, Object.assign({}, props, { path: ${JSON.stringify(pagePath)}, url: ${JSON.stringify(pageUrl)}, locale: ${JSON.stringify(pageLocale)}, headings: data.headings, children: _jsx(_sitexMarkdownContent, { components: _sitexMdxComponents }) }))`,
`}`,
].join("\n")
}
@@ -767,13 +1162,14 @@ function createMdxComponentImportCode(components: Record) {
return [
...entries.map(
([, moduleId], index) =>
- `import MdxComponent${index} from ${JSON.stringify(moduleId)}`
+ `import _sitexMdxComponent${index} from ${JSON.stringify(moduleId)}`
),
entries.length === 0
- ? `const configuredMdxComponents = {}`
- : `const configuredMdxComponents = { ${entries
+ ? `const _sitexConfiguredMdxComponents = {}`
+ : `const _sitexConfiguredMdxComponents = { ${entries
.map(
- ([name], index) => `${JSON.stringify(name)}: MdxComponent${index}`
+ ([name], index) =>
+ `${JSON.stringify(name)}: _sitexMdxComponent${index}`
)
.join(", ")} }`,
]
@@ -786,33 +1182,41 @@ async function writeMdxTypecheckFiles(
const typecheckRoot = path.join(root, mdxTypecheckDir)
const files = await fg("src/pages/**/*.mdx", {
cwd: root,
- ignore: ["src/pages/examples/**"],
onlyFiles: true,
})
- await rm(typecheckRoot, { recursive: true, force: true })
+ await removeGeneratedDirectory(typecheckRoot)
- for (const file of files) {
- const code = await readFile(path.join(root, file), "utf8")
- const { headings, result } = compileMdx(code)
- const { data, layoutFile } = await readMdxPageMetadata(
- root,
- file,
- result.frontmatter,
- headings
- )
- const pagePath = routePathToPublicPath(
- staticPageFileToPath(file),
- options.trailingSlash
- )
- const typecheckFile = path.join(typecheckRoot, `${file}.tsx`)
-
- await mkdir(path.dirname(typecheckFile), { recursive: true })
- await writeFileAtomic(
- typecheckFile,
- createMdxTypecheckCode(typecheckFile, layoutFile, data, pagePath)
- )
- }
+ await Promise.all(
+ files.map(async (file) => {
+ const code = await readFile(path.join(root, file), "utf8")
+ const { headings, result } = compileMdxCached(root, file, code)
+ const { data, layoutFile } = await readMdxPageMetadata(
+ root,
+ file,
+ result.frontmatter,
+ headings
+ )
+ const routePath = pageFileToRoutePath(file)
+ const pagePath = routePathToPublicPath(routePath, options.trailingSlash)
+ const pageUrl = createPageUrl(options.site.url, pagePath)
+ const typecheckFile = path.join(typecheckRoot, `${file}.tsx`)
+
+ await mkdir(path.dirname(typecheckFile), { recursive: true })
+ await writeFileAtomic(
+ typecheckFile,
+ createMdxTypecheckCode(typecheckFile, layoutFile, data, {
+ locale: resolveRouteLocale(
+ routePath,
+ options.locales,
+ options.site.locale
+ ),
+ path: pagePath,
+ url: pageUrl,
+ })
+ )
+ })
+ )
}
async function readMdxPageMetadata(
@@ -823,64 +1227,61 @@ async function readMdxPageMetadata(
) {
const frontmatterData = parseMdxFrontmatter(frontmatter, file)
- if (Object.hasOwn(frontmatterData, "headings")) {
- throw new Error(
- `Frontmatter in "${file}" cannot define reserved key "headings".`
- )
- }
+ validatePageFrontmatter(frontmatterData, file)
const data: { [key: string]: JsonValue } = {
...frontmatterData,
headings: headings as unknown as JsonValue,
}
- const layout = data.layout
-
- if (hasRouteParams(file)) {
- throw new Error(`Dynamic MDX page "${file}" is not supported.`)
- }
-
- if (typeof layout !== "string" || layout.trim() === "") {
- throw new Error(
- `MDX page "${file}" must define a string "layout" in frontmatter.`
- )
- }
-
- if (
- layout.startsWith(".") ||
- layout.startsWith("/") ||
- layout.includes("..") ||
- !/^[A-Za-z0-9][A-Za-z0-9_/-]*$/.test(layout)
- ) {
- throw new Error(
- `MDX page "${file}" has unsupported layout "${layout}". Use a name like "blog/post", not a relative path.`
- )
- }
-
- validatePageData(data, file)
+ const layout = data.layout as string
const layoutFile = normalizePath(
path.join(root, "src/layouts", `${layout}.tsx`)
)
+ let layoutSource: string
+
try {
- await access(layoutFile)
+ layoutSource = await readFile(layoutFile, "utf8")
} catch {
throw new Error(
`MDX page "${file}" references missing layout "src/layouts/${layout}.tsx".`
)
}
- return { data, layoutFile }
+ return {
+ data,
+ layoutFile,
+ layoutHasMdxComponents: hasMdxComponentsExport(layoutSource),
+ }
+}
+
+function hasMdxComponentsExport(source: string) {
+ return /\bexport\s+(?:const|let|var|function|class)\s+mdxComponents\b|\bexport\s*\{[^}]*\bmdxComponents\b/.test(
+ source
+ )
}
function createMdxTypecheckCode(
typecheckFile: string,
layoutFile: string,
data: { [key: string]: JsonValue },
- pagePath: string
+ page: {
+ locale: string
+ path: string
+ url: string
+ }
) {
const dataEntries = Object.keys(data)
- .filter((key) => key !== "layout" && key !== "path" && key !== "children")
+ .filter(
+ (key) =>
+ key !== "layout" &&
+ key !== "path" &&
+ key !== "url" &&
+ key !== "locale" &&
+ key !== "headings" &&
+ key !== "children"
+ )
.map((key) => ` ${JSON.stringify(key)}: data[${JSON.stringify(key)}],`)
return [
@@ -888,10 +1289,12 @@ function createMdxTypecheckCode(
`import Layout from ${JSON.stringify(createRelativeImport(typecheckFile, layoutFile))}`,
``,
`const data = ${JSON.stringify(data, null, 2)} as const`,
- `const { layout: _layout, path: _path, children: _children, ..._props } = data as typeof data & { path?: never; children?: never }`,
`const layoutProps = {`,
...dataEntries,
- ` path: ${JSON.stringify(pagePath)},`,
+ ` path: ${JSON.stringify(page.path)},`,
+ ` url: ${JSON.stringify(page.url)},`,
+ ` locale: ${JSON.stringify(page.locale)},`,
+ ` headings: data.headings,`,
`} satisfies Omit, "children">`,
``,
`export const typecheck = {null} `,
@@ -899,6 +1302,24 @@ function createMdxTypecheckCode(
].join("\n")
}
+const mdxCompileCache = new Map<
+ string,
+ { source: string; compiled: ReturnType }
+>()
+
+function compileMdxCached(root: string, file: string, code: string) {
+ const key = `${root}:${file}`
+ const cached = mdxCompileCache.get(key)
+
+ if (cached && cached.source === code) return cached.compiled
+
+ const compiled = compileMdx(code)
+
+ mdxCompileCache.set(key, { source: code, compiled })
+
+ return compiled
+}
+
function compileMdx(code: string) {
const headings: MarkdownHeading[] = []
const usedSlugs = new Map()
@@ -970,17 +1391,13 @@ function createRelativeImport(fromFile: string, toFile: string) {
function createVirtualRoutesCode() {
return [
- `import { readPageRoutes, sortRoutes, validateUniqueRoutePaths } from ${JSON.stringify(packageFile("router/runtime", "ts"))}`,
- `const routeModules = import.meta.glob(["/src/pages/**/*.tsx", "/src/pages/**/*.mdx"])`,
- `function isRouteFile(file) {`,
- ` return !file.includes("/src/pages/examples/")`,
- `}`,
+ `import { readPageRoute, sortRoutes, validateUniqueRoutePaths } from ${JSON.stringify(packageFile("router/runtime", "ts"))}`,
+ `const routeModules = import.meta.glob(["/src/pages/**/*.mdx"])`,
`export async function getRoutes() {`,
` const routes = []`,
` for (const [file, load] of Object.entries(routeModules)) {`,
- ` if (!isRouteFile(file)) continue`,
` const routeFile = file.replace(/^\\/+/, "")`,
- ` routes.push(...await readPageRoutes(await load(), routeFile))`,
+ ` routes.push(readPageRoute(await load(), routeFile))`,
` }`,
` validateUniqueRoutePaths(routes)`,
` return sortRoutes(routes)`,
@@ -992,255 +1409,37 @@ function createPagesModuleCode(options: ResolvedSitexOptions) {
const trailingSlash = JSON.stringify(options.trailingSlash)
return [
- `const pageDataModules = import.meta.glob(["/src/pages/**/*.tsx", "/src/pages/**/*.mdx"], { import: "data" })`,
- `function normalizeRoutePath(path) {`,
- ` if (!path || path === "/") return "/"`,
- ` return "/" + path.replace(/^\\/+|\\/+$/g, "")`,
- `}`,
- `function staticPageFileToPath(file) {`,
- ` const route = file.replace(/^src\\/pages/, "").replace(/\\/index\\.(tsx|mdx)$/, "/").replace(/\\.(tsx|mdx)$/, "")`,
- ` return normalizeRoutePath(route || "/")`,
- `}`,
- `function routePathToPublicPath(path) {`,
- ` if (path === "/") return "/"`,
- ` return ${trailingSlash} ? path.replace(/\\/$/, "") + "/" : path.replace(/\\/$/, "")`,
- `}`,
- `function isRouteFile(file) {`,
- ` return !file.includes("/src/pages/examples/") && !/\\[[^\\]]+\\]/.test(file)`,
- `}`,
- `function validateData(data, file) {`,
- ` if (data && typeof data === "object") {`,
- ` if (Object.hasOwn(data, "path")) throw new Error(\`Page data in "\${file}" cannot define reserved key "path".\`)`,
- ` if (Object.hasOwn(data, "children")) throw new Error(\`Page data in "\${file}" cannot define reserved key "children".\`)`,
- ` }`,
- `}`,
+ `import { normalizeRoutePath, pageFileToRoutePath, routePathToPublicPath } from ${JSON.stringify(packageFile("router/runtime", "ts"))}`,
+ `const pageDataModules = import.meta.glob(["/src/pages/**/*.mdx"], { import: "data" })`,
`const routeMeta = Object.keys(pageDataModules)`,
- ` .filter(isRouteFile)`,
` .map((file) => {`,
` const routeFile = file.replace(/^\\/+/, "")`,
- ` return { file: routeFile, path: routePathToPublicPath(staticPageFileToPath(routeFile)) }`,
+ ` const routePath = pageFileToRoutePath(routeFile)`,
+ ` return { file: routeFile, routePath, path: routePathToPublicPath(routePath, ${trailingSlash}) }`,
` })`,
`async function toPage(route) {`,
` const load = pageDataModules["/" + route.file]`,
` if (!load) return undefined`,
` const data = await load()`,
` if (data === undefined) return undefined`,
- ` validateData(data, route.file)`,
` return { path: route.path, ...data }`,
`}`,
`export async function getPages(prefix) {`,
- ` const publicPrefix = prefix === undefined ? undefined : routePathToPublicPath(normalizeRoutePath(prefix))`,
- ` const matches = publicPrefix === undefined ? routeMeta : routeMeta.filter((page) => page.path.startsWith(publicPrefix))`,
+ ` const routePrefix = prefix === undefined ? undefined : normalizeRoutePath(prefix)`,
+ ` const matches = routePrefix === undefined || routePrefix === "/"`,
+ ` ? routeMeta`,
+ ` : routeMeta.filter((page) => page.routePath === routePrefix || page.routePath.startsWith(routePrefix + "/"))`,
` const pages = await Promise.all(matches.map(toPage))`,
` return pages.filter((page) => page !== undefined)`,
`}`,
`export async function getPage(path) {`,
- ` const publicPath = routePathToPublicPath(normalizeRoutePath(path))`,
- ` const route = routeMeta.find((page) => page.path === publicPath)`,
+ ` const routePath = normalizeRoutePath(path)`,
+ ` const route = routeMeta.find((page) => page.routePath === routePath)`,
` return route ? toPage(route) : undefined`,
`}`,
].join("\n")
}
-async function createPagesTypesCode(pages: PageData[]) {
- const { InputData, jsonInputForTargetLanguage, quicktype } =
- await import("quicktype-core")
- const jsonInput = jsonInputForTargetLanguage("typescript")
-
- await jsonInput.addSource({
- name: "Page",
- samples:
- pages.length > 0
- ? pages.map((page) => JSON.stringify(page))
- : [JSON.stringify({ path: "" })],
- })
-
- const inputData = new InputData()
- inputData.addInput(jsonInput)
-
- const { lines } = await quicktype({
- inferEnums: false,
- inferBooleanStrings: false,
- inferDateTimes: false,
- inferIntegerStrings: false,
- inferUuids: false,
- inputData,
- lang: "typescript",
- rendererOptions: {
- "just-types": "true",
- "prefer-types": "true",
- readonly: "true",
- "runtime-typecheck": "false",
- },
- })
-
- const types = lines
- .join("\n")
- .replaceAll(/^export type /gm, "type ")
- .split("\n")
- .map((line) => (line ? ` ${line}` : ""))
- .join("\n")
-
- return [
- `declare module "sitex:pages" {`,
- types,
- ` type Pages = Page[]`,
- ` export function getPages(prefix?: string): Promise`,
- ` export function getPage(path: string): Promise`,
- `}`,
- "",
- ].join("\n")
-}
-
-function createVirtualRenderCode(root: string) {
- const serverRouteFiles = collectServerRouteFilesSync(root).map(
- (file) => `/${file}`
- )
-
- return [
- `import { prerender } from "react-dom/static"`,
- `import { renderToString } from "react-dom/server"`,
- `import { getRoutes } from ${JSON.stringify(virtualRoutesId)}`,
- `import { createPageContext, matchRoute, readPageRoutes } from ${JSON.stringify(packageFile("router/runtime", "ts"))}`,
- `export { getRoutes }`,
- `const serverRouteModules = import.meta.glob(["/src/pages/**/*.tsx", "/src/pages/**/*.mdx"])`,
- `const serverRouteFiles = ${JSON.stringify(serverRouteFiles)}`,
- `function isRouteFile(file) {`,
- ` return !file.includes("/src/pages/examples/")`,
- `}`,
- `function normalizeRoutePath(path) {`,
- ` if (!path || path === "/") return "/"`,
- ` return "/" + path.replace(/^\\/+|\\/+$/g, "")`,
- `}`,
- `function routeFileToPattern(file) {`,
- ` const route = file.replace(/^\\/+/, "").replace(/^src\\/pages/, "").replace(/\\/index\\.(tsx|mdx)$/, "/").replace(/\\.(tsx|mdx)$/, "")`,
- ` return normalizeRoutePath(route || "/")`,
- `}`,
- `function routeScore(path) {`,
- ` return normalizeRoutePath(path).split("/").reduce((score, segment) => score + (!segment ? 0 : segment.startsWith("[") ? 1 : 10), 0)`,
- `}`,
- `function matchPathPattern(pattern, path) {`,
- ` const patternSegments = normalizeRoutePath(pattern).split("/")`,
- ` const pathSegments = normalizeRoutePath(path).split("/")`,
- ` if (patternSegments.length !== pathSegments.length) return undefined`,
- ` const params = {}`,
- ` for (let index = 0; index < patternSegments.length; index++) {`,
- ` const patternSegment = patternSegments[index]`,
- ` const pathSegment = pathSegments[index]`,
- ` const paramMatch = patternSegment.match(/^\\[([^\\]]+)\\]$/)`,
- ` if (paramMatch) {`,
- ` params[paramMatch[1]] = decodeURIComponent(pathSegment)`,
- ` continue`,
- ` }`,
- ` if (patternSegment !== pathSegment) return undefined`,
- ` }`,
- ` return params`,
- `}`,
- `async function matchServerRoute(path) {`,
- ` const candidates = []`,
- ` for (const file of serverRouteFiles) {`,
- ` if (!isRouteFile(file)) continue`,
- ` const pattern = routeFileToPattern(file)`,
- ` const params = matchPathPattern(pattern, path)`,
- ` if (params) candidates.push({ file, params, pattern, score: routeScore(pattern) })`,
- ` }`,
- ` candidates.sort((a, b) => b.score - a.score || a.pattern.localeCompare(b.pattern))`,
- ` const candidate = candidates[0]`,
- ` if (!candidate) return undefined`,
- ` const routeFile = candidate.file.replace(/^\\/+/, "")`,
- ` const loadRoute = serverRouteModules[candidate.file]`,
- ` if (!loadRoute) return undefined`,
- ` const routes = await readPageRoutes(await loadRoute(), routeFile)`,
- ` const match = matchRoute(routes, path)`,
- ` return match ? { params: { ...candidate.params, ...match.params }, route: match.route } : undefined`,
- `}`,
- `function replaceLast(value, search, replacement) {`,
- ` const index = value.lastIndexOf(search)`,
- ` if (index === -1) return value`,
- ` return value.slice(0, index) + replacement + value.slice(index + search.length)`,
- `}`,
- `export function injectRouteHtmlAssets(html, options = {}) {`,
- ` const script = options.islandClientSrc && html.includes("data-sitex-island")`,
- ` ? \`\${options.islandClientPreamble ?? ""}\``,
- ` : ""`,
- ` const headTags = options.assetTags ?? ""`,
- ` let result = html`,
- ` if (headTags) {`,
- ` if (!result.includes("")) {`,
- ` throw new Error("Sitex could not inject build assets because the document shell has no .")`,
- ` }`,
- ` result = result.replace("", headTags + "")`,
- ` }`,
- ` if (script) {`,
- ` if (!result.includes("")) {`,
- ` throw new Error("Sitex could not inject island client assets because the document shell has no .")`,
- ` }`,
- ` result = replaceLast(result, "", script + "")`,
- ` }`,
- ` return result`,
- `}`,
- `function createRenderResult(route, params, html) {`,
- ` return { html, params, route }`,
- `}`,
- `async function renderRouteHtml(route, params, options = {}) {`,
- ` const request = route.render === "server" ? options.request : undefined`,
- ` const context = createPageContext(route, params, request)`,
- ` const node = await route.layout(context)`,
- ` let body`,
- ` if (route.render === "server") {`,
- ` body = renderToString(node)`,
- ` } else {`,
- ` body = await new Response((await prerender(node)).prelude).text()`,
- ` }`,
- ` const html = /^\\s*" + body`,
- ` return injectRouteHtmlAssets(html, options)`,
- `}`,
- `export async function render(url, options = {}) {`,
- ` const routes = await getRoutes()`,
- ` const match = matchRoute(routes, url)`,
- ` if (!match) return undefined`,
- ` const html = await renderRouteHtml(match.route, match.params, options)`,
- ` return createRenderResult(match.route, match.params, html)`,
- `}`,
- `export async function renderMatchedRoute(route, params, options = {}) {`,
- ` return renderRouteHtml(route, params, options)`,
- `}`,
- `export async function renderServerResponse(request, options = {}) {`,
- ` const url = new URL(request.url)`,
- ` const match = await matchServerRoute(url.pathname)`,
- ` if (!match) return undefined`,
- ` const html = await renderRouteHtml(match.route, match.params, { ...options, request })`,
- ` return new Response(html, { headers: { "content-type": "text/html; charset=utf-8" } })`,
- `}`,
- ].join("\n")
-}
-
-function createWebRequest(req: Connect.IncomingMessage) {
- const protocolHeader = req.headers["x-forwarded-proto"]
- const protocol = Array.isArray(protocolHeader)
- ? (protocolHeader[0] ?? "http")
- : (protocolHeader ?? "http")
- const host = req.headers.host ?? "localhost"
- const url = new URL(req.url ?? "/", `${protocol}://${host}`)
- const headers = new Headers()
-
- for (const [key, value] of Object.entries(req.headers)) {
- if (value === undefined) continue
-
- if (Array.isArray(value)) {
- for (const item of value) headers.append(key, item)
- continue
- }
-
- headers.set(key, value)
- }
-
- return new Request(url, {
- headers,
- method: req.method,
- })
-}
-
function routePathToHtmlFile(
root: string,
routePath: string,
@@ -1257,40 +1456,6 @@ function routePathToHtmlFile(
: path.join(root, `${normalizedRoutePath}.html`)
}
-function staticPageFileToPath(file: string) {
- const route = file
- .replace(/^src\/pages/, "")
- .replace(/\/index\.(tsx|mdx)$/, "/")
- .replace(/\.(tsx|mdx)$/, "")
-
- return normalizeRoutePath(route || "/")
-}
-
-function hasRouteParams(file: string) {
- return /\[[^\]]+\]/.test(file)
-}
-
-function hasContentExport(code: string) {
- return /\bexport\s+const\s+content\b/.test(code)
-}
-
-function hasDataExport(code: string) {
- return /\bexport\s+const\s+data\b/.test(code)
-}
-
-function readJsonData(
- value: unknown,
- file: string
-): { [key: string]: JsonValue } {
- const data = readJsonValue(value, file, "data", new WeakSet())
-
- if (!data || typeof data !== "object" || Array.isArray(data)) {
- throw new Error(`Data export in "${file}" must be a JSON object.`)
- }
-
- return data
-}
-
function parseMdxFrontmatter(
frontmatter: { kind: string; value: string } | null | undefined,
file: string
@@ -1312,14 +1477,17 @@ function parseMdxFrontmatter(
return readJsonData(value, file)
}
-function validatePageData(data: { [key: string]: JsonValue }, file: string) {
- for (const key of ["path", "children"]) {
- if (Object.hasOwn(data, key)) {
- throw new Error(
- `Page data in "${file}" cannot define reserved key "${key}".`
- )
- }
+function readJsonData(
+ value: unknown,
+ file: string
+): { [key: string]: JsonValue } {
+ const data = readJsonValue(value, file, "data", new WeakSet())
+
+ if (!data || typeof data !== "object" || Array.isArray(data)) {
+ throw new Error(`Data in "${file}" must be a JSON object.`)
}
+
+ return data
}
function readJsonValue(
@@ -1330,13 +1498,22 @@ function readJsonValue(
): JsonValue {
if (
typeof value === "string" ||
- typeof value === "number" ||
typeof value === "boolean" ||
value === null
) {
return value
}
+ if (typeof value === "number") {
+ if (!Number.isFinite(value)) {
+ throw new Error(
+ `Data in "${file}" contains a non-finite number at ${keyPath}.`
+ )
+ }
+
+ return value
+ }
+
if (Array.isArray(value)) {
if (seen.has(value)) {
throw new Error(`Data in "${file}" contains a circular value.`)
@@ -1376,32 +1553,16 @@ function readJsonValue(
)
}
-function normalizeRoutePath(path: string) {
- if (!path || path === "/") return "/"
- return `/${path.replace(/^\/+|\/+$/g, "")}`
-}
-
-function routePathToPublicPath(path: string, trailingSlash: boolean) {
- if (path === "/") return "/"
-
- return trailingSlash ? `${path.replace(/\/$/, "")}/` : path.replace(/\/$/, "")
+function createPageUrl(siteUrl: string, pagePath: string) {
+ return new URL(pagePath, siteUrl).href
}
async function findBuildPublicRoot(root: string) {
- for (const publicRoot of [
- path.join(root, "dist"),
- path.join(root, ".output/public"),
- ]) {
- try {
- await access(path.join(publicRoot, ".vite/manifest.json"))
- return publicRoot
- } catch {
- // Try the next build output.
- }
- }
+ const publicRoot = path.join(root, "dist")
- await mkdir(path.join(root, "dist"), { recursive: true })
- return path.join(root, "dist")
+ await mkdir(publicRoot, { recursive: true })
+
+ return publicRoot
}
async function readManifest(publicRoot: string): Promise {
@@ -1413,10 +1574,6 @@ async function readManifest(publicRoot: string): Promise {
}
}
-function renderStylesheetTags(hrefs: string[]) {
- return hrefs.map((href) => `
) {
const assets = new Set()
- for (const file of collectRouteCssFiles(graph, root, routeFile)) {
+ for (const file of collectRouteCssFilesFromChunks(chunks, root, routeFile)) {
const asset = cssAssetMap.get(file)
if (asset) assets.add(asset)
@@ -1446,6 +1603,51 @@ function readRouteStylesheetAssets(
return [...assets]
}
+function collectRouteCssFilesFromChunks(
+ chunks: BuildOutputChunk[],
+ root: string,
+ routeFile: string
+) {
+ const absoluteRouteFile = normalizePath(path.join(root, routeFile))
+ const chunksByFileName = new Map(
+ chunks.map((chunk) => [chunk.fileName, chunk])
+ )
+ const matchesRoute = (id: string) =>
+ normalizeModuleFile(root, id) === absoluteRouteFile
+ const entry =
+ chunks.find(
+ (chunk) => chunk.facadeModuleId && matchesRoute(chunk.facadeModuleId)
+ ) ?? chunks.find((chunk) => (chunk.moduleIds ?? []).some(matchesRoute))
+
+ if (!entry) return []
+
+ const cssFiles = new Set()
+ const seen = new Set()
+ const queue = [entry]
+
+ while (queue.length > 0) {
+ const chunk = queue.pop()
+
+ if (!chunk || seen.has(chunk)) continue
+
+ seen.add(chunk)
+
+ for (const id of chunk.moduleIds ?? []) {
+ const file = normalizeCssModuleFile(root, id)
+
+ if (file) cssFiles.add(file)
+ }
+
+ for (const imported of chunk.imports ?? []) {
+ const next = chunksByFileName.get(imported)
+
+ if (next) queue.push(next)
+ }
+ }
+
+ return [...cssFiles]
+}
+
function collectRouteCssFiles(
graph: EnvironmentModuleGraph,
root: string,
@@ -1592,13 +1794,6 @@ function readManifestChunkCss(entry: Manifest[string] | undefined) {
return [...assets]
}
-function stripViteClientScript(html: string) {
- return html.replace(
- /]*\bsrc=(["'])\/@vite\/client\1[^>]*>\s*<\/script>/g,
- ""
- )
-}
-
function publicAssetPath(file: string) {
return `/${file.replace(/^\/+/, "")}`
}
diff --git a/packages/sitex/test/hydration-compiler.test.mjs b/packages/sitex/test/hydration-compiler.test.mjs
deleted file mode 100644
index 4359e98..0000000
--- a/packages/sitex/test/hydration-compiler.test.mjs
+++ /dev/null
@@ -1,115 +0,0 @@
-import assert from "node:assert/strict"
-
-import { parseAst } from "vite-plus"
-
-import { transformClientDirectives } from "../src/hydration/compiler.ts"
-
-const root = "/repo"
-const page = "/repo/src/pages/index.tsx"
-
-function transform(code) {
- const registry = new Map()
- const output = transformClientDirectives(code, page, root, registry)
-
- assert.equal(typeof output, "string")
- parseAst(output, { lang: "tsx", sourceType: "module" }, "output.tsx")
-
- return { output, registry }
-}
-
-{
- const { output, registry } = transform(`
- import Widget from "../components/widget"
- export default function Page() {
- return child ]+>child<\/span><\/SitexIsland>/
- )
-}
-
-{
- const { output, registry } = transform(`
- import Outer from "../components/outer"
- import Inner from "../components/inner"
- export default function Page() {
- return & {
+ storageKey?: string
+ }
+
+function getBannerStorageToken(key: string) {
+ return `banner:${key}`
+}
+
+function Banner({
+ className,
+ variant,
+ storageKey,
+ hidden,
+ ...props
+}: BannerProps) {
+ const [isHidden, setIsHidden] = React.useState(false)
+
+ React.useEffect(() => {
+ if (!storageKey) return
+ setIsHidden(
+ window.sessionStorage.getItem(getBannerStorageToken(storageKey)) ===
+ "hidden"
+ )
+ }, [storageKey])
+
+ return (
+
+ )
+}
+
+function BannerContainer({
+ className,
+ showClose = true,
+ onClose,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showClose?: boolean
+ onClose?: React.MouseEventHandler
+}) {
+ const handleClose: React.MouseEventHandler = (event) => {
+ onClose?.(event)
+ if (event.defaultPrevented) return
+
+ const banner = event.currentTarget.closest(
+ "[data-slot='banner']"
+ )
+
+ if (!banner) return
+
+ banner.hidden = true
+
+ const storageKey = banner.dataset.bannerStorageKey
+
+ if (storageKey) {
+ window.sessionStorage.setItem(getBannerStorageToken(storageKey), "hidden")
+ }
+ }
+
+ return (
+
+ {props.children}
+ {showClose ? (
+
+ Close
+
+ ) : null}
+
+ )
+}
+
+export { Banner, BannerContainer, bannerVariants }
diff --git a/packages/ui/src/components/ui/code-copy-button.tsx b/packages/ui/src/components/ui/code-copy-button.tsx
new file mode 100644
index 0000000..f49d5ca
--- /dev/null
+++ b/packages/ui/src/components/ui/code-copy-button.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react"
+
+import { CheckIcon, CopyIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type CodeCopyButtonProps = {
+ code: string
+ className?: string
+}
+
+function CodeCopyButton({ code, className }: CodeCopyButtonProps) {
+ const [copied, setCopied] = useState(false)
+
+ async function copyCode() {
+ try {
+ await navigator.clipboard.writeText(code)
+ } catch {
+ const textarea = document.createElement("textarea")
+ textarea.value = code
+ textarea.style.position = "fixed"
+ textarea.style.opacity = "0"
+ document.body.appendChild(textarea)
+ textarea.select()
+ document.execCommand("copy")
+ textarea.remove()
+ }
+
+ setCopied(true)
+ window.setTimeout(() => setCopied(false), 1200)
+ }
+
+ return (
+
+ {copied ?
+ )
+}
+
+export { CodeCopyButton }
diff --git a/packages/ui/src/components/ui/code.tsx b/packages/ui/src/components/ui/code.tsx
new file mode 100644
index 0000000..53989a7
--- /dev/null
+++ b/packages/ui/src/components/ui/code.tsx
@@ -0,0 +1,151 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react"
+
+import { createHighlighterCore } from "@shikijs/core"
+import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript"
+import bash from "@shikijs/langs/bash"
+import css from "@shikijs/langs/css"
+import html from "@shikijs/langs/html"
+import json from "@shikijs/langs/json"
+import markdown from "@shikijs/langs/markdown"
+import mdx from "@shikijs/langs/mdx"
+import ts from "@shikijs/langs/ts"
+import tsx from "@shikijs/langs/tsx"
+import yaml from "@shikijs/langs/yaml"
+import githubDark from "@shikijs/themes/github-dark"
+import githubLight from "@shikijs/themes/github-light"
+
+import { CodeCopyButton } from "@/components/ui/code-copy-button"
+import { cn } from "@/lib/utils"
+
+type CodeHighlighter = Awaited>
+
+const highlighterStore = globalThis as typeof globalThis & {
+ __uiCodeHighlighter?: Promise
+}
+
+const highlighter = await (highlighterStore.__uiCodeHighlighter ??=
+ createHighlighterCore({
+ langs: [bash, css, html, json, markdown, mdx, ts, tsx, yaml],
+ themes: [githubLight, githubDark],
+ engine: createJavaScriptRegexEngine(),
+ }))
+
+type CodeLanguage =
+ | "bash"
+ | "css"
+ | "html"
+ | "json"
+ | "markdown"
+ | "mdx"
+ | "text"
+ | "ts"
+ | "tsx"
+ | "yaml"
+
+const codeLanguages = new Set([
+ "bash",
+ "css",
+ "html",
+ "json",
+ "markdown",
+ "mdx",
+ "text",
+ "ts",
+ "tsx",
+ "yaml",
+])
+
+type CodeProps = {
+ code: string
+ lang?: CodeLanguage
+ className?: string
+}
+
+function escapeHtml(value: string) {
+ return value
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'")
+}
+
+function Code({ code, lang = "text", className }: CodeProps) {
+ const trimmedCode = code.trim()
+ const codeHtml =
+ lang === "text"
+ ? `${escapeHtml(trimmedCode)}
+
+
+ )
+}
+
+function isReactElement(value: ReactNode): value is ReactElement<{
+ className?: string
+ children?: ReactNode
+}> {
+ return typeof value === "object" && value !== null && "props" in value
+}
+
+function readLanguage(className: string | undefined): CodeLanguage {
+ const language = className?.match(/\blanguage-([A-Za-z0-9_-]+)/)?.[1]
+
+ return language && codeLanguages.has(language as CodeLanguage)
+ ? (language as CodeLanguage)
+ : "text"
+}
+
+function readValue(value: ReactNode) {
+ return typeof value === "string" || typeof value === "number"
+ ? String(value)
+ : ""
+}
+
+/**
+ * Drop-in MDX `pre` replacement. Wire it up in vite.config.ts:
+ * sitex({ mdx: { components: { pre: "@/components/ui/code" } } })
+ */
+export default function CodePre({
+ children,
+}: ComponentProps<"pre">): ReactElement {
+ if (!isReactElement(children)) {
+ return {children}
+ }
+
+ return (
+ ) {
+ return (
+
+ )
+}
+
+export { Gradient, gradientVariants }
diff --git a/packages/ui/src/components/ui/header.tsx b/packages/ui/src/components/ui/header.tsx
new file mode 100644
index 0000000..2fffa27
--- /dev/null
+++ b/packages/ui/src/components/ui/header.tsx
@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const headerVariants = cva(
+ "relative z-50 flex w-full items-center gap-4 py-2",
+ {
+ variants: {
+ variant: {
+ default: "",
+ floating:
+ "mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border bg-background shadow-sm",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Header({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"header"> & VariantProps) {
+ return (
+
+ )
+}
+
+function HeaderContainer({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function HeaderGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Header, HeaderContainer, HeaderGroup, headerVariants }
diff --git a/packages/ui/src/components/ui/layout.tsx b/packages/ui/src/components/ui/layout.tsx
new file mode 100644
index 0000000..f4fee6b
--- /dev/null
+++ b/packages/ui/src/components/ui/layout.tsx
@@ -0,0 +1,135 @@
+import * as React from "react"
+import type { Graph, Thing, WithContext } from "schema-dts"
+
+import { cn } from "@/lib/utils"
+
+function Layout({ className, ...props }: React.ComponentProps<"html">) {
+ return (
+
+ )
+}
+
+function LayoutBody({ className, ...props }: React.ComponentProps<"body">) {
+ return (
+
+ )
+}
+
+function LayoutMain({ className, ...props }: React.ComponentProps<"main">) {
+ return (
+
+
+type LayoutHeadProps = Omit, "title"> & {
+ name?: string
+ title?: string
+ description?: string
+ image?:
+ | string
+ | {
+ src: string
+ alt?: string
+ width?: number
+ height?: number
+ type?: string
+ }
+ jsonLd?: LayoutJsonLd | readonly LayoutJsonLd[]
+ openGraphType?: string
+ publishedAt?: string
+ type?: string
+ twitterCard?: "summary" | "summary_large_image"
+ updatedAt?: string
+}
+
+function LayoutHead({
+ children,
+ name,
+ title,
+ description,
+ image,
+ jsonLd,
+ openGraphType,
+ publishedAt,
+ type,
+ twitterCard,
+ updatedAt,
+ ...props
+}: LayoutHeadProps) {
+ const imageProps = typeof image === "string" ? { src: image } : image
+ const resolvedOpenGraphType = openGraphType ?? type
+
+ return (
+
+ {title ? {title} : null}
+ {description ? , "style"> &
+ VariantProps & {
+ direction?: "left" | "right" | "top" | "bottom"
+ duration?: number | string
+ gap?: string
+ infinite?: boolean
+ pauseOnHover?: boolean
+ style?: React.CSSProperties
+ time?: number | string
+ }
+
+function formatDuration(duration: number | string) {
+ return typeof duration === "number" ? `${duration}s` : duration
+}
+
+function Marquee({
+ children,
+ className,
+ direction = "left",
+ duration,
+ gap = "1rem",
+ infinite = true,
+ pauseOnHover = false,
+ style,
+ time = 30,
+ variant,
+ ...props
+}: MarqueeProps) {
+ const resolvedDuration = duration ?? time
+ const marqueeStyle = {
+ "--duration": formatDuration(resolvedDuration),
+ "--gap": gap,
+ ...style,
+ } as React.CSSProperties
+
+ const contentClassName = cn(
+ "marquee-content flex min-w-full shrink-0 justify-around gap-[var(--gap)] will-change-transform group-data-[direction=bottom]:[animation-direction:reverse] group-data-[direction=right]:[animation-direction:reverse] data-[direction=bottom]:min-h-full data-[direction=bottom]:flex-col data-[direction=top]:min-h-full data-[direction=top]:flex-col motion-reduce:[animation-play-state:paused]",
+ infinite &&
+ "animate-[marquee-x_var(--duration,20s)_linear_infinite] group-data-[direction=bottom]:animate-[marquee-y_var(--duration,20s)_linear_infinite] group-data-[direction=top]:animate-[marquee-y_var(--duration,20s)_linear_infinite]",
+ (direction === "top" || direction === "bottom") && "flex-col"
+ )
+
+ return (
+
+
+
{children}
+ {infinite ? (
+
+ {children}
+
+ ) : null}
+
+ )
+}
+
+function PriceUnit({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+ & {
+ price?: PriceValueType
+ compareAt?: PriceValueType
+ currency?: string
+ locale?: string
+ discountFormat?: DiscountFormat
+ showDiscount?: boolean
+ }) {
+ const formattedPrice = formatPriceValue(price, { currency, locale })
+ const formattedCompareAt = formatPriceValue(compareAt, { currency, locale })
+ const formattedDiscount =
+ showDiscount && compareAt
+ ? formatPriceDiscount(price, compareAt, {
+ currency,
+ locale,
+ format: discountFormat,
+ })
+ : null
+ const hasDiscount = Boolean(formattedCompareAt && formattedDiscount)
+
+ if (!formattedPrice) return null
+
+ return (
+
+
+ {formattedPrice}
+
+ {formattedCompareAt ? (
+
+ {formattedCompareAt}
+
+ ) : null}
+ {hasDiscount ? (
+
+ Save {formattedDiscount}
+
+ ) : null}
+
+ )
+}
+
+export {
+ Price,
+ PriceUnit,
+ PriceValue,
+ formatPriceDiscount,
+ formatPriceValue,
+ parseSinglePriceValue,
+ priceValueVariants,
+}
diff --git a/packages/ui/src/components/ui/rating.tsx b/packages/ui/src/components/ui/rating.tsx
new file mode 100644
index 0000000..d07acce
--- /dev/null
+++ b/packages/ui/src/components/ui/rating.tsx
@@ -0,0 +1,47 @@
+import { StarIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Rating({
+ className,
+ value = 5,
+ ...props
+}: React.ComponentProps<"div"> & {
+ value?: number
+}) {
+ return (
+
+ {Array.from({ length: 5 }).map((_, index) => {
+ const fillPercentage =
+ index < Math.floor(value)
+ ? 100
+ : index === Math.floor(value)
+ ? (value % 1) * 100
+ : 0
+
+ return (
+
+
+
+ ) : null}
+
+ )
+ })}
+
+ )
+}
+
+export { Rating }
diff --git a/packages/ui/src/components/ui/section.tsx b/packages/ui/src/components/ui/section.tsx
new file mode 100644
index 0000000..edae24e
--- /dev/null
+++ b/packages/ui/src/components/ui/section.tsx
@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const sectionVariants = cva(
+ "relative flex scroll-mt-12 flex-col gap-16 py-16",
+ {
+ variants: {
+ variant: {
+ default: "w-full bg-background",
+ floating:
+ "mx-auto my-16 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-xl border bg-background shadow-md",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Section({
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"section"> & VariantProps) {
+ return (
+
+ )
+}
+
+function SectionContainer({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Section, SectionContainer, sectionVariants }
diff --git a/packages/ui/src/components/ui/theme-toggle.tsx b/packages/ui/src/components/ui/theme-toggle.tsx
new file mode 100644
index 0000000..3c71f75
--- /dev/null
+++ b/packages/ui/src/components/ui/theme-toggle.tsx
@@ -0,0 +1,126 @@
+import { MoonIcon, SunIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+ children?: React.ReactNode
+ defaultTheme?: Theme
+ storageKey?: string
+}
+
+type ThemeProviderState = {
+ theme: Theme
+ setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+ theme: "system",
+ setTheme: () => null,
+}
+
+const ThemeProviderContext =
+ React.createContext(initialState)
+
+function disableTransitionsTemporarily() {
+ const style = document.createElement("style")
+ style.appendChild(
+ document.createTextNode("*,*::before,*::after{transition:none!important}")
+ )
+ document.head.appendChild(style)
+ window.getComputedStyle(document.body)
+
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ style.remove()
+ })
+ })
+}
+
+function ThemeProvider({
+ children,
+ defaultTheme = "system",
+ storageKey = "theme",
+}: ThemeProviderProps) {
+ const [theme, setTheme] = React.useState(() =>
+ typeof window === "undefined"
+ ? defaultTheme
+ : (localStorage.getItem(storageKey) as Theme) || defaultTheme
+ )
+
+ React.useEffect(() => {
+ const root = window.document.documentElement
+
+ disableTransitionsTemporarily()
+ root.classList.remove("light", "dark")
+
+ if (theme === "system") {
+ const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+ .matches
+ ? "dark"
+ : "light"
+
+ root.classList.add(systemTheme)
+ return
+ }
+
+ root.classList.add(theme)
+ }, [theme])
+
+ const value = React.useMemo(
+ () => ({
+ theme,
+ setTheme: (theme: Theme) => {
+ if (typeof window !== "undefined") {
+ localStorage.setItem(storageKey, theme)
+ }
+
+ setTheme(theme)
+ },
+ }),
+ [storageKey, theme]
+ )
+
+ return (
+
+ {children}
+
+ )
+}
+
+function useTheme() {
+ return React.useContext(ThemeProviderContext)
+}
+
+function ThemeToggle({
+ className = "relative",
+ ...props
+}: React.ComponentProps<"button">) {
+ const { theme, setTheme } = useTheme()
+ const nextTheme = theme === "dark" ? "light" : "dark"
+
+ return (
+ setTheme(nextTheme)}
+ {...props}
+ >
+ Toggle theme
+
+ )
+}
+
+export { ThemeProvider, ThemeToggle, useTheme }
+export type { Theme }
diff --git a/packages/ui/src/components/ui/tile.tsx b/packages/ui/src/components/ui/tile.tsx
new file mode 100644
index 0000000..577a1e3
--- /dev/null
+++ b/packages/ui/src/components/ui/tile.tsx
@@ -0,0 +1,126 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const tileVariants = cva(
+ "group/tile focus-visible:border-ring focus-visible:ring-ring/50 flex min-w-0 flex-col overflow-hidden rounded-xl transition-colors outline-none group-data-[variant=masonry]/tile-group:mb-4 group-data-[variant=masonry]/tile-group:break-inside-avoid focus-visible:ring-3",
+ {
+ variants: {
+ variant: {
+ default:
+ "border border-transparent text-foreground data-[link]:hover:bg-muted/40",
+ inset:
+ "-mx-5 border border-transparent text-foreground data-[link]:hover:bg-muted/40",
+ outline:
+ "border border-border bg-background text-foreground data-[link]:hover:bg-muted/40",
+ muted:
+ "border-transparent bg-muted/50 text-foreground data-[link]:hover:bg-muted/70",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+const tileGroupVariants = cva("group/tile-group w-full gap-4", {
+ variants: {
+ variant: {
+ default: "grid",
+ masonry: "columns-1",
+ },
+ size: {
+ sm: "",
+ default: "",
+ lg: "",
+ },
+ },
+ compoundVariants: [
+ {
+ variant: "default",
+ size: "sm",
+ class: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(240px,1fr))]",
+ },
+ {
+ variant: "default",
+ size: "default",
+ class: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(300px,1fr))]",
+ },
+ {
+ variant: "default",
+ size: "lg",
+ class: "grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))]",
+ },
+ {
+ variant: "masonry",
+ size: "sm",
+ class: "sm:[column-count:5] sm:[column-width:240px]",
+ },
+ {
+ variant: "masonry",
+ size: "default",
+ class: "sm:[column-count:4] sm:[column-width:300px]",
+ },
+ {
+ variant: "masonry",
+ size: "lg",
+ class: "sm:[column-count:3] sm:[column-width:400px]",
+ },
+ ],
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+})
+
+type TileProps = VariantProps &
+ React.ComponentProps<"div"> &
+ React.ComponentProps<"a"> & {
+ href?: string
+ }
+
+function Tile({ className, variant, href, ...props }: TileProps) {
+ const Comp = href ? "a" : "div"
+
+ return (
+ ) {
+ return (
+
+ )
+}
+
+function TileContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Tile, TileContent, TileGroup, tileGroupVariants, tileVariants }
diff --git a/packages/ui/src/components/ui/toc.tsx b/packages/ui/src/components/ui/toc.tsx
new file mode 100644
index 0000000..1ff454d
--- /dev/null
+++ b/packages/ui/src/components/ui/toc.tsx
@@ -0,0 +1,87 @@
+import type { ComponentProps, ElementType } from "react"
+
+import { cn } from "@/lib/utils"
+
+function Toc({ className, ...props }: ComponentProps<"nav">) {
+ return (
+ = {
+ as?: T
+} & Omit, "as">
+
+function TocTitle({
+ as,
+ className,
+ ...props
+}: TocTitleProps) {
+ const Tag = as ?? "p"
+
+ return (
+ = 4 && "pl-8",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export { Toc, TocMenu, TocMenuItem, TocMenuLink, TocTitle }
diff --git a/packages/ui/src/components/ui/typography.tsx b/packages/ui/src/components/ui/typography.tsx
new file mode 100644
index 0000000..91318fe
--- /dev/null
+++ b/packages/ui/src/components/ui/typography.tsx
@@ -0,0 +1,351 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type TypographySize = "sm" | "default" | "lg"
+
+type TypographyProps = {
+ as?: T
+ size?: TypographySize
+ className?: string
+} & Omit, "as" | "className" | "size">
+
+function Typography({
+ as,
+ className,
+ size = "default",
+ ...props
+}: TypographyProps) {
+ const Component = as ?? "div"
+
+ return (
+ :is(p,blockquote,ul,ol,table,div,section,article,aside,nav,figure,details,pre,small,dl,img,picture,video,iframe):not(:first-child)]:mt-6",
+ "[&>h2:not(:first-child)]:mt-10",
+ "[&>:is(h3,h4):not(:first-child)]:mt-8",
+ "[&>:is(h1,h2,h3,h4)+:is(p,blockquote,ul,ol,table,div,section,article,aside,nav,figure,details,pre,small,dl,img,picture,video,iframe)]:mt-4",
+ "[&>hr]:my-8 [&>hr]:border-border",
+ // Raw elements (e.g. rendered MDX) get the same styling the
+ // Typography* components carry themselves; [data-slot] elements are
+ // excluded so those components stay in charge of their own styling.
+ "[&_h1:not([data-slot])]:scroll-m-20 [&_h1:not([data-slot])]:font-semibold [&_h1:not([data-slot])]:tracking-tight [&_h1:not([data-slot])]:text-balance",
+ "[&[data-size=sm]_h1:not([data-slot])]:text-3xl [&[data-size=default]_h1:not([data-slot])]:text-4xl [&[data-size=lg]_h1:not([data-slot])]:text-5xl",
+ "[&_h2:not([data-slot])]:scroll-m-20 [&_h2:not([data-slot])]:font-semibold [&_h2:not([data-slot])]:tracking-tight",
+ "[&[data-size=sm]_h2:not([data-slot])]:text-2xl [&[data-size=default]_h2:not([data-slot])]:text-3xl [&[data-size=lg]_h2:not([data-slot])]:text-4xl",
+ "[&_h3:not([data-slot])]:scroll-m-20 [&_h3:not([data-slot])]:font-semibold [&_h3:not([data-slot])]:tracking-tight",
+ "[&[data-size=sm]_h3:not([data-slot])]:text-xl [&[data-size=default]_h3:not([data-slot])]:text-2xl [&[data-size=lg]_h3:not([data-slot])]:text-3xl",
+ "[&_h4:not([data-slot])]:scroll-m-20 [&_h4:not([data-slot])]:font-semibold [&_h4:not([data-slot])]:tracking-tight",
+ "[&[data-size=sm]_h4:not([data-slot])]:text-lg [&[data-size=default]_h4:not([data-slot])]:text-xl [&[data-size=lg]_h4:not([data-slot])]:text-2xl",
+ "[&_a:not([data-slot])]:font-medium [&_a:not([data-slot])]:text-primary [&_a:not([data-slot])]:underline [&_a:not([data-slot])]:underline-offset-4",
+ "[&_p:not([data-slot])]:text-base [&_p:not([data-slot])]:leading-7",
+ "[&_blockquote:not([data-slot])]:border-l-2 [&_blockquote:not([data-slot])]:pl-6 [&_blockquote:not([data-slot])]:text-base [&_blockquote:not([data-slot])]:italic",
+ "[&_:is(ul,ol):not([data-slot])]:ml-6 [&_:is(ul,ol):not([data-slot])]:text-base [&_ul:not([data-slot])]:list-disc [&_ol:not([data-slot])]:list-decimal [&_:is(ul,ol)>li:not([data-slot])]:mt-2",
+ "[&>small]:block [&>small]:text-sm [&>small]:leading-none [&>small]:font-medium",
+ "[&_:not(pre)>code:not([data-slot])]:relative [&_:not(pre)>code:not([data-slot])]:rounded [&_:not(pre)>code:not([data-slot])]:bg-muted [&_:not(pre)>code:not([data-slot])]:px-[0.3rem] [&_:not(pre)>code:not([data-slot])]:py-[0.2rem] [&_:not(pre)>code:not([data-slot])]:font-mono [&_:not(pre)>code:not([data-slot])]:text-sm",
+ "[&_table:not([data-slot])]:w-full [&_table:not([data-slot])]:caption-bottom [&_table:not([data-slot])]:border-spacing-0 [&_table:not([data-slot])]:overflow-x-auto [&_table:not([data-slot])]:rounded-xl [&_table:not([data-slot])]:border [&_table:not([data-slot])]:border-border [&_table:not([data-slot])]:text-sm",
+ "[&_tr:not([data-slot])]:border-b [&_tr:not([data-slot])]:transition-colors [&_tbody_tr:not([data-slot]):last-child]:border-b-0",
+ "[&_th:not([data-slot])]:h-10 [&_th:not([data-slot])]:px-2 [&_th:not([data-slot])]:text-left [&_th:not([data-slot])]:align-middle [&_th:not([data-slot])]:text-sm [&_th:not([data-slot])]:font-medium [&_th:not([data-slot])]:whitespace-nowrap [&_th:not([data-slot])]:text-foreground",
+ "[&_th[align=center]:not([data-slot])]:text-center [&_th[align=right]:not([data-slot])]:text-right",
+ "[&_td:not([data-slot])]:p-2 [&_td:not([data-slot])]:text-left [&_td:not([data-slot])]:align-middle [&_td:not([data-slot])]:text-sm [&_td:not([data-slot])]:whitespace-nowrap",
+ "[&_td[align=center]:not([data-slot])]:text-center [&_td[align=right]:not([data-slot])]:text-right",
+ "[&_table:not([data-slot])_:not(pre)>code:not([data-slot])]:rounded-md [&_table:not([data-slot])_:not(pre)>code:not([data-slot])]:leading-5",
+ // Code blocks, including shiki-highlighted MDX output.
+ "[&>pre]:overflow-x-auto [&>pre]:rounded-xl [&>pre]:border [&>pre]:border-border [&>pre]:bg-muted/60 [&>pre]:p-4 [&>pre]:text-sm",
+ "[&>pre.shiki]:leading-(--text-sm--line-height) [&>pre.shiki_code]:text-inherit",
+ "dark:[&>pre.shiki]:[color:var(--shiki-dark,var(--foreground))]",
+ "dark:[&>pre.shiki_span[style*='--shiki-dark']]:[color:var(--shiki-dark)] dark:[&>pre.shiki_span[style*='--shiki-dark']]:[font-style:var(--shiki-dark-font-style,inherit)] dark:[&>pre.shiki_span[style*='--shiki-dark']]:[font-weight:var(--shiki-dark-font-weight,inherit)] dark:[&>pre.shiki_span[style*='--shiki-dark']]:[text-decoration:var(--shiki-dark-text-decoration,inherit)]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TypographyA({ className, ...props }: React.ComponentProps<"a">) {
+ return (
+
+ )
+}
+
+type TypographyListProps = React.HTMLAttributes<
+ HTMLUListElement | HTMLOListElement
+> & {
+ as?: "ul" | "ol"
+}
+
+function TypographyList({
+ as: Component = "ul",
+ className,
+ ...props
+}: TypographyListProps) {
+ return (
+
+ )
+}
+
+function TypographyTable({
+ className,
+ containerClassName,
+ ...props
+}: React.ComponentProps<"table"> & { containerClassName?: string }) {
+ return (
+
+ )
+}
+
+function TypographyTableCell({
+ className,
+ align,
+ ...props
+}: React.ComponentProps<"td">) {
+ return (
+