Refactor home demos

Author: pomber

web/app/demo.js

@@ -0,0 +1,24 @@
+import { NewDemo } from "./new-demo"
+
+const sourceCode = `
+import { Code } from "bright"
+
+export default function Page() {
+  return (
+    <Code lang="py">print("hello brightness")</Code>
+  )
+}
+`.trim()
+
+export default function Demo() {
+  return (
+    <NewDemo
+      filename="app/page.js"
+      sourceProps={{ children: sourceCode, lang: "jsx" }}
+      demoProps={{
+        lang: "py",
+        code: `print("hello brightness")`,
+      }}
+    />
+  )
+}

web/app/demo/client-demo.js

@@ -0,0 +1,37 @@
+import { NewDemo } from "./new-demo"
+
+const sourceCode = `
+import { Code } from "bright"
+
+// focus(1:6)
+// you can make your own theme
+// or extend any VS Code theme
+// link[9:42] https://themes.codehike.org/editor
+// with https://themes.codehike.org/editor
+import myTheme from "./my-theme.json"
+
+Code.theme = myTheme
+
+const myCode = \`
+theFuture, bright = 10, 10
+print(theFuture is bright)
+\`.trim()
+
+export default function Page() {
+  return (
+    <Code lang="py">{myCode}</Code>
+  )
+}
+`.trim()
+
+export default function Demo() {
+  return (
+    <>
+      <div style={{ height: "1rem" }} />
+      <NewDemo
+        filename="app/page.js"
+        sourceProps={{ children: sourceCode, lang: "jsx" }}
+      />
+    </>
+  )
+}

web/app/demo/page.mdx

@@ -28,11 +28,6 @@ export function useMDXComponents(components) {
 }
 `.trim()
 
-const demoCode = `
-# title monthy.py
-print("the bright side of life")
-`.trim()
-
 const demoProps = {
   extensions: [tabs, fileIcons, focus],
   // theme: "github-light",
@@ -92,10 +87,7 @@ export default function Demo() {
       <div style={{ height: "1rem" }} />
       <NewDemo
         filename="mdx-components.js"
-        sourceProps={{
-          children: sourceCode,
-          lang: "jsx",
-        }}
+        sourceProps={{ children: sourceCode, lang: "jsx" }}
         demoProps={demoProps}
       />
     </>

web/app/demos/code.tsx

@@ -0,0 +1,88 @@
+import { NewDemo } from "./new-demo"
+import { Code } from "bright"
+
+const sourceCode = `
+import { Code } from "bright"
+
+const myCode = \`
+theFuture, bright = 10, 10
+print(theFuture is bright)
+\`.trim()
+
+// focus(1:7)
+Code.theme = {
+  dark: "github-dark",
+  light: "github-light",
+  // using a different CSS selector:
+  // lightSelector: '[data-theme="light"]',
+  // lightSelector: 'html.light',
+}
+
+// focus(4,6,7,9)
+export default function Page() {
+  return (
+    <>
+      <div data-theme="dark">
+        <Code lang="py">{myCode}</Code>
+      </div>
+      <div data-theme="light">
+        <Code lang="py">{myCode}</Code>
+      </div>
+    </>
+  )
+}
+`.trim()
+
+const preview = (
+  <>
+    <div>
+      {/* @ts-expect-error Server Component */}
+      <Code
+        lang="py"
+        theme={{
+          dark: "github-dark",
+          light: "github-light",
+        }}
+        style={{
+          fontSize: "1.2rem",
+          margin: "-2rem auto 0",
+          position: "relative",
+          border: "1px solid #444",
+          width: "80%",
+        }}
+      >{`theFuture, bright = 10, 10
+print(theFuture is bright)`}</Code>
+    </div>
+    <div data-theme="light">
+      {/* @ts-expect-error Server Component */}
+      <Code
+        lang="py"
+        theme={{
+          dark: "github-dark",
+          light: "github-light",
+        }}
+        style={{
+          fontSize: "1.2rem",
+          margin: "0.5rem auto 0",
+          position: "relative",
+          border: "1px solid #444",
+          width: "80%",
+        }}
+      >{`theFuture, bright = 10, 10
+print(theFuture is bright)`}</Code>
+    </div>
+  </>
+)
+
+export default function Demo() {
+  return (
+    <>
+      <div style={{ height: "1rem" }} />
+      <NewDemo
+        filename="app/page.js"
+        sourceProps={{ children: sourceCode, lang: "jsx" }}
+        preview={preview}
+      />
+    </>
+  )
+}