Use mdsvex

site/package.json

@@ -18,6 +18,7 @@
 		"@tailwindcss/typography": "^0.5.10",
 		"autoprefixer": "^10.4.16",
 		"html-minifier": "^4.0.0",
+		"mdsvex": "^0.11.0",
 		"postcss": "^8.4.31",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",

site/src/lib/ui/Pagination.svelte

@@ -0,0 +1,25 @@
+<script>
+  import ArrowLeft from "virtual:icons/heroicons/arrow-left";
+  import ArrowRight from "virtual:icons/heroicons/arrow-right";
+
+  /** @type {string} */
+  export let previousLabel;
+  /** @type {string} */
+  export let nextLabel;
+  /** @type {string} */
+  export let previousHref;
+  /** @type {string} */
+  export let nextHref;
+</script>
+
+<footer class="flex items-center justify-between not-prose pt-4 border-t">
+  <a
+    class="inline-flex gap-1 items-center justify-center overflow-hidden text-sm font-medium transition rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    href={previousHref}><ArrowLeft class="h-4 w-4" />{previousLabel}</a
+  >
+
+  <a
+    class="inline-flex gap-1 items-center justify-center overflow-hidden text-sm font-medium transition rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    href={nextHref}>{nextLabel}<ArrowRight class="h-4 w-4" /></a
+  >
+</footer>

site/src/routes/[[locale=locale]]/$t18s/+page.svelte → site/src/routes/[[locale=locale]]/$t18s/+page.svx

@@ -4,41 +4,39 @@
   import locale_param_matcher_snippet from "./locale-param-matcher-snippet.js?raw";
 </script>
 
-<h1>$t18s Reference</h1>
-<p>
-  The `$t18s` module contains all runtime code for t18s. It is how you interact
-  with the library.
-</p>
+# $t18s Module Reference
 
-<h2><code>type Locale</code></h2>
-<p>A union type of all the locales you have registered with t18s.</p>
+The `$t18s` module contains all runtime code for t18s. It is how you interact
+with the library.
+
+## `type Locale`
+A union type of all the locales you have registered with t18s.
 
 <CodeGroup let:Tab>
   <Tab>
     <Prism language="typescript" code={'type Locale = "en" | "de";'} />
   </Tab>
 </CodeGroup>
 
-<h2><code>locales</code></h2>
-<p>
-  An array of all the locales you have registered with t18s. Useful for places
-  where you need to iterate over all locales, such as Locale Switchers or SEO.
-</p>
+## `locales`
+
+An array of all the locales you have registered with t18s. Useful for places
+where you need to iterate over all locales, such as Locale Switchers or SEO.
 
-<h2><code>$locale</code> Store</h2>
-<p>A writable store containing the currently active locale.</p>
+## `$locale` Store
+
+A writable store containing the currently active locale.
 
 <CodeGroup let:Tab>
   <Tab>
     <Prism language="typescript" code="const locale = Writable<Locale>;" />
   </Tab>
 </CodeGroup>
 
-<h2><code>isLocale</code></h2>
-<p>
-  A convenience function for checking if something is a valid locale or not.
-  Only the locales that are registered with t18s are considered valid.
-</p>
+## `isLocale`
+
+A convenience function for checking if something is a valid locale or not.
+Only the locales that are registered with t18s are considered valid.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -49,7 +47,7 @@
   </Tab>
 </CodeGroup>
 
-<p>It is useful for quickly creating a param matcher for locales.</p>
+It is useful for quickly creating a param matcher for locales.
 
 <CodeGroup let:Tab let:Header>
   <Header title="src/params/locale.js" />
@@ -58,10 +56,11 @@
   </Tab>
 </CodeGroup>
 
-<h2><code>setLocale</code></h2>
-<p>Sets the current locale. Useful for Locale Switchers.</p>
+## `setLocale`
 
-<h2><code>$t</code> Store</h2>
+Sets the current locale. Useful for Locale Switchers.
+
+## `$t` Store
 
 The main store through which you interact with t18s. It contains a function that
 will return a translated string for a given key.
@@ -91,24 +90,22 @@ interpolate into.
   </Tab>
 </CodeGroup>
 
-<h2><code>preloadLocale</code></h2>
-<p>
-  Preloads any messages that are needed for the given locale. Call this before
-  trying to display any messages to avoid a flash of fallbacks. This is usually
-  done in `+page.js` files.
-</p>
+## `preloadLocale`
+
+Preloads any messages that are needed for the given locale. Call this before
+trying to display any messages to avoid a flash of fallbacks. This is usually
+done in `+page.js` files.
 
 <CodeGroup let:Tab>
   <Tab>
     <Prism language="typescript" code="(locale: Locale) => Promise<void>" />
   </Tab>
 </CodeGroup>
 
-<h2><code>const fallbackLocale</code></h2>
-<p>
-  The fallback locale you specified in your config, or null if you don't specify one. Will be definitely
-  typed based on your config.
-</p>
+## `const fallbackLocale`
+
+The fallback locale you specified in your config, or null if you don't specify one. Will be definitely
+typed based on your config.
 
 <CodeGroup let:Tab>
   <Tab>

site/src/routes/[[locale=locale]]/comparisons/+page.svelte → site/src/routes/[[locale=locale]]/comparisons/+page.svx

@@ -3,11 +3,10 @@
     import XMark from "virtual:icons/heroicons/x-mark"
 </script>
 
-<h1>Comparisons to other Libraries</h1>
-<p>
-    There are quite a few i18n libraries available for Svelte. Here is how 
-    t18s compares to the most popular ones.
-</p>
+# Comparisons to other Libraries
+
+There are quite a few i18n libraries available for Svelte. Here is how
+t18s compares to the most popular ones.
 
 <table>
     <thead>
@@ -63,4 +62,4 @@
             <td><XMark/></td>
         </tr>
     </tbody>
-</table>
+</table>

site/src/routes/[[locale=locale]]/getting-started/+page.svelte → site/src/routes/[[locale=locale]]/getting-started/+page.svx

@@ -4,9 +4,9 @@
   import Prism from "$lib/ui/Prism.svelte";
 </script>
 
-<h1>Getting Started</h1>
+# Getting Started
 
-<p>First you need to install t18s as a dev dependency.</p>
+First you need to install t18s as a dev dependency.
 
 <CodeGroup let:Header let:Tab>
   <Header title="Installation" />
@@ -19,10 +19,8 @@
   >
 </CodeGroup>
 
-<p>
-  T18S isn't just a library, it's a vite-plugin, so you will need to register it
-  in your vite config.
-</p>
+T18S isn't just a library, it's a vite-plugin, so you will need to register it
+in your vite config.
 
 <CodeGroup let:Header let:Tab>
   <Header title="vite.config.js" />
@@ -31,8 +29,6 @@
   </Tab>
 </CodeGroup>
 
-<p>
-  You will need to at least one option in the plugin options; The list of
-  locales that you want to support. Additionally you may use a fallback locale
-  that will be used if a message is missing in the current locale.
-</p>
+You will need to at least one option in the plugin options; The list of
+locales that you want to support. Additionally you may use a fallback locale
+that will be used if a message is missing in the current locale.

site/src/routes/[[locale=locale]]/plugin-config/+page.svx

@@ -0,0 +1 @@
+# Plugin Configuration

site/src/routes/[[locale=locale]]/preloading/+page.svx

@@ -0,0 +1 @@
+# Preloading