feat: improve title and description

Rule-34 · Mar 6, 2024 · 9071932 · 9071932
1 parent 22890c0
commit 9071932
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 39 deletions.
diff --git a/app.vue b/app.vue
@@ -7,7 +7,7 @@
     },
 
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} | Rule 34 App` : 'Rule 34 App'
+      return titleChunk ? `${titleChunk} | R34.app` : 'Rule 34 App | R34.app'
     },
 
     link: [

diff --git a/assets/js/SeoHelper.ts b/assets/js/SeoHelper.ts
@@ -1,6 +1,7 @@
 import Tag from '~/assets/js/tag.dto'
+import { toLower, startCase } from 'lodash-es'
 
-export function tagArrayToTitle(tags: Tag[]) {
+export function tagArrayToTitle(tags: Tag[], addWith: boolean = true, addWithout: boolean = true) {
   if (!tags.length) {
     return null
   }
@@ -21,15 +22,24 @@ export function tagArrayToTitle(tags: Tag[]) {
   let title = ''
 
   if (tagsThatStartWithNothing.length) {
-    title += `with ${ tagsThatStartWithNothing.join(', ') }`
+
+    if (addWith) {
+      title += 'with '
+    }
+
+    title += tagsThatStartWithNothing.join(', ')
   }
 
-  if (tagsThatStartWithNothing.length && tagsThatStartWithMinus.length) {
+  if (addWith && addWithout && tagsThatStartWithNothing.length && tagsThatStartWithMinus.length) {
     title += ', and'
   }
 
   if (tagsThatStartWithMinus.length) {
-    title += ` without ${ tagsThatStartWithMinus.join(', ') }`
+    if (addWithout) {
+      title += ' without '
+    }
+
+    title += tagsThatStartWithMinus.join(', ')
   }
 
   return title
@@ -40,17 +50,18 @@ export function normalizeStringForTitle(string: string) {
     return null
   }
 
-  string = string.trim()
+  let startsWithMinus = false
 
-  // Replace underscores with spaces
-  string = string.replace(/_/g, ' ')
+  if (string.startsWith('-')) {
+    startsWithMinus = true
+  }
 
-  // Delete parentheses
-  string = string.replace(/\(/g, '')
-  string = string.replace(/\)/g, '')
+  // Capitalize first letter of each word - https://stackoverflow.com/questions/38084396/lodash-title-case-uppercase-first-letter-of-every-word
+  string = startCase(toLower(string))
 
-  // Delete colons
-  string = string.replace(/:/g, '')
+  if (startsWithMinus) {
+    string = '-' + string
+  }
 
   return string
 }
diff --git a/pages/posts/[domain].vue b/pages/posts/[domain].vue
@@ -7,7 +7,7 @@
   import type { Ref } from 'vue'
   import { generatePostsRoute } from '~/assets/js/RouterHelper'
   import { tagArrayToTitle } from '~/assets/js/SeoHelper'
-  import { capitalize, cloneDeep } from 'lodash-es'
+  import { capitalize, startCase, cloneDeep } from 'lodash-es'
   import type { Domain } from '~/assets/js/domain'
   import type { IPostPage } from '~/assets/js/post'
   import { useInfiniteQuery } from '@tanstack/vue-query'
@@ -364,7 +364,7 @@
     window.location.reload()
   }
 
-  const title = computed(() => {
+  const completeTitle = computed(() => {
     let title = ''
 
     // Page
@@ -376,7 +376,7 @@
 
     // Tags
     if (selectedTags.value.length > 0) {
-      title += ` tagged ${tagArrayToTitle(selectedTags.value)} porn`
+      title += ` tagged ${tagArrayToTitle(selectedTags.value)} Hentai`
     }
 
     // Filters
@@ -389,27 +389,41 @@
     }
 
     if (selectedFilters.value.score) {
-      title += `, with a score of ${selectedFilters.value.score}`
+      title += `, score of ${selectedFilters.value.score}`
     }
 
     // Domain
     title += `, from ${selectedBooru.value.domain}`
 
     title = title.trim()
-    title = capitalize(title)
 
     return title
   })
 
+  const shortTitle = computed(() => {
+    let _title = completeTitle.value
+
+    _title = _title.replace(/Posts tagged/, '')
+    _title = _title.replace(/with /, '')
+    _title = _title.replace(/and ?without /, ' w/o ')
+    _title = _title.replace(/with a score of/, 'score')
+
+    _title = _title.trim()
+    // Capitalize first letter - https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript
+    _title = _title.charAt(0).toUpperCase() + _title.slice(1)
+
+    return _title
+  })
+
   const titleForBody = computed(() => {
-    let _title = title.value
+    let _title = completeTitle.value
 
     // TODO: Show page number in body title
-    _title = _title.replace(/Page \d+ of /, '')
+    _title = _title.replace(/page \d+ of /i, '')
 
     _title = _title.replace(/posts/i, '')
 
-    _title = _title.replace(/ porn/, '')
+    _title = _title.replace(/ hentai, /i, ', ')
 
     _title = _title.replace(/, from .+$/, '')
 
@@ -419,34 +433,49 @@
     }
 
     _title = _title.trim()
-    _title = capitalize(_title)
+    // Capitalize first letter - https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript
+    _title = _title.charAt(0).toUpperCase() + _title.slice(1)
 
     return _title
   })
 
-  // TODO: Think about setting a real canonical URL
-  const canonicalUrl = computed(() => {
-    return window.location.href
-  })
+  const description = computed(() => {
+    let description = `Stream and download ${tagArrayToTitle(selectedTags.value, false)} Hentai porn videos, GIFs and images`
 
-  useSeoMeta({
-    title,
+    description = description.replace('download with', 'download')
 
-    description: () => {
-      let description = 'Stream and download porn images, GIFs and videos'
+    // Filters
+    if (selectedFilters.value.rating) {
+      description += `, rated ${selectedFilters.value.rating}`
+    }
 
-      if (selectedTags.value.length > 0) {
-        description += ` featuring ${tagArrayToTitle(selectedTags.value)}`
-      }
+    if (selectedFilters.value.sort) {
+      description += `, sorted by ${selectedFilters.value.sort}`
+    }
+
+    if (selectedFilters.value.score) {
+      description += `, with a score of ${selectedFilters.value.score}`
+    }
 
-      // TODO: Filters
+    description += `, from ${selectedBooru.value.domain}`
 
-      description += ` from ${selectedBooru.value.domain}`
+    // TODO: Improve ending
+    description += '. Free anime hentai here on R34.app'
 
-      description += '. Fast and free anime hentai with the Rule 34 App.'
+    return description
 
-      return description
-    },
+
+  })
+
+  // TODO: Think about setting a real canonical URL
+  const canonicalUrl = computed(() => {
+    return window.location.href
+  })
+
+  useSeoMeta({
+    title: shortTitle,
+
+    description,
 
     referrer: 'no-referrer'
   })
@@ -569,7 +598,7 @@
 
       <!-- TODO: strip page -->
       <ShareButton
-        :title="title"
+        :title="completeTitle"
         :url="canonicalUrl"
         class="my-auto"
         text=""