Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)

README.md

@@ -4,46 +4,13 @@
 
 ---
 
-### ⚠️ Currently in-progress: Not accepting contributions currently.
+### ⚠️ In-progress: Not accepting contributions currently.
 
-When creating a component, start with [GitHub's Primer styles](https://github.com/primer/css/tree/main/src) for that component, and go from there. Global variables and colors are incomplete and currently identical to Primers'.
+Learn more at [omorphia.modrinth.com.](https://omorphia.modrinth.com)
-
-#### Components
-
-- [ ] Button
-- [ ] Select menu
-- [ ] Checkboxes
-- [ ] Text input
-- [ ] Pagination
-- [ ] Link
-- [ ] Blankslate
-- [ ] Breadcrumbs
-- [ ] Markdown
-- [ ] Textarea
-- [ ] Select
-
-...and others
-
-## Using
-
-Install the package:
-
-```bash
-npm install omorphia # or pnpm inst...
-```
-
-Import a component:
-```svelte
-<script>
-    import { Button } from "omorphia"
-</script>
-
-<Button> Click me! </Button>
-```
 
 ## Developing
 
-The library lives in the `src/lib` folder, and the documentation lives in the `src/routes` folder.
+The library lives in the `src/package` folder, and the documentation lives in the `src/routes` folder.
 
 ```bash
 pnpm install # Install dependencies

package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.1",
     "@iconify-json/heroicons-outline": "^1.1.1",
+    "@iconify-json/heroicons-solid": "^1.1.1",
     "@iconify-json/lucide": "^1.1.7",
     "@poppanator/sveltekit-svg": "^0.3.1",
     "@sveltejs/adapter-static": "^1.0.0-next.29",
@@ -68,7 +69,10 @@
   },
   "homepage": "https://omorphia.modrinth.com",
   "dependencies": {
+    "highlight.js": "^11.5.0",
+    "insane": "^2.6.2",
     "lodash.uniqueid": "^4.0.1",
+    "marked": "^4.0.12",
     "sanitize.css": "^13.0.0",
     "svelte-tiny-virtual-list": "^2.0.0",
     "svelte-use-click-outside": "^1.0.0",

plugins/sveld.js

@@ -23,10 +23,10 @@ export default function sveld() {
         async buildStart() {
             const output = {};
 
-            const componentFiles = await fs.readdir(path.resolve('./src/lib/components'))
+            const componentFiles = await fs.readdir(path.resolve('./src/package/components'))
 
             for (const fileName of componentFiles) {
-                const filePath = path.resolve('./src/lib/components', fileName)
+                const filePath = path.resolve('./src/package/components', fileName)
                 const raw = (await fs.readFile(filePath)).toString()
                 output[fileName] = await parseRaw(raw, filePath)
             }

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.3
 specifiers:
   '@iconify-json/carbon': ^1.1.1
   '@iconify-json/heroicons-outline': ^1.1.1
+  '@iconify-json/heroicons-solid': ^1.1.1
   '@iconify-json/lucide': ^1.1.7
   '@poppanator/sveltekit-svg': ^0.3.1
   '@sveltejs/adapter-static': ^1.0.0-next.29
@@ -14,7 +15,10 @@ specifiers:
   eslint: ^7.32.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^3.2.1
+  highlight.js: ^11.5.0
+  insane: ^2.6.2
   lodash.uniqueid: ^4.0.1
+  marked: ^4.0.12
   mdsvex: ^0.10.5
   mdsvexamples: ^0.0.8
   nodemon: ^2.0.15
@@ -41,7 +45,10 @@ specifiers:
   unplugin-icons: ^0.13.3
 
 dependencies:
+  highlight.js: 11.5.0
+  insane: 2.6.2
   lodash.uniqueid: 4.0.1
+  marked: 4.0.12
   sanitize.css: 13.0.0
   svelte-tiny-virtual-list: 2.0.0
   svelte-use-click-outside: 1.0.0
@@ -50,10 +57,11 @@ dependencies:
 devDependencies:
   '@iconify-json/carbon': 1.1.1
   '@iconify-json/heroicons-outline': 1.1.1
+  '@iconify-json/heroicons-solid': 1.1.1
   '@iconify-json/lucide': 1.1.7
   '@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
   '@sveltejs/adapter-static': 1.0.0-next.29
-  '@sveltejs/kit': 1.0.0-next.303_svelte@3.46.4
+  '@sveltejs/kit': 1.0.0-next.304_svelte@3.46.4
   '@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
@@ -248,6 +256,12 @@ packages:
       '@iconify/types': 1.0.12
     dev: true
 
+  /@iconify-json/heroicons-solid/1.1.1:
+    resolution: {integrity: sha512-yTq+PjF543FEp37gqLLQLMGBhZXaHJOY8wLPsWyQZzIDJ9h773ofvp32fgMh9YlgQT4MaeDH2VULvFBBCRmJgQ==}
+    dependencies:
+      '@iconify/types': 1.0.12
+    dev: true
+
   /@iconify-json/lucide/1.1.7:
     resolution: {integrity: sha512-zGX7M1EBJfYsTYG2vgMEjijcGUBYYjmhrXnPny5RLyJWhABKdrzBCB/hNamiKVCmJ0EWcUE1q3EGpCuivtsJcg==}
     dependencies:
@@ -347,17 +361,17 @@ packages:
       tiny-glob: 0.2.9
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.303_svelte@3.46.4:
+  /@sveltejs/kit/1.0.0-next.304_svelte@3.46.4:
-    resolution: {integrity: sha512-WdxDc8OiF1WEd/bEza7CBdzA+3qIcCi1GKBj/gieKX9I3N8iDJt/Cg2POrLo9wQoJ47nZcAd1eOhfr7XEX1aIQ==}
+    resolution: {integrity: sha512-3+bCoDsF2Omolx51lK6+4Zgr8NYge8USxKpZpAg8OfonEW8L4GToyV4g+udLMCI3CC4QEw3eS1RFUj9UxLf2NQ==}
     engines: {node: '>=14.13'}
     hasBin: true
     peerDependencies:
       svelte: ^3.44.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.0-next.39_svelte@3.46.4+vite@2.8.6
+      '@sveltejs/vite-plugin-svelte': 1.0.0-next.39_svelte@3.46.4+vite@2.9.1
       sade: 1.8.1
       svelte: 3.46.4
-      vite: 2.8.6
+      vite: 2.9.1
     transitivePeerDependencies:
       - diff-match-patch
       - less
@@ -366,7 +380,7 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte/1.0.0-next.39_svelte@3.46.4+vite@2.8.6:
+  /@sveltejs/vite-plugin-svelte/1.0.0-next.39_svelte@3.46.4+vite@2.9.1:
     resolution: {integrity: sha512-gnvvcAW2LK+KnUn8lKb2ypcXKwSp2K57mem5C4VNKfjxdRpM6+XwNavWwVf6otnDhz3qPYl/TKKW6/dRr6eeAw==}
     engines: {node: ^14.13.1 || >= 16}
     peerDependencies:
@@ -383,7 +397,7 @@ packages:
       magic-string: 0.25.9
       svelte: 3.46.4
       svelte-hmr: 0.14.10_svelte@3.46.4
-      vite: 2.8.6
+      vite: 2.9.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -675,6 +689,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /assignment/2.0.0:
+    resolution: {integrity: sha1-/9F7Ib9dayLnd7mJaBqBVFaj3T4=}
+    dev: false
+
   /ast-types/0.14.2:
     resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
     engines: {node: '>=4'}
@@ -1208,8 +1226,8 @@ packages:
     resolution: {integrity: sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=}
     dev: true
 
-  /esbuild-android-64/0.14.25:
+  /esbuild-android-64/0.14.30:
-    resolution: {integrity: sha512-L5vCUk7TzFbBnoESNoXjU3x9+/+7TDIE/1mTfy/erAfvZAqC+S3sp/Qa9wkypFMcFvN9FzvESkTlpeQDolREtQ==}
+    resolution: {integrity: sha512-vdJ7t8A8msPfKpYUGUV/KaTQRiZ0vDa2XSTlzXVkGGVHLKPeb85PBUtYJcEgw3htW3IdX5i1t1IMdQCwJJgNAg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -1217,8 +1235,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-android-arm64/0.14.25:
+  /esbuild-android-arm64/0.14.30:
-    resolution: {integrity: sha512-4jv5xPjM/qNm27T5j3ZEck0PvjgQtoMHnz4FzwF5zNP56PvY2CT0WStcAIl6jNlsuDdN63rk2HRBIsO6xFbcFw==}
+    resolution: {integrity: sha512-BdgGfxeA5hBQNErLr7BWJUA8xjflEfyaARICy8e0OJYNSAwDbEzOf8LyiKWSrDcgV129mWhi3VpbNQvOIDEHcg==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -1226,8 +1244,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-64/0.14.25:
+  /esbuild-darwin-64/0.14.30:
-    resolution: {integrity: sha512-TGp8tuudIxOyWd1+8aYPxQmC1ZQyvij/AfNBa35RubixD0zJ1vkKHVAzo0Zao1zcG6pNqiSyzfPto8vmg0s7oA==}
+    resolution: {integrity: sha512-VRaOXMMrsG5n53pl4qFZQdXy2+E0NoLP/QH3aDUI0+bQP+ZHDmbINKcDy2IX7GVFI9kqPS18iJNAs5a6/G2LZg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -1235,8 +1253,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-arm64/0.14.25:
+  /esbuild-darwin-arm64/0.14.30:
-    resolution: {integrity: sha512-oTcDgdm0MDVEmw2DWu8BV68pYuImpFgvWREPErBZmNA4MYKGuBRaCiJqq6jZmBR1x+3y1DWCjez+5uLtuAm6mw==}
+    resolution: {integrity: sha512-qDez+fHMOrO9Oc9qjt/x+sy09RJVh62kik5tVybKRLmezeV4qczM9/sAYY57YN0aWLdHbcCj2YqJUWYJNsgKnw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -1244,8 +1262,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-64/0.14.25:
+  /esbuild-freebsd-64/0.14.30:
-    resolution: {integrity: sha512-ueAqbnMZ8arnuLH8tHwTCQYeptnHOUV7vA6px6j4zjjQwDx7TdP7kACPf3TLZLdJQ3CAD1XCvQ2sPhX+8tacvQ==}
+    resolution: {integrity: sha512-mec1jENcImVVagddZlGWsdAUwBnzR5cgnhzCxv+9fSMxKbx1uZYLLUAnLPp8m/i934zrumR1xGjJ5VoWdPlI2w==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -1253,8 +1271,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-arm64/0.14.25:
+  /esbuild-freebsd-arm64/0.14.30:
-    resolution: {integrity: sha512-+ZVWud2HKh+Ob6k/qiJWjBtUg4KmJGGmbvEXXW1SNKS7hW7HU+Zq2ZCcE1akFxOPkVB+EhOty/sSek30tkCYug==}
+    resolution: {integrity: sha512-cpjbTs6Iok/AfeB0JgTzyUJTMStC1SQULmany5nHx6S4GTkSgaAHuJzZO0GcVWqghI4e0YL/bjXAhN5Mn6feNw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -1262,8 +1280,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-32/0.14.25:
+  /esbuild-linux-32/0.14.30:
-    resolution: {integrity: sha512-3OP/lwV3kCzEz45tobH9nj+uE4ubhGsfx+tn0L26WAGtUbmmcRpqy7XRG/qK7h1mClZ+eguIANcQntYMdYklfw==}
+    resolution: {integrity: sha512-liIONVT4F2kZmOMwtwASqZ8WkIjb5HHBR9HUffdHiuotSTF3CyZO+EJf+Og+SYYuuVIvt0qHNSFjBA/iSESteQ==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -1271,8 +1289,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-64/0.14.25:
+  /esbuild-linux-64/0.14.30:
-    resolution: {integrity: sha512-+aKHdHZmX9qwVlQmu5xYXh7GsBFf4TWrePgeJTalhXHOG7NNuUwoHmketGiZEoNsWyyqwH9rE5BC+iwcLY30Ug==}
+    resolution: {integrity: sha512-LUnpzoMpRqFON5En4qEj6NWiyH6a1K+Y2qYNKrCy5qPTjDoG/EWeqMz69n8Uv7pRuvDKl3FNGJ1dufTrA5i0sw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -1280,8 +1298,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm/0.14.25:
+  /esbuild-linux-arm/0.14.30:
-    resolution: {integrity: sha512-aTLcE2VBoLydL943REcAcgnDi3bHtmULSXWLbjtBdtykRatJVSxKMjK9YlBXUZC4/YcNQfH7AxwVeQr9fNxPhw==}
+    resolution: {integrity: sha512-97T+bbXnpqf7mfIG49UR7ZSJFGgvc22byn74qw3Kx2GDCBSQoVFjyWuKOHGXp8nXk3XYrdFF+mQ8yQ7aNsgQvg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -1289,8 +1307,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm64/0.14.25:
+  /esbuild-linux-arm64/0.14.30:
-    resolution: {integrity: sha512-UxfenPx/wSZx55gScCImPtXekvZQLI2GW3qe5dtlmU7luiqhp5GWPzGeQEbD3yN3xg/pHc671m5bma5Ns7lBHw==}
+    resolution: {integrity: sha512-DHZHn6FK5q/KL0fpNT/0jE38Nnyk2rXxKE9WENi95EXtqfOLPgE8tzjTZQNgpr61R95QX4ymQU26ni3IZk8buQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -1298,8 +1316,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-mips64le/0.14.25:
+  /esbuild-linux-mips64le/0.14.30:
-    resolution: {integrity: sha512-wLWYyqVfYx9Ur6eU5RT92yJVsaBGi5RdkoWqRHOqcJ38Kn60QMlcghsKeWfe9jcYut8LangYZ98xO1LxIoSXrQ==}
+    resolution: {integrity: sha512-fLUzTFZ7uknC0aPTk7/lM7NmaG/9ZqE3SaHEphcaM009SZK/mDOvZugWi1ss6WGNhk13dUrhkfHcc4FSb9hYhg==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -1307,8 +1325,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-ppc64le/0.14.25:
+  /esbuild-linux-ppc64le/0.14.30:
-    resolution: {integrity: sha512-0dR6Csl6Zas3g4p9ULckEl8Mo8IInJh33VCJ3eaV1hj9+MHGdmDOakYMN8MZP9/5nl+NU/0ygpd14cWgy8uqRw==}
+    resolution: {integrity: sha512-2Oudm2WEfj0dNU9bzIl5L/LrsMEmHWsOsYgJJqu8fDyUDgER+J1d33qz3cUdjsJk7gAENayIxDSpsuCszx0w3A==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -1316,8 +1334,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-riscv64/0.14.25:
+  /esbuild-linux-riscv64/0.14.30:
-    resolution: {integrity: sha512-J4d20HDmTrgvhR0bdkDhvvJGaikH3LzXQnNaseo8rcw9Yqby9A90gKUmWpfwqLVNRILvNnAmKLfBjCKU9ajg8w==}
+    resolution: {integrity: sha512-RPMucPW47rV4t2jlelaE948iCRtbZf5RhifxSwzlpM1Mqdyu99MMNK0w4jFreGTmLN+oGomxIOxD6n+2E/XqHw==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -1325,8 +1343,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-s390x/0.14.25:
+  /esbuild-linux-s390x/0.14.30:
-    resolution: {integrity: sha512-YI2d5V6nTE73ZnhEKQD7MtsPs1EtUZJ3obS21oxQxGbbRw1G+PtJKjNyur+3t6nzHP9oTg6GHQ3S3hOLLmbDIQ==}
+    resolution: {integrity: sha512-OZ68r7ok6qO7hdwrwQn2p5jbIRRcUcVaAykB7e0uCA0ODwfeGunILM6phJtq2Oz4dlEEFvd+tSuma3paQKwt+A==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -1334,8 +1352,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-netbsd-64/0.14.25:
+  /esbuild-netbsd-64/0.14.30:
-    resolution: {integrity: sha512-TKIVgNWLUOkr+Exrye70XTEE1lJjdQXdM4tAXRzfHE9iBA7LXWcNtVIuSnphTqpanPzTDFarF0yqq4kpbC6miA==}
+    resolution: {integrity: sha512-iyejQUKn0TzpPkufq8pSCxOg9NheycQbMbPCmjefTe9wYuUlBt1TcHvdoJnYbQzsAhAh1BNq+s0ycRsIJFZzaQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -1343,8 +1361,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-openbsd-64/0.14.25:
+  /esbuild-openbsd-64/0.14.30:
-    resolution: {integrity: sha512-QgFJ37A15D7NIXBTYEqz29+uw3nNBOIyog+3kFidANn6kjw0GHZ0lEYQn+cwjyzu94WobR+fes7cTl/ZYlHb1A==}
+    resolution: {integrity: sha512-UyK1MTMcy4j5fH260fsE1o6MVgWNhb62eCK2yCKCRazZv8Nqdc2WiP9ygjWidmEdCDS+A6MuVp9ozk9uoQtQpA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -1352,8 +1370,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-sunos-64/0.14.25:
+  /esbuild-sunos-64/0.14.30:
-    resolution: {integrity: sha512-rmWfjUItYIVlqr5EnTH1+GCxXiBOC42WBZ3w++qh7n2cS9Xo0lO5pGSG2N+huOU2fX5L+6YUuJ78/vOYvefeFw==}
+    resolution: {integrity: sha512-aQRtRTNKHB4YuG+xXATe5AoRTNY48IJg5vjE8ElxfmjO9+KdX7MHFkTLhlKevCD6rNANtB3qOlSIeAiXTwHNqw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -1361,8 +1379,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-32/0.14.25:
+  /esbuild-windows-32/0.14.30:
-    resolution: {integrity: sha512-HGAxVUofl3iUIz9W10Y9XKtD0bNsK9fBXv1D55N/ljNvkrAYcGB8YCm0v7DjlwtyS6ws3dkdQyXadbxkbzaKOA==}
+    resolution: {integrity: sha512-9/fb1tPtpacMqxAXp3fGHowUDg/l9dVch5hKmCLEZC6PdGljh6h372zMdJwYfH0Bd5CCPT0Wx95uycBLJiqpXA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -1370,8 +1388,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-64/0.14.25:
+  /esbuild-windows-64/0.14.30:
-    resolution: {integrity: sha512-TirEohRkfWU9hXLgoDxzhMQD1g8I2mOqvdQF2RS9E/wbkORTAqJHyh7wqGRCQAwNzdNXdg3JAyhQ9/177AadWA==}
+    resolution: {integrity: sha512-DHgITeUhPAnN9I5O6QBa1GVyPOhiYCn4S4TtQr7sO4+X0LNyqnlmA1M0qmGkUdDC1QQfjI8uQ4G/whdWb2pWIQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -1379,8 +1397,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-arm64/0.14.25:
+  /esbuild-windows-arm64/0.14.30:
-    resolution: {integrity: sha512-4ype9ERiI45rSh+R8qUoBtaj6kJvUOI7oVLhKqPEpcF4Pa5PpT3hm/mXAyotJHREkHpM87PAJcA442mLnbtlNA==}
+    resolution: {integrity: sha512-F1kLyQH7zSgjh5eLxogGZN7C9+KNs9m+s7Q6WZoMmCWT/6j998zlaoECHyM8izJRRfsvw2eZlEa1jO6/IOU1AQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -1388,32 +1406,32 @@ packages:
     dev: true
     optional: true
 
-  /esbuild/0.14.25:
+  /esbuild/0.14.30:
-    resolution: {integrity: sha512-4JHEIOMNFvK09ziiL+iVmldIhLbn49V4NAVo888tcGFKedEZY/Y8YapfStJ6zSE23tzYPKxqKwQBnQoIO0BI/Q==}
+    resolution: {integrity: sha512-wCecQSBkIjp2xjuXY+wcXS/PpOQo9rFh4NAKPh4Pm9f3fuLcnxkR0rDzA+mYP88FtXIUcXUyYmaIgfrzRl55jA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      esbuild-android-64: 0.14.25
+      esbuild-android-64: 0.14.30
-      esbuild-android-arm64: 0.14.25
+      esbuild-android-arm64: 0.14.30
-      esbuild-darwin-64: 0.14.25
+      esbuild-darwin-64: 0.14.30
-      esbuild-darwin-arm64: 0.14.25
+      esbuild-darwin-arm64: 0.14.30
-      esbuild-freebsd-64: 0.14.25
+      esbuild-freebsd-64: 0.14.30
-      esbuild-freebsd-arm64: 0.14.25
+      esbuild-freebsd-arm64: 0.14.30
-      esbuild-linux-32: 0.14.25
+      esbuild-linux-32: 0.14.30
-      esbuild-linux-64: 0.14.25
+      esbuild-linux-64: 0.14.30
-      esbuild-linux-arm: 0.14.25
+      esbuild-linux-arm: 0.14.30
-      esbuild-linux-arm64: 0.14.25
+      esbuild-linux-arm64: 0.14.30
-      esbuild-linux-mips64le: 0.14.25
+      esbuild-linux-mips64le: 0.14.30
-      esbuild-linux-ppc64le: 0.14.25
+      esbuild-linux-ppc64le: 0.14.30
-      esbuild-linux-riscv64: 0.14.25
+      esbuild-linux-riscv64: 0.14.30
-      esbuild-linux-s390x: 0.14.25
+      esbuild-linux-s390x: 0.14.30
-      esbuild-netbsd-64: 0.14.25
+      esbuild-netbsd-64: 0.14.30
-      esbuild-openbsd-64: 0.14.25
+      esbuild-openbsd-64: 0.14.30
-      esbuild-sunos-64: 0.14.25
+      esbuild-sunos-64: 0.14.30
-      esbuild-windows-32: 0.14.25
+      esbuild-windows-32: 0.14.30
-      esbuild-windows-64: 0.14.25
+      esbuild-windows-64: 0.14.30
-      esbuild-windows-arm64: 0.14.25
+      esbuild-windows-arm64: 0.14.30
     dev: true
 
   /escalade/3.1.1:
@@ -1843,6 +1861,16 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /he/0.5.0:
+    resolution: {integrity: sha1-LAX/rvkLaOhg8/0rVO9YCYknfuI=}
+    hasBin: true
+    dev: false
+
+  /highlight.js/11.5.0:
+    resolution: {integrity: sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
     dev: true
@@ -1904,6 +1932,13 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /insane/2.6.2:
+    resolution: {integrity: sha1-wqtouz4AarRRVg0bRGkXMpwKgSA=}
+    dependencies:
+      assignment: 2.0.0
+      he: 0.5.0
+    dev: false
+
   /is-binary-path/2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -2133,6 +2168,12 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /marked/4.0.12:
+    resolution: {integrity: sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: false
+
   /mdn-data/2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: true
@@ -3089,6 +3130,15 @@ packages:
       supports-color: 3.2.3
     dev: true
 
+  /postcss/8.4.12:
+    resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.1
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /postcss/8.4.8:
     resolution: {integrity: sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -3904,8 +3954,8 @@ packages:
       unist-util-stringify-position: 2.0.3
     dev: true
 
-  /vite/2.8.6:
+  /vite/2.9.1:
-    resolution: {integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==}
+    resolution: {integrity: sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==}
     engines: {node: '>=12.2.0'}
     hasBin: true
     peerDependencies:
@@ -3920,8 +3970,8 @@ packages:
       stylus:
         optional: true
     dependencies:
-      esbuild: 0.14.25
+      esbuild: 0.14.30
-      postcss: 8.4.8
+      postcss: 8.4.12
       resolve: 1.22.0
       rollup: 2.70.0
     optionalDependencies:

src/lib/components/Input.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-    // TODO: Move to TextInput.svelte & simplify options for text
-
-    import { SvelteComponent } from 'svelte'
-
-    export let key = ''
-    export let label = ''
-    export let placeholder = ''
-    export let icon: string | SvelteComponent = ''
-    export let type: 'text' | 'textarea'
-    export let options: [
-        {
-            label: string;
-            value: string | number;
-            icon: string;
-        }
-    ] = []
-    export let value = undefined
-
-    export let wrap = false
-</script>
-
-{#if label}
-    <div class="input__label">
-        {label}
-    </div>
-{/if}
-{#if type === 'text'}
-    <input type="text" name={key} class="input-box" {placeholder} bind:value={value}/>
-{:else if type === 'textarea'}
-    <textarea name={key} class="input-box input-box--fill" {placeholder} bind:value={value}/>
-{/if}
-
-<style lang="postcss">
-    .input-box {
-        border-radius: var(--rounded-sm);
-        box-shadow: var(--shadow-inset-sm);
-        background-color: var(--color-button-bg);
-        border: none;
-        padding: 0.25rem 0.75rem;
-        width: 20rem;
-        max-width: 100%;
-
-        &--fill {
-            width: 100%;
-            padding: 0.5rem 0.75rem;
-        }
-    }
-
-    textarea {
-        min-height: 2.5rem;
-    }
-</style>

src/lib/styles/classes/link.postcss

@@ -1,7 +0,0 @@
-.link {
-    color: var(--color-link);
-
-    &:hover {
-        text-decoration: underline;
-    }
-}

src/lib/styles/classes/title.postcss

@@ -1,8 +0,0 @@
-.title {
-    font-size: 1.5rem;
-    font-weight: var(--font-weight-bold);
-}
-
-.title-secondary {
-    font-size: 1.25rem;
-}

src/package/components/Avatar.svelte

@@ -2,7 +2,7 @@
     // TODO: Make square icon `md` more rounded
 
     import { onMount } from 'svelte'
-    import { classCombine } from '$lib/utils/classCombine'
+    import { classCombine } from '$package/utils/classCombine'
 
     /** Optional, as a default icon will be substituted if no image was specified */
     export let src: string | undefined

src/package/components/Button.svelte

@@ -3,7 +3,7 @@
     // TODO: icon only buttons should have uniform padding
     // TODO: Could be a class
 
-    import { classCombine } from '$lib/utils/classCombine'
+    import { classCombine } from '$package/utils/classCombine'
 
     /** The element to be styled as a button */
     export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
@@ -47,7 +47,7 @@
         justify-content: flex-start;
         align-items: center;
         padding: 0.25rem 1rem;
-        grid-gap: 0.4rem;
+        grid-gap: 14px;
         cursor: pointer;
         position: relative;
 
@@ -104,7 +104,8 @@
             }
 
             &-danger-light {
-                color: var(--color-danger-text);
+                background-color: var(--color-popup-danger-bg);
+                color: var(--color-popup-danger-text);
                 transition: filter 0s ease-in-out;
 
                 &:hover {
@@ -131,10 +132,6 @@
             justify-content: center;
         }
 
-        &.is-iconified {
-            padding: 0.25rem 0.75rem;
-        }
-
         &.has-badge::after {
             content: '';
             width: 0.5rem;
@@ -145,5 +142,10 @@
             top: 0.5rem;
             right: 0.5rem;
         }
+
+        /* Only child doesn't work as intended because text is passed through as `innerText` */
+        :global(.icon:only-child) {
+            margin: 4px -6px;
+        }
     }
 </style>

src/package/components/CheckboxList.svelte

@@ -37,6 +37,7 @@
     .checkbox-list {
         display: flex;
         flex-direction: column;
+        gap: 2px;
 
         &.wrap {
             flex-direction: row;

src/package/components/CheckboxVirtualList.svelte

@@ -32,7 +32,7 @@
         width="100%"
         {height}
         itemCount={options.length}
-        itemSize={30}>
+        itemSize={26}>
     <div slot="item" let:index let:style {style} style:padding-bottom={(options.length) - 1 === index ? '2.5rem' : ''}>
         {@const option = options[index]}
         <Checkbox checked={value.includes(option.value)} on:change={(e) => handleChange(e, option.value)}>

src/package/components/FormField.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import uniqueId from 'lodash.uniqueid'
+
+    export let required = false;
+    export let label: string;
+
+    const id = `form-field-${uniqueId()}`
+</script>
+
+<div class="form-field">
+    <label for={id} class="text-input__label" class:required>
+        {label}
+    </label>
+    <slot {id}  />
+</div>
+
+
+<style lang="postcss">
+    .form-field {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+</style>

src/package/components/TextInput.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { SvelteComponent } from 'svelte'
+
+    export let placeholder = ''
+    export let icon: SvelteComponent = ''
+    export let value = ''
+    export let multiline = false
+    export let id: string = undefined
+</script>
+
+<div class="text-input">
+    {#if multiline}
+        <textarea name={id} {placeholder} bind:value={value}/>
+    {:else}
+        <input type="text" name={id} {placeholder} bind:value={value}/>
+    {/if}
+</div>
+
+
+<style lang="postcss">
+    .text-input {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        input, textarea {
+            border-radius: var(--rounded-sm);
+            box-shadow: var(--shadow-inset-sm);
+            background-color: var(--color-button-bg);
+            border: none;
+            padding: 0.25rem 0.75rem;
+            width: 20rem;
+            max-width: 100%;
+        }
+
+        &--fill {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+        }
+
+
+        textarea {
+            min-height: 2.5rem;
+        }
+    }
+</style>

src/package/index.ts

@@ -0,0 +1,26 @@
+export { default as Avatar } from './components/Avatar.svelte';
+
+export { default as Badge } from './components/Badge.svelte';
+
+export { default as Button } from './components/Button.svelte';
+
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CheckboxList } from './components/CheckboxList.svelte';
+export { default as CheckboxVirtualList } from './components/CheckboxVirtualList.svelte';
+
+export { default as Chips } from './components/Chips.svelte';
+
+export { default as FormField } from './components/FormField.svelte';
+
+export { default as NavRow } from './components/NavRow.svelte';
+
+export { default as Pagination } from './components/Pagination.svelte';
+
+export { default as Select } from './components/Select.svelte';
+
+export { default as TextInput } from './components/TextInput.svelte';
+
+
+
+
+

src/package/styles/classes/actions.postcss

@@ -0,0 +1,20 @@
+.actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-left: auto;
+    min-width: fit-content;
+
+    > *:last-child {
+        margin-top: auto;
+        color: var(--color-text-light);
+    }
+
+    @media (width <= 1000px) {
+        flex-direction: row;
+        align-items: flex-start;
+        margin-left: unset;
+    }
+}

src/package/styles/classes/button-group.postcss

@@ -0,0 +1,5 @@
+.button-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/card.postcss

@@ -94,4 +94,8 @@
     &.text {
         --padding: 1.5rem;
     }
+
+    p {
+        line-height: 130%;
+    }
 }

src/package/styles/classes/divider.postcss

@@ -0,0 +1,5 @@
+.divider {
+    margin: 0.25rem 0;
+    border: none;
+    border-top: 1px solid var(--color-divider);
+}

src/package/styles/classes/illustration.postcss

@@ -0,0 +1,16 @@
+.illustration {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    grid-gap: 2rem;
+
+    &__image {
+        max-width: 300px;
+    }
+
+    &__description {
+        font-size: 1.2rem;
+        color: var(--color-text-light)
+    }
+}

src/package/styles/classes/info-table.postcss

@@ -0,0 +1,11 @@
+.info-table {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 0.25rem 2rem;
+    width: fit-content;
+
+    &__label {
+        color: var(--color-text-lightest);
+        font-weight: var(--font-weight-medium);
+    }
+}

src/package/styles/classes/link.postcss

@@ -0,0 +1,26 @@
+.link {
+    color: var(--color-link);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 100%;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.link-group {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 0.75rem;
+
+    .link {
+        color: var(--color-text);
+
+        &:hover {
+            color: var(--color-link);
+
+        }
+    }
+}

src/package/styles/classes/markdown.postcss

@@ -0,0 +1,137 @@
+.markdown {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 1rem;
+
+    blockquote,
+    details,
+    dl,
+    ol,
+    p,
+    code,
+    pre,
+    table,
+    ul {
+        margin: 0;
+    }
+
+    p {
+        line-height: 1.5;
+        word-wrap: break-word;
+        overflow-wrap: anywhere;
+    }
+
+    h1,
+    h2 {
+        padding-bottom: 0.2em;
+        border-bottom: 1px solid var(--color-divider);
+    }
+
+    blockquote {
+        padding: 0 1rem;
+        color: var(--color-text);
+        border-left: 0.25rem solid var(--color-divider);
+    }
+
+    a {
+        color: var(--color-link);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    img,
+    iframe {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--rounded-sm);
+    }
+
+    iframe {
+        width: 35rem;
+        aspect-ratio: 16/9;
+    }
+
+    code {
+        padding: 0.2rem 0.4rem;
+        font-size: 80%;
+        border-radius: var(--rounded-sm);
+        background-color: var(--color-code-bg);
+        color: var(--color-code-text);
+    }
+
+    pre {
+        padding: 1rem;
+        border-radius: var(--rounded-sm);
+        overflow-x: auto;
+
+        code {
+            font-size: 80%;
+            padding: 0;
+            border-radius: 0;
+            background-color: unset;
+        }
+    }
+
+    hr {
+        margin: 0;
+        color: var(--color-divider);
+    }
+
+    table {
+        display: block;
+        width: max-content;
+        max-width: 100%;
+        overflow: auto;
+        border-collapse: collapse;
+        line-height: 1.5;
+
+        th {
+            font-weight: 600;
+        }
+
+        td,
+        th {
+            padding: 0.4rem 0.85rem;
+            border: 0.1rem solid var(--color-table-border);
+        }
+
+        tr:nth-child(2n) {
+            background-color: var(--color-table-alternate-row);
+        }
+    }
+
+    details {
+        border: 0.15rem solid var(--color-button-bg);
+        border-radius: var(--rounded-sm);
+        padding: 0.5rem 0.5rem 0;
+        overflow: hidden;
+
+        summary {
+            font-weight: bold;
+            margin: -0.5rem -0.5rem 0;
+            padding: 0.5rem 0.8rem;
+            cursor: pointer;
+            background-color: var(--color-button-bg);
+
+            &:hover {
+                background-color: var(--color-button-bg-hover);
+            }
+        }
+
+        &[open] {
+            padding: 0.5rem;
+
+            summary {
+                margin-bottom: 0.5rem;
+            }
+        }
+    }
+
+    li:has(> input) {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+}

src/package/styles/classes/member.postcss

@@ -0,0 +1,13 @@
+.member {
+    display: flex;
+    grid-gap: 0.75rem;
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+
+        &__link {
+            font-weight: var(--font-weight-medium);
+        }
+    }
+}

src/package/styles/classes/stat.postcss

@@ -0,0 +1,23 @@
+.stat {
+    display: flex;
+    align-items: baseline;
+    grid-gap: 0.4rem;
+
+    &--light {
+        color: var(--color-text-lightest);
+    }
+
+    .icon {
+        align-self: center;
+    }
+
+    strong {
+        font-size: 20px;
+    }
+}
+
+.stat-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/tag.postcss

@@ -0,0 +1,18 @@
+.tag {
+    display: flex;
+    align-items: center;
+    grid-gap: 0.25rem;
+    color: var(--color-text-lightest);
+
+    svg {
+        width: 1rem;
+        height: auto;
+    }
+}
+
+.tag-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin-top: auto;
+    grid-gap: 0.25rem 0.6rem;
+}

src/package/styles/classes/title.postcss

@@ -0,0 +1,14 @@
+.title-primary {
+    font-size: 24px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+    font-size: 20px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-tertiary {
+    font-size: 16px;
+    font-weight: var(--font-weight-bold);
+}

src/package/styles/variables/spacing.postcss

@@ -204,4 +204,10 @@
                 xl: --spacer-6
         );
         */
-}
+}
+
+/* Breakpoints */
+@custom-media --sm (min-width: 544px);
+@custom-media --md (min-width: 768px);
+@custom-media --lg (min-width: 1012px);
+@custom-media --xl (min-width: 544px);

src/package/utils/ago.ts

@@ -0,0 +1,57 @@
+/**
+ * Human readable elapsed or remaining time (example: 3 minutes ago)
+ * @author github.com/victornpb
+ * @see https://stackoverflow.com/a/67338038/938822
+ */
+export function ago(
+	/** A Date object, timestamp or string parsable with Date.parse() */
+	date: string | number | Date,
+	/** A Date object, timestamp or string parsable with Date.parse() */
+	nowDate: string | number | Date = Date.now(),
+	/** A Intl formater */
+	rft: Intl.RelativeTimeFormat = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+): string {
+	const SECOND = 1000;
+	const MINUTE = 60 * SECOND;
+	const HOUR = 60 * MINUTE;
+	const DAY = 24 * HOUR;
+	const WEEK = 7 * DAY;
+	const MONTH = 30 * DAY;
+	const YEAR = 365 * DAY;
+	const intervals = [
+		{ ge: YEAR, divisor: YEAR, unit: 'year' },
+		{ ge: MONTH, divisor: MONTH, unit: 'month' },
+		{ ge: WEEK, divisor: WEEK, unit: 'week' },
+		{ ge: DAY, divisor: DAY, unit: 'day' },
+		{ ge: HOUR, divisor: HOUR, unit: 'hour' },
+		{ ge: MINUTE, divisor: MINUTE, unit: 'minute' },
+		{ ge: 30 * SECOND, divisor: SECOND, unit: 'seconds' },
+		{ ge: 0, divisor: 1, text: 'just now' },
+	];
+	const now = typeof nowDate === 'object' ? nowDate.getTime() : new Date(nowDate).getTime();
+	const diff = now - (typeof date === 'object' ? date : new Date(date)).getTime();
+	const diffAbs = Math.abs(diff);
+	for (const interval of intervals) {
+		if (diffAbs >= interval.ge) {
+			const x = Math.round(Math.abs(diff) / interval.divisor);
+			const isFuture = diff < 0;
+			return interval.unit ? rft.format(isFuture ? x : -x, interval.unit as Unit) : interval.text;
+		}
+	}
+}
+
+type Unit =
+	| 'second'
+	| 'seconds'
+	| 'minute'
+	| 'minutes'
+	| 'hour'
+	| 'hours'
+	| 'day'
+	| 'days'
+	| 'week'
+	| 'weeks'
+	| 'month'
+	| 'months'
+	| 'year'
+	| 'years';

src/package/utils/number.ts

@@ -0,0 +1,40 @@
+/**
+ * Convert large numbers to human readable strings
+ * @source https://github.com/rohmanhm/simplify-number
+ */
+export function simplify(num = 0): string {
+	let numberVar = num;
+
+	// 2 decimal places => 100, 3 => 1000, etc
+	const decPlaces = Math.pow(10, 1);
+
+	// Enumerate number abbreviations
+	const abbrev = ['K', 'M', 'B', 'T'];
+
+	// Go through the array backwards, so we do the largest first
+	for (let i = abbrev.length - 1; i >= 0; i--) {
+		// Convert array index to "1000", "1000000", etc
+		const size = Math.pow(10, (i + 1) * 3);
+
+		// If the number is bigger or equal do the abbreviation
+		if (size <= numberVar) {
+			// Here, we multiply by decPlaces, round, and then divide by decPlaces.
+			// This gives us nice rounding to a particular decimal place.
+			numberVar = Math.round((numberVar * decPlaces) / size) / decPlaces;
+
+			// Handle special case where we round up to the next abbreviation
+			if (numberVar === 1000 && i < abbrev.length - 1) {
+				numberVar = 1;
+				i++;
+			}
+
+			// Add the letter for the abbreviation
+			(numberVar as any) += abbrev[i];
+
+			// We are done... stop
+			break;
+		}
+	}
+
+	return String(numberVar);
+}

src/package/utils/parse.ts

@@ -0,0 +1,134 @@
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+import insane from 'insane';
+
+const renderer = new marked.Renderer();
+
+renderer.image = (href, text) => {
+	if (/^https?:\/\/(www\.)?youtube\.com\/watch\?v=[a-zA-Z0-9_]{11}$/.test(href)) {
+		const id = href.substring(32, 43);
+		return `<iframe src="https://www.youtube-nocookie.com/embed/${id}?&modestbranding=1&autoplay=0&rel=0" frameborder="0" allowfullscreen></iframe>`;
+	} else {
+		return `<img src="${href}" alt="${text}" />`;
+	}
+};
+
+renderer.link = (href, title, text) => {
+	if (href === null) {
+		return text;
+	}
+	let out = '<a href="' + href + '" rel="external nofollow"';
+	if (title) {
+		out += ' title="' + title + '"';
+	}
+	out += '>' + text + '</a>';
+	return out;
+};
+
+marked.setOptions({
+	renderer,
+	highlight: function (code, lang) {
+		const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+		return hljs.highlight(code, { language }).value;
+	},
+	langPrefix: 'hljs language-',
+	headerPrefix: '',
+	gfm: true,
+	smartLists: true,
+});
+
+function sanitize(html: string): string {
+	return insane(html, {
+		allowedAttributes: {
+			a: ['href', 'name', 'target', 'title', 'rel'],
+			iframe: ['allowfullscreen', 'src', 'width', 'height'],
+			img: ['src', 'width', 'height', 'alt'],
+			h1: ['id'],
+			h2: ['id'],
+			h3: ['id'],
+			h4: ['id'],
+			h5: ['id'],
+			h6: ['id'],
+			code: ['class'],
+			span: ['class'],
+			input: ['type', 'checked', 'disabled'],
+			font: ['color'],
+		},
+		allowedClasses: {},
+		allowedSchemes: ['http', 'https', 'mailto'],
+		allowedTags: [
+			'a',
+			'b',
+			'blockquote',
+			'br',
+			'caption',
+			'center',
+			'code',
+			'del',
+			'details',
+			'div',
+			'em',
+			'font',
+			'h1',
+			'h2',
+			'h3',
+			'h4',
+			'h5',
+			'h6',
+			'hr',
+			'i',
+			'iframe',
+			'img',
+			'input',
+			'ins',
+			'kbd',
+			'li',
+			'main',
+			'ol',
+			'p',
+			'pre',
+			'span',
+			'strike',
+			'strong',
+			'sub',
+			'summary',
+			'sup',
+			'table',
+			'tbody',
+			'td',
+			'th',
+			'thead',
+			'tr',
+			'u',
+			'ul',
+		],
+		filter: ({ tag, attrs }): boolean => {
+			if (tag === 'iframe') {
+				return /^https?:\/\/(www\.)?(youtube|youtube-nocookie)\.com\/embed\/[a-zA-Z0-9_]{11}(\?)?(&modestbranding=1)?(&autoplay=0)?(&loop=1)?(&playlist=[a-zA-Z0-9_]{11})?(&rel=0)?$/.test(
+					attrs.src || ''
+				);
+			} else if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tag)) {
+				return attrs.id !== 'svelte';
+			} else if (tag === 'input') {
+				return attrs.type === 'checkbox' && attrs.disabled === '';
+			} else if (tag === 'code' || tag === 'span') {
+				return !attrs.class || attrs.class.replace(' ', '').startsWith('hljs');
+			} else {
+				return true;
+			}
+		},
+		transformText: null,
+	});
+}
+
+export function markdown(markdown: string): string {
+	return marked.parse(markdown);
+}
+
+export function markdownInline(markdown: string): string {
+	return marked.parseInline(markdown);
+}
+
+export function markdownXSS(markdown: string): string {
+	return sanitize(marked.parse(markdown));
+}

src/package/utils/permissions.ts

@@ -0,0 +1,38 @@
+export class Permissions {
+	data = {
+		uploadVersions: false,
+		deleteVersion: false,
+		editDetails: false,
+		editBody: false,
+		manageInvites: false,
+		removeMember: false,
+		editMember: false,
+		deleteProject: false,
+	};
+
+	get settingsPage(): boolean {
+		return (
+			this.data.manageInvites ||
+			this.data.removeMember ||
+			this.data.editMember ||
+			this.data.deleteProject
+		);
+	}
+
+	constructor(from: number | 'ALL' | null) {
+		if (from === 'ALL' || from === 0b11111111 || from === null) {
+			Object.keys(this.data).forEach((v) => (this.data[v] = true));
+		} else if (typeof from === 'number') {
+			this.data = {
+				uploadVersions: !!(from & (1 << 0)),
+				deleteVersion: !!(from & (1 << 1)),
+				editDetails: !!(from & (1 << 2)),
+				editBody: !!(from & (1 << 3)),
+				manageInvites: !!(from & (1 << 4)),
+				removeMember: !!(from & (1 << 5)),
+				editMember: !!(from & (1 << 6)),
+				deleteProject: !!(from & (1 << 7)),
+			};
+		}
+	}
+}

src/package/utils/versions.ts

@@ -0,0 +1,84 @@
+import gameVersions from '$generated/gameVersions.json';
+
+export function formatVersions(versionArray: string[]): string {
+	const allVersions = gameVersions.slice().reverse();
+	const allReleases = allVersions.filter((x) => x.version_type === 'release');
+
+	const intervals = [];
+	let currentInterval = 0;
+
+	for (let i = 0; i < versionArray.length; i++) {
+		const index = allVersions.findIndex((x) => x.version === versionArray[i]);
+		const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i]);
+
+		if (i === 0) {
+			intervals.push([[versionArray[i], index, releaseIndex]]);
+		} else {
+			const intervalBase = intervals[currentInterval];
+
+			if (
+				(index - intervalBase[intervalBase.length - 1][1] === 1 ||
+					releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
+				(allVersions[intervalBase[0][1]].version_type === 'release' ||
+					allVersions[index].version_type !== 'release')
+			) {
+				intervalBase[1] = [versionArray[i], index, releaseIndex];
+			} else {
+				currentInterval += 1;
+				intervals[currentInterval] = [[versionArray[i], index, releaseIndex]];
+			}
+		}
+	}
+
+	const newIntervals = [];
+	for (let i = 0; i < intervals.length; i++) {
+		const interval = intervals[i];
+
+		if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
+			let lastSnapshot = null;
+			for (let j = interval[1][1]; j > interval[0][1]; j--) {
+				if (allVersions[j].version_type === 'release') {
+					newIntervals.push([
+						interval[0],
+						[
+							allVersions[j].version,
+							j,
+							allReleases.findIndex((x) => x.version === allVersions[j].version),
+						],
+					]);
+
+					if (lastSnapshot !== null && lastSnapshot !== j + 1) {
+						newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]]);
+					} else {
+						newIntervals.push([interval[1]]);
+					}
+
+					break;
+				} else {
+					lastSnapshot = j;
+				}
+			}
+		} else {
+			newIntervals.push(interval);
+		}
+	}
+
+	const output = [];
+
+	for (const interval of newIntervals) {
+		if (interval.length === 2) {
+			output.push(`${interval[0][0]}—${interval[1][0]}`);
+		} else {
+			output.push(interval[0][0]);
+		}
+	}
+
+	return output.join(', ');
+}
+
+export const getPrimary = (files: Version['files']) =>
+	files.find((file) => file.primary) || files[0];
+
+export function downloadUrl(file): string {
+	return import.meta.env.VITE_API_URL + `version_file/${file?.hashes.sha1}/download`;
+}

src/routes/__layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import '$lib/styles.postcss'
+    import '$package/styles.postcss'
     import './_internal/styles/prism-one-dark.css'
     import './_internal/styles/gh-markdown.postcss'
     import Sidebar from './_internal/components/Sidebar.svelte'

src/routes/_internal/components/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Button from '$lib/components/Button.svelte'
+    import { Button } from 'omorphia/'
     import IconMoon from 'virtual:icons/heroicons-outline/moon'
     import IconSun from 'virtual:icons/heroicons-outline/sun'
 
@@ -9,7 +9,10 @@
 
 <div class="example">
     <div class="example__preview theme-{theme} base" style:background={background}>
-        <div class="example__preview__options">
+        <slot name="example"/>
+    </div>
+    <div class="example__source">
+        <div class="example__source__options">
             <Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
                 {#if theme === 'light'}
                     <IconMoon/>
@@ -18,9 +21,8 @@
                 {/if}
             </Button>
         </div>
-        <slot name="example"/>
+        <pre class="example__source__code language-svelte"><slot name="code"/></pre>
     </div>
-    <pre class="example__code language-svelte"><slot name="code"/></pre>
 </div>
 
 <style lang="postcss">
@@ -37,6 +39,10 @@
             position: relative;
             justify-content: flex-start;
             z-index: 1;
+        }
+
+        &__source {
+            position: relative;
 
             &__options {
                 position: absolute;
@@ -45,14 +51,17 @@
                 padding: 8px;
                 display: flex;
                 justify-content: flex-end;
-                z-index: 100;
-            }
-        }
 
-        &__code {
+                :global(button) {
-            margin: 0;
+                    color: black;
-            border-radius: var(--rounded-sm-bottom) !important;
+                }
-            background: hsl(220, 13%, 22%);
+            }
+
+            &__code {
+                margin: 0;
+                border-radius: var(--rounded-sm-bottom) !important;
+                background: hsl(220, 13%, 22%);
+            }
         }
     }
 </style>

src/routes/_internal/components/Header.svelte

@@ -11,7 +11,7 @@
         window.addEventListener('scroll', () => {
             let scrollTop = window.pageYOffset || document.documentElement.scrollTop
             if (scrollTop > lastScrollTop && headerElement) {
-                headerElement.style.top = 'calc(var(--header-height) * -1)'
+                headerElement.style.top = '-100%'
             } else if (headerElement) {
                 headerElement.style.top = '0'
             }
@@ -46,7 +46,6 @@
         flex-wrap: wrap;
         padding: 16px 24px;
         position: fixed;
-        height: var(--header-height);
         left: 0;
         right: 0;
         top: 0;
@@ -55,6 +54,10 @@
         box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0, hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset;
         transition: top 0.3s ease-in-out;
 
+        @media not (--sm) {
+            top: 0 !important;
+        }
+
         @media (--sm) {
             padding: 10px 32px;
         }

src/routes/_internal/components/Sidebar.svelte

@@ -3,11 +3,11 @@
 
     const components = Object.keys(import.meta.glob('../../components/**'))
         .map(it => it.replace('../../components/', '').replace('.md', ''))
-        .sort();
+        .sort()
 
     const classes = Object.keys(import.meta.glob('../../classes/**'))
         .map(it => it.replace('../../classes/', '').replace('.md', ''))
-        .sort();
+        .sort()
 
     let slideIn = false
 </script>
@@ -19,6 +19,8 @@
         <a href="/getting-started/icons" class="section__link">Using Icons</a>
         <a href="/getting-started/postcss" class="section__link">PostCSS config</a>
         <a href="/getting-started/css" class="section__link">Writing CSS</a>
+        <a href="/getting-started/illustrations" class="section__link">Illustrations</a>
+        <a href="/getting-started/utils" class="section__link">Built-in utilities</a>
     </div>
 
     <div class="section">
@@ -35,12 +37,17 @@
         {/each}
     </div>
 
-    <button class="sidebar__toggle" on:click={() => slideIn = !slideIn}><IconMenu /></button>
+    <button class="sidebar__toggle" on:click={() => slideIn = !slideIn}>
+        <IconMenu/>
+    </button>
 </nav>
 
 <style lang="postcss">
     :root {
         --sidebar-color: hsl(220, 15%, 40%);
+        --title-color: hsl(216, 10%, 80%);
+        --link-color: hsl(216, 10%, 90%);
+        --scrollbar-thumb-color: hsl(216, 10%, 70%);
     }
 
     .sidebar {
@@ -48,7 +55,7 @@
         flex-direction: column;
         grid-gap: 2rem;
         background-color: var(--sidebar-color);
-        color: hsl(216, 10%, 80%);
+        color: var(--title-color);
         height: 100vh;
         max-height: 100vh;
         overflow-y: auto;
@@ -58,10 +65,24 @@
         left: -100%;
         top: 0;
         z-index: 5;
-        padding: 88px 32px 32px;
+        padding: 88px 32px;
         transition: left 0.2s ease-in-out;
         box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
 
+        &:after {
+            content: "";
+            position: fixed;
+            z-index: 1;
+            bottom: 0;
+            left: 0;
+            pointer-events: none;
+            background-image: linear-gradient(to bottom,
+            transparent,
+            var(--sidebar-color) 90%);
+            width: var(--sidebar-width);
+            height: 88px;
+        }
+
         @media (--md) {
             left: 0;
         }
@@ -78,7 +99,7 @@
             }
 
             &__link {
-                color: hsl(216, 10%, 90%);
+                color: var(--link-color);
                 text-decoration: none;
 
                 &:hover {
@@ -99,7 +120,7 @@
             border-radius: var(--rounded);
             color: white;
             box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
-            transition: left 0.2s cubic-bezier(.38,.52,.37,1.27);
+            transition: left 0.2s cubic-bezier(.38, .52, .37, 1.27);
 
             :global(.icon) {
                 width: 32px;
@@ -118,5 +139,21 @@
                 left: calc(32px + min(70vw, var(--sidebar-width)))
             }
         }
+
+        scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
+
+        &::-webkit-scrollbar {
+            width: 14px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: var(--sidebar-color);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-thumb-color);
+            border-radius: 999px;
+            border: 3px solid var(--sidebar-color);
+        }
     }
 </style>

src/routes/_internal/layout/page.svelte

@@ -14,7 +14,7 @@
     let api
     if ($page.url.pathname.includes('components')) {
         if (import.meta.env.DEV) {
-            import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
+            import(`../../../package/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
         } else {
             api = COMPONENT_API[`${title}.svelte`]
         }

src/routes/_internal/styles/prism-one-dark.css

@@ -119,7 +119,8 @@ pre[class*="language-"] {
 .token.symbol,
 .token.deleted,
 .token.important {
-	color: hsl(355, 65%, 65%);
+	color: hsl(355, 65%, 65%) !important;
+	display: unset;
 }
 
 .token.selector,

src/routes/classes/Actions.md

@@ -0,0 +1,15 @@
+```svelte example
+<script>
+    import { Button } from 'omorphia'
+    import IconHeartSolid from 'virtual:icons/heroicons-solid/heart'
+    import IconCalendar from 'virtual:icons/lucide/calendar'
+</script>
+
+<div class="actions">
+    <Button><IconHeartSolid /> Unfollow </Button>
+    <span class="stat">
+      <IconCalendar/>
+      Updated 12 days ago
+    </span>
+</div>
+```

src/routes/classes/Base.md

@@ -0,0 +1,7 @@
+Base should be applied to a "root" element, like `<body>`, to provide base styles for common things like text. The theme mode, `light-theme`, `dark-theme`, or `oled-theme`, should also be added to this element.
+
+```svelte example
+<div class="base theme-light">
+ ...
+</div>
+```

src/routes/classes/Card.md

@@ -14,9 +14,9 @@
 
 ```svelte example
 <script lang="ts">
-    import Button from "omorphia/components/Button.svelte";
+    import { Button } from "omorphia";
     import IconPencil from 'virtual:icons/heroicons-outline/pencil'
-    import Avatar from "omorphia/components/Avatar.svelte";
+    import { Avatar } from "omorphia";
 </script>
 
 <div class="card">

src/routes/classes/Divider.md

@@ -0,0 +1,9 @@
+```svelte example
+<div class="card">
+    Some words could go here.
+    
+    <hr class="divider" />
+    
+    And some other words could go here.
+</div>
+```

src/routes/classes/InfoTable.md

@@ -0,0 +1,10 @@
+```svelte example
+  <div class="info-table">
+    <span class="info-table__label">License</span>
+    <a href="#mit" class="link">MIT</a>
+    <span class="info-table__label">Project ID</span>
+    <span>11223344</span>
+    <span class="info-table__label">Visibilty</span>
+    <span>Approved</span>
+  </div>
+```

src/routes/classes/Link.md

@@ -1,3 +1,22 @@
+### Single example
+
 ```svelte example
 <a class="link" href="#place"> Go somewhere! </a>
+```
+
+### Group example
+
+```svelte example
+<script>
+  import IconIssues from 'virtual:icons/heroicons-outline/exclamation'
+  import IconCode from 'virtual:icons/heroicons-outline/code'
+  import IconClock from 'virtual:icons/lucide/flag-triangle-right'
+  import IconWiki from 'virtual:icons/heroicons-outline/book-open'
+</script>
+
+<div class="link-group">
+    <a class="link" href="#issues"><IconIssues /> Issues</a>
+    <a class="link" href="#source"><IconCode /> Source</a>
+    <a class="link" href="#wiki"><IconWiki /> Wiki</a>
+</div>
 ```

src/routes/classes/Member.md

@@ -0,0 +1,13 @@
+```svelte example
+<script lang="ts">
+    import { Avatar } from "omorphia";
+</script>
+
+<a class="member" href="#user">
+  <Avatar src="https://avatars1.githubusercontent.com/u/6166773" size="sm" circle/>
+  <div class="member__info">
+    <span class="member__info__link">Prospector</span>
+    <span>Owner</span>
+  </div>
+</a>
+```

src/routes/classes/Stat.md

@@ -0,0 +1,32 @@
+### Single Example
+
+```svelte example
+<script>
+    import IconStar from 'virtual:icons/heroicons-outline/star'
+</script>
+
+<div class="stat">
+  <IconStar/>
+  123K stars
+</div>
+```
+
+### Group Example
+
+```svelte example
+<script>
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
+    import IconHeart from 'virtual:icons/heroicons-outline/heart'
+</script>
+
+<div class="stat-group">
+    <div class="stat">
+      <IconDownload/>
+      4.1B downloads
+    </div>
+    <div class="stat stat--light">
+      <IconHeart/>
+      3 followers
+    </div>
+</div>
+```

src/routes/classes/Tags.md

@@ -0,0 +1,15 @@
+```svelte example
+<script>
+    import IconCarrot from 'virtual:icons/lucide/carrot'
+    import IconGlobe from 'virtual:icons/heroicons-outline/globe'
+</script>
+
+<div class="tag-group">
+    <div class="tag">
+      <IconCarrot/> Food
+    </div>
+    <div class="tag">
+      <IconGlobe/> World generation
+    </div>
+</div>
+```

src/routes/classes/Title.md

@@ -0,0 +1,5 @@
+```svelte example
+<h1 class="title-primary">Tree Mod</h1>
+<h2 class="title-secondary">Information</h2>
+<h3 class="title-tertiary">Members</h3>
+```

src/routes/components/Avatar.md

@@ -2,7 +2,7 @@ Avatars are used for project icons and user profile pictures. Low resolution ima
 
 ```svelte example
 <script lang="ts">
-    import Avatar from "omorphia/components/Avatar.svelte";
+    import { Avatar } from "omorphia";
 </script>
 
 <Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />

src/routes/components/Badge.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import Badge from "omorphia/components/Badge.svelte";
+    import { Badge } from "omorphia";
 </script>
 
 <Badge color="red" label="Tomato" />

src/routes/components/Button.md

@@ -1,10 +1,31 @@
+### Single example
+
 ```svelte example
 <script lang="ts">
-    import Button from "omorphia/components/Button.svelte";
+    import { Button } from "omorphia";
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
 </script>
 
-<Button>Eat cake</Button>
+<Button color="primary"><IconDownload /> Download</Button>
-<Button size="sm" color="primary">Small piece</Button>
+```
-<Button size="lg" color="danger">Big part</Button>
+
-<Button disabled>Nice try</Button>
+### Group example
+
+```svelte example
+<script lang="ts">
+    import { Button } from "omorphia";
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
+</script>
+
+<div class="button-group">
+    <Button>Default button</Button>
+    <Button color="raised">Raised button</Button>
+    <Button color="primary">Primary button</Button>
+    <Button color="primary-light">Light primary button</Button>
+    <Button color="danger">Danger button</Button>
+    <Button color="danger-light">Light danger button</Button>
+    <Button color="transparent">Transparent button</Button>
+    <Button disabled>Disabled button</Button>
+    <Button color="primary"><IconDownload /></Button>
+</div>
 ```

src/routes/components/Checkbox.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import { Checkbox } from "omorphia";
 </script>
 
 <Checkbox>Extra components</Checkbox>
@@ -12,7 +12,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import { Checkbox } from "omorphia";
     import IconCarrot from 'virtual:icons/lucide/carrot'
 </script>
 

src/routes/components/CheckboxList.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import CheckboxList from "omorphia/components/CheckboxList.svelte";
+    import { CheckboxList } from "omorphia";
     import IconSquare from 'virtual:icons/lucide/square'
     import IconCircle from 'virtual:icons/lucide/circle'
     import IconTriangle from 'virtual:icons/lucide/triangle'

src/routes/components/CheckboxVirtualList.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
+    import { CheckboxVirtualList } from "omorphia";
     import IconStar from 'virtual:icons/heroicons-outline/star'
     import uniqueId from 'lodash.uniqueid'
     

src/routes/components/Chips.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Chips from "omorphia/components/Chips.svelte";
+    import { Chips } from "omorphia";
 </script>
 
 <Chips options={[
@@ -22,7 +22,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Chips from "omorphia/components/Chips.svelte";
+    import { Chips } from "omorphia";
 
     let foo = 'modpack'
 </script>

src/routes/components/FormField.md

@@ -0,0 +1,10 @@
+```svelte example
+<script lang="ts">
+    import { FormField } from "omorphia";
+    import { TextInput } from "omorphia";
+</script>
+
+<FormField label="Favorite color">
+    <TextInput placeholder="Enter another color..." />
+</FormField>
+```

src/routes/components/NavRow.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import NavRow from "omorphia/components/NavRow.svelte";
+    import { NavRow } from "omorphia";
 </script>
 
 <NavRow

src/routes/components/Pagination.md

@@ -2,7 +2,7 @@ Use pagination to show a set of page numbers and navigation directions to move t
 
 ```svelte example
 <script lang="ts">
-    import Pagination from "omorphia/components/Pagination.svelte"
+    import { Pagination } from "omorphia"
 </script>
 
 <Pagination page={20} count={50} />

src/routes/components/Select.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import Select from "omorphia/components/Select.svelte";
+    import { Select } from "omorphia";
     
     let sortMethod = "downloads"
 </script>

src/routes/components/TextInput.md

@@ -0,0 +1,8 @@
+```svelte example
+<script lang="ts">
+    import { TextInput } from "omorphia";
+</script>
+
+<TextInput>Favorite color</TextInput>
+<TextInput placeholder="Enter another color..." />
+```

src/routes/getting-started/illustrations.md

@@ -0,0 +1,7 @@
+---
+title: Using illustrations
+---
+
+TODO
+
+Use `.illustration` class.

src/routes/getting-started/utils.md

@@ -0,0 +1,26 @@
+---
+title: Built-in utilities
+---
+
+TODO
+
+## ... ago
+
+## Simplify number
+
+## Markdown & XSS
+
+### Parsers
+
+- sanitize
+- markdown
+- markdownInline
+- markdownXSS
+
+### Markdown
+
+Put parsed HTML into a `<div>` with `class="markdown"`.
+
+## Permissions
+
+## Versions

src/routes/index.md

@@ -26,7 +26,7 @@ Use a component by importing from `omorphia`. For example, use the [Button compo
 
 ```svelte example
 <script lang="ts">
-    import Button from "omorphia/components/Button.svelte"
+    import { Button } from "omorphia"
 </script>
 
 <Button color="primary">I'm a button!</Button>

svelte.config.js

@@ -32,6 +32,7 @@ const config = {
                 Icons({
                     compiler: 'svelte',
                     defaultClass: 'icon',
+                    scale: 1.1428, // 1.1428rem = 16px when root size is 14px
                 }),
                 examples,
                 sveld(),
@@ -39,9 +40,9 @@ const config = {
 
             resolve: {
                 alias: {
-                    $lib: path.resolve('./src/lib'),
+                    $package: path.resolve('./src/package'),
                     $routes: path.resolve('./src/routes'),
-                    omorphia: path.resolve('./src/lib'),
+                    omorphia: path.resolve('./src/package'),
                 },
             },
 

tsconfig.json

@@ -1,10 +1,13 @@
 {
 	"paths": {
 		"omorphia/*": [
-			"src/lib/*"
+			"src/package/*"
 		],
 		"omorphia": [
-			"src/lib"
+			"src/package"
+		],
+		"$package/*": [
+			"src/package/*"
 		],
 		"$routes/*": [
 			"src/routes/*"