Run pnpm format

.eslintrc.cjs

@@ -1,20 +1,20 @@
 module.exports = {
-	root: true,
+    root: true,
-	parser: '@typescript-eslint/parser',
+    parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
+    plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
+    ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+    overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
+    settings: {
-		'svelte3/typescript': () => require('typescript')
+        'svelte3/typescript': () => require('typescript'),
-	},
+    },
-	parserOptions: {
+    parserOptions: {
-		sourceType: 'module',
+        sourceType: 'module',
-		ecmaVersion: 2020
+        ecmaVersion: 2020,
-	},
+    },
-	env: {
+    env: {
-		browser: true,
+        browser: true,
-		es2017: true,
+        es2017: true,
-		node: true
+        node: true,
-	}
+    },
 };

.github/workflows/deploy.yml

@@ -3,16 +3,16 @@ name: Deploy
 on: push
 
 jobs:
-  build:
+    build:
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      - uses: actions/checkout@v2
+            - uses: actions/checkout@v2
-      - name: Wait for CF Pages
+            - name: Wait for CF Pages
-        id: cf-pages
+              id: cf-pages
-        uses: WalshyDev/cf-pages-await@v1
+              uses: WalshyDev/cf-pages-await@v1
-        with:
+              with:
-          accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL  }}
+                  accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL  }}
-          apiKey: ${{ secrets.CF_API_KEY  }}
+                  apiKey: ${{ secrets.CF_API_KEY  }}
-          accountId: '9ddae624c98677d68d93df6e524a6061'
+                  accountId: '9ddae624c98677d68d93df6e524a6061'
-          project: 'omorphia'
+                  project: 'omorphia'
-          githubToken: ${{ secrets.GITHUB_TOKEN }}
+                  githubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -1,50 +1,50 @@
 name: Release
 on:
-  push:
+    push:
-    branches:
+        branches:
-      - 'main'
+            - 'main'
 
 jobs:
-  release:
+    release:
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      - name: Checkout
+            - name: Checkout
-        uses: actions/checkout@v2
+              uses: actions/checkout@v2
 
-      - uses: pnpm/action-setup@v2.1.0
+            - uses: pnpm/action-setup@v2.1.0
-        with:
+              with:
-          version: 6.32.0
+                  version: 6.32.0
 
-      - name: Setup Node
+            - name: Setup Node
-        uses: actions/setup-node@v2
+              uses: actions/setup-node@v2
-        with:
+              with:
-          node-version: '14'
+                  node-version: '14'
-          registry-url: 'https://registry.npmjs.org'
+                  registry-url: 'https://registry.npmjs.org'
 
-      - name: Cache pnpm modules
+            - name: Cache pnpm modules
-        uses: actions/cache@v2
+              uses: actions/cache@v2
-        with:
+              with:
-          path: ~/.pnpm-store
+                  path: ~/.pnpm-store
-          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
+                  restore-keys: |
-            ${{ runner.os }}-
+                      ${{ runner.os }}-
 
-      - name: Install dependencies
+            - name: Install dependencies
-        run: pnpm install
+              run: pnpm install
 
-      - name: Package
+            - name: Package
-        run: |
+              run: |
-          pnpm version patch --commit-hooks false --git-tag-version false
+                  pnpm version patch --commit-hooks false --git-tag-version false
-          pnpm package
+                  pnpm package
 
-      - name: Publish
+            - name: Publish
-        run: |
+              run: |
-          cd package
+                  cd package
-          pnpm publish --no-git-checks --tag alpha
+                  pnpm publish --no-git-checks --tag alpha
-        env:
+              env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - uses: EndBug/add-and-commit@v9
+            - uses: EndBug/add-and-commit@v9
-        with:
+              with:
-          message: 'Bump package version [skip ci]'
+                  message: 'Bump package version [skip ci]'
-          default_author: github_actions
+                  default_author: github_actions

.prettierrc

@@ -1,5 +1,5 @@
 {
-	"singleQuote": true,
+    "singleQuote": true,
-	"printWidth": 100,
+    "printWidth": 100,
     "tabWidth": 4
 }

mdsvex.config.js

@@ -1,28 +1,28 @@
 import { defineMDSveXConfig as defineConfig } from 'mdsvex';
-import examples from 'mdsvexamples'
+import examples from 'mdsvexamples';
 
 const config = defineConfig({
-  extensions: ['.svelte.md', '.md', '.svx'],
+    extensions: ['.svelte.md', '.md', '.svx'],
 
-  smartypants: {
+    smartypants: {
-    dashes: 'oldschool',
+        dashes: 'oldschool',
-  },
+    },
 
-  remarkPlugins: [
+    remarkPlugins: [
-    [
+        [
-      examples,
+            examples,
-      {
+            {
-        defaults: {
+                defaults: {
-          Wrapper: '$routes/_internal/components/Example.svelte'
+                    Wrapper: '$routes/_internal/components/Example.svelte',
-        }
+                },
-      }
+            },
-    ]
+        ],
-  ],
+    ],
-  rehypePlugins: [],
+    rehypePlugins: [],
 
-  layout: {
+    layout: {
-    _: "./src/routes/_internal/layout/page.svelte",
+        _: './src/routes/_internal/layout/page.svelte',
-  }
+    },
 });
 
 export default config;

plugins/sveld.js

