docs: start to setup versioned docs

documentation/docs/5/01-getting-started/01-introduction.md

@@ -0,0 +1,7 @@
+---
+title: Introduction
+---
+
+You can find the latest Svelte reference documentation at [https://svelte.dev/docs](https://svelte.dev/docs).
+
+You can learn more about Svelte 5 and other future work on our [roadmap](https://svelte.dev/roadmap).

documentation/docs/5/01-getting-started/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Getting Started"
+}

sites/svelte.dev/src/constants.js

@@ -4,6 +4,7 @@ export const CONTENT_BASE = '../../documentation';
 export const CONTENT_BASE_PATHS = {
 	BLOG: `${CONTENT_BASE}/blog`,
 	TUTORIAL: `${CONTENT_BASE}/tutorial`,
-	DOCS: `${CONTENT_BASE}/docs`,
+	DOCS_LATEST: `${CONTENT_BASE}/docs/4`,
+	DOCS_5: `${CONTENT_BASE}/docs/5`,
 	EXAMPLES: `${CONTENT_BASE}/examples`
 };

sites/svelte.dev/src/lib/server/docs/index.js

@@ -29,7 +29,7 @@ export async function get_parsed_docs(docs_data, slug) {
 }
 
 /** @return {Promise<import('./types').DocsData>} */
-export async function get_docs_data(base = CONTENT_BASE_PATHS.DOCS) {
+export async function get_docs_data(base = CONTENT_BASE_PATHS.DOCS_LATEST) {
 	const { readdir, readFile } = await import('node:fs/promises');
 
 	/** @type {import('./types').DocsData} */

sites/svelte.dev/src/routes/docs/5/+page.server.js

@@ -0,0 +1,14 @@
+import { get_docs_data, get_parsed_docs } from '$lib/server/docs/index.js';
+import { error } from '@sveltejs/kit';
+import { CONTENT_BASE_PATHS } from '../../../constants';
+
+export const prerender = true;
+
+export async function load({ params }) {
+	const slug = 'introduction'; // params.slug
+	const processed_page = await get_parsed_docs(await get_docs_data(CONTENT_BASE_PATHS.DOCS_5), slug);
+
+	if (!processed_page) throw error(404);
+
+	return { page: processed_page };
+}

sites/svelte.dev/src/routes/docs/5/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Docs from '../[slug]/Docs.svelte';
+
+	export let data;
+</script>
+
+<Docs version={5} {data} />

sites/svelte.dev/src/routes/docs/[slug]/+page.svelte

@@ -1,99 +1,7 @@
 <script>
-	import { page } from '$app/stores';
-	import { Icon } from '@sveltejs/site-kit/components';
-	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import Docs from './Docs.svelte';
 
 	export let data;
-
-	$: pages = data.sections.flatMap((section) => section.pages);
-	$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
-	$: prev = pages[index - 1];
-	$: next = pages[index + 1];
-
-	setupDocsHovers();
 </script>
 
-<svelte:head>
-	<title>{data.page?.title} • Docs • Svelte</title>
-
-	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
-	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
-	<meta name="Description" content="{data.page.title} • Svelte documentation" />
-</svelte:head>
-
-<div class="text" id="docs-content">
-	<a
-		class="edit"
-		href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{data.page.file}"
-	>
-		<Icon size={50} name="edit" /> Edit this page on GitHub
-	</a>
-
-	<DocsOnThisPage details={data.page} />
-
-	{@html data.page.content}
-</div>
-
-<div class="controls">
-	<div>
-		<span class:faded={!prev}>previous</span>
-
-		{#if prev}
-			<a href={prev.path}>{prev.title}</a>
-		{/if}
-	</div>
-
-	<div>
-		<span class:faded={!next}>next</span>
-		{#if next}
-			<a href={next.path}>{next.title}</a>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.edit {
-		position: relative;
-		font-size: 1.4rem;
-		line-height: 1;
-		z-index: 2;
-	}
-
-	.edit :global(.icon) {
-		position: relative;
-		top: -0.1rem;
-		left: 0.3rem;
-		width: 1.4rem;
-		height: 1.4rem;
-		margin-right: 0.5rem;
-	}
-
-	.controls {
-		max-width: calc(var(--sk-line-max-width) + 1rem);
-		border-top: 1px solid var(--sk-back-4);
-		padding: 1rem 0 0 0;
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		margin: 6rem 0 0 0;
-	}
-
-	.controls > :first-child {
-		text-align: left;
-	}
-
-	.controls > :last-child {
-		text-align: right;
-	}
-
-	.controls span {
-		display: block;
-		font-size: 1.2rem;
-		text-transform: uppercase;
-		font-weight: 600;
-		color: var(--sk-text-3);
-	}
-
-	.controls span.faded {
-		opacity: 0.4;
-	}
-</style>
+<Docs version={4} {data} />

sites/svelte.dev/src/routes/docs/[slug]/Docs.svelte

@@ -0,0 +1,53 @@
+<script>
+	import { Icon } from '@sveltejs/site-kit/components';
+	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import Pagination from './Pagination.svelte';
+
+	export let data;
+	export let version;
+
+	setupDocsHovers();
+</script>
+
+<svelte:head>
+	<title>{data.page?.title} • Docs • Svelte</title>
+
+	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
+	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
+	<meta name="Description" content="{data.page.title} • Svelte documentation" />
+</svelte:head>
+
+<div class="text" id="docs-content">
+	<a
+		class="edit"
+		href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{version}/{data.page.file}"
+	>
+		<Icon size={50} name="edit" /> Edit this page on GitHub
+	</a>
+
+	<DocsOnThisPage details={data.page} />
+
+	{@html data.page.content}
+</div>
+
+{#if version !== 5}
+	<Pagination pages={data.sections.flatMap((section) => section.pages)} />
+{/if}
+
+<style>
+	.edit {
+		position: relative;
+		font-size: 1.4rem;
+		line-height: 1;
+		z-index: 2;
+	}
+
+	.edit :global(.icon) {
+		position: relative;
+		top: -0.1rem;
+		left: 0.3rem;
+		width: 1.4rem;
+		height: 1.4rem;
+		margin-right: 0.5rem;
+	}
+</style>

sites/svelte.dev/src/routes/docs/[slug]/Pagination.svelte

@@ -0,0 +1,58 @@
+
+<script>
+	import { page } from '$app/stores';
+
+	export let pages;
+
+	$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
+	$: prev = pages[index - 1];
+	$: next = pages[index + 1];
+</script>
+
+<div class="controls">
+	<div>
+		<span class:faded={!prev}>previous</span>
+
+		{#if prev}
+			<a href={prev.path}>{prev.title}</a>
+		{/if}
+	</div>
+
+	<div>
+		<span class:faded={!next}>next</span>
+		{#if next}
+			<a href={next.path}>{next.title}</a>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.controls {
+		max-width: calc(var(--sk-line-max-width) + 1rem);
+		border-top: 1px solid var(--sk-back-4);
+		padding: 1rem 0 0 0;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		margin: 6rem 0 0 0;
+	}
+
+	.controls > :first-child {
+		text-align: left;
+	}
+
+	.controls > :last-child {
+		text-align: right;
+	}
+
+	.controls span {
+		display: block;
+		font-size: 1.2rem;
+		text-transform: uppercase;
+		font-weight: 600;
+		color: var(--sk-text-3);
+	}
+
+	.controls span.faded {
+		opacity: 0.4;
+	}
+</style>