wip

biome.json

@@ -7,7 +7,7 @@
     "enabled": true,
     "formatWithErrors": false,
     "indentStyle": "space",
-    "indentSize": 2,
+    "indentWidth": 2,
     "lineWidth": 100
   },
   "linter": {

package.json

@@ -11,7 +11,7 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.2.2",
+    "@biomejs/biome": "^1.3.1",
     "@types/compression": "^1.7.3",
     "@types/fs-extra": "^11.0.2",
     "@types/node": "^20.8.5",

playground/pages/viem.mdx

@@ -50,7 +50,7 @@ const client = createPublicClient({ // [!code hl]
 }) // [!code hl]
 ```
 
-:::callout
+:::note[Note:]
 In a production app, it is highly recommended to pass through your authenticated RPC provider URL (Alchemy, Infura, Ankr, etc). If no URL is provided, viem will default to a public RPC provider. [Read more](/docs/clients/transports/http.html#usage).
 :::
 

site/pages/index.mdx

@@ -4,12 +4,12 @@ title: Vocs
 
 import { Example } from '../components/Example'
 
-[Go to Viem example](./viem)
-
-# Heading 1
+# Heading 1 [This is a subheading]
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero. Suspendisse bibendum placerat enim, vitae iaculis sapien tincidunt vel. Nunc nunc dui, varius eget diam vitae, sagittis rutrum ante. Vestibulum ut nulla in ante tincidunt lacinia. Suspendisse ex orci, elementum vitae enim sed, pellentesque fermentum tortor. In bibendum sapien at nisi pharetra tincidunt. Etiam eleifend lacus dictum lorem ornare euismod. Nunc ullamcorper nunc mi, ut volutpat libero gravida id. Pellentesque cursus mi id tortor convallis eleifend.
 
+[Go to Viem example](./viem)
+
 ## Heading 2
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero. Suspendisse bibendum placerat enim, vitae iaculis sapien tincidunt vel. Nunc nunc dui, varius eget diam vitae, sagittis rutrum ante. Vestibulum ut nulla in ante tincidunt lacinia. Suspendisse ex orci, elementum vitae enim sed, pellentesque fermentum tortor. In bibendum sapien at nisi pharetra tincidunt. Etiam eleifend lacus dictum lorem ornare euismod. Nunc ullamcorper nunc mi, ut volutpat libero gravida id. Pellentesque cursus mi id tortor convallis eleifend.
@@ -52,19 +52,49 @@ Combined emphasis with **asterisks and _underscores_**.
 
 Strikethrough uses two tildes. ~~Scratch this.~~
 
+## Callouts
+
+:::note
+This is a note callout.
+:::
+
+:::info
+This is an info callout.
+:::
+
+:::warning
+This is a warning callout.
+:::
+
+:::danger
+This is a danger callout.
+:::
+
+:::tip
+This is a tip callout.
+:::
+
+:::success
+This is a success callout.
+:::
+
 ## Lists
 
 ### Ordered list
 
 1. First ordered list item
 2. Another item
-   - Unordered sub-list.
-   - Unordered sub-list.
-   - Unordered sub-list.
+    - Unordered sub-list.
+      - Unordered sub-list.
+        - Unordered sub-list.
+      - Unordered sub-list.
+    - Unordered sub-list.
+    - Unordered sub-list.
 3. Actual numbers don't matter, just that it's a number
-   1. Ordered sub-list
-   2. Ordered sub-list
-   3. Ordered sub-list
+    1. Ordered sub-list
+        1. Ordered sub-list
+    2. Ordered sub-list
+    3. Ordered sub-list
 4. And another item.
 
 ### Unordered list
@@ -121,8 +151,8 @@ Inline [`code`]() with link.
 
 Inline `console.log("hello world"){:js}` code
 
-```ts {1} 
-type Example = string
+```ts 
+type Example = string // [!code hl]
 const example: Example = 'example'
 ```
 
@@ -156,6 +186,55 @@ const client = createPublicClient({
 const blockNumber = await client.getBlockNumber()
 ```
 
+```ts
+// 1. Import modules.
+import { createPublicClient, http } from 'viem' 
+import { mainnet } from 'viem/chains'
+
+// 2. Set up your client with desired chain & transport.
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+})
+
+// 3. Consume an action! // [!code focus]
+const blockNumber = await client.getBlockNumber() // [!code focus]
+```
+
+```ts
+// 1. Import modules.
+import { createPublicClient } from 'viem' // [!code --]
+import { createPublicClient, http } from 'viem' // [!code ++]
+import { mainnet } from 'viem/chains'
+
+// 2. Set up your client with desired chain & transport.
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(),
+})
+
+// 3. Consume an action! 
+const blockNumber = await client.getBlockNumber()
+```
+
+```ts twoslash
+interface IdLabel {id: number, /* some fields */ }
+interface NameLabel {name: string, /* other fields */ }
+type NameOrId<T extends number | string> = T extends number ? IdLabel : NameLabel;
+// This comment should not be included
+
+// ---cut---
+function createLabel<T extends number | string>(idOrName: T): NameOrId<T> {
+  throw "unimplemented"
+}
+
+let a = createLabel("typescript");
+```
+
+:::tip[Tip:]
+Make sure to do the thing that does stuff.
+:::
+
 ## Code group
 
 :::code-group

site/pages/viem.mdx

@@ -50,7 +50,7 @@ const client = createPublicClient({ // [!code hl]
 }) // [!code hl]
 ```
 
