Merge main into 2.0

.github/workflows/beta_deploy.yml

@@ -0,0 +1,42 @@
+name: Deploy beta to Netlify
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: ["2.0"]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+
+      - name: Install, build, and upload your site output
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+        uses: withastro/action@v2
+
+      - name: Deploy to Netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './dist'
+          production-branch: main
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: "Deploy from GitHub Actions"
+          enable-pull-request-comment: false
+          enable-commit-comment: false
+          overwrites-pull-request-comment: false
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

docs/contributing_libraries.md

@@ -19,6 +19,6 @@ p5.js welcomes libraries contributed by others! <a href="https://github.com/proc
 4. Add a **high-res colored image of 1500x1000px** of your library into `src/content/libraries/images`
 5. Submit a pull request and we'll review your submission
 
-We add libraries that are open-source, includes some documentation and examples, and <a href="https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md">follow our code of conduct.</a> This directory targets beginner users, so we aim to ensure users have a smooth experience getting started with any library linked to.
+We add libraries that are open-source, include some documentation and examples, and <a href="https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md">follow our code of conduct.</a> This directory targets beginner users, so we aim to ensure users have a smooth experience getting started with any library linked to.
 
 If you have any questions, feel free to open an issue or create a work-in-progress PR and ask us anything!

src/components/Footer/index.astro

@@ -26,25 +26,25 @@ const bannerEntry = await getEntry("banner", currentLocale);
   <div>
     <div class="mb-5" id="resources-footer-category">{t("Resources")}</div>
     <ul aria-labelledby="resources-footer-category">
-      <li><a href="/reference">{t("Reference")}</a></li>
-      <li><a href="/tutorials">{t("Tutorials")}</a></li>
-      <li><a href="/examples">{t("Examples")}</a></li>
-      <li><a href="/contribute">{t("Contribute")}</a></li>
-      <li><a href="/community">{t("Community")}</a></li>
-      <li><a href="/about">{t("About")}</a></li>
+      <li><a href="/reference/">{t("Reference")}</a></li>
+      <li><a href="/tutorials/">{t("Tutorials")}</a></li>
+      <li><a href="/examples/">{t("Examples")}</a></li>
+      <li><a href="/contribute/">{t("Contribute")}</a></li>
+      <li><a href="/community/">{t("Community")}</a></li>
+      <li><a href="/about/">{t("About")}</a></li>
       <li><a href="https://editor.p5js.org">{t("Start Coding")}</a></li>
-      <li><a href="/donate">{t("Donate")}</a></li>
+      <li><a href="/donate/">{t("Donate")}</a></li>
     </ul>
   </div>
   <div class="lg:col-span-2 grid grid-cols-subgrid">
     <div>
       <div class="mb-5" id="info-footer-category">{t("Information")}</div>
       <ul aria-labelledby="info-footer-category">
-        <li><a href="/download">{t("Download")}</a></li>
-        <li><a href="/contact">{t("Contact")}</a></li>
-        <li><a href="/copyright">{t("Copyright")}</a></li>
-        <li><a href="/privacy-policy">{t("Privacy Policy")}</a></li>
-        <li><a href="/terms-of-use">{t("Terms of Use")}</a></li>
+        <li><a href="/download/">{t("Download")}</a></li>
+        <li><a href="/contact/">{t("Contact")}</a></li>
+        <li><a href="/copyright/">{t("Copyright")}</a></li>
+        <li><a href="/privacy-policy/">{t("Privacy Policy")}</a></li>
+        <li><a href="/terms-of-use/">{t("Terms of Use")}</a></li>
       </ul>
     </div>
     <div class="lg:col-start-2 mt-xl lg:mt-0">

src/content/text-detail/en/about.mdx

@@ -36,6 +36,6 @@ Community values:
 </div>
 
 <div class='mt-xl'>
-<LinkButton variant='link' url='/contribute/access'>Access Statement</LinkButton>
-<LinkButton variant='link' url='/code-of-conduct'>Code of Conduct</LinkButton>
+<LinkButton variant='link' url='/contribute/access/'>Access Statement</LinkButton>
+<LinkButton variant='link' url='/code-of-conduct/'>Code of Conduct</LinkButton>
 </div>

src/content/text-detail/es/about.mdx

@@ -29,6 +29,6 @@ Valores de la comunidad:
 </div>
 
 <div class='mt-xl'>
-<LinkButton variant='link' url='/contribute/access'>Access Statement</LinkButton>
-<LinkButton variant='link' url='/code-of-conduct'>Code of Conduct</LinkButton>
+<LinkButton variant='link' url='/contribute/access/'>Access Statement</LinkButton>
+<LinkButton variant='link' url='/code-of-conduct/'>Code of Conduct</LinkButton>
 </div>

src/content/text-detail/hi/about.mdx

@@ -29,6 +29,6 @@ P5.js समुदाय प्रौद्योगिकी के साथ 
 </div>
 
 <div class='mt-xl'>
-<LinkButton variant='link' url='/contribute/access'>प्रवेश विवरण</LinkButton>
-<LinkButton variant='link' url='/code-of-conduct'>आचार संहिता</LinkButton>
+<LinkButton variant='link' url='/contribute/access/'>प्रवेश विवरण</LinkButton>
+<LinkButton variant='link' url='/code-of-conduct/'>आचार संहिता</LinkButton>
 </div>

src/content/text-detail/ko/about.mdx

@@ -29,6 +29,6 @@ p5.js 커뮤니티는 기술을 통해 예술과 디자인에 관련된 탐구
 </div>
 
 <div class='mt-xl'>