@@ -1,55 +1,58 @@
-import {ComponentParser} from 'sveld'
+import { ComponentParser } from 'sveld';
-import * as svelte from 'svelte/compiler'
+import * as svelte from 'svelte/compiler';
-import fs from 'fs/promises'
+import fs from 'fs/promises';
-import path from 'path'
+import path from 'path';
-import {preprocess} from "../src/package/config/svelte.config.js";
+import { preprocess } from '../src/package/config/svelte.config.js';
 
 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])
+                const raw = JSON.parse(src.split('export default ')[1]);
 
-                const data = await parseRaw(raw, id)
+                const data = await parseRaw(raw, id);
 
                 return {
                     code: `export default ${JSON.stringify(data)}`,
-                    map: null
+                    map: null,
-                }
+                };
             }
         },
         // This generates a `COMPONENT_API.json` with sveld in the `/_app` folder on build, which is used by the docs about components (only when built statically)
         async buildStart() {
             const output = {};
 
-            const componentFiles = await fs.readdir(path.resolve('./src/package/components'))
+            const componentFiles = await fs.readdir(path.resolve('./src/package/components'));
 
             for (const fileName of componentFiles) {
-                const filePath = path.resolve('./src/package/components', fileName)
+                const filePath = path.resolve('./src/package/components', fileName);
-                const raw = (await fs.readFile(filePath)).toString()
+                const raw = (await fs.readFile(filePath)).toString();
-                output[fileName] = await parseRaw(raw, filePath)
+                output[fileName] = await parseRaw(raw, filePath);
             }
 
             try {
-                await fs.mkdir(path.resolve('./src/generated'))
+                await fs.mkdir(path.resolve('./src/generated'));
             } catch {
                 // Do nothing, directory already exists
             }
 
-            await fs.writeFile(path.resolve('./src/generated/COMPONENT_API.json'), JSON.stringify(output))
+            await fs.writeFile(
+                path.resolve('./src/generated/COMPONENT_API.json'),
+                JSON.stringify(output)
+            );
         },
-    }
+    };
 }
 
 async function parseRaw(raw, filePath) {
     let { code } = await svelte.preprocess(raw, preprocess, {
-        filename: filePath
+        filename: filePath,
-    })
+    });
     return new ComponentParser({
-        verbose: false
+        verbose: false,
     }).parseSvelteComponent(code, {
         filePath,
-        moduleName: filePath
+        moduleName: filePath,
-    })
+    });
-}
+}

postcss.config.cjs

@@ -1 +1 @@
-module.exports = require('./src/package/config/postcss.config.cjs')
+module.exports = require('./src/package/config/postcss.config.cjs');

src/app.d.ts

@@ -4,8 +4,8 @@
 // See https://kit.svelte.dev/docs/types#the-app-namespace
 // for information about these interfaces
 declare namespace App {
-	// interface Locals {}
+    // interface Locals {}
-	// interface Platform {}
+    // interface Platform {}
-	// interface Session {}
+    // interface Session {}
-	// interface Stuff {}
+    // interface Stuff {}
 }

src/app.html

@@ -1,19 +1,19 @@
 <!DOCTYPE html>
 <html lang="en" data-color-mode="light">
-	<head>
+    <head>
-		<meta charset="utf-8" />
+        <meta charset="utf-8" />
-		<meta name="description" content="" />
+        <meta name="description" content="" />
-		<link rel="icon" href="%svelte.assets%/assets/omorphia.png" />
+        <link rel="icon" href="%svelte.assets%/assets/omorphia.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<meta name="theme-color" content="#CF1971">
+        <meta name="theme-color" content="#CF1971" />
-		<meta name="twitter:card" content="summary">
+        <meta name="twitter:card" content="summary" />
-		<meta name="twitter:image" content="https://omorphia.modrinth.com/assets/omorphia.png">
+        <meta name="twitter:image" content="https://omorphia.modrinth.com/assets/omorphia.png" />
-		<meta property="og:site_name" content="Modrinth" />
+        <meta property="og:site_name" content="Modrinth" />
 
-		%svelte.head%
+        %svelte.head%
-	</head>
+    </head>
-	<body>
+    <body>
-		%svelte.body%
+        %svelte.body%
-	</body>
+    </body>
 </html>

src/global.d.ts

@@ -1 +1 @@
-/// <reference types="vite-plugin-sveld" />
+/// <reference types="vite-plugin-sveld" />

src/package/config/postcss.config.cjs

@@ -17,15 +17,16 @@ const config = {
                                 '--xl': '(min-width: 1280px)',
                             },
                         },
-                    ]
+                    ],
-                }
+                },
-            }
+            },
         }),
         require('postcss-pxtorem'),
         require('autoprefixer'),
-        process.env.NODE_ENV === 'development' && require('cssnano')({
+        process.env.NODE_ENV === 'development' &&
-            preset: 'default',
+            require('cssnano')({
-        })
+                preset: 'default',
+            }),
     ],
 };
 

src/package/plugins/generator/outputs/landingPage.ts

@@ -1,7 +1,5 @@
 import { fetch } from 'undici';
 import { promises as fs } from 'fs';
