Merge branch 'main' into add-donate-page-zh

Author: Darrenhqf

.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 }
+  ]
+}

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/contributor-docs/en/README.mdx

@@ -59,7 +59,7 @@ Head over to [this link](../contributor_guidelines/) where you will be guided on
 
 Most of the time we will stick with this workflow quite strictly and, especially if you have contributed to other projects before, it may feel like there are too many hoops to jump through for what may be a simple contribution. However, the steps above are aimed to make it easy for you as a contributor and for stewards/maintainers to contribute meaningfully, while also making sure that you won't be spending time working on things that may not be accepted for various reasons. The steps above will help ensure that any proposals or fixes are adequately discussed and considered before any work begin, and often this will actually save you (and the steward/maintainer) time because the PR that would need additional fixing after review, or outright not accepted, would happen less often as a result.
 
-**We see contributing to p5.js as a learning opportunity** and we don't measure sucess by only looking at the volume of contributions we received. There is no time limit on how long it takes you to complete a contribution, so take your time and work at your own pace (we may check in after a long period of inactivity). Ask for help from any of the stewards or maintainers if you need them and we'll try our best to support you. For information related to area stewards or general maintenance of p5.js GitHub repository, please check out the [steward guidelines](../steward_guidelines/).
+**We see contributing to p5.js as a learning opportunity** and we don't measure success by only looking at the volume of contributions we received. There is no time limit on how long it takes you to complete a contribution, so take your time and work at your own pace (we may check in after a long period of inactivity). Ask for help from any of the stewards or maintainers if you need them and we'll try our best to support you. For information related to area stewards or general maintenance of p5.js GitHub repository, please check out the [steward guidelines](../steward_guidelines/).
 
 ## Non-source code contribution