Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)

src/lib/components/Input.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-    // TODO: Move to TextInput.svelte & simplify options for text
-
-    import { SvelteComponent } from 'svelte'
-
-    export let key = ''
-    export let label = ''
-    export let placeholder = ''
-    export let icon: string | SvelteComponent = ''
-    export let type: 'text' | 'textarea'
-    export let options: [
-        {
-            label: string;
-            value: string | number;
-            icon: string;
-        }
-    ] = []
-    export let value = undefined
-
-    export let wrap = false
-</script>
-
-{#if label}
-    <div class="input__label">
-        {label}
-    </div>
-{/if}
-{#if type === 'text'}
-    <input type="text" name={key} class="input-box" {placeholder} bind:value={value}/>
-{:else if type === 'textarea'}
-    <textarea name={key} class="input-box input-box--fill" {placeholder} bind:value={value}/>
-{/if}
-
-<style lang="postcss">
-    .input-box {
-        border-radius: var(--rounded-sm);
-        box-shadow: var(--shadow-inset-sm);
-        background-color: var(--color-button-bg);
-        border: none;
-        padding: 0.25rem 0.75rem;
-        width: 20rem;
-        max-width: 100%;
-
-        &--fill {
-            width: 100%;
-            padding: 0.5rem 0.75rem;
-        }
-    }
-
-    textarea {
-        min-height: 2.5rem;
-    }
-</style>

src/lib/styles/classes/link.postcss

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

src/lib/styles/classes/title.postcss

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

src/package/components/Avatar.svelte

@@ -2,7 +2,7 @@
     // TODO: Make square icon `md` more rounded
 
     import { onMount } from 'svelte'
-    import { classCombine } from '$lib/utils/classCombine'
+    import { classCombine } from '$package/utils/classCombine'
 
     /** Optional, as a default icon will be substituted if no image was specified */
     export let src: string | undefined

src/package/components/Button.svelte

@@ -3,7 +3,7 @@
     // TODO: icon only buttons should have uniform padding
     // TODO: Could be a class
 
-    import { classCombine } from '$lib/utils/classCombine'
+    import { classCombine } from '$package/utils/classCombine'
 
     /** The element to be styled as a button */
     export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
@@ -47,7 +47,7 @@
         justify-content: flex-start;
         align-items: center;
         padding: 0.25rem 1rem;
-        grid-gap: 0.4rem;
+        grid-gap: 14px;
         cursor: pointer;
         position: relative;
 
@@ -104,7 +104,8 @@
             }
 
             &-danger-light {
-                color: var(--color-danger-text);
+                background-color: var(--color-popup-danger-bg);
+                color: var(--color-popup-danger-text);
                 transition: filter 0s ease-in-out;
 
                 &:hover {
@@ -131,10 +132,6 @@
             justify-content: center;
         }
 
-        &.is-iconified {
-            padding: 0.25rem 0.75rem;
-        }
-
         &.has-badge::after {
             content: '';
             width: 0.5rem;
@@ -145,5 +142,10 @@
             top: 0.5rem;
             right: 0.5rem;
         }
+
+        /* Only child doesn't work as intended because text is passed through as `innerText` */
+        :global(.icon:only-child) {
+            margin: 4px -6px;
+        }
     }
 </style>

src/package/components/CheckboxList.svelte

@@ -37,6 +37,7 @@
     .checkbox-list {
         display: flex;
         flex-direction: column;
+        gap: 2px;
 
         &.wrap {
             flex-direction: row;

src/package/components/CheckboxVirtualList.svelte

@@ -32,7 +32,7 @@
         width="100%"
         {height}
         itemCount={options.length}
-        itemSize={30}>
+        itemSize={26}>
     <div slot="item" let:index let:style {style} style:padding-bottom={(options.length) - 1 === index ? '2.5rem' : ''}>
         {@const option = options[index]}
         <Checkbox checked={value.includes(option.value)} on:change={(e) => handleChange(e, option.value)}>

src/package/components/FormField.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import uniqueId from 'lodash.uniqueid'
+
+    export let required = false;
+    export let label: string;
+
+    const id = `form-field-${uniqueId()}`
+</script>
+
+<div class="form-field">
+    <label for={id} class="text-input__label" class:required>
+        {label}
+    </label>
+    <slot {id}  />
+</div>
+
+
+<style lang="postcss">
+    .form-field {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+</style>

src/package/components/TextInput.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { SvelteComponent } from 'svelte'
+
+    export let placeholder = ''
+    export let icon: SvelteComponent = ''
+    export let value = ''
+    export let multiline = false
+    export let id: string = undefined
+</script>
+
+<div class="text-input">
+    {#if multiline}
+        <textarea name={id} {placeholder} bind:value={value}/>
+    {:else}
+        <input type="text" name={id} {placeholder} bind:value={value}/>
+    {/if}
+</div>
+
+
+<style lang="postcss">
+    .text-input {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        input, textarea {
+            border-radius: var(--rounded-sm);
+            box-shadow: var(--shadow-inset-sm);
+            background-color: var(--color-button-bg);
+            border: none;
+            padding: 0.25rem 0.75rem;
+            width: 20rem;
+            max-width: 100%;
+        }
+
+        &--fill {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+        }
+
+
+        textarea {
+            min-height: 2.5rem;
+        }
+    }
+</style>

src/package/index.ts

@@ -0,0 +1,26 @@
+export { default as Avatar } from './components/Avatar.svelte';
+
+export { default as Badge } from './components/Badge.svelte';
+
+export { default as Button } from './components/Button.svelte';
+
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CheckboxList } from './components/CheckboxList.svelte';
+export { default as CheckboxVirtualList } from './components/CheckboxVirtualList.svelte';
+
+export { default as Chips } from './components/Chips.svelte';
+
+export { default as FormField } from './components/FormField.svelte';
+
+export { default as NavRow } from './components/NavRow.svelte';
+
+export { default as Pagination } from './components/Pagination.svelte';
+
+export { default as Select } from './components/Select.svelte';
+
+export { default as TextInput } from './components/TextInput.svelte';
+
+
+
+
+

src/package/styles/classes/actions.postcss

@@ -0,0 +1,20 @@
+.actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-left: auto;
+    min-width: fit-content;
+
+    > *:last-child {
+        margin-top: auto;
+        color: var(--color-text-light);
+    }
+
+    @media (width <= 1000px) {
+        flex-direction: row;
+        align-items: flex-start;
+        margin-left: unset;
+    }
+}

src/package/styles/classes/button-group.postcss

@@ -0,0 +1,5 @@
+.button-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/card.postcss

@@ -94,4 +94,8 @@
     &.text {
         --padding: 1.5rem;
     }
+
+    p {
+        line-height: 130%;
+    }
 }

src/package/styles/classes/divider.postcss

@@ -0,0 +1,5 @@
+.divider {
+    margin: 0.25rem 0;
+    border: none;
+    border-top: 1px solid var(--color-divider);
+}

src/package/styles/classes/illustration.postcss

@@ -0,0 +1,16 @@
+.illustration {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    grid-gap: 2rem;
+
+    &__image {
+        max-width: 300px;
+    }
+
+    &__description {
+        font-size: 1.2rem;
+        color: var(--color-text-light)
+    }
+}

src/package/styles/classes/info-table.postcss

@@ -0,0 +1,11 @@
+.info-table {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 0.25rem 2rem;
+    width: fit-content;
+
+    &__label {
+        color: var(--color-text-lightest);
+        font-weight: var(--font-weight-medium);
+    }
+}

src/package/styles/classes/link.postcss

@@ -0,0 +1,26 @@
+.link {
+    color: var(--color-link);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 100%;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.link-group {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 0.75rem;
+
+    .link {
+        color: var(--color-text);
+
+        &:hover {
+            color: var(--color-link);
+
+        }
+    }
+}

src/package/styles/classes/markdown.postcss

@@ -0,0 +1,137 @@
+.markdown {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 1rem;
+
+    blockquote,
+    details,
+    dl,
+    ol,
+    p,
+    code,
+    pre,
+    table,
+    ul {
+        margin: 0;
+    }
+
+    p {
+        line-height: 1.5;
+        word-wrap: break-word;
+        overflow-wrap: anywhere;
+    }
+
+    h1,
+    h2 {
+        padding-bottom: 0.2em;
+        border-bottom: 1px solid var(--color-divider);
+    }
+
+    blockquote {
+        padding: 0 1rem;
+        color: var(--color-text);
+        border-left: 0.25rem solid var(--color-divider);
+    }
+
+    a {
+        color: var(--color-link);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    img,
+    iframe {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--rounded-sm);
+    }
+
+    iframe {
+        width: 35rem;
+        aspect-ratio: 16/9;
+    }
+
+    code {
+        padding: 0.2rem 0.4rem;
+        font-size: 80%;
+        border-radius: var(--rounded-sm);
+        background-color: var(--color-code-bg);
+        color: var(--color-code-text);
+    }
+
+    pre {
+        padding: 1rem;
+        border-radius: var(--rounded-sm);
+        overflow-x: auto;
+
+        code {
+            font-size: 80%;
+            padding: 0;
+            border-radius: 0;
+            background-color: unset;
+        }
+    }
+
+    hr {
+        margin: 0;
+        color: var(--color-divider);
+    }
+
+    table {
+        display: block;
+        width: max-content;
+        max-width: 100%;
+        overflow: auto;
+        border-collapse: collapse;
+        line-height: 1.5;
+
+        th {
+            font-weight: 600;
+        }
+
+        td,
+        th {
+            padding: 0.4rem 0.85rem;
+            border: 0.1rem solid var(--color-table-border);
+        }
+
+        tr:nth-child(2n) {
+            background-color: var(--color-table-alternate-row);
+        }
+    }
+
+    details {
+        border: 0.15rem solid var(--color-button-bg);
+        border-radius: var(--rounded-sm);
+        padding: 0.5rem 0.5rem 0;
+        overflow: hidden;
+
+        summary {
+            font-weight: bold;
+            margin: -0.5rem -0.5rem 0;
+            padding: 0.5rem 0.8rem;
+            cursor: pointer;
+            background-color: var(--color-button-bg);
+
+            &:hover {
+                background-color: var(--color-button-bg-hover);
+            }
+        }
+
+        &[open] {
+            padding: 0.5rem;
+
+            summary {
+                margin-bottom: 0.5rem;
+            }
+        }
+    }
+
+    li:has(> input) {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+}

src/package/styles/classes/member.postcss

@@ -0,0 +1,13 @@
+.member {
+    display: flex;
+    grid-gap: 0.75rem;
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+
+        &__link {
+            font-weight: var(--font-weight-medium);
+        }
+    }
+}

src/package/styles/classes/stat.postcss

@@ -0,0 +1,23 @@
+.stat {
+    display: flex;
+    align-items: baseline;
+    grid-gap: 0.4rem;
+
+    &--light {
+        color: var(--color-text-lightest);
+    }
+
+    .icon {
+        align-self: center;
+    }
+
+    strong {
+        font-size: 20px;
+    }
+}
+
+.stat-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/tag.postcss

@@ -0,0 +1,18 @@
+.tag {
+    display: flex;
+    align-items: center;
+    grid-gap: 0.25rem;
+    color: var(--color-text-lightest);
+
+    svg {
+        width: 1rem;
+        height: auto;
+    }
+}
+
+.tag-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin-top: auto;
+    grid-gap: 0.25rem 0.6rem;
+}

src/package/styles/classes/title.postcss

@@ -0,0 +1,14 @@
+.title-primary {
+    font-size: 24px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+    font-size: 20px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-tertiary {
+    font-size: 16px;
+    font-weight: var(--font-weight-bold);
+}

src/package/styles/variables/spacing.postcss

@@ -204,4 +204,10 @@
                 xl: --spacer-6
         );
         */
-}
+}
+
+/* Breakpoints */
+@custom-media --sm (min-width: 544px);
+@custom-media --md (min-width: 768px);
+@custom-media --lg (min-width: 1012px);
+@custom-media --xl (min-width: 544px);

