eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

docs: Improve example component + Fix sidebar on mobile

Browse Source
This commit is contained in:
venashial
2022-04-16 00:29:35 -07:00
parent 6aaced0c04
commit a48e6f82d1
34 changed files with 323 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
mdsvex.config.js
View File

@@ -8,7 +8,16 @@ const config = defineConfig({
dashes: 'oldschool', dashes: 'oldschool',
}, },
remarkPlugins: [[examples, { ExampleComponent: '$routes/_internal/components/Example.svelte' }]], remarkPlugins: [
[
examples,
{
defaults: {
Wrapper: '$routes/_internal/components/Example.svelte'
}
}
]
],
rehypePlugins: [], rehypePlugins: [],
layout: { layout: {

2
package.json
View File

@@ -24,7 +24,7 @@
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1", "eslint-plugin-svelte3": "^3.2.1",
"mdsvex": "^0.10.5", "mdsvex": "^0.10.5",
"mdsvexamples": "^0.0.8", "mdsvexamples": "^0.3.0",
"nodemon": "^2.0.15", "nodemon": "^2.0.15",
"sveld": "^0.13.4", "sveld": "^0.13.4",
"svelte": "^3.44.0", "svelte": "^3.44.0",

20
pnpm-lock.yaml generated
View File

@@ -19,7 +19,7 @@ specifiers:
insane: ^2.6.2 insane: ^2.6.2
marked: ^4.0.12 marked: ^4.0.12
mdsvex: ^0.10.5 mdsvex: ^0.10.5
mdsvexamples: ^0.0.8 mdsvexamples: 0.3.0
nodemon: ^2.0.15 nodemon: ^2.0.15
postcss: ^8.4.8 postcss: ^8.4.8
postcss-easy-import: ^4.0.0 postcss-easy-import: ^4.0.0
@@ -73,14 +73,14 @@ dependencies:
devDependencies: devDependencies:
'@sveltejs/adapter-static': 1.0.0-next.29 '@sveltejs/adapter-static': 1.0.0-next.29
'@sveltejs/kit': 1.0.0-next.304_svelte@3.46.4 '@sveltejs/kit': 1.0.0-next.314_svelte@3.46.4
'@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98 '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
'@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2 '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
eslint: 7.32.0 eslint: 7.32.0
eslint-config-prettier: 8.5.0_eslint@7.32.0 eslint-config-prettier: 8.5.0_eslint@7.32.0
eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4 eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4
mdsvex: 0.10.5_svelte@3.46.4 mdsvex: 0.10.5_svelte@3.46.4
mdsvexamples: 0.0.8 mdsvexamples: 0.3.0
nodemon: 2.0.15 nodemon: 2.0.15
sveld: 0.13.4_4db7643ceec6f88f007a3dfc606d2828 sveld: 0.13.4_4db7643ceec6f88f007a3dfc606d2828
svelte: 3.46.4 svelte: 3.46.4
@@ -358,8 +358,8 @@ packages:
tiny-glob: 0.2.9 tiny-glob: 0.2.9
dev: true dev: true
/@sveltejs/kit/1.0.0-next.304_svelte@3.46.4: /@sveltejs/kit/1.0.0-next.314_svelte@3.46.4:
resolution: {integrity: sha512-3+bCoDsF2Omolx51lK6+4Zgr8NYge8USxKpZpAg8OfonEW8L4GToyV4g+udLMCI3CC4QEw3eS1RFUj9UxLf2NQ==} resolution: {integrity: sha512-EkXjEd30XO8+AydBLARxAtI6Ak8V0KFSEJ07sNsrkGq9J70sWPL7yGenhGaeq6S852XZAqeyWd6uGQZmQLR4Wg==}
engines: {node: '>=14.13'} engines: {node: '>=14.13'}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@@ -2193,14 +2193,14 @@ packages:
vfile-message: 2.0.4 vfile-message: 2.0.4
dev: true dev: true
/mdsvexamples/0.0.8: /mdsvexamples/0.3.0:
resolution: {integrity: sha512-BFyJeke4r/PbWWk4+jXVXjuR0/YNMJK10rXjRGarmr7+bqg3kIlfTFjew/uMx9KBYchWLaJlnVQPrh5nQN5/lg==} resolution: {integrity: sha512-d662JjeT0Vw+XPwc2u+DAnGq+x8JMNJa17vMQpT+uvHJpkBs5Uszm0oDoU3LHmI1ZVB/Hq17HVrr0N/IUFQUJg==}
dependencies: dependencies:
abstract-syntax-tree: 2.20.5 abstract-syntax-tree: 2.20.5
prism-svelte: 0.5.0 prism-svelte: 0.5.0
prismjs: 1.27.0 prismjs: 1.27.0
unist-util-visit: 4.1.0 unist-util-visit: 4.1.0
unplugin: 0.5.2 unplugin: 0.6.2
upath: 2.0.1 upath: 2.0.1
transitivePeerDependencies: transitivePeerDependencies:
- esbuild - esbuild
@@ -3903,8 +3903,8 @@ packages:
webpack-virtual-modules: 0.4.3 webpack-virtual-modules: 0.4.3
dev: false dev: false
/unplugin/0.5.2: /unplugin/0.6.2:
resolution: {integrity: sha512-3SPYtus/56cxyD4jfjrnqCvb6jPxvdqJNaRXnEaG2BhNEMaoygu/39AG+LwKmiIUzj4XHyitcfZ7scGlWfEigA==} resolution: {integrity: sha512-+QONc2uBFQbeo4x5mlJHjTKjR6pmuchMpGVrWhwdGFFMb4ttFZ4E9KqhOOrNcm3Q8NNyB1vJ4s5e36IZC7UWYw==}
peerDependencies: peerDependencies:
esbuild: '>=0.13' esbuild: '>=0.13'
rollup: ^2.50.0 rollup: ^2.50.0

1
src/app.d.ts vendored
View File

@@ -1,4 +1,5 @@
/// <reference types="@sveltejs/kit" /> /// <reference types="@sveltejs/kit" />
/// <reference types="unplugin-icons/types/svelte" />
// See https://kit.svelte.dev/docs/types#the-app-namespace // See https://kit.svelte.dev/docs/types#the-app-namespace
// for information about these interfaces // for information about these interfaces

123
src/package/components/NavRow.svelte
View File

@@ -1,81 +1,80 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores';
interface Link { interface Link {
href: string; href: string;
label: string; label: string;
} }
export let links: Link[]; export let links: Link[];
export let query = ''; export let query = '';
export let resetScroll = false export let resetScroll = false;
/** Path level in URL, zero-indexed */ /** Path level in URL, zero-indexed */
export let level = 0; export let level = 0;
let path: string[]; let path: string[];
$: path = [ $: path = [
...$page.url.pathname ...$page.url.pathname
.substring(1) .substring(1)
.split('/') .split('/')
.map((route) => '/' + route), .map((route) => '/' + route),
'/', '/',
]; ];
$: basePath = path.slice(0, level).join(''); $: basePath = path.slice(0, level).join('');
</script> </script>
<nav class="navigation"> <nav class="navigation">
{#each links as link} {#each links as link}
<a <a
href={query href={query
? link.href ? link.href
? `?${query}=${link.href}` ? `?${query}=${link.href}`
: '?' : '?'
: level === 0 : level === 0
? link.href ? link.href
: basePath + link.href} : basePath + link.href}
on:click={() => {
on:click={() => { if (resetScroll) document.body.scrollTo(0,0)}} if (resetScroll) document.body.scrollTo(0, 0);
}}
class="navigation__link" class="navigation__link"
class:is-active={query class:is-active={query
? ($page.url.searchParams.get(query) || '') === link.href ? ($page.url.searchParams.get(query) || '') === link.href
: path[level] === link.href || path[level] === link.href.slice(0, -1)} : path[level] === link.href || path[level] === link.href.slice(0, -1)}
sveltekit:noscroll={!resetScroll} sveltekit:noscroll={!resetScroll}>{link.label}</a
>{link.label}</a >
> {/each}
{/each}
</nav> </nav>
<style lang="postcss"> <style lang="postcss">
.navigation { .navigation {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
grid-gap: 1rem; grid-gap: 1rem;
flex-wrap: wrap; flex-wrap: wrap;
&__link { &__link {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-text-light); color: var(--color-text-light);
&.is-active { &.is-active {
color: var(--color-text); color: var(--color-text);
position: relative; position: relative;
&::after { &::after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
bottom: -0.1rem; bottom: -0.1rem;
width: 100%; width: 100%;
border-radius: var(--rounded-max); border-radius: var(--rounded-max);
height: 0.2rem; height: 0.2rem;
background-color: var(--color-brand); background-color: var(--color-brand);
}
}
} }
}
} }
}
</style> </style>

2
src/package/config/svelte.config.js
View File

@@ -10,6 +10,6 @@ export const plugins = [svelteSvg(),
Icons({ Icons({
compiler: 'svelte', compiler: 'svelte',
defaultClass: 'icon', defaultClass: 'icon',
scale: 1.1428, // 1.1428rem = 16px when root size is 14px scale: 1,
}), }),
] ]

