didirus/AstralRinth
3
9
Fork 12
Code Issues 1 Pull Requests Actions Packages Projects Releases 12 Wiki Activity

Run prettier

Browse Source
This commit is contained in:
venashial
2022-06-04 00:46:23 -07:00
parent 597c071c3d
commit c9ec9f14de
49 changed files with 1515 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/routes/__layout.svelte
View File

@@ -1,63 +1,63 @@
<script lang="ts">
import '$package/styles.postcss';
import '../docs/styles/prism-one-dark.css';
import '../docs/styles/gh-markdown.postcss';
import Sidebar from '../docs/components/Sidebar.svelte';
import Header from '../docs/components/Header.svelte';
import '$package/styles.postcss'
import '../docs/styles/prism-one-dark.css'
import '../docs/styles/gh-markdown.postcss'
import Sidebar from '../docs/components/Sidebar.svelte'
import Header from '../docs/components/Header.svelte'
</script>
<div class="app theme-light">
<Header />
<Sidebar />
<main class="app__content">
<article>
<slot />
</article>
</main>
<Header />
<Sidebar />
<main class="app__content">
<article>
<slot />
</article>
</main>
</div>
<style lang="postcss">
:global {
html {
overflow-y: scroll;
}
:global {
html {
overflow-y: scroll;
}
body {
margin: 0;
font-size: var(--font-size);
font-family: var(--body-font);
body {
margin: 0;
font-size: var(--font-size);
font-family: var(--body-font);
--accent-color: hsl(331, 80%, 45%);
--accent-color-transparent: hsla(331, 80%, 45%, 0.15);
}
}
--accent-color: hsl(331, 80%, 45%);
--accent-color-transparent: hsla(331, 80%, 45%, 0.15);
}
}
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
background-color: var(--color-bg);
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
background-color: var(--color-bg);
--sidebar-width: 275px;
--sidebar-width: 275px;
&__content {
@media (--md) {
padding-left: var(--sidebar-width);
}
overflow-x: hidden;
overflow-y: auto;
&__content {
@media (--md) {
padding-left: var(--sidebar-width);
}
overflow-x: hidden;
overflow-y: auto;
article {
max-width: 800px;
padding-block: 140px 64px;
padding-inline: 24px;
article {
max-width: 800px;
padding-block: 140px 64px;
padding-inline: 24px;
@media (--sm) {
padding-inline: 48px;
padding-block: 140px 24px;
}
}
}
}
@media (--sm) {
padding-inline: 48px;
padding-block: 140px 24px;
}
}
}
}
</style>

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

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

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

@@ -1,7 +1,5 @@
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>
<div class="base theme-light">...</div>
```

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

@@ -2,11 +2,13 @@
```svelte example
<div class="card">
<h3>Moon/Distance to Earth</h3>
<h2>238,900 mi</h2>
<p>
The moon's distance from Earth affects the strength of ocean tides and the appearance of solar eclipses in our skies. The average distance between the blue planet and its only natural satellite is about 238,855 miles (384,400 kilometers), according to NASA.
</p>
<h3>Moon/Distance to Earth</h3>
<h2>238,900 mi</h2>
<p>
The moon's distance from Earth affects the strength of ocean tides and the appearance of solar
eclipses in our skies. The average distance between the blue planet and its only natural
satellite is about 238,855 miles (384,400 kilometers), according to NASA.
</p>
</div>
```
@@ -14,18 +16,18 @@
```svelte example
<script lang="ts">
import { Button } from "omorphia";
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
import { Avatar } from "omorphia";
import { Button } from 'omorphia'
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
import { Avatar } from 'omorphia'
</script>
<div class="card">
<div class="card__overlay">
<Button color="raised"><IconPencil /> Edit</Button>
</div>
<div class="card__banner card__banner--short card__banner--dark" ></div>
<Avatar size="md" floatUp/>
<h1 class="title">Project</h1>
<p class="summary">A project that has a description right here.</p>
<div class="card__overlay">
<Button color="raised"><IconPencil /> Edit</Button>
</div>
<div class="card__banner card__banner--short card__banner--dark" />
<Avatar size="md" floatUp />
<h1 class="title">Project</h1>
<p class="summary">A project that has a description right here.</p>
</div>
```

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

@@ -6,8 +6,8 @@ Some words could go here.
And some other words could go here.
<style>
.example__source__code {
flex-direction: column;
}
.example__source__code {
flex-direction: column;
}
</style>
```

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

