feat: cdn example (#197)

o-az · web-flow · commit 3054ca6c79fd · 2024-04-20T15:26:00.000-06:00
diff --git a/examples/cdn/index.html b/examples/cdn/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Rehype Pretty Code</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>code,pre{padding:16px 20px;line-height:1.5}::selection{color:#ffcffd;background-color:#000}</style>
+</head>
+
+<body style="display: flex; height: 100vh; align-items: center; justify-content: center; background-color: #ffe8fa;">
+
+  <section style="font-size:1.75rem;" id="code"></section>
+
+  <script type="module">
+    import { unified } from 'https://esm.run/unified'
+    import remarkParse from 'https://esm.run/remark-parse'
+    import remarkRehype from 'https://esm.run/remark-rehype'
+    import rehypeStringify from 'https://esm.run/rehype-stringify'
+    import rehypePrettyCode from 'https://esm.run/rehype-pretty-code'
+
+    const codeElement = document.querySelector('section#code')
+
+    const codeSnippet = /* ts */ `ts
+export function* fibbonaciSequence() {
+  let [a, b] = [0, 1];
+  while (true) {
+    yield a;
+    [a, b] = [b, a + b];
+  }
+}
+
+const fib = fibbonaciSequence();
+fib.next().value // 0
+fib.next().value // 1
+// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34
+`
+
+    const processor = await unified()
+      .use(remarkParse)
+      .use(remarkRehype)
+      .use(rehypePrettyCode, { theme: 'rose-pine' })
+      .use(rehypeStringify)
+      .process("```" + codeSnippet)
+
+    if (codeElement) codeElement.innerHTML = processor.toString()
+  </script>
+</body>
+
+</html>
diff --git a/examples/cdn/package.json b/examples/cdn/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "example-cdn",
+  "scripts": {
+    "dev": "pnpm dlx serve@latest .",
+    "start": "pnpm dlx serve@latest ."
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
