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

Refactor folder structure

Browse Source
This commit is contained in:
venashial
2022-06-17 19:58:01 -07:00
parent 8204139df8
commit 137fbb638b
110 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
docs/routes/__layout.svelte Normal file
View File

@@ -0,0 +1,73 @@
<script context="module" lang="ts">
import { addMessages, init } from 'svelte-intl-precompile'
import en from '$locales/en'
addMessages('en', en)
init({
initialLocale: 'en',
fallbackLocale: 'en',
})
</script>
<script lang="ts">
import 'omorphia/styles.postcss'
import '../styles/prism-one-dark.css'
import '../styles/gh-markdown.postcss'
import Sidebar from '../components/Sidebar.svelte'
import Header from '../components/Header.svelte'
</script>
<div class="app theme-light">
<Header />
<Sidebar />
<main class="app__content">
<article>
<slot />
</article>
</main>
</div>
<style lang="postcss">
:global {
html {
overflow-y: scroll;
}
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);
}
}
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
background-color: var(--color-bg);
--sidebar-width: 275px;
&__content {
@media (--md) {
padding-left: var(--sidebar-width);
}
overflow-x: hidden;
overflow-y: auto;
article {
max-width: 800px;
padding-block: 9rem 4rem;
padding-inline: 24px;
@media (--sm) {
padding-inline: 48px;
padding-block: 9rem 24px;
}
}
}
}
</style>

15
docs/routes/classes/Actions.md Normal file
View File

@@ -0,0 +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'
</script>
<div class="actions">
<Button><IconHeartSolid /> Unfollow</Button>
<span class="stat">
<IconCalendar />
Updated 12 days ago
</span>
</div>
```

5
docs/routes/classes/Base.md Normal file
View File

@@ -0,0 +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>
```

33
docs/routes/classes/Card.md Normal file
View File

@@ -0,0 +1,33 @@
### A simple example
```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>
</div>
```
### A more complex example
```svelte example
<script lang="ts">
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" />
<Avatar size="md" floatUp />
<h1 class="title">Project</h1>
<p class="summary">A project that has a description right here.</p>
</div>
```

13
docs/routes/classes/Divider.md Normal file
View File

@@ -0,0 +1,13 @@
```svelte example raised hideStyle
Some words could go here.
<hr class="divider" />
And some other words could go here.
<style>
.example__source__code {
flex-direction: column;
}
</style>
```

10
docs/routes/classes/InfoTable.md Normal file
View File

@@ -0,0 +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>
```

22
docs/routes/classes/Link.md Normal file
View File

@@ -0,0 +1,22 @@
### Single example
```svelte example raised
<a class="link" href="#place"> Go somewhere! </a>
```
### Group example
```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'
</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
docs/routes/classes/Member.md Normal file
View File

@@ -0,0 +1,13 @@
```svelte example raised
<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
docs/routes/classes/Stat.md Normal file
View File

@@ -0,0 +1,32 @@
### Single Example
```svelte example raised
<script>
import IconStar from 'virtual:icons/heroicons-outline/star'
</script>
<div class="stat">
<IconStar />
123K stars
</div>
```
### Group Example
```svelte example raised
<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
docs/routes/classes/Tags.md Normal file
View File

@@ -0,0 +1,15 @@
```svelte example raised
<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
docs/routes/classes/Title.md Normal file
View File

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

15
docs/routes/components/Avatar.md Normal file
View File

@@ -0,0 +1,15 @@
Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
```svelte example raised
<script lang="ts">
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="sm" />
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
```

10
docs/routes/components/Badge.md Normal file
View File

@@ -0,0 +1,10 @@
```svelte example raised
<script lang="ts">
import { Badge } from 'omorphia'
</script>
<Badge color="red" label="Tomato" />
<Badge color="yellow" label="Squash" />
<Badge color="green" label="Lettuce" />
<Badge label="Onion" />
```

47
docs/routes/components/Button.md Normal file
View File

@@ -0,0 +1,47 @@
### Single example
```svelte example
<script lang="ts">
import { Button } from 'omorphia'
import IconDownload from 'virtual:icons/heroicons-outline/download'
</script>
<Button color="raised"><IconDownload /> Download</Button>
```
### Color variants example
```svelte example raised
<script lang="ts">
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>
</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>
```

20
docs/routes/components/Checkbox.md Normal file
View File

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

36
docs/routes/components/CheckboxList.md Normal file
View File

@@ -0,0 +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'
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',
},
]} />
Selected: {selected}
```

21
docs/routes/components/CheckboxVirtualList.md Normal file
View File

