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

Update docs examples + Add Select component + Add Card, Base, Title classes

Browse Source
This commit is contained in:
venashial
2022-03-29 00:44:23 -07:00
parent 8c5bf55b51
commit 98baab4d03
41 changed files with 1374 additions and 849 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/Avatar.svelte
View File

@@ -2,7 +2,8 @@
import { onMount } from 'svelte'
import { classCombine } from '$lib/utils/classCombine'
export let src: string | null
/** Optional, as a default icon will be substituted if no image was specified */
export let src: string | undefined
export let size: 'xs' | 'sm' | 'md' | 'lg'
export let circle = false
export let floatUp = false
@@ -85,6 +86,7 @@
&--float-up {
margin-top: calc(var(--size) * (-2 / 3));
z-index: 1;
}
&--circle {

2
src/lib/components/Badge.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export let label = ''
// Supports `green`, `yellow`, `red`, & `gray`
/** Supports `green`, `yellow`, `red`, & `gray` */
export let color = 'gray'
</script>

10
src/lib/components/Button.svelte
View File

@@ -1,18 +1,18 @@
<script lang="ts">
import { classCombine } from '$lib/utils/classCombine'
// The element to be styled as a button
/** The element to be styled as a button */
export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
export let href: string
export let href = ''
if (href) as = 'a'
// Use `value` if the button is an `<input`>
export let value: string
/** Use `value` if the button is an `<input`> */
export let value = ''
export let size: 'sm' | 'md' | 'lg' = 'md'
export let color: 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent'
// Show notification badge in the upper right of button
/** Show notification badge in the upper right of button */
export let badge = false
export let disabled = false

1
src/lib/components/Chips.svelte
View File

@@ -27,7 +27,6 @@
<Button
color={isSelected ? 'primary-light' : undefined}
on:click={() => {
console.log(option)
isSelected && !neverEmpty
? selected = null
: selected = option

15
src/lib/components/Link.svelte
View File

@@ -1,15 +0,0 @@
<script lang="ts">
export let href: string;
</script>
<a {href}><slot /></a>
<style lang="postcss">
a {
color: var(--color-link);
&:hover {
text-decoration: underline;
}
}
</style>

204
src/lib/components/Select.svelte Normal file
View File

@@ -0,0 +1,204 @@
<script lang="ts">
import IconChevronDown from 'virtual:icons/lucide/chevron-down'
import { debounce } from 'throttle-debounce'
import { clickOutside } from 'svelte-use-click-outside'
import { onMount } from 'svelte'
interface Option {
label: string;
value: string | number;
}
export let options: Option[] = []
export let value: string | number
export let selected: Option = options.find((option) => option.value === (value || ''))
export let color = ''
export let label = ''
export let icon = null
let open = false
$: if (selected) {
value = selected.value
}
const minWidth = options
.map(it => it.label || it.value)
.reduce((it, acc) => String(it).length > acc ? it : acc, '')
.length * 9
let shouldOpenUp = false
let element: HTMLElement
const checkShouldOpenUp = debounce(100, false, () => {
if (element) {
const bounding = element.getBoundingClientRect()
shouldOpenUp =
bounding.bottom + 32 * options.length + 16 >
(window.innerHeight || document.documentElement.clientHeight)
}
})
onMount(() => {
checkShouldOpenUp()
window.addEventListener('resize', checkShouldOpenUp)
})
function keydown(event: KeyboardEvent) {
if ((event.key === ' ' || event.key === 'Enter') && !open) {
open = true
} else if (event.key === 'ArrowUp') {
if (selected) {
const index = options.findIndex((option) => option.value === selected.value)
if (index > 0) {
selected = options[index - 1]
}
}
} else if (event.key === 'ArrowDown') {
if (selected) {
const index = options.findIndex((option) => option.value === selected.value)
if (index < options.length - 1) {
selected = options[index + 1]
}
}
} else if ((event.key === 'Escape' || event.key === 'Enter') && open) {
open = false
}
}
</script>
<div
class="select select--color-{color}"
class:is-open={open}
class:select--opens-up={shouldOpenUp}
use:clickOutside={() => {
open = false;
}}
bind:this={element}
tabindex="0"
on:keydown={keydown}
>
<div
class="select__input"
on:click={() => {
open = !open;
}}
>
{#if icon}
<svelte:component this={icon}/>
{/if}
<span class="select__input__value" style:min-width="{minWidth}px">{label || selected?.label || value || 'Choose...'}</span>
{#if !icon}
<div class="select__input__arrow">
<slot name="expandIcon">
<IconChevronDown/>
</slot>
</div>
{/if}
</div>
{#if open}
<ul class="select__options">
{#each options as option (option.value)}
<li
on:click={() => {
selected = option;
open = false;
}}
class:is-selected={selected?.value === option.value}
>
{option.label || option.value}
</li>
{/each}
</ul>
{/if}
</div>
<style lang="postcss">
.select {
position: relative;
display: flex;
flex-direction: column;
color: var(--color-button-text);
cursor: pointer;
border-radius: var(--rounded);
align-self: flex-start;
&__input {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0.9rem;
grid-gap: 0.4rem;
background-color: var(--color-button-bg);
box-shadow: var(--shadow-inset-sm);
border-radius: var(--rounded);
}
&__options {
list-style-type: none;
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
background-color: var(--color-button-bg);
border-radius: var(--rounded-bottom);
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
overflow: hidden;
border-top: 0.1rem solid var(--color-divider);
z-index: 5;
li {
padding: 0.25rem 1rem;
&:hover {
background-color: var(--color-button-bg-hover);
}
&.is-selected {
background-color: var(--color-brand-dark);
color: var(--color-brand-contrast);
cursor: default;
}
}
}
&.is-open {
z-index: 10;
.select__input {
border-radius: var(--rounded-top);
box-shadow: none;
&__arrow {
transform: rotate(180deg);
}
}
}
&--color-raised {
> * {
background-color: var(--color-raised-bg);
}
}
&--opens-up {
.select__options {
bottom: 100%;
top: auto;
border-radius: var(--rounded-top);
box-shadow: none;
border-top: none;
border-bottom: 0.1rem solid var(--color-divider);
}
&.is-open .select__input {
border-radius: var(--rounded-bottom);
}
}
}
</style>

7
src/lib/styles.postcss
View File

@@ -1,3 +1,4 @@
@import "./styles/normalize.postcss";
@import "./styles/themes.postcss";
@import "./styles/variables.postcss";
@import-glob "./styles/normalize.postcss"; /* Doesn't need to glob but fixes warning */
@import-glob "./styles/themes/**.postcss";
@import-glob "./styles/variables/**.postcss";
@import-glob "./styles/classes/**.postcss";

26
src/lib/styles/classes/base.postcss Normal file
View File

@@ -0,0 +1,26 @@
.base {
display: flex;
justify-content: center;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-standard);
font-size: var(--font-size-nm);
font-weight: var(--font-weight-regular);
padding: 1rem;
scrollbar-color: var(--color-scrollbar) var(--color-bg);
&::-webkit-scrollbar {
width: 14px;
}
&::-webkit-scrollbar-track {
background-color: var(--color-bg);
}
&::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar);
border-radius: 999px;
border: 3px solid var(--color-bg);
}
}

97
src/lib/styles/classes/card.postcss Normal file
View File

@@ -0,0 +1,97 @@
.card {
--padding: 1rem;
display: flex;
flex-direction: column;
position: relative;
background-color: var(--color-raised-bg);
border-radius: var(--rounded);
overflow: hidden;
box-shadow: var(--shadow-raised), var(--shadow-inset);
padding: var(--padding);
grid-gap: 1rem;
max-width: 100%;
.profile-picture {
z-index: 1;
}
&--gap {
&-compressed {
grid-gap: 0.6rem;
}
&-none {
grid-gap: 0;
}
}
&--pad {
&-top {
padding-top: 2.5rem;
}
}
&--overflow-visible {
overflow: visible;
}
&__banner {
--inverse-padding: calc(var(--padding) * -1);
margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
z-index: 0;
background-color: var(--color-divider);
&:-moz-loading {
visibility: hidden;
}
&--short {
height: 6.5rem;
object-fit: cover;
object-position: center;
}
&--dark {
filter: brightness(0.7);
}
}
&__overlay {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
align-items: flex-end;
grid-gap: 0.5rem;
z-index: 1;
&--row {
flex-direction: row;
}
}
&--row {
flex-direction: row;
align-items: center;
}
&--strip {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
&--pad-x {
--padding: 1rem 1.3rem;
}
&.text {
--padding: 1.5rem;
}
}

7
src/lib/styles/classes/link.postcss Normal file
View File

@@ -0,0 +1,7 @@
.link {
color: var(--color-link);
&:hover {
text-decoration: underline;
}
}

8
src/lib/styles/classes/title.postcss Normal file
View File

@@ -0,0 +1,8 @@
.title {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
}
.title-secondary {
font-size: 1.25rem;
}

4
src/lib/styles/themes.postcss
View File

@@ -1,4 +0,0 @@
@import "themes/base.postcss";
@import "themes/light.postcss";
@import "themes/dark.postcss";
@import "themes/oled.postcss";

3
src/lib/styles/variables.postcss
View File

@@ -1,3 +0,0 @@
@import "variables/borders.postcss";
@import "variables/typography.postcss";
@import "variables/spacing.postcss";

59
src/routes/__layout.svelte
View File

@@ -1,34 +1,39 @@
<script lang="ts">
import "$lib/styles.postcss"
import "./_internal/styles/prism-one-dark.css"
import "./_internal/styles/gh-markdown.css"
import Sidebar from "./_internal/components/Sidebar.svelte"
import '$lib/styles.postcss'
import './_internal/styles/prism-one-dark.css'
import './_internal/styles/gh-markdown.postcss'
import Sidebar from './_internal/components/Sidebar.svelte'
import Header from './_internal/components/Header.svelte'
</script>
<div class="app">
<Header />
<Sidebar />
<Header/>
<Sidebar/>
<main class="app__content">
<slot />
<slot/>
</main>
</div>
<style lang="postcss">
:global(body) {
margin: 0;
font-size: var(--body-font-size);
font-family: var(--body-font);
overflow-y: scroll;
--accent-color: hsl(331, 80%, 45%);
--accent-color-transparent: hsla(331, 80%, 45%, 0.15);
:global {
html {
overflow-y: scroll;
}
body {
margin: 0;
font-size: var(--body-font-size);
font-family: var(--body-font);
--accent-color: hsl(331, 80%, 45%);
--accent-color-transparent: hsla(331, 80%, 45%, 0.15);
}
}
.app {
display: grid;
min-height: 100vh;
overflow: hidden;
--sidebar-width: 250px;
--sidebar-width: 325px;
--header-height: 56px;
@media (width <= 500px) {
display: flex;
@@ -41,21 +46,21 @@
overflow-y: auto;
background-color: hsl(220, 13%, 91%);
:global(h1) {
font-size: 54px;
}
:global {
a:not(.example__preview *) {
color: var(--accent-color);
:global(p) {
line-height: 1.5;
}
}
&:hover {
text-decoration: underline;
}
}
@layer base {
:global(a) {
color: var(--accent-color);
h1:not(.example__preview *) {
font-size: 54px;
}
&:hover {
text-decoration: underline;
p:not(.example__preview *) {
line-height: 1.5;
}
}
}

41
src/routes/_internal/components/Example.svelte
View File

@@ -1,18 +1,26 @@
<script lang="ts">
import Prism from 'prismjs';
import 'prism-svelte';
import Button from '$lib/components/Button.svelte'
import IconMoon from 'virtual:icons/heroicons-outline/moon'
import IconSun from 'virtual:icons/heroicons-outline/sun'
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');
let theme = 'light'
let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
</script>
<div class="example theme-light">
<div class="example__preview" style:background={background}>
<slot />
<div class="example">
<div class="example__preview theme-{theme} base" style:background={background}>
<div class="example__preview__options">
<Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
{#if theme === 'light'}
<IconMoon/>
{:else}
<IconSun/>
{/if}
</Button>
</div>
<slot name="example"/>
</div>
<pre class="example__code language-">{@html highlighted}</pre>
<pre class="example__code language-svelte"><slot name="code"/></pre>
</div>
<style lang="postcss">
@@ -20,13 +28,24 @@
margin-bottom: 32px;
&__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;
position: relative;
justify-content: flex-start;
&__options {
position: absolute;
top: 0;
right: 0;
padding: 8px;
display: flex;
justify-content: flex-end;
z-index: 100;
}
}
&__code {

2
src/routes/_internal/components/Header.svelte
View File

@@ -8,7 +8,7 @@
onMount(() => {
let lastScrollTop: number
window.addEventListener('scroll', function () {
window.addEventListener('scroll', () => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
if (scrollTop > lastScrollTop && headerElement) {
headerElement.style.top = 'calc(var(--header-height) * -1)'

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

@@ -1,5 +1,11 @@
<script lang="ts">
const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].sort()
const components = Object.keys(import.meta.glob('../../components/**'))
.map(it => it.replace('../../components/', '').replace('.md', ''))
.sort();
const classes = Object.keys(import.meta.glob('../../classes/**'))
.map(it => it.replace('../../classes/', '').replace('.md', ''))
.sort();
</script>
<nav class="sidebar">
@@ -7,7 +13,8 @@
<span class="section__title">Getting started</span>
<a href="/" class="section__link">Introduction</a>
<a href="/getting-started/icons" class="section__link">Using Icons</a>
<a href="/getting-started/css" class="section__link">CSS configuration</a>
<a href="/getting-started/postcss" class="section__link">PostCSS config</a>
<a href="/getting-started/css" class="section__link">Writing CSS</a>
</div>
<div class="section">
@@ -16,6 +23,13 @@
<a href="/components/{component}" class="section__link">{component}</a>
{/each}
</div>
<div class="section">
<span class="section__title">Classes</span>
{#each classes as page}
<a href="/classes/{page}" class="section__link">{page}</a>
{/each}
</div>
</nav>
<style lang="postcss">
@@ -25,7 +39,7 @@
grid-gap: 2rem;
background-color: hsl(220, 15%, 40%);
color: hsl(216, 10%, 80%);
padding: 5.5rem 1.5rem 1.5rem;
padding: 5.5rem 2rem 2rem;
height: 100vh;
width: calc(var(--sidebar-width) - 3rem);
position: fixed;

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

@@ -1,22 +1,18 @@
<script lang="ts">
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
import { page } from '$app/stores'
import { onMount } from 'svelte'
export let componentName = $page.url.pathname.includes('components') ? $page.url.pathname.replace('/components/', '') : undefined
export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1)
export let title = ''
if (!title && componentName) title = componentName
if (!title) title = fileName
let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
let api
onMount(async () => {
if (componentName) {
api = (await import(`../../../lib/components/${componentName}.svelte?raw&api`)).default
}
})
if ($page.url.pathname.includes('components')) {
import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
}
</script>
<svelte:head>
@@ -25,14 +21,14 @@
<article>
{#if title}<h1>{title}</h1>{/if}
<a class="edit-link" href={pageUrl}>
<a class="edit-link" href={editUrl}>
<IconPencil/>
Edit this page on GitHub</a>
<slot/>
{#if componentName && api}
{#if api}
<div class="extra-info">
{#if api.data.length > 0}
{#if api.props.length > 0}
<h2>Properties</h2>
<table class="api-table">
<thead>
@@ -44,12 +40,12 @@
</tr>
</thead>
<tbody>
{#each api.data as prop}
{#each api.props as prop}
<tr>
<td>{prop.name}</td>
<td>{prop.type.type}</td>
<td>{prop.defaultValue ?? ''}</td>
<td>{prop.readonly ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
<td><code>{prop.type ?? ''}</code></td>
<td>{prop.value ?? ''}</td>
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
</tr>
{/each}
</tbody>
@@ -82,22 +78,19 @@
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Fallback</th>
</tr>
</thead>
<tbody>
{#each api.slots as slot}
<tr>
<td>{slot.name}</td>
<td>{slot.description?.replace('null', '') || ''}</td>
<td>{slot.fallback}</td>
</tr>
{/each}
</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>

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

@@ -1,373 +0,0 @@
a {
color: #4183C4;
text-decoration: none;
}
a.absent {
color: #cc0000;
}
a.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative;
}
h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
padding-top: 0;
}
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
text-decoration: none;
}
h1 tt, h1 code {
font-size: inherit;
}
h2 tt, h2 code {
font-size: inherit;
}
h3 tt, h3 code {
font-size: inherit;
}
h4 tt, h4 code {
font-size: inherit;
}
h5 tt, h5 code {
font-size: inherit;
}
h6 tt, h6 code {
font-size: inherit;
}
h1 {
font-size: 28px;
color: black;
}
h2 {
font-size: 24px;
/*border-bottom: 1px solid #cccccc;*/
color: black;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
color: #777777;
font-size: 14px;
}
p, blockquote, ul, ol, dl, li, table, pre {
margin: 15px 0;
}
hr {
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0;
}
body > h2:first-child {
margin-top: 0;
padding-top: 0;
}
body > h1:first-child {
margin-top: 0;
padding-top: 0;
}
body > h1:first-child + h2 {
margin-top: 0;
padding-top: 0;
}
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
margin-top: 0;
}
li p.first {
display: inline-block;
}
ul, ol {
padding-left: 30px;
}
ul :first-child, ol :first-child {
margin-top: 0;
}
ul :last-child, ol :last-child {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt > :first-child {
margin-top: 0;
}
dl dt > :last-child {
margin-bottom: 0;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd > :first-child {
margin-top: 0;
}
dl dd > :last-child {
margin-bottom: 0;
}
blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777;
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
table {
padding: 0;
}
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
table tr:nth-child(2n) {
background-color: #f8f8f8;
}
table tr th {
font-weight: bold;
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr th :first-child, table tr td :first-child {
margin-top: 0;
}
table tr th :last-child, table tr td :last-child {
margin-bottom: 0;
}
img {
max-width: 100%;
}
span.frame {
display: block;
overflow: hidden;
}
span.frame > span {
border: 1px solid #dddddd;
display: block;
float: left;
overflow: hidden;
margin: 13px 0 0;
padding: 7px;
width: auto;
}
span.frame span img {
display: block;
float: left;
}
span.frame span span {
clear: both;
color: #333333;
display: block;
padding: 5px 0 0;
}
span.align-center {
display: block;
overflow: hidden;
clear: both;
}
span.align-center > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: center;
}
span.align-center span img {
margin: 0 auto;
text-align: center;
}
span.align-right {
display: block;
overflow: hidden;
clear: both;
}
span.align-right > span {
display: block;
overflow: hidden;
margin: 13px 0 0;
text-align: right;
}
span.align-right span img {
margin: 0;
text-align: right;
}
span.float-left {
display: block;
margin-right: 13px;
overflow: hidden;
float: left;
}
span.float-left span {
margin: 13px 0 0;
}
span.float-right {
display: block;
margin-left: 13px;
overflow: hidden;
float: right;
}
span.float-right > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: right;
}
code, tt {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
pre code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
pre {
background-color: #f8f8f8;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: var(--rounded-sm) !important;
}
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);
}

383
src/routes/_internal/styles/gh-markdown.postcss Normal file
View File

@@ -0,0 +1,383 @@
*:not(.example__preview *) {
:where(a) {
text-decoration: none;
&.absent {
color: #cc0000;
}
&.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
}
&:where(h1, h2, h3, h4, h5, h6) {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative;
}
&:where(h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child) {
margin-top: 0;
padding-top: 0;
}
&:where(h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor) {
text-decoration: none;
}
&:where(h1 tt, h1 code) {
font-size: inherit;
}
&:where(h2 tt, h2 code) {
font-size: inherit;
}
&:where(h3 tt, h3 code) {
font-size: inherit;
}
&:where(h4 tt, h4 code) {
font-size: inherit;
}
&:where(h5 tt, h5 code) {
font-size: inherit;
}
&:where(h6 tt, h6 code) {
font-size: inherit;
}
&:where(h1) {
font-size: 28px;
color: black;
}
&:where(h2) {
font-size: 24px;
/*border-bottom: 1px solid #cccccc;*/
color: black;
}
&:where(h3) {
font-size: 18px;
}
&:where(h4) {
font-size: 16px;
}
&:where(h5) {
font-size: 14px;
}
&:where(h6) {
color: #777777;
font-size: 14px;
}
&:where(p, blockquote, ul, ol, dl, li, table, pre) {
margin: 15px 0;
}
&:where(hr) {
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0;
}
&:where(body > h2:first-child) {
margin-top: 0;
padding-top: 0;
}
&:where(body > h1:first-child) {
margin-top: 0;
padding-top: 0;
}
&:where(body > h1:first-child + h2) {
margin-top: 0;
padding-top: 0;
}
&:where(body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child) {
margin-top: 0;
padding-top: 0;
}
&:where(a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6) {
margin-top: 0;
padding-top: 0;
}
&:where(h1 p, h2 p, h3 p, h4 p, h5 p, h6 p) {
margin-top: 0;
}
&:where(li p.first) {
display: inline-block;
}
&:where(ul, ol) {
padding-left: 30px;
}
&:where(ul :first-child, ol :first-child) {
margin-top: 0;
}
&:where(ul :last-child, ol :last-child) {
margin-bottom: 0;
}
&:where(dl) {
padding: 0;
}
&:where(dl dt) {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
&:where(dl dt:first-child) {
padding: 0;
}
&:where(dl dt > :first-child) {
margin-top: 0;
}
&:where(dl dt > :last-child) {
margin-bottom: 0;
}
&:where(dl dd) {
margin: 0 0 15px;
padding: 0 15px;
}
&:where(dl dd > :first-child) {
margin-top: 0;
}
&:where(dl dd > :last-child) {
margin-bottom: 0;
}
&:where(blockquote) {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777;
}
&:where(blockquote > :first-child) {
margin-top: 0;
}
&:where(blockquote > :last-child) {
margin-bottom: 0;
}
&:where(table) {
padding: 0;
}
&:where(table tr) {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
&:where(table tr:nth-child(2n)) {
background-color: #f8f8f8;
}
&:where(table tr th) {
font-weight: bold;
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
&:where(table tr td) {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
&:where(table tr th :first-child, table tr td :first-child) {
margin-top: 0;
}
&:where(table tr th :last-child, table tr td :last-child) {
margin-bottom: 0;
}
&:where(img) {
max-width: 100%;
}
&:where(span.frame) {
display: block;
overflow: hidden;
}
&:where(span.frame > span) {
border: 1px solid #dddddd;
display: block;
float: left;
overflow: hidden;
margin: 13px 0 0;
padding: 7px;
width: auto;
}
&:where(span.frame span img) {
display: block;
float: left;
}
&:where(span.frame span span) {
clear: both;
color: #333333;
display: block;
padding: 5px 0 0;
}
&:where(span.align-center) {
display: block;
overflow: hidden;
clear: both;
}
&:where(span.align-center > span) {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: center;
}
&:where(span.align-center span img) {
margin: 0 auto;
text-align: center;
}
&:where(span.align-right) {
display: block;
overflow: hidden;
clear: both;
}
&:where(span.align-right > span) {
display: block;
overflow: hidden;
margin: 13px 0 0;
text-align: right;
}
&:where(span.align-right span img) {
margin: 0;
text-align: right;
}
&:where(span.float-left) {
display: block;
margin-right: 13px;
overflow: hidden;
float: left;
}
&:where(span.float-left span) {
margin: 13px 0 0;
}
&:where(span.float-right) {
display: block;
margin-left: 13px;
overflow: hidden;
float: right;
}
&:where(span.float-right > span) {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: right;
}
&:where(code, tt) {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
&:where(pre code) {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
&:where(pre) {
background-color: #f8f8f8;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: var(--rounded-sm) !important;
}
&:where(pre code, pre tt) {
background-color: transparent;
border: none;
}
&:where(/* Custom styles */
h1) {
font-weight: 600;
}
&:where(h2) {
font-weight: 500;
}
&:where(blockquote) {
border-left: 4px solid var(--accent-color);
padding: 15px 15px;
color: unset;
background-color: var(--accent-color-transparent);
}
&:where(a) {
color: var(--accent-color)
}
&:where(p) {
line-height: 150%;
}
}

31
src/routes/classes/Card.md Normal file
View File

@@ -0,0 +1,31 @@
### 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/components/Button.svelte";
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
import Avatar from "omorphia/components/Avatar.svelte";
</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" ></div>
<Avatar size="md" floatUp/>
<h1 class="title">Project</h1>
<p class="summary">A project that has a description right here.</p>
</div>
```

3
src/routes/classes/Link.md Normal file
View File

@@ -0,0 +1,3 @@
```svelte example
<a class="link" href="#place"> Go somewhere! </a>
```

19
src/routes/components/Avatar.md
View File

@@ -1,14 +1,13 @@
Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
```svelte example
<script lang="ts">
import Avatar from "$lib/components/Avatar.svelte";
import Example from "../_internal/components/Example.svelte"
import Avatar from "omorphia/components/Avatar.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="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 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>
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
```

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

@@ -1,14 +1,10 @@
```svelte example
<script lang="ts">
import Badge from "$lib/components/Badge.svelte";
import Example from "../_internal/components/Example.svelte"
import Badge from "omorphia/components/Badge.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>
```

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

@@ -1,14 +1,10 @@
```svelte example
<script lang="ts">
import Button from "$lib/components/Button.svelte";
import Example from "../_internal/components/Example.svelte"
import Button from "omorphia/components/Button.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>
```

51
src/routes/components/Chips.md
View File

@@ -1,13 +1,10 @@
<script lang="ts">
import Chips from "$lib/components/Chips.svelte";
import Example from "../_internal/components/Example.svelte"
let foo = 'modpack'
</script>
### Simple example
<Example code={`
```svelte example
<script lang="ts">
import Chips from "omorphia/components/Chips.svelte";
</script>
<Chips options={[
{
label: 'One',
@@ -18,25 +15,16 @@
value: 'two'
}]}
/>
`}>
<Chips options={[
{
label: 'One',
value: 'one'
},
{
label: 'Two',
value: 'two'
}]}
/>
</Example>
```
### Force an option to be selected with `neverEmpty`
<Example code={`
<script>
let foo = 'modpack';
```svelte example
<script lang="ts">
import Chips from "omorphia/components/Chips.svelte";
let foo = 'modpack'
</script>
<Chips neverEmpty bind:value={foo} options={[
@@ -53,19 +41,4 @@ value: 'two'
value: 'world'
}]}
/>
`}>
<Chips neverEmpty bind:value={foo} options={[
{
label: 'Mod',
value: 'mod'
},
{
label: 'Modpack',
value: 'modpack'
},
{
label: 'World',
value: 'world'
}]}
/>
</Example>
```

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

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

32
src/routes/components/NavRow.md
View File

@@ -1,11 +1,10 @@
<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={`
```svelte example
<script lang="ts">
import NavRow from "omorphia/components/NavRow.svelte";
</script>
<NavRow
level={1}
links={[
@@ -24,23 +23,4 @@
]}>
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>
```

15
src/routes/components/Pagination.md
View File

@@ -1,10 +1,9 @@
<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.
<Example code={`<Pagination page={20} count={50} />`} background="transparent">
<Pagination page={20} count={50} />
</Example>
```svelte example
<script lang="ts">
import Pagination from "omorphia/components/Pagination.svelte"
</script>
<Pagination page={20} count={50} />
```

19
src/routes/components/Select.md Normal file
View File

@@ -0,0 +1,19 @@
```svelte example
<script lang="ts">
import Select from "omorphia/components/Select.svelte";
let sortMethod = "downloads"
</script>
<Select
color="raised"
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}
/>
```

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

@@ -1,31 +1,7 @@
---
title: CSS Configuration
title: Writing CSS
---
Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
TODO
Install PostCSS with:
```bash
pnpx svelte-add@latest postcss
```
This is the recommended `postcss.config.cjs` setup:
```js
const config = {
plugins: [
require('postcss-import'),
require('postcss-strip-inline-comments'),
require('postcss-nested'),
require('postcss-preset-env'),
require('autoprefixer'),
require('postcss-extend-rule'),
process.env.NODE_ENV === 'development' && require('cssnano')({
preset: 'default',
})
],
};
module.exports = config;
```
Use `px` measurements. Use `hsl` for colors.

31
src/routes/getting-started/postcss.md Normal file
View File

@@ -0,0 +1,31 @@
---
title: PostCSS Configuration
---
Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
Install PostCSS with:
```bash
pnpx svelte-add@latest postcss
```
This is the recommended `postcss.config.cjs` setup:
```js
const config = {
plugins: [
require('postcss-import'),
require('postcss-strip-inline-comments'),
require('postcss-nested'),
require('postcss-preset-env'),
require('autoprefixer'),
require('postcss-extend-rule'),
process.env.NODE_ENV === 'development' && require('cssnano')({
preset: 'default',
})
],
};
module.exports = config;
```

13
src/routes/index.md
View File

@@ -22,15 +22,14 @@ pnpm add omorphia
### Components
Import a component with:
```js
import { Button } from "omorphia"
```
Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
Then, use it in your HTML:
```svelte example
<script lang="ts">
import Button from "omorphia/components/Button.svelte"
</script>
```html
<Button color="primary">Click me!</Button>
<Button color="primary">I'm a button!</Button>
```
For more information on each component, check out the pages on the sidebar navigation.