✨ Make doc links relative to language

Author: SnaveSutit

src/docs/welcome/ru.md

@@ -0,0 +1,57 @@
+Russian
+
+<div class="header">
+	<div>
+		<h1>Welcome to</h1>
+		<h1>Animated Java!</h1>
+	</div>
+	<img src="/images/armor_stand_wave.webp" alt="An Armor Stand waving at the user" />
+</div>
+
+This documentation will help **you** 🫵 take your Data Pack project's polish to the
+next level with Animated Java!
+
+<br>
+
+:::warning[Before you get started]
+It is highly recommended to be familiar with how [Data Packs](https://minecraft.wiki/w/Data_pack) and [Resource Packs](https://minecraft.wiki/w/Resource_pack) work in Minecraft: Java Edition.
+:::
+
+<style>
+	.header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+	}
+
+	.header div {
+		display: flex;
+		flex-direction: column;
+	}
+
+	h1 {
+		margin: 0;
+	}
+
+	img {
+		border: unset;
+		outline: unset;
+		box-shadow: unset;
+		background: unset;
+	}
+
+	@media (width < 950px) {
+		.header {
+			flex-direction: column-reverse;
+			text-align: center;
+		}
+
+		img {
+			width: 150px;
+			height: 150px;
+			margin-top: 8px;
+		}
+	}
+</style>

src/lib/docs/docs.ts

@@ -1,3 +1,4 @@
+import { resolve } from '$app/paths'
 import type { Component } from 'svelte'
 
 const MODULES = import.meta.glob('/src/docs/**/*.md')
@@ -13,3 +14,8 @@ export function getDocModule(lang = 'en', path: string) {
 
 	return mod as () => Promise<{ default: Component; metadata: Record<string, any> }>
 }
+
+export function docHref(path: string, lang: string): string {
+	const prefix = lang === DEFAULT_LANGUAGE ? '' : `/${lang}`
+	return resolve(`${prefix}/${path}`)
+}

src/lib/docs/rehypeDocLinks.ts