src/package/utils/ago.ts

@@ -0,0 +1,57 @@
+/**
+ * Human readable elapsed or remaining time (example: 3 minutes ago)
+ * @author github.com/victornpb
+ * @see https://stackoverflow.com/a/67338038/938822
+ */
+export function ago(
+	/** A Date object, timestamp or string parsable with Date.parse() */
+	date: string | number | Date,
+	/** A Date object, timestamp or string parsable with Date.parse() */
+	nowDate: string | number | Date = Date.now(),
+	/** A Intl formater */
+	rft: Intl.RelativeTimeFormat = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+): string {
+	const SECOND = 1000;
+	const MINUTE = 60 * SECOND;
+	const HOUR = 60 * MINUTE;
+	const DAY = 24 * HOUR;
+	const WEEK = 7 * DAY;
+	const MONTH = 30 * DAY;
+	const YEAR = 365 * DAY;
+	const intervals = [
+		{ ge: YEAR, divisor: YEAR, unit: 'year' },
+		{ ge: MONTH, divisor: MONTH, unit: 'month' },
+		{ ge: WEEK, divisor: WEEK, unit: 'week' },
+		{ ge: DAY, divisor: DAY, unit: 'day' },
+		{ ge: HOUR, divisor: HOUR, unit: 'hour' },
+		{ ge: MINUTE, divisor: MINUTE, unit: 'minute' },
+		{ ge: 30 * SECOND, divisor: SECOND, unit: 'seconds' },
+		{ ge: 0, divisor: 1, text: 'just now' },
+	];
+	const now = typeof nowDate === 'object' ? nowDate.getTime() : new Date(nowDate).getTime();
+	const diff = now - (typeof date === 'object' ? date : new Date(date)).getTime();
+	const diffAbs = Math.abs(diff);
+	for (const interval of intervals) {
+		if (diffAbs >= interval.ge) {
+			const x = Math.round(Math.abs(diff) / interval.divisor);
+			const isFuture = diff < 0;
+			return interval.unit ? rft.format(isFuture ? x : -x, interval.unit as Unit) : interval.text;
+		}
+	}
+}
+
+type Unit =
+	| 'second'
+	| 'seconds'
+	| 'minute'
+	| 'minutes'
+	| 'hour'
+	| 'hours'
+	| 'day'
+	| 'days'
+	| 'week'
+	| 'weeks'
+	| 'month'
+	| 'months'
+	| 'year'
+	| 'years';

