From 9a545600229bde6ef281f1fd79257e30ba103720 Mon Sep 17 00:00:00 2001
From: evelyn masso <coding@outofambit.com>
Date: Wed, 22 May 2024 15:23:31 -0700
Subject: [PATCH] add script to pull in latest p5 version

and use across website pages
---
 docs/scripts.md                             |  6 ++-
 package.json                                |  3 +-
 src/components/CodeEmbed/frame.tsx          | 11 ++----
 src/components/CodeEmbed/frameForServer.tsx | 41 +++++++++++----------
 src/components/CodeEmbed/index.jsx          | 11 ++----
 src/content/text-detail/en/download.mdx     | 14 +++++--
 src/globals/globals.ts                      | 13 ++++++-
 src/globals/p5-version.ts                   |  1 +
 src/scripts/p5-version.ts                   | 31 ++++++++++++++++
 9 files changed, 87 insertions(+), 44 deletions(-)
 create mode 100644 src/globals/p5-version.ts
 create mode 100644 src/scripts/p5-version.ts

diff --git a/docs/scripts.md b/docs/scripts.md
index a7112986b9..9bff504599 100644
--- 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
index ac26b92e0f..699a808666 100644
--- 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
index 5f40c97609..f345471b20 100644
--- 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
index 105740d8f1..3819805c1d 100644
--- 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
index 78a1870029..630658e8dc 100644
--- 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
index 866965a8e8..e0e90c3567 100644
--- 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
index da4ed60007..5d67ef7f31 100644
--- 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
new file mode 100644
index 0000000000..46f21f1c85
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..be8818a18c
--- /dev/null
+++ 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();