diff --git a/src/components/Callout.astro b/src/components/Callout.astro new file mode 100644 index 0000000..bf511b6 --- /dev/null +++ b/src/components/Callout.astro @@ -0,0 +1,53 @@ +--- +/** + * Pure Astro Callout component - no JavaScript shipped to client + */ +interface Props { + type?: 'info' | 'warning' | 'danger' | 'tip'; + title?: string; +} + +const { type = 'info', title } = Astro.props; + +const icons = { + info: ``, + warning: ``, + danger: ``, + tip: ``, +}; + +const styles = { + info: 'border-blue-500/30 bg-blue-500/5 text-blue-400', + warning: 'border-amber-500/30 bg-amber-500/5 text-amber-400', + danger: 'border-red-500/30 bg-red-500/5 text-red-400', + tip: 'border-emerald-500/30 bg-emerald-500/5 text-emerald-400', +}; + +const iconColors = { + info: 'text-blue-500', + warning: 'text-amber-500', + danger: 'text-red-500', + tip: 'text-emerald-500', +}; +--- + +
svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr]', + 'has-[>svg]:gap-x-3 gap-y-0.5 items-start', + '[&>svg]:size-4 [&>svg]:translate-y-0.5', + styles[type] +]}> + + {title && ( +
+ {title} +
+ )} +
p]:m-0', + styles[type] + ]}> + +
+
diff --git a/src/components/Param.astro b/src/components/Param.astro new file mode 100644 index 0000000..9cdba7d --- /dev/null +++ b/src/components/Param.astro @@ -0,0 +1,50 @@ +--- +/** + * Pure Astro Param component - no JavaScript shipped to client + */ +type ParamType = 'string' | 'integer' | 'boolean' | 'object' | 'array' | 'number'; + +interface Props { + name: string; + type: ParamType; + required?: boolean; + default?: string; + description: string; +} + +const { name, type, required, default: defaultValue, description } = Astro.props; + +const typeStyles: Record = { + string: 'bg-violet-500/10 text-violet-400', + integer: 'bg-blue-500/10 text-blue-400', + number: 'bg-blue-500/10 text-blue-400', + boolean: 'bg-amber-500/10 text-amber-400', + object: 'bg-emerald-500/10 text-emerald-400', + array: 'bg-pink-500/10 text-pink-400', +}; +--- + +
+
+ + {name} + + + {type} + + {required && ( + + required + + )} + {defaultValue && ( + + default: {defaultValue} + + )} +
+

{description}

