Prepare for NPM + Cloudflare pages

.github/workflows/deploy.yml

@@ -1,41 +1,18 @@
 name: Deploy
-on:
+
-  push:
+on: push
-    branches:
-      - main
 
 jobs:
-  deploy:
+  build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - uses: actions/checkout@v2
-        uses: actions/checkout@v2
+      - name: Wait for CF Pages
-
+        id: cf-pages
-      - uses: pnpm/action-setup@v2.1.0
+        uses: WalshyDev/cf-pages-await@v1
         with:
-          version: 6.32.0
+          accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL  }}
-
+          apiKey: ${{ secrets.CF_API_KEY  }}
-      - name: Setup Node
+          accountId: '9ddae624c98677d68d93df6e524a6061'
-        uses: actions/setup-node@v2
+          project: 'knossos'
-        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
-          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

.gitignore

@@ -6,3 +6,4 @@ node_modules
 .env
 .env.*
 !.env.example
+.vercel

.idea/omorphia.iml

@@ -4,6 +4,9 @@
     <exclude-output />
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/.svelte-kit" />
+      <excludeFolder url="file://$MODULE_DIR$/.vercel" />
+      <excludeFolder url="file://$MODULE_DIR$/build" />
+      <excludeFolder url="file://$MODULE_DIR$/package" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

package.json

@@ -1,6 +1,7 @@
 {
   "name": "omorphia",
   "version": "0.0.1-alpha",
+  "description": "A beautiful Svelte component & style library",
   "scripts": {
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
@@ -17,7 +18,6 @@
     "@iconify-json/heroicons-outline": "^1.1.1",
     "@iconify-json/lucide": "^1.1.7",
     "@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",
@@ -45,5 +45,23 @@
     "unplugin-icons": "^0.13.3"
   },
   "type": "module",
-  "svelte": "index.js"
+  "svelte": "index.js",
+  "dependencies": {
+    "@sveltejs/adapter-auto": "^1.0.0-next.31"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/modrinth/omorphia.git"
+  },
+  "keywords": [
+    "UI",
+    "framework",
+    "components",
+    "library"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/modrinth/omorphia/issues"
+  },
+  "homepage": "https://omorphia.modrinth.com"
 }

pnpm-lock.yaml

@@ -5,7 +5,7 @@ specifiers:
   '@iconify-json/heroicons-outline': ^1.1.1
   '@iconify-json/lucide': ^1.1.7
   '@poppanator/sveltekit-svg': ^0.3.1
-  '@sveltejs/adapter-static': ^1.0.0-next.29
+  '@sveltejs/adapter-auto': ^1.0.0-next.31
   '@sveltejs/kit': next
   '@typescript-eslint/eslint-plugin': ^5.10.1
   '@typescript-eslint/parser': ^5.10.1
@@ -32,12 +32,14 @@ specifiers:
   typescript: ~4.6.2
   unplugin-icons: ^0.13.3
 
+dependencies:
+  '@sveltejs/adapter-auto': 1.0.0-next.31
+
 devDependencies:
   '@iconify-json/carbon': 1.1.1
   '@iconify-json/heroicons-outline': 1.1.1
   '@iconify-json/lucide': 1.1.7
   '@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
-  '@sveltejs/adapter-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
@@ -218,6 +220,10 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iarna/toml/2.2.5:
+    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
+    dev: false
+
   /@iconify-json/carbon/1.1.1:
     resolution: {integrity: sha512-ClOYc+82CKlDAKH1tfDTJTzNz4oHhYD04ALA5uemw9PdWXg05yIJb9bxWjSz4UgdUbH5N/yd8s9hNPI3h6jnlg==}
     dependencies:
@@ -291,11 +297,33 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@sveltejs/adapter-static/1.0.0-next.29:
+  /@sveltejs/adapter-auto/1.0.0-next.31:
-    resolution: {integrity: sha512-0hjGnfT3BRyoHnzJ2w0/xL+xICRpKneDTm45ZzggiRrc0r71WJfF6toGeg8N4QUQnj8EJ3Itm453gsS1kt7VUQ==}
+    resolution: {integrity: sha512-N1ZFGxulcSAOJrtdFR567diwbWKUvLrHZiUE9TiEvIahnndeRa50MF9LDg/CuIvpa6fHqz5K827XXrADlPAr9g==}
     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: false
+
+  /@sveltejs/adapter-cloudflare/1.0.0-next.15:
+    resolution: {integrity: sha512-kq3vNFpKmRVgAOfz4HrcleBnUADs++dfVF8S61EAFqNTEvGtOVdJKLql66Pe/uxlY0VxAp1dplxtEDf4/R70lQ==}
+    dependencies:
+      esbuild: 0.14.25
+    dev: false
+
+  /@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
+    dev: false
+
+  /@sveltejs/adapter-vercel/1.0.0-next.46:
+    resolution: {integrity: sha512-6Rwf3kZF6uX2JxDMoYgZWZe5TjVTTWZa57VukdNGjnlAT3CrfsEOBWyskX/8hx7AiYX5fucZaAtYPNZpUmueIA==}
+    dependencies:
+      esbuild: 0.14.25
+    dev: false
 
   /@sveltejs/kit/1.0.0-next.295_svelte@3.46.4:
     resolution: {integrity: sha512-4pO/swXByhU+7bhNikTjh1d4QxAMP9TZ74p7sdPuyJf5cg7Zrfk1nBtaMt0R+8+5j1xfC/XWRcxa3WnhT9bQMA==}
