From ac67ae1c2858d8ba3396bdcce1ca11a5ffb47ec2 Mon Sep 17 00:00:00 2001 From: Kyle McLaren Date: Tue, 30 Dec 2025 00:04:43 +0200 Subject: [PATCH 1/3] Consolidate React components and add Astro wrappers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move PixelBlast.tsx and StarBorder.tsx from src/components/ to src/components/react/ - Add Astro wrappers for all React components that were missing them: - APIBody, AnimatedList, Callout, DotPattern, Param, ParamTable, Snippet, StatusBadge, StatusCodes - Update all MDX files to import from Astro wrappers instead of @/components/react - Update 404.astro and SearchDialog.tsx imports This ensures consistent component organization: - All React components live in src/components/react/ - All components used in MDX have Astro wrappers in src/components/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/components/APIBody.astro | 11 +++++++++++ src/components/AnimatedList.astro | 17 +++++++++++++++++ src/components/Callout.astro | 12 ++++++++++++ src/components/DotPattern.astro | 19 +++++++++++++++++++ src/components/Param.astro | 15 +++++++++++++++ src/components/ParamTable.astro | 7 +++++++ src/components/Snippet.astro | 11 +++++++++++ src/components/StatusBadge.astro | 12 ++++++++++++ src/components/StatusCodes.astro | 18 ++++++++++++++++++ src/components/{ => react}/PixelBlast.tsx | 0 src/components/react/SearchDialog.tsx | 2 +- src/components/{ => react}/StarBorder.tsx | 0 src/components/react/index.ts | 2 ++ src/content/docs/api/rest.mdx | 7 ++++++- src/content/docs/cli/commands.mdx | 2 +- src/content/docs/cli/installation.mdx | 2 +- src/content/docs/concepts/checkpoints.mdx | 2 +- src/content/docs/concepts/lifecycle.mdx | 2 +- src/content/docs/concepts/networking.mdx | 2 +- src/content/docs/quickstart.mdx | 2 +- src/content/docs/sprites.mdx | 2 +- src/content/docs/working-with-sprites.mdx | 2 +- src/pages/404.astro | 3 +-- 23 files changed, 140 insertions(+), 12 deletions(-) create mode 100644 src/components/APIBody.astro create mode 100644 src/components/AnimatedList.astro create mode 100644 src/components/Callout.astro create mode 100644 src/components/DotPattern.astro create mode 100644 src/components/Param.astro create mode 100644 src/components/ParamTable.astro create mode 100644 src/components/Snippet.astro create mode 100644 src/components/StatusBadge.astro create mode 100644 src/components/StatusCodes.astro rename src/components/{ => react}/PixelBlast.tsx (100%) rename src/components/{ => react}/StarBorder.tsx (100%) diff --git a/src/components/APIBody.astro b/src/components/APIBody.astro new file mode 100644 index 0000000..1c14b04 --- /dev/null +++ b/src/components/APIBody.astro @@ -0,0 +1,11 @@ +--- +import { APIBody as APIBodyReact } from './react/APIEndpoint'; + +interface Props { + title: string; +} + +const props = Astro.props; +--- + + diff --git a/src/components/AnimatedList.astro b/src/components/AnimatedList.astro new file mode 100644 index 0000000..60221f5 --- /dev/null +++ b/src/components/AnimatedList.astro @@ -0,0 +1,17 @@ +--- +import { AnimatedList as AnimatedListReact } from './react/AnimatedList'; + +interface Props { + items: (string | { id: string; content: unknown })[]; + showGradients?: boolean; + enableArrowNavigation?: boolean; + className?: string; + itemClassName?: string; + displayScrollbar?: boolean; + initialSelectedIndex?: number; +} + +const props = Astro.props; +--- + + diff --git a/src/components/Callout.astro b/src/components/Callout.astro new file mode 100644 index 0000000..505be05 --- /dev/null +++ b/src/components/Callout.astro @@ -0,0 +1,12 @@ +--- +import { Callout as CalloutReact } from './react/Callout'; + +interface Props { + type?: 'info' | 'warning' | 'danger' | 'tip'; + title?: string; +} + +const props = Astro.props; +--- + + diff --git a/src/components/DotPattern.astro b/src/components/DotPattern.astro new file mode 100644 index 0000000..a7d117a --- /dev/null +++ b/src/components/DotPattern.astro @@ -0,0 +1,19 @@ +--- +import { DotPattern as DotPatternReact } from './react/DotPattern'; + +interface Props { + width?: number; + height?: number; + x?: number; + y?: number; + cx?: number; + cy?: number; + cr?: number; + className?: string; + glow?: boolean; +} + +const props = Astro.props; +--- + + diff --git a/src/components/Param.astro b/src/components/Param.astro new file mode 100644 index 0000000..db758b2 --- /dev/null +++ b/src/components/Param.astro @@ -0,0 +1,15 @@ +--- +import { Param as ParamReact } from './react/ParamTable'; + +interface Props { + name: string; + type: 'string' | 'integer' | 'boolean' | 'object' | 'array' | 'number'; + required?: boolean; + default?: string; + description: string; +} + +const props = Astro.props; +--- + + diff --git a/src/components/ParamTable.astro b/src/components/ParamTable.astro new file mode 100644 index 0000000..296cac9 --- /dev/null +++ b/src/components/ParamTable.astro @@ -0,0 +1,7 @@ +--- +import { ParamTable as ParamTableReact } from './react/ParamTable'; + +const props = Astro.props; +--- + + diff --git a/src/components/Snippet.astro b/src/components/Snippet.astro new file mode 100644 index 0000000..e0a8918 --- /dev/null +++ b/src/components/Snippet.astro @@ -0,0 +1,11 @@ +--- +import { Snippet as SnippetReact } from './react/CodeTabs'; + +interface Props { + name: string; +} + +const props = Astro.props; +--- + + diff --git a/src/components/StatusBadge.astro b/src/components/StatusBadge.astro new file mode 100644 index 0000000..3153816 --- /dev/null +++ b/src/components/StatusBadge.astro @@ -0,0 +1,12 @@ +--- +import { StatusBadge as StatusBadgeReact } from './react/StatusCodes'; + +interface Props { + code: number; + label?: string; +} + +const props = Astro.props; +--- + + diff --git a/src/components/StatusCodes.astro b/src/components/StatusCodes.astro new file mode 100644 index 0000000..22533cd --- /dev/null +++ b/src/components/StatusCodes.astro @@ -0,0 +1,18 @@ +--- +import { StatusCodes as StatusCodesReact } from './react/StatusCodes'; + +interface StatusCode { + code: number; + label: string; + description?: string; +} + +interface Props { + codes: StatusCode[]; + columns?: 2 | 3 | 4; +} + +const props = Astro.props; +--- + + 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..4d7fcc2 100644 --- a/src/components/react/SearchDialog.tsx +++ b/src/components/react/SearchDialog.tsx @@ -2,7 +2,7 @@ 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 { StarBorder } from '.'; import { Kbd, KbdGroup } from '@/components/ui/kbd'; import { Spinner } from '@/components/ui/spinner'; import { cn } from '@/lib/utils'; 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..3fc8ea2 100644 --- a/src/components/react/index.ts +++ b/src/components/react/index.ts @@ -20,3 +20,5 @@ export { SearchDialog } from './SearchDialog'; export { SearchDialogWrapper } from './SearchDialogWrapper'; export { StatusBadge, StatusCodes } from './StatusCodes'; export { ThemeSwitcher } from './ThemeSwitcher'; +export { default as PixelBlast } from './PixelBlast'; +export { default as StarBorder } from './StarBorder'; diff --git a/src/content/docs/api/rest.mdx b/src/content/docs/api/rest.mdx index ba6fbb0..fce0df6 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/APIBody.astro'; +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/checkpoints.mdx b/src/content/docs/concepts/checkpoints.mdx index e9f9ac2..713db9c 100644 --- a/src/content/docs/concepts/checkpoints.mdx +++ b/src/content/docs/concepts/checkpoints.mdx @@ -4,7 +4,7 @@ description: Save and restore Sprite state with checkpoints --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import { Snippet } from '@/components/react'; +import Snippet from '@/components/Snippet.astro'; Checkpoints allow you to save the complete state of a Sprite and restore it later. This is useful for creating clean states, recovering from errors, or sharing environment configurations. 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/concepts/networking.mdx b/src/content/docs/concepts/networking.mdx index 868d577..ee10272 100644 --- a/src/content/docs/concepts/networking.mdx +++ b/src/content/docs/concepts/networking.mdx @@ -4,7 +4,7 @@ description: HTTP access, URLs, port forwarding, and network configuration --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import { Snippet } from '@/components/react'; +import Snippet from '@/components/Snippet.astro'; Every Sprite has built-in networking capabilities including a unique HTTP URL and port forwarding. This page covers how to access your Sprites over the network. 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/sprites.mdx b/src/content/docs/sprites.mdx index 6022e9f..6d0ef23 100644 --- a/src/content/docs/sprites.mdx +++ b/src/content/docs/sprites.mdx @@ -4,7 +4,7 @@ description: Create and manage persistent execution environments programmaticall --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import { Snippet } from '@/components/react'; +import Snippet from '@/components/Snippet.astro'; Sprites provides a direct interface for defining containers at runtime and securely running arbitrary code inside them. 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'; --- From 67a1c3de477e37a36e2b5cfc6d07c248b7aae1d3 Mon Sep 17 00:00:00 2001 From: Kyle McLaren Date: Tue, 30 Dec 2025 00:19:13 +0200 Subject: [PATCH 2/3] Convert presentational components to pure Astro (zero JS) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Instead of wrapping React components with client:load, convert purely presentational components to native Astro: - Callout, Param, ParamTable, StatusCodes, StatusBadge → pure Astro - Delete unnecessary wrappers (AnimatedList, DotPattern, APIBody, Snippet) - APIBody/Snippet stay as React imports (used by parent React components) This ships zero JavaScript for static UI components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/components/APIBody.astro | 11 ----- src/components/AnimatedList.astro | 17 -------- src/components/Callout.astro | 49 +++++++++++++++++++++-- src/components/DotPattern.astro | 19 --------- src/components/Param.astro | 43 ++++++++++++++++++-- src/components/ParamTable.astro | 17 ++++++-- src/components/Snippet.astro | 11 ----- src/components/StatusBadge.astro | 31 ++++++++++++-- src/components/StatusCodes.astro | 46 +++++++++++++++++++-- src/content/docs/api/rest.mdx | 2 +- src/content/docs/concepts/checkpoints.mdx | 2 +- src/content/docs/concepts/networking.mdx | 2 +- src/content/docs/sprites.mdx | 2 +- 13 files changed, 170 insertions(+), 82 deletions(-) delete mode 100644 src/components/APIBody.astro delete mode 100644 src/components/AnimatedList.astro delete mode 100644 src/components/DotPattern.astro delete mode 100644 src/components/Snippet.astro diff --git a/src/components/APIBody.astro b/src/components/APIBody.astro deleted file mode 100644 index 1c14b04..0000000 --- a/src/components/APIBody.astro +++ /dev/null @@ -1,11 +0,0 @@ ---- -import { APIBody as APIBodyReact } from './react/APIEndpoint'; - -interface Props { - title: string; -} - -const props = Astro.props; ---- - - diff --git a/src/components/AnimatedList.astro b/src/components/AnimatedList.astro deleted file mode 100644 index 60221f5..0000000 --- a/src/components/AnimatedList.astro +++ /dev/null @@ -1,17 +0,0 @@ ---- -import { AnimatedList as AnimatedListReact } from './react/AnimatedList'; - -interface Props { - items: (string | { id: string; content: unknown })[]; - showGradients?: boolean; - enableArrowNavigation?: boolean; - className?: string; - itemClassName?: string; - displayScrollbar?: boolean; - initialSelectedIndex?: number; -} - -const props = Astro.props; ---- - - diff --git a/src/components/Callout.astro b/src/components/Callout.astro index 505be05..bf511b6 100644 --- a/src/components/Callout.astro +++ b/src/components/Callout.astro @@ -1,12 +1,53 @@ --- -import { Callout as CalloutReact } from './react/Callout'; - +/** + * Pure Astro Callout component - no JavaScript shipped to client + */ interface Props { type?: 'info' | 'warning' | 'danger' | 'tip'; title?: string; } -const props = Astro.props; +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/DotPattern.astro b/src/components/DotPattern.astro deleted file mode 100644 index a7d117a..0000000 --- a/src/components/DotPattern.astro +++ /dev/null @@ -1,19 +0,0 @@ ---- -import { DotPattern as DotPatternReact } from './react/DotPattern'; - -interface Props { - width?: number; - height?: number; - x?: number; - y?: number; - cx?: number; - cy?: number; - cr?: number; - className?: string; - glow?: boolean; -} - -const props = Astro.props; ---- - - diff --git a/src/components/Param.astro b/src/components/Param.astro index db758b2..9cdba7d 100644 --- a/src/components/Param.astro +++ b/src/components/Param.astro @@ -1,15 +1,50 @@ --- -import { Param as ParamReact } from './react/ParamTable'; +/** + * Pure Astro Param component - no JavaScript shipped to client + */ +type ParamType = 'string' | 'integer' | 'boolean' | 'object' | 'array' | 'number'; interface Props { name: string; - type: 'string' | 'integer' | 'boolean' | 'object' | 'array' | 'number'; + type: ParamType; required?: boolean; default?: string; description: string; } -const props = Astro.props; +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 index 296cac9..f594e6c 100644 --- a/src/components/ParamTable.astro +++ b/src/components/ParamTable.astro @@ -1,7 +1,16 @@ --- -import { ParamTable as ParamTableReact } from './react/ParamTable'; - -const props = Astro.props; +/** + * Pure Astro ParamTable component - no JavaScript shipped to client + */ --- - +
+
+ + Parameters + +
+
+ +
+
diff --git a/src/components/Snippet.astro b/src/components/Snippet.astro deleted file mode 100644 index e0a8918..0000000 --- a/src/components/Snippet.astro +++ /dev/null @@ -1,11 +0,0 @@ ---- -import { Snippet as SnippetReact } from './react/CodeTabs'; - -interface Props { - name: string; -} - -const props = Astro.props; ---- - - diff --git a/src/components/StatusBadge.astro b/src/components/StatusBadge.astro index 3153816..0154646 100644 --- a/src/components/StatusBadge.astro +++ b/src/components/StatusBadge.astro @@ -1,12 +1,35 @@ --- -import { StatusBadge as StatusBadgeReact } from './react/StatusCodes'; - +/** + * Pure Astro StatusBadge component - no JavaScript shipped to client + */ interface Props { code: number; label?: string; } -const props = Astro.props; +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 index 22533cd..5812f6d 100644 --- a/src/components/StatusCodes.astro +++ b/src/components/StatusCodes.astro @@ -1,6 +1,7 @@ --- -import { StatusCodes as StatusCodesReact } from './react/StatusCodes'; - +/** + * Pure Astro StatusCodes component - no JavaScript shipped to client + */ interface StatusCode { code: number; label: string; @@ -12,7 +13,44 @@ interface Props { columns?: 2 | 3 | 4; } -const props = Astro.props; +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/content/docs/api/rest.mdx b/src/content/docs/api/rest.mdx index fce0df6..5a5aa8c 100644 --- a/src/content/docs/api/rest.mdx +++ b/src/content/docs/api/rest.mdx @@ -4,7 +4,7 @@ description: HTTP API for managing Sprites programmatically --- import APIEndpoint from '@/components/APIEndpoint.astro'; -import APIBody from '@/components/APIBody.astro'; +import { APIBody } from '@/components/react'; import Callout from '@/components/Callout.astro'; import ParamTable from '@/components/ParamTable.astro'; import Param from '@/components/Param.astro'; diff --git a/src/content/docs/concepts/checkpoints.mdx b/src/content/docs/concepts/checkpoints.mdx index 713db9c..e9f9ac2 100644 --- a/src/content/docs/concepts/checkpoints.mdx +++ b/src/content/docs/concepts/checkpoints.mdx @@ -4,7 +4,7 @@ description: Save and restore Sprite state with checkpoints --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import Snippet from '@/components/Snippet.astro'; +import { Snippet } from '@/components/react'; Checkpoints allow you to save the complete state of a Sprite and restore it later. This is useful for creating clean states, recovering from errors, or sharing environment configurations. diff --git a/src/content/docs/concepts/networking.mdx b/src/content/docs/concepts/networking.mdx index ee10272..868d577 100644 --- a/src/content/docs/concepts/networking.mdx +++ b/src/content/docs/concepts/networking.mdx @@ -4,7 +4,7 @@ description: HTTP access, URLs, port forwarding, and network configuration --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import Snippet from '@/components/Snippet.astro'; +import { Snippet } from '@/components/react'; Every Sprite has built-in networking capabilities including a unique HTTP URL and port forwarding. This page covers how to access your Sprites over the network. diff --git a/src/content/docs/sprites.mdx b/src/content/docs/sprites.mdx index 6d0ef23..6022e9f 100644 --- a/src/content/docs/sprites.mdx +++ b/src/content/docs/sprites.mdx @@ -4,7 +4,7 @@ description: Create and manage persistent execution environments programmaticall --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import Snippet from '@/components/Snippet.astro'; +import { Snippet } from '@/components/react'; Sprites provides a direct interface for defining containers at runtime and securely running arbitrary code inside them. From de96582cc28df43288654b5de8d6bd6f0a13c374 Mon Sep 17 00:00:00 2001 From: Kyle McLaren Date: Tue, 30 Dec 2025 00:28:22 +0200 Subject: [PATCH 3/3] Fix import sorting (lint) --- src/components/react/SearchDialog.tsx | 2 +- src/components/react/index.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/react/SearchDialog.tsx b/src/components/react/SearchDialog.tsx index 4d7fcc2..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 '.'; 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/react/index.ts b/src/components/react/index.ts index 3fc8ea2..93de22e 100644 --- a/src/components/react/index.ts +++ b/src/components/react/index.ts @@ -15,10 +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'; -export { default as PixelBlast } from './PixelBlast'; -export { default as StarBorder } from './StarBorder';