src/package/utils/number.ts

@@ -0,0 +1,40 @@
+/**
+ * Convert large numbers to human readable strings
+ * @source https://github.com/rohmanhm/simplify-number
+ */
+export function simplify(num = 0): string {
+	let numberVar = num;
+
+	// 2 decimal places => 100, 3 => 1000, etc
+	const decPlaces = Math.pow(10, 1);
+
+	// Enumerate number abbreviations
+	const abbrev = ['K', 'M', 'B', 'T'];
+
+	// Go through the array backwards, so we do the largest first
+	for (let i = abbrev.length - 1; i >= 0; i--) {
+		// Convert array index to "1000", "1000000", etc
+		const size = Math.pow(10, (i + 1) * 3);
+
+		// If the number is bigger or equal do the abbreviation
+		if (size <= numberVar) {
+			// Here, we multiply by decPlaces, round, and then divide by decPlaces.
+			// This gives us nice rounding to a particular decimal place.
+			numberVar = Math.round((numberVar * decPlaces) / size) / decPlaces;
+
+			// Handle special case where we round up to the next abbreviation
+			if (numberVar === 1000 && i < abbrev.length - 1) {
+				numberVar = 1;
+				i++;
+			}
+
+			// Add the letter for the abbreviation
+			(numberVar as any) += abbrev[i];
+
+			// We are done... stop
+			break;
+		}
+	}
+
+	return String(numberVar);
+}