@@ -0,0 +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'
let options = Array(100)
.fill({})
.map((option) => ({
label: 'Star-' + uniqueId(),
icon: IconStar,
value: uniqueId(),
}))
let selected = ['2', '6']
</script>
<CheckboxVirtualList bind:value={selected} {options} />
Selected: {selected}
```

47
docs/routes/components/Chips.md Normal file
View File

@@ -0,0 +1,47 @@
### Simple example
```svelte example raised
<script lang="ts">
import { Chips } from 'omorphia'
</script>
<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'
let foo = 'modpack'
</script>
<Chips
neverEmpty
bind:value={foo}
options={[
{
label: 'Mod',
value: 'mod',
},
{
label: 'Modpack',
value: 'modpack',
},
{
label: 'World',
value: 'world',
},
]} />
```

12
docs/routes/components/Field.md Normal file
View File

@@ -0,0 +1,12 @@
```svelte example raised
<script lang="ts">
import { Field, Slider, TextInput } from 'omorphia'
</script>
<Field label="Favorite number" let:id>
<Slider min="0" max="100" value="69" {id} />
</Field>
<Field label="Favorite color" helper="Pick whatever color you like the most" let:id>
<TextInput placeholder="Enter another color..." {id} />
</Field>
```

13
docs/routes/components/Modal.md Normal file
View File

@@ -0,0 +1,13 @@
```svelte example raised
<script lang="ts">
import { Modal, Button } from 'omorphia'
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
</script>
<Modal title="Example modal" danger cancelButton let:trigger>
<Button on:click={trigger} slot="trigger">Open modal</Button>
<p>Secret message goes here!</p>
<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
</Modal>
```

9
docs/routes/components/ModalDeletion.md Normal file
View File

@@ -0,0 +1,9 @@
```svelte example raised
<script lang="ts">
import { ModalDeletion, Button } from 'omorphia'
</script>
<ModalDeletion type="account" key="venashial" let:trigger>
<Button slot="trigger" color="danger" on:click={trigger}>Delete account</Button>
</ModalDeletion>
```

56
docs/routes/components/NavRow.md Normal file
View File

@@ -0,0 +1,56 @@
`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).
### Query example
```svelte example
<script lang="ts">
import { NavRow } from 'omorphia'
</script>
<div class="card card--strip card--pad-x">
<NavRow
level={1}
query={'tab'}
links={[
{
href: '',
label: 'All',
},
{
href: 'mods',
label: 'Mods',
},
{
href: 'modpacks',
label: 'Modpacks',
},
]} />
</div>
```
### Route example
```svelte example
<script lang="ts">
import { NavRow } from 'omorphia'
</script>
<div class="card card--strip card--pad-x">
<NavRow
level={1}
links={[
{
href: '/Button',
label: 'Button',
},
{
href: '/Chips',
label: 'Chips',
},
{
href: '/NavRow',
label: 'NavRow',
},
]} />
</div>
```

9
docs/routes/components/Pagination.md Normal file
View File

@@ -0,0 +1,9 @@
Use pagination to show a set of page numbers and navigation directions to move through paginated data.
```svelte example
<script lang="ts">
import { Pagination } from 'omorphia'
</script>
<Pagination page={20} count={500} />
```

17
docs/routes/components/Select.md Normal file
View File

@@ -0,0 +1,17 @@
```svelte example raised
<script lang="ts">
import { Select } from 'omorphia'
let sortMethod = 'downloads'
</script>
<Select
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} />
```

7
docs/routes/components/Slider.md Normal file
View File

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

9
docs/routes/components/TextInput.md Normal file
View File

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

