Merge pull request #470 from code-hike/patch-children

Don't fail with `undefined` `children` in remark plugin

Author: pomber

.changeset/friendly-rockets-teach.md

@@ -0,0 +1,5 @@
+---
+"codehike": patch
+---
+
+Don't fail with `undefined` `children` in remark plugin

apps/web/content/blog/the-curse-of-markdown.mdx

@@ -1,14 +1,24 @@
 ---
 title: The Curse of Markdown
-description: And how to break free from it
-date: 2024-09-12
+description: And the website wasteland
+date: 2024-10-12
 authors: [pomber]
 draft: true
 ---
 
+import { Chart } from "./the-curse-of-markdown"
+
 Markdown is so good that it can hurt you.
 
-chapters:
+first
+
+<Chart name="first" />
+
+In a world without Markdown,
+
+<Chart name="second" />
+
+chapters:s
 
 - introducing richness vs ax
 - pre-markdown tradeoffs
@@ -36,3 +46,17 @@ Examples are:
 
 - stripe
 - swiftui
+
+---
+
+specific tools like:
+
+- swiftui docc
+- tutorialkit
+- codehike before v1
+
+---
+
+The curse:
+
+More often than not, the answer is to stick with Markdown and compromise on the complexity of the site. It’s easier, it’s familiar, and it lets you avoid the cost of adopting more complicated solutions. And that’s where the curse lies: Markdown is so effective at the simple stuff that we often don't even try to build things that are slightly more ambitious. The result is a gap in the spectrum of static sites — a whole category of rich, content-driven sites that never get built because the trade-off doesn’t seem worth it.

apps/web/content/blog/the-curse-of-markdown.tsx

@@ -0,0 +1,41 @@
+const first = [
+  { rich: 10, cost: 50, name: "readme" },
+  { rich: 20, cost: 50, name: "static blog" },
+  { rich: 40, cost: 50, name: "static docs" },
+  { rich: 60, cost: 50, name: "interactive blog" },
+  { rich: 75, cost: 50, name: "interactive tutorial" },
+  { rich: 90, cost: 50, name: "landing page" },
+]
+
+const second = [
+  { rich: 10, cost: 10, name: "readme" },
+  { rich: 20, cost: 18, name: "static blog" },
+  { rich: 40, cost: 43, name: "static docs" },
+  { rich: 60, cost: 56, name: "interactive blog" },
+  { rich: 75, cost: 80, name: "interactive tutorial" },
+  { rich: 90, cost: 95, name: "landing page" },
+]
+
+const w = 300
+const h = 200
+
+export function Chart({ name }: { name: string }) {
+  const points = name === "first" ? first : second
+  // Scatter plot
+  return (
+    <div className="">
+      <div
+        style={{ width: w, height: h }}
+        className="relative border-l-2 border-b-2"
+      >
+        {points.map(({ rich, cost }, i) => (
+          <div
+            key={i}
+            style={{ left: `${rich}%`, bottom: `${cost}%` }}
+            className="absolute w-2 h-2 bg-blue-500 rounded-full"
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

packages/codehike/src/mdx/1.0.transform-hikes.ts

@@ -11,7 +11,7 @@ export async function transformAllHikes(root: Root, config: CodeHikeConfig) {
   const hikes: MdxJsxFlowElement[] = []
 
   visit(tree, "mdxJsxFlowElement", (node) => {
-    if (node.children.some(isHikeElement)) {
+    if (node.children?.some(isHikeElement)) {
       hikes.push(node)
     }
   })
@@ -24,7 +24,7 @@ export async function transformAllHikes(root: Root, config: CodeHikeConfig) {
 function wrapInHike(root: Root) {
   // if we find any hikeable element outside of <Hike>s,
   // let's wrap everything in a <Hike>
-  if (root.children.some(isHikeElement)) {
+  if (root.children?.some(isHikeElement)) {
     root.children = [
       {
         type: "mdxJsxFlowElement",

packages/codehike/src/mdx/1.1.remark-list-to-section.ts

@@ -65,7 +65,7 @@ export async function listToSection(
   hikeElement: MdxJsxFlowElement,
   config: CodeHikeConfig,
 ): Promise<HikeSection> {
-  const { children } = hikeElement
+  const { children = [] } = hikeElement
 
   const root: HikeSection = {
     type: "section",