feat: add more meta tags

Rule-34 · Jun 4, 2023 · 6908dc2 · 6908dc2
1 parent ec6919a
commit 6908dc2
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 64 deletions.
diff --git a/app.vue b/app.vue
@@ -14,15 +14,25 @@
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 
-      {
-        name: 'monetization',
-        content: config.public.MONETIZATION_URI
-      },
-
       // TODO: Improve description
       {
         name: 'description',
         content: 'Stream and download images, GIFs and videos hentai. For free!'
+      },
+
+      {
+        name: 'color-scheme',
+        content: 'dark'
+      },
+
+      {
+        name: 'theme-color',
+        content: '#000'
+      },
+
+      {
+        name: 'monetization',
+        content: config.public.MONETIZATION_URI
       }
     ],
 

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,6 @@
 <script setup>
-  const appStatistics = useAppStatistics()
+
+const appStatistics = useAppStatistics()
 
   const userSettings = useUserSettings()
 
@@ -56,6 +57,8 @@
     }
   }
 
+  // TODO: Log general errors to the user with a Toast
+
   console.info(
     '%cWe ❤︎ open source!',
     'font-size:32px;font-weight:bold;letter-spacing:0.02em;color:hsl(205, 78%, 62%);background-color:white;padding:8px 16px;'

diff --git a/pages/legal.vue b/pages/legal.vue
@@ -1,14 +1,8 @@
 <script setup>
-  useHead(() => {
-    return {
-      title: 'Legal',
-      meta: [
-        {
-          name: 'description',
-          content: 'Legal information.'
-        }
-      ]
-    }
+  useSeoMeta({
+    title: 'Legal',
+
+    description: 'Legal information about the Rule 34 App'
   })
 </script>
 

diff --git a/pages/partners.vue b/pages/partners.vue
@@ -1,3 +1,11 @@
+<script setup>
+  useSeoMeta({
+    title: 'Partners',
+
+    description: 'Friends of the Rule 34 App, and other cool sites.'
+  })
+</script>
+
 <template>
   <main class="container mx-auto flex-1 px-4 sm:px-6 lg:px-8">
     <div class="mt-4 space-y-4">
@@ -44,17 +52,3 @@
     </div>
   </main>
 </template>
-
-<script setup>
-  useHead(() => {
-    return {
-      title: 'Partners',
-      meta: [
-        {
-          name: 'description',
-          content: 'Friends of the Rule 34 App.'
-        }
-      ]
-    }
-  })
-</script>
diff --git a/pages/posts.vue b/pages/posts.vue
@@ -216,8 +216,8 @@
     await loadNextPostPage()
   }
 
-  useHead({
-    title: computed(() => {
+  useSeoMeta({
+    title: () => {
       let title = ''
 
       if (selectedTags.value.length > 0) {
@@ -230,41 +230,36 @@
       title = capitalize(title)
 
       return title
-    }),
+    },
 
-    meta: [
-      {
-        name: 'description',
-        content: computed(() => {
-          let description = 'Stream and download porn images, GIFs and videos'
+    description: () => {
+      let description = 'Stream and download porn images, GIFs and videos'
 
-          if (selectedTags.value.length > 0) {
-            description += ` featuring ${tagArrayToTitle(selectedTags.value)}`
-          }
+      if (selectedTags.value.length > 0) {
+        description += ` featuring ${tagArrayToTitle(selectedTags.value)}`
+      }
 
-          description += ` from the ${selectedBooru.value.domain} website`
+      description += ` from the ${selectedBooru.value.domain} website`
 
-          description += '. Fast and free anime hentai with the Rule 34 App.'
+      description += '. Fast and free anime hentai with the Rule 34 App.'
 
-          return description
-        })
-      },
+      return description
+    },
 
-      // Necessary so images can be loaded from other domains
-      {
-        name: 'referrer',
-        content: 'no-referrer'
-      }
-    ],
+    referrer: 'no-referrer',
+
+    rating: 'adult'
+  })
 
+  useHead({
     link: [
       {
         rel: 'canonical',
-        href: computed(() => {
+        href: () => {
           const rawRoute = generatePostsRoute(selectedBooru.value.domain, selectedPage.value, selectedTags.value)
 
           return 'https://' + config.public.APP_DOMAIN + router.resolve(rawRoute).href
-        })
+        }
       }
     ]
   })

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -3,16 +3,10 @@
   import { useUserSettings } from '~/composables/useUserSettings'
   import { ExclamationTriangleIcon } from '@heroicons/vue/20/solid'
 
-  useHead(() => {
-    return {
-      title: 'Settings',
-      meta: [
-        {
-          name: 'description',
-          content: 'Configure how the Rule 34 App works'
-        }
-      ]
-    }
+  useSeoMeta({
+    title: 'Settings',
+
+    description: 'Options to configure how the Rule 34 App works.'
   })
 
   const appVersion = version