From 930646c4949111ea1ddb823e3ec0305493952ecc Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Tue, 15 Oct 2024 11:55:27 +0200
Subject: [PATCH] Don't fail with `undefined` `children` in remark plugin

---
 .changeset/friendly-rockets-teach.md          |  5 +++
 .../content/blog/the-curse-of-markdown.mdx    | 30 ++++++++++++--
 .../content/blog/the-curse-of-markdown.tsx    | 41 +++++++++++++++++++
 .../codehike/src/mdx/1.0.transform-hikes.ts   |  4 +-
 .../src/mdx/1.1.remark-list-to-section.ts     |  2 +-
 5 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/friendly-rockets-teach.md
 create mode 100644 apps/web/content/blog/the-curse-of-markdown.tsx

diff --git a/.changeset/friendly-rockets-teach.md b/.changeset/friendly-rockets-teach.md
new file mode 100644
index 00000000..39a2c8ec
--- /dev/null
+++ b/.changeset/friendly-rockets-teach.md
@@ -0,0 +1,5 @@
+---
+"codehike": patch
+---
+
+Don't fail with `undefined` `children` in remark plugin
diff --git a/apps/web/content/blog/the-curse-of-markdown.mdx b/apps/web/content/blog/the-curse-of-markdown.mdx
index 1fde2a96..a4a80aae 100644
--- a/apps/web/content/blog/the-curse-of-markdown.mdx
+++ b/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.
diff --git a/apps/web/content/blog/the-curse-of-markdown.tsx b/apps/web/content/blog/the-curse-of-markdown.tsx
new file mode 100644
index 00000000..916c5531
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/codehike/src/mdx/1.0.transform-hikes.ts b/packages/codehike/src/mdx/1.0.transform-hikes.ts
index d5f2ac98..26c74006 100644
--- a/packages/codehike/src/mdx/1.0.transform-hikes.ts
+++ b/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",
diff --git a/packages/codehike/src/mdx/1.1.remark-list-to-section.ts b/packages/codehike/src/mdx/1.1.remark-list-to-section.ts
index 2f8daeb1..25dce6bc 100644
--- a/packages/codehike/src/mdx/1.1.remark-list-to-section.ts
+++ b/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",