@@ -1,10 +1,10 @@
```svelte example raised
<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>
<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>
```

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

@@ -8,15 +8,15 @@
```svelte example raised
<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'
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>
<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>
```

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

@@ -1,13 +1,13 @@
```svelte example raised
<script lang="ts">
import { Avatar } from "omorphia";
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>
<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>
```

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

@@ -2,12 +2,12 @@
```svelte example raised
<script>
import IconStar from 'virtual:icons/heroicons-outline/star'
import IconStar from 'virtual:icons/heroicons-outline/star'
</script>
<div class="stat">
<IconStar/>
123K stars
<IconStar />
123K stars
</div>
```
@@ -15,18 +15,18 @@
```svelte example raised
<script>
import IconDownload from 'virtual:icons/heroicons-outline/download'
import IconHeart from 'virtual:icons/heroicons-outline/heart'
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 class="stat">
<IconDownload />
4.1B downloads
</div>
<div class="stat stat--light">
<IconHeart />
3 followers
</div>
</div>
```

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

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

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

@@ -2,12 +2,14 @@ Avatars are used for project icons and user profile pictures. Low resolution ima
```svelte example raised
<script lang="ts">
import { Avatar } from "omorphia";
import { Avatar } from 'omorphia'
</script>
<Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
<Avatar size="md" src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
<Avatar
size="md"
src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
<Avatar size="sm" />
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
```

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

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

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

