Update reference to show p5.sound

processing · Oct 7, 2024 · 53b88c1 · 53b88c1
1 parent 8b04e14
commit 53b88c1
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 17 deletions.
diff --git a/src/components/CodeEmbed/frame.tsx b/src/components/CodeEmbed/frame.tsx
@@ -6,6 +6,7 @@ interface CodeBundle {
   htmlBody?: string;
   js?: string;
   base?: string;
+  scripts?: string[];
 }
 
 /*
@@ -41,6 +42,7 @@ canvas {
 }
 ${code.css || ""}
 </style>
+${(code.scripts || []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join('\n')}
 <body>${code.htmlBody || ""}</body>
 <script id="code" type="text/javascript">${wrapSketch(code.js) || ""}</script>
 <script type="text/javascript">
@@ -67,6 +69,7 @@ export interface CodeFrameProps {
   width?: number | string;
   base?: string;
   lazyLoad?: boolean;
+  scripts?: string[];
 }
 
 /*
@@ -155,6 +158,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
           css: props.cssCode,
           htmlBody: props.htmlBodyCode,
           base: props.base,
+          scripts: props.scripts,
         })}
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"

diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "preact/hooks";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
-import { cdnLibraryUrl } from "@/src/globals/globals";
+import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
 
 import { CodeFrame } from "./frame";
 import { CopyCodeButton } from "../CopyCodeButton";
@@ -21,6 +21,7 @@ import { Icon } from "../Icon";
  *   TODO: refactor this prop behavior
  *   allowSideBySide?: boolean
  *   fullWidth?: boolean
+ *   includeSound?: boolean
  * }
  */
 export const CodeEmbed = (props) => {
@@ -90,6 +91,7 @@ export const CodeEmbed = (props) => {
               base={props.base}
               frameRef={codeFrameRef}
               lazyLoad={props.lazyLoad}
+              scripts={props.includeSound ? [cdnSoundUrl] : []}
             />
           </div>
           <div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>

diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx
@@ -116,11 +116,11 @@ export const ReferenceDirectoryWithFilter = ({
     subcat: { name: string },
     category: { name: string },
   ) => {
-    return !(!subcat.name || !category.name || subcat.name === "p5.sound");
+    return !(!subcat.name || !category.name);
   }
 
   const getSubcatHeading = (
-    subcat: { name: string },
+    subcat: { name: string; entry?: any },
     category: { name: string },
   ) => {
     if (!subcatShouldHaveHeading(subcat, category)) {
@@ -129,10 +129,10 @@ export const ReferenceDirectoryWithFilter = ({
 
     return (
       <>
-        {subcat.name.includes("p5.") ? (
+        {subcat.entry ? (
           <a
             id={subcat.name}
-            href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}`}
+            href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}/`}
           >
             <h3 className="m-0 py-gutter-md">{subcat.name}</h3>
           </a>

diff --git a/src/content/reference/config.ts b/src/content/reference/config.ts
@@ -21,6 +21,7 @@ export const categories = [
   "Structure", // TODO: move to top once revised
   "Constants",
   "Foundation",
+  "p5.sound",
 ] as const;
 
 const paramSchema = z.object({
@@ -32,7 +33,7 @@ const paramSchema = z.object({
 
 const returnSchema = z.object({
   description: z.string(),
-  type: z.string(),
+  type: z.string().optional(),
 });
 
 const exampleSchema = z.string();

diff --git a/src/globals/globals.ts b/src/globals/globals.ts
@@ -21,3 +21,5 @@ export const libraryDownloadUrl =
   `https://github.com/processing/p5.js/releases/download/v${p5Version}/p5.js` as const;
 export const minifiedLibraryDownloadUrl =
   `https://github.com/processing/p5.js/releases/download/v${p5Version}/p5.min.js` as const;
+export const cdnSoundUrl =
+  `https://cdn.jsdelivr.net/npm/p5@${p5Version}/lib/addons/p5.sound.js` as const;
diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
@@ -118,6 +118,7 @@ const seenParams: Record<string, true> = {};
                   editable
                   lazyLoad={false}
                   allowSideBySide={true}
+                  includeSound={entry.data.module === 'p5.sound'}
                 />
               );
             })}

diff --git a/src/layouts/ReferenceLayout.astro b/src/layouts/ReferenceLayout.astro
@@ -51,7 +51,7 @@ const categoryData = categories.map((category) => {
     ...new Set(
       directEntries
         // Ignore classes here, they will be added later
-        .filter((e) => e.data.submodule && !e.data.isConstructor)
+        .filter((e) => e.data.submodule && !e.data.isConstructor && (!e.data.class || e.data.class === 'p5'))
         .map((e) => e.data.submodule)
     ).values(),
   ].sort();

diff --git a/src/scripts/parsers/reference.ts b/src/scripts/parsers/reference.ts
@@ -19,15 +19,20 @@ export const parseLibraryReference =
   async (): Promise<ParsedLibraryReference | null> => {
     // Clone p5.js
     await cloneLibraryRepo(localPath);
-    await saveYuidocOutput('p5.js', 'data-p5');
+    // TODO(dave): let this happen via `npm run docs` in the p5 repo once we
+    // merge the 2.0 branch
+    await saveYuidocOutput('p5.js', 'data-p5', {
+      flags: `--config ${path.join(__dirname, '../../../yuidoc.json')}`,
+      inputPath: './src',
+    });
     const p5Data = await getYuidocOutput('data-p5');
     if (!p5Data) throw new Error('Error generating p5 reference data!');
 
     // Clone p5.sound.js
     await cloneLibraryRepo(
       localSoundPath,
-      'https://github.com/processing/p5.sound.js.git',
-      'moduleref', // 'main',
+      'https://github.com/davepagurek/p5.sound.js-pre-release.git', // 'https://github.com/processing/p5.sound.js.git',
+      'moduleref-doc-comments', // 'main',
       { shouldFixAbsolutePathInPreprocessor: false }
     );
     await saveYuidocOutput('p5.sound.js', 'data-sound');
@@ -76,15 +81,25 @@ const getYuidocOutput = async (outDirName: string): Promise<ParsedLibraryReferen
 /**
  * Parses the p5.js library using YUIDoc and captures the output
  */
-export const saveYuidocOutput = async (inDirName: string, outDirName: string) => {
+export const saveYuidocOutput = async (
+  inDirName: string,
+  outDirName: string,
+  {
+    flags = '',
+    inputPath = '.',
+  }: {
+    flags?: string
+    inputPath?: string
+  } = {}
+) => {
   console.log("Running YUIDoc command and capturing output...");
   const outputFilePath = path.join(yuidocOutputPath, outDirName);
   try {
     await fs.mkdir(yuidocOutputPath, { recursive: true });
     const inPath = path.join(__dirname, "in", inDirName);
     console.log(inPath)
     await new Promise((resolve, reject) => {
-      exec(`yuidoc -p --outdir ${outputFilePath} .`, { cwd: inPath }, (error, stdout) => {
+      exec(`yuidoc -p --outdir ${outputFilePath} ${flags} ${inputPath}`, { cwd: inPath }, (error, stdout) => {
         if (error) {
           console.error(`Error running YUIDoc command: ${error}`);
           reject(error);

diff --git a/yuidoc.json b/yuidoc.json
@@ -3,10 +3,6 @@
   "description": "",
   "url": "",
   "options": {
-    "preprocessor": "./src/scripts/parsers/in/p5.js/docs/preprocessor.js",
-    "paths": [
-      "./src/scripts/parsers/in/p5.js/src/",
-      "./src/scripts/parsers/in/p5.js/lib/addons/"
-    ]
+    "preprocessor": "./docs/preprocessor.js"
   }
 }