Merge pull request #675 from processing/interleaved-examples

Display examples interleaved within reference docs
processing · Feb 5, 2025 · 28f36fb · 28f36fb
2 parents 0e516df + e1edbc4
commit 28f36fb
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
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} />
@@ -102,10 +106,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);