Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
venashial 2022-04-02 16:17:58 -07:00
parent 6b54c342aa
commit 85b7147927
82 changed files with 1189 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

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

4
package.json
View File

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

4
plugins/sveld.js
View File

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

196
pnpm-lock.yaml generated
View File

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

53
src/lib/components/Input.svelte
View File

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

0
src/lib/index.ts
View File

7
src/lib/styles/classes/link.postcss
View File

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

8
src/lib/styles/classes/title.postcss
View File

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

2
src/lib/components/Avatar.svelte → src/package/components/Avatar.svelte
View File

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

0
src/lib/components/Badge.svelte → src/package/components/Badge.svelte
View File

16
src/lib/components/Button.svelte → src/package/components/Button.svelte
View File

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

0
src/lib/components/Checkbox.svelte → src/package/components/Checkbox.svelte
View File

1
src/lib/components/CheckboxList.svelte → src/package/components/CheckboxList.svelte
View File

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

2
src/lib/components/CheckboxVirtualList.svelte → src/package/components/CheckboxVirtualList.svelte
View File

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

0
src/lib/components/Chips.svelte → src/package/components/Chips.svelte
View File

24
src/package/components/FormField.svelte Normal file
View File

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

0
src/lib/components/NavRow.svelte → src/package/components/NavRow.svelte
View File

0
src/lib/components/Pagination.svelte → src/package/components/Pagination.svelte
View File

0
src/lib/components/Select.svelte → src/package/components/Select.svelte
View File

46
src/package/components/TextInput.svelte Normal file
View File

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

26
src/package/index.ts Normal file
View File

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

0
src/lib/styles.postcss → src/package/styles.postcss
View File

20
src/package/styles/classes/actions.postcss Normal file
View File

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

0
src/lib/styles/classes/base.postcss → src/package/styles/classes/base.postcss
View File

5
src/package/styles/classes/button-group.postcss Normal file
View File

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

4
src/lib/styles/classes/card.postcss → src/package/styles/classes/card.postcss
View File

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

5
src/package/styles/classes/divider.postcss Normal file
View File

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

16
src/package/styles/classes/illustration.postcss Normal file
View File

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

11
src/package/styles/classes/info-table.postcss Normal file
View File

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

26
src/package/styles/classes/link.postcss Normal file
View File

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

137
src/package/styles/classes/markdown.postcss Normal file
View File

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

13
src/package/styles/classes/member.postcss Normal file
View File

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

23
src/package/styles/classes/stat.postcss Normal file
View File

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

18
src/package/styles/classes/tag.postcss Normal file
View File

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

14
src/package/styles/classes/title.postcss Normal file
View File

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

0
src/lib/styles/normalize.postcss → src/package/styles/normalize.postcss
View File

0
src/lib/styles/themes/base.postcss → src/package/styles/themes/base.postcss
View File

0
src/lib/styles/themes/dark.postcss → src/package/styles/themes/dark.postcss
View File

0
src/lib/styles/themes/light.postcss → src/package/styles/themes/light.postcss
View File

0
src/lib/styles/themes/oled.postcss → src/package/styles/themes/oled.postcss
View File

0
src/lib/styles/variables/borders.postcss → src/package/styles/variables/borders.postcss
View File

8
src/lib/styles/variables/spacing.postcss → src/package/styles/variables/spacing.postcss
View File

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

0
src/lib/styles/variables/typography.postcss → src/package/styles/variables/typography.postcss
View File

57
src/package/utils/ago.ts Normal file
View File

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

0
src/lib/utils/classCombine.ts → src/package/utils/classCombine.ts
View File

40
src/package/utils/number.ts Normal file
View File

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

134
src/package/utils/parse.ts Normal file
View File

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

38
src/package/utils/permissions.ts Normal file
View File

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

84
src/package/utils/versions.ts Normal file
View File

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

2
src/routes/__layout.svelte
View File

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

31
src/routes/_internal/components/Example.svelte
View File

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

7
src/routes/_internal/components/Header.svelte
View File

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

51
src/routes/_internal/components/Sidebar.svelte
View File

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

2
src/routes/_internal/layout/page.svelte
View File

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

3
src/routes/_internal/styles/prism-one-dark.css
View File

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

15
src/routes/classes/Actions.md Normal file
View File

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

7
src/routes/classes/Base.md Normal file
View File

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

4
src/routes/classes/Card.md
View File

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

9
src/routes/classes/Divider.md Normal file
View File

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

10
src/routes/classes/InfoTable.md Normal file
View File

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

19
src/routes/classes/Link.md
View File

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

13
src/routes/classes/Member.md Normal file
View File

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

32
src/routes/classes/Stat.md Normal file
View File

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

15
src/routes/classes/Tags.md Normal file
View File

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

5
src/routes/classes/Title.md Normal file
View File

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

2
src/routes/components/Avatar.md
View File

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

2
src/routes/components/Badge.md
View File

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

31
src/routes/components/Button.md
View File

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

4
src/routes/components/Checkbox.md
View File

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

2
src/routes/components/CheckboxList.md
View File

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

2
src/routes/components/CheckboxVirtualList.md
View File

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

4
src/routes/components/Chips.md
View File

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

10
src/routes/components/FormField.md Normal file
View File

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

2
src/routes/components/NavRow.md
View File

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

2
src/routes/components/Pagination.md
View File

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

2
src/routes/components/Select.md
View File

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

8
src/routes/components/TextInput.md Normal file
View File

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

7
src/routes/getting-started/illustrations.md Normal file
View File

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

26
src/routes/getting-started/utils.md Normal file
View File

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

2
src/routes/index.md
View File

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

5
svelte.config.js
View File

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

7
tsconfig.json
View File

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