-<LinkButton variant='link' url='/contribute/access'>접근성 성명서</LinkButton>
-<LinkButton variant='link' url='/code-of-conduct'>행동 강령</LinkButton>
+<LinkButton variant='link' url='/contribute/access/'>접근성 성명서</LinkButton>
+<LinkButton variant='link' url='/code-of-conduct/'>행동 강령</LinkButton>
 </div>

src/content/text-detail/zh-Hans/about.mdx

@@ -29,6 +29,6 @@ p5.js 鼓励通过迭代编码来实现创意表达。我们重视代码开源
 </div>
 
 <div class='mt-xl'>
-<LinkButton variant='link' url='/contribute/access'>可及性声明</LinkButton>
-<LinkButton variant='link' url='/code-of-conduct'>行为规范</LinkButton>
+<LinkButton variant='link' url='/contribute/access/'>可及性声明</LinkButton>
+<LinkButton variant='link' url='/code-of-conduct/'>行为规范</LinkButton>
 </div>

src/layouts/AboutLayout.astro

@@ -78,7 +78,7 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
         ))
       }
     </ul>
-    <LinkButton variant="link" url="/people" class="mt-md min-w-[220px]"
+    <LinkButton variant="link" url="/people/" class="mt-md min-w-[220px]"
       >{t("All People")}</LinkButton
     >
   </section>

src/layouts/HomepageLayout.astro

@@ -41,15 +41,15 @@ setJumpToState(null);
       class="col-span-2 lg:col-span-3 order-1 grid grid-cols-subgrid content-start"
     >
       <h2 class="col-span-3">{data.referenceHeaderText}</h2>
-      <LinkButton class="col-span-1 w-full" variant="link" url="/reference"
+      <LinkButton class="col-span-1 w-full" variant="link" url="/reference/"
         >{t("Reference")}</LinkButton
       >
     </div>
     <div
       class="col-span-2 lg:col-span-3 order-2 lg:order-4 grid grid-cols-subgrid content-start"
     >
       <h2 class="col-span-full">{data.examplesHeaderText}</h2>
-      <LinkButton class="col-span-1 w-full" variant="link" url="/examples"
+      <LinkButton class="col-span-1 w-full" variant="link" url="/examples/"
         >{t("Examples")}</LinkButton
       >
     </div>
@@ -64,7 +64,7 @@ setJumpToState(null);
   <div class="content-grid-simple mb-xl">
     <div class="col-span-2 lg:col-span-3 grid grid-cols-subgrid content-start">
       <h2 class="col-span-3">{data.communityHeaderText}</h2>
-      <LinkButton class="col-span-1 w-full" variant="link" url="/community"
+      <LinkButton class="col-span-1 w-full" variant="link" url="/community/"
         >{t("Community")}</LinkButton
       >
     </div>
@@ -84,15 +84,15 @@ setJumpToState(null);
     <div class="grid grid-cols-subgrid col-span-1 lg:col-span-2">
       <h2 class="col-span-2">{t("Donate to p5.js")}</h2>
       <div class="col-span-1">
-        <LinkButton class="w-full" variant="link" url="/donate"
+        <LinkButton class="w-full" variant="link" url="/donate/"
           >{t("Donate")}</LinkButton
         >
       </div>
     </div>
     <div class="grid grid-cols-subgrid col-span-1 lg:col-span-2">
       <h2 class="col-span-2">{t("Download p5.js")}</h2>
       <div class="col-span-1">
-        <LinkButton class="w-full" variant="link" url="/download"
+        <LinkButton class="w-full" variant="link" url="/download/"
           >{t("Download Library")}</LinkButton
         >
       </div>

src/scripts/parsers/reference.ts

@@ -1,4 +1,4 @@
-import { cloneLibraryRepo, p5RepoUrl, readFile } from "../utils";
+import { cloneLibraryRepo,cleanUpDirectory, p5RepoUrl, readFile } from "../utils";
 import fs from "fs/promises";
 import { exec, execSync } from "child_process";
 import path from "path";
@@ -13,6 +13,10 @@ const localPath = path.join(__dirname, "in", "p5.js");
 const localSoundPath = path.join(__dirname, "in", "p5.sound.js");
 const yuidocOutputPath = path.join(__dirname, "out")
 
+//Directory to clean after cloning the libraries
+const parsersInPath = path.join(__dirname, "in");
+const parsersOutPath = path.join(__dirname, "out");
+
 /**
  * Main function to clone the p5.js library and save the YUIDoc output to a file
  */
@@ -77,6 +81,10 @@ export const parseLibraryReference =
     );
 
     await serveYuidocOutput('data');
+
+    //delete the cloned directories
+    await cleanUpDirectory(parsersInPath );
+    await cleanUpDirectory(parsersOutPath );
     return combined;
   };
 

src/scripts/utils.ts

@@ -304,3 +304,15 @@ export const rewriteRelativeMdLinks = (markdownText: string): string => {
     return `[${linkText}](${updatedUrl})`;
   });
 };
+/**
+ * Deletes the contents of the given directory.
+ * @param dirPath Path to the directory to clean up.
+ */
+export const cleanUpDirectory = async (dirPath: string) => {
+  try {
+    await fs.rm(dirPath, { recursive: true, force: true });
+    console.log(`Cleaned up directory: ${dirPath}`);
+  } catch (err) {
+    console.error(`Error cleaning up directory ${dirPath}: ${err}`);
+  }
+};