-:::callout
+:::note[Note:]
 In a production app, it is highly recommended to pass through your authenticated RPC provider URL (Alchemy, Infura, Ankr, etc). If no URL is provided, viem will default to a public RPC provider. [Read more](/docs/clients/transports/http.html#usage).
 :::
 

src/app/hooks/useApplyCssTransition.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { UAParser } from 'ua-parser-js'
+
+const parser = new UAParser()
+const engine = parser.getEngine()
+
+// Prevents FOUC on page load – CSS transitions seem to not play nicely.
+export function useApplyCssTransition() {
+  useEffect(() => {
+    function set() {
+      const style = document.createElement('style')
+      style.textContent = '* { transition: color 0.1s, background-color 0.1s; }'
+      document.head.appendChild(style)
+    }
+    if (engine.name === 'WebKit') setTimeout(set, 500)
+    else set()
+  }, [])
+}

src/app/main.tsx

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react'
+import { useApplyCssTransition } from './hooks/useApplyCssTransition.js'
+
+export function Main({ children }: { children: ReactNode }) {
+  useApplyCssTransition()
+  return (
+    <div className="vocs">
+      <article>{children}</article>
+    </div>
+  )
+}

src/app/routes.tsx

@@ -6,6 +6,7 @@ import { routes as routes_virtual } from 'virtual:routes'
 import { A } from './components/A.js'
 import { CodeGroup } from './components/CodeGroup.js'
 import { FrontmatterHead } from './components/FrontmatterHead.js'
+import { Main } from './main.js'
 
 const components: MDXComponents = {
   a: A,
@@ -25,11 +26,9 @@ export const routes = routes_virtual.map((route_virtual) => ({
         <>
           {head && <Helmet>{head}</Helmet>}
           {frontmatter && <FrontmatterHead frontmatter={frontmatter} />}
-          <div className="vocs">
-            <article>
-              <route.default components={components} />
-            </article>
-          </div>
+          <Main>
+            <route.default components={components} />
+          </Main>
         </>
       ),
     } satisfies RouteObject

src/package.json

@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@jmoxey/rehype-pretty-code": "^0.10.2-1",
     "@mdx-js/react": "^2.3.0",
     "@mdx-js/rollup": "^2.3.0",
     "@radix-ui/colors": "^3.0.0",
@@ -33,16 +34,19 @@
     "postcss": "^8.4.31",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.16.0",
-    "rehype-pretty-code": "^0.10.1",
     "remark-directive": "^3.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^3.0.1",
     "remark-mdx-frontmatter": "^3.0.0",
     "serve-static": "^1.15.0",
     "shiki": "^0.14.5",
     "shiki-processor": "^0.1.3",
+    "ua-parser-js": "^1.0.36",
     "unist-util-visit": "^5.0.0",
     "vite": "4.4.11",
     "vite-plugin-pages": "^0.31.0"
+  },
+  "devDependencies": {
+    "@types/ua-parser-js": "^0.7.38"
   }
 }

src/styles/elements.css

@@ -2,10 +2,6 @@
   margin-bottom: var(--vocs-space_0);
 }
 
-.vocs * {
-  transition: color 0.1s, background-color 0.1s;
-}
-
 /************************************/
 /* Headings & Text                  */
 /************************************/
@@ -156,15 +152,15 @@
   }
 }
 
-:root:not(.dark) {
+@media (prefers-color-scheme: light) {
 
   & pre[data-theme='dark'],
   & code[data-theme='dark'] {
     display: none;
   }
 }
 
-:root.dark {
+@media (prefers-color-scheme: dark) {
 
   & pre[data-theme='light'],
   & code[data-theme='light'] {

src/vite-plugins/routes.ts

@@ -18,16 +18,21 @@ export function routes({ paths: glob }: RoutesParameters): PluginOption {
     load(id) {
       if (id === resolvedVirtualModuleId) {
         let code = 'export const routes = ['
-        paths.forEach((path) => {
-          const type = path.split('.').pop()?.match(/(mdx|md)/) ? 'mdx' : 'jsx'
+        for (const path of paths) {
+          const type = path
+            .split('.')
+            .pop()
+            ?.match(/(mdx|md)/)
+            ? 'mdx'
+            : 'jsx'
           const replacer = glob.split('*')[0]
           let pagePath = path.replace(replacer, '').replace(/\.(.*)/, '')
           if (pagePath.endsWith('index'))
             pagePath = pagePath.replace('index', '').replace(/\/$/, '')
           code += `  { lazy: () => import("${path}"), path: "/${pagePath}", type: "${type}" },`
           if (pagePath)
             code += `  { lazy: () => import("${path}"), path: "/${pagePath}.html", type: "${type}" },`
-        })
+        }
         code += ']'
         return code
       }

src/vite.config.ts

@@ -1,8 +1,8 @@
 import { resolve } from 'node:path'
+import rehypePrettyCode from '@jmoxey/rehype-pretty-code'
 import mdx from '@mdx-js/rollup'
 import react from '@vitejs/plugin-react'
 import * as autoprefixer from 'autoprefixer'
-import rehypePrettyCode from 'rehype-pretty-code'
 import remarkDirective from 'remark-directive'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'