feat: add meta descriptions

composables/metadata.ts

@@ -2,9 +2,14 @@
  * Set the page title in the format [title] | Eggworld.
  * @param title The title string.
  */
-export function useTitle(title: string) {
+export function useTitle(title: string, description?: string) {
   useHead({
     title: `${title} | Eggworld`,
+    meta: [
+      { name: "viewport", content: " width=device-width,initial-scale=1" },
+      { name: "description", content: description || "" },
+      { name: "theme-color", content: "#ffffff" },
+    ],
     link: [
       { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
       {

pages/[...slug].vue

@@ -21,7 +21,7 @@ const descText =
   type === "stories"
     ? `${calcReadingTime(doc).words.total} words`
     : `${calcReadingTime(doc).minutes} min read`;
-useTitle(doc.title);
+useTitle(doc.title, doc.description);
 
 const captionText =
   type === "stories" ? "Story" : type === "blog" ? "Blog post" : "";

pages/blog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BlogParsedContent } from "@/shared/types";
 
-useTitle("Blog");
+useTitle("Blog", "Ramblings and ideas");
 definePageMeta({ layout: "withtop" });
 
 // TODO: paginate stories

pages/index.vue

@@ -3,7 +3,7 @@ import Services from "@/components/index/services.vue";
 import About from "@/components/index/about.vue";
 
 definePageMeta({ layout: "withtop" });
-useTitle("Home");
+useTitle("Home", "Personal website!");
 </script>
 
 <template>

pages/stories.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { StoryParsedContent } from "@/shared/types";
 
-useTitle("Stories");
+useTitle("Stories", "Fantasies and worlds");
 definePageMeta({ layout: "withtop" });
 
 // TODO: paginate stories

pages/tags/blog/[tag].vue

@@ -14,6 +14,9 @@ const docs = await queryContent<BlogParsedContent>("/blog")
   .sort({ date: -1 })
   .where({ _draft: false, tags: { $contains: tag } })
   .find();
+
+const title = `${details.name ?? `"${tag}"`} Posts`;
+useTitle(title, details.description);
 </script>
 
 <template>
@@ -21,7 +24,7 @@ const docs = await queryContent<BlogParsedContent>("/blog")
     class="prose dark:prose-invert max-w-3xl flex flex-col grow gap-6 transition"
   >
     <div>
-      <h1 class="mb-0">{{ details.name ?? `"${tag}"` }} Posts</h1>
+      <h1 class="mb-0">{{ title }}</h1>
       <p
         v-if="details.description"
         v-html="details.description"

pages/tags/stories/[tag].vue

@@ -14,6 +14,9 @@ const docs = await queryContent<StoryParsedContent>("/stories")
   .sort({ date: -1 })
   .where({ _draft: false, tags: { $contains: tag } })
   .find();
+
+const title = `${details.name ?? `"${tag}"`} Stories`;
+useTitle(title, details.description);
 </script>
 
 <template>
@@ -21,7 +24,7 @@ const docs = await queryContent<StoryParsedContent>("/stories")
     class="prose dark:prose-invert max-w-3xl flex flex-col grow gap-6 transition"
   >
     <div>
-      <h1 class="mb-0">{{ details.name ?? `"${tag}"` }} Stories</h1>
+      <h1 class="mb-0">{{ title }} Stories</h1>
       <p
         v-if="details.description"
         v-html="details.description"