Update codehike v1.0.0-beta.8

Author: pomber

clone-shopify-api-reference/app/order/api-layout.tsx

@@ -58,7 +58,7 @@ function EndpointsNav({ endpoints }: { endpoints: EndpointBlock[] }) {
         {endpoints.map((endpoint) => (
           <a
             key={endpoint.title}
-            href={`#${endpoint.title.replace(/\s/g, "-")}`}
+            href={`#${endpoint.title?.replace(/\s/g, "-")}`}
             className={`flex gap-3 no-underline items-start mb-1 p-2 rounded-lg`}
           >
             <Method value={endpoint.method} className="mt-0.5" />
@@ -190,7 +190,7 @@ function Endpoint({
       <div className="flex gap-8 flex-wrap">
         <div className="min-w-96 flex-1 prose-hr:my-2">
           <h2
-            id={title.replace(/\s/g, "-")}
+            id={title?.replace(/\s/g, "-")}
             className="flex items-center gap-3 mt-0 scroll-mt-12"
           >
             <Method value={method} />
@@ -208,7 +208,7 @@ function Endpoint({
           <hr />
           <Accordion type="single" collapsible className="w-full">
             {examples.map((example) => (
-              <AccordionItem key={example.title} value={example.title}>
+              <AccordionItem key={example.title} value={example.title!}>
                 <AccordionTrigger className="text-base text-[#81aec4] hover:text-[#bedbeb] data-[state=open]:text-[#bedbeb]">
                   {example.title}
                 </AccordionTrigger>

clone-shopify-api-reference/app/order/page.tsx

@@ -1,10 +1,10 @@
 // @ts-ignore
-import { getBlocks } from "@/content/order.md"
+import MDX from "@/content/order.md"
 import { parseContent } from "./schema"
 import Link from "next/link"
 import { Layout } from "./api-layout"
 
-const content = parseContent(getBlocks())
+const content = parseContent(MDX)
 
 export const metadata = {
   title: content.intro.title,

clone-shopify-api-reference/app/order/schema.ts

@@ -1,26 +1,25 @@
 import { z } from "zod"
-import { Block, Code, parse } from "codehike/schema"
+import { Block, CodeBlock, parseRoot } from "codehike/blocks"
 
 export type Content = ReturnType<typeof parseContent>
 
-// `content` is the object Code Hike generates from the markdown file
-export function parseContent(content: unknown) {
+export function parseContent(content: any) {
   // if there's an error, `parse` will throw with a message specifying the section in the markdown file that caused the error
-  return parse(
+  return parseRoot(
     content,
     Block.extend({
       intro: Block,
       resource: Block.extend({
-        code: Code,
+        code: CodeBlock,
         properties: z.array(Property),
         hidden: z.optional(z.array(Property)),
       }),
       endpoints: z.array(
         Block.extend({
           method: z.enum(["GET", "POST", "PUT", "DEL"]),
           path: z.string(),
-          request: z.array(Code),
-          response: Code,
+          request: z.array(CodeBlock),
+          response: CodeBlock,
           parameters: z.optional(z.array(Property)),
           examples: z.optional(z.array(Example)),
         }),
@@ -40,7 +39,7 @@ const Property = Block.extend({
 
 const Example = Block.extend({
   path: z.optional(z.string()),
-  pathParams: z.optional(Code),
-  queryParams: z.optional(Code),
-  requestBody: z.optional(Code),
+  pathParams: z.optional(CodeBlock),
+  queryParams: z.optional(CodeBlock),
+  requestBody: z.optional(CodeBlock),
 })

clone-shopify-api-reference/components/code.tsx

@@ -1,4 +1,3 @@
-import { CodeBlock, CodeContent } from "codehike"
 import { CopyButton } from "./copy-button"
 import {
   LocalStoredTabs,
@@ -8,32 +7,42 @@ import {
   TabsTrigger,
 } from "./ui/tabs"
 import { Method, Path } from "./ui/endpoint"
+import {
+  AnnotationHandler,
+  highlight,
+  InnerLine,
+  Pre,
+  RawCode,
+} from "codehike/code"
 
-export function ResourceCode({ codeblock }: { codeblock: CodeBlock }) {
+export async function ResourceCode({ codeblock }: { codeblock: RawCode }) {
+  const highlighted = await highlight(codeblock, "dark-plus")
   return (
     <div className="border border-[#1e647a] min-w-0 flex-1 rounded-lg lg:max-w-lg lg:ml-auto overflow-hidden bg-[#184C5E]">
       <div className="font-mono px-4 py-1 text-[#8fbfd7] bg-[#133A48] m-0.5 rounded-lg">
         {"{}   " + codeblock.meta}
       </div>
-      <CodeContent
-        codeblock={codeblock}
-        config={{ theme: "dark-plus" }}
+      <Pre
+        code={highlighted}
         className="min-h-[40rem] max-h-[600px] m-0 px-0 whitespace-pre-wrap"
-        components={{ Line }}
+        handlers={[line]}
       />
     </div>
   )
 }
 
-export function RequestCode({
+export async function RequestCode({
   codeblocks,
   path,
   method,
 }: {
-  codeblocks: CodeBlock[]
+  codeblocks: RawCode[]
   method: "GET" | "POST" | "PUT" | "DEL"
   path: string
 }) {
+  const highlighted = await Promise.all(
+    codeblocks.map((codeblock) => highlight(codeblock, "dark-plus")),
+  )
   return (
     <LocalStoredTabs
       localStorageKey="preferredLanguage"
@@ -63,21 +72,21 @@ export function RequestCode({
           ))}
         </div>
       </div>
-      {codeblocks.map((codeblock) => (
+      {highlighted.map((codeblock) => (
         <TabsContent value={codeblock.meta!}>
-          <CodeContent
-            codeblock={codeblock}
-            config={{ theme: "dark-plus" }}
+          <Pre
+            code={codeblock}
             className="max-h-[600px] m-0 px-0 whitespace-pre-wrap break-all"
-            components={{ Line }}
+            handlers={[line]}
           />
         </TabsContent>
       ))}
     </LocalStoredTabs>
   )
 }
 
-export function ResponseCode({ codeblock }: { codeblock: CodeBlock }) {
+export async function ResponseCode({ codeblock }: { codeblock: RawCode }) {
+  const highlighted = await highlight(codeblock, "dark-plus")
   return (
     <div className="border border-cyan-950 min-w-0 flex-1 rounded-lg lg:max-w-lg lg:ml-auto overflow-hidden bg-[#0A1D26]">
       <div className="font-mono px-4 py-1 text-[#8fbfd7] bg-[#061219] m-0.5 rounded-lg flex gap-3 items-center">
@@ -88,24 +97,23 @@ export function ResponseCode({ codeblock }: { codeblock: CodeBlock }) {
         </span>
       </div>
 
-      <CodeContent
-        codeblock={codeblock}
-        config={{ theme: "dark-plus" }}
+      <Pre
+        code={highlighted}
         className="max-h-[600px] m-0 px-0 whitespace-pre-wrap"
-        components={{ Line }}
+        handlers={[line]}
       />
     </div>
   )
 }
 
-// TODO better word-wrap
-function Line({ children, query }: any) {
-  return (
+const line: AnnotationHandler = {
+  name: "line",
+  Line: (props) => (
     <div data-line="true" className="table-row px-1">
       <div className="pl-1 pr-4 w-[3ch] box-content !opacity-50 text-right select-none table-cell">
-        {query}
+        {props.lineNumber}
       </div>
-      <div className="table-cell break-words">{children}</div>
+      <InnerLine merge={props} />
     </div>
-  )
+  ),
 }

clone-shopify-api-reference/license

@@ -16,7 +16,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "codehike": "^1.0.0-alpha.12",
+    "codehike": "1.0.0-beta.8",
     "lucide-react": "^0.338.0",
     "next": "14.1.0",
     "react": "^18",