src/package/utils/parse.ts

@@ -0,0 +1,134 @@
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+import insane from 'insane';
+
+const renderer = new marked.Renderer();
+
+renderer.image = (href, text) => {
+	if (/^https?:\/\/(www\.)?youtube\.com\/watch\?v=[a-zA-Z0-9_]{11}$/.test(href)) {
+		const id = href.substring(32, 43);
+		return `<iframe src="https://www.youtube-nocookie.com/embed/${id}?&modestbranding=1&autoplay=0&rel=0" frameborder="0" allowfullscreen></iframe>`;
+	} else {
+		return `<img src="${href}" alt="${text}" />`;
+	}
+};
+
+renderer.link = (href, title, text) => {
+	if (href === null) {
+		return text;
+	}
+	let out = '<a href="' + href + '" rel="external nofollow"';
+	if (title) {
+		out += ' title="' + title + '"';
+	}
+	out += '>' + text + '</a>';
+	return out;
+};
+
+marked.setOptions({
+	renderer,
+	highlight: function (code, lang) {
+		const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+		return hljs.highlight(code, { language }).value;
+	},
+	langPrefix: 'hljs language-',
+	headerPrefix: '',
+	gfm: true,
+	smartLists: true,
+});
+
+function sanitize(html: string): string {
+	return insane(html, {
+		allowedAttributes: {
+			a: ['href', 'name', 'target', 'title', 'rel'],
+			iframe: ['allowfullscreen', 'src', 'width', 'height'],
+			img: ['src', 'width', 'height', 'alt'],
+			h1: ['id'],
+			h2: ['id'],
+			h3: ['id'],
+			h4: ['id'],
+			h5: ['id'],
+			h6: ['id'],
+			code: ['class'],
+			span: ['class'],
+			input: ['type', 'checked', 'disabled'],
+			font: ['color'],
+		},
+		allowedClasses: {},
+		allowedSchemes: ['http', 'https', 'mailto'],
+		allowedTags: [
+			'a',
+			'b',
+			'blockquote',
+			'br',
+			'caption',
+			'center',
+			'code',
+			'del',
+			'details',
+			'div',
+			'em',
+			'font',
+			'h1',
+			'h2',
+			'h3',
+			'h4',
+			'h5',
+			'h6',
+			'hr',
+			'i',
+			'iframe',
+			'img',
+			'input',
+			'ins',
+			'kbd',
+			'li',
+			'main',
+			'ol',
+			'p',
+			'pre',
+			'span',
+			'strike',
+			'strong',
+			'sub',
+			'summary',
+			'sup',
+			'table',
+			'tbody',
+			'td',
+			'th',
+			'thead',
+			'tr',
+			'u',
+			'ul',
+		],
+		filter: ({ tag, attrs }): boolean => {
+			if (tag === 'iframe') {
+				return /^https?:\/\/(www\.)?(youtube|youtube-nocookie)\.com\/embed\/[a-zA-Z0-9_]{11}(\?)?(&modestbranding=1)?(&autoplay=0)?(&loop=1)?(&playlist=[a-zA-Z0-9_]{11})?(&rel=0)?$/.test(
+					attrs.src || ''
+				);
+			} else if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tag)) {
+				return attrs.id !== 'svelte';
+			} else if (tag === 'input') {
+				return attrs.type === 'checkbox' && attrs.disabled === '';
+			} else if (tag === 'code' || tag === 'span') {
+				return !attrs.class || attrs.class.replace(' ', '').startsWith('hljs');
+			} else {
+				return true;
+			}
+		},
+		transformText: null,
+	});
+}
+
+export function markdown(markdown: string): string {
+	return marked.parse(markdown);
+}
+
+export function markdownInline(markdown: string): string {
+	return marked.parseInline(markdown);
+}
+
+export function markdownXSS(markdown: string): string {
+	return sanitize(marked.parse(markdown));
+}

