Add .file class + Generator user agent

docs/routes/classes/Card.md

@@ -23,7 +23,7 @@
 
 <div class="card">
 	<div class="card__overlay">
-		<Button color="raised"><IconPencil /> Edit</Button>
+		<Button raised><IconPencil /> Edit</Button>
 	</div>
 	<div class="card__banner card__banner--short card__banner--dark" />
 	<Avatar size="md" floatUp />

docs/routes/classes/File.md

@@ -0,0 +1,14 @@
+```svelte example raised
+<script lang="ts">
+	import IconFile from 'virtual:icons/lucide/file'
+	import { Button } from 'omorphia'
+</script>
+
+<div class="file file--primary">
+	<div class="file__tab">
+		<IconFile />
+		<div class="file__tab__name"><b>cool-mod.jar</b></div>
+		<Button raised>Download</Button>
+	</div>
+</div>
+```

docs/routes/components/Button.md

@@ -6,7 +6,7 @@
 	import IconDownload from 'virtual:icons/heroicons-outline/download'
 </script>
 
-<Button color="raised"><IconDownload /> Download</Button>
+<Button raised><IconDownload /> Download</Button>
 ```
 
 ### Color variants example
@@ -19,7 +19,6 @@
 
 <div class="button-group">
 	<Button>Default</Button>
-	<Button color="raised">Raised</Button>
 	<Button color="primary">Primary</Button>
 	<Button color="primary-light">Light primary</Button>
 	<Button color="secondary">Secondary</Button>
@@ -33,7 +32,7 @@
 
 ### With icons example
 
-```svelte example raised
+```svelte example
 <script lang="ts">
 	import { Button } from 'omorphia'
 	import IconDownload from 'virtual:icons/heroicons-outline/download'
@@ -41,7 +40,7 @@
 </script>
 
 <div class="button-group">
-	<Button color="primary"><IconDownload /></Button>
-	<Button><IconHeart /> Follow mod</Button>
+	<Button color="primary" raised><IconDownload /></Button>
+	<Button raised><IconHeart /> Follow mod</Button>
 </div>
 ```

docs/routes/components/CheckboxVirtualList.md

@@ -2,17 +2,16 @@
 <script lang="ts">
 	import { CheckboxVirtualList } from 'omorphia'
 	import IconStar from 'virtual:icons/heroicons-outline/star'
-	import { uniqueId } from 'omorphia/utils/uniqueId'
 
 	let options = Array(100)
 		.fill({})
