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

Update style vars + Add examples to docs + Add Avatar, NavRow, Pagination, & Link

Browse Source
This commit is contained in:
venashial
2022-03-20 00:19:51 -07:00
parent de9c62617b
commit 15b7c241ff
34 changed files with 787 additions and 1727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/routes/__layout.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import "$lib/styles/variables.postcss"
import "$lib/styles/themes.postcss"
import "$lib/styles.postcss"
import "./_internal/styles/prism-one-dark.css"
import "./_internal/styles/gh-markdown.css"
import Sidebar from "./_internal/components/Sidebar.svelte"
@@ -21,8 +20,8 @@
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);
--accent-color: hsl(331, 80%, 45%);
--accent-color-transparent: hsla(331, 80%, 45%, 0.15);
}
.app {
@@ -36,13 +35,6 @@
flex-direction: column;
}
:global(a) {
color: var(--accent-color);
&:hover {
text-decoration: underline;
}
}
&__content {
padding: var(--header-height) 0 0 var(--sidebar-width);
overflow-x: hidden;
@@ -57,5 +49,15 @@
line-height: 1.5;
}
}
@layer base {
:global(a) {
color: var(--accent-color);
&:hover {
text-decoration: underline;
}
}
}
}
</style>

35
src/routes/_internal/components/Example.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
import Prism from 'prismjs';
import 'prism-svelte';
export let background: 'var(--color-raised-bg)' | 'transparent' = 'var(--color-raised-bg)'
export let code = ''
const highlighted = Prism.highlight(code.trim(), Prism.languages.svelte, 'svelte');
</script>
<div class="example theme-light">
<div class="example__preview" style:background={background}>
<slot />
</div>
<pre class="example__code language-">{@html highlighted}</pre>
</div>
<style lang="postcss">
.example {
&__preview {
padding: 16px;
border-radius: var(--rounded-sm-top);
border: solid 2px hsl(0, 0%, 20%);
border-bottom: none;
display: flex;
grid-gap: 16px;
flex-wrap: wrap;
}
&__code {
margin: 0;
border-radius: var(--rounded-sm-bottom) !important;
}
}
</style>

