Merge pull request #556 from shibomb/fix/fix-duplicate-page-slug-for-i18n

davepagurek · web-flow · commit 181c6dc30356 · 2024-09-26T09:31:32.000-05:00
fix duplicate page slug for i18n
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/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
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/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`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: creating-styling-html`
`3`	`2`	`title: "Creating and Styling HTML"`
`4`	`3`	`description: Dive into the art of creative coding and learn to build and beautify HTML with p5.js.`
`5`	`4`	`category: web-design`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`---`
`2`		`-slug: custom-geometry`
`3`	`2`	`title: "Creating Custom Geometry in WebGL"`
`4`	`3`	`description: A guide to the different ways you can create your own 3D shapes.`
`5`	`4`	`category: webgl`