fix prev build error & refactor locale management

src/app.d.ts

@@ -3,9 +3,7 @@
 declare global {
 	namespace App {
 		// interface Error {}
-		interface Locals {
-			lang: string
-		}
+		// interface Locals { }
 		// interface PageData {}
 		// interface Platform {}
 	}

src/hooks.server.ts

@@ -1,12 +1,12 @@
 import type { Handle } from '@sveltejs/kit';
-import { getLangFromParam } from '$i18n/i18n'
-
+import { getLangFromParam, locale } from '$i18n/i18n'
+import { get } from 'svelte/store';
 
 export const handle = (({ event, resolve }) => {
 
     // current locale is set based on url. If locale cannot be deduced from url (ie from '/'), 
     // a check is made to see if locale is set in locals (meaning that user as already visited at least one page).
-    let lang: 'fr' | 'en' | null = getLangFromParam(event.params) ?? event.locals.lang as 'fr' | 'en' | null
+    let lang: 'fr' | 'en' = getLangFromParam(event.params) ?? get(locale) as 'fr' | 'en'
 
     // As a fallback, look at the accept-language header
     if (!lang) {
@@ -15,7 +15,7 @@ export const handle = (({ event, resolve }) => {
             : 'fr'
     }
 
-    event.locals = { ...event.locals, lang }
+    locale.set(lang)
 
     return resolve(event, {
         transformPageChunk: ({ html }) => html.replace('%lang%', lang as string)

src/lib/components/FilterPanel.svelte

@@ -46,15 +46,14 @@
 		selectedTags = selectedTags;
 	};
 	const documentOnClick = (e: MouseEvent) => {
-		if (e.target) {
-			console.log(e.currentTarget, e.currentTarget.id);
+		if (e.currentTarget) {
 			$selectedNewsTypes.splice($selectedNewsTypes.indexOf(e.currentTarget.id), 1);
 		}
 		$selectedNewsTypes = $selectedNewsTypes;
 	};
 
 	const tagOnClick = (e: MouseEvent) => {
-		if (e.target) {
+		if (e.currentTarget) {
 			selectedTags.splice(selectedTags.indexOf(e.currentTarget.id), 1);
 		}
 		selectedTags = selectedTags;

src/lib/components/Nav.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { t, rt, locale } from '$i18n/i18n';
 	import { invalidateAll, goto } from '$app/navigation';
@@ -25,14 +24,16 @@
 		else if (route.includes('news')) url = getUrl('news');
 		else if (route.includes('projects')) url = getUrl('projects');
 		else if (route.includes('services')) url = getUrl('services');
-		else if (route.includes('about')) url = getUrl('about');
-
+		else if (route.includes('about')) {
+			route.includes('members') ? (url = getUrl('about.member')) : (url = getUrl('about'));
+		}
 		return url;
 	};
 
 	let langRedirectUrl: string = '/';
 	let enHref = $locale === 'en' ? $page.url.pathname : langRedirectUrl;
 	let frHref = $locale === 'fr' ? $page.url.pathname : langRedirectUrl;
+
 	page.subscribe(() => {
 		langRedirectUrl = $page.route.id ? getLangRedirectUrl($page.route.id) : '/';
 		enHref = $locale === 'en' ? $page.url.pathname : langRedirectUrl;
@@ -65,8 +66,6 @@
 		}
 	};
 
-	$: console.log('showPresentation', $showPresentation);
-
 	const toggleNavMenu = () => {
 		$showNavMenu = !$showNavMenu;
 	};
@@ -75,7 +74,6 @@
 		if (!showNavMenu) return;
 		const menu = document.querySelector('.nav-menu-container');
 		const btn = document.querySelector('.menu-btn');
-		console.log(menu);
 		if (menu && !menu.contains(e.target) && btn && !btn.contains(e.target)) {
 			$showNavMenu = false;
 		}
@@ -147,23 +145,13 @@
 				<!-- <Footer /> -->
 				<div class="locale-container">
 					<a
-						on:click={() => {
-							$locale = 'fr';
-							invalidateAll();
-							goto(frHref);
-						}}
 						class={`lang-btn ${$locale === 'fr' ? 'active' : ''}`}
 						rel="alternate"
 						href={frHref}
 						hreflang="fr">fr</a
 					>
 					<span>|</span>
 					<a
-						on:click={() => {
-							$locale = 'en';
-							invalidateAll();
-							goto(enHref);
-						}}
 						href={enHref}
 						class={`lang-btn ${$locale === 'en' ? 'active' : ''}`}
 						rel="alternate"

src/lib/components/NavLinks.svelte

@@ -17,8 +17,6 @@
 		} else active = 'home';
 	});
 
-	$: console.log($page.params);
-
 	const hideNavMenu = () => {
 		showNavMenu.set(false);
 	};

src/lib/components/Support.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
 	import { base } from '$app/paths';
+	import { localize } from '$lib/i18n/i18n';
+	import { page } from '$app/stores';
 
 	export let content;
+
+	$: showSupport = $page.route.id?.includes('about') || $page.route.id?.includes('home');
+	$: doc = content ? $localize(content)[0] : null;
 </script>
 
-{#if content}
+{#if doc && showSupport}
 	<section class="support">
 		<div class="banner-content">
 			<article id="support">
-				{@html content.html}
+				{@html doc.html}
 			</article>
 			<ul class="support-logos">
 				<li>

src/lib/components/TeamCard.svelte

@@ -96,9 +96,6 @@
 	}
 
 	.header-page-mode h2 {
-		position: sticky;
-		height: fit-content;
-		top: 5rem;
 		font-size: 1.2rem;
 		margin-bottom: 1rem;
 		color: var(--clr-accent);

src/lib/components/Tree.svelte

@@ -45,8 +45,6 @@
 			a.textContent = heading.textContent;
 			a.addEventListener('click', scrollToTarget);
 
-			console.log(heading.tagName);
-
 			const li = document.createElement('li');
 			li.classList.add(heading.tagName === 'H2' ? 'toc-h2' : 'toc-h3');
 			li.appendChild(a);

src/lib/helpers/data.ts

@@ -1,121 +1,53 @@
 
-async function getBlogs(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/blog/*-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/blog/*-en.md`)
-    return paths
-}
-async function getEventFiles(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/evenements/*-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/evenements/*-en.md`)
-    return paths
-}
-async function getTeam(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/equipe/*-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/equipe/*-en.md`)
-    return paths
-}
-async function getProjects(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/projets/*-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/projets/*-en.md`)
-    return paths
-}
-async function getCr(lang: string) {
-    return await import.meta.glob(`$lib/labouvroir/cr/*.md`)
-}
-async function getSupportFiles(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/lab/financement-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/lab/financement-en.md`)
-    return paths
-}
-async function getAbout(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/about-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/about-en.md`)
-    return paths
-}
-async function getCocFiles(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/lab/codeDeConduite-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/lab/codeDeConduite-en.md`)
-    return paths
-}
-async function getServicesPresentation(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/lab/services/presentation-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/lab/services/presentation-en.md`)
-    return paths
-}
-async function getSevicesEquip(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/lab/services/equipements-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/lab/services/equipements-en.md`)
-    return paths
-}
-async function getServicesReservation(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/lab/services/reservation-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/lab/services/reservation-en.md`)
-    return paths
-}
-async function getServicesMeet(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/lab/services/rencontres-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/lab/services/rencontres-en.md`)
-    return paths
-}
+const getBlogs = async () =>
+    await import.meta.glob(`$lib/labouvroir/blog/*.md`)
 
-async function getServices(lang: string) {
-    let paths
-    lang === 'fr'
-        ? paths = await import.meta.glob(`$lib/labouvroir/lab/services-fr.md`)
-        : paths = await import.meta.glob(`$lib/labouvroir/lab/services-en.md`)
-    return paths
-}
+const getEvents = async () =>
+    await import.meta.glob(`$lib/labouvroir/evenements/*.md`)
+
+const getCr = async () =>
+    await import.meta.glob(`$lib/labouvroir/cr/*.md`)
+
+const getTeam = async () =>
+    await import.meta.glob(`$lib/labouvroir/equipe/*.md`)
+
+const getProjects = async () =>
+    await import.meta.glob(`$lib/labouvroir/projets/*.md`)
+
+const getSupportFiles = async () =>
+    await import.meta.glob(`$lib/labouvroir/lab/financement-*.md`)
+
+const getAbout = async () =>
+    await import.meta.glob(`$lib/labouvroir/about-*.md`)
+
+const getServices = async () =>
+    await import.meta.glob(`$lib/labouvroir/lab/services-*.md`)
 
 const setup = {
     'projects': getProjects,
     'blog': getBlogs,
     'team': getTeam,
     'meeting': getCr,
     'support': getSupportFiles,
-    'event': getEventFiles,
+    'event': getEvents,
     'about': getAbout,
-    'coc': getCocFiles,
-    'services-presentation': getServicesPresentation,
-    'services-equip': getSevicesEquip,
-    'services-reservation': getServicesReservation,
-    'services-meet': getServicesMeet,
     'services': getServices,
 }
 
-export async function fetchData(lang: string, type: keyof typeof setup) {
-    const iteralbleFiles = Object.entries(await setup[type](lang))
+export async function fetchData(type: keyof typeof setup) {
+
+    const iteralbleFiles = Object.entries(await setup[type]())
 
     const mdFiles = await Promise.all(
         iteralbleFiles
             .filter(([path]) => !path.includes('template'))
             .map(async ([path, resolver]) => {
                 const md = await resolver()
+                const mdHtml = md.default.render().html
                 return {
                     meta: md.metadata,
                     path: path,
-                    html: md.default.render().html,
+                    html: mdHtml,
                 }
             })
     )
@@ -128,9 +60,10 @@ export async function fetchData(lang: string, type: keyof typeof setup) {
             return !md.meta.draft
         return true
     })
+
 }
 
 export function createSlugFromFilename(filename: string) {
     filename = filename.split('/').at(-1)!
     return encodeURIComponent(filename.replace('.md', ''))
-}
+}

src/lib/i18n/i18n.ts

@@ -5,7 +5,7 @@ import translations from "./translations";
 // Code greatly inspired by:
 // https://dev.to/danawoodman/svelte-quick-tip-adding-basic-internationalization-i18n-to-you-app-2lm
 
-export const locale = writable("fr");
+export const locale = writable("fr" as 'fr' | 'en');
 export const locales = Object.keys(translations);
 
 export function translate(locale: string, key: string, vars: { [key: string]: string }) {
@@ -66,3 +66,8 @@ export const getLangFromParam = (param: Partial<Record<string, string>>) => {
     })
     return lang
 }
+
+export const localize = derived(locale, ($locale) => (data) => {
+    if (!Array.isArray(data)) return null
+    return data.filter(d => d.path.includes(`-${$locale}.md`))
+})

src/routes/+layout.server.ts

@@ -1,14 +1,16 @@
 import { fetchData } from '$lib/helpers/data'
 import { redirect } from '@sveltejs/kit'
 import { base } from '$app/paths'
+import { get } from 'svelte/store'
+import { locale } from '$i18n/i18n'
 
 export const prerender = true
 
 export const load = async (event) => {
     let support = null
 
     if (event.url.pathname === `${base}/`) {
-        if (event.locals.lang === 'fr')
+        if (get(locale) === 'fr')
             throw redirect(301, `${base}/accueil`)
         else
             throw redirect(301, `${base}/home`)
@@ -18,12 +20,10 @@ export const load = async (event) => {
         event.route.id.includes('home') ||
         event.route.id.includes('about'))) {
 
-        support = await fetchData(event.locals.lang, 'support')
-        support = support[0]
+        support = await fetchData('support')
     }
 
     return {
-        support,
-        lang: event.locals.lang
+        support
     }
 }