365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor About Me page for language detection and redirection

Browse Source 
- Changed prerendering setting to true for improved performance.
- Implemented client-side language detection using cookies and browser settings.
- Added a redirect mechanism to the language-specific About Me page based on detected language.
- Included a fallback for users without JavaScript support.
This commit is contained in:
Richard Bergsma
2025-07-02 22:38:54 +02:00
parent 28de900b95
commit 2cb5f4bf24
1 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/pages/aboutme.astro
View File

@@ -1,33 +1,42 @@
--- ---
export const prerender = false; export const prerender = true;
import { supportedLanguages } from '~/i18n/translations'; ---
// Check for language preference in cookies (set by client-side JS)
const cookies = Astro.request.headers.get('cookie') || '';
const cookieLanguage = cookies
.split(';')
.map((cookie) => cookie.trim())
.find((cookie) => cookie.startsWith('preferredLanguage='))
?.split('=')[1];
// Get the user's preferred language from the browser if no cookie
const acceptLanguage = Astro.request.headers.get('accept-language') || '';
// Define the type for supported languages
type SupportedLanguage = (typeof supportedLanguages)[number];
// Use cookie language if available, otherwise detect from browser
const preferredLanguage =
cookieLanguage && supportedLanguages.includes(cookieLanguage as SupportedLanguage)
? cookieLanguage
: acceptLanguage
.split(',')
.map((lang) => lang.split(';')[0].trim().substring(0, 2))
.find((lang) => supportedLanguages.includes(lang as SupportedLanguage)) || 'en';
// Get the hash fragment if present
const url = new URL(Astro.request.url);
const hash = url.hash;
<html>
<head>
<meta http-equiv="refresh" content="0; url=/en/aboutme" />
<script>
(function() {
// Supported languages
const supportedLanguages = ['en', 'de', 'nl', 'fr'];
// Try to get language from cookie
const cookieMatch = document.cookie.match(/preferredLanguage=([^;]+)/);
const cookieLanguage = cookieMatch ? cookieMatch[1] : null;
// Try to get language from browser
const browserLanguages = navigator.languages || [navigator.language];
let detected = 'en';
if (cookieLanguage && supportedLanguages.includes(cookieLanguage)) {
detected = cookieLanguage;
} else {
for (let i = 0; i < browserLanguages.length; i++) {
const lang = browserLanguages[i].slice(0,2);
if (supportedLanguages.includes(lang)) {
detected = lang;
break;
}
}
}
// Redirect to the language-specific aboutme page // Redirect to the language-specific aboutme page
return Astro.redirect(`/${preferredLanguage}/aboutme${hash}`); const hash = window.location.hash || '';
--- window.location.replace('/' + detected + '/aboutme' + hash);
})();
</script>
<title>Redirecting...</title>
</head>
<body>
<noscript>
<meta http-equiv="refresh" content="0; url=/en/aboutme" />
<p>If you are not redirected, <a href="/en/aboutme">click here</a>.</p>
</noscript>
</body>
</html>