@@ -984,7 +1012,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-android-arm64/0.14.25:
@@ -993,7 +1020,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-darwin-64/0.14.25:
@@ -1002,7 +1028,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-darwin-arm64/0.14.25:
@@ -1011,7 +1036,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-freebsd-64/0.14.25:
@@ -1020,7 +1044,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-freebsd-arm64/0.14.25:
@@ -1029,7 +1052,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-32/0.14.25:
@@ -1038,7 +1060,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-64/0.14.25:
@@ -1047,7 +1068,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-arm/0.14.25:
@@ -1056,7 +1076,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-arm64/0.14.25:
@@ -1065,7 +1084,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-mips64le/0.14.25:
@@ -1074,7 +1092,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-ppc64le/0.14.25:
@@ -1083,7 +1100,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-riscv64/0.14.25:
@@ -1092,7 +1108,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-linux-s390x/0.14.25:
@@ -1101,7 +1116,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-netbsd-64/0.14.25:
@@ -1110,7 +1124,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-openbsd-64/0.14.25:
@@ -1119,7 +1132,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-sunos-64/0.14.25:
@@ -1128,7 +1140,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-32/0.14.25:
@@ -1137,7 +1148,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-64/0.14.25:
@@ -1146,7 +1156,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild-windows-arm64/0.14.25:
@@ -1155,7 +1164,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild/0.14.25:
@@ -1184,7 +1192,6 @@ packages:
       esbuild-windows-32: 0.14.25
       esbuild-windows-64: 0.14.25
       esbuild-windows-arm64: 0.14.25
-    dev: true
 
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -1492,7 +1499,7 @@ packages:
 
   /globalyzer/0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
-    dev: true
+    dev: false
 
   /globby/11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -1508,7 +1515,7 @@ packages:
 
   /globrex/0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
-    dev: true
+    dev: false
 
   /graceful-fs/4.2.9:
     resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
@@ -3036,7 +3043,7 @@ packages:
     dependencies:
       globalyzer: 0.1.0
       globrex: 0.1.2
-    dev: true
+    dev: false
 
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}

src/lib/components/elements/Pagination.svelte

@@ -23,15 +23,18 @@
 
 {#if count > 1}
     <div class="pagination">
-        <Button icon={IconArrowLeft} color="raised" on:click={() => dispatch('change', page - 1)} disabled={page <= 1} title="Last page"/>
+        <Button color="raised" on:click={() => dispatch('change', page - 1)} disabled={page <= 1} title="Last page"><IconArrowLeft height="20px" />
+        </Button>
         {#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} />
+                <Button color={option === page ? 'primary' : 'raised'} on:click={() => dispatch('change', option)} evenPadding={true}>{option}</Button>
             {/if}
         {/each}
-        <Button icon={IconArrowRight} color="raised" on:click={() => dispatch('change', page + 1)} disabled={page >= count} title="Next page" />
+        <Button color="raised" on:click={() => dispatch('change', page + 1)} disabled={page >= count} title="Next page">
+            <IconArrowRight height="20px" />
+        </Button>
     </div>
 {/if}
 

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

@@ -7,7 +7,7 @@
     export let value: string;
 
     export let size: 'sm' | 'md' | 'lg' = 'md'
-    export let color: 'outline' | 'primary' | 'danger';
+    export let color: 'raised' | 'primary' | 'danger';
 
     let className = `btn btn--${size}`;
     className += color && (` btn--${color}`)
@@ -33,7 +33,9 @@
   /* Base button styles */
   .btn {
       position: relative;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       padding: 5px var(--spacer-3);
       font-size: var(--body-font-size);
       font-weight: var(--font-weight-semibold);
@@ -62,11 +64,9 @@
           opacity: 0.75;
       }
 
-      /*
     .icon {
-      margin-right: $spacer-1;
+      margin-right: var(--spacer-1);
       color: var(--color-fg-muted);
-      vertical-align: text-bottom;
 
       &:only-child {
         margin-right: 0;
@@ -82,10 +82,9 @@
     }
 
     .dropdown-caret {
-      margin-left: $spacer-1;
+      margin-left: var(--spacer-1);
       opacity: 0.8;
     }
-  */
   }
 
   /* Default button */
@@ -124,7 +123,7 @@
       background-color: var(--color-btn-bg);
       border-color: var(--color-btn-border);
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-primer-fg-disabled);
       }
     }
@@ -166,7 +165,7 @@
       background-color: var(--color-btn-primary-disabled-bg);
       border-color: var(--color-btn-primary-disabled-border);
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-btn-primary-disabled-text);
       }
     }
@@ -183,7 +182,7 @@
       background-color: var(--color-btn-primary-counter-bg);
     }
 