src/package/utils/permissions.ts

@@ -0,0 +1,38 @@
+export class Permissions {
+	data = {
+		uploadVersions: false,
+		deleteVersion: false,
+		editDetails: false,
+		editBody: false,
+		manageInvites: false,
+		removeMember: false,
+		editMember: false,
+		deleteProject: false,
+	};
+
+	get settingsPage(): boolean {
+		return (
+			this.data.manageInvites ||
+			this.data.removeMember ||
+			this.data.editMember ||
+			this.data.deleteProject
+		);
+	}
+
+	constructor(from: number | 'ALL' | null) {
+		if (from === 'ALL' || from === 0b11111111 || from === null) {
+			Object.keys(this.data).forEach((v) => (this.data[v] = true));
+		} else if (typeof from === 'number') {
+			this.data = {
+				uploadVersions: !!(from & (1 << 0)),
+				deleteVersion: !!(from & (1 << 1)),
+				editDetails: !!(from & (1 << 2)),
+				editBody: !!(from & (1 << 3)),
+				manageInvites: !!(from & (1 << 4)),
+				removeMember: !!(from & (1 << 5)),
+				editMember: !!(from & (1 << 6)),
+				deleteProject: !!(from & (1 << 7)),
+			};
+		}
+	}
+}

src/package/utils/versions.ts

@@ -0,0 +1,84 @@
+import gameVersions from '$generated/gameVersions.json';
+
+export function formatVersions(versionArray: string[]): string {
+	const allVersions = gameVersions.slice().reverse();
+	const allReleases = allVersions.filter((x) => x.version_type === 'release');
+
+	const intervals = [];
+	let currentInterval = 0;
+
+	for (let i = 0; i < versionArray.length; i++) {
+		const index = allVersions.findIndex((x) => x.version === versionArray[i]);
+		const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i]);
+
+		if (i === 0) {
+			intervals.push([[versionArray[i], index, releaseIndex]]);
+		} else {
+			const intervalBase = intervals[currentInterval];
+
+			if (
+				(index - intervalBase[intervalBase.length - 1][1] === 1 ||
+					releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
+				(allVersions[intervalBase[0][1]].version_type === 'release' ||
+					allVersions[index].version_type !== 'release')
+			) {
+				intervalBase[1] = [versionArray[i], index, releaseIndex];
+			} else {
+				currentInterval += 1;
+				intervals[currentInterval] = [[versionArray[i], index, releaseIndex]];
+			}
+		}
+	}
+
+	const newIntervals = [];
+	for (let i = 0; i < intervals.length; i++) {
+		const interval = intervals[i];
+
+		if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
+			let lastSnapshot = null;
+			for (let j = interval[1][1]; j > interval[0][1]; j--) {
+				if (allVersions[j].version_type === 'release') {
+					newIntervals.push([
+						interval[0],
+						[
+							allVersions[j].version,
+							j,
+							allReleases.findIndex((x) => x.version === allVersions[j].version),
+						],
+					]);
+
+					if (lastSnapshot !== null && lastSnapshot !== j + 1) {
+						newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]]);
+					} else {
+						newIntervals.push([interval[1]]);
+					}
+
+					break;
+				} else {
+					lastSnapshot = j;
+				}
+			}
+		} else {
+			newIntervals.push(interval);
+		}
+	}
+
+	const output = [];
+
+	for (const interval of newIntervals) {
+		if (interval.length === 2) {
+			output.push(`${interval[0][0]}—${interval[1][0]}`);
+		} else {
+			output.push(interval[0][0]);
+		}
+	}
+
+	return output.join(', ');
+}
+
+export const getPrimary = (files: Version['files']) =>
+	files.find((file) => file.primary) || files[0];
+
+export function downloadUrl(file): string {
+	return import.meta.env.VITE_API_URL + `version_file/${file?.hashes.sha1}/download`;
+}

src/routes/__layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import '$lib/styles.postcss'
+    import '$package/styles.postcss'
     import './_internal/styles/prism-one-dark.css'
     import './_internal/styles/gh-markdown.postcss'
     import Sidebar from './_internal/components/Sidebar.svelte'

src/routes/_internal/components/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Button from '$lib/components/Button.svelte'
+    import { Button } from 'omorphia/'
     import IconMoon from 'virtual:icons/heroicons-outline/moon'
     import IconSun from 'virtual:icons/heroicons-outline/sun'
 
@@ -9,7 +9,10 @@
 
 <div class="example">
     <div class="example__preview theme-{theme} base" style:background={background}>
-        <div class="example__preview__options">
+        <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/>
@@ -18,9 +21,8 @@
                 {/if}
             </Button>
         </div>
-        <slot name="example"/>
+        <pre class="example__source__code language-svelte"><slot name="code"/></pre>
     </div>
