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

1
src/app.d.ts vendored
View File

@@ -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

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

@@ -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>

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

@@ -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
src/package/styles/classes/base.postcss
View File

@@ -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);

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

@@ -53,3 +53,9 @@ p {
ul {
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;
--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;

2
src/routes/__layout.svelte
View File

@@ -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%);

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

@@ -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">

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

@@ -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>

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

@@ -1,4 +1,4 @@
```svelte example
```svelte example raised
<script>
import { Button } from 'omorphia'
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">
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">
<span class="info-table__label">License</span>
<a href="#mit" class="link">MIT</a>

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

@@ -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'

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

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

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

@@ -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'

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

@@ -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'

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

@@ -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>

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.
```svelte example
```svelte example raised
<script lang="ts">
import { Avatar } from "omorphia";
</script>

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

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

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

@@ -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>
```

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

@@ -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'

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

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

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

@@ -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";

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

@@ -1,4 +1,4 @@
```svelte example
```svelte example raised
<script lang="ts">
import { FormField } 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).
```svelte example
```svelte example raised
<script lang="ts">
import { NavRow } from "omorphia";
</script>

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

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

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

@@ -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
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;
```