Merge branch 'main' into v1.11.0-reference

davepagurek · web-flow · commit 42e9c6c256c6 · 2024-09-28T08:41:11.000-05:00
diff --git a/src/components/GridItem/Tutorial.astro b/src/components/GridItem/Tutorial.astro
@@ -1,6 +1,7 @@
 ---
 import Image from "@components/Image/index.astro";
 import type { CollectionEntry } from "astro:content";
+import { removeLocalePrefix } from "@i18n/utils";
 
 interface Props {
   item: CollectionEntry<"tutorials">;
@@ -10,7 +11,7 @@ interface Props {
 const { item, lazyLoad } = Astro.props;
 ---
 
-<a href={`/tutorials/${item.slug}/`} class="group hover:no-underline">
+<a href={`/tutorials/${removeLocalePrefix(item.slug).slice(1)}/`} class="group hover:no-underline">
   {
     item.data.featuredImageAlt && item.data.featuredImage && (
       <Image
diff --git a/src/content/libraries/en/p5.colorGenerator.yaml b/src/content/libraries/en/p5.colorGenerator.yaml
@@ -0,0 +1,10 @@
+name: p5.colorGenerator
+category: color
+description: p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point.
+author:
+- name: Alex Codes Art
+  url: https://alexcodesart.com
+sourceUrl: https://github.com/alexandru-postolache/p5.colorGenerator
+websiteUrl: https://alexandru-postolache.github.io/p5.colorGenerator/demo
+featuredImage: "../images/p5.colorGenerator.png"
+featuredImageAlt: Waves coloured using different tints of yellow
diff --git a/src/content/libraries/images/p5.colorGenerator.png b/src/content/libraries/images/p5.colorGenerator.png
diff --git a/src/content/pages/en/education-resources.mdx b/src/content/pages/en/education-resources.mdx
@@ -1,5 +1,4 @@
 ---
-slug: education-resources
 title: Education Resources
 ---
 
diff --git a/src/content/pages/en/libraries.mdx b/src/content/pages/en/libraries.mdx
@@ -1,5 +1,4 @@
 ---
-slug: libraries
 title: Libraries
 ---
 
diff --git a/src/content/pages/en/reference.mdx b/src/content/pages/en/reference.mdx
@@ -1,5 +1,4 @@
 ---
-slug: reference
 title: Reference
 ---
 
diff --git a/src/content/tutorials/en/animating-with-media-objects.mdx b/src/content/tutorials/en/animating-with-media-objects.mdx
@@ -1,5 +1,4 @@
 ---
-slug: animating-with-media-objects
 title: "Animating with Media Objects"
 description: Learn how to load images and GIFs to your sketches by creating an interactive garden!
 category: introduction
diff --git a/src/content/tutorials/en/color-gradients.mdx b/src/content/tutorials/en/color-gradients.mdx
@@ -1,5 +1,4 @@
 ---
-slug: color-gradients
 title: "Color Gradients"
 description: Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie.
 category: drawing
diff --git a/src/content/tutorials/en/conditionals-and-interactivity.mdx b/src/content/tutorials/en/conditionals-and-interactivity.mdx
@@ -1,5 +1,4 @@
 ---
-slug: conditionals-and-interactivity
 title: "Conditionals and Interactivity"
 description: A tutorial on how to use conditional statements and make interactive sketches.
 category: introduction
diff --git a/src/content/tutorials/en/coordinates-and-transformations.mdx b/src/content/tutorials/en/coordinates-and-transformations.mdx
@@ -1,5 +1,4 @@
 ---
-slug: coordinates-and-transformations
 title: "Coordinates and Transformations"
 description: An overview of the different ways you can position objects in WebGL mode.
 category: webgl
diff --git a/src/content/tutorials/en/creating-styling-html.mdx b/src/content/tutorials/en/creating-styling-html.mdx
@@ -1,5 +1,4 @@
 ---
-slug: creating-styling-html
 title: "Creating and Styling HTML"
 description: Dive into the art of creative coding and learn to build and beautify HTML with p5.js.
 category: web-design
diff --git a/src/content/tutorials/en/custom-geometry.mdx b/src/content/tutorials/en/custom-geometry.mdx
@@ -1,5 +1,4 @@
 ---
-slug: custom-geometry
 title: "Creating Custom Geometry in WebGL"
 description: A guide to the different ways you can create your own 3D shapes.
 category: webgl
diff --git a/src/content/tutorials/en/custom-shapes-and-smooth-curves.mdx b/src/content/tutorials/en/custom-shapes-and-smooth-curves.mdx
@@ -1,5 +1,4 @@
 ---
-slug: custom-shapes-and-smooth-curves
 title: "Custom Shapes and Smooth Curves"
 description: Use vertex(), bezierVertex(), beginShape() and endShape() to create angular and curved sparkle stickers to place on top of your webcam selfie.
 category: drawing
diff --git a/src/content/tutorials/en/data-structure-garden.mdx b/src/content/tutorials/en/data-structure-garden.mdx
@@ -1,5 +1,4 @@
 ---
-slug: data-structure-garden
 title: "Data Structure Garden"
 description: A tutorial on how to use JavaScript objects and arrays.
 category: introduction
diff --git a/src/content/tutorials/en/field-guide-to-debugging.mdx b/src/content/tutorials/en/field-guide-to-debugging.mdx
@@ -1,5 +1,4 @@
 ---
-slug: field-guide-to-debugging
 title: "Field Guide to Debugging"
 description: Learn some healthy habits and best practices for  locating bugs in your program, and finding ways to overcome them.
 category: advanced
diff --git a/src/content/tutorials/en/get-started.mdx b/src/content/tutorials/en/get-started.mdx
@@ -1,5 +1,4 @@
 ---
-slug: get-started
 title: Get Started
 description: A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape.
 category: introduction
diff --git a/src/content/tutorials/en/getting-started-with-nodejs.mdx b/src/content/tutorials/en/getting-started-with-nodejs.mdx
@@ -1,5 +1,4 @@
 ---
-slug: getting-started-with-nodejs
 title: "Getting Started with Node.js"
 description: Learn about HTTP requests and how to use Node.js in your p5.js projects to create dynamic projects that save and retrieve files.
 category: advanced
diff --git a/src/content/tutorials/en/how-to-optimize-your-sketches.mdx b/src/content/tutorials/en/how-to-optimize-your-sketches.mdx
@@ -1,5 +1,4 @@
 ---
-slug: how-to-optimize-your-sketches
 title: How to Optimize Your Sketches
 description: An advanced tutorial on how to optimize code in your sketches to run more efficiently.
 category: advanced
diff --git a/src/content/tutorials/en/intro-to-shaders.mdx b/src/content/tutorials/en/intro-to-shaders.mdx
@@ -1,5 +1,4 @@
 ---
-slug: intro-to-shaders
 title: "Introduction to Shaders"
 description: An introduction to the different ways you can create interesting visual effects with your computer's GPU.
 category: webgl
diff --git a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx
@@ -1,5 +1,4 @@
 ---
-slug: layered-rendering-with-framebuffers
 title: "Layered Rendering with Framebuffers"
 description: Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide.
 category: webgl
diff --git a/src/content/tutorials/en/lights-camera-materials.mdx b/src/content/tutorials/en/lights-camera-materials.mdx
@@ -1,5 +1,4 @@
 ---
-slug: lights-camera-materials
 title: "Lights, Camera, Materials"
 description: Learn how to light and frame 3D scenes, and how to style 3D objects.
 category: webgl
diff --git a/src/content/tutorials/en/loading-and-selecting-fonts.mdx b/src/content/tutorials/en/loading-and-selecting-fonts.mdx
@@ -1,5 +1,4 @@
 ---
-slug: loading-and-selecting-fonts
 title: "Loading and Selecting Fonts"
 description: "Explore typography in creative coding: A Quick guide to choosing and selecting fonts."
 category: web-design
diff --git a/src/content/tutorials/en/optimizing-webgl-sketches.mdx b/src/content/tutorials/en/optimizing-webgl-sketches.mdx
@@ -1,5 +1,4 @@
 ---
-slug: optimizing-webgl-sketches
 title: "Optimizing WebGL Sketches"
 description: Tips to help make your sketches run as smoothly as possible on as many devices as possible.
 category: webgl
diff --git a/src/content/tutorials/en/organizing-code-with-functions.mdx b/src/content/tutorials/en/organizing-code-with-functions.mdx
@@ -1,5 +1,4 @@
 ---
-slug: organizing-code-with-functions
 title: Organizing Code with Functions
 description: A tutorial on how to create and use functions to help you organize your code.
 category: introduction
diff --git a/src/content/tutorials/en/p5js-with-screen-reader.mdx b/src/content/tutorials/en/p5js-with-screen-reader.mdx
@@ -1,5 +1,4 @@
 ---
-slug: p5js-with-screen-reader
 title: "How to Use the p5.js Web Editor with a Screen Reader"
 description: A tutorial for setting up the p5.js Web Editor for screen readers.
 category: accessibility
diff --git a/src/content/tutorials/en/repeating-with-loops.mdx b/src/content/tutorials/en/repeating-with-loops.mdx
@@ -1,5 +1,4 @@
 ---
-slug: repeating-with-loops
 title: "Repeating with Loops"
 description: "Create a crawling caterpillar race using loops and arrays!"
 category: introduction
diff --git a/src/content/tutorials/en/responding-to-inputs.mdx b/src/content/tutorials/en/responding-to-inputs.mdx
@@ -1,5 +1,4 @@
 ---
-slug: responding-to-inputs
 title: "Responding to Inputs"
 description: "Code nostalgia: Unleash your creativity and bring a vintage snake game to life with p5.js!"
 category: web-design
diff --git a/src/content/tutorials/en/setting-up-your-environment.mdx b/src/content/tutorials/en/setting-up-your-environment.mdx
@@ -1,5 +1,4 @@
 ---
-slug: setting-up-your-environment
 title: "Setting Up Your Environment"
 description: A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects.
 category: introduction
@@ -275,7 +274,7 @@ Once your project is saved, you can share it!
 - The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs)
 - [p5.js reference page](/reference/)
 - [Javascript - MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
-- [Field Guide to Debugging](https://docs.google.com/document/d/1Uc5Uey4_UDgix6-O0ez-pcRD-FZQSOaRD9TAGZYzD6c/edit)
+- [Field Guide to Debugging](/tutorials/field-guide-to-debugging)
 - [How to Use the p5.js Web Editor with a Screen Reader](/tutorials/p5js-with-screen-reader/)
 
 ---
@@ -446,7 +445,7 @@ Visit the [p5.js reference](/reference/) for more p5.js functions, such as other
 It is easy to spell function names wrong or forget a comma. Syntax rules help the computer interpret code. When a “rule” is broken (for example, if [`circle()`](/reference/p5/circle) is spelled wrong), a message will appear in the browser’s console. These errors are commonly referred to as bugs; when your code does not execute correctly, there might be a bug in your code! 
 
 - Visit these resources for instructions on how to view the console in specific browsers: [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/)
-- Visit the [Field Guide to Debugging](https://docs.google.com/document/d/1Uc5Uey4_UDgix6-O0ez-pcRD-FZQSOaRD9TAGZYzD6c/edit) for more information on how to fix errors in your code.
+- Visit the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) for more information on how to fix errors in your code.
 
 
 ### Accessibility note
@@ -466,7 +465,7 @@ If you are using a screen reader, use the [p5.js Web Editor](https://editor.p5js
 - The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs)
 - [p5.js reference page](/reference/)
 - [Javascript - MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
-- [Field Guide to Debugging](https://docs.google.com/document/d/1Uc5Uey4_UDgix6-O0ez-pcRD-FZQSOaRD9TAGZYzD6c/edit)
+- [Field Guide to Debugging](/tutorials/field-guide-to-debugging)
 - [p5.js with VSCode](https://www.youtube.com/watch?v=zMAnM9ly0a8) (video tutorial)
 - [VSCode Overview](https://code.visualstudio.com/docs/getstarted/introvideos)
 - [p5.vscode reference](https://github.com/antiboredom/p5.vscode/blob/master/README.md)
diff --git a/src/content/tutorials/en/simple-melody-app.mdx b/src/content/tutorials/en/simple-melody-app.mdx
@@ -1,5 +1,4 @@
 ---
-slug: simple-melody-app
 title: "Simple Melody App"
 description: Use p5.Oscillator objects to generate musical notes in an app where users can write and replay melodies they create by interacting with the canvas!
 category: advanced
diff --git a/src/content/tutorials/en/speak-with-your-hands.mdx b/src/content/tutorials/en/speak-with-your-hands.mdx
@@ -1,5 +1,4 @@
 ---
-slug: speak-with-your-hands
 title: "Abracadabra: Speak With Your Hands in p5.js and ml5.js"
 description: Control sketches with your hands using ml5.js
 category: advanced
diff --git a/src/content/tutorials/en/variables-and-change.mdx b/src/content/tutorials/en/variables-and-change.mdx
@@ -1,5 +1,4 @@
 ---
-slug: variables-and-change
 title: "Variables and Change"
 description: Learn about variables and how they can be used to create animated sketches!
 category: introduction
diff --git a/src/content/tutorials/en/writing-accessible-canvas-descriptions.mdx b/src/content/tutorials/en/writing-accessible-canvas-descriptions.mdx
@@ -1,5 +1,4 @@
 ---
-slug: writing-accessible-canvas-descriptions
 title: "Writing Accessible Canvas Descriptions"
 description: A tutorial for how to label p5.js code for screen readers.
 category: accessibility
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -10,6 +10,7 @@ import { capitalize, getTopicInfo, type PageTopic } from "../pages/_utils";
 import "@styles/base.scss";
 import type { CollectionEntry } from "astro:content";
 import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
+import { removeLocalePrefix } from "@i18n/utils";
 
 interface Props {
   title: string;
@@ -39,7 +40,7 @@ const currentLocale = getCurrentLocale(Astro.url.pathname);
 
 const slug = title.toLowerCase().split(/\s+/).join('-');
 const pages = await getCollectionInLocaleWithFallbacks("pages", currentLocale);
-const headerPage = pages.find((page) => page.slug === slug);
+const headerPage = pages.find((page) => removeLocalePrefix(page.slug).slice(1) === slug);
 let HeaderContent: any = undefined;
 if (headerPage) {
   const { Content } = await headerPage.render();
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -65,7 +65,13 @@ export const ensureCorrectLocalePrefixesInHtmlLinks = (
   $("a").each(function () {
     let href = $(this).attr("href");
     // Skip if href is undefined, an external link, or written with a dot slash
-    if (!href || href.startsWith("http") || href.startsWith("./")) return;
+    if (
+      !href ||
+      href.startsWith("http") ||
+      href.startsWith("./") ||
+      href.startsWith("#")
+    )
+      return;
 
     const startsWithLocale = nonDefaultSupportedLocales.some(
       (locale) => href && href.startsWith(`/${locale}/`),
diff --git a/src/pages/[locale]/education-resources/index.astro b/src/pages/[locale]/education-resources/index.astro
@@ -6,6 +6,7 @@ import { nonDefaultSupportedLocales } from "@i18n/const";
 import { setJumpToState, type JumpToLink } from "@/src/globals/state";
 import { getCurrentLocale, getUiTranslator } from "@i18n/utils";
 import { categories } from "@/src/content/tutorials/config";
+import { removeLocalePrefix } from "@i18n/utils";
 
 export async function getStaticPaths() {
   const pages = nonDefaultSupportedLocales.map(async (locale) => ({
@@ -22,7 +23,7 @@ export async function getStaticPaths() {
 }
 
 const { pages, locale } = Astro.props;
-const page = pages.find((page) => page.slug === 'education-resources')!
+const page = pages.find((page) => removeLocalePrefix(page.slug).slice(1) === 'education-resources')!
 
 const { Content } = await page.render();
 
diff --git a/src/pages/education-resources/index.astro b/src/pages/education-resources/index.astro
@@ -6,9 +6,10 @@ import { getCollectionInDefaultLocale } from "@pages/_utils";
 import { setJumpToState, type JumpToLink } from "@/src/globals/state";
 import { getCurrentLocale, getUiTranslator } from "@i18n/utils";
 import { categories } from "@/src/content/tutorials/config";
+import { removeLocalePrefix } from "@i18n/utils";
 
 const pages = await getCollectionInDefaultLocale("pages");
-const page = pages.find((page) => page.slug === 'education-resources')!
+const page = pages.find((page) => removeLocalePrefix(page.slug).slice(1) === 'education-resources')!
 
 const { Content } = await page.render();
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: education-resources`
`3`	`2`	`title: Education Resources`
`4`	`3`	`---`
`5`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: libraries`
`3`	`2`	`title: Libraries`
`4`	`3`	`---`
`5`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: reference`
`3`	`2`	`title: Reference`
`4`	`3`	`---`
`5`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: animating-with-media-objects`
`3`	`2`	`title: "Animating with Media Objects"`
`4`	`3`	`description: Learn how to load images and GIFs to your sketches by creating an interactive garden!`
`5`	`4`	`category: introduction`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: color-gradients`
`3`	`2`	`title: "Color Gradients"`
`4`	`3`	`description: Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie.`
`5`	`4`	`category: drawing`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: conditionals-and-interactivity`
`3`	`2`	`title: "Conditionals and Interactivity"`
`4`	`3`	`description: A tutorial on how to use conditional statements and make interactive sketches.`
`5`	`4`	`category: introduction`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: coordinates-and-transformations`
`3`	`2`	`title: "Coordinates and Transformations"`
`4`	`3`	`description: An overview of the different ways you can position objects in WebGL mode.`
`5`	`4`	`category: webgl`