Implemented language check in 404 page

package-lock.json

@@ -9,7 +9,7 @@
       "dependencies": {
         "@astrojs/check": "^0.7.0",
         "@astrojs/sitemap": "^3.1.6",
-        "@astrojs/starlight": "^0.24.5",
+        "@astrojs/starlight": "^0.25.0",
         "@astrojs/starlight-tailwind": "^2.0.3",
         "@astrojs/tailwind": "^5.1.0",
         "@astrojs/vercel": "^7.7.2",
@@ -18,7 +18,7 @@
         "@preline/dropdown": "^2.3.0",
         "@preline/overlay": "^2.3.0",
         "@preline/tabs": "^2.3.0",
-        "astro": "^4.11.3",
+        "astro": "^4.11.5",
         "astro-compressor": "^0.4.1",
         "clipboard": "^2.0.11",
         "globby": "^14.0.2",
@@ -331,9 +331,9 @@
       }
     },
     "node_modules/@astrojs/starlight": {
-      "version": "0.24.5",
+      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.24.5.tgz",
+      "resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.25.0.tgz",
-      "integrity": "sha512-DDI8NpLzk+ReBudhAV09OhO5DxD+KN4Nnp3YlG6kwn/F8fmywNTNgY7VW67Z8aad+A/85OOiQOtq9wIFNRy3YA==",
+      "integrity": "sha512-1T317AsdmMa+EP0tAPZY84G/9Ez79/8G6fHBaUr994GZSaptpr45vlyxyWtxlgIbdlio2EhKaXay4RVqqUKqXw==",
       "dependencies": {
         "@astrojs/mdx": "^3.1.0",
         "@astrojs/sitemap": "^3.1.5",
@@ -2179,9 +2179,9 @@
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "1.9.0",
+      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.10.1.tgz",
-      "integrity": "sha512-cbSoY8P/jgGByG8UOl3jnP/CWg/Qk+1q+eAKWtcrU3pNoILF8wTsLB0jT44qUBV8Ce1SvA9uqcM9Xf+u3fJFBw=="
+      "integrity": "sha512-qdiJS5a/QGCff7VUFIqd0hDdWly9rDp8lhVmXVrS11aazX8LOTRLHAXkkEeONNsS43EcCd7gax9LLoOz4vlFQA=="
     },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "2.3.0",
@@ -2678,9 +2678,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "4.11.3",
+      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-4.11.3.tgz",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-4.11.5.tgz",
-      "integrity": "sha512-SuZbB/71XVn+WqWNCe7XOfHuqhS+k4gj8+A3wluTZQrORGaHUFRn/f8F9Tu5yESQZB1q8UKhahvHwkTV3AdVsg==",
+      "integrity": "sha512-TCRhuaLwrxwMhS8S1GG+ZTdrAXigX9C8E/YUTs/r2t+owHxDgwl86IV9xH1IHrCPoqhK6civyAQNOT+GKmkb0A==",
       "dependencies": {
         "@astrojs/compiler": "^2.8.1",
         "@astrojs/internal-helpers": "0.4.1",
@@ -2732,13 +2732,13 @@
         "prompts": "^2.4.2",
         "rehype": "^13.0.1",
         "semver": "^7.6.2",
-        "shiki": "^1.9.0",
+        "shiki": "^1.10.0",
-        "string-width": "^7.1.0",
+        "string-width": "^7.2.0",
         "strip-ansi": "^7.1.0",
-        "tsconfck": "^3.1.0",
+        "tsconfck": "^3.1.1",
         "unist-util-visit": "^5.0.0",
         "vfile": "^6.0.1",
-        "vite": "^5.3.1",
+        "vite": "^5.3.2",
         "vitefu": "^0.2.5",
         "which-pm": "^2.2.0",
         "yargs-parser": "^21.1.1",
@@ -7098,9 +7098,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
+      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "funding": [
         {
           "type": "opencollective",
@@ -7117,7 +7117,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "source-map-js": "^1.2.0"
       },
       "engines": {
@@ -8329,11 +8329,11 @@
       }
     },
     "node_modules/shiki": {
-      "version": "1.9.0",
+      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.10.1.tgz",
-      "integrity": "sha512-i6//Lqgn7+7nZA0qVjoYH0085YdNk4MC+tJV4bo+HgjgRMJ0JmkLZzFAuvVioJqLkcGDK5GAMpghZEZkCnwxpQ==",
+      "integrity": "sha512-uafV7WCgN4YYrccH6yxpnps6k38sSTlFRrwc4jycWmhWxJIm9dPrk+XkY1hZ2t0I7jmacMNb15Lf2fspa/Y3lg==",
       "dependencies": {
-        "@shikijs/core": "1.9.0"
+        "@shikijs/core": "1.10.1"
       }
     },
     "node_modules/signal-exit": {
@@ -8466,9 +8466,9 @@
       }
     },
     "node_modules/string-width": {
-      "version": "7.1.0",
+      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
-      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dependencies": {
         "emoji-regex": "^10.3.0",
         "get-east-asian-width": "^1.0.0",
@@ -8887,9 +8887,9 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tsconfck": {
-      "version": "3.1.0",
+      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.1.tgz",
-      "integrity": "sha512-CMjc5zMnyAjcS9sPLytrbFmj89st2g+JYtY/c02ug4Q+CZaAtCgbyviI0n1YvjZE/pzoc6FbNsINS13DOL1B9w==",
+      "integrity": "sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==",
       "bin": {
         "tsconfck": "bin/tsconfck.js"
       },
@@ -9200,12 +9200,12 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.3.1",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
-      "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
+      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.39",
         "rollup": "^4.13.0"
       },
       "bin": {

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/starlight": "^0.24.5",
+    "@astrojs/starlight": "^0.25.0",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^7.7.2",
@@ -21,7 +21,7 @@
     "@preline/dropdown": "^2.3.0",
     "@preline/overlay": "^2.3.0",
     "@preline/tabs": "^2.3.0",
-    "astro": "^4.11.3",
+    "astro": "^4.11.5",
     "astro-compressor": "^0.4.1",
     "clipboard": "^2.0.11",
     "globby": "^14.0.2",

src/pages/404.astro

@@ -4,53 +4,64 @@ import MainLayout from "@/layouts/MainLayout.astro";
 import Btn404 from "@components/ui/buttons/Btn404.astro";
 import { SITE } from "@data/constants";
 
+// Define types for translations
+type TranslationKeys = 'en' | 'fr';
+type Translations = {
+  [key in TranslationKeys]: {
+    pageTitle: string;
+    subTitle: string;
+    content: string;
+    btnTitle: string;
+  }
+};
+
 // Define variables for page content
+const defaultLang: TranslationKeys = "en";
+const translations: Translations = {
+  en: {
+    pageTitle: `Page Not Found | ${SITE.title}`,
+    subTitle: "Oops, this isn't the tool you were looking for!",
+    content: "Don't let this hiccup slow you down. Let's get you back to building your masterpiece.",
+    btnTitle: "Go Back",
+  },
+  fr: {
+    pageTitle: `Page Non Trouvée | ${SITE.title}`,
+    subTitle: "Oops, ce n'est pas l'outil que vous recherchiez!",
+    content: "Ne laissez pas ce contretemps vous ralentir. Revenons à la construction de votre chef-d'œuvre.",
+    btnTitle: "Retournez",
+  }
+};
 
-const title: string = "404";
+// Determine language from the URL
+const urlPath = Astro.url.pathname;
+const langCodeMatch = urlPath.match(/^\/(en|fr)\//);
+const lang: TranslationKeys = langCodeMatch ? langCodeMatch[1] as TranslationKeys : defaultLang;
 
-const {
+const { pageTitle, subTitle, content, btnTitle } = translations[lang];
-  subTitle = Astro.currentLocale === "fr" ? "Oops, ce n'est pas l'outil que vous recherchiez!" : "Oops, this isn't the tool you were looking for!", content = Astro.currentLocale === "fr" ? "Ne laissez pas ce contretemps vous ralentir. Revenons à la construction de votre chef-d'œuvre." : "Don't let this hiccup slow you down. Let's get you back to building your masterpiece.", btnTitle = Astro.currentLocale === "fr" ? "Retournez" : "Go Back",
-  pageTitle = Astro.currentLocale === "fr" ? `Page Non Trouvée | ${SITE.title}` : `Page Not Found | ${SITE.title}`
-} = Astro.props;
-
-interface Props {
-  pageTitle: string;
-  subTitle: string;
-  content: string;
-  btnTitle: string;
-}
 ---
 
-<MainLayout
+<MainLayout title={pageTitle}>
-  title={pageTitle}
->
   <section class="grid h-svh place-content-center">
     <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
       <div class="mx-auto max-w-screen-sm text-center">
-        <h1
+        <h1 class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl">
-          class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl"
+          404
-        >
-          {title}
         </h1>
-        <p
+        <p id="subtitle" class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl">
-          class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl"
-        >
           {subTitle}
         </p>
-
+        <p id="content" class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400">
-        <p
-          class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400"
-        >
           {content}
         </p>
-        <!--Display a button that navigates user back to the previous page-->
+        <!-- Display a button that navigates user back to the previous page -->
         <Btn404 title={btnTitle} id="go-back" />
       </div>
     </div>
   </section>
 </MainLayout>
-<!--JavaScript code that adds click event to the Button, resulting in going back to the previous page in history-->
+
-<script>
+<!-- JavaScript code to handle going back to the previous page -->
+<script is:inline>
   document.getElementById("go-back")?.addEventListener("click", () => {
     history.back();
   });