From 32497c358566b104fd730f4a7a4bf5cf139ed53b Mon Sep 17 00:00:00 2001
From: braanj <anjar.bra@gmail.com>
Date: Tue, 17 Dec 2024 20:51:27 +0100
Subject: [PATCH] =?UTF-8?q?Feat:=20=E2=9C=A8=20configure=20canonical=20lin?=
 =?UTF-8?q?k?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All pages will have a self canonical (URL without trailing slash)

URLs with trailing slash are redirected permanently (301) to avoid duplicates in google index
---
 app.vue                                  | 10 +++++++++-
 server/middleware/removeTrailingSlash.js |  7 +++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 server/middleware/removeTrailingSlash.js

diff --git a/app.vue b/app.vue
index 41ca9fd7..a403fabb 100644
--- a/app.vue
+++ b/app.vue
@@ -4,6 +4,14 @@ const ogTitle = 'Debbie codes and helps others learn Playwright, testing, React,
 const twitterDescription = 'My website of where I play around with Nuxt, Playwright and more and showcase my blog, resources etc'
 const twitterCard = 'https://debbie.codes/twitter-card.png'
 const mySite = 'https://debbie.codes'
+
+const { path } = useRoute()
+const canonical = computed(()=> {
+  if (path === '/') return mySite
+  const { href: canonical } = new URL(path, mySite)
+  return canonical
+})
+
 useHead({
   htmlAttrs: {
     lang: 'en',
@@ -70,7 +78,7 @@ useHead({
     { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
     {
       rel: 'canonical',
-      href: mySite,
+      href: canonical.value,
     },
   ],
 })
diff --git a/server/middleware/removeTrailingSlash.js b/server/middleware/removeTrailingSlash.js
new file mode 100644
index 00000000..c7b98cac
--- /dev/null
+++ b/server/middleware/removeTrailingSlash.js
@@ -0,0 +1,7 @@
+export default defineEventHandler((event) => {
+  if (event.path !== '/' && event.path.endsWith('/')) {
+    const { path } = event
+    const nextPath = path.replace(/\/+$/, '') || '/'
+    return sendRedirect(event, nextPath, 301)
+  }
+})