docs: General improvements and add tailwind plugin page

Author: techniq

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

@@ -3,7 +3,30 @@
 </script>
 
 <div class="prose max-w-none bg-surface-100 rounded border p-4 mt-4 m-2">
-  <h1>Getting started</h1>
+  <h1>Introduction</h1>
 
-  <h2>TODO</h2>
+  <p>
+    LayerStack is a collection of packages ranging from general utilities (similar to lodash),
+    <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a>
+    theming and utils, and <a href="https://svelte.dev/" target="_blank">Svelte</a> actions and stores.
+  </p>
+
+  <p>Each package can be installed separately, but also complement one another.</p>
+
+  <h2>Packages:</h2>
+  <ul>
+    <li><a href="/docs/svelte-actions">@layerstack/svelte-actions</a></li>
+    <li><a href="/docs/svelte-stores">@layerstack/svelte-stores</a></li>
+    <li><a href="/docs/svelte-table">@layerstack/svelte-table</a></li>
+    <li><a href="/docs/tailwind">@layerstack/tailwind</a></li>
+    <li><a href="/docs/utils">@layerstack/utils</a></li>
+  </ul>
+
+  <p>
+    See also the Svelte companion component libraries, <a
+      href="https://layerchart.com"
+      target="_blank">LayerChart</a
+    >
+    and <a href="https://svelte-ux.techniq.dev" target="_blank">Svelte UX</a>
+  </p>
 </div>

sites/docs/src/routes/_NavMenu.svelte

@@ -2,7 +2,7 @@
   import { NavItem } from 'svelte-ux';
 
   import { page } from '$app/stores';
-  import { mdiCog, mdiFormatListBulleted, mdiHome, mdiPalette } from '@mdi/js';
+  import { mdiHome } from '@mdi/js';
 
   const actions = [
     'dataBackground',
@@ -40,12 +40,11 @@
   ];
 
   const table = ['actions', 'stores'];
-  const tailwind = ['utils'];
+  const tailwind = ['plugin', 'utils'];
   const utils = ['duration', 'format', 'json', 'Logger', 'string'];
 </script>
 
-<NavItem text="Getting Started" icon={mdiHome} currentUrl={$page.url} path="/" />
-<!-- <NavItem text="Changelog" icon={mdiFormatListBulleted} currentUrl={$page.url} path="/changelog" /> -->
+<NavItem text="Introduction" icon={mdiHome} currentUrl={$page.url} path="/" />
 
 <h1>svelte-actions</h1>
 {#each actions as item}

sites/docs/src/routes/docs/tailwind/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export async function load({ url }) {
-  redirect(302, '/docs/tailwind/utils');
+  redirect(302, '/docs/tailwind/plugin');
 }

sites/docs/src/routes/docs/tailwind/plugin/+page.md

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import Preview from '$docs/Preview.svelte';
+</script>
+
+<h1>Usage</h1>
+
+```js
+const colors = require('tailwindcss/colors');
+const layerstack = require('@layerstack/tailwind/plugin');
+
+/** @type {import('tailwindcss').Config}*/
+const config = {
+  content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'],
+  ux: {
+    // see also: https://svelte-ux.techniq.dev/customization
+    themes: {
+      // light mode
+      light: {
+        primary: colors['emerald']['600'],
+        'primary-content': 'white',
+        secondary: colors['blue']['500'],
+        'surface-100': 'white',
+        'surface-200': colors['gray']['100'],
+        'surface-300': colors['gray']['300'],
+        'surface-content': colors['gray']['900'],
+      },
+      // dark mode
+      dark: {
+        primary: colors['emerald']['600'],
+        'primary-content': 'white',
+        secondary: colors['blue']['500'],
+        'surface-100': colors['zinc']['800'],
+        'surface-200': colors['zinc']['900'],
+        'surface-300': colors['zinc']['950'],
+        'surface-content': colors['zinc']['100'],
+      },
+    },
+  },
+  plugins: [layerstack],
+};
+
+module.exports = config;
+```

sites/docs/src/routes/docs/tailwind/plugin/+page.ts

@@ -0,0 +1,16 @@
+import source from '$tailwind/plugin.cjs?raw';
+import pageSource from './+page.md?raw';
+
+export async function load() {
+  return {
+    meta: {
+      source,
+      pageSource,
+      description: 'Tailwind CSS plugiun to providing theming and additional utility classes',
+      related: [
+        'https://svelte-ux.techniq.dev/customization',
+        'https://svelte-ux.techniq.dev/theme',
+      ],
+    },
+  };
+}