-import sharp from 'sharp';
-import FastAverageColor from 'fast-average-color';
 import cliProgress from 'cli-progress';
 
 export async function landingPage(API_URL: string) {

src/package/styles.postcss

@@ -1,4 +1,4 @@
 @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";
+@import-glob "./styles/classes/**.postcss";

src/package/styles/classes/actions.postcss

@@ -17,4 +17,4 @@
         align-items: flex-start;
         margin-left: unset;
     }
-}
+}

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

@@ -2,4 +2,4 @@
     display: flex;
     grid-gap: 0.5rem;
     flex-wrap: wrap;
-}
+}

src/package/styles/classes/card.postcss

@@ -98,4 +98,4 @@
     p {
         line-height: 130%;
     }
-}
+}

src/package/styles/classes/divider.postcss

@@ -3,4 +3,4 @@
     border: none;
     border-top: 1px solid var(--color-divider);
     width: 100%;
-}
+}

src/package/styles/classes/illustration.postcss

@@ -11,6 +11,6 @@
 
     &__description {
         font-size: 1.2rem;
-        color: var(--color-text-light)
+        color: var(--color-text-light);
     }
-}
+}

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

@@ -8,4 +8,4 @@
         color: var(--color-text-lightest);
         font-weight: var(--font-weight-medium);
     }
-}
+}

src/package/styles/classes/link.postcss

@@ -20,7 +20,6 @@
 
         &:hover {
             color: var(--color-link);
-
         }
     }
-}
+}

src/package/styles/classes/markdown.postcss

@@ -134,4 +134,4 @@
         margin: 0;
         padding: 0;
     }
-}
+}

src/package/styles/classes/member.postcss

@@ -10,4 +10,4 @@
             font-weight: var(--font-weight-medium);
         }
     }
-}
+}

src/package/styles/classes/tag.postcss

@@ -15,4 +15,4 @@
     flex-wrap: wrap;
     margin-top: auto;
     grid-gap: 0.25rem 0.6rem;
-}
+}

src/package/styles/classes/title.postcss

@@ -11,4 +11,4 @@
 .title-tertiary {
     font-size: 16px;
     font-weight: var(--font-weight-bold);
-}
+}

src/package/styles/normalize.postcss

@@ -55,8 +55,8 @@ ul {
 }
 
 .icon {
-  height: auto;
+    height: auto;
-  width: 16px;
+    width: 16px;
-  min-width: 16px;
+    min-width: 16px;
-  aspect-ratio: 1 / 1;
+    aspect-ratio: 1 / 1;
-}
+}

src/package/styles/themes/base.postcss

@@ -6,7 +6,7 @@
     --rounded-max: 999999999px;
 
     --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
-    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+        Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 
     --font-size-nm: 1rem; /* 16px */
     --font-size-xl: 1.5rem; /* 24px */

src/package/styles/themes/dark.postcss

@@ -16,7 +16,7 @@
     --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
     --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
     --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+        hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
     --shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
 
     /* Text colors */

src/package/styles/themes/light.postcss

@@ -16,7 +16,7 @@
     --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
     --shadow-raised: 0px 2px 4px hsla(221, 39%, 11%, 0.1);
     --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
+        hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
     --shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
 
     /* Text colors */

src/package/styles/variables/borders.postcss

@@ -1,16 +1,16 @@
 :root {
-  /* Borders */
+    /* Borders */
-  --border-width: 1px;
+    --border-width: 1px;
-  --border-style: solid;
+    --border-style: solid;
-  --border: var(--border-width) var(--border-style);
+    --border: var(--border-width) var(--border-style);
 
-  /* Rounded radii */
+    /* Rounded radii */
-  --rounded-sm: 8px;
+    --rounded-sm: 8px;
-  --rounded: 10px;
+    --rounded: 10px;
-  --rounded-lg: 12px;
+    --rounded-lg: 12px;
-  --rounded-max: 100px;
+    --rounded-max: 100px;
-  --rounded-top: var(--rounded) var(--rounded) 0 0;
+    --rounded-top: var(--rounded) var(--rounded) 0 0;
-  --rounded-bottom: 0 0 var(--rounded) var(--rounded);
+    --rounded-bottom: 0 0 var(--rounded) var(--rounded);
-  --rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
+    --rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
-  --rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
+    --rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
-}
+}

src/package/styles/variables/spacing.postcss