2
src/package/styles/classes/base.postcss
View File

@@ -2,7 +2,7 @@
background-color: var(--color-bg); background-color: var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-standard); font-family: var(--font-standard);
font-size: var(--font-size-nm); font-size: var(--font-size);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
scrollbar-color: var(--color-scrollbar) var(--color-bg); scrollbar-color: var(--color-scrollbar) var(--color-bg);

6
src/package/styles/normalize.postcss
View File

@@ -53,3 +53,9 @@ p {
ul { ul {
padding: 0 0 0 1.5rem; padding: 0 0 0 1.5rem;
} }
.icon {
height: auto;
width: 16px;
aspect-ratio: 1 / 1;
}

6
src/package/styles/variables/typography.postcss
View File

@@ -17,9 +17,9 @@
--h5-size: 14px; --h5-size: 14px;
--h6-size: 12px; --h6-size: 12px;
--font-size-lg: 17px; --font-size-lg: 19px;
--font-size-sm: 12px; --font-size-sm: 13px;
--font-size: 14px; --font-size: 16px;
/* Line heights */ /* Line heights */
--lh-condensed-ultra: 1; --lh-condensed-ultra: 1;

2
src/routes/__layout.svelte
View File

@@ -24,7 +24,7 @@
body { body {
margin: 0; margin: 0;
font-size: var(--body-font-size); font-size: var(--font-size);
font-family: var(--body-font); font-family: var(--body-font);
--accent-color: hsl(331, 80%, 45%); --accent-color: hsl(331, 80%, 45%);

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

@@ -1,10 +1,12 @@
<script lang="ts"> <script lang="ts">
import { Button } from 'omorphia/' import { Button } from 'omorphia'
import IconMoon from 'virtual:icons/heroicons-outline/moon' import IconMoon from 'virtual:icons/heroicons-outline/moon'
import IconSun from 'virtual:icons/heroicons-outline/sun' import IconSun from 'virtual:icons/heroicons-outline/sun'
let theme = 'dark' export let meta: { raised: boolean };
let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
let theme = 'light'
let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)'
</script> </script>
<div class="example"> <div class="example">

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

@@ -1,159 +1,156 @@
<script lang="ts"> <script lang="ts">
import IconMenu from 'virtual:icons/lucide/menu' import { page } from '$app/stores';
const components = Object.keys(import.meta.glob('../../components/**')) import IconMenu from 'virtual:icons/lucide/menu';
.map(it => it.replace('../../components/', '').replace('.md', ''))
.sort()
const classes = Object.keys(import.meta.glob('../../classes/**')) const components = Object.keys(import.meta.glob('../../components/**'))
.map(it => it.replace('../../classes/', '').replace('.md', '')) .map((it) => it.replace('../../components/', '').replace('.md', ''))
.sort() .sort();
let slideIn = false const classes = Object.keys(import.meta.glob('../../classes/**'))
.map((it) => it.replace('../../classes/', '').replace('.md', ''))
.sort();
let slideIn = false;
$: if ($page.url.pathname) {
slideIn = false;
}
</script> </script>
<nav class="sidebar" class:slideIn> <nav class="sidebar" class:slideIn>
<div class="sidebar__content">
<div class="section"> <div class="section">
<span class="section__title">Getting started</span> <span class="section__title">Getting started</span>
<a href="/" class="section__link">Introduction</a> <a href="/" class="section__link">Introduction</a>
<a href="/getting-started/icons" class="section__link">Using Icons</a> <a href="/getting-started/configure" class="section__link">Configure</a>
<a href="/getting-started/postcss" class="section__link">PostCSS config</a> <a href="/getting-started/icons" class="section__link">Using Icons</a>
<a href="/getting-started/css" class="section__link">Writing CSS</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/illustrations" class="section__link">Illustrations</a>
<a href="/getting-started/utils" class="section__link">Built-in utilities</a> <a href="/getting-started/utils" class="section__link">Built-in utilities</a>
</div> </div>
<div class="section"> <div class="section">
<span class="section__title">Components</span> <span class="section__title">Components</span>
{#each components as component} {#each components as component}
<a href="/components/{component}" class="section__link">{component}</a> <a href="/components/{component}" class="section__link">{component}</a>
{/each} {/each}
</div> </div>
<div class="section"> <div class="section">
<span class="section__title">Classes</span> <span class="section__title">Classes</span>
{#each classes as page} {#each classes as page}
<a href="/classes/{page}" class="section__link">{page}</a> <a href="/classes/{page}" class="section__link">{page}</a>
{/each} {/each}
</div> </div>
</div>
<button class="sidebar__toggle" on:click={() => slideIn = !slideIn}> <button class="sidebar__toggle" on:click={() => (slideIn = !slideIn)}>
<IconMenu/> <IconMenu />
</button> </button>
</nav> </nav>
<style lang="postcss"> <style lang="postcss">
:root { :root {
--sidebar-color: hsl(220, 15%, 40%); --sidebar-color: hsl(220, 15%, 40%);
--title-color: hsl(216, 10%, 80%); --title-color: hsl(216, 10%, 80%);
--link-color: hsl(216, 10%, 90%); --link-color: hsl(216, 10%, 90%);
--scrollbar-thumb-color: hsl(216, 10%, 70%); --scrollbar-thumb-color: hsl(216, 10%, 70%);
}
.sidebar {
background-color: var(--sidebar-color);
color: var(--title-color);
width: var(--sidebar-width);
max-width: 70vw;
position: fixed;
left: -100%;
top: 0;
z-index: 5;
transition: left 0.2s ease-in-out;
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
@media (--md) {
left: 0;
} }
.sidebar { &__content {
mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
padding: 88px 32px 32px;
height: 100vh;
max-height: 100vh;
overflow-y: auto;
grid-gap: 16px;
display: flex;
flex-direction: column;
.section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-gap: 2rem; grid-gap: 0.5rem;
background-color: var(--sidebar-color);
color: var(--title-color);
height: 100vh;
max-height: 100vh;
overflow-y: auto;
width: var(--sidebar-width);
max-width: 70vw;
position: fixed;
left: -100%;
top: 0;
z-index: 5;
padding: 88px 32px;
transition: left 0.2s ease-in-out;
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
&:after { &__title {
content: ""; text-transform: uppercase;
position: fixed; font-size: 12px;
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) { &__link {
left: 0; color: var(--link-color);
} text-decoration: none;
&:hover {
.section {
display: flex;
flex-direction: column;
grid-gap: 0.5rem;
&__title {
text-transform: uppercase;
font-size: 12px;
}
&__link {
color: var(--link-color);
text-decoration: none;
&:hover {
color: white;
text-decoration: underline;
}
}
}
&__toggle {
position: fixed;
left: 16px;
bottom: 16px;
padding: 8px;
aspect-ratio: 1 / 1;
background-color: var(--accent-color);
z-index: 20;
border-radius: var(--rounded);
color: white; color: white;
box-shadow: var(--shadow-inset-sm), var(--shadow-floating); text-decoration: underline;
transition: left 0.2s cubic-bezier(.38, .52, .37, 1.27); }
:global(.icon) {
width: 32px;
height: auto;
}
@media (--md) {
visibility: hidden;
}
}
&.slideIn {
left: 0;
.sidebar__toggle {
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>
&__toggle {
position: fixed;
left: 16px;
bottom: 16px;
padding: 8px;
aspect-ratio: 1 / 1;
background-color: var(--accent-color);
z-index: 20;
border-radius: var(--rounded);
color: white;
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
:global(.icon) {
width: 32px;
height: auto;
}
@media (--md) {
visibility: hidden;
}
}
&.slideIn {
left: 0;
.sidebar__toggle {
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/classes/Actions.md
View File

@@ -1,4 +1,4 @@
```svelte example ```svelte example raised
<script> <script>
import { Button } from 'omorphia' import { Button } from 'omorphia'
import IconHeartSolid from 'virtual:icons/heroicons-solid/heart' import IconHeartSolid from 'virtual:icons/heroicons-solid/heart'

2
src/routes/classes/Divider.md
View File

@@ -1,4 +1,4 @@
```svelte example ```svelte example raised
<div class="card"> <div class="card">
Some words could go here. Some words could go here.

2
src/routes/classes/InfoTable.md
View File

@@ -1,4 +1,4 @@
```svelte example ```svelte example raised
<div class="info-table"> <div class="info-table">
<span class="info-table__label">License</span> <span class="info-table__label">License</span>
<a href="#mit" class="link">MIT</a> <a href="#mit" class="link">MIT</a>

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

@@ -1,12 +1,12 @@
### Single example ### Single example
```svelte example ```svelte example raised
<a class="link" href="#place"> Go somewhere! </a> <a class="link" href="#place"> Go somewhere! </a>
``` ```
### Group example ### Group example
```svelte example ```svelte example raised
<script> <script>
import IconIssues from 'virtual:icons/heroicons-outline/exclamation' import IconIssues from 'virtual:icons/heroicons-outline/exclamation'
import IconCode from 'virtual:icons/heroicons-outline/code' import IconCode from 'virtual:icons/heroicons-outline/code'

2
src/routes/classes/Member.md
View File

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

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

@@ -1,6 +1,6 @@
### Single Example ### Single Example
```svelte example ```svelte example raised
<script> <script>
import IconStar from 'virtual:icons/heroicons-outline/star' import IconStar from 'virtual:icons/heroicons-outline/star'
</script> </script>
@@ -13,7 +13,7 @@
### Group Example ### Group Example
```svelte example ```svelte example raised
<script> <script>
import IconDownload from 'virtual:icons/heroicons-outline/download' import IconDownload from 'virtual:icons/heroicons-outline/download'
import IconHeart from 'virtual:icons/heroicons-outline/heart' import IconHeart from 'virtual:icons/heroicons-outline/heart'

2
src/routes/classes/Tags.md
View File

@@ -1,4 +1,4 @@
```svelte example ```svelte example raised
<script> <script>
import IconCarrot from 'virtual:icons/lucide/carrot' import IconCarrot from 'virtual:icons/lucide/carrot'
import IconGlobe from 'virtual:icons/heroicons-outline/globe' import IconGlobe from 'virtual:icons/heroicons-outline/globe'

2
src/routes/classes/Title.md
View File

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

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

@@ -1,6 +1,6 @@
Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art. Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { Avatar } from "omorphia"; import { Avatar } from "omorphia";
</script> </script>

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

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

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

@@ -6,12 +6,12 @@
import IconDownload from 'virtual:icons/heroicons-outline/download' import IconDownload from 'virtual:icons/heroicons-outline/download'
</script> </script>
<Button color="primary"><IconDownload /> Download</Button> <Button color="raised"><IconDownload /> Download</Button>
``` ```
### Group example ### Color variants example
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { Button } from "omorphia"; import { Button } from "omorphia";
import IconDownload from 'virtual:icons/heroicons-outline/download' import IconDownload from 'virtual:icons/heroicons-outline/download'
@@ -26,6 +26,20 @@
<Button color="danger-light">Light danger button</Button> <Button color="danger-light">Light danger button</Button>
<Button color="transparent">Transparent button</Button> <Button color="transparent">Transparent button</Button>
<Button disabled>Disabled button</Button> <Button disabled>Disabled button</Button>
</div>
```
### With icons example
```svelte example raised
<script lang="ts">
import { Button } from "omorphia";
import IconDownload from 'virtual:icons/heroicons-outline/download'
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
<div class="button-group">
<Button color="primary"><IconDownload /></Button> <Button color="primary"><IconDownload /></Button>
<Button><IconHeart /> Follow mod </Button>
</div> </div>
``` ```

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

@@ -1,6 +1,6 @@
### Text-only Example ### Text-only Example
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { Checkbox } from "omorphia"; import { Checkbox } from "omorphia";
</script> </script>
@@ -10,7 +10,7 @@
### Text with Icon Example ### Text with Icon Example
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { Checkbox } from "omorphia"; import { Checkbox } from "omorphia";
import IconCarrot from 'virtual:icons/lucide/carrot' import IconCarrot from 'virtual:icons/lucide/carrot'

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

@@ -1,4 +1,4 @@
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { CheckboxList } from "omorphia"; import { CheckboxList } from "omorphia";
import IconSquare from 'virtual:icons/lucide/square' import IconSquare from 'virtual:icons/lucide/square'

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

@@ -1,4 +1,4 @@
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { CheckboxVirtualList } from "omorphia"; import { CheckboxVirtualList } from "omorphia";
import IconStar from 'virtual:icons/heroicons-outline/star' import IconStar from 'virtual:icons/heroicons-outline/star'

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

@@ -1,6 +1,6 @@
### Simple example ### Simple example
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { Chips } from "omorphia"; import { Chips } from "omorphia";
</script> </script>
@@ -20,7 +20,7 @@
### Force an option to be selected with `neverEmpty` ### Force an option to be selected with `neverEmpty`
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { Chips } from "omorphia"; import { Chips } from "omorphia";

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

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

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

@@ -1,6 +1,6 @@
`NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths). `NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).
```svelte example ```svelte example raised
<script lang="ts"> <script lang="ts">
import { NavRow } from "omorphia"; import { NavRow } from "omorphia";
</script> </script>

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

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

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

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

40
src/routes/getting-started/configure.md Normal file
View File

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

31
src/routes/getting-started/postcss.md
View File

@@ -1,31 +0,0 @@
---
title: PostCSS Configuration
---
Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
Install PostCSS with:
```bash
pnpx svelte-add@latest postcss
```
This is the recommended `postcss.config.cjs` setup:
```js
const config = {
plugins: [
require('postcss-import'),
require('postcss-strip-inline-comments'),
require('postcss-nested'),
require('postcss-preset-env'),
require('autoprefixer'),
require('postcss-extend-rule'),
process.env.NODE_ENV === 'development' && require('cssnano')({
preset: 'default',
})
],
};
module.exports = config;
```

32
tsconfig.json
View File

@@ -1,17 +1,21 @@
{ {
"paths": { "compilerOptions": {
"omorphia/*": [ "paths": {
"src/package/*" "omorphia/*": [
], "src/package/*"
"omorphia": [ ],
"src/package" "omorphia": [
], "src/package"
"$package/*": [ ],
"src/package/*" "$package/*": [
], "src/package/*"
"$routes/*": [ ],
"src/routes/*" "$routes/*": [
] "src/routes/*"
}, ],
"$lib":["src/package"],
"$lib/*":["src/package/*"]
}
},
"extends": "./.svelte-kit/tsconfig.json" "extends": "./.svelte-kit/tsconfig.json"
} }