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

docs: Improve header + sidebar

Browse Source 
docs: Create workflows
lib: Start pagination
This commit is contained in:
venashial
2022-03-12 01:34:09 -08:00
parent de536d7305
commit b69ff6ca8a
28 changed files with 445 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.html
View File

@@ -3,11 +3,11 @@
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.png" />
<link rel="icon" href="%svelte.assets%/assets/omorphia.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
<div>%svelte.body%</div>
%svelte.body%
</body>
</html>

59
src/lib/components/elements/Pagination.svelte Normal file
View File

@@ -0,0 +1,59 @@
<script lang="ts">
// TODO: Modify to match new button props
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'
import IconMinus from 'virtual:icons/heroicons-outline/minus'
import Button from "./buttons/Button.svelte";
import { createEventDispatcher } from 'svelte'
export let page: number;
export let count: number;
$: options = count > 4
? page + 3 >= count
? [1, '-', count - 4, count - 3, count - 2, count - 1, count]
: page > 4
? [1, '-', page - 1, page, page + 1, '-', count]
: [1, 2, 3, 4, 5, '-', count]
: Array.from({ length: count }, (_, i) => i + 1)
const dispatch = createEventDispatcher();
</script>
{#if count > 1}
<div class="pagination">
<Button icon={IconArrowLeft} color="raised" on:click={() => dispatch('change', page - 1)} disabled={page <= 1} title="Last page"/>
{#each options as option}
{#if option === '-'}
<IconMinus class="pagination__dash" />
{:else}
<Button label={option} color={option === page ? 'brand' : 'raised'} on:click={() => dispatch('change', option)} evenPadding={true} />
{/if}
{/each}
<Button icon={IconArrowRight} color="raised" on:click={() => dispatch('change', page + 1)} disabled={page >= count} title="Next page" />
</div>
{/if}
<style lang="postcss">
.pagination {
align-self: center;
display: flex;
grid-gap: 0.5rem;
align-items: center;
:global(&__dash) {
margin: 0 0.5rem;
width: 1rem;
height: 1rem;
}
@media (width <= 500px) {
grid-gap: 0.25rem;
:global(> *:nth-child(4)), :global(> *:nth-child(6)) {
display: none;
}
}
}
</style>

32
src/routes/__layout.svelte
View File

@@ -1,12 +1,14 @@
<script lang="ts">
import "$lib/styles/variables.postcss"
import "$lib/styles/themes.postcss"
import "./_docs/styles/prism-one-dark.css"
import "./_docs/styles/gh-markdown.css"
import Sidebar from "./_docs/Sidebar.svelte"
import "./_internal/styles/prism-one-dark.css"
import "./_internal/styles/gh-markdown.css"
import Sidebar from "./_internal/components/Sidebar.svelte"
import Header from './_internal/components/Header.svelte'
</script>
<div class="app">
<Header />
<Sidebar />
<main class="app__content">
<slot />
@@ -18,28 +20,34 @@
margin: 0;
font-size: var(--body-font-size);
font-family: var(--body-font);
overflow-y: scroll;
--accent-color: hsl(331, 60%, 45%);
--accent-color-transparent: hsla(331, 60%, 45%, 0.15);
}
.app {
display: grid;
min-height: 100vh;
--sidebar-size: 250px;
padding-left: var(--sidebar-size);
overflow: hidden;
--sidebar-width: 250px;
--header-height: 56px;
@media (width <= 500px) {
display: flex;
flex-direction: column;
}
overflow: hidden;
:global(a) {
color: var(--accent-color);
&:hover {
text-decoration: underline;
}
}
&__content {
padding: 5rem max(8vw, 1rem);
max-width: 100%;
padding: var(--header-height) 0 0 var(--sidebar-width);
overflow-x: hidden;
overflow-y: auto;
:global(a) {
color: hsl(216, 50%, 50%);
}
background-color: hsl(220, 13%, 91%);
:global(h1) {
font-size: 54px;

4
src/routes/_docs/Header.svelte
View File

@@ -1,4 +0,0 @@
<header>
<div class="site-title">Kleos</div>
</header>

3
src/routes/_internal/assets/omorphia.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
<path stroke="var(--accent-color)" stroke-width="2" d="M15.933 18.394c-3.261-.286-11.074-1.466-14.644-8.469m22.422 0c-2.114 4.291-10.8 11.927-16.017 13.026m6.18-21.87C10.268 3.06 5.496 9.72 5.633 14.388m17.732-5.664c-2.232-1.888-9.562-5.15-16.943 1.716m8.652-3.947c1.888 1.087 5.492 3.288 4.806 8.369m-9.956 2.787c-.286-1.888-.103-6.213 2.918-8.41m4.12 4.977a2.43 2.43 0 0 0-.075-.4m0 0c-.528-1.965-2.354-5.652-6.963-5.908m6.963 5.908c-2.856 2.601-6.11 3.11-7.65 2.975m7.65-2.975c.752-.685 1.702-2.374 2.36-3.376m-8.98 2.575c.687.744 3.468 2.369 4.978 2.231M24 12.5C24 18.851 18.851 24 12.5 24S1 18.851 1 12.5 6.149 1 12.5 1 24 6.149 24 12.5Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 728 B

79
src/routes/_internal/components/Header.svelte Normal file
View File

@@ -0,0 +1,79 @@
<script lang="ts">
import OmorphiaLogo from '../assets/omorphia.svg'
import IconLogoGithub from 'virtual:icons/carbon/logo-github'
import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2'
import { onMount } from 'svelte'
let headerElement
onMount(() => {
let lastScrollTop: number
window.addEventListener('scroll', function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
if (scrollTop > lastScrollTop) {
headerElement.style.top = 'calc(var(--header-height) * -1)'
} else {
headerElement.style.top = '0'
}
lastScrollTop = scrollTop
})
})
</script>
<header class="header" bind:this={headerElement}>
<OmorphiaLogo height="32px" width="auto"/>
<div class="header__title">Omorphia</div>
<div class="header__links">
<a href="https://modrinth.com">Modrinth.com</a>
<span class="spacer-dot"></span>
<a href="https://rewrite.modrinth.com/discord"><IconChat /></a>
<a href="https://github.com/modrinth/omorphia"><IconLogoGithub /></a>
</div>
</header>
<style lang="postcss">
.header {
display: flex;
grid-gap: 10px;
align-items: center;
padding: 0 32px;
position: fixed;
height: var(--header-height);
left: 0;
right: 0;
top: 0;
z-index: 10;
background-color: hsl(0, 0%, 100%);
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;
&__title {
font-size: 20px;
font-weight: 600;
}
&__links {
margin-left: auto;
display: flex;
grid-gap: 16px;
align-items: center;
:global(svg) {
height: 22px;
width: auto;
}
a:not(:hover) {
color: unset;
}
}
}
.spacer-dot {
background-color: hsla(0, 0%, 0%, 0.2);
border-radius: 999px;
width: 5px;
aspect-ratio: 1 / 1;
}
</style>

13
src/routes/_docs/Sidebar.svelte → src/routes/_internal/components/Sidebar.svelte
View File

@@ -8,7 +8,7 @@
<div class="section">
<span class="section__title">Components</span>
{#each ['buttons'] as component}
{#each ['buttons', 'pagination'] as component}
<a href="/components/{component}" class="section__link">{component}</a>
{/each}
</div>
@@ -19,11 +19,11 @@
display: flex;
flex-direction: column;
grid-gap: 2rem;
background-color: hsl(216, 10%, 30%);
background-color: hsl(220, 15%, 40%);
color: hsl(216, 10%, 80%);
padding: 1.5rem;
padding: 5.5rem 1.5rem 1.5rem;
height: 100vh;
width: calc(var(--sidebar-size) - 3rem);
width: calc(var(--sidebar-width) - 3rem);
position: fixed;
left: 0;
top: 0;
@@ -42,6 +42,11 @@
text-transform: capitalize;
color: hsl(216, 10%, 90%);
text-decoration: none;
&:hover {
color: white;
text-decoration: underline;
}
}
}
}

33
src/routes/_internal/layout/page.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script lang="ts">
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
import { page } from '$app/stores'
export let title
let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
</script>
<svelte:head>
<title>{title ? `${title} - Omorphia` : 'Omorphia'}</title>
</svelte:head>
<article>
{#if title}<h1>{title}</h1>{/if}
<a class="edit-link" href={pageUrl}>
<IconPencil/>
Edit this page on GitHub</a>
<slot/>
</article>
<style lang="postcss">
article {
max-width: 800px;
padding: 5rem max(8vw, 1rem);
}
.edit-link {
display: flex;
align-items: center;
grid-gap: 8px;
margin-bottom: 64px;
}
</style>

17
src/routes/_docs/styles/gh-markdown.css → src/routes/_internal/styles/gh-markdown.css
View File

@@ -364,4 +364,21 @@ pre {
pre code, pre tt {
background-color: transparent;
border: none;
}
/* Custom styles */
h1 {
font-weight: 600;
}
h2 {
font-weight: 500;
}
blockquote {
border-left: 4px solid var(--accent-color);
padding: 15px 15px;
color: unset;
background-color: var(--accent-color-transparent);
}

0
src/routes/_docs/styles/prism-one-dark.css → src/routes/_internal/styles/prism-one-dark.css
View File

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

@@ -1,13 +1,11 @@
---
title: Buttons
---
<script lang="ts">
import Button from "$lib/components/elements/buttons/Button.svelte"
</script>
<svelte:head>
<title>Buttons - Kleos</title>
</svelte:head>
# Buttons
<Button>Eat cake</Button>
<Button size="sm" color="primary">Small piece</Button>

11
src/routes/components/pagination.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: Pagination
---
<script lang="ts">
import Pagination from "$lib/components/elements/Pagination.svelte"
</script>
TODO
<Pagination page={20} count={50} />

8
src/routes/getting-started/css.md
View File

@@ -1,8 +1,6 @@
<svelte:head>
<title>CSS - Kleos</title>
</svelte:head>
# CSS Configuration
---
title: CSS Configuration
---
Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.

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

@@ -1,13 +1,11 @@
---
title: Icons
---
<script>
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
<svelte:head>
<title>Icons - Kleos</title>
</svelte:head>
# Icons
Use [unplugin-icons](https://github.com/antfu/unplugin-icons) to import icons as Svelte components.
## Installation

28
src/routes/index.md
View File

@@ -1,30 +1,28 @@
<svelte:head>
<title>Introduction - Kleos</title>
</svelte:head>
---
title: Introduction
---
# Introduction
## What is Omorphia?
> Kleos is in early development, and not ready for use in any application. Contribute to it on [GitHub](https://github.com/modrinth/kleos).
> Omorphia is in early development, and not ready for use in any application. Contribute to it on [GitHub](https://github.com/modrinth/omorphia).
### What is Kleos?
Kleos 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 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
## Getting started
Adding Kleos to your project is as easy as:
Adding Omorphia to your project is as easy as:
```bash
pnpm add kleos
pnpm add omorphia
```
#### Components
### Components
Import a component with:
```js
import { Button } from "kleos"
import { Button } from "omorphia"
```
Then, use it in your HTML:
@@ -35,8 +33,8 @@ Then, use it in your HTML:
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.](https://sveltesociety.dev/tools#editor-support)
> To get Svelte language support in your code editor, [use this list of extensions.](https://sveltesociety.dev/tools#editor-support)
#### Icons, Styles, and more
### Using icons and styles
Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.