feat: references preferences

src/lib/utils/references.ts

@@ -1,6 +1,16 @@
+import { writable } from 'svelte/store';
 import type { Language } from './code';
+import { browser } from '$app/environment';
 
-export const versions = ['1.4.x', '1.3.x', '1.2.x', '1.1.x', '1.0.x', '0.15.x'];
+export type Version = '1.4.x' | '1.3.x' | '1.2.x' | '1.1.x' | '1.0.x' | '0.15.x' | 'cloud';
+export const versions: Readonly<Array<Omit<Version, 'cloud'>>> = [
+	'1.4.x',
+	'1.3.x',
+	'1.2.x',
+	'1.1.x',
+	'1.0.x',
+	'0.15.x'
+] as const;
 
 export enum Service {
 	Account = 'account',
@@ -66,7 +76,17 @@ export const platformMap: Record<Language, string> = {
 	diff: 'Diff',
 	http: 'HTTP',
 	css: 'CSS',
-	graphql: 'GraphQL'
+	graphql: 'GraphQL',
+	deno: 'Deno',
+	python: 'Python',
+	ruby: 'Ruby',
+	csharp: 'C#',
+	cpp: 'C++',
+	bash: 'Bash',
+	powershell: 'PowerShell',
+	cmd: 'CMD',
+	yaml: 'YAML',
+	text: 'Text'
 };
 
 export const serviceMap: Record<Service, string> = {
@@ -80,3 +100,19 @@ export const serviceMap: Record<Service, string> = {
 	[Service.Teams]: 'Teams',
 	[Service.Users]: 'Users'
 };
+
+export const preferredVersion = writable<Version | null>(
+	globalThis?.localStorage?.getItem('preferredVersion') as Version
+);
+export const preferredPlatform = writable<Platform | null>(
+	globalThis?.localStorage?.getItem('preferredPlatform') as Platform
+);
+
+if (browser) {
+	preferredVersion.subscribe((value) => {
+		if (value) globalThis?.sessionStorage?.setItem('preferredVersion', value);
+	});
+	preferredPlatform.subscribe((value) => {
+		if (value) globalThis?.sessionStorage?.setItem('preferredPlatform', value);
+	});
+}

src/routes/docs/references/+layout.svelte

@@ -2,14 +2,13 @@
 	import { page } from '$app/stores';
 	import Docs from '$lib/layouts/Docs.svelte';
 	import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
+	import { preferredPlatform, preferredVersion } from '$lib/utils/references';
 
 	$: expandable = $page.url.pathname.startsWith('/docs/references/');
-
-	const parent: NavParent = {
-		href: '/docs',
-		label: 'References'
-	};
-	const navigation: NavTree = [
+	$: prefix = `/docs/references/${$preferredVersion ?? $page.params?.version ?? 'cloud'}/${
+		$preferredPlatform ?? $page.params?.platform ?? 'client-web'
+	}`;
+	$: navigation = [
 		{
 			label: 'Getting started',
 			items: [
@@ -26,46 +25,51 @@
 				{
 					label: 'Account',
 					icon: 'icon-user',
-					href: '/docs/references/cloud/client-web/account'
+					href: `${prefix}/account`
 				},
 				{
 					label: 'Users',
 					icon: 'icon-user-group',
-					href: '/docs/references/cloud/client-web/users'
+					href: `${prefix}/users`
 				},
 				{
 					label: 'Teams',
 					icon: 'icon-users',
-					href: '/docs/references/cloud/client-web/teams'
+					href: `${prefix}/teams`
 				},
 				{
 					label: 'Databases',
 					icon: 'icon-database',
-					href: '/docs/references/cloud/client-web/databases'
+					href: `${prefix}/databases`
 				},
 				{
 					label: 'Storage',
 					icon: 'icon-cloud',
-					href: '/docs/references/cloud/client-web/storage'
+					href: `${prefix}/storage`
 				},
 				{
 					label: 'Functions',
 					icon: 'icon-code',
-					href: '/docs/references/cloud/client-web/functions'
+					href: `${prefix}/functions`
 				},
 				{
 					label: 'Localization',
 					icon: 'icon-globe',
-					href: '/docs/references/cloud/client-web/locale'
+					href: `${prefix}/locale`
 				},
 				{
 					label: 'Avatars',
 					icon: 'icon-user',
-					href: '/docs/references/cloud/client-web/avatars'
+					href: `${prefix}/avatars`
 				}
 			]
 		}
-	];
+	] as NavTree;
+
+	const parent: NavParent = {
+		href: '/docs',
+		label: 'References'
+	};
 </script>
 
 <Docs variant={expandable ? 'expanded' : 'two-side-navs'}>

src/routes/docs/references/[version]/[platform]/[service]/+page.server.ts

@@ -7,7 +7,7 @@ const services = Object.values(Service);
 const platforms = Object.values(Platform);
 
 export const entries: EntryGenerator = () => {
-	return ['cloud', ...versions].flatMap((version) => {
+	return ['cloud', ...(versions as string[])].flatMap((version) => {
 		return platforms.flatMap((platform) => {
 			return services.map((service) => {
 				return { service, version, platform };

src/routes/docs/references/[version]/[platform]/[service]/+page.svelte

@@ -4,10 +4,18 @@
 	import { MainFooter } from '$lib/components';
 	import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
 	import { parse } from '$lib/utils/markdown';
-	import { Platform, platformMap, serviceMap, versions } from '$lib/utils/references.js';
+	import {
+		Platform,
+		platformMap,
+		preferredPlatform,
+		preferredVersion,
+		serviceMap,
+		versions,
+		type Version
+	} from '$lib/utils/references.js';
 	import type { LayoutContext } from '$markdoc/layouts/Article.svelte';
 	import { Fence, Heading } from '$markdoc/nodes/_Module.svelte';
-	import { getContext, setContext } from 'svelte';
+	import { getContext, onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 
 	export let data;
@@ -32,18 +40,27 @@
 
 	function selectPlatform(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
 		const { version, service } = $page.params;
+		const platform = event.currentTarget.value as Platform;
+		preferredPlatform.set(platform);
 		goto(`/docs/references/${version}/${event.currentTarget.value}/${service}`, {
 			noScroll: true
 		});
 	}
 
 	function selectVersion(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
 		const { platform, service } = $page.params;
-		goto(`/docs/references/${event.currentTarget.value}/${platform}/${service}`, {
+		const version = event.currentTarget.value as Version;
+		preferredVersion.set(version);
+		goto(`/docs/references/${version}/${platform}/${service}`, {
 			noScroll: true
 		});
 	}
 
+	onMount(() => {
+		preferredVersion.set($page.params.version as Version);
+		preferredPlatform.set($page.params.platform as Platform);
+	});
+
 	$: platform = $page.params.platform as Platform;
 	$: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
 </script>