Update website

.changeset/config.json

@@ -1,6 +1,9 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
-  "changelog": "@changesets/cli/changelog",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "code-hike/codehike" }
+  ],
   "commit": false,
   "fixed": [],
   "linked": [],

.github/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - next
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - run: pnpm canary

apps/web/content/blog/from-remark-to-rsc.mdx

@@ -6,4 +6,6 @@ authors: [pomber]
 draft: true
 ---
 
+Content usually needs some kind of transformation before being rendered.
+
 A remark plugin is a function that transforms pieces of a markdown file.

apps/web/content/blog/v1-migration.mdx

@@ -110,30 +110,33 @@ Instead of "use-v1", you can use any string. Just make sure it's easy to find an
 
 Here's the equivalent features between v0 and v1, they aren't exactly the same, but they are similar:
 
-|                      | v0               | v1                  |
-| -------------------- | ---------------- | ------------------- |
-| Package name         | `@code-hike/mdx` | `codehike`          |
-| Line numbers         | [Config][1]      | [Example][21]       |
-| Copy button          | [Config][2]      | [Example][22]       |
-| Themes               | [Config][3]      | [Config][23]        |
-| Skip languages       | [Config][4]      | [Config][24]        |
-| Static components    | [Config][5]      | [Media queries][25] |
-| Auto import          | [Config][6]      | Not needed          |
-| Auto link            | [Config][7]      | [Example][26]       |
-| Codeblock filename   | [Directive][8]   | [Example][27]       |
-| `focus`              | [Annotation][9]  | [Example][28]       |
-| `mark`               | [Annotation][10] | [Example][29]       |
-| `withClass`          | [Annotation][11] | [Example][30]       |
-| `link`               | [Annotation][12] | [Example][31]       |
-| `from`               | [Annotation][13] | [Syntax][32]        |
-| `<CH.Code>` Tabs     | [Component][14]  | [Example][33]       |
-| `<CH.Code>` Panels   | [Component][15]  | -                   |
-| Inline code          | [Syntax][16]     | [Syntax][35]        |
-| Code mentions        | [Syntax][17]     | [Example][36]       |
-| `<CH.Scrollycoding>` | [Component][18]  | [Example][37]       |
-| `<CH.Spotlight>`     | [Component][19]  | [Example][38]       |
-| `<CH.Slideshow>`     | [Component][20]  | [Example][39]       |
-
+|                      | v0                         | v1                      |
+| -------------------- | -------------------------- | ----------------------- |
+| Docs                 | [v0.codehike.org/docs][50] | [codehike.org/docs][51] |
+| Package name         | `@code-hike/mdx`           | `codehike`              |
+| Line numbers         | [Config][1]                | [Example][21]           |
+| Copy button          | [Config][2]                | [Example][22]           |
+| Themes               | [Config][3]                | [Config][23]            |
+| Skip languages       | [Config][4]                | [Config][24]            |
+| Static components    | [Config][5]                | [Media queries][25]     |
+| Auto import          | [Config][6]                | Not needed              |
+| Auto link            | [Config][7]                | [Example][26]           |
+| Codeblock filename   | [Directive][8]             | [Example][27]           |
+| `focus`              | [Annotation][9]            | [Example][28]           |
+| `mark`               | [Annotation][10]           | [Example][29]           |
+| `withClass`          | [Annotation][11]           | [Example][30]           |
+| `link`               | [Annotation][12]           | [Example][31]           |
+| `from`               | [Annotation][13]           | [Syntax][32]            |
+| `<CH.Code>` Tabs     | [Component][14]            | [Example][33]           |
+| `<CH.Code>` Panels   | [Component][15]            | -                       |
+| Inline code          | [Syntax][16]               | [Syntax][35]            |
+| Code mentions        | [Syntax][17]               | [Example][36]           |
+| `<CH.Scrollycoding>` | [Component][18]            | [Example][37]           |
+| `<CH.Spotlight>`     | [Component][19]            | [Example][38]           |
+| `<CH.Slideshow>`     | [Component][20]            | [Example][39]           |
+
+[50]: https://v0.codehike.org/docs
+[51]: https://codehike.org/docs
 [1]: https://v0.codehike.org/docs/configuration#line-numbers
 [2]: https://v0.codehike.org/docs/configuration#copy-button
 [3]: https://v0.codehike.org/docs/themes

