Merge branch 'main' into patch-1

Author: ksen0

.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: "2.0"
+          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 }}

README.md

@@ -12,7 +12,7 @@ If you are here to edit or translate content, please do so inside [the `src/cont
 For making code changes, please check out the [technical overview](./docs/technical_overview.md) to get started.
 
 ### Adding Libraries
-Follow the steps in the <a href="./docs/contributing_libraries.md">Contributing Libraries</a> doc if you would like to add your libary to the collection!
+Follow the steps in the <a href="./docs/contributing_libraries.md">Contributing Libraries</a> doc if you would like to add your library to the collection!
 
 ## Add Yourself to p5.js Contributors
 We recognize all types of contributions. This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Add yourself to the [p5.js repository readme](https://github.com/processing/p5.js/blob/main/README.md#contributors) by following the [instructions here](https://github.com/processing/p5.js/issues/2309)!

astro.config.mjs

@@ -63,6 +63,9 @@ export default defineConfig({
     },
   },
   vite: {
+    optimizeDeps: {
+      exclude: ["@swc/html"]
+    },
     rollupOptions: {
       external: ["/src/scripts/*"],
     },

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!

docs/localization.md

@@ -1,6 +1,6 @@
 # Localization Architecture
 
-An important feature of the p5.js website is support multiple languages (four and counting!). This requires the website to build and serve every page in each of the supported languages.
+An important feature of the p5.js website is its support for multiple languages (four and counting!). This requires the website to build and serve every page in each of the supported languages.
 
 Our website framework Astro has localization support, but it doesn't cover our full set of needs so the localization tooling in this repo is largely [hand rolled](https://www.quora.com/Computer-Science-Where-did-the-phrase-Roll-your-own-come-from-and-why-is-it-used-in-CS).
 
@@ -29,7 +29,7 @@ Taking the tutorials page as an example:
 
 Both of these routes use the [TutorialsLayout](/src/layouts/TutorialsLayout.astro) to render the page by passing in the content in the correct language.
 
-The main difference between these two routing files is how they retrieve the correct translation. The English version retreives the English version of the content. The other translations retrieve their version of the content and then fill in any gaps with English versions. See `getCollectionInLocaleWithFallbacks()` for how this works.
+The main difference between these two routing files is how they retrieve the correct translation. The English version retrieves the English version of the content. The other translations retrieve their version of the content and then fill in any gaps with English versions. See `getCollectionInLocaleWithFallbacks()` for how this works.
 
 Because of this subtle duplication, we try to keep the files in `src/pages/` as short as possible and move rendering logic into the [layout files](/src/layouts/).
 
@@ -89,7 +89,7 @@ const uiTranslations = await getUiTranslationWithFallback(currentLocale);
 
 ```
 
-And then in the HelloButton Preact component, we acess the translations using object keys:
+And then in the HelloButton Preact component, we access the translations using object keys:
 
 ```jsx
 export const HelloButton = (props) => {
@@ -98,7 +98,7 @@ export const HelloButton = (props) => {
 };
 ```
 
-Essentially, the arguments you would pass to `t` in the first example for astro files are the same you would pass as keys to the `uiTranslations` object. If its a nested key, that looks like:
+Essentially, the arguments you would pass to `t` in the first example for astro files are the same you would pass as keys to the `uiTranslations` object. If it's a nested key, that looks like:
 
 ```jsx
 uiTranslations["sectionTitles"]["main"];

docs/styles_architecture.md

@@ -6,7 +6,7 @@ There are a few ways you can write CSS in this project:
 
 ### 1. Use [Tailwind](https://tailwindcss.com/) css classes directly within layouts and components
 
-This is often the fastest way to add custom styles if you are familair with [Tailwind](https://tailwindcss.com/). See a good example in `/src/p5/p5.js-website/src/components/Footer/index.astro`.
+This is often the fastest way to add custom styles if you are familiar with [Tailwind](https://tailwindcss.com/). See a good example in `/src/p5/p5.js-website/src/components/Footer/index.astro`.
 
 ### 2. Write styles in the [SCSS](https://sass-lang.com/) files in `/styles` and use those classes in layouts and components
 
@@ -18,7 +18,7 @@ This can be useful for situations where the styling you need for a particular ar
 
 #### 4. Write css in a style tag within an `.astro` file
 
-This can be a good approach when you need a few custom styles for a single a layout or component but adding an extra SCSS feels like overkill. See an example in `/src/layouts/AboutLayout.astro`
+This can be a good approach when you need a few custom styles for a single layout or component but adding an extra SCSS feels like overkill. See an example in `/src/layouts/AboutLayout.astro`
 
 ## Useful Global Styles
 

public/assets/animals.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<animals>
+  <mammal id="0" species="Capra hircus">Goat</mammal>
+  <mammal id="1" species="Panthera pardus">Leopard</mammal>
+  <mammal id="2" species="Equus zebra">Zebra</mammal>
+  <reptile id="3" species="Caretta caretta">Turtle</reptile>
+</animals>

public/assets/data.json

@@ -0,0 +1,28 @@
+{
+  "x": 50,
+  "y": 50,
+  "d": 40,
+  "color": "deeppink",
+  "bubbles": [
+    { "x": 73, "y": 70.1, "d": 17.1 },
+    { "x": 68.3, "y": 71.8, "d": 24.3 },
+    { "x": 2.1, "y": 76.6, "d": 23.6 },
+    { "x": 74.5, "y": 8.5, "d": 21.5 },
+    { "x": 80.4, "y": 80.3, "d": 8.1 },
+    { "x": 1.5, "y": 62.4, "d": 33.9 },
+    { "x": 48, "y": 14.6, "d": 32.5 },
+    { "x": 46.7, "y": 13.1, "d": 37.2 },
+    { "x": 95.4, "y": 73.3, "d": 5.7 },
+    { "x": 23.6, "y": 75.1, "d": 36.9 },
+    { "x": 82.6, "y": 2.9, "d": 16.6 },
+    { "x": 82.5, "y": 99.1, "d": 4 },
+    { "x": 44, "y": 0.7, "d": 5.9 },
+    { "x": 86.4, "y": 65.9, "d": 38.6 },
+    { "x": 45.3, "y": 24.9, "d": 9.4 },
+    { "x": 64.4, "y": 84, "d": 26.7 },
+    { "x": 51.4, "y": 55.1, "d": 23.4 },
+    { "x": 83.2, "y": 96.4, "d": 33.5 },
+    { "x": 52.2, "y": 67.7, "d": 5.9 },
+    { "x": 75, "y": 85.1, "d": 6.1 }
+  ]
+}