add script to pull in latest p5 version

outofambit · outofambit · commit 9a545600229b · 2024-05-22T15:23:31.000-07:00
and use across website pages
diff --git a/docs/scripts.md b/docs/scripts.md
@@ -18,7 +18,11 @@ To update the content on the p5.js website following a new release of p5.js, you
 
 ## Contributors List Build Script
 
-`npm run build:contribtuors` parses the list of contributors from the all contributors [config file](https://github.com/processing/p5.js/blob/main/.all-contributorsrc) in the p5.js repo and adds entries in the [people collection](src/content/people/en) for anyone who is missing. These are used to render the list of contributors on the [People page](https://p5js.org/people/). This script will **not** remove or update existing entries, that must be done manually.
+`npm run build:contributors` parses the list of contributors from the all contributors [config file](https://github.com/processing/p5.js/blob/main/.all-contributorsrc) in the p5.js repo and adds entries in the [people collection](src/content/people/en) for anyone who is missing. These are used to render the list of contributors on the [People page](https://p5js.org/people/). This script will **not** remove or update existing entries, that must be done manually.
+
+## Update p5 version Build Script
+
+`npm run build:p5-version` reads the latest version of the p5.js library (for example, "2.19.3") and updates the website config to use that version of the library for embeds and download links across the site.
 
 ## Search Indices Build Script
 
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "build:contributor-docs": "tsx ./src/scripts/builders/contribute.ts",
     "build:contributors": "tsx ./src/scripts/builders/people.ts",
     "build:reference": "tsx ./src/scripts/builders/reference.ts",
-    "build:search": "tsx ./src/scripts/builders/search.ts"
+    "build:search": "tsx ./src/scripts/builders/search.ts",
+    "build:p5-version": "tsx ./src/scripts/p5-version.ts"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.5",
diff --git a/src/components/CodeEmbed/frame.tsx b/src/components/CodeEmbed/frame.tsx
@@ -1,10 +1,5 @@
 import { useRef, useLayoutEffect, useEffect } from "preact/hooks";
-import { p5VersionForEmbeds } from "@/src/globals/globals";
-
-/*
- * Url to fetch the p5.js library from
- */
-const p5LibraryUrl = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${p5VersionForEmbeds}/p5.min.js`;
+import { cdnLibraryUrl } from "@/src/globals/globals";
 
 interface CodeBundle {
   css?: string;
@@ -53,7 +48,7 @@ ${code.css || ""}
   window.addEventListener("message", event => {
     // Include check to prevent p5.min.js from being loaded twice
     const scriptExists = !!document.getElementById("p5ScriptTagInIframe");
-    if (!scriptExists && event.data?.sender === '${p5LibraryUrl}') {
+    if (!scriptExists && event.data?.sender === '${cdnLibraryUrl}') {
       const p5ScriptElement = document.createElement('script');
       p5ScriptElement.id = "p5ScriptTagInIframe";
       p5ScriptElement.type = 'text/javascript';
@@ -136,7 +131,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
         );
         iframeRef.current.contentWindow?.postMessage(
           {
-            sender: p5LibraryUrl,
+            sender: cdnLibraryUrl,
             message: p5ScriptText,
           },
           "*",
diff --git a/src/components/CodeEmbed/frameForServer.tsx b/src/components/CodeEmbed/frameForServer.tsx
@@ -1,10 +1,5 @@
 import { useRef, useLayoutEffect } from "preact/hooks";
-import { p5VersionForEmbeds } from "@/src/globals/globals";
-
-/*
- * Url to fetch the p5.js library from
- */
-const p5LibraryUrl = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${p5VersionForEmbeds}/p5.min.js`;
+import { cdnLibraryUrl } from "@/src/globals/globals";
 
 interface CodeBundle {
   css?: string;
@@ -33,7 +28,7 @@ ${code.css || ""}
 </style>
 <body>${code.htmlBody || ""}</body>
 <script id="code" type="text/javascript">${code.js || ""}</script>
-<script src="${p5LibraryUrl}"></script>
+<script src="${cdnLibraryUrl}"></script>
 `.replace(/\u00A0/g, " ");
 
 export interface CodeFrameProps {
@@ -63,23 +58,29 @@ export const CodeFrameForServer = (props: CodeFrameProps) => {
     const { IntersectionObserver } = window;
     if (!IntersectionObserver) return;
 
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (!iframeRef.current) return;
-        if (entry.isIntersecting) {
-          iframeRef.current.style.removeProperty('display');
-        } else {
-          iframeRef.current.style.display = 'none';
-        }
-      });
-    }, { rootMargin: '20px' });
-    observer.observe(containerRef.current)
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!iframeRef.current) return;
+          if (entry.isIntersecting) {
+            iframeRef.current.style.removeProperty("display");
+          } else {
+            iframeRef.current.style.display = "none";
+          }
+        });
+      },
+      { rootMargin: "20px" },
+    );
+    observer.observe(containerRef.current);
 
     return () => observer.disconnect();
   }, []);
 
   return (
-    <div ref={containerRef} style={{ width: props.width, height: props.height }}>
+    <div
+      ref={containerRef}
+      style={{ width: props.width, height: props.height }}
+    >
       <iframe
         ref={iframeRef}
         srcDoc={wrapInMarkup({
@@ -96,4 +97,4 @@ export const CodeFrameForServer = (props: CodeFrameProps) => {
       />
     </div>
   );
-}
+};
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 { p5VersionForEmbeds } from "@/src/globals/globals";
+import { cdnLibraryUrl } from "@/src/globals/globals";
 
 import { CodeFrame } from "./frame";
 import { CopyCodeButton } from "../CopyCodeButton";
@@ -47,18 +47,13 @@ export const CodeEmbed = (props) => {
 
   const [previewCodeString, setPreviewCodeString] = useState(codeString);
 
-  /*
-   * Url to fetch the p5.js library from
-   */
-  const p5LibraryUrl = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${p5VersionForEmbeds}/p5.min.js`;
-
   useEffect(() => {
     setRendered(true);
 
     // Includes p5.min.js script to be used by `CodeFrame` iframe(s)
     const p5ScriptElement = document.createElement("script");
     p5ScriptElement.id = "p5ScriptTag";
-    p5ScriptElement.src = p5LibraryUrl;
+    p5ScriptElement.src = cdnLibraryUrl;
     document.head.appendChild(p5ScriptElement);
   }, []);
 
@@ -102,7 +97,7 @@ export const CodeEmbed = (props) => {
           </div>
         </div>
       ) : null}
-      <div className="relative w-full code-editor-container">
+      <div className="code-editor-container relative w-full">
         <CodeMirror
           value={codeString}
           theme="light"
diff --git a/src/content/text-detail/en/download.mdx b/src/content/text-detail/en/download.mdx
@@ -3,6 +3,12 @@ title: "Download"
 ---
 import LinkButton from '../../../components/LinkButton/index.astro'
 import CodeContainerWithCopy from "../../../components/CodeContainer/CodeContainerWithCopy.astro";
+import {
+  cdnLibraryUrl,
+  fullDownloadUrl,
+  libraryDownloadUrl,
+  minifiedLibraryDownloadUrl
+} from '@src/globals/globals'
 
 Welcome! This page contains the links to start using p5.js in the way that suits you best. Open the p5.js Editor in your web browser, or download the library to your own computer. We’ve tried to order the links to reflect what a beginner might want first, then what a more experienced programmer may be looking for.
 
@@ -14,20 +20,20 @@ This link redirects you to the p5.js Editor online so you can begin using p5.js
 ### Download the Complete Library
 This is a download containing the p5.js library file, the p5.sound addon, and an example project. It does not contain an editor. Visit [Get Started](/tutorials/get-started) to learn how to setup a p5.js project.
 
-<LinkButton variant='download' url='https://github.com/processing/p5.js/releases/download/v1.9.2/p5.zip'> Complete Library </LinkButton>
+<LinkButton variant='download' url={fullDownloadUrl}> Complete Library </LinkButton>
 
 ### Download Single Files
 These are downloads or links to the p5.js library file. No additional contents are included.
 
 <div class="flex gap-sm md:gap-lg justify-between lg:justify-normal">
-  <LinkButton variant='download' url='https://github.com/processing/p5.js/releases/download/v1.9.2/p5.js'> p5.js </LinkButton>
-  <LinkButton variant='download' url='https://github.com/processing/p5.js/releases/download/v1.9.2/p5.min.js'> p5.min.js </LinkButton>
+  <LinkButton variant='download' url={libraryDownloadUrl}> p5.js </LinkButton>
+  <LinkButton variant='download' url={minifiedLibraryDownloadUrl}> p5.min.js </LinkButton>
 </div>
 
 ### Use p5.js from CDN
 p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing.
 
-<CodeContainerWithCopy>https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js</CodeContainerWithCopy>
+<CodeContainerWithCopy>{cdnLibraryUrl}</CodeContainerWithCopy>
 
 ### Older versions
 Looking for older versions?
diff --git a/src/globals/globals.ts b/src/globals/globals.ts
@@ -1,3 +1,5 @@
+import { p5Version } from "./p5-version";
+
 export const contentTypes = [
   "contributor-docs",
   "examples",
@@ -8,7 +10,14 @@ export const contentTypes = [
   "tutorials",
 ] as const;
 
-export const p5VersionForEmbeds = "1.9.1" as const;
-
 export const sketchesPerPage = 12 as const;
 export const eventsPerPage = 12 as const;
+
+export const cdnLibraryUrl =
+  `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${p5Version}/p5.min.js` as const;
+export const fullDownloadUrl =
+  `https://github.com/processing/p5.js/releases/download/v${p5Version}/p5.zip` as const;
+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;
diff --git a/src/globals/p5-version.ts b/src/globals/p5-version.ts
@@ -0,0 +1 @@
+export const p5Version = "1.9.4" as const;
diff --git a/src/scripts/p5-version.ts b/src/scripts/p5-version.ts
@@ -0,0 +1,31 @@
+import path from "path";
+import { cloneLibraryRepo, repoRootPath, writeFile } from "./utils";
+import { readFile } from "fs/promises";
+
+/* Where to clone the repo to */
+const clonedRepoPath = path.join(repoRootPath, "in", "p5.js");
+
+const outputFile = path.join(repoRootPath, "src", "globals", "p5-version.ts");
+
+const outputString = (version: string) =>
+  `export const p5Version = "${version}" as const;\n`;
+
+const run = async () => {
+  console.log("Reading latest p5 version to update config...");
+
+  await cloneLibraryRepo(clonedRepoPath);
+
+  // read version from package.json
+  const packageConfigContents = await readFile(
+    path.join(clonedRepoPath, "package.json"),
+    "utf8",
+  );
+  const newP5Version = JSON.parse(packageConfigContents)["version"] as string;
+
+  // write to ts file
+  await writeFile(outputFile, outputString(newP5Version));
+
+  console.log("Done!");
+};
+
+run();

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const p5Version = "1.9.4" as const;`