frontend/src/components/general/About.svelte

<script>
	import { _ } from "svelte-i18n";
	import { clickOutside } from "../base/outsideclick";

	let modal_open = false;
	(function () {
		document.onkeydown = function (e) {
			e = e || window.event;
			if (e.key === "Escape") {
				modal_open = false;
			}
		};
	})();
	const license_promise = fetch("/licenses.json");
	let licenses = [];
	$: currentlicense = "";
	$: licensetext = "";
	license_promise
		.then((response) => response.json())
		.then((json) => {
			licenses = json;
		});
</script>

{#if modal_open}
	<div
		class="fixed z-10 inset-0 overflow-y-hidden"
		use:clickOutside
		on:click_outside={() => {
			modal_open = false;
		}}
	>
		<div
			class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 sm:block sm:p-0"
		>
			<div class="fixed inset-0 transition-opacity" aria-hidden="true">
				<div
					class="absolute inset-0 bg-gray-500 opacity-75"
					data-id="modal_backdrop"
				/>
			</div>
			<span
				class="hidden sm:inline-block sm:align-middle sm:h-screen"
				aria-hidden="true">&#8203;</span
			>
			<div
				class="inline-block align-bottom text-left shadow-xl transform transition-all sm:align-middle w-full lg:w-auto min-w-auto lg:min-w-[35vw] relative z-10"
				role="dialog"
				aria-modal="true"
				aria-labelledby="modal-headline"
			>
				<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-t-xl">
					<div class="">
						<div
							class="flex-shrink-0 flex items-center justify-center size-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
						>
							<svg
								fill="currentColor"
								class="h-6 w-6 text-blue-600"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 24 24"
								width="24"
								height="24"
								><path fill="none" d="M0 0h24v24H0z" />
								<path
									d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z"
								/></svg
							>
						</div>
						<div class="mt-3 sm:mt-0 sm:ml-4 sm:text-left">
							<h3 class="text-lg leading-6 font-medium">
								{$_("read-license")}
							</h3>
							<div class="mb-6">
								<p class="text-sm text-gray-500">{currentlicense}</p>
							</div>
							<div class="mb-6">
								<p class="text-sm text-gray-500">{licensetext}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="bg-gray-50 px-4 lg:py-3 sm:px-6 grid gap-2 lg:rounded-b-xl pt-3 pb-10">
					<button
						on:click={() => {
							modal_open = false;
						}}
						type="button"
						class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm"
					>
						{$_("close")}
					</button>
				</div>
			</div>
		</div>
	</div>
{/if}
<!-- /// -->
<section class="container p-5">
	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
		{$_("about")}
	</h4>
	<p class="mt-2 mb-2">
		Lauf für Kaya!
		<strong class="font-medium">
			{$_("by")}
			<a href="https://odit.services" class="underline">ODIT.Services</a>
		</strong>
		<br />
		<span>{$_("lfk-is-os")}</span>
	</p>
	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
		{$_("credits")}
	</h4>
	<p class="text-left">{$_("oss_credit_description")}</p>
	<div class="mt-5 overflow-x-auto">
		{#await license_promise}
			<p>{$_("licenses-are-being-loaded")}</p>
		{:then}
			<table class="font-mono">
				<thead class="border-b border-gray-400">
					<tr class="odd:bg-white even:bg-gray-100">
						<th>{$_("dependency_name")}</th>
						<th>{$_("license")}</th>
						<th>{$_("repo_link")}</th>
						<th>{$_("installed-version")}</th>
						<th>{$_("author")}</th>
					</tr>
				</thead>
				<tbody>
					{#each licenses as l}
						<tr class="odd:bg-white even:bg-gray-100 *:p-2">
							<td>{l.name}</td>
							<td>
								<button
									class="underline cursor-pointer"
									on:click={() => {
										modal_open = true;
										currentlicense = l.name + "@" + l.version;
										licensetext =
											l.licensetext || $_("no-license-text-could-be-found");
									}}>{l.license || "?"}</button
								>
							</td>
							<td>
								{(l.repo?.url || l.repo)
									.replace("git+", "")
									.replace("git://", "")}
							</td>
							<td>{l.version || "?"}</td>
							<td>{l.author?.name || l.author || "?"}</td>
						</tr>
					{/each}
				</tbody>
			</table>
		{:catch error}
			<div
				class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"
			>
				<span class="inline-block align-middle mr-8">
					<b>{$_("general_promise_error")}</b>
					{error}
				</span>
			</div>
		{/await}
	</div>
	<div class="w-full mt-8">
		<p class="font-medium">{$_("icon-image-credits")}</p>
		<ul class="list-disc ml-6">
			<li>
				<a
					class="underline"
					target="_blank"
					rel="noopener noreferrer"
					href="https://storyset.com">https://storyset.com</a
				>
			</li>
			<li>
				<a
					class="underline"
					target="_blank"
					rel="noopener noreferrer"
					href="https://undraw.co">https://undraw.co</a
				>
			</li>
			<li>
				<a
					class="underline"
					target="_blank"
					rel="noopener noreferrer"
					href="https://remixicon.com">https://remixicon.com</a
				>
			</li>
		</ul>
	</div>
</section>