-    .octicon {
+    :global(.icon) {
       color: var(--color-btn-primary-icon);
     }
   }
@@ -203,7 +202,7 @@
         background-color: var(--color-btn-outline-hover-counter-bg);
       }
 
-      .octicon {
+      :global(.icon) {
         color: inherit;
       }
     }
@@ -245,7 +244,7 @@
   .btn--danger {
     color: var(--color-btn-danger-text);
 
-    .octicon {
+    :global(.icon) {
       color: var(--color-btn-danger-icon);
     }
 
@@ -260,7 +259,7 @@
         background-color: var(--color-btn-danger-hover-counter-bg);
       }
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-btn-danger-hover-icon);
       }
     }
@@ -286,7 +285,7 @@
         background-color: var(--color-btn-danger-disabled-counter-bg);
       }
 
-      .octicon {
+      :global(.icon) {
         color: var(--color-btn-danger-disabled-text);
       }
     }
@@ -306,21 +305,12 @@
   .btn--sm {
     padding: 3px 12px;
     font-size: var(--font-0);
-    line-height: 20px;
-
-      /*
-    .octicon {
-      vertical-align: text-top;
-    }
-    */
   }
 
   .btn--lg {
-    /* padding: $em-spacer-6 1.5em; */
+    font-size: var(--font-size-large);
-    /* line-height: $lh-default; */
+    padding: 8px 16px;
-
+    border-radius: var(--radii-3);
-    font-size: var(--font-2);
-    border-radius: 0.5em;
   }
 
   /* Full-width button */

src/lib/styles/themes/light.postcss

@@ -0,0 +1,3 @@
+.theme-light {
+
+}

src/lib/styles/themes/old.postcss

@@ -1,4 +1,4 @@
-.light-theme {
+.theme-light {
     --color-canvas-default-transparent: rgba(255, 255, 255, 0);
     --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
@@ -426,7 +426,7 @@
     --color-scale-coral-9: #510901;
 }
 
-.dark-theme {
+.theme-dark {
     --color-canvas-default-transparent: rgba(255, 255, 255, 0);
     --color-page-header-bg: #f6f8fa;
     --color-marketing-icon-primary: #218bff;
@@ -1283,11 +1283,11 @@
 }
 
 [data-color-mode=light] {
-    @extend .light-theme;
+    @extend .theme-light;
 }
 
 [data-color-mode=dark] {
-    @extend .dark-theme;
+    @extend .theme-dark;
 }
 
 [data-color-mode=dark-dimmed] {

src/lib/styles/variables/borders.postcss

@@ -5,9 +5,9 @@
   --border: var(--border-width) var(--border-style);
 
   /* Radii */
-  --radii-1: 4px;
+  --radii-1: 8px;
-  --radii-2: 6px;
+  --radii-2: 10px;
-  --radii-3: 8px;
+  --radii-3: 12px;
   --radii-max: 100px;
   --radii: var(--radii-2);
 }

src/lib/styles/variables/typography.postcss

@@ -17,17 +17,16 @@
   --h5-size: 14px;
   --h6-size: 12px;
 
+  --font-size-large: 17px;
   --font-size-small: 12px;
+  --font-size-normal: 14px;
+  --body-line-height: --lh-default;
 
   /* Line heights */
   --lh-condensed-ultra: 1;
   --lh-condensed: 1.25;
   --lh-default: 1.5;
 
-  /* The base body size */
-  --body-font-size: 14px;
-  --body-line-height: --lh-default;
-
   /* Font weights */
   --font-weight-light: 300;
   --font-weight-normal: 400;
@@ -37,5 +36,4 @@
   /* Font stacks */
   --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-
 }

src/routes/_internal/components/Header.svelte

@@ -21,11 +21,13 @@
 </script>
 
 <header class="header" bind:this={headerElement}>
-    <OmorphiaLogo height="32px" width="auto"/>
+    <OmorphiaLogo height="32px" width="32px"/>
     <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://www.npmjs.com/package/omorphia">NPM</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>

svelte.config.js

@@ -1,6 +1,6 @@
 import {mdsvex} from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
-import adapter from '@sveltejs/adapter-static';
+import adapter from '@sveltejs/adapter-auto';
 import preprocess from 'svelte-preprocess';
 import Icons from 'unplugin-icons/vite';
 import svelteSvg from '@poppanator/sveltekit-svg';
@@ -17,20 +17,13 @@ const config = {
     ],
 
     kit: {
-        adapter: adapter({
+        adapter: adapter(),
-            pages: 'build',
-            assets: 'build',
-            fallback: null
-        }),
-        ...(process.env.NODE_ENV !== 'development' ? ({
-            paths: {
-                base: '/omorphia'
-            } }) : ({})),
         vite: {
             plugins: [
                 svelteSvg(),
                 Icons({
                     compiler: 'svelte',
+                    defaultClass: 'icon',
                 }),
             ],
         },

tsconfig.json

@@ -1,43 +1,3 @@
 {
-	"compilerOptions": {
+	"extends": "./.svelte-kit/tsconfig.json"
-		"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/**",
-		"./**"
-	]
-}