@@ -1,7 +1,6 @@
 :root {
-
+    /* these are values for the display CSS property */
-         /* these are values for the display CSS property */
+    /*
-        /*
        --display-values: (
                block,
                flex,
@@ -22,7 +21,7 @@
        );
        */
 
-        /*
+    /*
         These are our margin and padding utility spacers. The default step size we
         use is 8px. This gives us a key of:
             0 => 0px
@@ -32,18 +31,18 @@
             4 => 24px
             5 => 32px
             6 => 40px */
-        --spacer: 8px;
+    --spacer: 8px;
 
-        /* Our spacing scale */
+    /* Our spacing scale */
-        --spacer-0: 0; /* 0 */
+    --spacer-0: 0; /* 0 */
-        --spacer-1: calc(var(--spacer) * 0.5); /* 4px */
+    --spacer-1: calc(var(--spacer) * 0.5); /* 4px */
-        --spacer-2: --spacer; /* 8px */
+    --spacer-2: --spacer; /* 8px */
-        --spacer-3: calc(var(--spacer) * 2); /* 16px */
+    --spacer-3: calc(var(--spacer) * 2); /* 16px */
-        --spacer-4: calc(var(--spacer) * 3); /* 24px */
+    --spacer-4: calc(var(--spacer) * 3); /* 24px */
-        --spacer-5: calc(var(--spacer) * 4); /* 32px */
+    --spacer-5: calc(var(--spacer) * 4); /* 32px */
-        --spacer-6: calc(var(--spacer) * 5); /* 40px */
+    --spacer-6: calc(var(--spacer) * 5); /* 40px */
 
-        /*
+    /*
         /* The list of spacer values
         --spacers: (
                 --spacer-0,
@@ -210,4 +209,4 @@
 @custom-media --sm (min-width: 544px);
 @custom-media --md (min-width: 768px);
 @custom-media --lg (min-width: 1012px);
-@custom-media --xl (min-width: 544px);
+@custom-media --xl (min-width: 544px);

src/package/styles/variables/typography.postcss

@@ -1,38 +1,39 @@
 :root {
-  /* Heading sizes - mobile */
+    /* Heading sizes - mobile */
-  /* h4-h6 remain the same size on both mobile & desktop */
+    /* h4-h6 remain the same size on both mobile & desktop */
-  --h00-size-mobile: 40px;
+    --h00-size-mobile: 40px;
-  --h0-size-mobile: 32px;
+    --h0-size-mobile: 32px;
-  --h1-size-mobile: 26px;
+    --h1-size-mobile: 26px;
-  --h2-size-mobile: 22px;
+    --h2-size-mobile: 22px;
-  --h3-size-mobile: 18px;
+    --h3-size-mobile: 18px;
 
-  /* Heading sizes - desktop */
+    /* Heading sizes - desktop */
-  --h00-size: 48px;
+    --h00-size: 48px;
-  --h0-size: 40px;
+    --h0-size: 40px;
-  --h1-size: 32px;
+    --h1-size: 32px;
-  --h2-size: 24px;
+    --h2-size: 24px;
-  --h3-size: 20px;
+    --h3-size: 20px;
-  --h4-size: 16px;
+    --h4-size: 16px;
-  --h5-size: 14px;
+    --h5-size: 14px;
-  --h6-size: 12px;
+    --h6-size: 12px;
 
-  --font-size-lg: 19px;
+    --font-size-lg: 19px;
-  --font-size-sm: 13px;
+    --font-size-sm: 13px;
-  --font-size: 16px;
+    --font-size: 16px;
 
-  /* Line heights */
+    /* Line heights */
-  --lh-condensed-ultra: 1;
+    --lh-condensed-ultra: 1;
-  --lh-condensed: 1.25;
+    --lh-condensed: 1.25;
-  --lh-default: 1.5;
+    --lh-default: 1.5;
 
-  /* Font weights */
+    /* Font weights */
-  --font-weight-light: 300;
+    --font-weight-light: 300;
-  --font-weight-normal: 400;
+    --font-weight-normal: 400;
-  --font-weight-semibold: 500;
+    --font-weight-semibold: 500;
-  --font-weight-bold: 600;
+    --font-weight-bold: 600;
 
-  /* Font stacks */
+    /* Font stacks */
-  --body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    --body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+        'Apple Color Emoji', 'Segoe UI Emoji';
-}
+    --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}

src/package/utils/ago.ts

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

src/package/utils/classCombine.ts

@@ -1,3 +1,3 @@
 export function classCombine(names) {
-    return names.filter(name => name && !name.includes('undefined')).join(' ')
+    return names.filter((name) => name && !name.includes('undefined')).join(' ');
-}
+}

src/package/utils/index.ts

@@ -1,4 +1,4 @@
 export { ago } from './ago';
 export { simplify } from './number';
 export { Permissions } from './permissions';
-export { formatVersions } from './versions';
+export { formatVersions } from './versions';

src/package/utils/number.ts

@@ -1,40 +0,0 @@
-/**
- * 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

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

src/package/utils/permissions.ts

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

src/package/utils/uniqueId.ts

@@ -3,4 +3,4 @@ let idCounter = 0;
 export function uniqueId(prefix = ''): string {
     const id = ++idCounter;
     return prefix + id;
-}
+}

src/package/utils/versions.ts

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

src/routes/_internal/components/Sidebar.svelte

@@ -28,6 +28,7 @@ import { page } from '$app/stores';
       <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>
+      <a href="/getting-started/generator" class="section__link">Generator plugin</a>
     </div>
 
     <div class="section">

src/routes/_internal/styles/gh-markdown.postcss

@@ -27,12 +27,14 @@
         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) {
+    &: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) {
+    &: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;
     }
 
@@ -119,12 +121,14 @@
         padding-top: 0;
     }
 
-    &:where(body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child) {
+    &: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) {
+    &: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;
     }
@@ -383,4 +387,4 @@
     &:where(p) {
         line-height: 1.5;
     }
-}
+}

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

@@ -28,77 +28,77 @@
  * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
  */
 
