You've already forked AstralRinth
forked from didirus/AstralRinth
Refactor setup documentation
This commit is contained in:
venashial
@@ -1,14 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores'
|
||||
|
||||
import IconMenu from 'virtual:icons/lucide/menu'
|
||||
|
||||
const cleanPath = (it) => it.replace(/\.\.\/routes\/.*\//, '').replace('.md', '')
|
||||
|
||||
const components = Object.keys(import.meta.glob('../routes/components/**'))
|
||||
.map((it) => it.replace('../routes/components/', '').replace('.md', ''))
|
||||
.map(cleanPath)
|
||||
.sort()
|
||||
|
||||
const classes = Object.keys(import.meta.glob('../routes/classes/**'))
|
||||
.map((it) => it.replace('../routes/classes/', '').replace('.md', ''))
|
||||
.map(cleanPath)
|
||||
.sort()
|
||||
|
||||
let slideIn = false
|
||||
@@ -21,14 +22,17 @@
|
||||
<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/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>
|
||||
<a href="/getting-started/generator" class="section__link">Generator plugin</a>
|
||||
<a href="/setup" class="section__link">Setup</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<span class="section__title">Usage</span>
|
||||
<a href="/usage/icons" class="section__link">Using Icons</a>
|
||||
<a href="/usage/css" class="section__link">Writing CSS</a>
|
||||
<a href="/usage/illustrations" class="section__link">Illustrations</a>
|
||||
<a href="/usage/utils" class="section__link">Built-in utilities</a>
|
||||
<a href="/usage/generator" class="section__link">Generator plugin</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
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.js'
|
||||
|
||||
/** @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.cjs')
|
||||
```
|
||||
@@ -2,36 +2,20 @@
|
||||
title: Introduction
|
||||
---
|
||||
|
||||
## What is Omorphia?
|
||||
## Overview
|
||||
|
||||
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.
|
||||
Omorphia is Modrinth's component, style, and utility library for Svelte projects. It includes:
|
||||
|
||||
- 🧩 Typed components which enhance HTML elements and provide a consistent UI
|
||||
- 🎨 CSS classes to easily style elements with a coherent style
|
||||
- 🧰 Typed utilities to solve common tasks quick and dependably
|
||||
- ⚙️ Configuration for SvelteKit and PostCSS to simplify setups
|
||||
- 🚚 A Rollup plugin to generate a cache of heavily used API requests and OpenAPI types
|
||||
|
||||
Omorphia is used in [Knossos](https://github.com/modrinth/knossos) (modrinth.com) and [Theseus](https://github.com/modrinth/theseus) (Minecraft launcher).
|
||||
|
||||
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.
|
||||
Follow the instructions on the [➜ setup page 🛠️](/setup).
|
||||
|
||||
183
docs/routes/setup.md
Normal file
183
docs/routes/setup.md
Normal file
@@ -0,0 +1,183 @@
|
||||
---
|
||||
title: Setup
|
||||
---
|
||||
|
||||
## `0.` Prerequisites
|
||||
|
||||
First install the following:
|
||||
|
||||
- [Node 16.x](https://docs.volta.sh/guide/getting-started) or higher
|
||||
- [PNPM](https://pnpm.io/installation) (required for Modrinth projects)
|
||||
|
||||
## `1.` Create a SvelteKit project
|
||||
|
||||
Run the following command to create a SvelteKit project:
|
||||
|
||||
```bash
|
||||
pnpm create svelte
|
||||
```
|
||||
|
||||
Follow the instructions to install dependencies and setup git.
|
||||
|
||||
## `2.` Add Omorphia to your project
|
||||
|
||||
```bash
|
||||
pnpm add omorphia
|
||||
```
|
||||
|
||||
## `3.` Setup translations
|
||||
|
||||
Install the translations submodule:
|
||||
|
||||
```bash
|
||||
git submodule add https://github.com/modrinth/translations locales/
|
||||
```
|
||||
|
||||
Install `svelte-intl-precompile`:
|
||||
|
||||
```bash
|
||||
pnpm add svelte-intl-precompile -D
|
||||
```
|
||||
|
||||
Add translations in `src/routes/__layout.svelte`:
|
||||
|
||||
```html
|
||||
<script context="module" lang="ts">
|
||||
import { init, waitLocale, t, getLocaleFromAcceptLanguageHeader } from 'svelte-intl-precompile'
|
||||
import { registerAll, availableLocales } from '$locales'
|
||||
|
||||
registerAll()
|
||||
|
||||
export const load: import('@sveltejs/kit').Load = async ({ session }) => {
|
||||
init({
|
||||
fallbackLocale: 'en',
|
||||
initialLocale: getLocaleFromAcceptLanguageHeader(session.acceptLanguage, availableLocales),
|
||||
})
|
||||
await waitLocale()
|
||||
|
||||
return {}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## `4.` Configure SvelteKit
|
||||
|
||||
Add the following parts to your `svelte.config.js` file:
|
||||
|
||||
```js
|
||||
import adapter from '@sveltejs/adapter-auto'
|
||||
import { preprocess, plugins } from 'omorphia/config/svelte'
|
||||
import precompileIntl from 'svelte-intl-precompile/sveltekit-plugin'
|
||||
import { Generator } from 'omorphia/plugins'
|
||||
import path from 'path'
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: [preprocess],
|
||||
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
|
||||
alias: {
|
||||
$generated: path.resolve('./generated'),
|
||||
$stores: path.resolve('./src/stores'),
|
||||
},
|
||||
|
||||
vite: {
|
||||
plugins: [
|
||||
...plugins,
|
||||
precompileIntl('locales'),
|
||||
Generator({
|
||||
gameVersions: true,
|
||||
openapi: true,
|
||||
// Add more if needed
|
||||
}),
|
||||
],
|
||||
|
||||
server: {
|
||||
fs: {
|
||||
allow: ['generated'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
Create a `src/stores/account.ts` file with a `token` store export:
|
||||
|
||||
```ts
|
||||
import { writable } from 'svelte/store'
|
||||
|
||||
export const token = writable('')
|
||||
```
|
||||
|
||||
## `5.` Configure 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.cjs')
|
||||
```
|
||||
|
||||
## `6.` Setup styles
|
||||
|
||||
Import styles in `src/routes/__layout.svelte`:
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import 'omorphia/styles.postcss'
|
||||
</script>
|
||||
```
|
||||
|
||||
Add the `base` class and a theme to the `<body>` tag in `src/app.html`:
|
||||
|
||||
```html
|
||||
<body class="base theme-light">
|
||||
%sveltekit.body%
|
||||
</body>
|
||||
```
|
||||
|
||||
## `7.` Using Omorphia
|
||||
|
||||
### Developing
|
||||
|
||||
Start the development server with:
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
> To get Svelte language support in your code editor, [use this list of extensions.](https://sveltesociety.dev/tools#editor-support)
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
### Utils
|
||||
|
||||
Use a utility by importing from `omorphia/utils`.
|
||||
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { ago } from 'omorphia/utils'
|
||||
</script>
|
||||
|
||||
{ago(Date.now() - 100000)}
|
||||
```
|
||||
|
||||
### Using icons and styles
|
||||
|
||||
Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
|
||||
Reference in New Issue
Block a user