@@ -2,8 +2,8 @@
```svelte example
<script lang="ts">
import { Button } from "omorphia";
import IconDownload from 'virtual:icons/heroicons-outline/download'
import { Button } from 'omorphia'
import IconDownload from 'virtual:icons/heroicons-outline/download'
</script>
<Button color="raised"><IconDownload /> Download</Button>
@@ -13,21 +13,21 @@
```svelte example raised
<script lang="ts">
import { Button } from "omorphia";
import IconDownload from 'virtual:icons/heroicons-outline/download'
import { Button } from 'omorphia'
import IconDownload from 'virtual:icons/heroicons-outline/download'
</script>
<div class="button-group">
<Button>Default</Button>
<Button color="raised">Raised</Button>
<Button color="primary">Primary</Button>
<Button color="primary-light">Light primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="danger">Danger</Button>
<Button color="danger-light">Light danger</Button>
<Button color="transparent">Transparent</Button>
<Button disabled>Disabled</Button>
<Button>Default</Button>
<Button color="raised">Raised</Button>
<Button color="primary">Primary</Button>
<Button color="primary-light">Light primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="danger">Danger</Button>
<Button color="danger-light">Light danger</Button>
<Button color="transparent">Transparent</Button>
<Button disabled>Disabled</Button>
</div>
```
@@ -35,13 +35,13 @@
```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'
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>
<Button color="primary"><IconDownload /></Button>
<Button><IconHeart /> Follow mod</Button>
</div>
```

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

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

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

@@ -1,37 +1,36 @@
```svelte example raised
<script lang="ts">
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'
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'
let selected = []
let selected = []
</script>
<CheckboxList
bind:value={selected}
options={[
{
label: 'Circle',
icon: IconCircle,
value: 'CIR',
},
{
label: 'Triangle',
icon: IconTriangle,
value: 'TRI',
},
{
label: 'Square',
icon: IconSquare,
value: 'SQU',
},
{
label: 'Blank',
value: 'BLA',
},
]}
/>
bind:value={selected}
options={[
{
label: 'Circle',
icon: IconCircle,
value: 'CIR',
},
{
label: 'Triangle',
icon: IconTriangle,
value: 'TRI',
},
{
label: 'Square',
icon: IconSquare,
value: 'SQU',
},
{
label: 'Blank',
value: 'BLA',
},
]} />
Selected: {selected}
```

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

@@ -1,23 +1,21 @@
```svelte example raised
<script lang="ts">
import { CheckboxVirtualList } from "omorphia";
import IconStar from 'virtual:icons/heroicons-outline/star'
import { uniqueId } from 'omorphia/utils/uniqueId'
import { CheckboxVirtualList } from 'omorphia'
import IconStar from 'virtual:icons/heroicons-outline/star'
import { uniqueId } from 'omorphia/utils/uniqueId'
let options = Array(100).fill({})
.map(option => ({
label: 'Star-' + uniqueId(),
icon: IconStar,
value: uniqueId(),
}))
let options = Array(100)
.fill({})
.map((option) => ({
label: 'Star-' + uniqueId(),
icon: IconStar,
value: uniqueId(),
}))
let selected = ['2', '6']
let selected = ['2', '6']
</script>
<CheckboxVirtualList
bind:value={selected}
{options}
/>
<CheckboxVirtualList bind:value={selected} {options} />
Selected: {selected}
```

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

@@ -2,42 +2,46 @@
```svelte example raised
<script lang="ts">
import { Chips } from "omorphia";
import { Chips } from 'omorphia'
</script>
<Chips options={[
{
label: 'One',
value: 'one'
},
{
label: 'Two',
value: 'two'
}]}
/>
<Chips
options={[
{
label: 'One',
value: 'one',
},
{
label: 'Two',
value: 'two',
},
]} />
```
### Force an option to be selected with `neverEmpty`
```svelte example raised
<script lang="ts">
import { Chips } from "omorphia";
import { Chips } from 'omorphia'
let foo = 'modpack'
let foo = 'modpack'
</script>
<Chips neverEmpty bind:value={foo} options={[
{
label: 'Mod',
value: 'mod'
},
{
label: 'Modpack',
value: 'modpack'
},
{
label: 'World',
value: 'world'
}]}
/>
<Chips
neverEmpty
bind:value={foo}
options={[
{
label: 'Mod',
value: 'mod',
},
{
label: 'Modpack',
value: 'modpack',
},
{
label: 'World',
value: 'world',
},
]} />
```

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

@@ -1,14 +1,14 @@
```svelte example raised
<script lang="ts">
import { FormField } from "omorphia";
import { Slider } from "omorphia";
import { TextInput } from "omorphia";
import { FormField } from 'omorphia'
import { Slider } from 'omorphia'
import { TextInput } from 'omorphia'
</script>
<FormField label="Favorite number">
<Slider min=0 max=100 value=69 />
<Slider min="0" max="100" value="69" />
</FormField>
<FormField label="Favorite color">
<TextInput placeholder="Enter another color..." />
<TextInput placeholder="Enter another color..." />
</FormField>
```

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

@@ -2,25 +2,25 @@
```svelte example raised
<script lang="ts">
import { NavRow } from "omorphia";
import { NavRow } from 'omorphia'
</script>
<NavRow
level={1}
links={[
{
href: '/Button',
label: 'Button'
},
{
href: '/Chips',
label: 'Chips'
},
{
href: '/NavRow',
label: 'NavRow'
}
]}>
Click for fun
level={1}
links={[
{
href: '/Button',
label: 'Button',
},
{
href: '/Chips',
label: 'Chips',
},
{
href: '/NavRow',
label: 'NavRow',
},
]}>
Click for fun
</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"
import { Pagination } from 'omorphia'
</script>
<Pagination page={20} count={50} />

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

@@ -1,19 +1,17 @@
```svelte example raised
<script lang="ts">
import { Select } from "omorphia";
import { Select } from 'omorphia'
let sortMethod = "downloads"
let sortMethod = 'downloads'
</script>
<Select
color="raised"
options={[
{ value: "", label: "Relevance" },
{ value: "downloads", label: "Downloads" },
{ value: "follows", label: "Followers" },
{ value: "newest", label: "Recently created" },
{ value: "updated", label: "Recently updated" },
]}
bind:value={sortMethod}
/>
options={[
{ value: '', label: 'Relevance' },
{ value: 'downloads', label: 'Downloads' },
{ value: 'follows', label: 'Followers' },
{ value: 'newest', label: 'Recently' },
{ value: 'updated', label: 'Recently updated really fast whoot' },
]}
bind:value={sortMethod} />
```

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