-code[class*="language-"],
+code[class*='language-'],
-pre[class*="language-"] {
+pre[class*='language-'] {
-	background: hsl(220, 13%, 18%);
+    background: hsl(220, 13%, 18%);
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
-	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-	font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+    font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-	direction: ltr;
+    direction: ltr;
-	text-align: left;
+    text-align: left;
-	white-space: pre;
+    white-space: pre;
-	word-spacing: normal;
+    word-spacing: normal;
-	word-break: normal;
+    word-break: normal;
-	line-height: 1.5;
+    line-height: 1.5;
-	-moz-tab-size: 2;
+    -moz-tab-size: 2;
-	-o-tab-size: 2;
+    -o-tab-size: 2;
-	tab-size: 2;
+    tab-size: 2;
-	-webkit-hyphens: none;
+    -webkit-hyphens: none;
-	-moz-hyphens: none;
+    -moz-hyphens: none;
-	-ms-hyphens: none;
+    -ms-hyphens: none;
-	hyphens: none;
+    hyphens: none;
 }
 
 /* Selection */
-code[class*="language-"]::-moz-selection,
+code[class*='language-']::-moz-selection,
-code[class*="language-"] *::-moz-selection,
+code[class*='language-'] *::-moz-selection,
-pre[class*="language-"] *::-moz-selection {
+pre[class*='language-'] *::-moz-selection {
-	background: hsl(220, 13%, 28%);
+    background: hsl(220, 13%, 28%);
-	color: inherit;
+    color: inherit;
-	text-shadow: none;
+    text-shadow: none;
 }
 
-code[class*="language-"]::selection,
+code[class*='language-']::selection,
-code[class*="language-"] *::selection,
+code[class*='language-'] *::selection,
-pre[class*="language-"] *::selection {
+pre[class*='language-'] *::selection {
-	background: hsl(220, 13%, 28%);
+    background: hsl(220, 13%, 28%);
-	color: inherit;
+    color: inherit;
-	text-shadow: none;
+    text-shadow: none;
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*='language-'] {
-	padding: 16px;
+    padding: 16px;
-	margin: 0.5em 0;
+    margin: 0.5em 0;
-	overflow: auto;
+    overflow: auto;
-	border-radius: var(--rounded);
+    border-radius: var(--rounded);
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
+:not(pre) > code[class*='language-'] {
-	padding: 0.2em 0.3em;
+    padding: 0.2em 0.3em;
-	border-radius: 0.3em;
+    border-radius: 0.3em;
-	white-space: normal;
+    white-space: normal;
 }
 
 /* Print */
 @media print {
-	code[class*="language-"],
+    code[class*='language-'],
-	pre[class*="language-"] {
+    pre[class*='language-'] {
-		text-shadow: none;
+        text-shadow: none;
-	}
+    }
 }
 
 .token.comment,
 .token.prolog,
 .token.cdata {
-	color: hsl(220, 10%, 40%);
+    color: hsl(220, 10%, 40%);
 }
 
 .token.doctype,
 .token.punctuation,
 .token.entity {
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
 }
 
 .token.attr-name,
@@ -107,11 +107,11 @@ pre[class*="language-"] {
 .token.constant,
 .token.number,
 .token.atrule {
-	color: hsl(29, 54%, 61%);
+    color: hsl(29, 54%, 61%);
 }
 
 .token.keyword {
-	color: hsl(286, 60%, 67%);
+    color: hsl(286, 60%, 67%);
 }
 
 .token.property,
@@ -119,8 +119,8 @@ pre[class*="language-"] {
 .token.symbol,
 .token.deleted,
 .token.important {
-	color: hsl(355, 65%, 65%) !important;
+    color: hsl(355, 65%, 65%) !important;
-	display: unset;
+    display: unset;
 }
 
 .token.selector,
@@ -131,123 +131,126 @@ pre[class*="language-"] {
 .token.regex,
 .token.attr-value,
 .token.attr-value > .token.punctuation {
-	color: hsl(95, 38%, 62%);
+    color: hsl(95, 38%, 62%);
 }
 
 .token.variable,
 .token.operator,
 .token.function {
-	color: hsl(207, 82%, 66%);
+    color: hsl(207, 82%, 66%);
 }
 
 .token.url {
-	color: hsl(187, 47%, 55%);
+    color: hsl(187, 47%, 55%);
 }
 
 /* HTML overrides */
 .token.attr-value > .token.punctuation.attr-equals,
 .token.special-attr > .token.attr-value > .token.value.css {
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
 }
 
 /* CSS overrides */
 .language-css .token.selector {
-	color: hsl(355, 65%, 65%);
+    color: hsl(355, 65%, 65%);
 }
 
 .language-css .token.property {
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
 }
 
 .language-css .token.function,
 .language-css .token.url > .token.function {
-	color: hsl(187, 47%, 55%);
+    color: hsl(187, 47%, 55%);
 }
 
 .language-css .token.url > .token.string.url {
-	color: hsl(95, 38%, 62%);
+    color: hsl(95, 38%, 62%);
 }
 
 .language-css .token.important,
 .language-css .token.atrule .token.rule {
-	color: hsl(286, 60%, 67%);
+    color: hsl(286, 60%, 67%);
 }
 
 /* JS overrides */
 .language-javascript .token.operator {
-	color: hsl(286, 60%, 67%);
+    color: hsl(286, 60%, 67%);
 }
 
-.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
+.language-javascript
-	color: hsl(5, 48%, 51%);
+    .token.template-string
+    > .token.interpolation
+    > .token.interpolation-punctuation.punctuation {
+    color: hsl(5, 48%, 51%);
 }
 
 /* JSON overrides */
 .language-json .token.operator {
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
 }
 
 .language-json .token.null.keyword {
-	color: hsl(29, 54%, 61%);
+    color: hsl(29, 54%, 61%);
 }
 
 /* MD overrides */
 .language-markdown .token.url,
 .language-markdown .token.url > .token.operator,
 .language-markdown .token.url-reference.url > .token.string {
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
 }
 
 .language-markdown .token.url > .token.content {
-	color: hsl(207, 82%, 66%);
+    color: hsl(207, 82%, 66%);
 }
 
 .language-markdown .token.url > .token.url,
 .language-markdown .token.url-reference.url {
-	color: hsl(187, 47%, 55%);
+    color: hsl(187, 47%, 55%);
 }
 
 .language-markdown .token.blockquote.punctuation,
 .language-markdown .token.hr.punctuation {
-	color: hsl(220, 10%, 40%);
+    color: hsl(220, 10%, 40%);
-	font-style: italic;
+    font-style: italic;
 }
 
 .language-markdown .token.code-snippet {
-	color: hsl(95, 38%, 62%);
+    color: hsl(95, 38%, 62%);
 }
 
 .language-markdown .token.bold .token.content {
-	color: hsl(29, 54%, 61%);
+    color: hsl(29, 54%, 61%);
 }
 
 .language-markdown .token.italic .token.content {
-	color: hsl(286, 60%, 67%);
+    color: hsl(286, 60%, 67%);
 }
 
 .language-markdown .token.strike .token.content,
 .language-markdown .token.strike .token.punctuation,
 .language-markdown .token.list.punctuation,
 .language-markdown .token.title.important > .token.punctuation {
-	color: hsl(355, 65%, 65%);
+    color: hsl(355, 65%, 65%);
 }
 
 /* General */
 .token.bold {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 .token.comment,
 .token.italic {
-	font-style: italic;
+    font-style: italic;
 }
 
 .token.entity {
-	cursor: help;
+    cursor: help;
 }
 
 .token.namespace {
-	opacity: 0.8;
+    opacity: 0.8;
 }
 
 /* Plugin overrides */
@@ -258,24 +261,24 @@ pre[class*="language-"] {
 .token.token.cr:before,
 .token.token.lf:before,
 .token.token.space:before {
-	color: hsla(220, 14%, 71%, 0.15);
+    color: hsla(220, 14%, 71%, 0.15);
-	text-shadow: none;
+    text-shadow: none;
 }
 
 /* Toolbar plugin overrides */
 /* Space out all buttons and move them away from the right edge of the code block */
 div.code-toolbar > .toolbar.toolbar > .toolbar-item {
-	margin-right: 0.4em;
+    margin-right: 0.4em;
 }
 
 /* Styling the buttons */
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
-	background: hsl(220, 13%, 26%);
+    background: hsl(220, 13%, 26%);
-	color: hsl(220, 9%, 55%);
+    color: hsl(220, 9%, 55%);
-	padding: 0.1em 0.4em;
+    padding: 0.1em 0.4em;
-	border-radius: 0.3em;
+    border-radius: 0.3em;
 }
 
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
@@ -284,43 +287,43 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
 div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
-	background: hsl(220, 13%, 28%);
+    background: hsl(220, 13%, 28%);
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
 }
 
 /* Line Highlight plugin overrides */
 /* The highlighted line itself */
 .line-highlight.line-highlight {
-	background: hsla(220, 100%, 80%, 0.04);
+    background: hsla(220, 100%, 80%, 0.04);
 }
 
 /* Default line numbers in Line Highlight plugin */
 .line-highlight.line-highlight:before,
 .line-highlight.line-highlight[data-end]:after {
-	background: hsl(220, 13%, 26%);
+    background: hsl(220, 13%, 26%);
-	color: hsl(220, 14%, 71%);
+    color: hsl(220, 14%, 71%);
-	padding: 0.1em 0.6em;
+    padding: 0.1em 0.6em;
-	border-radius: 0.3em;
+    border-radius: 0.3em;
-	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
 }
 
 /* Hovering over a linkable line number (in the gutter area) */
 /* Requires Line Numbers plugin as well */
 pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
-	background-color: hsla(220, 100%, 80%, 0.04);
+    background-color: hsla(220, 100%, 80%, 0.04);
 }
 
 /* Line Numbers and Command Line plugins overrides */
 /* Line separating gutter from coding area */
 .line-numbers.line-numbers .line-numbers-rows,
 .command-line .command-line-prompt {
-	border-right-color: hsla(220, 14%, 71%, 0.15);
+    border-right-color: hsla(220, 14%, 71%, 0.15);
 }
 
 /* Stuff in the gutter */
 .line-numbers .line-numbers-rows > span:before,
 .command-line .command-line-prompt > span:before {
-	color: hsl(220, 14%, 45%);
+    color: hsl(220, 14%, 45%);
 }
 
 /* Match Braces plugin overrides */
@@ -328,65 +331,65 @@ pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > spa
 .rainbow-braces .token.token.punctuation.brace-level-1,
 .rainbow-braces .token.token.punctuation.brace-level-5,
 .rainbow-braces .token.token.punctuation.brace-level-9 {
-	color: hsl(355, 65%, 65%);
+    color: hsl(355, 65%, 65%);
 }
 
 .rainbow-braces .token.token.punctuation.brace-level-2,
 .rainbow-braces .token.token.punctuation.brace-level-6,
 .rainbow-braces .token.token.punctuation.brace-level-10 {
-	color: hsl(95, 38%, 62%);
+    color: hsl(95, 38%, 62%);
 }
 
 .rainbow-braces .token.token.punctuation.brace-level-3,
 .rainbow-braces .token.token.punctuation.brace-level-7,
 .rainbow-braces .token.token.punctuation.brace-level-11 {
-	color: hsl(207, 82%, 66%);
+    color: hsl(207, 82%, 66%);
 }
 
 .rainbow-braces .token.token.punctuation.brace-level-4,
 .rainbow-braces .token.token.punctuation.brace-level-8,
 .rainbow-braces .token.token.punctuation.brace-level-12 {
-	color: hsl(286, 60%, 67%);
+    color: hsl(286, 60%, 67%);
 }
 
 /* Diff Highlight plugin overrides */
 /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
 pre.diff-highlight > code .token.token.deleted:not(.prefix),
 pre > code.diff-highlight .token.token.deleted:not(.prefix) {
-	background-color: hsla(353, 100%, 66%, 0.15);
+    background-color: hsla(353, 100%, 66%, 0.15);
 }
 
 pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
 pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
-	background-color: hsla(353, 95%, 66%, 0.25);
+    background-color: hsla(353, 95%, 66%, 0.25);
 }
 
 pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
 pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
 pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
-	background-color: hsla(353, 95%, 66%, 0.25);
+    background-color: hsla(353, 95%, 66%, 0.25);
 }
 
 pre.diff-highlight > code .token.token.inserted:not(.prefix),
 pre > code.diff-highlight .token.token.inserted:not(.prefix) {
-	background-color: hsla(137, 100%, 55%, 0.15);
+    background-color: hsla(137, 100%, 55%, 0.15);
 }
 
 pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
 pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
-	background-color: hsla(135, 73%, 55%, 0.25);
+    background-color: hsla(135, 73%, 55%, 0.25);
 }
 
 pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
 pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
 pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
-	background-color: hsla(135, 73%, 55%, 0.25);
+    background-color: hsla(135, 73%, 55%, 0.25);
 }
 
 /* Previewers plugin overrides */
@@ -394,48 +397,48 @@ pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
 /* Border around popup */
 .prism-previewer.prism-previewer:before,
 .prism-previewer-gradient.prism-previewer-gradient div {
-	border-color: hsl(224, 13%, 17%);
+    border-color: hsl(224, 13%, 17%);
 }
 
 /* Angle and time should remain as circles and are hence not included */
 .prism-previewer-color.prism-previewer-color:before,
 .prism-previewer-gradient.prism-previewer-gradient div,
 .prism-previewer-easing.prism-previewer-easing:before {
-	border-radius: 0.3em;
+    border-radius: 0.3em;
 }
 
 /* Triangles pointing to the code */
 .prism-previewer.prism-previewer:after {
-	border-top-color: hsl(224, 13%, 17%);
+    border-top-color: hsl(224, 13%, 17%);
 }
 
 .prism-previewer-flipped.prism-previewer-flipped.after {
-	border-bottom-color: hsl(224, 13%, 17%);
+    border-bottom-color: hsl(224, 13%, 17%);
 }
 
 /* Background colour within the popup */
 .prism-previewer-angle.prism-previewer-angle:before,
 .prism-previewer-time.prism-previewer-time:before,
 .prism-previewer-easing.prism-previewer-easing {
-	background: hsl(219, 13%, 22%);
+    background: hsl(219, 13%, 22%);
 }
 
 /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
 /* For time, this is the alternate colour */
 .prism-previewer-angle.prism-previewer-angle circle,
 .prism-previewer-time.prism-previewer-time circle {
-	stroke: hsl(220, 14%, 71%);
+    stroke: hsl(220, 14%, 71%);
-	stroke-opacity: 1;
+    stroke-opacity: 1;
 }
 
 /* Stroke colours of the handle, direction point, and vector itself */
 .prism-previewer-easing.prism-previewer-easing circle,
 .prism-previewer-easing.prism-previewer-easing path,
 .prism-previewer-easing.prism-previewer-easing line {
-	stroke: hsl(220, 14%, 71%);
+    stroke: hsl(220, 14%, 71%);
 }
 
 /* Fill colour of the handle */
 .prism-previewer-easing.prism-previewer-easing circle {
-	fill: transparent;
+    fill: transparent;
 }

src/routes/classes/InfoTable.md

@@ -7,4 +7,4 @@
     <span class="info-table__label">Visibilty</span>
     <span>Approved</span>
   </div>
-```
+```

src/routes/classes/Link.md

@@ -19,4 +19,4 @@
     <a class="link" href="#source"><IconCode /> Source</a>
     <a class="link" href="#wiki"><IconWiki /> Wiki</a>
 </div>
-```
+```

src/routes/components/Badge.md

@@ -7,4 +7,4 @@
 <Badge color="yellow" label="Squash" />
 <Badge color="green" label="Lettuce" />
 <Badge label="Onion" />
-```
+```

src/routes/components/CheckboxList.md

@@ -4,11 +4,11 @@
     import IconSquare from 'virtual:icons/lucide/square'
     import IconCircle from 'virtual:icons/lucide/circle'
     import IconTriangle from 'virtual:icons/lucide/triangle'
-    
+
     let selected = []
 </script>
 
-<CheckboxList 
+<CheckboxList
     bind:value={selected}
     options={[
         {
@@ -26,7 +26,7 @@
             icon: IconSquare,
             value: 'SQU',
         },
-    ]} 
+    ]}
 />
 
 Selected: {selected}

