You've already forked AstralRinth
forked from didirus/AstralRinth
docs: Improve example component + Fix sidebar on mobile
This commit is contained in:
venashial
@@ -8,7 +8,16 @@ const config = defineConfig({
|
||||
dashes: 'oldschool',
|
||||
},
|
||||
|
||||
remarkPlugins: [[examples, { ExampleComponent: '$routes/_internal/components/Example.svelte' }]],
|
||||
remarkPlugins: [
|
||||
[
|
||||
examples,
|
||||
{
|
||||
defaults: {
|
||||
Wrapper: '$routes/_internal/components/Example.svelte'
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
rehypePlugins: [],
|
||||
|
||||
layout: {
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^3.2.1",
|
||||
"mdsvex": "^0.10.5",
|
||||
"mdsvexamples": "^0.0.8",
|
||||
"mdsvexamples": "^0.3.0",
|
||||
"nodemon": "^2.0.15",
|
||||
"sveld": "^0.13.4",
|
||||
"svelte": "^3.44.0",
|
||||
|
||||
20
pnpm-lock.yaml
generated
20
pnpm-lock.yaml
generated
@@ -19,7 +19,7 @@ specifiers:
|
||||
insane: ^2.6.2
|
||||
marked: ^4.0.12
|
||||
mdsvex: ^0.10.5
|
||||
mdsvexamples: ^0.0.8
|
||||
mdsvexamples: 0.3.0
|
||||
nodemon: ^2.0.15
|
||||
postcss: ^8.4.8
|
||||
postcss-easy-import: ^4.0.0
|
||||
@@ -73,14 +73,14 @@ dependencies:
|
||||
|
||||
devDependencies:
|
||||
'@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/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
|
||||
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
|
||||
mdsvex: 0.10.5_svelte@3.46.4
|
||||
mdsvexamples: 0.0.8
|
||||
mdsvexamples: 0.3.0
|
||||
nodemon: 2.0.15
|
||||
sveld: 0.13.4_4db7643ceec6f88f007a3dfc606d2828
|
||||
svelte: 3.46.4
|
||||
@@ -358,8 +358,8 @@ packages:
|
||||
tiny-glob: 0.2.9
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.304_svelte@3.46.4:
|
||||
resolution: {integrity: sha512-3+bCoDsF2Omolx51lK6+4Zgr8NYge8USxKpZpAg8OfonEW8L4GToyV4g+udLMCI3CC4QEw3eS1RFUj9UxLf2NQ==}
|
||||
/@sveltejs/kit/1.0.0-next.314_svelte@3.46.4:
|
||||
resolution: {integrity: sha512-EkXjEd30XO8+AydBLARxAtI6Ak8V0KFSEJ07sNsrkGq9J70sWPL7yGenhGaeq6S852XZAqeyWd6uGQZmQLR4Wg==}
|
||||
engines: {node: '>=14.13'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@@ -2193,14 +2193,14 @@ packages:
|
||||
vfile-message: 2.0.4
|
||||
dev: true
|
||||
|
||||
/mdsvexamples/0.0.8:
|
||||
resolution: {integrity: sha512-BFyJeke4r/PbWWk4+jXVXjuR0/YNMJK10rXjRGarmr7+bqg3kIlfTFjew/uMx9KBYchWLaJlnVQPrh5nQN5/lg==}
|
||||
/mdsvexamples/0.3.0:
|
||||
resolution: {integrity: sha512-d662JjeT0Vw+XPwc2u+DAnGq+x8JMNJa17vMQpT+uvHJpkBs5Uszm0oDoU3LHmI1ZVB/Hq17HVrr0N/IUFQUJg==}
|
||||
dependencies:
|
||||
abstract-syntax-tree: 2.20.5
|
||||
prism-svelte: 0.5.0
|
||||
prismjs: 1.27.0
|
||||
unist-util-visit: 4.1.0
|
||||
unplugin: 0.5.2
|
||||
unplugin: 0.6.2
|
||||
upath: 2.0.1
|
||||
transitivePeerDependencies:
|
||||
- esbuild
|
||||
@@ -3903,8 +3903,8 @@ packages:
|
||||
webpack-virtual-modules: 0.4.3
|
||||
dev: false
|
||||
|
||||
/unplugin/0.5.2:
|
||||
resolution: {integrity: sha512-3SPYtus/56cxyD4jfjrnqCvb6jPxvdqJNaRXnEaG2BhNEMaoygu/39AG+LwKmiIUzj4XHyitcfZ7scGlWfEigA==}
|
||||
/unplugin/0.6.2:
|
||||
resolution: {integrity: sha512-+QONc2uBFQbeo4x5mlJHjTKjR6pmuchMpGVrWhwdGFFMb4ttFZ4E9KqhOOrNcm3Q8NNyB1vJ4s5e36IZC7UWYw==}
|
||||
peerDependencies:
|
||||
esbuild: '>=0.13'
|
||||
rollup: ^2.50.0
|
||||
|
||||
1
src/app.d.ts
vendored
1
src/app.d.ts
vendored
@@ -1,4 +1,5 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
/// <reference types="unplugin-icons/types/svelte" />
|
||||
|
||||
// See https://kit.svelte.dev/docs/types#the-app-namespace
|
||||
// for information about these interfaces
|
||||
|
||||
@@ -1,81 +1,80 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
interface Link {
|
||||
href: string;
|
||||
label: string;
|
||||
}
|
||||
interface Link {
|
||||
href: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export let links: Link[];
|
||||
export let query = '';
|
||||
export let links: Link[];
|
||||
export let query = '';
|
||||
|
||||
export let resetScroll = false
|
||||
export let resetScroll = false;
|
||||
|
||||
/** Path level in URL, zero-indexed */
|
||||
export let level = 0;
|
||||
/** Path level in URL, zero-indexed */
|
||||
export let level = 0;
|
||||
|
||||
let path: string[];
|
||||
$: path = [
|
||||
...$page.url.pathname
|
||||
.substring(1)
|
||||
.split('/')
|
||||
.map((route) => '/' + route),
|
||||
'/',
|
||||
];
|
||||
let path: string[];
|
||||
$: path = [
|
||||
...$page.url.pathname
|
||||
.substring(1)
|
||||
.split('/')
|
||||
.map((route) => '/' + route),
|
||||
'/',
|
||||
];
|
||||
|
||||
$: basePath = path.slice(0, level).join('');
|
||||
$: basePath = path.slice(0, level).join('');
|
||||
</script>
|
||||
|
||||
<nav class="navigation">
|
||||
{#each links as link}
|
||||
<a
|
||||
href={query
|
||||
? link.href
|
||||
? `?${query}=${link.href}`
|
||||
: '?'
|
||||
: level === 0
|
||||
? link.href
|
||||
: basePath + link.href}
|
||||
|
||||
on:click={() => { if (resetScroll) document.body.scrollTo(0,0)}}
|
||||
|
||||
class="navigation__link"
|
||||
class:is-active={query
|
||||
? ($page.url.searchParams.get(query) || '') === link.href
|
||||
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
|
||||
sveltekit:noscroll={!resetScroll}
|
||||
>{link.label}</a
|
||||
>
|
||||
{/each}
|
||||
{#each links as link}
|
||||
<a
|
||||
href={query
|
||||
? link.href
|
||||
? `?${query}=${link.href}`
|
||||
: '?'
|
||||
: level === 0
|
||||
? link.href
|
||||
: basePath + link.href}
|
||||
on:click={() => {
|
||||
if (resetScroll) document.body.scrollTo(0, 0);
|
||||
}}
|
||||
class="navigation__link"
|
||||
class:is-active={query
|
||||
? ($page.url.searchParams.get(query) || '') === link.href
|
||||
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
|
||||
sveltekit:noscroll={!resetScroll}>{link.label}</a
|
||||
>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<style lang="postcss">
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
grid-gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__link {
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-light);
|
||||
&__link {
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-light);
|
||||
|
||||
&.is-active {
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
&.is-active {
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -0.1rem;
|
||||
width: 100%;
|
||||
border-radius: var(--rounded-max);
|
||||
height: 0.2rem;
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -0.1rem;
|
||||
width: 100%;
|
||||
border-radius: var(--rounded-max);
|
||||
height: 0.2rem;
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,6 +10,6 @@ export const plugins = [svelteSvg(),
|
||||
Icons({
|
||||
compiler: 'svelte',
|
||||
defaultClass: 'icon',
|
||||
scale: 1.1428, // 1.1428rem = 16px when root size is 14px
|
||||
scale: 1,
|
||||
}),
|
||||
]
|
||||
@@ -2,7 +2,7 @@
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-standard);
|
||||
font-size: var(--font-size-nm);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight-regular);
|
||||
|
||||
scrollbar-color: var(--color-scrollbar) var(--color-bg);
|
||||
|
||||
@@ -53,3 +53,9 @@ p {
|
||||
ul {
|
||||
padding: 0 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: auto;
|
||||
width: 16px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
@@ -17,9 +17,9 @@
|
||||
--h5-size: 14px;
|
||||
--h6-size: 12px;
|
||||
|
||||
--font-size-lg: 17px;
|
||||
--font-size-sm: 12px;
|
||||
--font-size: 14px;
|
||||
--font-size-lg: 19px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size: 16px;
|
||||
|
||||
/* Line heights */
|
||||
--lh-condensed-ultra: 1;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: var(--body-font-size);
|
||||
font-size: var(--font-size);
|
||||
font-family: var(--body-font);
|
||||
|
||||
--accent-color: hsl(331, 80%, 45%);
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { Button } from 'omorphia/'
|
||||
import { Button } from 'omorphia'
|
||||
import IconMoon from 'virtual:icons/heroicons-outline/moon'
|
||||
import IconSun from 'virtual:icons/heroicons-outline/sun'
|
||||
|
||||
let theme = 'dark'
|
||||
let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
|
||||
export let meta: { raised: boolean };
|
||||
|
||||
let theme = 'light'
|
||||
let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)'
|
||||
</script>
|
||||
|
||||
<div class="example">
|
||||
|
||||
@@ -1,159 +1,156 @@
|
||||
<script lang="ts">
|
||||
import IconMenu from 'virtual:icons/lucide/menu'
|
||||
import { page } from '$app/stores';
|
||||
|
||||
const components = Object.keys(import.meta.glob('../../components/**'))
|
||||
.map(it => it.replace('../../components/', '').replace('.md', ''))
|
||||
.sort()
|
||||
import IconMenu from 'virtual:icons/lucide/menu';
|
||||
|
||||
const classes = Object.keys(import.meta.glob('../../classes/**'))
|
||||
.map(it => it.replace('../../classes/', '').replace('.md', ''))
|
||||
.sort()
|
||||
const components = Object.keys(import.meta.glob('../../components/**'))
|
||||
.map((it) => it.replace('../../components/', '').replace('.md', ''))
|
||||
.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>
|
||||
|
||||
<nav class="sidebar" class:slideIn>
|
||||
<div class="sidebar__content">
|
||||
<div class="section">
|
||||
<span class="section__title">Getting started</span>
|
||||
<a href="/" class="section__link">Introduction</a>
|
||||
<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>
|
||||
<span class="section__title">Getting started</span>
|
||||
<a href="/" class="section__link">Introduction</a>
|
||||
<a href="/getting-started/configure" class="section__link">Configure</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/illustrations" class="section__link">Illustrations</a>
|
||||
<a href="/getting-started/utils" class="section__link">Built-in utilities</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<span class="section__title">Components</span>
|
||||
{#each components as component}
|
||||
<a href="/components/{component}" class="section__link">{component}</a>
|
||||
{/each}
|
||||
<span class="section__title">Components</span>
|
||||
{#each components as component}
|
||||
<a href="/components/{component}" class="section__link">{component}</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<span class="section__title">Classes</span>
|
||||
{#each classes as page}
|
||||
<a href="/classes/{page}" class="section__link">{page}</a>
|
||||
{/each}
|
||||
<span class="section__title">Classes</span>
|
||||
{#each classes as page}
|
||||
<a href="/classes/{page}" class="section__link">{page}</a>
|
||||
{/each}
|
||||
</div>
|
||||
</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%);
|
||||
: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 {
|
||||
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;
|
||||
flex-direction: column;
|
||||
grid-gap: 2rem;
|
||||
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);
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
&: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;
|
||||
&__title {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (--md) {
|
||||
left: 0;
|
||||
}
|
||||
&__link {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
.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);
|
||||
&:hover {
|
||||
color: white;
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
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);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script>
|
||||
import { Button } from 'omorphia'
|
||||
import IconHeartSolid from 'virtual:icons/heroicons-solid/heart'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<div class="card">
|
||||
Some words could go here.
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<div class="info-table">
|
||||
<span class="info-table__label">License</span>
|
||||
<a href="#mit" class="link">MIT</a>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
### Single example
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<a class="link" href="#place"> Go somewhere! </a>
|
||||
```
|
||||
|
||||
### Group example
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script>
|
||||
import IconIssues from 'virtual:icons/heroicons-outline/exclamation'
|
||||
import IconCode from 'virtual:icons/heroicons-outline/code'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Avatar } from "omorphia";
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
### Single Example
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script>
|
||||
import IconStar from 'virtual:icons/heroicons-outline/star'
|
||||
</script>
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
### Group Example
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script>
|
||||
import IconDownload from 'virtual:icons/heroicons-outline/download'
|
||||
import IconHeart from 'virtual:icons/heroicons-outline/heart'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script>
|
||||
import IconCarrot from 'virtual:icons/lucide/carrot'
|
||||
import IconGlobe from 'virtual:icons/heroicons-outline/globe'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<h1 class="title-primary">Tree Mod</h1>
|
||||
<h2 class="title-secondary">Information</h2>
|
||||
<h3 class="title-tertiary">Members</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
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">
|
||||
import { Avatar } from "omorphia";
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Badge } from "omorphia";
|
||||
</script>
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
import IconDownload from 'virtual:icons/heroicons-outline/download'
|
||||
</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">
|
||||
import { Button } from "omorphia";
|
||||
import IconDownload from 'virtual:icons/heroicons-outline/download'
|
||||
@@ -26,6 +26,20 @@
|
||||
<Button color="danger-light">Light danger button</Button>
|
||||
<Button color="transparent">Transparent 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><IconHeart /> Follow mod </Button>
|
||||
</div>
|
||||
```
|
||||
@@ -1,6 +1,6 @@
|
||||
### Text-only Example
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Checkbox } from "omorphia";
|
||||
</script>
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
### Text with Icon Example
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Checkbox } from "omorphia";
|
||||
import IconCarrot from 'virtual:icons/lucide/carrot'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { CheckboxList } from "omorphia";
|
||||
import IconSquare from 'virtual:icons/lucide/square'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { CheckboxVirtualList } from "omorphia";
|
||||
import IconStar from 'virtual:icons/heroicons-outline/star'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
### Simple example
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Chips } from "omorphia";
|
||||
</script>
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
### Force an option to be selected with `neverEmpty`
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Chips } from "omorphia";
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { FormField } from "omorphia";
|
||||
import { TextInput } from "omorphia";
|
||||
|
||||
@@ -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).
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { NavRow } from "omorphia";
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Select } from "omorphia";
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { TextInput } from "omorphia";
|
||||
</script>
|
||||
|
||||
40
src/routes/getting-started/configure.md
Normal file
40
src/routes/getting-started/configure.md
Normal 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')
|
||||
```
|
||||
@@ -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;
|
||||
```
|
||||
@@ -1,17 +1,21 @@
|
||||
{
|
||||
"paths": {
|
||||
"omorphia/*": [
|
||||
"src/package/*"
|
||||
],
|
||||
"omorphia": [
|
||||
"src/package"
|
||||
],
|
||||
"$package/*": [
|
||||
"src/package/*"
|
||||
],
|
||||
"$routes/*": [
|
||||
"src/routes/*"
|
||||
]
|
||||
},
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"omorphia/*": [
|
||||
"src/package/*"
|
||||
],
|
||||
"omorphia": [
|
||||
"src/package"
|
||||
],
|
||||
"$package/*": [
|
||||
"src/package/*"
|
||||
],
|
||||
"$routes/*": [
|
||||
"src/routes/*"
|
||||
],
|
||||
"$lib":["src/package"],
|
||||
"$lib/*":["src/package/*"]
|
||||
}
|
||||
},
|
||||
"extends": "./.svelte-kit/tsconfig.json"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user