fix: unify slug generation logic to fix hydration mismatches

gridsome.server.js

@@ -5,6 +5,7 @@ const redditChannels = require("./data/redditChannels");
 const podcasts = require("./data/podcasts");
 const blogs = require("./data/blogs");
 const learningPlatforms = require("./data/learningPlatforms");
+const createSlug = require("./src/utils/slugify");
 
 let id_list = videoTutorials.map((tech) =>
   tech.videoTutorials.map((video) => video.url)
@@ -131,8 +132,9 @@ module.exports = function(api) {
 
     data.allVideo.edges.forEach(({ node }) => {
       if (node.category !== "playlist") {
+        const SLUG_NAME = createSlug(node.name);
         createPage({
-          path: `/video-tutorials/${node.name}/${node.id}`,
+          path: `/video-tutorials/${SLUG_NAME}/${node.id}`,
           component: "./src/templates/VideoPage.vue",
           context: {
             id: node.id,
@@ -149,8 +151,9 @@ module.exports = function(api) {
 
     videoTutorials.forEach((category) => {
       if (category.category !== "playlist") {
+        const SLUG_NAME = createSlug(category.name);
         createPage({
-          path: `/video-tutorials/${category.name.toLowerCase()}`,
+          path: `/video-tutorials/${SLUG_NAME}`,
           component: "./src/templates/TechnologyPage.vue",
           context: {
             technology: category.name.toLowerCase(),
@@ -161,9 +164,9 @@ module.exports = function(api) {
           },
         });
       } else if (category.category === "playlist") {
-        const PRETTY_PATH = category.name.replace(" ", "-").toLowerCase();
+        const SLUG_NAME = createSlug(category.name);
         createPage({
-          path: `/video-tutorials/playlists/${PRETTY_PATH}`,
+          path: `/video-tutorials/playlists/${SLUG_NAME}`,
           component: "./src/templates/PlaylistPage.vue",
           context: {
             name: category.name.toLowerCase(),

src/components/PlaylistCard.vue

@@ -2,7 +2,7 @@
   <g-link
     @mouseenter.native="hover = true"
     @mouseleave.native="hover = false"
-    :to="`video-tutorials/playlists/${name.replace(' ', '-').toLowerCase()}`"
+    :to="playlistPath"
     class="m-3"
   >
     <section
@@ -71,6 +71,7 @@ import IsraelFlagIcon from "~/components/UI/IsraelFlagIcon";
 import { formatDistance } from "date-fns";
 import { format } from "date-fns";
 import { he } from "date-fns/locale";
+import createSlug from "~/utils/slugify";
 
 export default {
   props: {
@@ -116,6 +117,11 @@ export default {
     amountDirection() {
       return this.hebrewName.length === 0 ? "right-0" : "left-0";
     },
+
+    playlistPath() {
+      const slug = createSlug(this.name);
+      return `video-tutorials/playlists/${slug}`;
+    },
   },
 };
 </script>

src/components/TechCard.vue

@@ -4,7 +4,7 @@
   >
     <div class="pt-2 px-5 flex-grow">
       <g-link
-        :to="`/video-tutorials/${name.toLowerCase()}`"
+        :to="tutorialPath"
         :style="`color: ${color}`"
         class="text-center flex flex-col justify-between h-full"
       >
@@ -56,6 +56,7 @@
 import AppIcon from "~/components/UI/AppIcon";
 import ExternalIcon from "~/components/UI/ExternalIcon";
 import YoutubeIcon from "~/components/UI/YoutubeIcon";
+import createSlug from "~/utils/slugify";
 export default {
   props: {
     name: String,
@@ -82,6 +83,12 @@ export default {
         "--color-hover": this.color,
       };
     },
+    tutorialPath() {
+      if (!this.name) return '/video-tutorials';
+
+      const slug = createSlug(this.name);
+      return `/video-tutorials/${slug}`;
+    },
   },
 };
 </script>

src/components/VideoCard.vue

@@ -2,7 +2,7 @@
   <g-link
     @mouseenter.native="hover = true"
     @mouseleave.native="hover = false"
-    :to="`video-tutorials/${category}/${id}`"
+    :to="videoPath"
     class="m-2"
   >
     <section
@@ -50,6 +50,7 @@ import IsraelFlagIcon from "~/components/UI/IsraelFlagIcon";
 import { formatDistance } from "date-fns";
 import { format } from "date-fns";
 import { he } from "date-fns/locale";
+import createSlug from "~/utils/slugify";
 
 export default {
   props: {
@@ -104,6 +105,11 @@ export default {
     direction() {
       return this.doesContainHebrewLetters([this.title]) ? "rtl" : "ltr";
     },
+
+    videoPath() {
+      const slug = createSlug(this.category);
+      return `video-tutorials/${slug}/${this.id}`;
+    },
   },
 };
 </script>

src/templates/TechnologyPage.vue

@@ -114,6 +114,7 @@
 import VideoCard from "~/components/VideoCard";
 import PlaylistCard from "~/components/PlaylistCard";
 import AppIcon from "~/components/UI/AppIcon";
+import createSlug from "~/utils/slugify";
 export default {
   components: {
     VideoCard,
@@ -160,8 +161,9 @@ export default {
       if (this.currentPage + 1 > this.$page.videos.pageInfo.totalPages) {
         $state.complete();
       } else {
+        const slug = createSlug(this.$context.technology);
         const { data } = await this.$fetch(
-          `/video-tutorials/${this.$context.technology}/${this.currentPage + 1}`
+          `/video-tutorials/${slug}/${this.currentPage + 1}`
         );
         if (data.videos.edges.length) {
           this.currentPage = data.videos.pageInfo.currentPage;

src/templates/VideoPage.vue

@@ -6,7 +6,7 @@
       >
         <g-link
           :title="`${$context.name}-חזור ל`"
-          :to="`video-tutorials/${$context.name}`"
+          :to="backPath"
         >
           <div class="p-8">
             <app-icon
@@ -69,6 +69,7 @@
 <script>
 import AppLoader from "~/components/UI/AppLoader";
 import AppIcon from "~/components/UI/AppIcon";
+import createSlug from "~/utils/slugify";
 export default {
   components: {
     AppLoader,
@@ -88,6 +89,10 @@ export default {
     direction() {
       return this.isHebrew ? "rtl" : "ltr";
     },
+    backPath() {
+      const slug = createSlug(this.$context.name);
+      return `video-tutorials/${slug}`;
+    },
 
     description() {
       return this.showMore

src/utils/slugify.js

@@ -0,0 +1,12 @@
+module.exports = function (name) {
+  if (!name) return '';
+
+  return name.toString().toLowerCase()
+    .replace(/#/g, '-sharp')
+    .replace(/\+/g, '-plus')
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');
+};