Improve docs

.idea/git_toolbox_prj.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GitToolBoxProjectSettings">
+    <option name="commitMessageIssueKeyValidationOverride">
+      <BoolValueOverride>
+        <option name="enabled" value="true" />
+      </BoolValueOverride>
+    </option>
+    <option name="commitMessageValidationConfigOverride">
+      <CommitMessageValidationOverride>
+        <option name="enabled" value="true" />
+      </CommitMessageValidationOverride>
+    </option>
+  </component>
+</project>

mdsvex.config.js

@@ -0,0 +1,14 @@
+import { defineMDSveXConfig as defineConfig } from 'mdsvex';
+
+const config = defineConfig({
+  extensions: ['.svelte.md', '.md', '.svx'],
+
+  smartypants: {
+    dashes: 'oldschool',
+  },
+
+  remarkPlugins: [],
+  rehypePlugins: [],
+});
+
+export default config;

package.json

@@ -35,7 +35,8 @@
     "svelte-preprocess": "^4.10.1",
     "svelte2tsx": "^0.5.5",
     "tslib": "^2.3.1",
-    "typescript": "~4.6.2"
+    "typescript": "~4.6.2",
+    "mdsvex": "^0.10.5"
   },
   "type": "module",
   "svelte": "index.js"

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   eslint: ^7.32.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^3.2.1
+  mdsvex: ^0.10.5
   postcss: ^8.4.8
   postcss-extend-rule: ^4.0.0
   postcss-import: ^14.0.2
@@ -34,6 +35,7 @@ devDependencies:
   eslint: 7.32.0
   eslint-config-prettier: 8.5.0_eslint@7.32.0
   eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4
+  mdsvex: 0.10.5_svelte@3.46.4
   postcss: 8.4.8
   postcss-extend-rule: 4.0.0_postcss@8.4.8
   postcss-import: 14.0.2_postcss@8.4.8
@@ -307,6 +309,10 @@ packages:
       '@types/node': 17.0.21
     dev: true
 