@@ -0,0 +1,16 @@
+import type { Root } from 'hast'
+import type { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+
+const rehypeDocLinks: Plugin<[], Root> = () => tree => {
+	visit(tree, 'element', node => {
+		if (node.tagName !== 'a') return
+		const href = node.properties?.href as string | undefined
+		if (!href || href.startsWith('http') || href.startsWith('#')) return
+
+		// Mark as a doc-internal link; store the path for runtime resolution
+		node.properties['data-doc-link'] = href
+	})
+}
+
+export default rehypeDocLinks

src/routes/[[lang]]/docs/+layout.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { browser } from '$app/environment'
-	import { afterNavigate } from '$app/navigation'
+	import { afterNavigate, goto } from '$app/navigation'
+	import { resolve } from '$app/paths'
 	import Footer from '$lib/components/footer.svelte'
 	import MinecraftIcon from '$lib/components/minecraftIcon.svelte'
-	import { onDestroy, onMount, tick } from 'svelte'
+	import { DEFAULT_LANGUAGE, docHref } from '$lib/docs/docs'
+	import { onDestroy, onMount, setContext, tick } from 'svelte'
 
 	interface TocHeading {
 		id: string
@@ -17,6 +19,23 @@
 	const defaultDescription = 'Effortlessly craft complex animations for Minecraft: Java Edition'
 	const socialImage = `${siteUrl}/images/animated_java_icon.svg`
 
+	const lang = $derived(data.params.lang ?? DEFAULT_LANGUAGE)
+	$effect(() => {
+		setContext('lang', lang)
+		console.log(`Current language set to: ${lang}`)
+	})
+
+	function handleClick(event: MouseEvent): void {
+		const target = (event.target as HTMLElement).closest('a')
+		if (!target) return
+		const path = target.getAttribute('data-doc-link')
+		if (!path) return
+
+		event.preventDefault()
+		const prefix = lang === DEFAULT_LANGUAGE ? '' : `/${lang}`
+		void goto(resolve(`${prefix}/docs/${path}`))
+	}
+
 	const pageTitle = $derived(
 		data.currentDoc?.title ? `${data.currentDoc.title} | ${docsTitle}` : docsTitle
 	)
@@ -201,6 +220,8 @@
 	<meta name="twitter:image" content={socialImage} />
 </svelte:head>
 
+<svelte:window onclick={handleClick} />
+
 <div class="docs-shell">
 	<header class="docs-header minecraft-box">
 		<a href="/" class="brand-link">
@@ -265,7 +286,7 @@
 							<a
 								class={`section-link ${data.currentPath === section.to ? 'active' : ''}`}
 								onclick={closeMobileSidebar}
-								href={section.to}
+								href={docHref(section.to, lang)}
 								>{section.title}
 
 								{#if data.currentPath === section.to}
@@ -283,7 +304,7 @@
 										<a
 											class:active={data.currentPath === item.to}
 											onclick={closeMobileSidebar}
-											href={item.to}
+											href={docHref(item.to, lang)}
 											>{item.title}
 
 											{#if data.currentPath === item.to}
@@ -307,15 +328,17 @@
 			{#if data.previous ?? data.next}
 				<nav class="docs-pagination" aria-label="Previous and next page links">
 					{#if data.previous}
-						<a class="minecraft-button" href={data.previous.to}
+						<a class="minecraft-button" href={docHref(data.previous.to, lang)}
 							>&larr; {data.previous.title}</a
 						>
 					{:else}
 						<div></div>
 					{/if}
 
 					{#if data.next}
-						<a class="minecraft-button" href={data.next.to}>{data.next.title} &rarr;</a>
+						<a class="minecraft-button" href={docHref(data.next.to, lang)}
+							>{data.next.title} &rarr;</a
+						>
 					{/if}
 				</nav>
 			{/if}

src/routes/[[lang]]/docs/+layout.ts

@@ -1,4 +1,6 @@
+import { DEFAULT_LANGUAGE } from '$lib/docs/docs'
 import { docsNavLinks, docsSidebar, flattenDocLinks, type DocLeaf } from '$lib/docs/navigation'
+import type { LayoutLoad } from '../$types'
 
 const FLATTENED_DOCS = flattenDocLinks(docsSidebar)
 
@@ -8,8 +10,11 @@ function normalizedPath(pathname: string): string {
 	return pathname
 }
 
-export function load({ url }: { url: URL }) {
-	const currentPath = normalizedPath(url.pathname)
+export const load: LayoutLoad = ({ params, url }) => {
+	const currentPath = normalizedPath(url.pathname).replace(
+		'/' + (params.lang ?? DEFAULT_LANGUAGE),
+		''
+	)
 	const currentIndex = FLATTENED_DOCS.findIndex(doc => doc.to === currentPath)
 	const currentDoc = currentIndex >= 0 ? FLATTENED_DOCS[currentIndex] : null
 
@@ -21,12 +26,15 @@ export function load({ url }: { url: URL }) {
 		next = currentIndex < FLATTENED_DOCS.length - 1 ? FLATTENED_DOCS[currentIndex + 1] : null
 	}
 
+	console.log('Current path:', currentPath)
+
 	return {
 		docsNavLinks,
 		docsSidebar,
 		currentPath,
 		currentDoc,
 		previous,
 		next,
+		params,
 	}
 }

svelte.config.js

@@ -5,6 +5,7 @@ import { resolve } from 'path'
 import rehypeSlug from 'rehype-slug'
 import remarkDirective from 'remark-directive'
 import remarkGfm from 'remark-gfm'
+import rehypeDocLinks from './src/lib/docs/rehypeDocLinks.ts'
 import remarkAdmonitions from './src/lib/docs/remark-admonitions.ts'
 import './src/lib/prismjs/mcfunction.ts'
 
@@ -17,7 +18,7 @@ const config = {
 		vitePreprocess(),
 		mdsvex({
 			extensions: ['.md'],
-			rehypePlugins: [rehypeSlug, remarkAdmonitions],
+			rehypePlugins: [rehypeSlug, remarkAdmonitions, rehypeDocLinks],
 			remarkPlugins: [remarkGfm, remarkDirective],
 			highlight: {
 				highlighter: (code, lang) => {

tsconfig.json

@@ -11,6 +11,7 @@
 		"sourceMap": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
-		"skipLibCheck": true
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true
 	}
 }