src/routes/components/CheckboxVirtualList.md

@@ -3,18 +3,18 @@
     import { CheckboxVirtualList } from "omorphia";
     import IconStar from 'virtual:icons/heroicons-outline/star'
     import { uniqueId } from 'omorphia/utils/uniqueId'
-    
+
     let options = Array(100).fill({})
         .map(option => ({
             label: 'Star-' + uniqueId(),
             icon: IconStar,
             value: uniqueId(),
         }))
-    
+
     let selected = ['2', '6']
 </script>
 
-<CheckboxVirtualList 
+<CheckboxVirtualList
     bind:value={selected}
     {options}
 />

src/routes/components/Chips.md

@@ -17,7 +17,6 @@
 />
 ```
 
-
 ### Force an option to be selected with `neverEmpty`
 
 ```svelte example raised

src/routes/components/NavRow.md

@@ -23,4 +23,4 @@
     ]}>
     Click for fun
 </NavRow>
-```
+```

src/routes/components/Pagination.md

@@ -6,4 +6,4 @@ Use pagination to show a set of page numbers and navigation directions to move t
 </script>
 
 <Pagination page={20} count={50} />
-```
+```

src/routes/components/Select.md

@@ -1,19 +1,19 @@
 ```svelte example raised
 <script lang="ts">
     import { Select } from "omorphia";
-    
+
     let sortMethod = "downloads"
 </script>
 
 <Select
-    color="raised" 
+    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}
 />
 ```

