feat: show license information at /license-information

Show license information of the used open source software on `/license-information`.

locales/de.json

@@ -0,0 +1,8 @@
+{
+  "nuxt-bundle": {
+    "license-information": {
+      "description": "Diese Webseite basiert auf Free Open Source Software (FOSS), die gesonderten Lizenzbedingungen unterliegen, die im folgenden aufgelistet werden.",
+      "title": "Lizenzinformationen"
+    }
+  }
+}

locales/en.json

@@ -0,0 +1,8 @@
+{
+  "nuxt-bundle": {
+    "license-information": {
+      "description": "This website is based on Free Open Source Software (FOSS), which is subject to separate license conditions, which are listed below.",
+      "title": "License information"
+    }
+  }
+}

nuxt.config.ts

@@ -3,6 +3,20 @@ import chalk from "chalk";
 import vuetify from "vite-plugin-vuetify";
 import license from "rollup-plugin-license";
 
+/**
+ * Returns all locales with their corresponding file names from `./locales`.
+ */
+export function getLocales(): { code: string; file: string }[] {
+  const files = fs.readdirSync("./locales");
+
+  return files.map((file) => {
+    return {
+      code: file.split(".")[0],
+      file,
+    };
+  });
+}
+
 export default defineNuxtConfig({
   app: {
     pageTransition: { name: "page", mode: "out-in" },
@@ -50,7 +64,18 @@ export default defineNuxtConfig({
     },
   },
   css: ["vuetify/styles"],
-  modules: ["@nuxt/image", "@nuxtjs/i18n", "@nuxtjs/robots"],
+  modules: [
+    "@crystal-creations/crystal-components/nuxt",
+    "@nuxt/image",
+    [
+      "@nuxtjs/i18n",
+      {
+        locales: getLocales(),
+        langDir: "locales",
+      },
+    ],
+    "@nuxtjs/robots",
+  ],
   hooks: {
     "nitro:build:before": () => {
       const fontsDir = "public/assets/fonts/";
@@ -61,7 +86,6 @@ export default defineNuxtConfig({
       console.log(chalk.green("√"), "Copied fonts to " + fontsDir);
     },
   },
-  i18n: {},
   vite: {
     define: {
       "process.env.DEBUG": "false",

package.json

@@ -15,12 +15,15 @@
     "semantic-release": "semantic-release"
   },
   "files": [
+    "locales",
+    "pages",
     "nuxt.config.ts",
     "package.json",
     "README.md"
   ],
   "main": "nuxt.config.ts",
   "dependencies": {
+    "@crystal-creations/crystal-components": "^1.0.0-beta.1",
     "@fontsource/roboto": "5.0.8",
     "@mdi/js": "7.4.47",
     "@nuxt/image": "1.2.0",

pages/license-information.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-container class="full-width">
+    <p class="text-h4">
+      {{ i18n.t("nuxt-bundle.license-information.title") }}
+    </p>
+    <p class="text-body-1">
+      {{ i18n.t("nuxt-bundle.license-information.description") }}
+    </p>
+    <v-row v-if="pending">
+      <v-col v-for="index in 12" :key="index" cols="12" md="6" lg="4" xl="3">
+        <v-skeleton-loader type="article"></v-skeleton-loader>
+      </v-col>
+    </v-row>
+    <v-row v-else>
+      <client-only>
+        <v-col
+          v-for="license of softwareInfo()"
+          :key="license.name"
+          cols="12"
+          md="6"
+          lg="4"
+          xl="3"
+        >
+          <c-license-card :software-info="license"></c-license-card>
+        </v-col>
+      </client-only>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { type Composer } from "vue-i18n";
+const i18n: Composer = useI18n();
+
+// As nuxt can't fetch data from the public dir during SSR, the request can only be made on client side (see also nuxt/nuxt#13857).
+const { pending, data: licenses } = await useFetch<
+  {
+    name: string;
+    version: string;
+    author: { name: string } | null;
+    license: string;
+    licenseText: string | null;
+    repository: { url: string } | string | null;
+  }[]
+>("/dependencies.json", {
+  lazy: true,
+  server: false,
+});
+
+function softwareInfo() {
+  if (!licenses.value) return null;
+
+  return licenses.value
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map((license) => {
+      let repositoryLink: string | undefined =
+        typeof license.repository === "string"
+          ? license.repository
+          : license.repository?.url;
+      let repositoryOwner: string | undefined;
+
+      if (repositoryLink) {
+        // Normalize github URL:
+        // 1. Remove `[...]github.com` prefix with protocol etc., if present.
+        // 2. Remove `.git` suffix, if present.
+        const repositoryCoordinates = repositoryLink
+          .replace(/.+?(github.com\/)/, "")
+          .replace(".git", "");
+
+        // 3. Prepend `https://github.com/`.
+        repositoryLink = "https://github.com/" + repositoryCoordinates;
+
+        // If author is not set, retrieve author from repository coordinates.
+        if (!license.author)
+          repositoryOwner = repositoryCoordinates.split("/")[0];
+      }
+
+      return {
+        name: license.name,
+        version: license.version,
+        author: license.author?.name ?? repositoryOwner,
+        notice: license.licenseText ?? license.license,
+        repositoryLink,
+      };
+    });
+}
+
+useHead({
+  title: i18n.t("nuxt-bundle.license-information.title"),
+});
+
+useSeoMeta({
+  title: i18n.t("nuxt-bundle.license-information.title"),
+  ogTitle: i18n.t("nuxt-bundle.license-information.title"),
+  description: i18n.t("nuxt-bundle.license-information.description"),
+  ogDescription: i18n.t("nuxt-bundle.license-information.description"),
+});
+</script>
+
+<style lang="scss"></style>