docs: Improve header + sidebar

docs: Create workflows lib: Start pagination
2022-03-12 01:34:09 -08:00
parent de536d7305
commit b69ff6ca8a
28 changed files with 445 additions and 108 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,41 @@
+name: Deploy
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - uses: pnpm/action-setup@v2.1.0
+        with:
+          version: 6.32.0
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4.2.5
+        with:
+          branch: gh-pages
+          folder: build
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -0,0 +1,44 @@
+name: Release
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - uses: pnpm/action-setup@v2.1.0
+        with:
+          version: 6.32.0
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Package
+        run: pnpm package
+
+      - name: Publish
+        run: |
+          cd package
+          pnpm publish --no-git-checks
+
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -2,7 +2,7 @@
 <project version="4">
  <component name="ProjectModuleManager">
    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/kleos.iml" filepath="$PROJECT_DIR$/.idea/kleos.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/omorphia.iml" filepath="$PROJECT_DIR$/.idea/omorphia.iml" />
    </modules>
  </component>
 </project>
--- a/.idea/omorphia.iml
+++ b/.idea/omorphia.iml
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Kleos
+# Omorphia

 *The Modrinth component library, in Svelte*

@@ -29,13 +29,13 @@ When creating a component, start with [GitHub's Primer styles](https://github.co
 Install the package:

 ```bash
-npm install kleos # or pnpm inst...
+npm install omorphia # or pnpm inst...
 ```

 Import a component:
 ```svelte
 <script>
-    import { Button } from "kleos"
+    import { Button } from "omorphia"
 </script>

 <Button> Click me! </Button>
--- a/mdsvex.config.js
+++ b/mdsvex.config.js
@@ -9,6 +9,10 @@ const config = defineConfig({

  remarkPlugins: [],
  rehypePlugins: [],
+
+  layout: {
+    _: "./src/routes/_internal/layout/page.svelte",
+  }
 });

 export default config;
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "kelos",
+  "name": "omorphia",
  "version": "0.0.1-alpha",
  "scripts": {
    "dev": "svelte-kit dev",
@@ -13,9 +13,11 @@
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
+    "@iconify-json/carbon": "^1.1.1",
    "@iconify-json/heroicons-outline": "^1.1.1",
    "@iconify-json/lucide": "^1.1.7",
-    "@sveltejs/adapter-auto": "next",
+    "@poppanator/sveltekit-svg": "^0.3.1",
+    "@sveltejs/adapter-static": "^1.0.0-next.29",
    "@sveltejs/kit": "next",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,11 @@
 lockfileVersion: 5.3

 specifiers:
+  '@iconify-json/carbon': ^1.1.1
  '@iconify-json/heroicons-outline': ^1.1.1
  '@iconify-json/lucide': ^1.1.7
-  '@sveltejs/adapter-auto': next
+  '@poppanator/sveltekit-svg': ^0.3.1
+  '@sveltejs/adapter-static': ^1.0.0-next.29
  '@sveltejs/kit': next
  '@typescript-eslint/eslint-plugin': ^5.10.1
  '@typescript-eslint/parser': ^5.10.1
@@ -31,9 +33,11 @@ specifiers:
  unplugin-icons: ^0.13.3

 devDependencies:
+  '@iconify-json/carbon': 1.1.1
  '@iconify-json/heroicons-outline': 1.1.1
  '@iconify-json/lucide': 1.1.7
-  '@sveltejs/adapter-auto': 1.0.0-next.31
+  '@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
+  '@sveltejs/adapter-static': 1.0.0-next.29
  '@sveltejs/kit': 1.0.0-next.295_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
@@ -214,8 +218,10 @@ packages:
    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
    dev: true

-  /@iarna/toml/2.2.5:
-    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
+  /@iconify-json/carbon/1.1.1:
+    resolution: {integrity: sha512-ClOYc+82CKlDAKH1tfDTJTzNz4oHhYD04ALA5uemw9PdWXg05yIJb9bxWjSz4UgdUbH5N/yd8s9hNPI3h6jnlg==}
+    dependencies:
+      '@iconify/types': 1.0.12
    dev: true

  /@iconify-json/heroicons-outline/1.1.1:
@@ -268,6 +274,15 @@ packages:
      fastq: 1.13.0
    dev: true

+  /@poppanator/sveltekit-svg/0.3.1_svelte@3.46.4:
+    resolution: {integrity: sha512-atwGnEYD3S18hrwvM4S55sAB2EKzbvLPVBWoL9KSVqPgbSfRvKQb6aBrA7gWOQVz3uoCwDujUvvlbxvzYxmthw==}
+    peerDependencies:
+      svelte: 3.x
+    dependencies:
+      svelte: 3.46.4
+      svgo: 2.8.0
+    dev: true
+
  /@rollup/pluginutils/4.2.0:
    resolution: {integrity: sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==}
    engines: {node: '>= 8.0.0'}
@@ -276,34 +291,12 @@ packages:
      picomatch: 2.3.1
    dev: true

-  /@sveltejs/adapter-auto/1.0.0-next.31:
-    resolution: {integrity: sha512-N1ZFGxulcSAOJrtdFR567diwbWKUvLrHZiUE9TiEvIahnndeRa50MF9LDg/CuIvpa6fHqz5K827XXrADlPAr9g==}
+  /@sveltejs/adapter-static/1.0.0-next.29:
+    resolution: {integrity: sha512-0hjGnfT3BRyoHnzJ2w0/xL+xICRpKneDTm45ZzggiRrc0r71WJfF6toGeg8N4QUQnj8EJ3Itm453gsS1kt7VUQ==}
    dependencies:
-      '@sveltejs/adapter-cloudflare': 1.0.0-next.15
-      '@sveltejs/adapter-netlify': 1.0.0-next.50
-      '@sveltejs/adapter-vercel': 1.0.0-next.46
-    dev: true
-
-  /@sveltejs/adapter-cloudflare/1.0.0-next.15:
-    resolution: {integrity: sha512-kq3vNFpKmRVgAOfz4HrcleBnUADs++dfVF8S61EAFqNTEvGtOVdJKLql66Pe/uxlY0VxAp1dplxtEDf4/R70lQ==}
-    dependencies:
-      esbuild: 0.14.25
-    dev: true
-
-  /@sveltejs/adapter-netlify/1.0.0-next.50:
-    resolution: {integrity: sha512-lpHvjcHiC77SPyLp7OjhenJF9KYfKsXlmUua7icNh0Hc8SKtRQf0dn+a1Zy77AslikvOX7/4HZE8zPIyIvYYqw==}
-    dependencies:
-      '@iarna/toml': 2.2.5
-      esbuild: 0.14.25
      tiny-glob: 0.2.9
    dev: true

-  /@sveltejs/adapter-vercel/1.0.0-next.46:
-    resolution: {integrity: sha512-6Rwf3kZF6uX2JxDMoYgZWZe5TjVTTWZa57VukdNGjnlAT3CrfsEOBWyskX/8hx7AiYX5fucZaAtYPNZpUmueIA==}
-    dependencies:
-      esbuild: 0.14.25
-    dev: true
-
  /@sveltejs/kit/1.0.0-next.295_svelte@3.46.4:
    resolution: {integrity: sha512-4pO/swXByhU+7bhNikTjh1d4QxAMP9TZ74p7sdPuyJf5cg7Zrfk1nBtaMt0R+8+5j1xfC/XWRcxa3WnhT9bQMA==}
    engines: {node: '>=14.13'}
--- a/src/app.html
+++ b/src/app.html
@@ -3,11 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="" />
-		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<link rel="icon" href="%svelte.assets%/assets/omorphia.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>
 	<body>
-		<div>%svelte.body%</div>
+		%svelte.body%
 	</body>
 </html>
--- a/src/lib/components/elements/Pagination.svelte
+++ b/src/lib/components/elements/Pagination.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    // TODO: Modify to match new button props
+
+    import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
+    import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'
+    import IconMinus from 'virtual:icons/heroicons-outline/minus'
+    import Button from "./buttons/Button.svelte";
+    import { createEventDispatcher } from 'svelte'
+
+    export let page: number;
+    export let count: number;
+
+    $: options = count > 4
+        ? page + 3 >= count
+            ? [1, '-', count - 4, count - 3, count - 2, count - 1, count]
+            : page > 4
+                ? [1, '-', page - 1, page, page + 1, '-', count]
+                : [1, 2, 3, 4, 5, '-', count]
+        : Array.from({ length: count }, (_, i) => i + 1)
+
+    const dispatch = createEventDispatcher();
+</script>
+
+{#if count > 1}
+    <div class="pagination">
+        <Button icon={IconArrowLeft} color="raised" on:click={() => dispatch('change', page - 1)} disabled={page <= 1} title="Last page"/>
+        {#each options as option}
+            {#if option === '-'}
+                <IconMinus class="pagination__dash" />
+            {:else}
+                <Button label={option} color={option === page ? 'brand' : 'raised'} on:click={() => dispatch('change', option)} evenPadding={true} />
+            {/if}
+        {/each}
+        <Button icon={IconArrowRight} color="raised" on:click={() => dispatch('change', page + 1)} disabled={page >= count} title="Next page" />
+    </div>
+{/if}
+
+<style lang="postcss">
+    .pagination {
+        align-self: center;
+        display: flex;
+        grid-gap: 0.5rem;
+        align-items: center;
+
+        :global(&__dash) {
+            margin: 0 0.5rem;
+            width: 1rem;
+            height: 1rem;
+        }
+
+        @media (width <= 500px) {
+            grid-gap: 0.25rem;
+
+            :global(> *:nth-child(4)), :global(> *:nth-child(6)) {
+                display: none;
+            }
+        }
+    }
+</style>
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
    import "$lib/styles/variables.postcss"
    import "$lib/styles/themes.postcss"
-    import "./_docs/styles/prism-one-dark.css"
-    import "./_docs/styles/gh-markdown.css"
-    import Sidebar from "./_docs/Sidebar.svelte"
+    import "./_internal/styles/prism-one-dark.css"
+    import "./_internal/styles/gh-markdown.css"
+    import Sidebar from "./_internal/components/Sidebar.svelte"
+    import Header from './_internal/components/Header.svelte'
 </script>

 <div class="app">
+    <Header />
    <Sidebar />
    <main class="app__content">
        <slot />
@@ -18,28 +20,34 @@
        margin: 0;
        font-size: var(--body-font-size);
        font-family: var(--body-font);
+        overflow-y: scroll;
+        --accent-color: hsl(331, 60%, 45%);
+        --accent-color-transparent: hsla(331, 60%, 45%, 0.15);
    }

    .app {
        display: grid;
        min-height: 100vh;
-        --sidebar-size: 250px;
-        padding-left: var(--sidebar-size);
+        overflow: hidden;
+        --sidebar-width: 250px;
+        --header-height: 56px;
        @media (width <= 500px) {
            display: flex;
            flex-direction: column;
        }
-        overflow: hidden;
+
+        :global(a) {
+            color: var(--accent-color);
+            &:hover {
+                text-decoration: underline;
+            }
+        }

        &__content {
-            padding: 5rem max(8vw, 1rem);
-            max-width: 100%;
+            padding: var(--header-height) 0 0 var(--sidebar-width);
            overflow-x: hidden;
            overflow-y: auto;
-
-            :global(a) {
-                color: hsl(216, 50%, 50%);
-            }
+            background-color: hsl(220, 13%, 91%);

            :global(h1) {
                font-size: 54px;
--- a/src/routes/_docs/Header.svelte
+++ b/src/routes/_docs/Header.svelte
@@ -1,4 +0,0 @@
-<header>
-    <div class="site-title">Kleos</div>
-</header>
-
--- a/src/routes/_internal/assets/omorphia.svg
+++ b/src/routes/_internal/assets/omorphia.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
+  <path stroke="var(--accent-color)" stroke-width="2" d="M15.933 18.394c-3.261-.286-11.074-1.466-14.644-8.469m22.422 0c-2.114 4.291-10.8 11.927-16.017 13.026m6.18-21.87C10.268 3.06 5.496 9.72 5.633 14.388m17.732-5.664c-2.232-1.888-9.562-5.15-16.943 1.716m8.652-3.947c1.888 1.087 5.492 3.288 4.806 8.369m-9.956 2.787c-.286-1.888-.103-6.213 2.918-8.41m4.12 4.977a2.43 2.43 0 0 0-.075-.4m0 0c-.528-1.965-2.354-5.652-6.963-5.908m6.963 5.908c-2.856 2.601-6.11 3.11-7.65 2.975m7.65-2.975c.752-.685 1.702-2.374 2.36-3.376m-8.98 2.575c.687.744 3.468 2.369 4.978 2.231M24 12.5C24 18.851 18.851 24 12.5 24S1 18.851 1 12.5 6.149 1 12.5 1 24 6.149 24 12.5Z"/>
+</svg>
--- a/src/routes/_internal/components/Header.svelte
+++ b/src/routes/_internal/components/Header.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+    import OmorphiaLogo from '../assets/omorphia.svg'
+    import IconLogoGithub from 'virtual:icons/carbon/logo-github'
+    import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2'
+    import { onMount } from 'svelte'
+
+    let headerElement
+
+    onMount(() => {
+        let lastScrollTop: number
+        window.addEventListener('scroll', function () {
+            let scrollTop = window.pageYOffset || document.documentElement.scrollTop
+            if (scrollTop > lastScrollTop) {
+                headerElement.style.top = 'calc(var(--header-height) * -1)'
+            } else {
+                headerElement.style.top = '0'
+            }
+            lastScrollTop = scrollTop
+        })
+    })
+</script>
+
+<header class="header" bind:this={headerElement}>
+    <OmorphiaLogo height="32px" width="auto"/>
+    <div class="header__title">Omorphia</div>
+    <div class="header__links">
+        <a href="https://modrinth.com">Modrinth.com</a>
+        <span class="spacer-dot"></span>
+        <a href="https://rewrite.modrinth.com/discord"><IconChat /></a>
+        <a href="https://github.com/modrinth/omorphia"><IconLogoGithub /></a>
+    </div>
+</header>
+
+
+<style lang="postcss">
+    .header {
+        display: flex;
+        grid-gap: 10px;
+        align-items: center;
+        padding: 0 32px;
+        position: fixed;
+        height: var(--header-height);
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 10;
+        background-color: hsl(0, 0%, 100%);
+        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;
+
+        &__title {
+            font-size: 20px;
+            font-weight: 600;
+        }
+
+        &__links {
+            margin-left: auto;
+            display: flex;
+            grid-gap: 16px;
+            align-items: center;
+
+            :global(svg) {
+                height: 22px;
+                width: auto;
+            }
+
+            a:not(:hover) {
+                color: unset;
+            }
+        }
+    }
+
+    .spacer-dot {
+        background-color: hsla(0, 0%, 0%, 0.2);
+        border-radius: 999px;
+        width: 5px;
+        aspect-ratio: 1 / 1;
+    }
+</style>
--- a/src/routes/_internal/components/Sidebar.svelte
+++ b/src/routes/_internal/components/Sidebar.svelte
@@ -8,7 +8,7 @@

    <div class="section">
        <span class="section__title">Components</span>
-        {#each ['buttons'] as component}
+        {#each ['buttons', 'pagination'] as component}
            <a href="/components/{component}" class="section__link">{component}</a>
        {/each}
    </div>
@@ -19,11 +19,11 @@
        display: flex;
        flex-direction: column;
        grid-gap: 2rem;
-        background-color: hsl(216, 10%, 30%);
+        background-color: hsl(220, 15%, 40%);
        color: hsl(216, 10%, 80%);
-        padding: 1.5rem;
+        padding: 5.5rem 1.5rem 1.5rem;
        height: 100vh;
-        width: calc(var(--sidebar-size) - 3rem);
+        width: calc(var(--sidebar-width) - 3rem);
        position: fixed;
        left: 0;
        top: 0;
@@ -42,6 +42,11 @@
                text-transform: capitalize;
                color: hsl(216, 10%, 90%);
                text-decoration: none;
+
+                &:hover {
+                    color: white;
+                    text-decoration: underline;
+                }
            }
        }
    }
--- a/src/routes/_internal/layout/page.svelte
+++ b/src/routes/_internal/layout/page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import IconPencil from 'virtual:icons/heroicons-outline/pencil'
+    import { page } from '$app/stores'
+
+    export let title
+    let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
+</script>
+
+<svelte:head>
+    <title>{title ? `${title} - Omorphia` : 'Omorphia'}</title>
+</svelte:head>
+
+<article>
+    {#if title}<h1>{title}</h1>{/if}
+    <a class="edit-link" href={pageUrl}>
+        <IconPencil/>
+        Edit this page on GitHub</a>
+    <slot/>
+</article>
+
+<style lang="postcss">
+    article {
+        max-width: 800px;
+        padding: 5rem max(8vw, 1rem);
+    }
+
+    .edit-link {
+        display: flex;
+        align-items: center;
+        grid-gap: 8px;
+        margin-bottom: 64px;
+    }
+</style>
--- a/src/routes/_internal/styles/gh-markdown.css
+++ b/src/routes/_internal/styles/gh-markdown.css
@@ -364,4 +364,21 @@ pre {
 pre code, pre tt {
    background-color: transparent;
    border: none;
+}
+
+/* Custom styles */
+
+h1 {
+    font-weight: 600;
+}
+
+h2 {
+    font-weight: 500;
+}
+
+blockquote {
+    border-left: 4px solid var(--accent-color);
+    padding: 15px 15px;
+    color: unset;
+    background-color: var(--accent-color-transparent);
 }
--- a/src/routes/_internal/styles/prism-one-dark.css
+++ b/src/routes/_internal/styles/prism-one-dark.css
--- a/src/routes/components/buttons.md
+++ b/src/routes/components/buttons.md
@@ -1,13 +1,11 @@
+---
+title: Buttons
+---
+
 <script lang="ts">
    import Button from "$lib/components/elements/buttons/Button.svelte"
 </script>

-<svelte:head>
-    <title>Buttons - Kleos</title>
-</svelte:head>
-
-# Buttons
-
 <Button>Eat cake</Button>

 <Button size="sm" color="primary">Small piece</Button>
--- a/src/routes/components/pagination.md
+++ b/src/routes/components/pagination.md
@@ -0,0 +1,11 @@
+---
+title: Pagination
+---
+
+<script lang="ts">
+    import Pagination from "$lib/components/elements/Pagination.svelte"
+</script>
+
+TODO
+
+<Pagination page={20} count={50} />
--- a/src/routes/getting-started/css.md
+++ b/src/routes/getting-started/css.md
@@ -1,8 +1,6 @@
-<svelte:head>
-    <title>CSS - Kleos</title>
-</svelte:head>
-
-# CSS Configuration
+---
+title: CSS Configuration
+---

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

--- a/src/routes/getting-started/icons.md
+++ b/src/routes/getting-started/icons.md
@@ -1,13 +1,11 @@
+---
+title: Icons
+---
+
 <script>
      import IconHeart from 'virtual:icons/heroicons-outline/heart'
 </script>

-<svelte:head>
-    <title>Icons - Kleos</title>
-</svelte:head>
-
-# Icons
-
 Use [unplugin-icons](https://github.com/antfu/unplugin-icons) to import icons as Svelte components.

 ## Installation
--- a/src/routes/index.md
+++ b/src/routes/index.md
@@ -1,30 +1,28 @@
-<svelte:head>
-    <title>Introduction - Kleos</title>
-</svelte:head>
+---
+title: Introduction
+---

-# Introduction
+## What is Omorphia?

-> Kleos is in early development, and not ready for use in any application. Contribute to it on [GitHub](https://github.com/modrinth/kleos).
+> Omorphia is in early development, and not ready for use in any application. Contribute to it on [GitHub](https://github.com/modrinth/omorphia).

-### What is Kleos?
-
-Kleos is Modrinth's style and reusable component library for use in all of its frontend applications, including [knossos](https://github.com/modrinth/knossos) (modrinth.com), [theseus](https://github.com/modrinth/theseus) (launcher), and planned projects such as Modrinth's in-house auth and ad-server.
+Omorphia is Modrinth's style and reusable component library for use in all of its frontend applications, including [knossos](https://github.com/modrinth/knossos) (modrinth.com), [theseus](https://github.com/modrinth/theseus) (launcher), and planned projects such as Modrinth's in-house auth and ad-server.

 It uses [Svelte](https://svelte.dev/) to deliver the best performance with the least boilerplate.

-### Getting started
+## Getting started

-Adding Kleos to your project is as easy as:
+Adding Omorphia to your project is as easy as:

 ```bash
-pnpm add kleos
+pnpm add omorphia
 ```

-#### Components
+### Components

 Import a component with:
 ```js
-import { Button } from "kleos"
+import { Button } from "omorphia"
 ```

 Then, use it in your HTML:
@@ -35,8 +33,8 @@ Then, use it in your HTML:

 For more information on each component, check out the pages on the sidebar navigation.

-> To get Svelte language support in your code editor, [use this list.](https://sveltesociety.dev/tools#editor-support)
+> To get Svelte language support in your code editor, [use this list of extensions.](https://sveltesociety.dev/tools#editor-support)

-#### Icons, Styles, and more
+### Using icons and styles

 Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
--- a/static/.nojekyll
+++ b/static/.nojekyll
--- a/static/assets/omorphia.png
+++ b/static/assets/omorphia.png
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,30 +1,40 @@
-import { mdsvex } from 'mdsvex';
+import {mdsvex} from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import preprocess from 'svelte-preprocess';
 import Icons from 'unplugin-icons/vite';
+import svelteSvg from '@poppanator/sveltekit-svg';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  extensions: ['.svelte', ...mdsvexConfig.extensions],
+    extensions: ['.svelte', ...mdsvexConfig.extensions],

-  preprocess: [
-    preprocess({
-      postcss: true,
-    }),
-    mdsvex(mdsvexConfig),
-  ],
-
-  kit: {
-    adapter: adapter(),
-    vite: {
-      plugins: [
-        Icons({
-          compiler: 'svelte',
+    preprocess: [
+        preprocess({
+            postcss: true,
        }),
-      ],
+        mdsvex(mdsvexConfig),
+    ],
+
+    kit: {
+        adapter: adapter({
+            pages: 'build',
+            assets: 'build',
+            fallback: null
+        }),
+        ...(process.env.NODE_ENV !== 'development' ? ({
+            paths: {
+                base: '/omorphia'
+            } }) : ({})),
+        vite: {
+            plugins: [
+                svelteSvg(),
+                Icons({
+                    compiler: 'svelte',
+                }),
+            ],
+        },
    },
-  },
 };

 export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,43 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json"
-}
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"module": "es2020",
+		"lib": [
+			"es2020",
+			"DOM"
+		],
+		"target": "es2020",
+		"importsNotUsedAsValues": "error",
+		"preserveValueImports": true,
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": "..",
+		"allowJs": true,
+		"checkJs": true,
+		"paths": {
+			"$lib": [
+				"src/lib"
+			],
+			"$lib/*": [
+				"src/lib/*"
+			]
+		},
+		"rootDirs": [
+			"..",
+			"./types"
+		]
+	},
+	"include": [
+		"../src/**/*.js",
+		"../src/**/*.ts",
+		"../src/**/*.svelte"
+	],
+	"exclude": [
+		"../node_modules/**",
+		"./**"
+	]
+}