src/routes/components/Slider.md

@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Slider } from "omorphia";
 </script>

src/routes/getting-started/configure.md

@@ -4,24 +4,20 @@ title: Configure
 
 To make use of the built-in icons, styles, and plugins in omorphia, you will need to update your project's config files.
 
-## SvelteKit 
+## SvelteKit
 
 Add the following parts to your `svelte.config.js` file:
 
 ```js
-import { preprocess, plugins } from 'omorphia/config/svelte.config'
+import { preprocess, plugins } from 'omorphia/config/svelte.config';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    preprocess: [
+    preprocess: [preprocess],
-        preprocess,
-    ],
 
     kit: {
         vite: {
-            plugins: [
+            plugins: [...plugins],
-                ...plugins,
-            ],
         },
     },
 };
@@ -36,5 +32,5 @@ Create a `postcss.config.cjs` file in the root of your project.
 Add the following line to that file:
 
 ```js
-module.exports = require('omorphia/config/postcss.config.cjs')
+module.exports = require('omorphia/config/postcss.config.cjs');
-```
+```

src/routes/getting-started/css.md

@@ -4,8 +4,8 @@ title: Writing CSS
 
 TODO
 
-Use `px` measurements. 
+Use `px` measurements.
 
 Use `hsl` for colors.
 