-    <pre class="example__code language-svelte"><slot name="code"/></pre>
 </div>
 
 <style lang="postcss">
@@ -37,6 +39,10 @@
             position: relative;
             justify-content: flex-start;
             z-index: 1;
+        }
+
+        &__source {
+            position: relative;
 
             &__options {
                 position: absolute;
@@ -45,14 +51,17 @@
                 padding: 8px;
                 display: flex;
                 justify-content: flex-end;
-                z-index: 100;
-            }
-        }
 
-        &__code {
-            margin: 0;
-            border-radius: var(--rounded-sm-bottom) !important;
-            background: hsl(220, 13%, 22%);
+                :global(button) {
+                    color: black;
+                }
+            }
+
+            &__code {
+                margin: 0;
+                border-radius: var(--rounded-sm-bottom) !important;
+                background: hsl(220, 13%, 22%);
+            }
         }
     }
 </style>

src/routes/_internal/components/Header.svelte

@@ -11,7 +11,7 @@
         window.addEventListener('scroll', () => {
             let scrollTop = window.pageYOffset || document.documentElement.scrollTop
             if (scrollTop > lastScrollTop && headerElement) {
-                headerElement.style.top = 'calc(var(--header-height) * -1)'
+                headerElement.style.top = '-100%'
             } else if (headerElement) {
                 headerElement.style.top = '0'
             }
@@ -46,7 +46,6 @@
         flex-wrap: wrap;
         padding: 16px 24px;
         position: fixed;
-        height: var(--header-height);
         left: 0;
         right: 0;
         top: 0;
@@ -55,6 +54,10 @@
         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 (--sm) {
             padding: 10px 32px;
         }

src/routes/_internal/components/Sidebar.svelte

@@ -3,11 +3,11 @@
 
     const components = Object.keys(import.meta.glob('../../components/**'))
         .map(it => it.replace('../../components/', '').replace('.md', ''))
-        .sort();
+        .sort()
 
     const classes = Object.keys(import.meta.glob('../../classes/**'))
         .map(it => it.replace('../../classes/', '').replace('.md', ''))
-        .sort();
+        .sort()
 
     let slideIn = false
 </script>
@@ -19,6 +19,8 @@
         <a href="/getting-started/icons" class="section__link">Using Icons</a>
         <a href="/getting-started/postcss" class="section__link">PostCSS config</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>
     </div>
 
     <div class="section">
@@ -35,12 +37,17 @@
         {/each}
     </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%);
     }
 
     .sidebar {
@@ -48,7 +55,7 @@
         flex-direction: column;
         grid-gap: 2rem;
         background-color: var(--sidebar-color);
-        color: hsl(216, 10%, 80%);
+        color: var(--title-color);
         height: 100vh;
         max-height: 100vh;
         overflow-y: auto;
@@ -58,10 +65,24 @@
         left: -100%;
         top: 0;
         z-index: 5;
-        padding: 88px 32px 32px;
+        padding: 88px 32px;
         transition: left 0.2s ease-in-out;
         box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
 
+        &:after {
+            content: "";
+            position: fixed;
+            z-index: 1;
+            bottom: 0;
+            left: 0;
+            pointer-events: none;
+            background-image: linear-gradient(to bottom,
+            transparent,
+            var(--sidebar-color) 90%);
+            width: var(--sidebar-width);
+            height: 88px;
+        }
+
         @media (--md) {
             left: 0;
         }
@@ -78,7 +99,7 @@
             }
 
             &__link {
-                color: hsl(216, 10%, 90%);
+                color: var(--link-color);
                 text-decoration: none;
 
                 &:hover {
@@ -99,7 +120,7 @@
             border-radius: var(--rounded);
             color: white;
             box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
-            transition: left 0.2s cubic-bezier(.38,.52,.37,1.27);
+            transition: left 0.2s cubic-bezier(.38, .52, .37, 1.27);
 
             :global(.icon) {
                 width: 32px;
@@ -118,5 +139,21 @@
                 left: calc(32px + min(70vw, var(--sidebar-width)))
             }
         }
+
+        scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
+
+        &::-webkit-scrollbar {
+            width: 14px;
+        }
+
+        &::-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);
+        }
     }
 </style>

src/routes/_internal/layout/page.svelte

