Sitewide language selection

src/hooks.client.ts

@@ -1,6 +1,6 @@
 import { dev } from '$app/environment';
 import { SENTRY_DSN } from '$lib/constants';
-import { handleErrorWithSentry, replayIntegration } from '@sentry/sveltekit';
+import { handleErrorWithSentry } from '@sentry/sveltekit';
 import * as Sentry from '@sentry/sveltekit';
 
 Sentry.init({

src/lib/layouts/DocsArticle.svelte

@@ -17,16 +17,12 @@
     import { writable } from 'svelte/store';
     import { Feedback } from '$lib/components';
     import { scrollToTop } from '$lib/actions/scrollToTop';
-    import type { Language } from '$lib/utils/code';
 
     export let title: string;
     export let toc: Array<TocItem>;
     export let back: string | undefined = undefined;
     export let date: string | undefined = undefined;
 
-    // Shared writable store for a selected language.
-    setContext('language-context', writable<Language>());
-
     const reducedArticleSize = setContext('articleHasNumericBadge', writable(false));
 </script>
 

src/lib/utils/code.ts

@@ -28,6 +28,7 @@ import css from 'highlight.js/lib/languages/css';
 import groovy from 'highlight.js/lib/languages/groovy';
 import ini from 'highlight.js/lib/languages/ini';
 import { Platform } from './references';
+import { writable } from 'svelte/store';
 
 const languages = {
     js: javascript,
@@ -129,3 +130,10 @@ export const getCodeHtml = (args: Args) => {
         withLineNumbers ? 'line-numbers' : ''
     }">${final}</code></pre>`;
 };
+
+/**
+ * Stores the currently selected language within a `MultiCode` instance.
+ *
+ * Defaults to `references#preferredPlatform` on component mount if not already set.
+ */
+export const multiCodeSelectedLanguage = writable<Language | null>(null);

src/lib/utils/references.ts

@@ -142,15 +142,17 @@ export const serviceMap: Record<Service, string> = {
 export const preferredVersion = writable<Version | null>(
     globalThis?.localStorage?.getItem('preferredVersion') as Version
 );
+
 export const preferredPlatform = writable<Platform | null>(
-    globalThis?.localStorage?.getItem('preferredPlatform') as Platform
+    (globalThis?.localStorage?.getItem('preferredPlatform') as Platform) ?? 'client-web'
 );
 
 if (browser) {
     preferredVersion.subscribe((value) => {
-        if (value) globalThis?.sessionStorage?.setItem('preferredVersion', value);
+        if (value) globalThis?.localStorage?.setItem('preferredVersion', value);
     });
+
     preferredPlatform.subscribe((value) => {
-        if (value) globalThis?.sessionStorage?.setItem('preferredPlatform', value);
+        if (value) globalThis?.localStorage?.setItem('preferredPlatform', value);
     });
 }

src/markdoc/tags/MultiCode.svelte

@@ -8,37 +8,29 @@
 </script>
 
 <script lang="ts">
-    import { platformMap } from '$lib/utils/references';
-    import { getContext, setContext } from 'svelte';
-    import { writable } from 'svelte/store';
-    import type { Language } from '$lib/utils/code';
     import { copy } from '$lib/utils/copy';
+    import { writable } from 'svelte/store';
     import { Select, Tooltip } from '$lib/components';
+    import { getContext, onMount, setContext } from 'svelte';
+    import { type Language, multiCodeSelectedLanguage } from '$lib/utils/code';
+    import { Platform, platformMap, preferredPlatform } from '$lib/utils/references';
 
     setContext<CodeContext>('multi-code', {
-        selected: writable(null),
+        content: writable(''),
         snippets: writable(new Set()),
-        content: writable('')
+        selected: multiCodeSelectedLanguage
     });
 
-    const languageContext = getContext<Writable<string>>('language-context');
-
     const { snippets, selected, content } = getContext<CodeContext>('multi-code');
 
-    snippets.subscribe((n) => {
-        if ($selected === null && n.size > 0) {
-            $selected = Array.from(n)[0];
-        }
-    });
-
     selected.subscribe((language) => {
         // apply if exists in snippets
         if (language && $snippets.has(language as Language)) {
-            languageContext?.set(language);
+            preferredPlatform?.set(language as Platform);
         }
     });
 
-    languageContext?.subscribe((language) => {
+    preferredPlatform?.subscribe((language) => {
         if (
             language &&
             language !== $selected &&
@@ -62,6 +54,12 @@
             copyText = CopyStatus.Copy;
         }, 1000);
     }
+
+    onMount(() => {
+        if ($preferredPlatform && $snippets.has($preferredPlatform as Language)) {
+            selected.set($preferredPlatform);
+        }
+    });
 </script>
 
 <section class="dark web-code-snippet" aria-label="code-snippet panel">

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

@@ -66,8 +66,8 @@
     }
 
     onMount(() => {
+        preferredPlatform.set(platform);
         preferredVersion.set($page.params.version as Version);
-        preferredPlatform.set($page.params.platform as Platform);
     });
 
     // cleaned service description without Markdown links.
@@ -79,7 +79,7 @@
     // the service description up to the first full stop, providing sufficient information.
     $: shortenedDescription = serviceDescription.substring(0, serviceDescription.indexOf('.') + 1);
 
-    $: platform = $page.params.platform as Platform;
+    $: platform = ($preferredPlatform ?? $page.params.platform) as Platform;
     $: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
     $: serviceName = serviceMap[data.service?.name];
     $: title = serviceName + API_REFERENCE_TITLE_SUFFIX;