From 0bf39ec11e114d96d392512085d0841fd202c3cd Mon Sep 17 00:00:00 2001
From: Loris Sigrist <sigrist@hasch.io>
Date: Tue, 24 Oct 2023 10:39:45 +0200
Subject: [PATCH] Improve CodeGroup API

---
 site/src/lib/ui/Code/CodeGroupHeader.svelte   | 17 +++++----
 site/src/lib/ui/Code/CodePanel.svelte         | 25 ++++++++++---
 site/src/lib/ui/CodeGroup.svelte              | 12 +++++-
 .../src/routes/[[locale=locale]]/+page.svelte | 11 ++----
 .../[[locale=locale]]/syntax/+page.svelte     | 37 +++++++++++++++++++
 5 files changed, 81 insertions(+), 21 deletions(-)

diff --git a/site/src/lib/ui/Code/CodeGroupHeader.svelte b/site/src/lib/ui/Code/CodeGroupHeader.svelte
index a427856..50d5e36 100644
--- a/site/src/lib/ui/Code/CodeGroupHeader.svelte
+++ b/site/src/lib/ui/Code/CodeGroupHeader.svelte
@@ -1,12 +1,15 @@
 <script>
   import { merge } from "$lib/utils/class-merge";
+  import { getContext } from "svelte";
 
   /** @type {string | null}*/
   export let title = null;
 
-  /** @type {string[]}*/
-  export let tabs = [];
-  export let activeTab = 0;
+  /** @type {import("svelte/store").Writable<string[]>}*/
+  const tabs = getContext("code-group-tabs");
+
+  /** @type {import("svelte/store").Writable<number>}*/
+  const activeTab = getContext("code-group-active-tab");
 </script>
 
 <div
@@ -18,17 +21,17 @@
     </h3>
   {/if}
 