+
+ +
+
diff --git a/src/components/ParamTable.astro b/src/components/ParamTable.astro new file mode 100644 index 0000000..f594e6c --- /dev/null +++ b/src/components/ParamTable.astro @@ -0,0 +1,16 @@ +--- +/** + * Pure Astro ParamTable component - no JavaScript shipped to client + */ +--- + +
+
+ + Parameters + +
+
+ +
+
diff --git a/src/components/StatusBadge.astro b/src/components/StatusBadge.astro new file mode 100644 index 0000000..0154646 --- /dev/null +++ b/src/components/StatusBadge.astro @@ -0,0 +1,35 @@ +--- +/** + * Pure Astro StatusBadge component - no JavaScript shipped to client + */ +interface Props { + code: number; + label?: string; +} + +const { code, label } = Astro.props; + +function getStatusColor(code: number): string { + if (code >= 200 && code < 300) { + return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'; + } + if (code >= 300 && code < 400) { + return 'bg-blue-500/10 text-blue-400 border-blue-500/20'; + } + if (code >= 400 && code < 500) { + return 'bg-amber-500/10 text-amber-400 border-amber-500/20'; + } + if (code >= 500) { + return 'bg-red-500/10 text-red-400 border-red-500/20'; + } + return 'bg-[var(--sl-color-bg-sidebar)] text-[var(--sl-color-gray-2)] border-[var(--sl-color-hairline)]'; +} +--- + + + {code} + {label && {label}} + diff --git a/src/components/StatusCodes.astro b/src/components/StatusCodes.astro new file mode 100644 index 0000000..5812f6d --- /dev/null +++ b/src/components/StatusCodes.astro @@ -0,0 +1,56 @@ +--- +/** + * Pure Astro StatusCodes component - no JavaScript shipped to client + */ +interface StatusCode { + code: number; + label: string; + description?: string; +} + +interface Props { + codes: StatusCode[]; + columns?: 2 | 3 | 4; +} + +const { codes, columns = 2 } = Astro.props; + +function getStatusColor(code: number): string { + if (code >= 200 && code < 300) { + return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'; + } + if (code >= 300 && code < 400) { + return 'bg-blue-500/10 text-blue-400 border-blue-500/20'; + } + if (code >= 400 && code < 500) { + return 'bg-amber-500/10 text-amber-400 border-amber-500/20'; + } + if (code >= 500) { + return 'bg-red-500/10 text-red-400 border-red-500/20'; + } + return 'bg-[var(--sl-color-bg-sidebar)] text-[var(--sl-color-gray-2)] border-[var(--sl-color-hairline)]'; +} + +const gridCols = { + 2: 'grid-cols-1 sm:grid-cols-2', + 3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3', + 4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4', +}; +--- + +
+
+ {codes.map(({ code, label, description }) => ( +
+ {code} + {label} +
+ ))} +
+
diff --git a/src/components/PixelBlast.tsx b/src/components/react/PixelBlast.tsx similarity index 100% rename from src/components/PixelBlast.tsx rename to src/components/react/PixelBlast.tsx diff --git a/src/components/react/SearchDialog.tsx b/src/components/react/SearchDialog.tsx index 8bf12cb..cd05eec 100644 --- a/src/components/react/SearchDialog.tsx +++ b/src/components/react/SearchDialog.tsx @@ -2,10 +2,10 @@ import { motion } from 'motion/react'; import type React from 'react'; import { useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; -import StarBorder from '@/components/StarBorder'; import { Kbd, KbdGroup } from '@/components/ui/kbd'; import { Spinner } from '@/components/ui/spinner'; import { cn } from '@/lib/utils'; +import { StarBorder } from '.'; import { AnimatedItem } from './AnimatedList'; // Types for Pagefind diff --git a/src/components/StarBorder.tsx b/src/components/react/StarBorder.tsx similarity index 100% rename from src/components/StarBorder.tsx rename to src/components/react/StarBorder.tsx diff --git a/src/components/react/index.ts b/src/components/react/index.ts index 9ae70bb..93de22e 100644 --- a/src/components/react/index.ts +++ b/src/components/react/index.ts @@ -15,8 +15,10 @@ export { CopyPageButton } from './CopyPageButton'; export { DotPattern } from './DotPattern'; export { LifecycleDiagram } from './LifecycleDiagram'; export { Param, ParamInline, ParamTable } from './ParamTable'; +export { default as PixelBlast } from './PixelBlast'; export { PricingRates } from './PricingRates'; export { SearchDialog } from './SearchDialog'; export { SearchDialogWrapper } from './SearchDialogWrapper'; +export { default as StarBorder } from './StarBorder'; export { StatusBadge, StatusCodes } from './StatusCodes'; export { ThemeSwitcher } from './ThemeSwitcher'; diff --git a/src/content/docs/api/rest.mdx b/src/content/docs/api/rest.mdx index ba6fbb0..5a5aa8c 100644 --- a/src/content/docs/api/rest.mdx +++ b/src/content/docs/api/rest.mdx @@ -4,7 +4,12 @@ description: HTTP API for managing Sprites programmatically --- import APIEndpoint from '@/components/APIEndpoint.astro'; -import { Callout, ParamTable, Param, StatusCodes, StatusBadge, APIBody } from '@/components/react'; +import { APIBody } from '@/components/react'; +import Callout from '@/components/Callout.astro'; +import ParamTable from '@/components/ParamTable.astro'; +import Param from '@/components/Param.astro'; +import StatusCodes from '@/components/StatusCodes.astro'; +import StatusBadge from '@/components/StatusBadge.astro'; The Sprites REST API allows you to manage Sprites programmatically via HTTP requests. diff --git a/src/content/docs/cli/commands.mdx b/src/content/docs/cli/commands.mdx index ddd2106..70153ad 100644 --- a/src/content/docs/cli/commands.mdx +++ b/src/content/docs/cli/commands.mdx @@ -3,7 +3,7 @@ title: CLI Commands Reference description: Complete reference for all Sprites CLI commands --- -import { Callout } from '@/components/react'; +import Callout from '@/components/Callout.astro'; Complete reference for all `sprite` CLI commands. diff --git a/src/content/docs/cli/installation.mdx b/src/content/docs/cli/installation.mdx index 6d69d51..7fc80c9 100644 --- a/src/content/docs/cli/installation.mdx +++ b/src/content/docs/cli/installation.mdx @@ -3,7 +3,7 @@ title: CLI Installation description: Install the Sprites CLI on macOS, Linux, or Windows --- -import { Callout } from '@/components/react'; +import Callout from '@/components/Callout.astro'; The Sprites CLI (`sprite`) is available for macOS, Linux, and Windows. diff --git a/src/content/docs/concepts/lifecycle.mdx b/src/content/docs/concepts/lifecycle.mdx index d16ca89..57b0ee7 100644 --- a/src/content/docs/concepts/lifecycle.mdx +++ b/src/content/docs/concepts/lifecycle.mdx @@ -4,7 +4,7 @@ description: Understanding Sprite hibernation, persistence, and state management --- import LifecycleDiagram from '@/components/LifecycleDiagram.astro'; -import { Callout } from '@/components/react'; +import Callout from '@/components/Callout.astro'; Sprites are persistent, stateful environments that maintain their filesystem and state between runs. This page covers how Sprites manage their lifecycle, including hibernation, persistence, and resource allocation. diff --git a/src/content/docs/quickstart.mdx b/src/content/docs/quickstart.mdx index c4fe7dc..c41d623 100644 --- a/src/content/docs/quickstart.mdx +++ b/src/content/docs/quickstart.mdx @@ -4,7 +4,7 @@ description: Get up and running with Sprites in 5 minutes --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import { Callout } from '@/components/react'; +import Callout from '@/components/Callout.astro'; This guide shows you how to install the CLI, create your first Sprite, and start running commands. By the end, you'll have a working environment that sticks around between runs, serves traffic over HTTP, and wakes up automatically when you need it. diff --git a/src/content/docs/working-with-sprites.mdx b/src/content/docs/working-with-sprites.mdx index c64a1a5..d2f2f35 100644 --- a/src/content/docs/working-with-sprites.mdx +++ b/src/content/docs/working-with-sprites.mdx @@ -4,7 +4,7 @@ description: Beyond the basics, sessions, ports, persistence, checkpoints --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import { Callout } from '@/components/react'; +import Callout from '@/components/Callout.astro'; After you've made it through the Quickstart, you've got a working Sprite and a sense of how to use it. This page covers what comes next: how Sprites behave over time, how to run persistent processes, how networking works, and how to shape the environment to fit your stack. Use it as a reference as you start building more with Sprites. diff --git a/src/pages/404.astro b/src/pages/404.astro index 93a5a60..3e5f302 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,6 +1,5 @@ --- -import PixelBlast from '@components/PixelBlast'; -import SearchDialogWrapper from '@components/react/SearchDialogWrapper'; +import { PixelBlast, SearchDialogWrapper } from '@components/react'; import '@/styles/custom.css'; ---