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

Refactor setup documentation

Browse Source
This commit is contained in:
venashial
2022-06-25 12:32:03 -07:00
parent 8627132d6a
commit 123de56f38
14 changed files with 410 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/routes/usage/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/usage/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/usage/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/usage/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 />
```

116
docs/routes/usage/utils.md Normal file
View File

@@ -0,0 +1,116 @@
---
title: Built-in utilities
---
## API requests
Use the `send` function to make API requests.
```svelte example raised
<script lang="ts">
import { send } from 'omorphia/utils'
const project = send<'getProject'>('GET', 'project/sodium')
</script>
{#await project}
fetching...
{:then project}
{project.downloads} downloads
{/await}
```
## 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\
![](https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png)'
</script>
<div class="card markdown">
{@html markdown(source)}
{@html markdown(
` | Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |`
)}
{@html markdown('```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>
```