Update docs examples + Add Select component + Add Card, Base, Title classes

2022-03-29 00:44:23 -07:00 · 2022-03-29 00:44:23 -07:00 · 98baab4d03
commit 98baab4d03
parent 8c5bf55b51
41 changed files with 1374 additions and 849 deletions
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@ -13,5 +13,15 @@
      </option>
    </inspection_tool>
    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="style:min-width" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
  </profile>
 </component>
--- a/mdsvex.config.js
+++ b/mdsvex.config.js
@ -1,4 +1,5 @@
 import { defineMDSveXConfig as defineConfig } from 'mdsvex';
+import examples from 'mdsvexamples'

 const config = defineConfig({
  extensions: ['.svelte.md', '.md', '.svx'],
@ -7,7 +8,7 @@ const config = defineConfig({
    dashes: 'oldschool',
  },

-  remarkPlugins: [],
+  remarkPlugins: [[examples, { ExampleComponent: '$routes/_internal/components/Example.svelte' }]],
  rehypePlugins: [],

  layout: {
--- a/package.json
+++ b/package.json
@ -20,8 +20,9 @@
    "@iconify-json/heroicons-outline": "^1.1.1",
    "@iconify-json/lucide": "^1.1.7",
    "@poppanator/sveltekit-svg": "^0.3.1",
-    "@sveltejs/adapter-auto": "^1.0.0-next.33",
+    "@sveltejs/adapter-static": "^1.0.0-next.29",
    "@sveltejs/kit": "next",
+    "@types/prismjs": "^1.26.0",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "autoprefixer": "^10.4.2",
@ -30,21 +31,22 @@
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "mdsvex": "^0.10.5",
+    "mdsvexamples": "^0.0.8",
    "nodemon": "^2.0.15",
    "postcss": "^8.4.8",
    "postcss-extend-rule": "^4.0.0",
    "postcss-import": "^14.0.2",
+    "postcss-import-ext-glob": "^2.0.1",
    "postcss-load-config": "^3.1.1",
    "postcss-nested": "^5.0.6",
    "postcss-preset-env": "^7.4.2",
+    "postcss-pxtorem": "^6.0.0",
    "postcss-strip-inline-comments": "^0.1.5",
-    "prism-svelte": "^0.5.0",
-    "prismjs": "^1.27.0",
+    "sveld": "^0.13.4",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.6",
    "svelte-preprocess": "^4.10.1",
    "svelte2tsx": "^0.5.5",
-    "sveltedoc-parser": "^4.2.1",
    "tslib": "^2.3.1",
    "typescript": "~4.6.2",
    "unplugin-icons": "^0.13.3"
@ -67,6 +69,8 @@
  },
  "homepage": "https://omorphia.modrinth.com",
  "dependencies": {
-    "sanitize.css": "^13.0.0"
+    "sanitize.css": "^13.0.0",
+    "svelte-use-click-outside": "^1.0.0",
+    "throttle-debounce": "^3.0.1"
  }
 }
--- a/plugins/sveld.js
+++ b/plugins/sveld.js
@ -0,0 +1,30 @@
+import { ComponentParser } from 'sveld'
+import sveltePreprocess from 'svelte-preprocess'
+import * as svelte from 'svelte/compiler'
+
+export default function sveld() {
+    return {
+        name: 'vite-plugin-sveld',
+        async transform(src, id) {
+            if (id.endsWith('?raw&sveld')) {
+                const raw = JSON.parse(src.split('export default ')[1])
+
+                let { code } = await svelte.preprocess(raw, sveltePreprocess({ postcss: true }), {
+                    filename: id
+                })
+                const data = new ComponentParser({
+                    verbose: false
+                }).parseSvelteComponent(code, {
+                    filePath: id,
+                    moduleName: id
+                })
+
+
+                return {
+                    code: `export default ${JSON.stringify(data)}`,
+                    map: null
+                }
+            }
+        }
+    }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -5,8 +5,9 @@ specifiers:
  '@iconify-json/heroicons-outline': ^1.1.1
  '@iconify-json/lucide': ^1.1.7
  '@poppanator/sveltekit-svg': ^0.3.1
-  '@sveltejs/adapter-auto': ^1.0.0-next.33
+  '@sveltejs/adapter-static': ^1.0.0-next.29
  '@sveltejs/kit': next
+  '@types/prismjs': ^1.26.0
  '@typescript-eslint/eslint-plugin': ^5.10.1
  '@typescript-eslint/parser': ^5.10.1
  autoprefixer: ^10.4.2
@ -15,36 +16,42 @@ specifiers:
  eslint-config-prettier: ^8.3.0
  eslint-plugin-svelte3: ^3.2.1
  mdsvex: ^0.10.5
+  mdsvexamples: ^0.0.8
  nodemon: ^2.0.15
  postcss: ^8.4.8
  postcss-extend-rule: ^4.0.0
  postcss-import: ^14.0.2
+  postcss-import-ext-glob: ^2.0.1
  postcss-load-config: ^3.1.1
  postcss-nested: ^5.0.6
  postcss-preset-env: ^7.4.2
+  postcss-pxtorem: ^6.0.0
  postcss-strip-inline-comments: ^0.1.5
-  prism-svelte: ^0.5.0
-  prismjs: ^1.27.0
  sanitize.css: ^13.0.0
+  sveld: ^0.13.4
  svelte: ^3.44.0
  svelte-check: ^2.2.6
  svelte-preprocess: ^4.10.1
+  svelte-use-click-outside: ^1.0.0
  svelte2tsx: ^0.5.5
-  sveltedoc-parser: ^4.2.1
+  throttle-debounce: ^3.0.1
  tslib: ^2.3.1
  typescript: ~4.6.2
  unplugin-icons: ^0.13.3

 dependencies:
  sanitize.css: 13.0.0
+  svelte-use-click-outside: 1.0.0
+  throttle-debounce: 3.0.1

 devDependencies:
  '@iconify-json/carbon': 1.1.1
  '@iconify-json/heroicons-outline': 1.1.1
  '@iconify-json/lucide': 1.1.7
  '@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
-  '@sveltejs/adapter-auto': 1.0.0-next.33
-  '@sveltejs/kit': 1.0.0-next.301_svelte@3.46.4
+  '@sveltejs/adapter-static': 1.0.0-next.29
+  '@sveltejs/kit': 1.0.0-next.303_svelte@3.46.4
+  '@types/prismjs': 1.26.0
  '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
  '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
  autoprefixer: 10.4.2_postcss@8.4.8
@ -53,21 +60,22 @@ devDependencies:
  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
+  mdsvexamples: 0.0.8
  nodemon: 2.0.15
  postcss: 8.4.8
  postcss-extend-rule: 4.0.0_postcss@8.4.8
  postcss-import: 14.0.2_postcss@8.4.8
+  postcss-import-ext-glob: 2.0.1_postcss@8.4.8
  postcss-load-config: 3.1.3
  postcss-nested: 5.0.6_postcss@8.4.8
  postcss-preset-env: 7.4.2_postcss@8.4.8
+  postcss-pxtorem: 6.0.0_postcss@8.4.8
  postcss-strip-inline-comments: 0.1.5
-  prism-svelte: 0.5.0
-  prismjs: 1.27.0
+  sveld: 0.13.4_c518e768a841b289340ac9217a6c6fc9
  svelte: 3.46.4
  svelte-check: 2.4.5_33233005e4be8b4492b63cc9de0a2fd4
  svelte-preprocess: 4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd
  svelte2tsx: 0.5.5_svelte@3.46.4+typescript@4.6.2
-  sveltedoc-parser: 4.2.1
  tslib: 2.3.1
  typescript: 4.6.2
  unplugin-icons: 0.13.3
@ -211,23 +219,6 @@ packages:
      - supports-color
    dev: true

-  /@eslint/eslintrc/1.2.1:
-    resolution: {integrity: sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.3
-      espree: 9.3.1
-      globals: 13.12.1
-      ignore: 5.2.0
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /@humanwhocodes/config-array/0.5.0:
    resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
    engines: {node: '>=10.10.0'}
@ -239,25 +230,10 @@ packages:
      - supports-color
    dev: true

-  /@humanwhocodes/config-array/0.9.5:
-    resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.3
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /@humanwhocodes/object-schema/1.2.1:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

-  /@iarna/toml/2.2.5:
-    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
-    dev: true
-
  /@iconify-json/carbon/1.1.1:
    resolution: {integrity: sha512-ClOYc+82CKlDAKH1tfDTJTzNz4oHhYD04ALA5uemw9PdWXg05yIJb9bxWjSz4UgdUbH5N/yd8s9hNPI3h6jnlg==}
    dependencies:
@ -323,6 +299,33 @@ packages:
      svgo: 2.8.0
    dev: true

+  /@rollup/plugin-node-resolve/11.2.1_rollup@2.70.0:
+    resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.70.0
+      '@types/resolve': 1.17.1
+      builtin-modules: 3.2.0
+      deepmerge: 4.2.2
+      is-module: 1.0.0
+      resolve: 1.22.0
+      rollup: 2.70.0
+    dev: true
+
+  /@rollup/pluginutils/3.1.0_rollup@2.70.0:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.70.0
+    dev: true
+
  /@rollup/pluginutils/4.2.0:
    resolution: {integrity: sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==}
    engines: {node: '>= 8.0.0'}
@ -336,36 +339,14 @@ packages:
    engines: {node: '>=6'}
    dev: true

-  /@sveltejs/adapter-auto/1.0.0-next.33:
-    resolution: {integrity: sha512-FVEBSw5XIYCrqMPY2VGmaGyT4ZvbahcdQJ613O4lgAoafRdUy7ZaE8GoeDmCJxtTUsqhAQUFu7jx9IIhz+QrsQ==}
+  /@sveltejs/adapter-static/1.0.0-next.29:
+    resolution: {integrity: sha512-0hjGnfT3BRyoHnzJ2w0/xL+xICRpKneDTm45ZzggiRrc0r71WJfF6toGeg8N4QUQnj8EJ3Itm453gsS1kt7VUQ==}
    dependencies:
-      '@sveltejs/adapter-cloudflare': 1.0.0-next.16
-      '@sveltejs/adapter-netlify': 1.0.0-next.51
-      '@sveltejs/adapter-vercel': 1.0.0-next.47
-    dev: true
-
-  /@sveltejs/adapter-cloudflare/1.0.0-next.16:
-    resolution: {integrity: sha512-ripTRtOasAtxDJEIF3kwwji/9WHfX069i5LuRwGUzOi4/cbcGfgV1RFBVfo/8G6hr3ehqLeKCdloet1yTsp34A==}
-    dependencies:
-      esbuild: 0.14.25
-    dev: true
-
-  /@sveltejs/adapter-netlify/1.0.0-next.51:
-    resolution: {integrity: sha512-P7/cW/0z8zd8J6DOI2yxKZG0+HRMMuzfOf0yzFXX0vRwBePhKlZ/H4qhTOo2NrCmj3Len545o+ugj5gyMXl1+g==}
-    dependencies:
-      '@iarna/toml': 2.2.5
-      esbuild: 0.14.25
      tiny-glob: 0.2.9
    dev: true

-  /@sveltejs/adapter-vercel/1.0.0-next.47:
-    resolution: {integrity: sha512-VV3vP8KqL9XOc7xfQLVhXTM5jrTme+r1qJy98u5/dhAhkdjqrGDwAKo/s7MoB3rTYxLb2b8I4QxAaoz2Y2aIBg==}
-    dependencies:
-      esbuild: 0.14.25
-    dev: true
-
-  /@sveltejs/kit/1.0.0-next.301_svelte@3.46.4:
-    resolution: {integrity: sha512-F/XP1VEu+fpvgY04JekNxAFupccNMKOyXtbox0LwNJvBulL15/Tzy6tf4g+9t2Jy7mprwI3h0ZC9G/nVujRFnQ==}
+  /@sveltejs/kit/1.0.0-next.303_svelte@3.46.4:
+    resolution: {integrity: sha512-WdxDc8OiF1WEd/bEza7CBdzA+3qIcCi1GKBj/gieKX9I3N8iDJt/Cg2POrLo9wQoJ47nZcAd1eOhfr7XEX1aIQ==}
    engines: {node: '>=14.13'}
    hasBin: true
    peerDependencies:
@ -417,6 +398,10 @@ packages:
    engines: {node: '>=10.13.0'}
    dev: true

+  /@types/estree/0.0.39:
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+    dev: true
+
  /@types/json-schema/7.0.9:
    resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
    dev: true
@ -425,10 +410,20 @@ packages:
    resolution: {integrity: sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==}
    dev: true

+  /@types/prismjs/1.26.0:
+    resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
+    dev: true
+
  /@types/pug/2.0.6:
    resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
    dev: true

+  /@types/resolve/1.17.1:
+    resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
+    dependencies:
+      '@types/node': 17.0.21
+    dev: true
+
  /@types/sass/1.43.1:
    resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
    dependencies:
@ -573,6 +568,18 @@ packages:
    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
    dev: true

+  /abstract-syntax-tree/2.20.5:
+    resolution: {integrity: sha512-xxmZemmrsmzXHxdEzy9mSM3c22hCjMcLWMUbg1LQeK1FMDLHurxnMmOAN46B0NkFgembXR17D6lDctyFhVjotQ==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      ast-types: 0.14.2
+      astring: 1.8.1
+      esquery: 1.4.0
+      estraverse: 5.3.0
+      meriyah: 4.2.0
+      source-map: 0.7.3
+    dev: true
+
  /acorn-jsx/5.3.2_acorn@7.4.1:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@ -581,14 +588,6 @@ packages:
      acorn: 7.4.1
    dev: true

-  /acorn-jsx/5.3.2_acorn@8.7.0:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.7.0
-    dev: true
-
  /acorn/7.4.1:
    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
    engines: {node: '>=0.4.0'}
@ -673,20 +672,33 @@ packages:
      sprintf-js: 1.0.3
    dev: true

-  /argparse/2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: true
-
  /array-union/2.1.0:
    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
    engines: {node: '>=8'}
    dev: true

+  /ast-types/0.14.2:
+    resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
+    engines: {node: '>=4'}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
  /astral-regex/2.0.0:
    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
    engines: {node: '>=8'}
    dev: true

+  /astring/1.8.1:
+    resolution: {integrity: sha512-Aj3mbwVzj7Vve4I/v2JYOPFkCGM2YS7OqQTNSxmUR+LECRpokuPgAYghePgr6SALDo5bD5DlfbSaYjOzGJZOLQ==}
+    hasBin: true
+    dev: true
+
+  /at-least-node/1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
  /autoprefixer/10.4.2_postcss@8.4.8:
    resolution: {integrity: sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==}
    engines: {node: ^10 || ^12 || >=14}
@ -760,6 +772,11 @@ packages:
    resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
    dev: true

+  /builtin-modules/3.2.0:
+    resolution: {integrity: sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==}
+    engines: {node: '>=6'}
+    dev: true
+
  /cacheable-request/6.1.0:
    resolution: {integrity: sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==}
    engines: {node: '>=8'}
@ -884,6 +901,11 @@ packages:
    engines: {node: '>= 10'}
    dev: true

+  /comment-parser/0.7.6:
+    resolution: {integrity: sha512-GKNxVA7/iuTnAqGADlTWX4tkhzxZKXp5fLJqKTlQLHkE65XDUKutZ3BHaJC5IGcper2tT3QRD1xr4o3jNpgXXg==}
+    engines: {node: '>= 6.0.0'}
+    dev: true
+
  /concat-map/0.0.1:
    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
    dev: true
@ -1093,6 +1115,11 @@ packages:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
    dev: true

+  /deepmerge/4.2.2:
+    resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /defer-to-connect/1.1.3:
    resolution: {integrity: sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==}
    dev: true
@ -1128,13 +1155,6 @@ packages:
    resolution: {integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==}
    dev: true

-  /domhandler/3.3.0:
-    resolution: {integrity: sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==}
-    engines: {node: '>= 4'}
-    dependencies:
-      domelementtype: 2.2.0
-    dev: true
-
  /domhandler/4.3.0:
    resolution: {integrity: sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==}
    engines: {node: '>= 4'}
@ -1446,14 +1466,6 @@ packages:
      estraverse: 4.3.0
    dev: true

-  /eslint-scope/7.1.1:
-    resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
  /eslint-utils/2.1.0:
    resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
    engines: {node: '>=6'}
@ -1471,16 +1483,6 @@ packages:
      eslint-visitor-keys: 2.1.0
    dev: true

-  /eslint-utils/3.0.0_eslint@8.4.1:
-    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
-    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
-    peerDependencies:
-      eslint: '>=5'
-    dependencies:
-      eslint: 8.4.1
-      eslint-visitor-keys: 2.1.0
-    dev: true
-
  /eslint-visitor-keys/1.3.0:
    resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
    engines: {node: '>=4'}
@ -1545,53 +1547,6 @@ packages:
      - supports-color
    dev: true

-  /eslint/8.4.1:
-    resolution: {integrity: sha512-TxU/p7LB1KxQ6+7aztTnO7K0i+h0tDi81YRY9VzB6Id71kNz+fFYnf5HD5UOQmxkzcoa0TlVZf9dpMtUv0GpWg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint/eslintrc': 1.2.1
-      '@humanwhocodes/config-array': 0.9.5
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.3
-      doctrine: 3.0.0
-      enquirer: 2.3.6
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.4.1
-      eslint-visitor-keys: 3.3.0
-      espree: 9.2.0
-      esquery: 1.4.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      functional-red-black-tree: 1.0.1
-      glob-parent: 6.0.2
-      globals: 13.12.1
-      ignore: 4.0.6
-      import-fresh: 3.3.0
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.1
-      progress: 2.0.3
-      regexpp: 3.2.0
-      semver: 7.3.5
-      strip-ansi: 6.0.1
-      strip-json-comments: 3.1.1
-      text-table: 0.2.0
-      v8-compile-cache: 2.3.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /espree/7.3.1:
    resolution: {integrity: sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==}
    engines: {node: ^10.12.0 || >=12.0.0}
@ -1601,24 +1556,6 @@ packages:
      eslint-visitor-keys: 1.3.0
    dev: true

-  /espree/9.2.0:
-    resolution: {integrity: sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.7.0
-      acorn-jsx: 5.3.2_acorn@8.7.0
-      eslint-visitor-keys: 3.3.0
-    dev: true
-
-  /espree/9.3.1:
-    resolution: {integrity: sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.7.0
-      acorn-jsx: 5.3.2_acorn@8.7.0
-      eslint-visitor-keys: 3.3.0
-    dev: true
-
  /esprima/4.0.1:
    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
    engines: {node: '>=4'}
@ -1649,6 +1586,14 @@ packages:
    engines: {node: '>=4.0'}
    dev: true

+  /estree-walker/0.6.1:
+    resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==}
+    dev: true
+
+  /estree-walker/1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+    dev: true
+
  /estree-walker/2.0.2:
    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
    dev: true
@ -1696,6 +1641,10 @@ packages:
    resolution: {integrity: sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=}
    dev: true

+  /fast-sort/2.2.0:
+    resolution: {integrity: sha512-W7zqnn2zsYoQA87FKmYtgOsbJohOrh7XrtZrCVHN5XZKqTBTv5UG+rSS3+iWbg/nepRQUOu+wnas8BwtK8kiCg==}
+    dev: true
+
  /fastq/1.13.0:
    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
    dependencies:
@ -1740,6 +1689,16 @@ packages:
    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
    dev: true

+  /fs-extra/9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.9
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
  /fs.realpath/1.0.0:
    resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
    dev: true
@ -1786,13 +1745,6 @@ packages:
      is-glob: 4.0.3
    dev: true

-  /glob-parent/6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: true
-
  /glob/7.2.0:
    resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
    dependencies:
@ -1893,15 +1845,6 @@ packages:
      function-bind: 1.1.1
    dev: true

-  /htmlparser2-svelte/4.1.0:
-    resolution: {integrity: sha512-+4f4RBFz7Rj2Hp0ZbFbXC+Kzbd6S9PgjiuFtdT76VMNgKogrEZy0pG2UrPycPbrZzVEIM5lAT3lAdkSTCHLPjg==}
-    dependencies:
-      domelementtype: 2.2.0
-      domhandler: 3.3.0
-      domutils: 2.8.0
-      entities: 2.2.0
-    dev: true
-
  /http-cache-semantics/4.1.0:
    resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
    dev: true
@ -2008,6 +1951,10 @@ packages:
      is-path-inside: 3.0.3
    dev: true

+  /is-module/1.0.0:
+    resolution: {integrity: sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=}
+    dev: true
+
  /is-npm/5.0.0:
    resolution: {integrity: sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==}
    engines: {node: '>=10'}
@ -2061,13 +2008,6 @@ packages:
      esprima: 4.0.1
    dev: true

-  /js-yaml/4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: true
-
  /json-buffer/3.0.0:
    resolution: {integrity: sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=}
    dev: true
@ -2084,6 +2024,14 @@ packages:
    resolution: {integrity: sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=}
    dev: true

+  /jsonfile/6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.0
+    optionalDependencies:
+      graceful-fs: 4.2.9
+    dev: true
+
  /keyv/3.1.0:
    resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
    dependencies:
@ -2199,6 +2147,22 @@ packages:
      vfile-message: 2.0.4
    dev: true

+  /mdsvexamples/0.0.8:
+    resolution: {integrity: sha512-BFyJeke4r/PbWWk4+jXVXjuR0/YNMJK10rXjRGarmr7+bqg3kIlfTFjew/uMx9KBYchWLaJlnVQPrh5nQN5/lg==}
+    dependencies:
+      abstract-syntax-tree: 2.20.5
+      prism-svelte: 0.5.0
+      prismjs: 1.27.0
+      unist-util-visit: 4.1.0
+      unplugin: 0.5.2
+      upath: 2.0.1
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
  /merge-stream/2.0.0:
    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
    dev: true
@ -2208,6 +2172,11 @@ packages:
    engines: {node: '>= 8'}
    dev: true

+  /meriyah/4.2.0:
+    resolution: {integrity: sha512-fCVh5GB9YT53Bq14l00HLYE3i9DywrY0JVZxbk0clXWDuMsUKKwluvC5sY0bMBqHbnIbpIjfSSIsnrzbauA8Yw==}
+    engines: {node: '>=10.4.0'}
+    dev: true
+
  /micromatch/4.0.4:
    resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
    engines: {node: '>=8.6'}
@ -2667,6 +2636,17 @@ packages:
      postcss-value-parser: 4.2.0
    dev: true

+  /postcss-import-ext-glob/2.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-cCvzsZBPuhLCOAfkPeBnJ31uz5azlAjNb5Aug1f2nlomgZK+WD7Uwfrk+epFU9PI20rsMAineDUK4Ty+jEQHcg==}
+    peerDependencies:
+      postcss: ^8.2.0
+    dependencies:
+      fast-glob: 3.2.11
+      fast-sort: 2.2.0
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
  /postcss-import/14.0.2_postcss@8.4.8:
    resolution: {integrity: sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==}
    engines: {node: '>=10.0.0'}
@ -3012,6 +2992,14 @@ packages:
      postcss-selector-parser: 6.0.9
    dev: true

+  /postcss-pxtorem/6.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
  /postcss-reduce-initial/5.1.0_postcss@8.4.8:
    resolution: {integrity: sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==}
    engines: {node: ^10 || ^12 || >=14.0}
@ -3118,6 +3106,12 @@ packages:
    engines: {node: '>=4'}
    dev: true

+  /prettier/2.6.1:
+    resolution: {integrity: sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
  /prism-svelte/0.4.7:
    resolution: {integrity: sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==}
    dev: true
@ -3210,6 +3204,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /require-relative/0.8.7:
+    resolution: {integrity: sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=}
+    dev: true
+
  /resolve-from/4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@ -3249,6 +3247,25 @@ packages:
      glob: 7.2.0
    dev: true

+  /rollup-plugin-svelte/7.1.0_rollup@2.70.0+svelte@3.46.4:
+    resolution: {integrity: sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      rollup: '>=2.0.0'
+      svelte: '>=3.5.0'
+    dependencies:
+      require-relative: 0.8.7
+      rollup: 2.70.0
+      rollup-pluginutils: 2.8.2
+      svelte: 3.46.4
+    dev: true
+
+  /rollup-pluginutils/2.8.2:
+    resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==}
+    dependencies:
+      estree-walker: 0.6.1
+    dev: true
+
  /rollup/2.70.0:
    resolution: {integrity: sha512-iEzYw+syFxQ0X9RefVwhr8BA2TNJsTaX8L8dhyeyMECDbmiba+8UQzcu+xZdji0+JQ+s7kouQnw+9Oz5M19XKA==}
    engines: {node: '>=10.0.0'}
@ -3467,6 +3484,34 @@ packages:
    engines: {node: '>= 0.4'}
    dev: true

+  /sveld/0.13.4_c518e768a841b289340ac9217a6c6fc9:
+    resolution: {integrity: sha512-LY9G/4aNv+WYnybqHfRFVHN3JZzDcnJEYX5/LYpD+/Jgr+Iby5bBSwm/YMtM7D4tvV7tPchv1Z0T7P3RiJIiJA==}
+    hasBin: true
+    dependencies:
+      '@rollup/plugin-node-resolve': 11.2.1_rollup@2.70.0
+      acorn: 8.7.0
+      comment-parser: 0.7.6
+      fast-glob: 3.2.11
+      fs-extra: 9.1.0
+      prettier: 2.6.1
+      rollup: 2.70.0
+      rollup-plugin-svelte: 7.1.0_rollup@2.70.0+svelte@3.46.4
+      svelte: 3.46.4
+      svelte-preprocess: 4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd
+      typescript: 4.6.2
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
+    dev: true
+
  /svelte-check/2.4.5_33233005e4be8b4492b63cc9de0a2fd4:
    resolution: {integrity: sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==}
    hasBin: true
@ -3558,6 +3603,10 @@ packages:
      typescript: 4.6.2
    dev: true

+  /svelte-use-click-outside/1.0.0:
+    resolution: {integrity: sha512-tOWeMPxeIoW9RshS0WbogRhdYdbxcJV0ebkzSh1lwR7Ihl0hSZMmB4YyCHHoXJK4xcbxCCFh0AnQ1vkzGZfLVQ==}
+    dev: false
+
  /svelte/3.46.4:
    resolution: {integrity: sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==}
    engines: {node: '>= 8'}
@ -3575,17 +3624,6 @@ packages:
      typescript: 4.6.2
    dev: true

-  /sveltedoc-parser/4.2.1:
-    resolution: {integrity: sha512-sWJRa4qOfRdSORSVw9GhfDEwsbsYsegnDzBevUCF6k/Eis/QqCu9lJ6I0+d/E2wOWCjOhlcJ3+jl/Iur+5mmCw==}
-    engines: {node: '>=10.0.0'}
-    dependencies:
-      eslint: 8.4.1
-      espree: 9.2.0
-      htmlparser2-svelte: 4.1.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /svgo/2.8.0:
    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
    engines: {node: '>=10.13.0'}
@ -3615,6 +3653,11 @@ packages:
    resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
    dev: true

+  /throttle-debounce/3.0.1:
+    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
+    engines: {node: '>=10'}
+    dev: false
+
  /timsort/0.3.0:
    resolution: {integrity: sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=}
    dev: true
@ -3698,12 +3741,36 @@ packages:
      crypto-random-string: 2.0.0
    dev: true

+  /unist-util-is/5.1.1:
+    resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
+    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

+  /unist-util-visit-parents/5.1.0:
+    resolution: {integrity: sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.1.1
+    dev: true
+
+  /unist-util-visit/4.1.0:
+    resolution: {integrity: sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.1.1
+      unist-util-visit-parents: 5.1.0
+    dev: true
+
+  /universalify/2.0.0:
+    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
  /unplugin-icons/0.13.3:
    resolution: {integrity: sha512-HkNCexbEYNkvZkCH+ytUUXgxvLsd/cTCzNQCsBjpJrZ9bhNVxosf9sYGxJdc2BbdEhnaKYNNrwaP11EzmiW6gQ==}
    peerDependencies:
@ -3756,6 +3823,33 @@ packages:
      webpack-virtual-modules: 0.4.3
    dev: true

+  /unplugin/0.5.2:
+    resolution: {integrity: sha512-3SPYtus/56cxyD4jfjrnqCvb6jPxvdqJNaRXnEaG2BhNEMaoygu/39AG+LwKmiIUzj4XHyitcfZ7scGlWfEigA==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
+  /upath/2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+    dev: true
+
  /update-notifier/5.1.0:
    resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
    engines: {node: '>=10'}
@ -3828,6 +3922,11 @@ packages:
      fsevents: 2.3.2
    dev: true

+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
  /webpack-virtual-modules/0.4.3:
    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
    dev: true
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -1,10 +1,12 @@
 const config = {
  plugins: [
+    require('postcss-import-ext-glob'),
    require('postcss-import'),
    require('postcss-strip-inline-comments'),
    require('postcss-extend-rule'),
    require('postcss-nested'),
    require('postcss-preset-env'),
+    require('postcss-pxtorem'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'development' && require('cssnano')({
      preset: 'default',
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@ -2,7 +2,8 @@
    import { onMount } from 'svelte'
    import { classCombine } from '$lib/utils/classCombine'

-    export let src: string | null
+    /** Optional, as a default icon will be substituted if no image was specified */
+    export let src: string | undefined
    export let size: 'xs' | 'sm' | 'md' | 'lg'
    export let circle = false
    export let floatUp = false
@ -85,6 +86,7 @@

        &--float-up {
            margin-top: calc(var(--size) * (-2 / 3));
+            z-index: 1;
        }

        &--circle {
--- a/src/lib/components/Badge.svelte
+++ b/src/lib/components/Badge.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
    export let label = ''
-    // Supports `green`, `yellow`, `red`, & `gray`
+    /** Supports `green`, `yellow`, `red`, & `gray` */
    export let color = 'gray'
 </script>

--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@ -1,18 +1,18 @@
 <script lang="ts">
    import { classCombine } from '$lib/utils/classCombine'

-    // The element to be styled as a button
+    /** The element to be styled as a button */
    export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
-    export let href: string
+    export let href = ''
    if (href) as = 'a'

-    // Use `value` if the button is an `<input`>
-    export let value: string
+    /** Use `value` if the button is an `<input`> */
+    export let value = ''

    export let size: 'sm' | 'md' | 'lg' = 'md'
    export let color: 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent'

-    // Show notification badge in the upper right of button
+    /** Show notification badge in the upper right of button */
    export let badge = false

    export let disabled = false
--- a/src/lib/components/Chips.svelte
+++ b/src/lib/components/Chips.svelte
@ -27,7 +27,6 @@
    <Button
      color={isSelected ? 'primary-light' : undefined}
      on:click={() => {
-        console.log(option)
        isSelected && !neverEmpty
          ? selected = null
          : selected = option
--- a/src/lib/components/Link.svelte
+++ b/src/lib/components/Link.svelte
@ -1,15 +0,0 @@
-<script lang="ts">
-    export let href: string;
-</script>
-
-<a {href}><slot /></a>
-
-<style lang="postcss">
-    a {
-        color: var(--color-link);
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-</style>
--- a/src/lib/components/Select.svelte
+++ b/src/lib/components/Select.svelte
@ -0,0 +1,204 @@
+<script lang="ts">
+    import IconChevronDown from 'virtual:icons/lucide/chevron-down'
+    import { debounce } from 'throttle-debounce'
+    import { clickOutside } from 'svelte-use-click-outside'
+    import { onMount } from 'svelte'
+
+    interface Option {
+        label: string;
+        value: string | number;
+    }
+
+    export let options: Option[] = []
+    export let value: string | number
+    export let selected: Option = options.find((option) => option.value === (value || ''))
+    export let color = ''
+    export let label = ''
+    export let icon = null
+
+    let open = false
+
+    $: if (selected) {
+        value = selected.value
+    }
+
+    const minWidth = options
+			.map(it => it.label || it.value)
+			.reduce((it, acc) => String(it).length > acc ? it : acc, '')
+			.length * 9
+
+    let shouldOpenUp = false
+    let element: HTMLElement
+
+    const checkShouldOpenUp = debounce(100, false, () => {
+        if (element) {
+            const bounding = element.getBoundingClientRect()
+
+            shouldOpenUp =
+                bounding.bottom + 32 * options.length + 16 >
+                (window.innerHeight || document.documentElement.clientHeight)
+        }
+    })
+
+    onMount(() => {
+        checkShouldOpenUp()
+        window.addEventListener('resize', checkShouldOpenUp)
+    })
+
+    function keydown(event: KeyboardEvent) {
+        if ((event.key === ' ' || event.key === 'Enter') && !open) {
+            open = true
+        } else if (event.key === 'ArrowUp') {
+            if (selected) {
+                const index = options.findIndex((option) => option.value === selected.value)
+                if (index > 0) {
+                    selected = options[index - 1]
+                }
+            }
+        } else if (event.key === 'ArrowDown') {
+            if (selected) {
+                const index = options.findIndex((option) => option.value === selected.value)
+                if (index < options.length - 1) {
+                    selected = options[index + 1]
+                }
+            }
+        } else if ((event.key === 'Escape' || event.key === 'Enter') && open) {
+            open = false
+        }
+    }
+</script>
+
+<div
+        class="select select--color-{color}"
+        class:is-open={open}
+        class:select--opens-up={shouldOpenUp}
+        use:clickOutside={() => {
+		open = false;
+	}}
+        bind:this={element}
+        tabindex="0"
+        on:keydown={keydown}
+>
+    <div
+            class="select__input"
+            on:click={() => {
+			open = !open;
+		}}
+    >
+        {#if icon}
+            <svelte:component this={icon}/>
+        {/if}
+        <span class="select__input__value" style:min-width="{minWidth}px">{label || selected?.label || value || 'Choose...'}</span>
+        {#if !icon}
+            <div class="select__input__arrow">
+                <slot name="expandIcon">
+                    <IconChevronDown/>
+                </slot>
+            </div>
+        {/if}
+    </div>
+    {#if open}
+        <ul class="select__options">
+            {#each options as option (option.value)}
+                <li
+                        on:click={() => {
+						selected = option;
+						open = false;
+					}}
+                        class:is-selected={selected?.value === option.value}
+                >
+                    {option.label || option.value}
+                </li>
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+<style lang="postcss">
+    .select {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        color: var(--color-button-text);
+        cursor: pointer;
+        border-radius: var(--rounded);
+        align-self: flex-start;
+
+        &__input {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.25rem 0.9rem;
+            grid-gap: 0.4rem;
+            background-color: var(--color-button-bg);
+            box-shadow: var(--shadow-inset-sm);
+            border-radius: var(--rounded);
+        }
+
+        &__options {
+            list-style-type: none;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            position: absolute;
+            top: 100%;
+            background-color: var(--color-button-bg);
+            border-radius: var(--rounded-bottom);
+            box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+            overflow: hidden;
+            border-top: 0.1rem solid var(--color-divider);
+            z-index: 5;
+
+            li {
+                padding: 0.25rem 1rem;
+
+                &:hover {
+                    background-color: var(--color-button-bg-hover);
+                }
+
+                &.is-selected {
+                    background-color: var(--color-brand-dark);
+                    color: var(--color-brand-contrast);
+                    cursor: default;
+                }
+            }
+        }
+
+        &.is-open {
+            z-index: 10;
+
+            .select__input {
+                border-radius: var(--rounded-top);
+                box-shadow: none;
+
+                &__arrow {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        &--color-raised {
+            > * {
+                background-color: var(--color-raised-bg);
+            }
+        }
+
+        &--opens-up {
+            .select__options {
+                bottom: 100%;
+                top: auto;
+                border-radius: var(--rounded-top);
+                box-shadow: none;
+                border-top: none;
+                border-bottom: 0.1rem solid var(--color-divider);
+            }
+
+            &.is-open .select__input {
+                border-radius: var(--rounded-bottom);
+            }
+        }
+    }
+</style>
--- a/src/lib/styles.postcss
+++ b/src/lib/styles.postcss
@ -1,3 +1,4 @@
-@import "./styles/normalize.postcss";
-@import "./styles/themes.postcss";
-@import "./styles/variables.postcss";
+@import-glob "./styles/normalize.postcss"; /* Doesn't need to glob but fixes warning */
+@import-glob "./styles/themes/**.postcss";
+@import-glob "./styles/variables/**.postcss";
+@import-glob "./styles/classes/**.postcss";
--- a/src/lib/styles/classes/base.postcss
+++ b/src/lib/styles/classes/base.postcss
@ -0,0 +1,26 @@
+.base {
+    display: flex;
+    justify-content: center;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-standard);
+    font-size: var(--font-size-nm);
+    font-weight: var(--font-weight-regular);
+    padding: 1rem;
+
+    scrollbar-color: var(--color-scrollbar) var(--color-bg);
+
+    &::-webkit-scrollbar {
+        width: 14px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: var(--color-bg);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar);
+        border-radius: 999px;
+        border: 3px solid var(--color-bg);
+    }
+}
--- a/src/lib/styles/classes/card.postcss
+++ b/src/lib/styles/classes/card.postcss
@ -0,0 +1,97 @@
+.card {
+    --padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    background-color: var(--color-raised-bg);
+    border-radius: var(--rounded);
+    overflow: hidden;
+    box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+    padding: var(--padding);
+    grid-gap: 1rem;
+    max-width: 100%;
+
+    .profile-picture {
+        z-index: 1;
+    }
+
+    &--gap {
+        &-compressed {
+            grid-gap: 0.6rem;
+        }
+
+        &-none {
+            grid-gap: 0;
+        }
+    }
+
+    &--pad {
+        &-top {
+            padding-top: 2.5rem;
+        }
+    }
+
+    &--overflow-visible {
+        overflow: visible;
+    }
+
+    &__banner {
+        --inverse-padding: calc(var(--padding) * -1);
+        margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
+        z-index: 0;
+        background-color: var(--color-divider);
+
+        &:-moz-loading {
+            visibility: hidden;
+        }
+
+        &--short {
+            height: 6.5rem;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        &--dark {
+            filter: brightness(0.7);
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        grid-gap: 0.5rem;
+
+        z-index: 1;
+
+        &--row {
+            flex-direction: row;
+        }
+    }
+
+    &--row {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--strip {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &--pad-x {
+        --padding: 1rem 1.3rem;
+    }
+
+    &.text {
+        --padding: 1.5rem;
+    }
+}
--- a/src/lib/styles/classes/link.postcss
+++ b/src/lib/styles/classes/link.postcss
@ -0,0 +1,7 @@
+.link {
+    color: var(--color-link);
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
--- a/src/lib/styles/classes/title.postcss
+++ b/src/lib/styles/classes/title.postcss
@ -0,0 +1,8 @@
+.title {
+    font-size: 1.5rem;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+    font-size: 1.25rem;
+}
--- a/src/lib/styles/themes.postcss
+++ b/src/lib/styles/themes.postcss
@ -1,4 +0,0 @@
-@import "themes/base.postcss";
-@import "themes/light.postcss";
-@import "themes/dark.postcss";
-@import "themes/oled.postcss";
--- a/src/lib/styles/variables.postcss
+++ b/src/lib/styles/variables.postcss
@ -1,3 +0,0 @@
-@import "variables/borders.postcss";
-@import "variables/typography.postcss";
-@import "variables/spacing.postcss";
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -1,34 +1,39 @@
 <script lang="ts">
-    import "$lib/styles.postcss"
-    import "./_internal/styles/prism-one-dark.css"
-    import "./_internal/styles/gh-markdown.css"
-    import Sidebar from "./_internal/components/Sidebar.svelte"
+    import '$lib/styles.postcss'
+    import './_internal/styles/prism-one-dark.css'
+    import './_internal/styles/gh-markdown.postcss'
+    import Sidebar from './_internal/components/Sidebar.svelte'
    import Header from './_internal/components/Header.svelte'
 </script>

 <div class="app">
-    <Header />
-    <Sidebar />
+    <Header/>
+    <Sidebar/>
    <main class="app__content">
-        <slot />
+        <slot/>
    </main>
 </div>

 <style lang="postcss">
-    :global(body) {
-        margin: 0;
-        font-size: var(--body-font-size);
-        font-family: var(--body-font);
-        overflow-y: scroll;
-        --accent-color: hsl(331, 80%, 45%);
-        --accent-color-transparent: hsla(331, 80%, 45%, 0.15);
+    :global {
+        html {
+            overflow-y: scroll;
+        }
+
+        body {
+            margin: 0;
+            font-size: var(--body-font-size);
+            font-family: var(--body-font);
+            --accent-color: hsl(331, 80%, 45%);
+            --accent-color-transparent: hsla(331, 80%, 45%, 0.15);
+        }
    }

    .app {
        display: grid;
        min-height: 100vh;
        overflow: hidden;
-        --sidebar-width: 250px;
+        --sidebar-width: 325px;
        --header-height: 56px;
        @media (width <= 500px) {
            display: flex;
@ -41,21 +46,21 @@
            overflow-y: auto;
            background-color: hsl(220, 13%, 91%);

-            :global(h1) {
-                font-size: 54px;
-            }
+            :global {
+                a:not(.example__preview *) {
+                    color: var(--accent-color);

-            :global(p) {
-                line-height: 1.5;
-            }
-        }
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }

-        @layer base {
-            :global(a) {
-                color: var(--accent-color);
+                h1:not(.example__preview *) {
+                    font-size: 54px;
+                }

-                &:hover {
-                    text-decoration: underline;
+                p:not(.example__preview *) {
+                    line-height: 1.5;
                }
            }
        }
--- a/src/routes/_internal/components/Example.svelte
+++ b/src/routes/_internal/components/Example.svelte
@ -1,18 +1,26 @@
 <script lang="ts">
-    import Prism from 'prismjs';
-    import 'prism-svelte';
+    import Button from '$lib/components/Button.svelte'
+    import IconMoon from 'virtual:icons/heroicons-outline/moon'
+    import IconSun from 'virtual:icons/heroicons-outline/sun'

-    export let background: 'var(--color-raised-bg)' | 'transparent' = 'var(--color-raised-bg)'
-
-    export let code = ''
-    const highlighted = Prism.highlight(code.trim(), Prism.languages.svelte, 'svelte');
+    let theme = 'light'
+    let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
 </script>

-<div class="example theme-light">
-    <div class="example__preview" style:background={background}>
-        <slot />
+<div class="example">
+    <div class="example__preview theme-{theme} base" style:background={background}>
+        <div class="example__preview__options">
+            <Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
+                {#if theme === 'light'}
+                    <IconMoon/>
+                {:else}
+                    <IconSun/>
+                {/if}
+            </Button>
+        </div>
+        <slot name="example"/>
    </div>
-    <pre class="example__code language-">{@html highlighted}</pre>
+    <pre class="example__code language-svelte"><slot name="code"/></pre>
 </div>

 <style lang="postcss">
@ -20,13 +28,24 @@
        margin-bottom: 32px;

        &__preview {
-            padding: 16px;
            border-radius: var(--rounded-sm-top);
            border: solid 2px hsl(0, 0%, 20%);
            border-bottom: none;
            display: flex;
            grid-gap: 16px;
            flex-wrap: wrap;
+            position: relative;
+            justify-content: flex-start;
+
+            &__options {
+                position: absolute;
+                top: 0;
+                right: 0;
+                padding: 8px;
+                display: flex;
+                justify-content: flex-end;
+                z-index: 100;
+            }
        }

        &__code {
--- a/src/routes/_internal/components/Header.svelte
+++ b/src/routes/_internal/components/Header.svelte
@ -8,7 +8,7 @@

    onMount(() => {
        let lastScrollTop: number
-        window.addEventListener('scroll', function () {
+        window.addEventListener('scroll', () => {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop
            if (scrollTop > lastScrollTop && headerElement) {
                headerElement.style.top = 'calc(var(--header-height) * -1)'
--- a/src/routes/_internal/components/Sidebar.svelte
+++ b/src/routes/_internal/components/Sidebar.svelte
@ -1,5 +1,11 @@
 <script lang="ts">
-    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].sort()
+    const components = Object.keys(import.meta.glob('../../components/**'))
+        .map(it => it.replace('../../components/', '').replace('.md', ''))
+        .sort();
+
+    const classes = Object.keys(import.meta.glob('../../classes/**'))
+        .map(it => it.replace('../../classes/', '').replace('.md', ''))
+        .sort();
 </script>

 <nav class="sidebar">
@ -7,7 +13,8 @@
        <span class="section__title">Getting started</span>
        <a href="/" class="section__link">Introduction</a>
        <a href="/getting-started/icons" class="section__link">Using Icons</a>
-        <a href="/getting-started/css" class="section__link">CSS configuration</a>
+        <a href="/getting-started/postcss" class="section__link">PostCSS config</a>
+        <a href="/getting-started/css" class="section__link">Writing CSS</a>
    </div>

    <div class="section">
@ -16,6 +23,13 @@
            <a href="/components/{component}" class="section__link">{component}</a>
        {/each}
    </div>
+
+    <div class="section">
+        <span class="section__title">Classes</span>
+        {#each classes as page}
+            <a href="/classes/{page}" class="section__link">{page}</a>
+        {/each}
+    </div>
 </nav>

 <style lang="postcss">
@ -25,7 +39,7 @@
        grid-gap: 2rem;
        background-color: hsl(220, 15%, 40%);
        color: hsl(216, 10%, 80%);
-        padding: 5.5rem 1.5rem 1.5rem;
+        padding: 5.5rem 2rem 2rem;
        height: 100vh;
        width: calc(var(--sidebar-width) - 3rem);
        position: fixed;
--- a/src/routes/_internal/layout/page.svelte
+++ b/src/routes/_internal/layout/page.svelte
@ -1,22 +1,18 @@
 <script lang="ts">
    import IconPencil from 'virtual:icons/heroicons-outline/pencil'
    import { page } from '$app/stores'
-    import { onMount } from 'svelte'

-    export let componentName = $page.url.pathname.includes('components') ? $page.url.pathname.replace('/components/', '') : undefined
+    export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1)

    export let title = ''
-    if (!title && componentName) title = componentName
+    if (!title) title = fileName

-    let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
+    let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`

    let api
-
-    onMount(async () => {
-        if (componentName) {
-            api = (await import(`../../../lib/components/${componentName}.svelte?raw&api`)).default
-        }
-    })
+    if ($page.url.pathname.includes('components')) {
+        import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
+    }
 </script>

 <svelte:head>
@ -25,14 +21,14 @@

 <article>
    {#if title}<h1>{title}</h1>{/if}
-    <a class="edit-link" href={pageUrl}>
+    <a class="edit-link" href={editUrl}>
        <IconPencil/>
        Edit this page on GitHub</a>
    <slot/>

-    {#if componentName && api}
+    {#if api}
        <div class="extra-info">
-            {#if api.data.length > 0}
+            {#if api.props.length > 0}
                <h2>Properties</h2>
                <table class="api-table">
                    <thead>
@ -44,12 +40,12 @@
                    </tr>
                    </thead>
                    <tbody>
-                    {#each api.data as prop}
+                    {#each api.props as prop}
                        <tr>
                            <td>{prop.name}</td>
-                            <td>{prop.type.type}</td>
-                            <td>{prop.defaultValue ?? ''}</td>
-                            <td>{prop.readonly ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
+                            <td><code>{prop.type ?? ''}</code></td>
+                            <td>{prop.value ?? ''}</td>
+                            <td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
                        </tr>
                    {/each}
                    </tbody>
@ -82,22 +78,19 @@
                    <thead>
                    <tr>
                        <th>Name</th>
-                        <th>Description</th>
+                        <th>Fallback</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#each api.slots as slot}
                        <tr>
                            <td>{slot.name}</td>
-                            <td>{slot.description?.replace('null', '') || ''}</td>
+                            <td>{slot.fallback}</td>
                        </tr>
                    {/each}
                    </tbody>
                </table>
            {/if}
-
-            <h2>Import</h2>
-            <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span> {componentName} <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"omorphia"</span></code></pre>
        </div>
    {/if}
 </article>
--- a/src/routes/_internal/styles/gh-markdown.css
+++ b/src/routes/_internal/styles/gh-markdown.css
@ -1,373 +0,0 @@
-a {
-    color: #4183C4;
-    text-decoration: none;
-}
-
-a.absent {
-    color: #cc0000;
-}
-
-a.anchor {
-    display: block;
-    padding-left: 30px;
-    margin-left: -30px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 20px 0 10px;
-    padding: 0;
-    font-weight: bold;
-    -webkit-font-smoothing: antialiased;
-    cursor: text;
-    position: relative;
-}
-
-h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
-    text-decoration: none;
-}
-
-h1 tt, h1 code {
-    font-size: inherit;
-}
-
-h2 tt, h2 code {
-    font-size: inherit;
-}
-
-h3 tt, h3 code {
-    font-size: inherit;
-}
-
-h4 tt, h4 code {
-    font-size: inherit;
-}
-
-h5 tt, h5 code {
-    font-size: inherit;
-}
-
-h6 tt, h6 code {
-    font-size: inherit;
-}
-
-h1 {
-    font-size: 28px;
-    color: black;
-}
-
-h2 {
-    font-size: 24px;
-    /*border-bottom: 1px solid #cccccc;*/
-    color: black;
-}
-
-h3 {
-    font-size: 18px;
-}
-
-h4 {
-    font-size: 16px;
-}
-
-h5 {
-    font-size: 14px;
-}
-
-h6 {
-    color: #777777;
-    font-size: 14px;
-}
-
-p, blockquote, ul, ol, dl, li, table, pre {
-    margin: 15px 0;
-}
-
-hr {
-    border: 0 none;
-    color: #cccccc;
-    height: 4px;
-    padding: 0;
-}
-
-body > h2:first-child {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-body > h1:first-child {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-body > h1:first-child + h2 {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
-    margin-top: 0;
-}
-
-li p.first {
-    display: inline-block;
-}
-
-ul, ol {
-    padding-left: 30px;
-}
-
-ul :first-child, ol :first-child {
-    margin-top: 0;
-}
-
-ul :last-child, ol :last-child {
-    margin-bottom: 0;
-}
-
-dl {
-    padding: 0;
-}
-
-dl dt {
-    font-size: 14px;
-    font-weight: bold;
-    font-style: italic;
-    padding: 0;
-    margin: 15px 0 5px;
-}
-
-dl dt:first-child {
-    padding: 0;
-}
-
-dl dt > :first-child {
-    margin-top: 0;
-}
-
-dl dt > :last-child {
-    margin-bottom: 0;
-}
-
-dl dd {
-    margin: 0 0 15px;
-    padding: 0 15px;
-}
-
-dl dd > :first-child {
-    margin-top: 0;
-}
-
-dl dd > :last-child {
-    margin-bottom: 0;
-}
-
-blockquote {
-    border-left: 4px solid #dddddd;
-    padding: 0 15px;
-    color: #777777;
-}
-
-blockquote > :first-child {
-    margin-top: 0;
-}
-
-blockquote > :last-child {
-    margin-bottom: 0;
-}
-
-table {
-    padding: 0;
-}
-
-table tr {
-    border-top: 1px solid #cccccc;
-    background-color: white;
-    margin: 0;
-    padding: 0;
-}
-
-table tr:nth-child(2n) {
-    background-color: #f8f8f8;
-}
-
-table tr th {
-    font-weight: bold;
-    border: 1px solid #cccccc;
-    text-align: left;
-    margin: 0;
-    padding: 6px 13px;
-}
-
-table tr td {
-    border: 1px solid #cccccc;
-    text-align: left;
-    margin: 0;
-    padding: 6px 13px;
-}
-
-table tr th :first-child, table tr td :first-child {
-    margin-top: 0;
-}
-
-table tr th :last-child, table tr td :last-child {
-    margin-bottom: 0;
-}
-
-img {
-    max-width: 100%;
-}
-
-span.frame {
-    display: block;
-    overflow: hidden;
-}
-
-span.frame > span {
-    border: 1px solid #dddddd;
-    display: block;
-    float: left;
-    overflow: hidden;
-    margin: 13px 0 0;
-    padding: 7px;
-    width: auto;
-}
-
-span.frame span img {
-    display: block;
-    float: left;
-}
-
-span.frame span span {
-    clear: both;
-    color: #333333;
-    display: block;
-    padding: 5px 0 0;
-}
-
-span.align-center {
-    display: block;
-    overflow: hidden;
-    clear: both;
-}
-
-span.align-center > span {
-    display: block;
-    overflow: hidden;
-    margin: 13px auto 0;
-    text-align: center;
-}
-
-span.align-center span img {
-    margin: 0 auto;
-    text-align: center;
-}
-
-span.align-right {
-    display: block;
-    overflow: hidden;
-    clear: both;
-}
-
-span.align-right > span {
-    display: block;
-    overflow: hidden;
-    margin: 13px 0 0;
-    text-align: right;
-}
-
-span.align-right span img {
-    margin: 0;
-    text-align: right;
-}
-
-span.float-left {
-    display: block;
-    margin-right: 13px;
-    overflow: hidden;
-    float: left;
-}
-
-span.float-left span {
-    margin: 13px 0 0;
-}
-
-span.float-right {
-    display: block;
-    margin-left: 13px;
-    overflow: hidden;
-    float: right;
-}
-
-span.float-right > span {
-    display: block;
-    overflow: hidden;
-    margin: 13px auto 0;
-    text-align: right;
-}
-
-code, tt {
-    margin: 0 2px;
-    padding: 0 5px;
-    white-space: nowrap;
-    border: 1px solid #eaeaea;
-    background-color: #f8f8f8;
-    border-radius: 3px;
-}
-
-pre code {
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-    border: none;
-    background: transparent;
-}
-
-pre {
-    background-color: #f8f8f8;
-    font-size: 13px;
-    line-height: 19px;
-    overflow: auto;
-    padding: 6px 10px;
-    border-radius: var(--rounded-sm) !important;
-}
-
-pre code, pre tt {
-    background-color: transparent;
-    border: none;
-}
-
-/* Custom styles */
-h1 {
-    font-weight: 600;
-}
-
-h2 {
-    font-weight: 500;
-}
-
-blockquote {
-    border-left: 4px solid var(--accent-color);
-    padding: 15px 15px;
-    color: unset;
-    background-color: var(--accent-color-transparent);
-}
--- a/src/routes/_internal/styles/gh-markdown.postcss
+++ b/src/routes/_internal/styles/gh-markdown.postcss
@ -0,0 +1,383 @@
+*:not(.example__preview *) {
+    :where(a) {
+        text-decoration: none;
+
+        &.absent {
+            color: #cc0000;
+        }
+
+        &.anchor {
+            display: block;
+            padding-left: 30px;
+            margin-left: -30px;
+            cursor: pointer;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+        }
+    }
+
+    &:where(h1, h2, h3, h4, h5, h6) {
+        margin: 20px 0 10px;
+        padding: 0;
+        font-weight: bold;
+        -webkit-font-smoothing: antialiased;
+        cursor: text;
+        position: relative;
+    }
+
+    &:where(h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor) {
+        text-decoration: none;
+    }
+
+    &:where(h1 tt, h1 code) {
+        font-size: inherit;
+    }
+
+    &:where(h2 tt, h2 code) {
+        font-size: inherit;
+    }
+
+    &:where(h3 tt, h3 code) {
+        font-size: inherit;
+    }
+
+    &:where(h4 tt, h4 code) {
+        font-size: inherit;
+    }
+
+    &:where(h5 tt, h5 code) {
+        font-size: inherit;
+    }
+
+    &:where(h6 tt, h6 code) {
+        font-size: inherit;
+    }
+
+    &:where(h1) {
+        font-size: 28px;
+        color: black;
+    }
+
+    &:where(h2) {
+        font-size: 24px;
+        /*border-bottom: 1px solid #cccccc;*/
+        color: black;
+    }
+
+    &:where(h3) {
+        font-size: 18px;
+    }
+
+    &:where(h4) {
+        font-size: 16px;
+    }
+
+    &:where(h5) {
+        font-size: 14px;
+    }
+
+    &:where(h6) {
+        color: #777777;
+        font-size: 14px;
+    }
+
+    &:where(p, blockquote, ul, ol, dl, li, table, pre) {
+        margin: 15px 0;
+    }
+
+    &:where(hr) {
+        border: 0 none;
+        color: #cccccc;
+        height: 4px;
+        padding: 0;
+    }
+
+    &:where(body > h2:first-child) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(body > h1:first-child) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(body > h1:first-child + h2) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(h1 p, h2 p, h3 p, h4 p, h5 p, h6 p) {
+        margin-top: 0;
+    }
+
+    &:where(li p.first) {
+        display: inline-block;
+    }
+
+    &:where(ul, ol) {
+        padding-left: 30px;
+    }
+
+    &:where(ul :first-child, ol :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(ul :last-child, ol :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(dl) {
+        padding: 0;
+    }
+
+    &:where(dl dt) {
+        font-size: 14px;
+        font-weight: bold;
+        font-style: italic;
+        padding: 0;
+        margin: 15px 0 5px;
+    }
+
+    &:where(dl dt:first-child) {
+        padding: 0;
+    }
+
+    &:where(dl dt > :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(dl dt > :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(dl dd) {
+        margin: 0 0 15px;
+        padding: 0 15px;
+    }
+
+    &:where(dl dd > :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(dl dd > :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(blockquote) {
+        border-left: 4px solid #dddddd;
+        padding: 0 15px;
+        color: #777777;
+    }
+
+    &:where(blockquote > :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(blockquote > :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(table) {
+        padding: 0;
+    }
+
+    &:where(table tr) {
+        border-top: 1px solid #cccccc;
+        background-color: white;
+        margin: 0;
+        padding: 0;
+    }
+
+    &:where(table tr:nth-child(2n)) {
+        background-color: #f8f8f8;
+    }
+
+    &:where(table tr th) {
+        font-weight: bold;
+        border: 1px solid #cccccc;
+        text-align: left;
+        margin: 0;
+        padding: 6px 13px;
+    }
+
+    &:where(table tr td) {
+        border: 1px solid #cccccc;
+        text-align: left;
+        margin: 0;
+        padding: 6px 13px;
+    }
+
+    &:where(table tr th :first-child, table tr td :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(table tr th :last-child, table tr td :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(img) {
+        max-width: 100%;
+    }
+
+    &:where(span.frame) {
+        display: block;
+        overflow: hidden;
+    }
+
+    &:where(span.frame > span) {
+        border: 1px solid #dddddd;
+        display: block;
+        float: left;
+        overflow: hidden;
+        margin: 13px 0 0;
+        padding: 7px;
+        width: auto;
+    }
+
+    &:where(span.frame span img) {
+        display: block;
+        float: left;
+    }
+
+    &:where(span.frame span span) {
+        clear: both;
+        color: #333333;
+        display: block;
+        padding: 5px 0 0;
+    }
+
+    &:where(span.align-center) {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+
+    &:where(span.align-center > span) {
+        display: block;
+        overflow: hidden;
+        margin: 13px auto 0;
+        text-align: center;
+    }
+
+    &:where(span.align-center span img) {
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    &:where(span.align-right) {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+
+    &:where(span.align-right > span) {
+        display: block;
+        overflow: hidden;
+        margin: 13px 0 0;
+        text-align: right;
+    }
+
+    &:where(span.align-right span img) {
+        margin: 0;
+        text-align: right;
+    }
+
+    &:where(span.float-left) {
+        display: block;
+        margin-right: 13px;
+        overflow: hidden;
+        float: left;
+    }
+
+    &:where(span.float-left span) {
+        margin: 13px 0 0;
+    }
+
+    &:where(span.float-right) {
+        display: block;
+        margin-left: 13px;
+        overflow: hidden;
+        float: right;
+    }
+
+    &:where(span.float-right > span) {
+        display: block;
+        overflow: hidden;
+        margin: 13px auto 0;
+        text-align: right;
+    }
+
+    &:where(code, tt) {
+        margin: 0 2px;
+        padding: 0 5px;
+        white-space: nowrap;
+        border: 1px solid #eaeaea;
+        background-color: #f8f8f8;
+        border-radius: 3px;
+    }
+
+    &:where(pre code) {
+        margin: 0;
+        padding: 0;
+        white-space: pre;
+        border: none;
+        background: transparent;
+    }
+
+    &:where(pre) {
+        background-color: #f8f8f8;
+        font-size: 13px;
+        line-height: 19px;
+        overflow: auto;
+        padding: 6px 10px;
+        border-radius: var(--rounded-sm) !important;
+    }
+
+    &:where(pre code, pre tt) {
+        background-color: transparent;
+        border: none;
+    }
+
+    &:where(/* Custom styles */
+
+    h1) {
+        font-weight: 600;
+    }
+
+    &:where(h2) {
+        font-weight: 500;
+    }
+
+    &:where(blockquote) {
+        border-left: 4px solid var(--accent-color);
+        padding: 15px 15px;
+        color: unset;
+        background-color: var(--accent-color-transparent);
+    }
+
+    &:where(a) {
+        color: var(--accent-color)
+    }
+
+    &:where(p) {
+        line-height: 150%;
+    }
+}
--- a/src/routes/classes/Card.md
+++ b/src/routes/classes/Card.md
@ -0,0 +1,31 @@
+### A simple example
+
+```svelte example
+<div class="card">
+   <h3>Moon/Distance to Earth</h3>
+   <h2>238,900 mi</h2>
+   <p>
+       The moon's distance from Earth affects the strength of ocean tides and the appearance of solar eclipses in our skies. The average distance between the blue planet and its only natural satellite is about 238,855 miles (384,400 kilometers), according to NASA.
+   </p>
+</div>
+```
+
+### A more complex example
+
+```svelte example
+<script lang="ts">
+    import Button from "omorphia/components/Button.svelte";
+    import IconPencil from 'virtual:icons/heroicons-outline/pencil'
+    import Avatar from "omorphia/components/Avatar.svelte";
+</script>
+
+<div class="card">
+   <div class="card__overlay">
+       <Button color="raised"><IconPencil /> Edit</Button>
+   </div>
+   <div class="card__banner card__banner--short card__banner--dark" ></div>
+   <Avatar size="md" floatUp/>
+   <h1 class="title">Project</h1>
+   <p class="summary">A project that has a description right here.</p>
+</div>
+```
--- a/src/routes/classes/Link.md
+++ b/src/routes/classes/Link.md
@ -0,0 +1,3 @@
+```svelte example
+<a class="link" href="#place"> Go somewhere! </a>
+```
--- a/src/routes/components/Avatar.md
+++ b/src/routes/components/Avatar.md
@ -1,14 +1,13 @@
+Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
+
+```svelte example
 <script lang="ts">
-    import Avatar from "$lib/components/Avatar.svelte";
-    import Example from "../_internal/components/Example.svelte"
+    import Avatar from "omorphia/components/Avatar.svelte";
 </script>

-<Example code={`<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
-<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
+<Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />
+<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
+<Avatar size="md" src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
 <Avatar size="sm" />
-<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />`}>
-<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
-<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
-<Avatar size="sm" />
-<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />
-</Example>
+<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
+```
--- a/src/routes/components/Badge.md
+++ b/src/routes/components/Badge.md
@ -1,14 +1,10 @@
+```svelte example
 <script lang="ts">
-    import Badge from "$lib/components/Badge.svelte";
-    import Example from "../_internal/components/Example.svelte"
+    import Badge from "omorphia/components/Badge.svelte";
 </script>

-<Example code={`<Badge color="red" label="Tomato" />
-<Badge color="yellow" label="Squash" />
-<Badge color="green" label="Lettuce" />
-<Badge label="Onion" />`}>
 <Badge color="red" label="Tomato" />
 <Badge color="yellow" label="Squash" />
 <Badge color="green" label="Lettuce" />
 <Badge label="Onion" />
-</Example>
+```
--- a/src/routes/components/Button.md
+++ b/src/routes/components/Button.md
@ -1,14 +1,10 @@
+```svelte example
 <script lang="ts">
-    import Button from "$lib/components/Button.svelte";
-    import Example from "../_internal/components/Example.svelte"
+    import Button from "omorphia/components/Button.svelte";
 </script>

-<Example code={`<Button>Eat cake</Button>
-<Button size="sm" color="primary">Small piece</Button>
-<Button size="lg" color="danger">Big part</Button>
-<Button disabled>Nice try</Button>`}>
 <Button>Eat cake</Button>
 <Button size="sm" color="primary">Small piece</Button>
 <Button size="lg" color="danger">Big part</Button>
 <Button disabled>Nice try</Button>
-</Example>
+```
--- a/src/routes/components/Chips.md
+++ b/src/routes/components/Chips.md
@ -1,13 +1,10 @@
-<script lang="ts">
-    import Chips from "$lib/components/Chips.svelte";
-    import Example from "../_internal/components/Example.svelte"
-
-    let foo = 'modpack'
-</script>
-
 ### Simple example

-<Example code={`
+```svelte example
+<script lang="ts">
+    import Chips from "omorphia/components/Chips.svelte";
+</script>
+
 <Chips options={[
    {
        label: 'One',
@ -18,25 +15,16 @@
        value: 'two'
    }]}
 />
-`}>
-<Chips options={[
-{
-label: 'One',
-value: 'one'
-},
-{
-label: 'Two',
-value: 'two'
-}]}
-/>
-</Example>
+```


 ### Force an option to be selected with `neverEmpty`

-<Example code={`
-<script>
-    let foo = 'modpack';
+```svelte example
+<script lang="ts">
+    import Chips from "omorphia/components/Chips.svelte";
+
+    let foo = 'modpack'
 </script>

 <Chips neverEmpty bind:value={foo} options={[
@ -53,19 +41,4 @@ value: 'two'
        value: 'world'
    }]}
 />
-`}>
-<Chips neverEmpty bind:value={foo} options={[
-{
-label: 'Mod',
-value: 'mod'
-},
-{
-label: 'Modpack',
-value: 'modpack'
-},
-{
-label: 'World',
-value: 'world'
-}]}
-/>
-</Example>
+```
--- a/src/routes/components/Link.md
+++ b/src/routes/components/Link.md
@ -1,8 +0,0 @@
-<script lang="ts">
-    import Link from "$lib/components/Link.svelte";
-    import Example from "../_internal/components/Example.svelte"
-</script>
-
-<Example code={`<Link href="#clicked">Click for fun</Link>`}>
-<Link href="#clicked">Click for fun</Link>
-</Example>
--- a/src/routes/components/NavRow.md
+++ b/src/routes/components/NavRow.md
@ -1,11 +1,10 @@
-<script lang="ts">
-    import NavRow from "$lib/components/NavRow.svelte";
-    import Example from "../_internal/components/Example.svelte"
-</script>
-
 `NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).

-<Example code={`
+```svelte example
+<script lang="ts">
+    import NavRow from "omorphia/components/NavRow.svelte";
+</script>
+
 <NavRow
    level={1}
    links={[
@ -24,23 +23,4 @@
    ]}>
    Click for fun
 </NavRow>
-`}>
-<NavRow
-level={1}
-links={[
-{
-href: '/Button',
-label: 'Button'
-},
-{
-href: '/Link',
-label: 'Link'
-},
-{
-href: '/NavRow',
-label: 'NavRow'
-}
-]}>
-Click for fun
-</NavRow>
-</Example>
+```
--- a/src/routes/components/Pagination.md
+++ b/src/routes/components/Pagination.md
@ -1,10 +1,9 @@
-<script lang="ts">
-    import Pagination from "$lib/components/Pagination.svelte"
-    import Example from "../_internal/components/Example.svelte"
-</script>
-
 Use pagination to show a set of page numbers and navigation directions to move through paginated data.

-<Example code={`<Pagination page={20} count={50} />`} background="transparent">
-    <Pagination page={20} count={50} />
-</Example>
+```svelte example
+<script lang="ts">
+    import Pagination from "omorphia/components/Pagination.svelte"
+</script>
+
+<Pagination page={20} count={50} />
+```
--- a/src/routes/components/Select.md
+++ b/src/routes/components/Select.md
@ -0,0 +1,19 @@
+```svelte example
+<script lang="ts">
+    import Select from "omorphia/components/Select.svelte";
+    
+    let sortMethod = "downloads"
+</script>
+
+<Select
+    color="raised" 
+    options={[
+        { value: "", label: "Relevance" },
+        { value: "downloads", label: "Downloads" },
+        { value: "follows", label: "Followers" },
+        { value: "newest", label: "Recently created" },
+        { value: "updated", label: "Recently updated" },
+    ]} 
+    bind:value={sortMethod}
+/>
+```
--- a/src/routes/getting-started/css.md
+++ b/src/routes/getting-started/css.md
@ -1,31 +1,7 @@
 ---
-title: CSS Configuration
+title: Writing CSS
 ---

-Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
+TODO

-Install PostCSS with:
-
-```bash
-pnpx svelte-add@latest postcss
-```
-
-This is the recommended `postcss.config.cjs` setup:
-
-```js
-const config = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-strip-inline-comments'),
-    require('postcss-nested'),
-    require('postcss-preset-env'),
-    require('autoprefixer'),
-    require('postcss-extend-rule'),
-    process.env.NODE_ENV === 'development' && require('cssnano')({
-      preset: 'default',
-    })
-  ],
-};
-
-module.exports = config;
-```
+Use `px` measurements. Use `hsl` for colors.
--- a/src/routes/getting-started/postcss.md
+++ b/src/routes/getting-started/postcss.md
@ -0,0 +1,31 @@
+---
+title: PostCSS Configuration
+---
+
+Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
+
+Install PostCSS with:
+
+```bash
+pnpx svelte-add@latest postcss
+```
+
+This is the recommended `postcss.config.cjs` setup:
+
+```js
+const config = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-strip-inline-comments'),
+    require('postcss-nested'),
+    require('postcss-preset-env'),
+    require('autoprefixer'),
+    require('postcss-extend-rule'),
+    process.env.NODE_ENV === 'development' && require('cssnano')({
+      preset: 'default',
+    })
+  ],
+};
+
+module.exports = config;
+```
--- a/src/routes/index.md
+++ b/src/routes/index.md
@ -22,15 +22,14 @@ pnpm add omorphia

 ### Components

-Import a component with:
-```js
-import { Button } from "omorphia"
-```
+Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:

-Then, use it in your HTML:
+```svelte example
+<script lang="ts">
+    import Button from "omorphia/components/Button.svelte"
+</script>

-```html
-<Button color="primary">Click me!</Button>
+<Button color="primary">I'm a button!</Button>
 ```

 For more information on each component, check out the pages on the sidebar navigation.
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,12 +1,13 @@
 import {mdsvex} from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import preprocess from 'svelte-preprocess';
 import sveltePreprocess from 'svelte-preprocess';
 import Icons from 'unplugin-icons/vite';
 import svelteSvg from '@poppanator/sveltekit-svg';
-import {parse} from 'sveltedoc-parser'
-import * as svelte from 'svelte/compiler'
+import examples from 'mdsvexamples/vite'
+import sveld from './plugins/sveld.js'
+import path from "path";

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@ -28,35 +29,45 @@ const config = {
                    compiler: 'svelte',
                    defaultClass: 'icon',
                }),
-                {
-                    name: "sveltedoc-parser",
-                    async transform(src, id) {
-                        const query = id.split('?')[1]
-
-                        if ((query || '').includes('raw&api')) {
-                            const raw = JSON.parse(src.split('export default ')[1])
-
-                            let {code} = await svelte.preprocess(raw, sveltePreprocess(), {
-                                filename: id
-                            })
-
-                            const data = await parse({
-                                fileContent: code,
-                                encoding: 'ascii',
-                                features: ['data', 'computed', 'events', 'slots'],
-                                ignoredVisibilities: ['private'],
-                                includeSourceLocations: true,
-                                version: 3
-                            })
-
-                            return {
-                                code: `export default ${JSON.stringify(data)}`,
-                                map: null
-                            }
-                        }
-                    }
-                },
+                examples,
+                sveld(),
+                // {
+                //     name: "sveltedoc-parser",
+                //     async transform(src, id) {
+                //         const query = id.split('?')[1]
+                //
+                //         if ((query || '').includes('raw&api')) {
+                //             const raw = JSON.parse(src.split('export default ')[1])
+                //
+                //             let {code} = await svelte.preprocess(raw, sveltePreprocess(), {
+                //                 filename: id
+                //             })
+                //
+                //             const data = await parse({
+                //                 fileContent: code,
+                //                 encoding: 'ascii',
+                //                 features: ['data', 'computed', 'events', 'slots'],
+                //                 ignoredVisibilities: ['private'],
+                //                 includeSourceLocations: true,
+                //                 version: 3
+                //             })
+                //
+                //             return {
+                //                 code: `export default ${JSON.stringify(data)}`,
+                //                 map: null
+                //             }
+                //         }
+                //     }
+                // },
            ],
+
+            resolve: {
+                alias: {
+                    $lib: path.resolve('./src/lib'),
+                    $routes: path.resolve('./src/routes'),
+                    omorphia: path.resolve('./src/lib'),
+                },
+            },
        },
    },
 };
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,3 +1,14 @@
 {
+	"paths": {
+		"omorphia/*": [
+			"src/lib/*"
+		],
+		"omorphia": [
+			"src/lib"
+		],
+		"$routes/*": [
+			"src/routes/*"
+		]
+	},
 	"extends": "./.svelte-kit/tsconfig.json"
 }