Added links to the english version for easier navigation (#94)

* Added links to the english version - In the "the main version of the wiki is the english one" info message - In the "this wiki is not yet translated in your locale" info message * Update src/lib/translations/fr/wiki.json Co-authored-by: ix0rai <[email protected]> * Add missing period wiki.json --------- Co-authored-by: ix0rai <[email protected]>
QuiltMC · Apr 25, 2024 · 26f6b2d · 26f6b2d · Cozy-GitHub · Apr 25, 2024
1 parent c467e34
commit 26f6b2d
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 38 deletions.
diff --git a/src/lib/NavbarLangDropdown.svelte b/src/lib/NavbarLangDropdown.svelte
@@ -1,28 +1,7 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
-	import { t, locales, locale } from "$lib/translations";
-
-	// Removes the current locale from the current route
-	// (only if the current route does contain the locale)
-	let current_route = "";
-	$: {
-		const routeExtractor = new RegExp(`^(/${$locale})?(/.+)?$`);
-
-		const routeMatch = $page.url.pathname.match(routeExtractor);
-		// prettier-ignore
-		if (
-			routeMatch &&
-			(
-				// We match the locale
-				routeMatch[1] ||
-				// We don't match the locale and a locale isn't in the route
-				routeMatch[2] && !$locales.includes(routeMatch[2].replace(/^\/([^/]+)(\/.+)?$/, "$1"))
-			)
-		) {
-			current_route = routeMatch[2] || "";
-		}
-	}
+	import { t, locales } from "$lib/translations";
+	import { current_route } from "./stores";
 
 	let is_dropdown_active = false;
 	function toggleNavbar() {
@@ -68,8 +47,8 @@
 		{#each $locales as locale}
 			<a
 				class="navbar-item"
-				href={`/${locale}${current_route}`}
-				data-sveltekit-preload-data="tap"
+				href={`/${locale}${$current_route ?? ""}`}
+				data-sveltekit-preload-data="false"
 				on:blur={handleBlur}
 			>
 				{$t(`lang.${locale}`)}

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -0,0 +1,25 @@
+import { locale, locales } from "./translations";
+
+import { derived } from "svelte/store";
+
+import { page } from "$app/stores";
+
+// Removes the current locale from the current route
+// (only if the current route does contain the locale)
+export const current_route = derived([page, locale, locales], ([$page, $locale, $locales], set) => {
+	const routeExtractor = new RegExp(`^(/${$locale})?(/.+)?$`);
+
+	const routeMatch = $page.url.pathname.match(routeExtractor);
+	// prettier-ignore
+	if (
+			routeMatch &&
+			(
+				// We match the locale
+				routeMatch[1] ||
+				// We don't match the locale and a locale isn't in the route
+				routeMatch[2] && !$locales.includes(routeMatch[2].replace(/^\/([^/]+)(\/.+)?$/, "$1"))
+			)
+		) {
+			set(routeMatch[2] || "");
+		}
+});
diff --git a/src/lib/svelte-markdown/NoPreloadLink.svelte b/src/lib/svelte-markdown/NoPreloadLink.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let href = "";
+	export let title = "";
+	export let text = "";
+</script>
+
+<a {href} {title} data-sveltekit-preload-data="false">
+	{text}
+</a>
diff --git a/src/lib/translations/en/application.json b/src/lib/translations/en/application.json
@@ -1,8 +1,8 @@
 {
 	"title": "Quilt Developer Wiki :P",
-	"dev-notice": "Notice: This website is still under development. Please report any issues at <{{placeholder}}>",
-	"translation-notice": "Please note that the original language of this wiki is english and that translated versions might not be up to date with the english version",
-	"draft-notice": "You were linked to a page in the wiki that is planned, but not yet implemented. If you want to help building out this wiki, go and take a look at <{{placeholder}}>",
+	"dev-notice": "Notice: This website is still under development. Please report any issues at <{{placeholder}}>.",
+	"translation-notice": "Please note that the original language of this wiki is english and that translated versions might not be up to date with the [english version]({{placeholder}}).",
+	"draft-notice": "You were linked to a page in the wiki that is planned, but not yet implemented. If you want to help building out this wiki, go and take a look at <{{placeholder}}>.",
 	"sidebar": {
 		"menu": "Menu",
 		"articles": "Articles"

diff --git a/src/lib/translations/en/wiki.json b/src/lib/translations/en/wiki.json
@@ -1,6 +1,6 @@
 {
-	"not-translated": "This wiki page isn't yet translated in {{placeholder}}",
-	"not-found": "No wiki page found at: `{{placeholder}}`",
+	"not-translated": "This wiki page isn't yet translated in your language. [Go to the english version]({{placeholder}}).",
+	"not-found": "No wiki page found at: `{{placeholder}}`.",
 	"blocks": {
 		"title": "Blocks",
 		"first-block": {

diff --git a/src/lib/translations/fr/application.json b/src/lib/translations/fr/application.json
@@ -1,8 +1,8 @@
 {
 	"title": "Wiki pour Développeur·euse·s Quilt :P",
-	"dev-notice": "Attention : Ce site est encore en cours de développement. Veuillez signaler les problèmes (en anglais) ici : <{{placeholder}}>",
-	"translation-notice": "Veuillez noter que la langue originale de ce wiki est l'anglais et que les versions traduites peuvent ne pas être à jour en comparaison à la version anglaise",
-	"draft-notice": "Cette page du wiki est prévue mais n'a pas encore été implémentée. Vous pouvez participer à la création de ce wiki ici : <{{placeholder}}>",
+	"dev-notice": "Attention : Ce site est encore en cours de développement. Veuillez signaler les problèmes (en anglais) ici : <{{placeholder}}>.",
+	"translation-notice": "Veuillez noter que la langue originale de ce wiki est l'anglais et que les versions traduites peuvent ne pas être à jour en comparaison à la [version anglaise]({{placeholder}}).",
+	"draft-notice": "Cette page du wiki est prévue mais n'a pas encore été implémentée. Vous pouvez participer à la création de ce wiki ici : <{{placeholder}}>.",
 	"sidebar": {
 		"menu": "Menu",
 		"articles": "Articles"

diff --git a/src/lib/translations/fr/wiki.json b/src/lib/translations/fr/wiki.json
@@ -1,6 +1,6 @@
 {
-	"not-translated": "Cette page du wiki n'a pas encore été traduite en {{placeholder}}",
-	"not-found": "Aucune page du wiki trouvée à l'adresse : `{{placeholder}}`",
+	"not-translated": "Cette page du wiki n'a pas encore été traduite en français. [Accéder à la version anglaise]({{placeholder}}).",
+	"not-found": "Aucune page du wiki trouvée à l'adresse : `{{placeholder}}`.",
 	"blocks": {
 		"title": "Blocs",
 		"first-block": {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,7 +7,9 @@
 	import HtmlHead from "$lib/HtmlHead.svelte";
 	import Header from "$lib/Header.svelte";
 	import Sidebar from "$lib/Sidebar.svelte";
+	import NoPreloadLink from "$lib/svelte-markdown/NoPreloadLink.svelte";
 	import { locale, t } from "$lib/translations/index";
+	import { current_route } from "$lib/stores.js";
 
 	onMount(async () => {
 		const lowContrast = document.getElementById("low-contrast") as HTMLInputElement;
@@ -49,7 +51,10 @@
 		<article class="message is-danger mx-3 mt-3 mb-3">
 			<div class="message-body has-text-centered">
 				<h1>
-					{$t("application.translation-notice")}
+					<SvelteMarkdown
+						source={$t("application.translation-notice", { placeholder: `/en${$current_route}` })}
+						renderers={{ link: NoPreloadLink }}
+					/>
 				</h1>
 			</div>
 		</article>

diff --git a/src/routes/[[locale=locale]]/[category]/[[slug]]/+page.svelte b/src/routes/[[locale=locale]]/[category]/[[slug]]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import NoPreloadLink from "$lib/svelte-markdown/NoPreloadLink.svelte";
 	import { t } from "$lib/translations/index.js";
 	import SvelteMarkdown from "svelte-markdown";
 
@@ -15,6 +16,7 @@
 			<h1>
 				<SvelteMarkdown
 					source={$t(data.warningMessage.key, { placeholder: data.warningMessage.placeholder })}
+					renderers={{ link: NoPreloadLink }}
 				/>
 			</h1>
 		</div>

diff --git a/src/routes/[[locale=locale]]/[category]/[[slug]]/+page.ts b/src/routes/[[locale=locale]]/[category]/[[slug]]/+page.ts
@@ -3,7 +3,7 @@ import YAML from "yaml";
 
 import type { ComponentType, SvelteComponent } from "svelte";
 
-import { defaultLocale, t } from "$lib/translations";
+import { defaultLocale } from "$lib/translations";
 
 export async function load({ params }): Promise<{
 	content?: ComponentType<SvelteComponent>;
@@ -49,7 +49,7 @@ export async function load({ params }): Promise<{
 					title: post_metadata.title,
 					warningMessage: {
 						key: "wiki.not-translated",
-						placeholder: t.get(`lang.${params.locale}`)
+						placeholder: `/en/${params.category}/${params.slug}`
 					}
 				};
 			} else if (post_metadata.draft) {