eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files

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>