apps/web/content/docs/code/focus.mdx

@@ -33,6 +33,7 @@ import React, { useLayoutEffect, useRef } from "react"
 
 export const focus: AnnotationHandler = {
   name: "focus",
+  onlyIfAnnotated: true,
   PreWithRef: (props) => {
     const ref = getPreRef(props)
     useScrollToFocus(ref)

apps/web/next.config.mjs

@@ -1,5 +1,16 @@
 import createNextDocsMDX from "next-docs-mdx/config"
 import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"
+// import fs from "node:fs"
+// import { jsx, toJs } from "estree-util-to-js"
+// function recmaPlugin() {
+//   return (tree) => {
+//     const result = toJs(tree, { handlers: jsx })
+//     // console.log("```js")
+//     // console.log(result.value)
+//     // console.log("```")
+//     fs.writeFileSync("recma.js", result.value)
+//   }
+// }
 
 /** @type {import('codehike/mdx').CodeHikeConfig} */
 const chConfig = {
@@ -17,7 +28,7 @@ const withMDX = createNextDocsMDX({
   mdxOptions: {
     remarkPlugins: [[remarkCodeHike, chConfig]],
     recmaPlugins: [[recmaCodeHike, chConfig]],
-    jsx: true,
+    // jsx: true,
   },
 })
 

apps/web/package.json

@@ -24,6 +24,7 @@
     "codehike": "workspace:*",
     "diff": "^5.1.0",
     "dotenv": "^16.4.1",
+    "estree-util-to-js": "^2.0.0",
     "lucide-react": "^0.303.0",
     "next": "14.1.0",
     "next-docs-mdx": "7.1.2",

apps/web/ui/nav.tsx

@@ -60,15 +60,18 @@ export function NavBar({ version }: { version: string }) {
 function VersionNav({ version }: { version: string }) {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger className="text-sm bg-secondary text-primary rounded-lg px-2">
+      <DropdownMenuTrigger className="text-sm bg-secondary text-primary rounded-lg px-2 tabular-nums">
         {version}
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem className="p-0">
-          <span className="w-full px-2 py-1">{version}</span>
+      <DropdownMenuContent className="min-w-[5rem]">
+        <DropdownMenuItem className="p-0 text-center">
+          <span className="w-full px-2 py-1 tabular-nums">{version}</span>
         </DropdownMenuItem>
-        <DropdownMenuItem className="p-0">
-          <a href="https://v0.codehike.org/docs" className="w-full px-2 py-1">
+        <DropdownMenuItem className="p-0 text-center">
+          <a
+            href="https://v0.codehike.org/docs"
+            className="w-full px-2 py-1 tabular-nums"
+          >
             0.9.0
           </a>
         </DropdownMenuItem>

package.json

@@ -8,12 +8,15 @@
     "format": "prettier --write \"**/*.{ts,tsx,md,mdx}\"",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "changeset publish"
+    "release": "changeset publish",
+    "canary": "pkg-pr-new publish --no-template --compact './packages/codehike'"
   },
   "devDependencies": {
     "@changesets/cli": "2.27.1",
+    "@changesets/changelog-github": "0.5.0",
     "prettier": "^3.1.1",
-    "turbo": "^1.11.2"
+    "turbo": "^1.11.2",
+    "pkg-pr-new": "0.0.20"
   },
   "packageManager": "pnpm@9.7.1",
   "repository": "code-hike/codehike",