diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 000000000..507e78068 --- /dev/null +++ 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 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 000000000..90db06163 --- /dev/null +++ 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 }} diff --git a/.idea/modules.xml b/.idea/modules.xml index a66d44ea0..8a6541ab6 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -2,7 +2,7 @@ - + \ No newline at end of file diff --git a/.idea/kleos.iml b/.idea/omorphia.iml similarity index 100% rename from .idea/kleos.iml rename to .idea/omorphia.iml diff --git a/README.md b/README.md index 7ae86410c..a56eeff2d 100644 --- 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 diff --git a/mdsvex.config.js b/mdsvex.config.js index 3162d782c..d46083269 100644 --- 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; diff --git a/package.json b/package.json index 255ef5c2a..151d454b5 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d69f434c7..f81cc28fd 100644 --- 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'} diff --git a/src/app.html b/src/app.html index f41394532..3969c038b 100644 --- a/src/app.html +++ b/src/app.html @@ -3,11 +3,11 @@ - + %svelte.head% -
%svelte.body%
+ %svelte.body% diff --git a/src/lib/components/elements/Pagination.svelte b/src/lib/components/elements/Pagination.svelte new file mode 100644 index 000000000..e7149d312 --- /dev/null +++ b/src/lib/components/elements/Pagination.svelte @@ -0,0 +1,59 @@ + + +{#if count > 1} + +{/if} + + diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 815bb1222..c8de20464 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,12 +1,14 @@
+
@@ -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; diff --git a/src/routes/_docs/Header.svelte b/src/routes/_docs/Header.svelte deleted file mode 100644 index cff8cd276..000000000 --- a/src/routes/_docs/Header.svelte +++ /dev/null @@ -1,4 +0,0 @@ -
-
Kleos
-
- diff --git a/src/routes/_internal/assets/omorphia.svg b/src/routes/_internal/assets/omorphia.svg new file mode 100644 index 000000000..50a459a4b --- /dev/null +++ b/src/routes/_internal/assets/omorphia.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/_internal/components/Header.svelte b/src/routes/_internal/components/Header.svelte new file mode 100644 index 000000000..aa52c9538 --- /dev/null +++ b/src/routes/_internal/components/Header.svelte @@ -0,0 +1,79 @@ + + +
+ +
Omorphia
+
+ Modrinth.com + + + +
+
+ + + \ No newline at end of file diff --git a/src/routes/_docs/Sidebar.svelte b/src/routes/_internal/components/Sidebar.svelte similarity index 78% rename from src/routes/_docs/Sidebar.svelte rename to src/routes/_internal/components/Sidebar.svelte index 5e3fdf558..099414294 100644 --- a/src/routes/_docs/Sidebar.svelte +++ b/src/routes/_internal/components/Sidebar.svelte @@ -8,7 +8,7 @@
Components - {#each ['buttons'] as component} + {#each ['buttons', 'pagination'] as component} {component} {/each}
@@ -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; + } } } } diff --git a/src/routes/_internal/layout/page.svelte b/src/routes/_internal/layout/page.svelte new file mode 100644 index 000000000..83941e9ab --- /dev/null +++ b/src/routes/_internal/layout/page.svelte @@ -0,0 +1,33 @@ + + + + {title ? `${title} - Omorphia` : 'Omorphia'} + + + + + \ No newline at end of file diff --git a/src/routes/_docs/styles/gh-markdown.css b/src/routes/_internal/styles/gh-markdown.css similarity index 95% rename from src/routes/_docs/styles/gh-markdown.css rename to src/routes/_internal/styles/gh-markdown.css index 400a406fd..46d9d3112 100644 --- a/src/routes/_docs/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); } \ No newline at end of file diff --git a/src/routes/_docs/styles/prism-one-dark.css b/src/routes/_internal/styles/prism-one-dark.css similarity index 100% rename from src/routes/_docs/styles/prism-one-dark.css rename to src/routes/_internal/styles/prism-one-dark.css diff --git a/src/routes/components/buttons.md b/src/routes/components/buttons.md index 8bfee9356..450b229e0 100644 --- a/src/routes/components/buttons.md +++ b/src/routes/components/buttons.md @@ -1,13 +1,11 @@ +--- +title: Buttons +--- + - - Buttons - Kleos - - -# Buttons - diff --git a/src/routes/components/pagination.md b/src/routes/components/pagination.md new file mode 100644 index 000000000..80885f728 --- /dev/null +++ b/src/routes/components/pagination.md @@ -0,0 +1,11 @@ +--- +title: Pagination +--- + + + +TODO + + \ No newline at end of file diff --git a/src/routes/getting-started/css.md b/src/routes/getting-started/css.md index 104b140b0..1331b7b7f 100644 --- a/src/routes/getting-started/css.md +++ b/src/routes/getting-started/css.md @@ -1,8 +1,6 @@ - - CSS - Kleos - - -# CSS Configuration +--- +title: CSS Configuration +--- Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files. diff --git a/src/routes/getting-started/icons.md b/src/routes/getting-started/icons.md index 4d80f6063..94863033d 100644 --- a/src/routes/getting-started/icons.md +++ b/src/routes/getting-started/icons.md @@ -1,13 +1,11 @@ +--- +title: Icons +--- + - - Icons - Kleos - - -# Icons - Use [unplugin-icons](https://github.com/antfu/unplugin-icons) to import icons as Svelte components. ## Installation diff --git a/src/routes/index.md b/src/routes/index.md index dcfc27fae..73d0b633d 100644 --- a/src/routes/index.md +++ b/src/routes/index.md @@ -1,30 +1,28 @@ - - Introduction - Kleos - +--- +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. \ No newline at end of file diff --git a/static/.nojekyll b/static/.nojekyll new file mode 100644 index 000000000..e69de29bb diff --git a/static/assets/omorphia.png b/static/assets/omorphia.png new file mode 100644 index 000000000..1c09e0c0b Binary files /dev/null and b/static/assets/omorphia.png differ diff --git a/static/favicon.png b/static/favicon.png deleted file mode 100644 index 825b9e65a..000000000 Binary files a/static/favicon.png and /dev/null differ diff --git a/svelte.config.js b/svelte.config.js index 8fa7ede20..3ab04d93c 100644 --- 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; diff --git a/tsconfig.json b/tsconfig.json index 81ff9770c..d5c53a9d0 100644 --- 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/**", + "./**" + ] +} \ No newline at end of file