Add licenses page (Close #566)

package.json

@@ -12,7 +12,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"test": "vitest",
 		"lint": "prettier --check '**/*' --ignore-unknown && eslint . && node scripts/validateData.js",
-		"format": "prettier --write '**/*' --ignore-unknown"
+		"format": "prettier --write '**/*' --ignore-unknown",
+		"update:licenses": "pnpm licenses list --long --json > src/routes/licenses/licenses.json && node scripts/licenses.mjs && prettier --write 'src/routes/licenses/licenses.json'"
 	},
 	"devDependencies": {
 		"@macfja/svelte-persistent-store": "2.4.1",

scripts/licenses.mjs

@@ -0,0 +1,49 @@
+import { join, dirname } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs';
+
+const filePath = join(
+	dirname(import.meta.url).replace(/file:\/\//, ''),
+	'..',
+	'src',
+	'routes',
+	'licenses',
+	'licenses.json'
+);
+
+/**
+ *
+ * @return {Record<string, Array<{name: string, version: string, path: string, license: string, author?: string, homepage: string, description?: string}>>}
+ */
+function read() {
+	return JSON.parse(readFileSync(filePath, { encoding: 'utf-8' }));
+}
+
+/**
+ *
+ * @param {Record<string, Array<{name: string, version: string, path: string, license: string, author?: string, homepage: string, description?: string}>>} licenses
+ * @return {Record<string, Array<{name: string, version: string, author?: string, homepage: string, description?: string}>>}
+ */
+function clean(licenses) {
+	return Object.fromEntries(
+		Object.entries(licenses).map(([key, license]) => [key, cleanLicense(license)])
+	);
+}
+
+/**
+ *
+ * @param {Array<{name: string, version: string, path: string, license: string, author?: string, homepage: string, description?: string}>} license
+ * @return {Array<{name: string, version: string, author?: string, homepage: string, description?: string}>}
+ */
+function cleanLicense(license) {
+	return license.map((item) => {
+		delete item['path'];
+		delete item['license'];
+		return item;
+	});
+}
+
+function write() {
+	writeFileSync(filePath, JSON.stringify(clean(read())), { encoding: 'utf-8' });
+}
+
+write();

src/routes/about/+page.svx

@@ -40,4 +40,4 @@ Special thanks to [VueMeetups](https://events.vuejs.org/code-of-conduct/#english
 
 ## License information
 
-The license information can be found [here](https://sveltesociety.dev/licenses).
+The license information can be found [here](/licenses).

src/routes/licenses/+layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Seo from '$lib/components/Seo.svelte';
+</script>
+
+<Seo title="Licenses" />
+
+<main class="wrapper">
+	<slot />
+</main>
+
+<style>
+	.wrapper {
+		max-width: 65ch;
+		margin-inline: auto;
+	}
+	.wrapper :global(h2),
+	.wrapper :global(h3) {
+		margin-top: 2rem;
+		margin-bottom: 1.25rem;
+	}
+	.wrapper :global(p) {
+		margin-bottom: 1.25rem;
+	}
+	.wrapper :global(li) {
+		margin-bottom: 1.1rem;
+	}
+</style>

src/routes/licenses/+page.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import licenses from './licenses.json';
+
+	const names = Object.values(licenses)
+		.flat()
+		.map((item) => item.name)
+		.filter(Boolean);
+</script>
+
+<p>
+	This website uses the following packages (directly or indirectly):
+	<select multiple>
+		{#each names as name}<option>{name}</option>{/each}
+	</select>
+</p>
+<p>You can find their license here:</p>
+
+{#each Object.entries(licenses ?? {}) as license}
+	<details>
+		<summary>{license[0]}</summary>
+		{#each license[1] as item}
+			<details>
+				<summary>{item.name}</summary>
+				<dl>
+					{#each Object.entries(item).filter(([key]) => !['path', 'name', 'license'].includes(key)) as [name, value]}
+						<dt>{name}</dt>
+						<dd>{value}</dd>
+					{/each}
+				</dl>
+			</details>
+		{/each}
+	</details>
+{/each}
+
+<p>
+	You can find licenses text here: <a href="https://choosealicense.com/appendix/" target="_blank"
+		>Appendix | Choose a License</a
+	>
+</p>
+
+<style>
+	p select {
+		vertical-align: top;
+	}
+
+	details {
+		padding-inline: 1em;
+	}
+
+	details summary {
+		font-size: 1.2em;
+	}
+
+	details details summary {
+		font-family: monospace;
+	}
+
+	details[open] {
+		padding-bottom: 1em;
+	}
+
+	dl {
+		padding-left: 1em;
+	}
+
+	dl dt {
+		font-weight: bold;
+		text-transform: uppercase;
+		font-size: 0.8em;
+		opacity: 1;
+	}
+
+	dl dt + dd {
+		padding-left: 1em;
+	}
+</style>