Add stuff

2025-07-31 22:50:39 +02:00
parent 07c434dba8
commit 15f4f74cb7
18 changed files with 506 additions and 76 deletions
@@ -1,6 +1,42 @@
+<script setup lang="ts">
+const route = useRoute();
+const { t } = useI18n();
+const head = useLocaleHead({
+  lang: true,
+  dir: true,
+  seo: true
+});
+
+const title = computed(() =>
+  t('layouts.title', {
+    title: t((route.meta.title as string) || 'layouts.default_tile')
+  })
+);
+</script>
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+  <Html
+    :lang="head?.htmlAttrs?.lang?.split('-')[0]"
+    :dir="head?.htmlAttrs?.dir"
+  >
+    <Head>
+      <Title>{{ title }}</Title>
+      <template v-for="link in head.link" :key="link.id">
+        <Link
+          :id="link.id"
+          :rel="link.rel"
+          :href="link.href"
+          :hreflang="link.hreflang"
+        />
+      </template>
+      <template v-for="meta in head.meta" :key="meta.id">
+        <Meta :id="meta.id" :property="meta.property" :content="meta.content" />
+      </template>
+    </Head>
+    <Body>
+      <NuxtLoadingIndicator />
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </Body>
+  </Html>
 </template>
@@ -1,3 +1,12 @@
 {
-  "hello": "Hallo"
+  "hello": "Hallo",
+  "locales": {
+    "en": "Englisch",
+    "de": "Deutsch"
+  },
+  "layouts": {
+    "title": "{title} {'|'} PicHunt",
+    "default_tile": "PicHunt",
+    "switch_lang": "Sprache ändern zu {locale}"
+  }
 }
@@ -1,3 +1,12 @@
 {
-  "hello": "Hello"
+  "hello": "Hello",
+  "locales": {
+    "en": "English",
+    "de": "German"
+  },
+  "layouts": {
+    "title": "{title} {'|'} PicHunt",
+    "default_tile": "PicHunt",
+    "switch_lang": "Switch locale to {locale}"
+  }
 }
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { locale, locales } = useI18n();
+const switchLocalePath = useSwitchLocalePath();
+
+const availableLocales = computed(() => {
+  return locales.value.filter((i) => l(i) !== locale.value);
+});
+
+const { loggedIn, clear, user } = useUserSession();
+const localePath = useLocalePath();
+function l(locale: (typeof locales.value)[0]) {
+  return typeof locale === 'string' ? locale : locale.code;
+}
+</script>
+
+<template>
+  <div>
+    <div class="m-2 flex flex-row gap-4 underline">
+      <NuxtLink
+        v-for="loc in availableLocales"
+        :key="l(loc)"
+        :to="switchLocalePath(l(loc))"
+        :title="$t('layouts.switch_lang', { locale: $t(`locales.${l(loc)}`) })"
+        >{{ $t(`locales.${l(loc)}`) }}
+      </NuxtLink>
+      <a v-if="loggedIn" href="#" @click.prevent="clear">Logout</a>
+      <NuxtLink v-else :to="localePath('/login')">Login</NuxtLink>
+      <NuxtLink :to="localePath('/')">Home</NuxtLink>
+    </div>
+    <Suspense>
+      <slot />
+    </Suspense>
+  </div>
+</template>
@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession();
+
+  if (!loggedIn.value) {
+    const localePath = useLocalePath();
+    return navigateTo(localePath('/login'));
+  }
+});
@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession();
+
+  if (loggedIn.value) {
+    const localePath = useLocalePath();
+    return navigateTo(localePath('/'));
+  }
+});
@@ -0,0 +1,20 @@
+import type { SlugRecord } from '#shared/utils/slugcheck';
+
+export default defineNuxtRouteMiddleware((to) => {
+  const app = useNuxtApp();
+
+  const slugs = checkSlug(to.params);
+
+  if (slugs === null) {
+    console.error('Invalid slugs', to.params);
+    return abortNavigation();
+  }
+
+  app.$slugData = slugs;
+});
+
+declare module '#app' {
+  interface NuxtApp {
+    $slugData: SlugRecord;
+  }
+}
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1 class="text-3xl">{{ $t('hello') }}</h1>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['guest']
+});
+</script>
+
+<template><h1>login</h1></template>
+
+<style scoped></style>