docs: polish examples

Author: huozhi

.github/workflows/ci.yml

@@ -63,10 +63,10 @@ jobs:
         if: steps.determine_tag.outputs.tag != ''
         run: |
           echo "Publishing to ${{ steps.determine_tag.outputs.tag }} tag"
-          pnpm publish --tag ${{ steps.determine_tag.outputs.tag }}
+          pnpm publish --tag ${{ steps.determine_tag.outputs.tag }} --no-git-check
 
       - name: Publish to latest
         if: steps.determine_tag.outputs.tag == ''
         run: |
           echo "Publishing to latest"
-          pnpm publish
+          pnpm publish --no-git-check

package.json

@@ -31,12 +31,11 @@
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "bunchee": "^6.3.2",
-    "codice": "^0.5.0",
+    "codice": "1.0.0-beta.3",
     "devjar": "link:./",
     "next": "^15.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sugar-high": "^0.8.2",
     "typescript": "^5.7.3"
   },
   "packageManager": "[email protected]"

pnpm-lock.yaml

@@ -1,14 +1,6 @@
-'use client'
+import { Codesandbox } from '../ui/codesandbox'
 
-import { useState } from 'react'
-import { Editor } from 'codice'
-import { DevJar } from 'devjar'
-import { highlight } from 'sugar-high'
-import FileTab from '../ui/file-tab'
-
-const CDN_HOST = 'https://esm.sh'
-
-const defaultFiles = {
+const codeSample4 = {
   'index.js': `\
   import { useState } from 'react'
 
@@ -67,63 +59,97 @@ const defaultFiles = {
   `,
 }
 
-export default function Page() {
-  const [activeFile, setActiveFile] = useState('index.js')
-  const [files, setFiles] = useState(defaultFiles)
-  const [error, setError] = useState(null)
+
+const codeSample2 = {
+  'index.js': `\
+import React, { useState } from "react";
+
+function App() {
+  const [darkMode, setDarkMode] = useState(false);
 
   return (
-    <div>
+    <div
+      style={{
+        backgroundColor: darkMode ? "#333" : "#fff",
+        color: darkMode ? "#fff" : "#000",
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+      }}
+    >
+      <h1>{darkMode ? "Dark Mode" : "Light Mode"}</h1>
+      <button onClick={() => setDarkMode(!darkMode)}>
+        Toggle {darkMode ? "Light" : "Dark"} Mode
+      </button>
+    </div>
+  );
+}
+
+export default App;
+`,
+}
+
+const codeSample3 = {
+  'index.js': `\
+  import React, { useState } from "react";
+
+const quotes = [
+  "The only limit to our realization of tomorrow is our doubts of today.",
+  "The future belongs to those who believe in the beauty of their dreams.",
+  "Do not watch the clock. Do what it does. Keep going.",
+  "You miss 100% of the shots you don't take.",
+  "Life is 10% what happens to us and 90% how we react to it."
+];
+
+function App() {
+  const [quote, setQuote] = useState(quotes[0]);
+
+  const generateQuote = () => {
+    const randomIndex = Math.floor(Math.random() * quotes.length);
+    setQuote(quotes[randomIndex]);
+  };
+
+  return (
+    <div style={{ textAlign: "center", padding: "2rem" }}>
+      <h1>Random Quote</h1>
+      <p>"{quote}"</p>
+      <button onClick={generateQuote}>New Quote</button>
+    </div>
+  );
+}
+
+export default App;
+`,
+}
+
+const codeSample1 = {
+  'index.js': `\
+export default function App() {
+  return "hello world"
+}
+`,
+}
+
+export default function Page() {
+  return (
+    <main>
       <div>
         <h1>Devjar</h1>
         <p>
           A live-code runtime for React, running directly in the browser. Perfect for interactive demos, documentation,
           and real-time code previews. Simple to integrate and highly flexible for any React project.
         </p>
-        <br />
-        <div className="filetree">
-          {Object.keys(files).map((filename) => (
-            <div
-              role="button"
-              key={filename}
-              data-disabled={filename === activeFile}
-              className={'filetab filetab--' + (filename === activeFile ? 'active' : '')}
-              onClick={() => setActiveFile(filename)}
-            >
-              {filename + (filename.endsWith('.css') || filename.endsWith('.js') ? '' : '.js')}
-            </div>
-          ))}
-
-          <FileTab files={files} setFiles={setFiles} setActiveFile={setActiveFile} />
-        </div>
-        <Editor
-          highlight={highlight}
-          className="editor"
-          controls={false}
-          title={null}
-          value={files[activeFile]}
-          onChange={(code) => {
-            setFiles({
-              ...files,
-              [activeFile]: code,
-            })
-          }}
-        />
+        <br />  
       </div>
 
-      <div className="preview">
-        <DevJar
-          className="preview--result"
-          files={files}
-          onError={(err) => {
-            setError(err)
-          }}
-          getModuleUrl={(m) => {
-            return `${CDN_HOST}/${m}`
-          }}
-        />
-        {error && <pre className="preview--error" dangerouslySetInnerHTML={{ __html: error.toString() }} />}
+      <div className='codesandboxes'>
+        <Codesandbox files={codeSample1} />
+        <Codesandbox files={codeSample4} />
+        <Codesandbox files={codeSample2} />
+        <Codesandbox files={codeSample3} />
       </div>
-    </div>
+    </main>
   )
 }

site/app/page.tsx

@@ -5,11 +5,17 @@ html {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
     'Helvetica Neue', sans-serif;
+  margin: 0;
+  padding: 0;
 }
 body {
-  max-width: 600px;
-  margin: auto;
-  padding: 0 16px;
+  margin: 0;
+  padding: 0 8px;
+  max-width: 1260px;
+}
+main {
+  min-width: 600px;
+  margin: 0 auto;
 }
 :root {
   --sh-class: #6f42c1;
@@ -21,8 +27,6 @@ body {
   --sh-jsxliterals: #24292e;
   --sh-entity: #424d5b;
   --sh-property: #1d3147;
-  --codice-editor-text-color: transparent;
-  --codice-editor-background-color: transparent;
 }
 
 a, a:focus, a:visited {
@@ -32,16 +36,6 @@ a:hover {
   color: #424d5b;
 }
 
-.sh__line::before {
-  counter-increment: sh-line-number 1;
-  content: counter(sh-line-number);
-  width: 24px;
-  display: inline-block;
-  margin-right: 18px;
-  margin-left: -42px;
-  text-align: right;
-  color: #a4a4a4;
-}
 .editor {
   position: relative;
   max-height: 300px;
@@ -52,12 +46,6 @@ a:hover {
   box-shadow: 0 24px 40px 4px rgb(200 200 200 / 50%);
 }
 
-.editor[data-codice-editor] code, .editor[data-codice-editor] textarea {
-  padding: 24px 16px;
-  padding-left: 54px;
-  overflow-y: hidden;
-}
-
 pre {
   width: 100%;
 }
@@ -68,26 +56,10 @@ pre, textarea, .preview--result {
   line-height: 1.25em;
   caret-color: #333;
 }
-textarea {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  width: 100%;
-}
 textarea:focus,
 textarea:focus-visible {
   outline: none;
 }
-
-code {
-  counter-reset: sh-line-number;
-  overflow-y: auto;
-  height: 100%;
-  width: 100%;
-}
 .preview {
   position: relative;
   border-top: 1px solid rgb(229, 231, 235);
@@ -97,7 +69,6 @@ code {
   padding: 8px;
   font-size: 13px;
   color: #f47067;
-
   position: absolute;
   top: 0;
   right: 0;
@@ -160,4 +131,17 @@ code {
   background-color: #f6f6f6e0;
   cursor: pointer;
   color: #000;
+}
+
+[data-codesandbox] {
+  max-width: 600px;
+  width: 100%;
+  padding: 0 8px;
+}
+
+.codesandboxes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+  gap: 16px;
+
 }