From 7ec729ba667ce7eb92efdfe8556e11882d77376a Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Wed, 10 Aug 2022 20:31:16 -0400
Subject: [PATCH] feat: add meta descriptions

---
 composables/metadata.ts      | 7 ++++++-
 pages/[...slug].vue          | 2 +-
 pages/blog.vue               | 2 +-
 pages/index.vue              | 2 +-
 pages/stories.vue            | 2 +-
 pages/tags/blog/[tag].vue    | 5 ++++-
 pages/tags/stories/[tag].vue | 5 ++++-
 7 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/composables/metadata.ts b/composables/metadata.ts
index f444705..0a5132c 100644
--- a/composables/metadata.ts
+++ b/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" },
       {
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index fd9a4da..9fc7ed0 100644
--- a/pages/[...slug].vue
+++ b/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" : "";
diff --git a/pages/blog.vue b/pages/blog.vue
index 161c53f..89230df 100644
--- a/pages/blog.vue
+++ b/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
diff --git a/pages/index.vue b/pages/index.vue
index 78216d4..5c0ee3a 100644
--- a/pages/index.vue
+++ b/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>
diff --git a/pages/stories.vue b/pages/stories.vue
index afeb86d..38f12c8 100644
--- a/pages/stories.vue
+++ b/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
diff --git a/pages/tags/blog/[tag].vue b/pages/tags/blog/[tag].vue
index 088f229..ffba485 100644
--- a/pages/tags/blog/[tag].vue
+++ b/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"
diff --git a/pages/tags/stories/[tag].vue b/pages/tags/stories/[tag].vue
index c319ac8..74c01ab 100644
--- a/pages/tags/stories/[tag].vue
+++ b/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"