3
src/routes/_internal/components/Sidebar.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
const components = ['button', 'pagination', 'link']
const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar'].sort()
</script>
<nav class="sidebar">
@@ -43,7 +43,6 @@
}
&__link {
text-transform: capitalize;
color: hsl(216, 10%, 90%);
text-decoration: none;

52
src/routes/_internal/layout/page.svelte
View File

@@ -3,15 +3,18 @@
import { page } from '$app/stores'
import { onMount } from 'svelte'
export let title
export let component
export let componentName = $page.url.pathname.includes('components') ? $page.url.pathname.replace('/components/', '') : undefined
export let title = ''
if (!title && componentName) title = componentName
let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
let api
onMount(async () => {
if (component) {
api = (await import(`../../../lib/components/${component}.svelte?raw&api`)).default
if (componentName) {
api = (await import(`../../../lib/components/${componentName}.svelte?raw&api`)).default
}
})
</script>
@@ -27,7 +30,7 @@
Edit this page on GitHub</a>
<slot/>
{#if component && api}
{#if componentName && api}
<div class="extra-info">
{#if api.data.length > 0}
<h2>Properties</h2>
@@ -38,7 +41,6 @@
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Read only</th>
</tr>
</thead>
<tbody>
@@ -46,9 +48,8 @@
<tr>
<td>{prop.name}</td>
<td>{prop.type.type}</td>
<td>{prop.defaultValue}</td>
<td>{prop.description?.replace('null', '') || ''}</td>
<td>{prop.readonly}</td>
<td>{prop.defaultValue ?? ''}</td>
<td>{prop.readonly ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
</tr>
{/each}
</tbody>
@@ -94,6 +95,9 @@
</tbody>
</table>
{/if}
<h2>Import</h2>
<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span> {componentName} <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"omorphia"</span></code></pre>
</div>
{/if}
</article>
@@ -101,7 +105,7 @@
<style lang="postcss">
article {
max-width: 800px;
padding: 5rem max(8vw, 1rem);
padding: 5rem 1rem;
}
.edit-link {
@@ -109,28 +113,30 @@
align-items: center;
grid-gap: 8px;
margin-bottom: 54px;
color: var(--accent-color);
}
.extra-info {
margin-top: 48px;
margin-top: 64px;
}
.api-table {
border-collapse: collapse;
margin-top: -6px;
}
tr {
background-color: transparent;
border: none;
}
.api-table tr {
background-color: transparent;
border: none;
}
tbody {
border: 2px solid grey;
}
.api-table tbody {
border: 2px solid grey;
}
th {
text-transform: uppercase;
font-size: 12.5px;
border: none;
}
.api-table th {
text-transform: uppercase;
font-size: 12.5px;
border: none;
}
</style>

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

@@ -198,6 +198,7 @@ blockquote > :last-child {
table {
padding: 0;
}
table tr {
border-top: 1px solid #cccccc;
background-color: white;
@@ -341,24 +342,13 @@ pre code {
background: transparent;
}
.highlight pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
border-radius: var(--rounded-sm) !important;
}
pre code, pre tt {
@@ -367,7 +357,6 @@ pre code, pre tt {
}
/* Custom styles */
h1 {
font-weight: 600;
}
@@ -381,4 +370,4 @@ blockquote {
padding: 15px 15px;
color: unset;
background-color: var(--accent-color-transparent);
}
}

4
src/routes/_internal/styles/prism-one-dark.css
View File

@@ -68,10 +68,10 @@ pre[class*="language-"] *::selection {
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
padding: 16px;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
border-radius: var(--rounded);
}
/* Inline code */

14
src/routes/components/Avatar.md Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import Avatar from "$lib/components/Avatar.svelte";
import Example from "../_internal/components/Example.svelte"
</script>
<Example code={`<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
<Avatar size="sm" />
<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />`}>
<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
<Avatar size="sm" />
<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />
</Example>

14
src/routes/components/Badge.md Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import Badge from "$lib/components/Badge.svelte";
import Example from "../_internal/components/Example.svelte"
</script>
<Example code={`<Badge color="red" label="Tomato" />
<Badge color="yellow" label="Squash" />
<Badge color="green" label="Lettuce" />
<Badge label="Onion" />`}>
<Badge color="red" label="Tomato" />
<Badge color="yellow" label="Squash" />
<Badge color="green" label="Lettuce" />
<Badge label="Onion" />
</Example>

14
src/routes/components/Button.md Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import Button from "$lib/components/Button.svelte";
import Example from "../_internal/components/Example.svelte"
</script>
<Example code={`<Button>Eat cake</Button>
<Button size="sm" color="primary">Small piece</Button>
<Button size="lg" color="danger">Big part</Button>
<Button disabled>Nice try</Button>`}>
<Button>Eat cake</Button>
<Button size="sm" color="primary">Small piece</Button>
<Button size="lg" color="danger">Big part</Button>
<Button disabled>Nice try</Button>
</Example>

8
src/routes/components/Link.md Normal file
View File

@@ -0,0 +1,8 @@
<script lang="ts">
import Link from "$lib/components/Link.svelte";
import Example from "../_internal/components/Example.svelte"
</script>
<Example code={`<Link href="#clicked">Click for fun</Link>`}>
<Link href="#clicked">Click for fun</Link>
</Example>

46
src/routes/components/NavRow.md Normal file
View File

@@ -0,0 +1,46 @@
<script lang="ts">
import NavRow from "$lib/components/NavRow.svelte";
import Example from "../_internal/components/Example.svelte"
</script>
`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).
<Example code={`
<NavRow
level={1}
links={[
{
href: '/Button',
label: 'Button'
},
{
href: '/Link',
label: 'Link'
},
{
href: '/NavRow',
label: 'NavRow'
}
]}>
Click for fun
</NavRow>
`}>
<NavRow
level={1}
links={[
{
href: '/Button',
label: 'Button'
},
{
href: '/Link',
label: 'Link'
},
{
href: '/NavRow',
label: 'NavRow'
}
]}>
Click for fun
</NavRow>
</Example>

10
src/routes/components/pagination.md → src/routes/components/Pagination.md
View File

@@ -1,12 +1,10 @@
---
title: Pagination
component: Pagination
---
<script lang="ts">
import Pagination from "$lib/components/Pagination.svelte"
import Example from "../_internal/components/Example.svelte"
</script>
Use pagination to show a set of page numbers and navigation directions to move through paginated data.
<Pagination page={20} count={50} />
<Example code={`<Pagination page={20} count={50} />`} background="transparent">
<Pagination page={20} count={50} />
</Example>

14
src/routes/components/button.md
View File

@@ -1,14 +0,0 @@
---
title: Button
component: Button
---
<script lang="ts">
import Button from "$lib/components/Button.svelte";
</script>
<Button>Eat cake</Button>
<Button size="sm" color="primary">Small piece</Button>
<Button size="lg" color="danger">Big part</Button>

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

@@ -1,10 +0,0 @@
---
title: Link
component: Link
---
<script lang="ts">
import Link from "$lib/components/Link.svelte";
</script>
<Link href="#clicked">Click for fun</Link>