+  /@types/unist/2.0.6:
+    resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
+    dev: true
+
   /@typescript-eslint/eslint-plugin/5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98:
     resolution: {integrity: sha512-ir0wYI4FfFUDfLcuwKzIH7sMVA+db7WYen47iRSaCGl+HMAZI9fpBwfDo45ZALD3A45ZGyHWDNLhbg8tZrMX4w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1447,6 +1453,18 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /mdsvex/0.10.5_svelte@3.46.4:
+    resolution: {integrity: sha512-/B23WZn5Vjrjh7Qp2YsOXLkU9YFm59IEylKNXC10o05ZaCP4LNv32tGXKP6aEssss6hk/LdISJuneELHFIS2pQ==}
+    peerDependencies:
+      svelte: 3.x
+    dependencies:
+      '@types/unist': 2.0.6
+      prism-svelte: 0.4.7
+      prismjs: 1.27.0
+      svelte: 3.46.4
+      vfile-message: 2.0.4
+    dev: true
+
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1993,6 +2011,15 @@ packages:
     hasBin: true
     dev: true
 
+  /prism-svelte/0.4.7:
+    resolution: {integrity: sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==}
+    dev: true
+
+  /prismjs/1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+    dev: true
+
   /progress/2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -2399,6 +2426,12 @@ packages:
     hasBin: true
     dev: true
 
+  /unist-util-stringify-position/2.0.3:
+    resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -2413,6 +2446,13 @@ packages:
     resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
     dev: true
 
+  /vfile-message/2.0.4:
+    resolution: {integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-stringify-position: 2.0.3
+    dev: true
+
   /vite/2.8.6:
     resolution: {integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==}
     engines: {node: '>=12.2.0'}

src/lib/components/elements/buttons/Button.svelte

@@ -7,8 +7,10 @@
     export let value: string;
 
     export let size: 'sm' | 'md' | 'lg' = 'md'
+    export let color: 'outline' | 'primary' | 'danger';
 
     let className = `btn btn--${size}`;
+    className += color && (` btn--${color}`)
 </script>
 
 {#if as === 'button'}
@@ -313,11 +315,11 @@
     */
   }
 
-  .btn--large {
+  .btn--lg {
     /* padding: $em-spacer-6 1.5em; */
-    font-size: inherit;
     /* line-height: $lh-default; */
 
+    font-size: var(--font-2);
     border-radius: 0.5em;
   }
 

src/lib/styles/themes.postcss

@@ -0,0 +1,2 @@
+@import "themes/light.postcss";
+@import "themes/old.postcss";

src/routes/__layout.svelte

@@ -1,15 +1,35 @@
 <script lang="ts">
     import "$lib/styles/variables.postcss";
-    import "$lib/styles/themes/light.postcss";
+    import "../lib/styles/themes/old.postcss";
+    import Sidebar from "./_docs/Sidebar.svelte";
 </script>
 
-<main>
-    <slot></slot>
-</main>
+
+<div class="app">
+    <Sidebar />
+    <main class="app__content">
+        <slot />
+    </main>
+</div>
 
 <style lang="postcss">
-    main {
-      font-size: var(--body-font-size);
-      font-family: var(--body-font);
+    :global(body) {
+        margin: 0;
+        font-size: var(--body-font-size);
+        font-family: var(--body-font);
+    }
+
+    .app {
+        display: grid;
+        min-height: 100vh;
+        grid-template-columns: 250px 1fr;
+        @media(width <= 500px) {
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__content {
+            padding: 1rem max(10vw, 1rem);
+        }
     }
 </style>

src/routes/_docs/Sidebar.svelte

@@ -0,0 +1,41 @@
+<nav class="sidebar">
+    <div class="section">
+        <span class="section__title">Introduction</span>
+        <a href="/" class="section__link">Welcome</a>
+    </div>
+
+    <div class="section">
+        <span class="section__title">Components</span>
+        {#each ['buttons'] as component}
+            <a href="/components/{component}" class="section__link">{component}</a>
+        {/each}
+    </div>
+</nav>
+
+<style lang="postcss">
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+        grid-gap: 2rem;
+        background-color: hsl(216, 10%, 30%);
+        color: hsl(216, 10%, 80%);
+        padding: 1.5rem;
+
+        .section {
+            display: flex;
+            flex-direction: column;
+            grid-gap: 0.2rem;
+
+            &__title {
+                text-transform: uppercase;
+                font-size: 12px;
+            }
+
+            &__link {
+                text-transform: capitalize;
+                color: hsl(216, 10%, 90%);
+                text-decoration: none;
+            }
+        }
+    }
+</style>

src/routes/components/buttons.md

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import Button from "$lib/components/elements/buttons/Button.svelte"
+</script>
+
+# Buttons
+
+<Button>Eat cake</Button>
+
+<Button size="sm" color="primary">Small piece</Button>
+
+<Button size="lg" color="danger">Big part</Button>

src/routes/index.md

@@ -0,0 +1,3 @@
+# Introduction
+
+This is `kleos`, Modrinth's style and component library. Go to [its repository](https://github.com/modrinth/kleos) for more information.

src/routes/index.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-    import Button from "$lib/components/elements/buttons/Button.svelte"
-</script>
-
-<h1>Docs...</h1>
-<Button>Button</Button>

svelte.config.js

@@ -1,14 +1,19 @@
+import { mdsvex } from 'mdsvex';
+import mdsvexConfig from './mdsvex.config.js';
 import adapter from '@sveltejs/adapter-auto';
 import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+  extensions: ['.svelte', ...mdsvexConfig.extensions],
+
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
   preprocess: [
     preprocess({
       postcss: true,
     }),
+    mdsvex(mdsvexConfig),
   ],
 
   kit: {