Display examples interleaved within reference docs

davepagurek · davepagurek · commit e1edbc4cf025 · 2025-01-13T19:52:07.000-05:00
diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
@@ -76,6 +76,10 @@ const relatedReferences = [
 
 const seenParams: Record<string, true> = {};
 
+const descriptionParts = description.split(
+  /(<pre><code class="language-js example">[\s\S]+?<\/code><\/pre>)/gm
+);
+
 ---
 
 <Head title={entry.data.title} locale={currentLocale} />
@@ -101,10 +105,32 @@ const seenParams: Record<string, true> = {};
           <p>{t('experimentalApi', 'description')}</p>
         </div>
       )}
-      <div
-        set:html={description}
-        class="[&_a]:text-type-magenta-dark [&_a]:!decoration-type-magenta-dark mb-xl reference-item rendered-markdown"
-      />
+      {descriptionParts.map((part) => {
+        if (part.startsWith('<pre')) {
+          const exampleCode = part
+            .replace(/<pre><code class="language-js example">/, '')
+            .replace(/<\/code><\/pre>/, '');
+
+          return (
+            <CodeEmbed
+              client:load
+              initialValue={exampleCode}
+              previewable
+              editable
+              lazyLoad={false}
+              allowSideBySide={true}
+              includeSound={entry.data.module === 'p5.sound'}
+            />
+          )
+        } else {
+          return (
+            <div
+              set:html={part}
+              class="[&_a]:text-type-magenta-dark [&_a]:!decoration-type-magenta-dark mb-xl reference-item rendered-markdown"
+            />
+          );
+        }
+      })}
       {
         examples && (
           <div class="mb-xl">
diff --git a/src/scripts/builders/reference.ts b/src/scripts/builders/reference.ts
@@ -80,7 +80,7 @@ const getModulePath = (doc: ReferenceClassDefinition | ReferenceClassItem) => {
     docClass = doc.class;
   } else {
     if (!doc.module) console.log(doc)
-    docClass = doc.module.startsWith("p5.") ? doc.module : "p5";
+    docClass = doc.module?.startsWith("p5.") ? doc.module : "p5";
   }
 
   return path.join(prefix, docClass, sortedModule);

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ const getModulePath = (doc: ReferenceClassDefinition \| ReferenceClassItem) => {`
`80`	`80`	`docClass = doc.class;`
`81`	`81`	`} else {`
`82`	`82`	`if (!doc.module) console.log(doc)`
`83`		`- docClass = doc.module.startsWith("p5.") ? doc.module : "p5";`
	`83`	`+ docClass = doc.module?.startsWith("p5.") ? doc.module : "p5";`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`return path.join(prefix, docClass, sortedModule);`