wip: icons

site/docs/index.mdx

@@ -10,10 +10,26 @@ Write your content in [Markdown](#TODO) or [MDX](#TODO), and Vocs will generate
 
 Scaffold a new project with the command line:
 
-```bash
-npx vocs init
+:::code-group
+
+```bash [npm]
+npm init vocs
+```
+
+```bash [pnpm]
+pnpm create vocs
+```
+
+```bash [yarn]
+yarn create vocs
 ```
 
+```bash [bun]
+bun x vocs init -i bun
+```
+
+:::
+
 ## Manual Installation
 
 You can install Vocs in an existing project, or start from scratch, by installing Vocs as a dependency.
@@ -72,7 +88,7 @@ Welcome to my docs.
 
 Next, run the development server:
 
-```bash
+```bash [Terminal]
 npm run dev
 ```
 

src/app/components/CodeTitle.tsx

@@ -0,0 +1,18 @@
+import { File } from './svgs/File.js'
+import { Terminal } from './svgs/Terminal.js'
+
+export function CodeTitle({ children, ...props }: { children: string }) {
+  const language = 'data-language' in props ? props['data-language'] : undefined
+  return (
+    <div {...props}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        {language === 'bash' ? (
+          <Terminal width={14} height={14} style={{ marginTop: 3 }} />
+        ) : (
+          <File width={14} height={14} style={{ marginTop: 1 }} />
+        )}
+        {children}
+      </div>
+    </div>
+  )
+}

src/app/components/svgs/File.tsx

@@ -0,0 +1,14 @@
+export function File(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 99" fill="none" {...props}>
+      <title>File</title>
+      <rect width={77} height={89} x={8} y={3} stroke="currentColor" strokeWidth={6} rx={7} />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth={6}
+        d="M25 22h43M25 35h43M25 48h22"
+      />
+    </svg>
+  )
+}

src/app/components/svgs/Terminal.tsx

@@ -0,0 +1,12 @@
+export function Terminal(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 95" fill="none" {...props}>
+      <title>Terminal</title>
+      <path
+        fill="currentColor"
+        d="M38.281 34.033c0-1.074-.39-2.05-1.22-2.88L6.885 1.171C6.152.39 5.175 0 4.053 0 1.758 0 0 1.709 0 4.004c0 1.074.488 2.1 1.172 2.88l27.295 27.15L1.172 61.181C.488 61.962 0 62.939 0 64.062c0 2.295 1.758 4.004 4.053 4.004 1.123 0 2.1-.39 2.832-1.172l30.176-29.98c.83-.83 1.22-1.807 1.22-2.88Z"
+      />
+      <path stroke="currentColor" strokeLinecap="round" strokeWidth={8} d="M36 75h55" />
+    </svg>
+  )
+}

src/app/routes.tsx

@@ -4,12 +4,14 @@ import { routes as routes_virtual } from 'virtual:routes'
 
 import { A } from './components/A.js'
 import { CodeGroup } from './components/CodeGroup.js'
+import { CodeTitle } from './components/CodeTitle.js'
 import { Root } from './root.js'
 
 const components: MDXComponents = {
   a: A,
   div: (props) => {
     if (props.className === 'code-group') return <CodeGroup {...(props as any)} />
+    if ('data-rehype-pretty-code-title' in props) return <CodeTitle {...(props as any)} />
     return <div {...props} />
   },
 }