36
docs/routes/getting-started/configure.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Configure
---
To make use of the built-in icons, styles, and plugins in omorphia, you will need to update your project's 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')
```

32
docs/routes/getting-started/css.md Normal file
View File

@@ -0,0 +1,32 @@
---
title: Writing CSS
---
## Conventions
### Avoid inconsistent CSS units
Prefer using `rem` units, using only whole and half units, eg. `2rem` or `1.5rem`. If you need a specific pixel (`px`) measurement, use `px` and add comment explaining why you used it. The one exception is that `0.25rem` is allowed.
> Using `rem` units lets you change the scale of the UI by simply changing the body font size.
### Always use `HSL` colors
### All colors should be theme variables
## Abilities
Omorphia leverages PostCSS to allow you to write in future-standards-compliant CSS. Browse [the CSSWG drafts](https://cssdb.org/) to see what is possible (not including stage 0).
Notable features:
- [Nesting](https://www.w3.org/TR/css-nesting-1/#example-aecb8796)
- [Gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
- [`clamp` function](<https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()>)
- [Custom Media Queries](https://www.w3.org/TR/mediaqueries-5/#example-532b0adb)
- [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)
- [place-content](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content)
## Styles
Conform to [BEM styling](http://getbem.com/introduction/) wherever possible. When working in components, you may want to leverage [Svelte's conditional class shorthand](https://svelte.dev/tutorial/class-shorthand) instead of BEM's modifier class name format.

38
docs/routes/getting-started/generator.md Normal file
View File

@@ -0,0 +1,38 @@
---
title: Generator plugin
---
The generator plugin creates static files from API responses to increase performance and perform tasks that would not be possible on the client. It regenerates files every 7 days, or when the plugin settings change.
### Current options
- `projectColors` (false) generates colors for every project
- `tags` (false) copies & parses tags from API
- `gameVersions` copes game versions from API
- `landingPage` gets icon urls for top 100 mods
> All options are disabled by default
## Configuration
```js
import Generator from 'omorphia/plugins/generator'
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
vite: {
plugins: [
Generator({
projectColors: true,
tags: true,
gameVersions: true,
landingPage: true,
}),
],
},
},
}
export default config
```

27
docs/routes/getting-started/icons.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Icons
---
## Choosing icons
The follwing icon packs are included with omorphia:
`heroicons-outline` `lucide` `fa-regular` `heroicons-solid` `carbon` `simple-icons`
Aim to find icons from `heroicons-outline` first, and then from the following packs if you can't find what you are looking for. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
## Using icons
Import an icon in the `<script>` tag of your component.
Then use the icon as if it were a Svelte component:
> You can style the icon with the `.icon` class. Note, you will have to use the `:global(.icon)` selector in Svelte components.
```svelte example
<script lang="ts">
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
<p>That's lovely! <IconHeart /></p>
```

21
docs/routes/getting-started/illustrations.md Normal file
View File

@@ -0,0 +1,21 @@
---
title: Using illustrations
---
Find an illustration from [unDraw](https://undraw.co/illustrations) and download it as an SVG.
Put the illustration in the `src/assets/images/illustrations` folder. Rename it to `undraw_` + the illustration slug.
Replace colors in the SVG with CSS variables such as `var(--color-brand)` and `var(--color-raised)`. For colors that are the same as the font color, use `currentColor`.
Add the `.illustration` class to the SVG
Import the SVG in the `<script>` of your svelte file, and treat the illustration as a Svelte component:
```svelte
<script>
import NoData from '$assets/images/illustrations/undraw_no_data.svg'
</script>
<NoData />
```

94
docs/routes/getting-started/utils.md Normal file
View File

@@ -0,0 +1,94 @@
---
title: Built-in utilities
---
## Markdown
Use the markdown utilities to parse markdown text into HTML. Both markdown parsers have HTML sanitization built-in.
### Body parser
The `markdown` parser is designed for bodies of markdown text and supports images, tables, lists, and youtube `<iframe>`s.
> Use the `.markdown` class on the element containing your parsed markdown.
````svelte example
<script lang="ts">
import { markdown } from 'omorphia/utils'
const source =
'## Example markdown \n\
This is **some** *text*! \n\
`console.log("test")` \n\
#### An image \n\
<img src="https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png" />'
</script>
<div class="card markdown">
{@html markdown(source)}
</div>
<div class="card markdown">
{@html markdown('test\n```js\nconsole.log("test")\n```')}
</div>
````
### Inline parser
The `markdownInline` parser is perfect for translations and short bios. It doesn't allow complex elements such as images or tables.
```svelte example raised
<script lang="ts">
import { markdownInline } from 'omorphia/utils'
const source = 'This is some **bolded** and *italicized* text.'
</script>
<p>{@html markdownInline(source)}</p>
```
## Human readable "ago" times
```svelte example raised
<script lang="ts">
import { ago } from 'omorphia/utils'
</script>
<p>Something happened {ago(Date.now())}.</p>
<p>Something happened {ago(new Date(Date.now() - 1000 * 60 * 60 * 2))}.</p>
<p>Something happened {ago(new Date(Date.now() - 1000 * 60 * 60 * 24 * 7))}.</p>
<p>Something happened {ago(new Date(Date.now() - 1000 * 60 * 60 * 24 * 7 * 5))}.</p>
```
## Permissions
The `Permissions` class provides an easy way to manage user permissions.
```svelte example raised
<script lang="ts">
import { Permissions } from 'omorphia/utils'
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 />
Integer: {permissions.toInteger()}<br />
Can access settings page: {permissions.settingsPage}
</p>
```
## Versions
The `formatVersions` function provides an easy way to parse a project's versions into a readable string.
```svelte example raised
<script lang="ts">
import { formatVersions } from 'omorphia/utils'
</script>
<p>{formatVersions(['1.18', '1.18.1', '1.18.2', '1.17.1'])}</p>
```

37
docs/routes/index.md Normal file
View File

@@ -0,0 +1,37 @@
---
title: Introduction
---
## What is Omorphia?
Omorphia is Modrinth's style and reusable component library for use in all of its frontend applications, including [knossos](https://github.com/modrinth/knossos) (modrinth.com), [theseus](https://github.com/modrinth/theseus) (launcher), and planned projects such as Modrinth's in-house auth and ad-server.
It uses [Svelte](https://svelte.dev/) to deliver the best performance with the least boilerplate.
## Getting started
Adding Omorphia to your project is as easy as:
```bash
pnpm add omorphia
```
### Components
Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
```svelte example raised
<script lang="ts">
import { Button } from 'omorphia'
</script>
<Button color="primary">I'm a button!</Button>
```
For more information on each component, check out the pages on the sidebar navigation.
> To get Svelte language support in your code editor, [use this list of extensions.](https://sveltesociety.dev/tools#editor-support)
### Using icons and styles
Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.