@@ -1,7 +1,7 @@
```svelte example raised
<script lang="ts">
import { Slider } from "omorphia";
import { Slider } from 'omorphia'
</script>
<Slider min=0 max=10 value=4 />
<Slider min="0" max="10" value="4" />
```

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

@@ -1,7 +1,7 @@
```svelte example raised
<script lang="ts">
import { TextInput } from "omorphia";
import IconSearch from 'virtual:icons/heroicons-outline/search'
import { TextInput } from 'omorphia'
import IconSearch from 'virtual:icons/heroicons-outline/search'
</script>
<TextInput placeholder="Enter another color..." />

4
src/routes/getting-started/icons.md
View File

@@ -20,8 +20,8 @@ Then use the icon as if it were a Svelte component:
```svelte example
<script lang="ts">
import IconHeart from 'virtual:icons/heroicons-outline/heart'
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
<p> That's lovely <IconHeart height="14px" />! </p>
<p>That's lovely <IconHeart height="14px" />!</p>
```

2
src/routes/getting-started/illustrations.md
View File

@@ -14,7 +14,7 @@ Import the SVG in the `<script>` of your svelte file, and treat the illustration
```svelte
<script>
import NoData from '$assets/images/illustrations/undraw_no_data.svg'
import NoData from '$assets/images/illustrations/undraw_no_data.svg'
</script>
<NoData />

33
src/routes/getting-started/utils.md
View File

@@ -14,16 +14,17 @@ The `markdown` parser is designed for bodies of markdown text and supports image
```svelte example
<script lang="ts">
import { markdown } from "omorphia/utils"
import { markdown } from 'omorphia/utils'
const source = '## Example markdown \n\
const source =
'## Example markdown \n\
This is **some** *text*! \n\
#### An image \n\
<img src="https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png" />'
</script>
<div class="card markdown">
{@html markdown(source)}
{@html markdown(source)}
</div>
```
@@ -33,9 +34,9 @@ The `markdownInline` parser is perfect for translations and short bios. It doesn
```svelte example raised
<script lang="ts">
import { markdownInline } from "omorphia/utils"
import { markdownInline } from 'omorphia/utils'
const source = "This is some **bolded** and *italicized* text."
const source = 'This is some **bolded** and *italicized* text.'
</script>
<p>{@html markdownInline(source)}</p>
@@ -45,7 +46,7 @@ The `markdownInline` parser is perfect for translations and short bios. It doesn
```svelte example raised
<script lang="ts">
import { ago } from 'omorphia/utils';
import { ago } from 'omorphia/utils'
</script>
<p>Something happened {ago(Date.now())}.</p>
@@ -60,19 +61,19 @@ The `Permissions` class provides an easy way to manage user permissions.
```svelte example raised
<script lang="ts">
import { Permissions } from 'omorphia/utils'
import { Permissions } from 'omorphia/utils'
const permissions = new Permissions(128) // Can be integer or 'ALL'
const permissions = new Permissions(128) // Can be integer or 'ALL'
</script>
<p>
<input type="checkbox" bind:checked={permissions.uploadVersions} id="ex-1"/>
<label for="ex-1">Can edit versions</label><br>
<input type="checkbox" bind:checked={permissions.deleteProject} id="ex-2"/>
<label for="ex-2">Can delete project</label><br><br>
<input type="checkbox" bind:checked={permissions.uploadVersions} id="ex-1" />
<label for="ex-1">Can edit versions</label><br />
<input type="checkbox" bind:checked={permissions.deleteProject} id="ex-2" />
<label for="ex-2">Can delete project</label><br /><br />
Integer: {permissions.toInteger()}<br>
Can access settings page: {permissions.settingsPage}
Integer: {permissions.toInteger()}<br />
Can access settings page: {permissions.settingsPage}
</p>
```
@@ -82,8 +83,8 @@ The `formatVersions` function provides an easy way to parse a project's versions
```svelte example raised
<script lang="ts">
import { formatVersions } from 'omorphia/utils';
import { formatVersions } from 'omorphia/utils'
</script>
<p>{formatVersions(["1.18", "1.18.1", "1.18.2", "1.17.1"])}</p>
<p>{formatVersions(['1.18', '1.18.1', '1.18.2', '1.17.1'])}</p>
```

2
src/routes/index.md
View File

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