Implemented language check in 404 page
This commit is contained in:
Emil Gulamov
parent
278d510da0
commit
825fd95cbd
3 changed files with 75 additions and 64 deletions
66
package-lock.json
generated
66
package-lock.json
generated
|
|
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.24.5.tgz",
|
||||
"integrity": "sha512-DDI8NpLzk+ReBudhAV09OhO5DxD+KN4Nnp3YlG6kwn/F8fmywNTNgY7VW67Z8aad+A/85OOiQOtq9wIFNRy3YA==",
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.25.0.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.9.0.tgz",
|
||||
"integrity": "sha512-cbSoY8P/jgGByG8UOl3jnP/CWg/Qk+1q+eAKWtcrU3pNoILF8wTsLB0jT44qUBV8Ce1SvA9uqcM9Xf+u3fJFBw=="
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.10.1.tgz",
|
||||
"integrity": "sha512-qdiJS5a/QGCff7VUFIqd0hDdWly9rDp8lhVmXVrS11aazX8LOTRLHAXkkEeONNsS43EcCd7gax9LLoOz4vlFQA=="
|
||||
},
|
||||
"node_modules/@sindresorhus/merge-streams": {
|
||||
"version": "2.3.0",
|
||||
|
|
@ -2678,9 +2678,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/astro": {
|
||||
"version": "4.11.3",
|
||||
"resolved": "https://registry.npmjs.org/astro/-/astro-4.11.3.tgz",
|
||||
"integrity": "sha512-SuZbB/71XVn+WqWNCe7XOfHuqhS+k4gj8+A3wluTZQrORGaHUFRn/f8F9Tu5yESQZB1q8UKhahvHwkTV3AdVsg==",
|
||||
"version": "4.11.5",
|
||||
"resolved": "https://registry.npmjs.org/astro/-/astro-4.11.5.tgz",
|
||||
"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",
|
||||
"string-width": "^7.1.0",
|
||||
"shiki": "^1.10.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",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
|
||||
"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
|
||||
"version": "8.4.39",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.9.0.tgz",
|
||||
"integrity": "sha512-i6//Lqgn7+7nZA0qVjoYH0085YdNk4MC+tJV4bo+HgjgRMJ0JmkLZzFAuvVioJqLkcGDK5GAMpghZEZkCnwxpQ==",
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.10.1.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
|
||||
"integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.0.tgz",
|
||||
"integrity": "sha512-CMjc5zMnyAjcS9sPLytrbFmj89st2g+JYtY/c02ug4Q+CZaAtCgbyviI0n1YvjZE/pzoc6FbNsINS13DOL1B9w==",
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.1.tgz",
|
||||
"integrity": "sha512-00eoI6WY57SvZEVjm13stEVE90VkEdJAFGgpFLTsZbJyW/LwFQ7uQxJHWpZ2hzSWgCPKc9AnBnNP+0X7o3hAmQ==",
|
||||
"bin": {
|
||||
"tsconfck": "bin/tsconfck.js"
|
||||
},
|
||||
|
|
@ -9200,12 +9200,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
|
||||
"integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
|
||||
"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": {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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;
|
||||
}
|
||||
const { pageTitle, subTitle, content, btnTitle } = translations[lang];
|
||||
---
|
||||
|
||||
<MainLayout
|
||||
title={pageTitle}
|
||||
>
|
||||
<MainLayout 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
|
||||
class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl"
|
||||
>
|
||||
{title}
|
||||
<h1 class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl">
|
||||
404
|
||||
</h1>
|
||||
<p
|
||||
class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl"
|
||||
>
|
||||
<p id="subtitle" class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl">
|
||||
{subTitle}
|
||||
</p>
|
||||
|
||||
<p
|
||||
class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<p id="content" 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();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue