feat: page titles and favicon

app/error.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app'
+import type { NuxtError } from "#app"
 
-defineProps<{ error: NuxtError }>()
+defineProps<{ error: NuxtError }>();
+useHead({ title: 'Not found' });
 </script>
 
 <template>
@@ -11,12 +12,7 @@ defineProps<{ error: NuxtError }>()
         <p class="text-8xl font-black tracking-tight">404</p>
         <p class="text-lg font-medium">This link doesn't exist.</p>
         <p class="text-muted text-sm">
-          Maybe check out
+          Maybe check out <a href="https://pihkaal.me" class="underline underline-offset-2 hover:text-default transition-colors">pihkaal.me</a> instead?
-          <a
-            href="https://pihkaal.me"
-            class="underline underline-offset-2 hover:text-default transition-colors"
-          >pihkaal.me</a>
-          instead?
         </p>
       </div>
     </div>

app/pages/auth/sign-in.vue

@@ -2,6 +2,8 @@
 import { z } from "zod";
 import type { AuthFormField, FormSubmitEvent } from "@nuxt/ui";
 
+useHead({ title: 'Sign in' });
+
 definePageMeta({
   middleware: () => {
     const { loggedIn } = useUserSession();

app/pages/dashboard.vue

@@ -23,6 +23,13 @@ const category = computed(() => {
   return "all";
 });
 
+const categoryTitle = computed(() => {
+  if (category.value === "active") return "Active links";
+  if (category.value === "disabled") return "Disabled links";
+  return "All links";
+});
+useHead({ title: categoryTitle });
+
 const filteredLinks = computed(() => {
   if (!links.value) return [];
   if (category.value === "active") return links.value.filter((l) => !l.disabled);

nuxt.config.ts

@@ -10,6 +10,13 @@ export default defineNuxtConfig({
     }
   },
 
+  app: {
+    head: {
+      titleTemplate: '%s · pihka.al',
+      link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
+    },
+  },
+
   devtools: {
     enabled: true
   },

public/favicon.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 18">
+    <style>
+        .bg { fill: #000000; }
+        .fg { fill: #ffffff; }
+    </style>
+
+    <rect x="0" y="11" width="5" height="5" class="bg" />
+    <rect x="1" y="10" width="7" height="5" class="bg" />
+    <rect x="6" y="10" width="22" height="6" class="bg" />
+    <rect x="9" y="5" width="18" height="12" class="bg" />
+    <rect x="10" y="16" width="16" height="2" class="bg" />
+    <rect x="7" y="7" width="16" height="4" class="bg" />
+    <rect x="8" y="6" width="2" height="2" class="bg" />
+    <rect x="26" y="9" width="2" height="2" class="bg" />
+    <rect x="11" y="4" width="16" height="2" class="bg" />
+    <rect x="12" y="3" width="15" height="2" class="bg" />
+    <rect x="13" y="2" width="6" height="2" class="bg" />
+    <rect x="14" y="1" width="5" height="2" class="bg" />
+    <rect x="15" y="0" width="3" height="2" class="bg" />
+    <rect x="21" y="2" width="6" height="2" class="bg" />
+    <rect x="22" y="1" width="5" height="2" class="bg" />
+    <rect x="23" y="0" width="3" height="2" class="bg" />
+
+    <rect x="2" y="11" width="5" height="3" class="fg" />
+    <rect x="1" y="12" width="3" height="3" class="fg" />
+    <rect x="10" y="6" width="16" height="10" class="fg" />
+    <rect x="8" y="10" width="19" height="5" class="fg" />
+    <rect x="7" y="12" width="2" height="3" class="fg" />
+    <rect x="6" y="12" width="2" height="2" class="fg" />
+    <rect x="8" y="8" width="18" height="3" class="fg" />
+    <rect x="9" y="7" width="2" height="2" class="fg" />
+    <rect x="12" y="15" width="13" height="2" class="fg" />
+    <rect x="25" y="10" width="2" height="5" class="fg" />
+    <rect x="15" y="11" width="3" height="1" class="bg" />
+    <rect x="22" y="11" width="3" height="1" class="bg" />
+    <rect x="12" y="5" width="14" height="2" class="fg" />
+    <rect x="13" y="4" width="6" height="2" class="fg" />
+    <rect x="14" y="3" width="4" height="2" class="fg" />
+    <rect x="15" y="2" width="3" height="2" class="fg" />
+    <rect x="16" y="1" width="1" height="2" class="fg" />
+    <rect x="21" y="4" width="5" height="2" class="fg" />
+    <rect x="22" y="3" width="4" height="2" class="fg" />
+    <rect x="23" y="2" width="3" height="2" class="fg" />
+    <rect x="24" y="1" width="1" height="2" class="fg" />
+    <rect x="16" y="3" width="1" height="2" class="bg" />
+    <rect x="15" y="4" width="1" height="2" class="bg" />
+    <rect x="14" y="5" width="2" height="1" class="bg" />
+    <rect x="15" y="4" width="2" height="1" class="bg" />
+    <rect x="24" y="3" width="1" height="3" class="bg" />
+    <rect x="23" y="4" width="2" height="1" class="bg" />
+</svg>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /