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

src/routes/_internal/components/Example.svelte

@@ -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>

src/routes/_internal/components/Sidebar.svelte

@@ -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;
 

src/routes/_internal/layout/page.svelte

@@ -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>

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

@@ -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);
-}
+}

src/routes/_internal/styles/prism-one-dark.css

@@ -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 */