✨ web/for-classes

Author: wappon28dev

.cspell.json

@@ -29,6 +29,7 @@
     "pandacss",
     "partytown",
     "rgba",
+    "Sandpack",
     "syscat",
     "Syscat",
     "sysken",

astro.config.mjs

@@ -95,7 +95,7 @@ export default defineConfig({
           // },
           {
             label: "Web",
-            link: "/textbook/web/for-classes",
+            link: "/textbook/web/for-classes/html-structure-basic",
             icon: "document",
             items: [
               {
@@ -134,6 +134,7 @@ export default defineConfig({
     remarkPlugins: [
       [remarkMermaid, { themes: ["dark", "neutral"] }],
       [wikiLinkPlugin, { markdownFolder: "src/content/docs" }],
+      // @ts-expect-error
       remarkSandpack,
     ],
     rehypePlugins: [

bun.lockb

@@ -20,6 +20,7 @@
     "@astrojs/partytown": "^2.1.4",
     "@astrojs/react": "^4.3.0",
     "@astrojs/starlight": "^0.34.4",
+    "@codesandbox/sandpack-react": "^2.20.0",
     "@fontsource-variable/inter": "^5.2.6",
     "@fontsource-variable/noto-sans-jp": "^5.2.6",
     "@iconify-json/material-symbols": "^1.2.28",
@@ -40,6 +41,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rehype-external-links": "^3.0.0",
+    "remark-sandpack": "^0.0.5",
     "remark-wiki-link-plus": "^1.1.1",
     "starlight-scroll-to-top": "^0.1.1",
     "starlight-sidebar-topics": "^0.6.0"

package.json

@@ -0,0 +1,51 @@
+---
+import type { ComponentProps } from "react";
+import { Code } from "@astrojs/starlight/components";
+import { Sandpack as Sandpack_ } from "@codesandbox/sandpack-react";
+
+type Props = ComponentProps<typeof Sandpack_>;
+
+const props = Astro.props;
+---
+
+<style>
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.sandpack {
+  opacity: 0;
+  animation: fade-in 300ms ease-in-out forwards;
+  animation-delay: 2000ms;
+}
+</style>
+
+<div class="not-content sandpack">
+  <Fragment client:visible>
+    <Sandpack_
+      client:only="react"
+      options={{
+        showInlineErrors: true,
+        editorHeight: 500,
+        ...props.options
+      }}
+      template="static"
+      theme="light"
+      {...props}
+    >
+
+    <slot />
+
+  </Sandpack_>
+  </Fragment>
+</div>
+
+<div style="display: none;">
+  <Code code="a" />
+</div>
+