-		.map((option) => ({
-			label: 'Star-' + uniqueId(),
+		.map((option, index) => ({
+			label: 'Star-' + index,
 			icon: IconStar,
-			value: uniqueId(),
+			value: index,
 		}))
 
-	let selected = ['2', '6']
+	let selected = [22, 24]
 </script>
 
 <CheckboxVirtualList bind:value={selected} {options} />

package.json

@@ -6,6 +6,7 @@
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",
 		"package": "svelte-kit package && merge-dirs package/src package",
+		"watch:package": "svelte-kit package --watch",
 		"preview": "svelte-kit preview",
 		"prepare": "svelte-kit sync",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
@@ -82,7 +83,7 @@
 		"postcss-preset-env": "^7.7.1",
 		"postcss-pxtorem": "^6.0.0",
 		"sanitize.css": "^13.0.0",
-		"svelte-tiny-virtual-list": "^2.0.1",
+		"svelte-tiny-virtual-list": "^2.0.5",
 		"svelte-use-click-outside": "^1.0.0",
 		"throttle-debounce": "^3.0.1",
 		"undici": "^5.2.0",

pnpm-lock.yaml

@@ -47,7 +47,7 @@ specifiers:
   svelte-check: ^2.7.2
   svelte-intl-precompile: ^0.11.1
   svelte-preprocess: ^4.10.7
-  svelte-tiny-virtual-list: ^2.0.1
+  svelte-tiny-virtual-list: ^2.0.5
   svelte-use-click-outside: ^1.0.0
   svelte2tsx: ^0.5.5
   throttle-debounce: ^3.0.1
@@ -82,7 +82,7 @@ dependencies:
   postcss-preset-env: 7.7.1_postcss@8.4.8
   postcss-pxtorem: 6.0.0_postcss@8.4.8
   sanitize.css: 13.0.0
-  svelte-tiny-virtual-list: 2.0.1
+  svelte-tiny-virtual-list: 2.0.5
   svelte-use-click-outside: 1.0.0
   throttle-debounce: 3.0.1
   undici: 5.2.0
@@ -5141,8 +5141,8 @@ packages:
       typescript: 4.6.2
     dev: true
 
-  /svelte-tiny-virtual-list/2.0.1:
-    resolution: {integrity: sha512-0X6k5cZxF9yRLfVJ1bfwQmfEMbd3OSNNM/tI9y44jYbsB/FkI2GEIKpeV5J8AQy87qFU9xnPLxxo3erQFfdC2A==}
+  /svelte-tiny-virtual-list/2.0.5:
+    resolution: {integrity: sha512-xg9ckb8UeeIme4/5qlwCrl2QNmUZ8SCQYZn3Ji83cUsoASqRNy3KWjpmNmzYvPDqCHSZjruBBsoB7t5hwuzw5g==}
     dev: false
 
   /svelte-use-click-outside/1.0.0:

src/components/Button.svelte

@@ -5,7 +5,7 @@
 	import { classCombine } from '../utils/classCombine'
 
 	/** The element to be styled as a button */
-	export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
+	export let as: 'button' | 'a' | 'summary' | 'input' | 'file' = 'button'
 	export let href = ''
 	if (href) as = 'a'
 
@@ -15,7 +15,6 @@
 	export let size: 'sm' | 'md' | 'lg' = 'md'
 	export let color:
 		| ''
-		| 'raised'
 		| 'primary'
 		| 'primary-light'
 		| 'secondary'
@@ -24,6 +23,9 @@
 		| 'danger-light'
 		| 'transparent' = ''
 
+	/** Applies a stronger shadow to the element. To be used when the button isn't on a card  */
+	export let raised = false
+
 	/** Show notification badge in the upper right of button */
 	export let badge = false
 
@@ -40,6 +42,7 @@
 		'button',
 		`button--size-${size}`,
 		`button--color-${color}`,
+		raised && 'button--raised',
 		badge && 'has-badge',
 	])
 
@@ -48,6 +51,10 @@
 	function dispatchClick() {
 		if (!disabled) dispatch('click')
 	}
+
+	function dispatchFiles(event: Event) {
+		if (!disabled) dispatch('files', (event.target as HTMLInputElement).files || new FileList())
+	}
 </script>
 
 {#if as === 'a'}
@@ -56,6 +63,11 @@
 	</a>
 {:else if as === 'input'}
 	<input class={className} {value} {disabled} {title} on:click={dispatchClick} />
+{:else if as === 'file'}
+	<label class={className} {disabled} {title}>
+		<input type="file" on:change={dispatchFiles} />
+		<slot />
+	</label>
 {:else}
 	<svelte:element this={as} class={className} {disabled} {title} on:click={dispatchClick}>
 		<slot />
@@ -83,6 +95,11 @@
 		transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
 			outline 0.2s ease-in-out;
 
+		&--raised {
+			background-color: var(--color-raised-bg);
+			box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+		}
+
 		&:hover:not(&--color-transparent, &:disabled) {
 			filter: brightness(0.85);
 		}
@@ -93,11 +110,6 @@
 		}
 
 		&--color {
-			&-raised {
-				background-color: var(--color-raised-bg);
-				box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
-			}
-
 			&-primary {
 				background-color: var(--color-brand);
 				color: var(--color-brand-contrast);
@@ -166,5 +178,10 @@
 			top: 0.5rem;
 			right: 0.5rem;
 		}
+
+		/* Hides default file input */
+		input[type='file'] {
+			display: none;
+		}
 	}
 </style>

src/components/CheckboxVirtualList.svelte

@@ -11,7 +11,12 @@
 	export let value = []
 	export let options: Option[] = []
 
+	// Scroll into view selected options when created
+	let scrollToIndex =
+		Math.min(...value.map((val) => options.map((it) => it.value).indexOf(val))) || null
+
 	const handleChange = (event: any, key: string | number) => {
+		scrollToIndex = null
 		if (event.target.checked) {
 			if (!value) value = []
 			value = [key, ...value]
@@ -21,7 +26,14 @@
 	}
 </script>
 
-<VirtualList width="100%" {height} itemCount={options.length} itemSize={26}>
+<VirtualList
+	width="100%"
+	{height}
+	itemCount={options.length}
+	itemSize={26}
+	{scrollToIndex}
+	scrollToAlignment="center"
+	scrollToBehaviour="smooth">
 	<div
 		slot="item"
 		let:index

src/components/FileUpload.svelte

@@ -7,21 +7,35 @@
 	import Button from './Button.svelte'
 	import { classCombine } from '../utils/classCombine'
 
+	interface RemoteFile {
+		name: string
+		remote: true
+	}
+
 	export let multiple = false
 	export let accept: string
 	/** Prevents width from expanding due to large file names or images */
 	export let constrained = false
 
-	export let files: File[] = []
-	export let file: File | undefined
+	export let files: (File | RemoteFile)[] = []
+	export let file: File | RemoteFile | undefined
 	$: if (files) file = files[0] || undefined
 
 	let inputElement: HTMLInputElement
 
 	function addFiles(fileList: FileList) {
 		for (const file of Array.from(fileList)) {
-			// Check for duplicate files
-			if (!files.map((file) => file.name).includes(file.name)) {
+			// Check for duplicate files that aren't remote
+			if (
+				!files
+					.filter((it) => it instanceof File)
+					.map((file) => file.name)
+					.includes(file.name)
+			) {
+				if (files.map((file) => file.name).includes(file.name)) {
+					// Remove remote file with the same name
+					files = files.filter((it) => it.name !== file.name)
+				}
 				files = [...files, file]
 			}
 		}
@@ -53,7 +67,7 @@
 	{#each files as file (file.name)}
 		<div class="file">
 			<div class="file__tab">
-				{#if file.type.startsWith('image/')}
+				{#if file instanceof File && file.type.startsWith('image/')}
 					<IconPhotograph />
 				{:else}
 					<IconFile />
@@ -65,7 +79,7 @@
 						files = files.filter((it) => it.name !== file.name)
 					}}><IconTrash /> Remove</Button>
 			</div>
-			{#if file.type.startsWith('image/')}
+			{#if file instanceof File && file.type.startsWith('image/')}
 				<div class="file__preview">
 					<img
 						class="file__preview__image"
@@ -99,47 +113,5 @@
 			cursor: pointer;
 			color: var(--color-text-light);
 		}
-
-		.file {
-			border-radius: var(--rounded);
-			background-color: var(--color-button-bg);
-			box-shadow: var(--shadow-raised-sm), var(--shadow-inset);
-
-			&__tab {
-				display: flex;
-				align-items: center;
-				padding: 0.75rem 1rem;
-				gap: 1rem;
-
-				:global(.icon) {
-					/* Uses `px` to make icons slightly larger */
-					min-width: 18px;
-					height: 18px;
-				}
-
-				&__name {
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					margin-right: auto;
-				}
-			}
-
-			&__preview {
-				width: 100%;
-				border-radius: var(--rounded-bottom);
-				overflow: hidden;
-				display: flex;
-				justify-content: center;
-				background-color: black;
-
-				&__image {
-					height: auto;
-					max-height: 22rem;
-					width: 100%;
-					object-fit: contain;
-				}
-			}
-		}
 	}
 </style>

src/components/Pagination.svelte

@@ -25,7 +25,7 @@
 {#if count > 1}
 	<div class="pagination">
 		<Button
-			color="raised"
+			raised
 			on:click={() => dispatch('change', page - 1)}
 			disabled={page <= 1}
 			title="Last page"
@@ -36,12 +36,13 @@
 				<IconMinus class="pagination__dash" />
 			{:else}
 				<Button
-					color={option === page ? 'primary' : 'raised'}
+					color={option === page ? 'primary' : ''}
+					raised
 					on:click={() => dispatch('change', option)}>{option}</Button>
 			{/if}
 		{/each}
 		<Button
-			color="raised"
+			raised
 			on:click={() => dispatch('change', page + 1)}
 			disabled={page >= count}
 			title="Next page">

src/components/Select.svelte

@@ -134,7 +134,7 @@
 
 		const debounced = debounce(100, checkDirection)
 		window.addEventListener('resize', debounced)
-		window.addEventListener('scroll;', debounced)
+		window.addEventListener('scroll', debounced)
 	})
 </script>
 

src/components/TextInput.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { classCombine } from '$lib/utils/classCombine'
+
 	export let placeholder = ''
 	/** A Svelte component */
 	export let icon: any = undefined
@@ -7,9 +9,10 @@
 	/** An ID for better accessibility */
 	export let id: string = undefined
 	export let fill = false
+	export let raised = false
 </script>
 
-<div class="text-input" class:fill>
+<div class={classCombine(['text-input', raised && 'text-input--raised'])} class:fill>
 	{#if multiline}
 		<textarea {id} {placeholder} bind:value />
 	{:else}
@@ -43,6 +46,12 @@
 			max-width: 100%;
 		}
 
+		&--raised > input,
+		&--raised > textarea {
+			border: 2px solid var(--color-text-lightest);
+			box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+		}
+
 		input {
 			padding: 0.25rem 1rem;
 

src/plugins/generator/fetch.js

@@ -0,0 +1,21 @@
+import { fetch as baseFetch } from 'undici'
+import { promises as fs } from 'fs'
+
+const API_URL =
+	process.env.VITE_API_URL && process.env.VITE_API_URL === 'https://staging-api.modrinth.com/v2/'
+		? 'https://staging-api.modrinth.com/v2/'
+		: 'https://api.modrinth.com/v2/'
+
+let version = ''
+
+export async function fetch(route, options = {}) {
+	if (!version) {
+		version = JSON.parse(await fs.readFile('./package.json', 'utf8')).version
+	}
+	return baseFetch(API_URL + route, {
+		...options,
+		headers: {
+			'user-agent': `Omorphia / ${version} (venashial@modrinth.com)`,
+		},
+	})
+}

src/plugins/generator/index.js

@@ -5,11 +5,6 @@ import { gameVersions } from './outputs/gameVersions.js'
 import { tags } from './outputs/tags.js'
 import { openapi } from './outputs/openapi.js'
 
-const API_URL =
-	process.env.VITE_API_URL && process.env.VITE_API_URL === 'https://staging-api.modrinth.com/v2/'
-		? 'https://staging-api.modrinth.com/v2/'
-		: 'https://api.modrinth.com/v2/'
-
 // Time to live: 7 days
 const TTL = 7 * 24 * 60 * 60 * 1000
 
@@ -56,11 +51,11 @@ export default function Generator(options) {
 
 			await fs.writeFile('./generated/state.json', JSON.stringify(state, null, 2))
 
-			if (options.tags) await tags(API_URL)
-			if (options.landingPage) await landingPage(API_URL)
-			if (options.gameVersions) await gameVersions(API_URL)
-			if (options.openapi) await openapi(API_URL)
-			if (options.projectColors) await projectColors(API_URL)
+			if (options.tags) await tags()
+			if (options.landingPage) await landingPage()
+			if (options.gameVersions) await gameVersions()
+			if (options.openapi) await openapi()
+			if (options.projectColors) await projectColors()
 		},
 	}
 }

src/plugins/generator/outputs/gameVersions.js

@@ -1,8 +1,8 @@
-import { fetch } from 'undici'
+import { fetch } from '../fetch.js'
 import { promises as fs } from 'fs'
 import cliProgress from 'cli-progress'
 
-export async function gameVersions(API_URL) {
+export async function gameVersions() {
 	const progressBar = new cliProgress.SingleBar({
 		format: 'Generating game versions  | {bar} | {percentage}%',
 		barCompleteChar: '\u2588',
@@ -11,7 +11,7 @@ export async function gameVersions(API_URL) {
 	})
 	progressBar.start(2, 0)
 
-	const gameVersions = await (await fetch(API_URL + 'tag/game_version')).json()
+	const gameVersions = await (await fetch('tag/game_version')).json()
 	progressBar.increment()
 
 	// Write JSON file

src/plugins/generator/outputs/landingPage.js

@@ -1,8 +1,8 @@
-import { fetch } from 'undici'
+import { fetch } from '../fetch.js'
 import { promises as fs } from 'fs'
 import cliProgress from 'cli-progress'
 
-export async function landingPage(API_URL) {
+export async function landingPage() {
 	const progressBar = new cliProgress.SingleBar({
 		format: 'Generating landing page   | {bar} | {percentage}% || {value}/{total} mods',
 		barCompleteChar: '\u2588',
@@ -12,9 +12,7 @@ export async function landingPage(API_URL) {
 	progressBar.start(100, 0)
 
 	// Fetch top 100 mods
-	const response = await (
-		await fetch(API_URL + 'search?limit=100&facets=[["project_type:mod"]]')
-	).json()
+	const response = await (await fetch('search?limit=100&facets=[["project_type:mod"]]')).json()
 
 	// Simplified array with the format: ['id', 'slug', 'icon_extension']
 	const compressed = response.hits

src/plugins/generator/outputs/projectColors.js

@@ -1,11 +1,11 @@
-import { fetch } from 'undici'
+import { fetch } from '../fetch.js'
 import { createWriteStream } from 'fs'
 import cliProgress from 'cli-progress'
 import Jimp from 'jimp'
 import { getAverageColor } from 'fast-average-color-node'
 
 // Note: This function has issues and will occasionally fail with some project icons. It averages at a 99.4% success rate. Most issues are from ECONNRESET errors & Jimp not being able to handle webp & svg images.
-export async function projectColors(API_URL) {
+export async function projectColors() {
 	const progressBar = new cliProgress.SingleBar({
 		format: 'Generating project colors | {bar} | {percentage}% || {value}/{total} projects',
 		barCompleteChar: '\u2588',
@@ -13,7 +13,7 @@ export async function projectColors(API_URL) {
 		hideCursor: true,
 	})
 	// Get total number of projects
-	const projectCount = (await (await fetch(API_URL + 'search?limit=0')).json()).total_hits
+	const projectCount = (await (await fetch('search?limit=0')).json()).total_hits
 	progressBar.start(projectCount, 0)
 	const writeStream = createWriteStream('./generated/projects.json')
 	writeStream.write('{')
@@ -24,7 +24,7 @@ export async function projectColors(API_URL) {
 	const requestCount = Math.ceil(projectCount / 100)
 	await Promise.allSettled(
 		Array.from({ length: requestCount }, async (_, index) => {
-			const response = await fetch(API_URL + `search?limit=100&offset=${index * 100}`)
+			const response = await fetch(`search?limit=100&offset=${index * 100}`)
 			if (!response.ok) {
 				throw new Error(`Failed to fetch projects: ${response.statusText}`)
 			}

src/plugins/generator/outputs/tags.js

@@ -1,7 +1,8 @@
-import { fetch } from 'undici'
+import { fetch } from '../fetch.js'
 import { promises as fs } from 'fs'
 import cliProgress from 'cli-progress'
-export async function tags(API_URL) {
+
+export async function tags() {
 	const progressBar = new cliProgress.SingleBar({
 		format: 'Generating tags           | {bar} | {percentage}%',
 		barCompleteChar: '\u2588',
@@ -12,11 +13,11 @@ export async function tags(API_URL) {
 
 	// eslint-disable-next-line prefer-const
 	let [categories, loaders, licenses, donationPlatforms, reportTypes] = await Promise.all([
-		await (await fetch(API_URL + 'tag/category')).json(),
-		await (await fetch(API_URL + 'tag/loader')).json(),
-		await (await fetch(API_URL + 'tag/license')).json(),
-		await (await fetch(API_URL + 'tag/donation_platform')).json(),
-		await (await fetch(API_URL + 'tag/report_type')).json(),
+		await (await fetch('tag/category')).json(),
+		await (await fetch('tag/loader')).json(),
+		await (await fetch('tag/license')).json(),
+		await (await fetch('tag/donation_platform')).json(),
+		await (await fetch('tag/report_type')).json(),
 	])
 	progressBar.update(5)
 

src/styles/classes/file.postcss

@@ -0,0 +1,53 @@
+.file {
+	border-radius: var(--rounded);
+	background-color: var(--color-button-bg);
+	box-shadow: var(--shadow-raised-sm), var(--shadow-inset);
+
+	&:is(a):hover {
+		filter: brightness(0.9);
+	}
+
+	&--primary {
+		background-color: var(--color-brand-light);
+	}
+
+	&__tab {
+		display: flex;
+		align-items: center;
+		padding: 0.75rem 1rem;
+		gap: 1rem;
+
+		:global(.icon) {
+			/* Uses `px` to make icons slightly larger */
+			min-width: 18px;
+			height: 18px;
+		}
+
+		&__name {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			margin-right: auto;
+
+			@media (width <= 900px) {
+				word-break: break-all;
+			}
+		}
+	}
+
+	&__preview {
+		width: 100%;
+		border-radius: var(--rounded-bottom);
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		background-color: black;
+
+		&__image {
+			height: auto;
+			max-height: 22rem;
+			width: 100%;
+			object-fit: contain;
+		}
+	}
+}