-  {#if tabs.length > 0}
+  {#if $tabs.length > 1}
     <div
       role="tablist"
       aria-orientation="horizontal"
       class="-mb-px flex gap-4 text-xs font-medium"
     >
-      {#each tabs as tab, i}
-        {@const active = i === activeTab}
+      {#each $tabs as tab, i}
+        {@const active = i === $activeTab}
         <button
           role="tab"
-          on:click={() => (activeTab = i)}
+          on:click={() => activeTab.set(i)}
           class={merge(
             "border-b py-3 transition ui-not-focus-visible:outline-none",
             active
diff --git a/site/src/lib/ui/Code/CodePanel.svelte b/site/src/lib/ui/Code/CodePanel.svelte
index 50b83ed..a596ca7 100644
--- a/site/src/lib/ui/Code/CodePanel.svelte
+++ b/site/src/lib/ui/Code/CodePanel.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { getContext } from "svelte";
   import CodePanelBody from "./CodePanelBody.svelte";
   import CodePanelHeader from "./CodePanelHeader.svelte";
 
@@ -6,11 +7,23 @@
   export let label = null;
   /** @type {string|null}*/
   export let tag = null;
+
+  export let name = "default";
+  /** @type {import("svelte/store").Writable<string[]>}*/
+  const tabs = getContext("code-group-tabs");
+  /** @type {import("svelte/store").Writable<number>}*/
+  const activeTab = getContext("code-group-active-tab");
+
+  tabs.update((oldTabs) => [...oldTabs, name]);
+
+  $: active = $tabs.findIndex((tab) => tab === name) === $activeTab;
 </script>
 
-<div class="group dark:bg-white/2.5">
-  {#if label || tag}
-    <CodePanelHeader {tag} {label} />
-  {/if}
-  <CodePanelBody><slot /></CodePanelBody>
-</div>
+{#if active}
+  <div class="group dark:bg-white/2.5">
+    {#if label || tag}
+      <CodePanelHeader {tag} {label} />
+    {/if}
+    <CodePanelBody><slot /></CodePanelBody>
+  </div>
+{/if}
diff --git a/site/src/lib/ui/CodeGroup.svelte b/site/src/lib/ui/CodeGroup.svelte
index 831bc8d..cc18c68 100644
--- a/site/src/lib/ui/CodeGroup.svelte
+++ b/site/src/lib/ui/CodeGroup.svelte
@@ -1,10 +1,20 @@
 <script>
+  import { setContext } from "svelte";
   import CodeGroupHeader from "./Code/CodeGroupHeader.svelte";
   import CodeTab from "./Code/CodePanel.svelte";
+  import { writable } from "svelte/store";
+
+  /** @type {import("svelte/store").Writable<string[]>}*/
+  let tabs = writable([]);
+  let activeTab = writable(0);
+
+  setContext("code-group-id", crypto.randomUUID());
+  setContext("code-group-tabs", tabs);
+  setContext("code-group-active-tab", activeTab);
 </script>
 
 <div
-  class="shadow-xl my-6 overflow-hidden rounded-md bg-zinc-900 dark:ring-1 dark:ring-white/10 not-prose"
+  class="shadow-md my-6 overflow-hidden rounded-md bg-zinc-900 dark:ring-1 dark:ring-white/10 not-prose"
 >
   <slot Header={CodeGroupHeader} Tab={CodeTab} />
 </div>
diff --git a/site/src/routes/[[locale=locale]]/+page.svelte b/site/src/routes/[[locale=locale]]/+page.svelte
index 4509f02..670ca16 100644
--- a/site/src/routes/[[locale=locale]]/+page.svelte
+++ b/site/src/routes/[[locale=locale]]/+page.svelte
@@ -1,15 +1,12 @@
 <script>
   import CodeGroup from "$lib/ui/CodeGroup.svelte";
-  let activeTab = 0;
 </script>
 
 <CodeGroup let:Header let:Tab>
-  <Header title="Installation" tabs={["npm", "pnpm"]} bind:activeTab />
-  {#if activeTab === 0}
-    <Tab>npm install --save-dev t18s</Tab>
-  {:else if activeTab === 1}
-    <Tab>pnpm install --save-dev t18s</Tab>
-  {/if}
+  <Header title="Installation" />
+  <Tab name="npm">npm install --save-dev t18s</Tab>
+  <Tab name="yarn">yarn add --dev t18s</Tab>
+  <Tab name="pnpm">pnpm add --save-dev t18s</Tab>
 </CodeGroup>
 
 <CodeGroup let:Tab>
diff --git a/site/src/routes/[[locale=locale]]/syntax/+page.svelte b/site/src/routes/[[locale=locale]]/syntax/+page.svelte
index 531e581..050c0e0 100644
--- a/site/src/routes/[[locale=locale]]/syntax/+page.svelte
+++ b/site/src/routes/[[locale=locale]]/syntax/+page.svelte
@@ -1,5 +1,6 @@
 <script>
   import Callout from "$lib/ui/Callout.svelte";
+  import CodeGroup from "$lib/ui/CodeGroup.svelte";
 </script>
 
 <h1>Syntax</h1>
@@ -13,6 +14,42 @@
 </p>
 
 <h2>Interpolating Values</h2>
+You can interpolate strings into your messages using curly braces. The value inside
+the braces will be replaced with the value of the variable with the same name.
+
+<CodeGroup let:Tab>
+  <Tab>Hello <mark class="text-orange-400 bg-transparent">{"{fullName}"}</mark>, how are you?</Tab>
+</CodeGroup>
+
+You can specify that a value is a number by adding a type-annotation in the curly braces.
+
+<CodeGroup let:Tab>
+  <Tab>There are {"{"}count<mark class="text-orange-400 bg-transparent">, number</mark>{"}"} people here</Tab>
+</CodeGroup>
+
+The same thing works for dates.
+
+<CodeGroup let:Tab>
+  <Tab>Today is {"{"}date<mark class="text-orange-400 bg-transparent">, date</mark>{"}"}</Tab>
+</CodeGroup>
+
+
+You can format the value by adding a third, format options in the curly braces. You can for example 
+specify how long the date should be.
+
+<CodeGroup let:Tab>
+  <Tab>Today is {"{data, date"}<mark class="text-orange-400 bg-transparent">, short</mark>{"}"}</Tab>
+</CodeGroup>
+
+These formatting options are locale aware and will do the right thing for the locale you are using. It uses
+the <code>Intl</code> API under the hood.
+
+Generally the format for interpolating values is always this.
+<ol>
+  <li>Variable name</li>
+  <li>Type</li>
+  <li>Options</li>
+</ol>
 
 <h2>Plurals</h2>