feat: code block (#6)

README.md

@@ -1,26 +1,20 @@
 # Codice
 
-Codice is a lightweight, customizable code editor component for React applications. It provides a simple interface for users to input code with syntax highlighting.
+Codice is a slim React components suite for code editing and displaying story. It provides an editor component and a code block component with syntax highlighting.
 
 ## Installation
 
-To install the package, run the following command:
-
+```bash
 npm install codice
+```
 
 ## Usage
 
-To use the `Editor` component from the Codice package, follow these steps:
-
-1. Import the `Editor` component:
+### Editor
 
 ```tsx
 import { Editor } from 'codice'
-```
-
-2. Use the `Editor` component in your React application:
 
-```tsx
 <Editor
   title="My Code Editor"
   value="const hello = 'world';"
@@ -29,7 +23,8 @@ import { Editor } from 'codice'
 />
 ```
 
-## Props
+
+#### Props
 
 The following props are supported by the `Editor` component:
 
@@ -40,32 +35,54 @@ The following props are supported by the `Editor` component:
 
 Additionally, you can pass any other props to the `Editor` component, which will be applied to the root `div` element.
 
-## Customization
+
+### Code Block
+
+```tsx
+import { Code } from 'codice'
+
+<Code controls filename="app/index.js">
+  {'<div>Hello World</div>'}
+</Code>
+```
+
+#### Props
+
+- `controls` (optional): A boolean value indicating whether to display the controls for the code block.
+- `filename` (optional): A string representing the filename of the code block.
+
+### Styling
+
+#### CSS Variables
 
 To customize the appearance of the editor, you can modify the CSS variables used in the `styles` object in the provided code:
 
 - `--codice-editor-text-color`: The color of the editor text.
 - `--codice-editor-background-color`: The background color of the editor.
+- `--codice-editor-caret-color`: The color of the caret in the editor.
 
 For example, you can set the following CSS in your application:
 
 ```css
 :root {
   --codice-editor-text-color: #333;
   --codice-editor-background-color: #f5f5f5;
+  --codice-editor-caret-color: #d5efea;
 }
 ```
 
 This will style the editor with a light gray background, darker gray text, and even lighter gray controls.
 
-### CSS Class Names
+#### CSS Attributes
+
+You can also customize the appearance of the editor by overriding the CSS attributes of the code block:
 
 - `[data-codice-editor-controls]`: The class name for the controls in the editor.
   - `[data-codice-editor-controls-close]`: The class name for the close button.
   - `[data-codice-editor-controls-minimize]`: The class name for the minimize button.
   - `[data-codice-editor-controls-maximize]`: The class name for the maximize button.
 
 
-### License
+## License
 
 Codice is released under the MIT License. For more details, see the LICENSE file included in this repository.

site/app/code-example.tsx

@@ -0,0 +1,52 @@
+import { Code } from 'codice'
+import { highlight } from 'sugar-high'
+
+const CODE_SIMPLE_SNIPPET_HTML = highlight(`console.log("hello world")`)
+
+const CODE_ULTIMATE_SNIPPET_HTML = highlight(`\
+import { Code } from 'codice'
+
+<Code controls filename="app/index.js">
+  {'<div>Hello World</div>'}
+</Code>
+`)
+
+function CodeExampleItem({ 
+  title, 
+  children,
+}: { 
+  title: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="code-example__item">
+      <h3 className="code-example__item__title">{title}</h3>
+      {children}
+    </div>
+  )
+}
+
+export function CodeExamples() {
+  return (
+    <div className="code-example">
+      <CodeExampleItem title="Ultimate Code Block">
+        <Code className="code code--controls" controls filename="app/index.js">
+          {CODE_ULTIMATE_SNIPPET_HTML}
+        </Code>
+      </CodeExampleItem>
+
+      <CodeExampleItem title="Code Block with filename">
+        <Code className="code code--filename" filename="app/index.js">
+          {highlight(`\
+function marker() {
+  return "long live sugar-high"
+}`)}
+        </Code>
+      </CodeExampleItem>
+
+      <CodeExampleItem title="Simple Code Block">
+        <Code className="code code--simple">{CODE_SIMPLE_SNIPPET_HTML}</Code>
+      </CodeExampleItem>      
+    </div>
+  )
+}

site/app/editor-example.tsx

@@ -0,0 +1,33 @@
+import { LiveEditor } from './live-editor'
+
+const defaultCode = `\
+import { useState } from 'react'
+import { highlight } from 'sugar-high'
+import { Editor } from 'codice'
+
+const defaultText = 'console.log("hello world")'
+
+export default function Page() {
+  const [code, setCode] = useState(defaultText)
+
+  return (
+    <div>
+      <Editor
+        value={code}
+        className='editor'
+        title='index.js'
+        highlight={text => highlight(text)}
+        onChange={(text) => setCode(text)}
+      />
+    </div>
+  )
+}
+`
+
+export function EditorExample({ searchParams }) {
+  return (
+    <div>
+      <LiveEditor searchParams={searchParams} defaultCode={defaultCode} />
+    </div>
+  )
+}

site/app/layout.tsx

@@ -3,7 +3,17 @@ import './styles.css'
 export default function layout({ children }) {
   return (
     <html>
-      <body>{children}</body>
+      <body>
+        <div className='main'>
+          {children}
+          <footer>
+            <p>
+              © {new Date().getFullYear()},{` `}
+              <a href={'https://github.com/huozhi'}>Huozhi</a>
+            </p>
+          </footer>
+        </div>
+      </body>
     </html>
   )
 }

site/app/editor.tsx → site/app/live-editor.tsx

@@ -6,34 +6,12 @@ import { highlight } from 'sugar-high'
 
 const CODE_QUERY_KEY = 'c'
 
-const defaultCode = `\
-import { useState } from 'react'
-import { highlight } from 'sugar-high'
-import { Editor } from 'codice'
-
-const defaultText = 'console.log("hello world")'
-
-export default function Page() {
-  const [code, setCode] = useState(defaultText)
-
-  return (
-    <div>
-      <Editor
-        value={code}
-        className='editor'
-        title='index.js'
-        highlight={text => highlight(text)}
-        onChange={(text) => setCode(text)}
-      />
-    </div>
-  )
-}
-`
-
 export function LiveEditor({
   searchParams,
+  defaultCode,
 }: {
   searchParams: Record<string, string>
+  defaultCode: string
 }) {
   const codeQuery = searchParams[CODE_QUERY_KEY]
   const initialCode = codeQuery ? atob(codeQuery) : defaultCode
@@ -50,4 +28,5 @@ export function LiveEditor({
       />
     </div>
   )
-}
+}
+

site/app/page.tsx

@@ -1,11 +1,40 @@
-import { LiveEditor } from './editor'
+import { EditorExample } from './editor-example'
+import { CodeExamples } from './code-example'
+import { Code } from 'codice'
 
 export default async function Page(props) {
   const searchParams = await props.searchParams
 
   return (
     <div>
-      <LiveEditor searchParams={searchParams} />
+      <div className='titles'>
+        <h1>
+          <span className='huge-title'>Codice</span>
+        </h1>
+        <p>
+          <span className='subtitle'>
+            The Story of Code Presentation
+          </span>
+        </p>
+        <div className='description'>
+          <p>
+            Codice is a simple code editor and code block component for React. It is a zero-dependency library that provides a simple and easy-to-use code editor and code block component.
+          </p>
+          <Code className='code--default'>
+            {`npm install codice`}
+          </Code>
+        </div>
+      </div>
+
+      <div className='section'>
+        <h2>Editor Examples</h2>
+        <EditorExample searchParams={searchParams} />
+      </div>
+
+      <div className='section'>
+        <h2>Code Block Examples</h2>
+        <CodeExamples />
+      </div>
     </div>
   )
 }