-Use `margin-inline` (x) and `margin-block` (y). Use `inline` & `block` for `padding` too.
+Use `margin-inline` (x) and `margin-block` (y). Use `inline` & `block` for `padding` too.

src/routes/getting-started/illustrations.md

@@ -18,4 +18,4 @@ Import the SVG in the `<script>` of your svelte file, and treat the illustration
 </script>
 
 <NoData />
-```
+```

src/routes/getting-started/utils.md

@@ -12,10 +12,10 @@ TODO
 
 ### Parsers
 
-- sanitize
+-   sanitize
-- markdown
+-   markdown
-- markdownInline
+-   markdownInline
-- markdownXSS
+-   markdownXSS
 
 ### Markdown
 

src/routes/index.md

@@ -38,4 +38,4 @@ For more information on each component, check out the pages on the sidebar navig
 
 ### Using icons and styles
 
-Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
+Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.

svelte.config.js

@@ -1,19 +1,16 @@
-import {mdsvex} from 'mdsvex';
+import { mdsvex } from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
 import adapter from '@sveltejs/adapter-static';
-import examples from 'mdsvexamples/vite'
+import examples from 'mdsvexamples/vite';
-import sveld from './plugins/sveld.js'
+import sveld from './plugins/sveld.js';
-import path from "path";
+import path from 'path';
-import { preprocess, plugins } from './src/package/config/svelte.config.js'
+import { preprocess, plugins } from './src/package/config/svelte.config.js';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     extensions: ['.svelte', ...mdsvexConfig.extensions],
 
-    preprocess: [
+    preprocess: [preprocess, mdsvex(mdsvexConfig)],
-        preprocess,
-        mdsvex(mdsvexConfig),
-    ],
 
     kit: {
         adapter: adapter(),
@@ -38,13 +35,13 @@ const config = {
 
             build: {
                 rollupOptions: {
-                    external: '/_app/COMPONENT_API.json'
+                    external: '/_app/COMPONENT_API.json',
-                }
+                },
-            }
+            },
         },
         files: {
             lib: 'src/package',
-        }
+        },
     },
 };