Merge branch 'refs/heads/main' into 7-scalability

# Conflicts:
#	backend/service/addCalDavRoutes.go

frontend/src/App.vue

@@ -18,11 +18,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
-import { RouteRecordName, RouterView } from "vue-router";
+import { RouteRecordName, RouterView, useRoute, useRouter } from "vue-router";
+import { useHead } from "@unhead/vue";
 import CalendarPreview from "./components/CalendarPreview.vue";
 import moduleStore from "./store/moduleStore.ts";
-import { provide, ref } from "vue";
+import { computed, provide, ref } from "vue";
 import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const disabledPages = [
   "room-finder",
@@ -36,6 +39,33 @@ const disabledPages = [
   "room-schedule",
 ];
 
+// Provide canonical link for SEO
+const router = useRouter();
+const route = useRoute();
+const baseUri = "https://cal.htwk-leipzig.de"; // could be stored in .env
+const canonical = computed(() => `${baseUri}${router.resolve(route.name ? { name: route.name } : route).path}`);
+const title = computed(() => route.meta.label? 
+  `HTWKalender - ${t(String(route.meta.label))}`:
+  "HTWKalender"
+);
+
+useHead({
+  title: title, 
+  link: [
+    { rel: "canonical", href: canonical},
+  ],
+  meta: [
+    {
+      name: "description",
+      content: "Dein individueller Stundenplan mit Sportevents und Prüfungen. Finde kommende Veranstaltungen oder freie Räume zum Lernen und Arbeiten.",
+    },
+    {
+      name: "keywords",
+      content: "HTWK Leipzig, Stundenplan, iCal, freie Räume, Lerngruppen, Sport, Prüfungen",
+    }
+  ]
+});
+
 const store = moduleStore();
 const mobilePage = ref(true);
 provide("mobilePage", mobilePage);

frontend/src/components/MenuBar.vue

@@ -102,13 +102,14 @@ function handleDarkModeToggled(isDarkVar: boolean) {
           "
           v-bind="props.action"
           @click="navigate"
+          :href="item.route"
         >
           <span :class="item.icon" />
           <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
         </a>
       </router-link>
       <a
-        v-else
+        v-else-if="item.url"
         :class="
           $route.path.includes(item.info)
             ? 'flex align-items-center active'
@@ -120,6 +121,18 @@ function handleDarkModeToggled(isDarkVar: boolean) {
         <span :class="item.icon" />
         <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
       </a>
+      <span
+        v-else
+        :class="
+          $route.path.includes(item.info)
+            ? 'flex align-items-center active'
+            : 'flex align-items-center'
+        "
+        v-bind="props.action"
+      >
+        <span :class="item.icon" />
+        <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
+    </span>
     </template>
     <template #end>
       <div class="flex align-items-stretch justify-content-center">

frontend/src/main.ts

@@ -17,6 +17,7 @@
 import "source-sans/source-sans-3.css";
 
 import { createApp } from "vue";
+import { createHead } from "@unhead/vue";
 import "./style.css";
 import App from "./App.vue";
 import PrimeVue from "primevue/config";
@@ -69,6 +70,9 @@ app.use(VueQueryPlugin, {
   },
 });
 
+const head = createHead();
+app.use(head);
+
 app.use(PrimeVue);
 app.use(router);
 app.use(ToastService);

frontend/src/router/index.ts

@@ -37,46 +37,73 @@ const router = createRouter({
       path: "/",
       name: "course-selection",
       component: CourseSelection,
+      meta: {
+        label: "",
+      },
     },
     {
       path: "/rooms/occupancy",
       name: "room-schedule",
       component: RoomFinder,
+      meta: {
+        label: "roomFinderPage.roomSchedule",
+      },
     },
     {
       path: "/rooms/free",
       name: "free-rooms",
       component: FreeRooms,
+      meta: {
+        label: "freeRooms.freeRooms",
+      }
     },
     {
       path: "/faq",
       name: "faq",
       component: Faq,
+      meta: {
+        label: "faq",
+      }
     },
     {
       path: "/additional-modules",
       name: "additional-modules",
       component: AdditionalModules,
+      meta: {
+        label: "createCalendar",
+      }
     },
     {
       path: "/edit-additional-modules",
       name: "edit-additional-modules",
       component: EditAdditionalModules,
+      meta: {
+        label: "editCalendar",
+      }
     },
     {
       path: "/edit-calendar",
       name: "edit-calendar",
       component: EditModules,
+      meta: {
+        label: "editCalendar",
+      }
     },
     {
       path: "/calendar-link",
       name: "calendar-link",
       component: CalendarLink,
+      meta: {
+        label: "createCalendar"
+      }
     },
     {
       path: "/edit",
       name: "edit",
       component: EditCalendarView,
+      meta: {
+        label: "editCalendar",
+      }
     },
     {
       path: "/privacy-policy",
@@ -86,6 +113,9 @@ const router = createRouter({
         window.location.href =
           "https://www.htwk-leipzig.de/hochschule/kontakt/datenschutzerklaerung/";
       },
+      meta: {
+        label: "privacy"
+      }
     },
     {
       path: "/imprint",
@@ -95,11 +125,17 @@ const router = createRouter({
         window.location.href =
           "https://www.htwk-leipzig.de/hochschule/kontakt/impressum/";
       },
+      meta: {
+        label: "imprint"
+      }
     },
     {
       path: "/rename-modules",
       name: "rename-modules",
       component: RenameModules,
+      meta: {
+        label: "createCalendar"
+      }
     },
   ],
 });

frontend/src/view/DynamicPage.vue

@@ -42,18 +42,18 @@ const hasContent = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center mt-0">
+  <heading class="flex flex-column align-items-center mt-0">
     <div
       class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown"
       :class="{ 'md:mt-8': hideContent }"
     >
-      <h3 class="text-4xl">
+      <h1 class="text-4xl">
         {{ headline }}
-      </h3>
+      </h1>
       <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
     </div>
     <div v-if="subTitle" class="flex justify-content-center">
-      <h5 class="text-2xl m-2">{{ subTitle }}</h5>
+      <p class="subtitle text-2xl m-2">{{ subTitle }}</p>
     </div>
     <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
       <slot name="selection" flex-specs="flex-1 m-0"></slot>
@@ -87,11 +87,15 @@ const hasContent = computed(() => {
     >
       <slot name="content"></slot>
     </div>
-  </div>
+  </heading>
 </template>
 
 <style scoped>
 .transition-rolldown {
   transition: margin-top 0.5s ease-in-out;
 }
+.subtitle {
+  font-weight: 100;
+  font-size: 1.5rem;
+}
 </style>