@jojomatik/nuxt-bundle 1.0.0-beta.20 → 1.0.0-beta.21

package/assets/style/main.scss

@@ -0,0 +1,19 @@
+/*
+ Nuxt Page transition
+ */
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.1s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-width {
+  width: 100% !important;
+}

package/error.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-app>
+    <v-sheet class="ma-auto pa-5" border rounded="xl">
+      <v-card-title class="text-h4">{{ getTitle() }}</v-card-title>
+      <v-card-text class="text-h6">{{ getDescription() }}</v-card-text>
+    </v-sheet>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+const i18n = useI18n();
+
+const props = defineProps({
+  error: {
+    type: Object,
+    default: null,
+  },
+});
+
+useHead({
+  title: getTitle(),
+});
+
+onMounted(() => {
+  console.error(props.error.message);
+});
+
+/**
+ * Returns the title of the error message
+ */
+function getTitle(): string {
+  const key = "nuxt-bundle.error." + props.error.statusCode + ".title";
+
+  return i18n.te(key)
+    ? i18n.t(key)
+    : i18n.t("nuxt-bundle.error.title", { error: props.error.statusCode });
+}
+
+/**
+ * Returns the description of the error message
+ */
+function getDescription(): string {
+  const key = "nuxt-bundle.error." + props.error.statusCode + ".description";
+
+  return i18n.te(key)
+    ? i18n.t(key)
+    : i18n.t("nuxt-bundle.error.description", {
+        error: props.error.statusCode,
+      });
+}
+</script>
+
+<style lang="scss">
+@use "assets/style/main";
+</style>

package/locales/de.json

@@ -0,0 +1,16 @@
+{
+  "nuxt-bundle": {
+    "error": {
+      "title": "Fehler {error}",
+      "description": "Ein unbekannter Fehler ist aufgetreten",
+      "404": {
+        "title": "404 Nicht Gefunden",
+        "description": "Diese Seite existiert nicht"
+      }
+    },
+    "license-information": {
+      "description": "Diese Webseite basiert auf Free Open Source Software (FOSS), die gesonderten Lizenzbedingungen unterliegen, die im folgenden aufgelistet werden.",
+      "title": "Lizenzinformationen"
+    }
+  }
+}

package/locales/en.json

@@ -0,0 +1,16 @@
+{
+  "nuxt-bundle": {
+    "error": {
+      "title": "Error {error}",
+      "description": "An unknown error occurred",
+      "404": {
+        "title": "404 Not found",
+        "description": "This page does not exist"
+      }
+    },
+    "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"
+    }
+  }
+}

package/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/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jojomatik/nuxt-bundle",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.21",
+  "type": "module",
   "description": "A bundle of commonly used nuxt dependencies and configuration.",
   "keywords": [
     "nuxt",
@@ -10,16 +11,24 @@
     "configuration"
   ],
   "scripts": {
-    "lint": "eslint --ext .ts,.js,.vue .",
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "node .output/server/index.mjs",
+    "lint": "eslint . --max-warnings 0",
     "semantic-release": "semantic-release"
   },
   "files": [
+    "assets",
+    "locales",
+    "pages",
+    "error.vue",
     "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",

package/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>