Add component API to docs (ex: props, events, slots)

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plugin-sveld" />

src/lib/components/Link.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    export let href: string;
+</script>
+
+<a {href}><slot /></a>
+
+<style lang="postcss">
+    a {
+        color: blue;
+    }
+</style>

src/lib/components/Pagination.svelte

@@ -4,7 +4,7 @@
     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 Button from "./Button.svelte";
     import { createEventDispatcher } from 'svelte'
 
     export let page: number;

src/routes/_internal/components/Header.svelte

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

src/routes/_internal/components/Sidebar.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+    const components = ['button', 'pagination', 'link']
+</script>
+
 <nav class="sidebar">
     <div class="section">
         <span class="section__title">Getting started</span>
@@ -8,7 +12,7 @@
 
     <div class="section">
         <span class="section__title">Components</span>
-        {#each ['buttons', 'pagination'] as component}
+        {#each components as component}
             <a href="/components/{component}" class="section__link">{component}</a>
         {/each}
     </div>

src/routes/_internal/layout/page.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
     import IconPencil from 'virtual:icons/heroicons-outline/pencil'
     import { page } from '$app/stores'
+    import { onMount } from 'svelte'
 
     export let title
+    export let component
     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
+        }
+    })
 </script>
 
 <svelte:head>
@@ -16,6 +26,76 @@
         <IconPencil/>
         Edit this page on GitHub</a>
     <slot/>
+
+    {#if component && api}
+        <div class="extra-info">
+            {#if api.data.length > 0}
+                <h2>Properties</h2>
+                <table class="api-table">
+                    <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                        <th>Read only</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {#each api.data as prop}
+                        <tr>
+                            <td>{prop.name}</td>
+                            <td>{prop.type.type}</td>
+                            <td>{prop.defaultValue}</td>
+                            <td>{prop.description?.replace('null', '') || ''}</td>
+                            <td>{prop.readonly}</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>{event.name}</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>Description</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {#each api.slots as slot}
+                        <tr>
+                            <td>{slot.name}</td>
+                            <td>{slot.description?.replace('null', '') || ''}</td>
+                        </tr>
+                    {/each}
+                    </tbody>
+                </table>
+            {/if}
+        </div>
+    {/if}
 </article>
 
 <style lang="postcss">
@@ -28,6 +108,29 @@
         display: flex;
         align-items: center;
         grid-gap: 8px;
-        margin-bottom: 64px;
+        margin-bottom: 54px;
+    }
+
+    .extra-info {
+        margin-top: 48px;
+    }
+
+    .api-table {
+        border-collapse: collapse;
+
+        tr {
+            background-color: transparent;
+            border: none;
+        }
+
+        tbody {
+            border: 2px solid grey;
+        }
+
+        th {
+            text-transform: uppercase;
+            font-size: 12.5px;
+            border: none;
+        }
     }
 </style>

src/routes/_internal/styles/gh-markdown.css

@@ -67,7 +67,7 @@ h1 {
 
 h2 {
     font-size: 24px;
-    border-bottom: 1px solid #cccccc;
+    /*border-bottom: 1px solid #cccccc;*/
     color: black;
 }
 

src/routes/components/button.md

@@ -1,9 +1,10 @@
 ---
-title: Buttons
+title: Button
+component: Button
 ---
 
 <script lang="ts">
-    import Button from "$lib/components/elements/buttons/Button.svelte"
+    import Button from "$lib/components/Button.svelte";
 </script>
 
 <Button>Eat cake</Button>

src/routes/components/link.md

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

src/routes/components/pagination.md

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