You've already forked AstralRinth
forked from didirus/AstralRinth
Run prettier
This commit is contained in:
venashial
@@ -1,73 +1,72 @@
|
||||
<script lang="ts">
|
||||
import { Button } from 'omorphia';
|
||||
import IconMoon from 'virtual:icons/heroicons-outline/moon';
|
||||
import IconSun from 'virtual:icons/heroicons-outline/sun';
|
||||
import { Button } from 'omorphia'
|
||||
import IconMoon from 'virtual:icons/heroicons-outline/moon'
|
||||
import IconSun from 'virtual:icons/heroicons-outline/sun'
|
||||
|
||||
export let meta: { raised: boolean };
|
||||
export let meta: { raised: boolean }
|
||||
|
||||
let theme = 'light';
|
||||
let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)';
|
||||
let theme = 'light'
|
||||
let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)'
|
||||
</script>
|
||||
|
||||
<div class="example">
|
||||
<div class="example__preview theme-{theme} base" style:background>
|
||||
<slot name="example" />
|
||||
</div>
|
||||
<div class="example__source">
|
||||
<div class="example__source__options">
|
||||
<Button
|
||||
color="primary-light"
|
||||
on:click={() => (theme === 'light' ? (theme = 'dark') : (theme = 'light'))}
|
||||
>
|
||||
{#if theme === 'light'}
|
||||
<IconMoon />
|
||||
{:else}
|
||||
<IconSun />
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
<pre class="example__source__code language-svelte"><slot name="code" /></pre>
|
||||
</div>
|
||||
<div class="example__preview theme-{theme} base" style:background>
|
||||
<slot name="example" />
|
||||
</div>
|
||||
<div class="example__source">
|
||||
<div class="example__source__options">
|
||||
<Button
|
||||
color="primary-light"
|
||||
on:click={() => (theme === 'light' ? (theme = 'dark') : (theme = 'light'))}>
|
||||
{#if theme === 'light'}
|
||||
<IconMoon />
|
||||
{:else}
|
||||
<IconSun />
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
<pre class="example__source__code language-svelte"><slot name="code" /></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.example {
|
||||
margin: 15px 0 32px;
|
||||
.example {
|
||||
margin: 15px 0 32px;
|
||||
|
||||
&__preview {
|
||||
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;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
&__preview {
|
||||
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;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__source {
|
||||
position: relative;
|
||||
&__source {
|
||||
position: relative;
|
||||
|
||||
&__options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
&__options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
:global(button) {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
:global(button) {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
margin: 0;
|
||||
border-radius: var(--rounded-sm-bottom) !important;
|
||||
background: hsl(220, 13%, 22%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__code {
|
||||
margin: 0;
|
||||
border-radius: var(--rounded-sm-bottom) !important;
|
||||
background: hsl(220, 13%, 22%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,112 +1,111 @@
|
||||
<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';
|
||||
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;
|
||||
let headerElement
|
||||
|
||||
onMount(() => {
|
||||
let lastScrollTop: number;
|
||||
window.addEventListener('scroll', () => {
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
if (scrollTop > lastScrollTop && headerElement) {
|
||||
headerElement.style.top = '-100%';
|
||||
} else if (headerElement) {
|
||||
headerElement.style.top = '0';
|
||||
}
|
||||
lastScrollTop = scrollTop;
|
||||
});
|
||||
});
|
||||
onMount(() => {
|
||||
let lastScrollTop: number
|
||||
window.addEventListener('scroll', () => {
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
if (scrollTop > lastScrollTop && headerElement) {
|
||||
headerElement.style.top = '-100%'
|
||||
} else if (headerElement) {
|
||||
headerElement.style.top = '0'
|
||||
}
|
||||
lastScrollTop = scrollTop
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<header class="header" bind:this={headerElement}>
|
||||
<OmorphiaLogo class="header__logo" />
|
||||
<div class="header__title">Omorphia</div>
|
||||
<div class="header__links">
|
||||
<a class="hide-sm" href="https://modrinth.com">Modrinth.com</a>
|
||||
<span class="spacer-dot hide-sm" />
|
||||
<a href="https://www.npmjs.com/package/omorphia">NPM</a>
|
||||
<span class="spacer-dot" />
|
||||
<a href="https://rewrite.modrinth.com/discord">
|
||||
<IconChat />
|
||||
</a>
|
||||
<a href="https://github.com/modrinth/omorphia">
|
||||
<IconLogoGithub />
|
||||
</a>
|
||||
</div>
|
||||
<OmorphiaLogo class="header__logo" />
|
||||
<div class="header__title">Omorphia</div>
|
||||
<div class="header__links">
|
||||
<a class="hide-sm" href="https://modrinth.com">Modrinth.com</a>
|
||||
<span class="spacer-dot hide-sm" />
|
||||
<a href="https://www.npmjs.com/package/omorphia">NPM</a>
|
||||
<span class="spacer-dot" />
|
||||
<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;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 24px;
|
||||
position: fixed;
|
||||
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;
|
||||
.header {
|
||||
display: flex;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 24px;
|
||||
position: fixed;
|
||||
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;
|
||||
|
||||
@media not (--sm) {
|
||||
top: 0 !important;
|
||||
}
|
||||
@media not (--sm) {
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
@media (--sm) {
|
||||
padding: 10px 32px;
|
||||
}
|
||||
@media (--sm) {
|
||||
padding: 10px 32px;
|
||||
}
|
||||
|
||||
:global(&__logo) {
|
||||
max-width: 32px;
|
||||
min-width: 32px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
:global(&__logo) {
|
||||
max-width: 32px;
|
||||
min-width: 32px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__links {
|
||||
margin-left: auto;
|
||||
grid-gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
&__links {
|
||||
margin-left: auto;
|
||||
grid-gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
:global(svg) {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
:global(svg) {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.hide-sm {
|
||||
display: none;
|
||||
.hide-sm {
|
||||
display: none;
|
||||
|
||||
@media (--sm) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media (--sm) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:hover) {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:hover) {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spacer-dot {
|
||||
background-color: hsla(0, 0%, 0%, 0.2);
|
||||
border-radius: 999px;
|
||||
width: 5px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.spacer-dot {
|
||||
background-color: hsla(0, 0%, 0%, 0.2);
|
||||
border-radius: 999px;
|
||||
width: 5px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,162 +1,157 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { page } from '$app/stores'
|
||||
|
||||
import IconMenu from 'virtual:icons/lucide/menu';
|
||||
import IconMenu from 'virtual:icons/lucide/menu'
|
||||
|
||||
const components = Object.keys(import.meta.glob('../../routes/components/**'))
|
||||
.map((it) => it.replace('../../routes/components/', '').replace('.md', ''))
|
||||
.sort();
|
||||
const components = Object.keys(import.meta.glob('../../routes/components/**'))
|
||||
.map((it) => it.replace('../../routes/components/', '').replace('.md', ''))
|
||||
.sort()
|
||||
|
||||
const classes = Object.keys(import.meta.glob('../../routes/classes/**'))
|
||||
.map((it) => it.replace('../../routes/classes/', '').replace('.md', ''))
|
||||
.sort();
|
||||
const classes = Object.keys(import.meta.glob('../../routes/classes/**'))
|
||||
.map((it) => it.replace('../../routes/classes/', '').replace('.md', ''))
|
||||
.sort()
|
||||
|
||||
let slideIn = false;
|
||||
let slideIn = false
|
||||
|
||||
$: if ($page.url.pathname) {
|
||||
slideIn = false;
|
||||
}
|
||||
$: if ($page.url.pathname) {
|
||||
slideIn = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<span class="section__title">Components</span>
|
||||
{#each components as component}
|
||||
<a href="/components/{component}" class="section__link">{component}</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="section">
|
||||
<span class="section__title">Components</span>
|
||||
{#each components as component}
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<button class="sidebar__toggle" on:click={() => (slideIn = !slideIn)}>
|
||||
<IconMenu />
|
||||
</button>
|
||||
<button class="sidebar__toggle" on:click={() => (slideIn = !slideIn)}>
|
||||
<IconMenu />
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<style lang="postcss">
|
||||
:root {
|
||||
--sidebar-color: hsl(220, 15%, 40%);
|
||||
--title-color: hsl(216, 10%, 80%);
|
||||
--link-color: hsl(216, 10%, 90%);
|
||||
--scrollbar-thumb-color: hsl(216, 10%, 70%);
|
||||
}
|
||||
:root {
|
||||
--sidebar-color: hsl(220, 15%, 40%);
|
||||
--title-color: hsl(216, 10%, 80%);
|
||||
--link-color: hsl(216, 10%, 90%);
|
||||
--scrollbar-thumb-color: hsl(216, 10%, 70%);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--sidebar-color);
|
||||
color: var(--title-color);
|
||||
width: var(--sidebar-width);
|
||||
max-width: 70vw;
|
||||
position: fixed;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
transition: left 0.2s ease-in-out;
|
||||
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
|
||||
.sidebar {
|
||||
background-color: var(--sidebar-color);
|
||||
color: var(--title-color);
|
||||
width: var(--sidebar-width);
|
||||
max-width: 70vw;
|
||||
position: fixed;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
transition: left 0.2s ease-in-out;
|
||||
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
|
||||
|
||||
@media (--md) {
|
||||
left: 0;
|
||||
}
|
||||
@media (--md) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
hsla(0, 0%, 0%, 1) 5% 95%,
|
||||
transparent
|
||||
);
|
||||
padding: 88px 32px 32px;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
grid-gap: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__content {
|
||||
mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
|
||||
padding: 88px 32px 32px;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
grid-gap: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0.5rem;
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
&__title {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
&__title {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
&__link {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
position: fixed;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
padding: 8px;
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: var(--accent-color);
|
||||
z-index: 20;
|
||||
border-radius: var(--rounded);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
|
||||
&__toggle {
|
||||
position: fixed;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
padding: 8px;
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: var(--accent-color);
|
||||
z-index: 20;
|
||||
border-radius: var(--rounded);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
|
||||
transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
|
||||
|
||||
:global(.icon) {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
}
|
||||
:global(.icon) {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (--md) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@media (--md) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.slideIn {
|
||||
left: 0;
|
||||
&.slideIn {
|
||||
left: 0;
|
||||
|
||||
.sidebar__toggle {
|
||||
left: calc(32px + min(70vw, var(--sidebar-width)));
|
||||
}
|
||||
}
|
||||
.sidebar__toggle {
|
||||
left: calc(32px + min(70vw, var(--sidebar-width)));
|
||||
}
|
||||
}
|
||||
|
||||
scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
|
||||
scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--sidebar-color);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--sidebar-color);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb-color);
|
||||
border-radius: 999px;
|
||||
border: 3px solid var(--sidebar-color);
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb-color);
|
||||
border-radius: 999px;
|
||||
border: 3px solid var(--sidebar-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,147 +1,143 @@
|
||||
<script lang="ts">
|
||||
import IconPencil from 'virtual:icons/heroicons-outline/pencil';
|
||||
import { page } from '$app/stores';
|
||||
import COMPONENT_API from '../../generated/COMPONENT_API.json';
|
||||
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
|
||||
import { page } from '$app/stores'
|
||||
import COMPONENT_API from '../../generated/COMPONENT_API.json'
|
||||
|
||||
export let fileName = $page.url.pathname
|
||||
.substring($page.url.pathname.lastIndexOf('/') + 1)
|
||||
.replace('.html', '');
|
||||
export let fileName = $page.url.pathname
|
||||
.substring($page.url.pathname.lastIndexOf('/') + 1)
|
||||
.replace('.html', '')
|
||||
|
||||
export let title = fileName;
|
||||
export let title = fileName
|
||||
|
||||
export let description = 'Learn about Omorphia, the component & style library';
|
||||
export let description = 'Learn about Omorphia, the component & style library'
|
||||
|
||||
let editUrl = `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;
|
||||
if ($page.url.pathname.includes('components')) {
|
||||
if (import.meta.env.DEV) {
|
||||
import(`../../../package/components/${title}.svelte?raw&sveld`).then(
|
||||
(output) => (api = output.default)
|
||||
);
|
||||
} else {
|
||||
api = COMPONENT_API[`${title}.svelte`];
|
||||
}
|
||||
}
|
||||
let api
|
||||
if ($page.url.pathname.includes('components')) {
|
||||
if (import.meta.env.DEV) {
|
||||
import(`../../../package/components/${title}.svelte?raw&sveld`).then(
|
||||
(output) => (api = output.default)
|
||||
)
|
||||
} else {
|
||||
api = COMPONENT_API[`${title}.svelte`]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title ? `${title} • Omorphia` : 'Omorphia'}</title>
|
||||
<meta name="description" content={description} />
|
||||
<title>{title ? `${title} • Omorphia` : 'Omorphia'}</title>
|
||||
<meta name="description" content={description} />
|
||||
</svelte:head>
|
||||
|
||||
{#if title}<h1>{title}</h1>{/if}
|
||||
<a class="edit-link" href={editUrl}>
|
||||
<IconPencil />
|
||||
Edit this page on GitHub</a
|
||||
>
|
||||
<IconPencil />
|
||||
Edit this page on GitHub</a>
|
||||
<slot />
|
||||
|
||||
{#if api}
|
||||
<div class="extra-info">
|
||||
{#if api.props.length > 0}
|
||||
<h2>Properties</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.props as prop}
|
||||
<tr>
|
||||
<td><code>{prop.name}</code></td>
|
||||
<td><code>{prop.type ?? ''}</code></td>
|
||||
<td><code>{prop.value ?? ''}</code></td>
|
||||
<td
|
||||
>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace(
|
||||
'null',
|
||||
''
|
||||
) || ''}</td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.events.length > 0}
|
||||
<h2>Events</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Forwarded</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.events as event}
|
||||
<tr>
|
||||
<td><code>{event.name}</code></td>
|
||||
<td>{!!event.parent}</td>
|
||||
<td>{event.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.slots.length > 0}
|
||||
<h2>Slots</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Fallback</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.slots as slot}
|
||||
<tr>
|
||||
<td><code>{slot.name}</code></td>
|
||||
<td>{slot.fallback ?? 'None'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="extra-info">
|
||||
{#if api.props.length > 0}
|
||||
<h2>Properties</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.props as prop}
|
||||
<tr>
|
||||
<td><code>{prop.name}</code></td>
|
||||
<td><code>{prop.type ?? ''}</code></td>
|
||||
<td><code>{prop.value ?? ''}</code></td>
|
||||
<td
|
||||
>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') ||
|
||||
''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.events.length > 0}
|
||||
<h2>Events</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Forwarded</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.events as event}
|
||||
<tr>
|
||||
<td><code>{event.name}</code></td>
|
||||
<td>{!!event.parent}</td>
|
||||
<td>{event.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.slots.length > 0}
|
||||
<h2>Slots</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Fallback</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.slots as slot}
|
||||
<tr>
|
||||
<td><code>{slot.name}</code></td>
|
||||
<td>{slot.fallback ?? 'None'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.edit-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-gap: 8px;
|
||||
margin-bottom: 54px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.edit-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-gap: 8px;
|
||||
margin-bottom: 54px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.extra-info {
|
||||
margin-top: 64px;
|
||||
}
|
||||
.extra-info {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.api-table {
|
||||
border-collapse: collapse;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.api-table {
|
||||
border-collapse: collapse;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.api-table tr {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.api-table tr {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.api-table tbody {
|
||||
border: 2px solid grey;
|
||||
}
|
||||
.api-table tbody {
|
||||
border: 2px solid grey;
|
||||
}
|
||||
|
||||
.api-table th {
|
||||
text-transform: uppercase;
|
||||
font-size: 12.5px;
|
||||
border: none;
|
||||
}
|
||||
.api-table th {
|
||||
text-transform: uppercase;
|
||||
font-size: 12.5px;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user