From d1c619bb9e0704a6c749fc5df55724a38cc25c38 Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Sun, 8 Sep 2024 14:53:53 +0400 Subject: [PATCH] Refactor language switching logic for blog posts, insights and products - Ensure URLs maintain correct structure without duplicating language prefixes - Update script to dynamically reconstruct URLs when switching languages - Improve logic for adding and removing language prefixes based on current path --- src/components/ui/LanguagePicker.astro | 24 +++++------ src/components/ui/cards/CardBlog.astro | 4 +- src/components/ui/cards/CardBlogRecent.astro | 4 +- src/components/ui/cards/CardInsight.astro | 6 ++- src/components/ui/cards/CardRelated.astro | 4 +- src/components/ui/cards/CardSmall.astro | 4 +- src/components/ui/cards/CardWide.astro | 4 +- src/pages/blog/[...slug].astro | 29 +++++++------ src/pages/fr/blog/[...slug].astro | 44 ++++++++++---------- src/pages/fr/blog/index.astro | 2 +- src/pages/fr/insights/[...slug].astro | 13 +++--- src/pages/fr/products/[...slug].astro | 16 ++++--- src/pages/insights/[...slug].astro | 15 ++++--- src/pages/products/[...slug].astro | 16 ++++--- 14 files changed, 104 insertions(+), 81 deletions(-) diff --git a/src/components/ui/LanguagePicker.astro b/src/components/ui/LanguagePicker.astro index ed22dd0..4454b04 100644 --- a/src/components/ui/LanguagePicker.astro +++ b/src/components/ui/LanguagePicker.astro @@ -74,20 +74,18 @@ import Icon from "./icons/Icon.astro"; // Disable the selection of the same language if (lang === url.pathname.split("/")[1]) return; - if ( - url.pathname.includes("/post") || - url.pathname.includes("/insight") || - url.pathname.includes("/item") - ) { - if (url.pathname.includes("en")) { - pathParts.unshift(lang); - pathParts.splice(2, 0, lang); - } else { - pathParts.unshift(lang); - pathParts.splice(2, 0, "en"); - } - } else { + // Determine if the current URL already has a language prefix + const currentLang = languages.includes(pathParts[0] as TLanguage) ? pathParts[0] : "en"; + + // Remove current language prefix from pathParts + if (languages.includes(pathParts[0] as TLanguage)) { + pathParts.shift(); + } + + // Determine if we are switching to a different language + if (lang !== currentLang) { if (lang !== "en") { + // Add the new language prefix for non-English pathParts.unshift(lang); } } diff --git a/src/components/ui/cards/CardBlog.astro b/src/components/ui/cards/CardBlog.astro index 3d6439d..6bde4ae 100644 --- a/src/components/ui/cards/CardBlog.astro +++ b/src/components/ui/cards/CardBlog.astro @@ -19,7 +19,9 @@ interface Props { which automatically prefetches the linked page to speed up navigation. --> diff --git a/src/components/ui/cards/CardBlogRecent.astro b/src/components/ui/cards/CardBlogRecent.astro index ce6f573..6f9f0f3 100644 --- a/src/components/ui/cards/CardBlogRecent.astro +++ b/src/components/ui/cards/CardBlogRecent.astro @@ -36,7 +36,7 @@ interface Props { > {blogEntry.data.description} @@ -57,7 +57,7 @@ interface Props {
diff --git a/src/components/ui/cards/CardInsight.astro b/src/components/ui/cards/CardInsight.astro index 94507f7..d9d61ef 100644 --- a/src/components/ui/cards/CardInsight.astro +++ b/src/components/ui/cards/CardInsight.astro @@ -6,11 +6,13 @@ import type { CollectionEntry } from "astro:content"; const { insightEntry, + insightLocale, label = Astro.currentLocale === "fr" ? "Lire plus" : "Read more", } = Astro.props; interface Props { insightEntry: CollectionEntry<"insights">; + insightLocale?: string; label?: string; } --- @@ -18,7 +20,9 @@ interface Props {
diff --git a/src/components/ui/cards/CardRelated.astro b/src/components/ui/cards/CardRelated.astro index 2d5b665..28d7b52 100644 --- a/src/components/ui/cards/CardRelated.astro +++ b/src/components/ui/cards/CardRelated.astro @@ -14,7 +14,9 @@ interface Props {
diff --git a/src/components/ui/cards/CardSmall.astro b/src/components/ui/cards/CardSmall.astro index a65ed5e..de5ec93 100644 --- a/src/components/ui/cards/CardSmall.astro +++ b/src/components/ui/cards/CardSmall.astro @@ -18,7 +18,9 @@ const imageClass = diff --git a/src/components/ui/cards/CardWide.astro b/src/components/ui/cards/CardWide.astro index 8fc9e72..964f8d6 100644 --- a/src/components/ui/cards/CardWide.astro +++ b/src/components/ui/cards/CardWide.astro @@ -18,7 +18,9 @@ const imageClass = diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 30369c2..957cf19 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -12,25 +12,26 @@ import { getCollection } from "astro:content"; import type { CollectionEntry } from "astro:content"; import { SITE } from "@data/constants"; -// getStaticPaths is used to pre-render all routes based on the blog posts +// Update getStaticPaths for English posts export async function getStaticPaths() { - const blogPosts = await getCollection("blog", ({ id }) => { - return id.startsWith("en/"); + const blogPosts = await getCollection("blog", ({ id }) => + id.startsWith("en/") + ); + return blogPosts.map((post) => { + const slugWithoutLang = post.slug.replace(/^en\//, ""); // Remove the "en/" prefix + return { + params: { slug: slugWithoutLang }, + props: { post }, + }; }); - return blogPosts.map((post) => ({ - params: { slug: post.slug }, - props: { post }, - })); } + // Get the current post's data const { post } = Astro.props; -// Get all blog posts const blogPosts: CollectionEntry<"blog">[] = await getCollection( "blog", - ({ id }) => { - return id.startsWith("en/"); - } + ({ id }) => id.startsWith("en/") ); // Filter out the current post to get related posts @@ -54,10 +55,8 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
- - {post.data.author} + + {post.data.author}
  • { - return id.startsWith("fr/"); + const blogPosts = await getCollection("blog", ({ id }) => + id.startsWith("fr/") + ); + return blogPosts.map((post) => { + const slugWithoutLang = post.slug.replace(/^fr\//, ""); // Remove the "fr/" prefix + return { + params: { lang: "fr", slug: slugWithoutLang }, + props: { post }, + }; }); - return blogPosts.map((post) => ({ - params: { slug: post.slug }, - props: { post }, - })); } -// Get the current post's data + const { post } = Astro.props; -// Get all blog posts -const blogPosts: CollectionEntry<"blog">[] = await getCollection("blog", - ({ id }) => { - return id.startsWith("fr/"); - } +// Fetch related posts +const blogPosts: CollectionEntry<"blog">[] = await getCollection( + "blog", + ({ id }) => id.startsWith("fr/") ); - -// Filter out the current post to get related posts -// Note: This is a very basic way of choosing related posts, just for the purpose of the example. -// In a production site, you might want to implement a more robust algorithm, choosing related posts based on tags, categories, dates, authors, or keywords. -// See example: https://blog.codybrunner.com/2024/adding-related-articles-with-astro-content-collections/ const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter( (blogEntry) => blogEntry.slug !== post.slug ); const pageTitle: string = `${post.data.title} | ${SITE.title}`; - --- - +
    @@ -159,7 +153,11 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
    - {relatedPosts.map((entry) => )} + { + relatedPosts.map((entry) => ( + + )) + }
    diff --git a/src/pages/fr/blog/index.astro b/src/pages/fr/blog/index.astro index 7fb1128..522fff5 100644 --- a/src/pages/fr/blog/index.astro +++ b/src/pages/fr/blog/index.astro @@ -108,7 +108,7 @@ const pageTitle: string = `Blog | ${SITE.title}`;
    { insightPosts.map((insightEntry) => ( - + )) }
    diff --git a/src/pages/fr/insights/[...slug].astro b/src/pages/fr/insights/[...slug].astro index fb70622..26422e0 100644 --- a/src/pages/fr/insights/[...slug].astro +++ b/src/pages/fr/insights/[...slug].astro @@ -7,11 +7,14 @@ import { getCollection } from "astro:content"; // Use `getStaticPaths` to generate static routes for generated pages on build export async function getStaticPaths() { - const insightPosts = await getCollection("insights"); - return insightPosts.map((post) => ({ - params: { slug: post.slug }, - props: { post }, - })); + const insightPosts = await getCollection("insights", ({ id }) => id.startsWith("fr/")); + return insightPosts.map((post) => { + const slugWithoutLang = post.slug.replace(/^fr\//, ''); // Remove the "fr/" prefix + return { + params: { lang: 'fr', slug: slugWithoutLang }, + props: { post }, + }; + }); } // Get the props for this page that define a specific insight post diff --git a/src/pages/fr/products/[...slug].astro b/src/pages/fr/products/[...slug].astro index 04f0c71..8b78cc4 100644 --- a/src/pages/fr/products/[...slug].astro +++ b/src/pages/fr/products/[...slug].astro @@ -14,14 +14,18 @@ declare global { } } // This gets the static paths for all the unique products + export async function getStaticPaths() { - const productEntries = await getCollection("products", ({ id }) => { - return id.startsWith("fr/"); + const productEntries = await getCollection("products", ({ id }) => + id.startsWith("fr/") + ); + return productEntries.map((product) => { + const slugWithoutLang = product.slug.replace(/^fr\//, ""); // Remove the "fr/" prefix + return { + params: { lang: "fr", slug: slugWithoutLang }, + props: { product }, + }; }); - return productEntries.map((product) => ({ - params: { slug: product.slug }, - props: { product }, - })); } const { product } = Astro.props; diff --git a/src/pages/insights/[...slug].astro b/src/pages/insights/[...slug].astro index fb70622..e733869 100644 --- a/src/pages/insights/[...slug].astro +++ b/src/pages/insights/[...slug].astro @@ -7,11 +7,16 @@ import { getCollection } from "astro:content"; // Use `getStaticPaths` to generate static routes for generated pages on build export async function getStaticPaths() { - const insightPosts = await getCollection("insights"); - return insightPosts.map((post) => ({ - params: { slug: post.slug }, - props: { post }, - })); + const insightPosts = await getCollection("insights", ({ id }) => + id.startsWith("en/") + ); + return insightPosts.map((post) => { + const slugWithoutLang = post.slug.replace(/^en\//, ""); // Remove the "fr/" prefix + return { + params: { slug: slugWithoutLang }, + props: { post }, + }; + }); } // Get the props for this page that define a specific insight post diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro index e81bb04..3531558 100644 --- a/src/pages/products/[...slug].astro +++ b/src/pages/products/[...slug].astro @@ -15,14 +15,18 @@ declare global { } // This gets the static paths for all the unique products + export async function getStaticPaths() { - const productEntries = await getCollection("products", ({ id }) => { - return id.startsWith("en/"); + const productEntries = await getCollection("products", ({ id }) => + id.startsWith("en/") + ); + return productEntries.map((product) => { + const slugWithoutLang = product.slug.replace(/^en\//, ""); // Remove the "en/" prefix + return { + params: { slug: slugWithoutLang }, + props: { product }, + }; }); - return productEntries.map((product) => ({ - params: { slug: product.slug }, - props: { product }, - })); } const { product } = Astro.props;