@@ -14,7 +14,7 @@
     let api
     if ($page.url.pathname.includes('components')) {
         if (import.meta.env.DEV) {
-            import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
+            import(`../../../package/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
         } else {
             api = COMPONENT_API[`${title}.svelte`]
         }

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

@@ -119,7 +119,8 @@ pre[class*="language-"] {
 .token.symbol,
 .token.deleted,
 .token.important {
-	color: hsl(355, 65%, 65%);
+	color: hsl(355, 65%, 65%) !important;
+	display: unset;
 }
 
 .token.selector,

src/routes/classes/Actions.md

@@ -0,0 +1,15 @@
+```svelte example
+<script>
+    import { Button } from 'omorphia'
+    import IconHeartSolid from 'virtual:icons/heroicons-solid/heart'
+    import IconCalendar from 'virtual:icons/lucide/calendar'
+</script>
+
+<div class="actions">
+    <Button><IconHeartSolid /> Unfollow </Button>
+    <span class="stat">
+      <IconCalendar/>
+      Updated 12 days ago
+    </span>
+</div>
+```

src/routes/classes/Base.md

@@ -0,0 +1,7 @@
+Base should be applied to a "root" element, like `<body>`, to provide base styles for common things like text. The theme mode, `light-theme`, `dark-theme`, or `oled-theme`, should also be added to this element.
+
+```svelte example
+<div class="base theme-light">
+ ...
+</div>
+```

src/routes/classes/Card.md

@@ -14,9 +14,9 @@
 
 ```svelte example
 <script lang="ts">
-    import Button from "omorphia/components/Button.svelte";
+    import { Button } from "omorphia";
     import IconPencil from 'virtual:icons/heroicons-outline/pencil'
-    import Avatar from "omorphia/components/Avatar.svelte";
+    import { Avatar } from "omorphia";
 </script>
 
 <div class="card">

src/routes/classes/Divider.md

@@ -0,0 +1,9 @@
+```svelte example
+<div class="card">
+    Some words could go here.
+    
+    <hr class="divider" />
+    
+    And some other words could go here.
+</div>
+```

src/routes/classes/InfoTable.md

@@ -0,0 +1,10 @@
+```svelte example
+  <div class="info-table">
+    <span class="info-table__label">License</span>
+    <a href="#mit" class="link">MIT</a>
+    <span class="info-table__label">Project ID</span>
+    <span>11223344</span>
+    <span class="info-table__label">Visibilty</span>
+    <span>Approved</span>
+  </div>
+```

src/routes/classes/Link.md

@@ -1,3 +1,22 @@
+### Single example
+
 ```svelte example
 <a class="link" href="#place"> Go somewhere! </a>
+```
+
+### Group example
+
+```svelte example
+<script>
+  import IconIssues from 'virtual:icons/heroicons-outline/exclamation'
+  import IconCode from 'virtual:icons/heroicons-outline/code'
+  import IconClock from 'virtual:icons/lucide/flag-triangle-right'
+  import IconWiki from 'virtual:icons/heroicons-outline/book-open'
+</script>
+
+<div class="link-group">
+    <a class="link" href="#issues"><IconIssues /> Issues</a>
+    <a class="link" href="#source"><IconCode /> Source</a>
+    <a class="link" href="#wiki"><IconWiki /> Wiki</a>
+</div>
 ```

src/routes/classes/Member.md

@@ -0,0 +1,13 @@
+```svelte example
+<script lang="ts">
+    import { Avatar } from "omorphia";
+</script>
+
+<a class="member" href="#user">
+  <Avatar src="https://avatars1.githubusercontent.com/u/6166773" size="sm" circle/>
+  <div class="member__info">
+    <span class="member__info__link">Prospector</span>
+    <span>Owner</span>
+  </div>
+</a>
+```

src/routes/classes/Stat.md

@@ -0,0 +1,32 @@
+### Single Example
+
+```svelte example
+<script>
+    import IconStar from 'virtual:icons/heroicons-outline/star'
+</script>
+
+<div class="stat">
+  <IconStar/>
+  123K stars
+</div>
+```
+
+### Group Example
+
+```svelte example
+<script>
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
+    import IconHeart from 'virtual:icons/heroicons-outline/heart'
+</script>
+
+<div class="stat-group">
+    <div class="stat">
+      <IconDownload/>
+      4.1B downloads
+    </div>
+    <div class="stat stat--light">
+      <IconHeart/>
+      3 followers
+    </div>
+</div>
+```

src/routes/classes/Tags.md

@@ -0,0 +1,15 @@
+```svelte example
+<script>
+    import IconCarrot from 'virtual:icons/lucide/carrot'
+    import IconGlobe from 'virtual:icons/heroicons-outline/globe'
+</script>
+
+<div class="tag-group">
+    <div class="tag">
+      <IconCarrot/> Food
+    </div>
+    <div class="tag">
+      <IconGlobe/> World generation
+    </div>
+</div>
+```

src/routes/classes/Title.md

@@ -0,0 +1,5 @@
+```svelte example
+<h1 class="title-primary">Tree Mod</h1>
+<h2 class="title-secondary">Information</h2>
+<h3 class="title-tertiary">Members</h3>
+```

src/routes/components/Avatar.md

@@ -2,7 +2,7 @@ Avatars are used for project icons and user profile pictures. Low resolution ima
 
 ```svelte example
 <script lang="ts">
-    import Avatar from "omorphia/components/Avatar.svelte";
+    import { Avatar } from "omorphia";
 </script>
 
 <Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />

src/routes/components/Badge.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import Badge from "omorphia/components/Badge.svelte";
+    import { Badge } from "omorphia";
 </script>
 
 <Badge color="red" label="Tomato" />

src/routes/components/Button.md

@@ -1,10 +1,31 @@
+### Single example
+
 ```svelte example
 <script lang="ts">
-    import Button from "omorphia/components/Button.svelte";
+    import { Button } from "omorphia";
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
 </script>
 
-<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 color="primary"><IconDownload /> Download</Button>
+```
+
+### Group example
+
+```svelte example
+<script lang="ts">
+    import { Button } from "omorphia";
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
+</script>
+
+<div class="button-group">
+    <Button>Default button</Button>
+    <Button color="raised">Raised button</Button>
+    <Button color="primary">Primary button</Button>
+    <Button color="primary-light">Light primary button</Button>
+    <Button color="danger">Danger button</Button>
+    <Button color="danger-light">Light danger button</Button>
+    <Button color="transparent">Transparent button</Button>
+    <Button disabled>Disabled button</Button>
+    <Button color="primary"><IconDownload /></Button>
+</div>
 ```

src/routes/components/Checkbox.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import { Checkbox } from "omorphia";
 </script>
 
 <Checkbox>Extra components</Checkbox>
@@ -12,7 +12,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Checkbox from "omorphia/components/Checkbox.svelte";
+    import { Checkbox } from "omorphia";
     import IconCarrot from 'virtual:icons/lucide/carrot'
 </script>
 

src/routes/components/CheckboxList.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import CheckboxList from "omorphia/components/CheckboxList.svelte";
+    import { CheckboxList } from "omorphia";
     import IconSquare from 'virtual:icons/lucide/square'
     import IconCircle from 'virtual:icons/lucide/circle'
     import IconTriangle from 'virtual:icons/lucide/triangle'

src/routes/components/CheckboxVirtualList.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import CheckboxVirtualList from "omorphia/components/CheckboxVirtualList.svelte";
+    import { CheckboxVirtualList } from "omorphia";
     import IconStar from 'virtual:icons/heroicons-outline/star'
     import uniqueId from 'lodash.uniqueid'
     

src/routes/components/Chips.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Chips from "omorphia/components/Chips.svelte";
+    import { Chips } from "omorphia";
 </script>
 
 <Chips options={[
@@ -22,7 +22,7 @@
 
 ```svelte example
 <script lang="ts">
-    import Chips from "omorphia/components/Chips.svelte";
+    import { Chips } from "omorphia";
 
     let foo = 'modpack'
 </script>

src/routes/components/FormField.md

@@ -0,0 +1,10 @@
+```svelte example
+<script lang="ts">
+    import { FormField } from "omorphia";
+    import { TextInput } from "omorphia";
+</script>
+
+<FormField label="Favorite color">
+    <TextInput placeholder="Enter another color..." />
+</FormField>
+```

src/routes/components/NavRow.md

@@ -2,7 +2,7 @@
 
 ```svelte example
 <script lang="ts">
-    import NavRow from "omorphia/components/NavRow.svelte";
+    import { NavRow } from "omorphia";
 </script>
 
 <NavRow

src/routes/components/Pagination.md

@@ -2,7 +2,7 @@ Use pagination to show a set of page numbers and navigation directions to move t
 
 ```svelte example
 <script lang="ts">
-    import Pagination from "omorphia/components/Pagination.svelte"
+    import { Pagination } from "omorphia"
 </script>
 
 <Pagination page={20} count={50} />

src/routes/components/Select.md

@@ -1,6 +1,6 @@
 ```svelte example
 <script lang="ts">
-    import Select from "omorphia/components/Select.svelte";
+    import { Select } from "omorphia";
     
     let sortMethod = "downloads"
 </script>

src/routes/components/TextInput.md

@@ -0,0 +1,8 @@
+```svelte example
+<script lang="ts">
+    import { TextInput } from "omorphia";
+</script>
+
+<TextInput>Favorite color</TextInput>
+<TextInput placeholder="Enter another color..." />
+```

src/routes/getting-started/illustrations.md

@@ -0,0 +1,7 @@
+---
+title: Using illustrations
+---
+
+TODO
+
+Use `.illustration` class.

src/routes/getting-started/utils.md

@@ -0,0 +1,26 @@
+---
+title: Built-in utilities
+---
+
+TODO
+
+## ... ago
+
+## Simplify number
+
+## Markdown & XSS
+
+### Parsers
+
+- sanitize
+- markdown
+- markdownInline
+- markdownXSS
+
+### Markdown
+
+Put parsed HTML into a `<div>` with `class="markdown"`.
+
+## Permissions
+
+## Versions

src/routes/index.md

@@ -26,7 +26,7 @@ Use a component by importing from `omorphia`. For example, use the [Button compo
 
 ```svelte example
 <script lang="ts">
-    import Button from "omorphia/components/Button.svelte"
+    import { Button } from "omorphia"
 </script>
 
 <Button color="primary">I'm a button!</Button>