fix: add canonical url

Rule-34 · Apr 1, 2024 · e46f4a4 · e46f4a4
1 parent 38d98ae
commit e46f4a4
Show file tree

Hide file tree

Showing 3 changed files with 516 additions and 520 deletions.
diff --git a/app.vue b/app.vue
@@ -1,58 +1,68 @@
 <script setup>
-const route = useRoute()
+  const route = useRoute()
+  const config = useRuntimeConfig()
 
-useHead({
-  htmlAttrs: {
-    lang: 'en'
-  },
-
-  titleTemplate: (titleChunk) => {
-    return titleChunk ? `${titleChunk} | R34.app` : 'Rule 34 App | R34.app'
-  },
+  const canonicalUrl = computed(() => {
+    return 'https://' + config.public.APP_DOMAIN + route.fullPath
+  })
 
-  link: [
-    // Favicon
-    {
-      rel: 'icon',
-      href: '/favicon.ico',
-      sizes: '48x48'
+  useHead({
+    htmlAttrs: {
+      lang: 'en'
     },
-    {
-      rel: 'icon',
-      href: '/icon.svg',
-      sizes: 'any',
-      type: 'image/svg+xml'
+
+    titleTemplate: (titleChunk) => {
+      return titleChunk ? `${titleChunk} | R34.app` : 'Rule 34 App | R34.app'
     },
-    {
-      rel: 'apple-touch-icon',
-      href: '/apple-touch-icon-180x180.png'
-    }
-  ]
-})
 
-useSeoMeta({
-  charset: 'utf-8',
-  viewport: 'width=device-width, initial-scale=1',
+    link: [
+      // Favicon
+      {
+        rel: 'icon',
+        href: '/favicon.ico',
+        sizes: '48x48'
+      },
+      {
+        rel: 'icon',
+        href: '/icon.svg',
+        sizes: 'any',
+        type: 'image/svg+xml'
+      },
+      {
+        rel: 'apple-touch-icon',
+        href: '/apple-touch-icon-180x180.png'
+      },
+      // Canonical URL
+      {
+        rel: 'canonical',
+        href: canonicalUrl
+      }
+    ]
+  })
+
+  useSeoMeta({
+    charset: 'utf-8',
+    viewport: 'width=device-width, initial-scale=1',
 
-  // TODO: Improve description
-  description:
-    'Stream and download Rule 34 porn videos, GIFs, and images from multiple Boorus in a mobile-first web app',
+    // TODO: Improve description
+    description:
+      'Stream and download Rule 34 porn videos, GIFs, and images from multiple Boorus in a mobile-first web app',
 
-  rating: 'adult',
+    rating: 'adult',
 
-  colorScheme: 'dark',
-  themeColor: '#000',
+    colorScheme: 'dark',
+    themeColor: '#000',
 
-  monetization: '$ilp.uphold.com/Hf3zAn3pQ7fD',
+    monetization: '$ilp.uphold.com/Hf3zAn3pQ7fD',
 
-  ogImage: () => ({
-    url:
-      'https://screenshot.akbal.dev/v1/capture?width=1200&height=630&url=' +
-      encodeURIComponent('https://r34.app' + route.fullPath),
-    width: 1200,
-    height: 630
+    ogImage: () => ({
+      url:
+        'https://screenshot.akbal.dev/v1/capture?width=1200&height=630&url=' +
+        encodeURIComponent('https://r34.app' + route.fullPath),
+      width: 1200,
+      height: 630
+    })
   })
-})
 
   useSchemaOrg([
     defineWebSite({
@@ -74,14 +84,14 @@ useSeoMeta({
 </script>
 
 <template>
-  <VitePwaManifest/>
+  <VitePwaManifest />
 
   <NuxtLoadingIndicator
     :height="5"
     :throttle="250"
   />
 
   <NuxtLayout>
-    <NuxtPage/>
+    <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/components/shared/ShareButton.vue b/components/shared/ShareButton.vue
@@ -4,8 +4,8 @@
 
   interface ShareButtonProps {
     title: string
-    text: string
-    url: string
+    text?: string
+    url?: string
   }
 
   const props = defineProps<ShareButtonProps>()
@@ -16,12 +16,14 @@
       return
     }
 
+    const url = props.url ?? window.location.href
+
     let text =
       //
       props.title +
       '\n' +
       //
-      props.url +
+      url +
       '\n\n' +
       //
       props.text +
@@ -41,7 +43,7 @@
       await window.navigator.share({
         title: props.title,
         text: text,
-        url: props.url
+        url: url
       })
     } catch (error) {
       Sentry.captureException(error)