moved slugify to shared/utils/html.ts to allow usage in the front & back

releases title's will now use slugify instead of encodeUri to fix issues with encoding

Author: WilcoSp

app/components/Changelog/Card.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ReleaseData } from '~~/shared/types/changelog'
+import { slugify } from '~~/shared/utils/html'
 
 const { release } = defineProps<{
   release: ReleaseData
@@ -13,7 +14,7 @@ const formattedDate = computed(() => {
 
 const cardId = computed(() => (release.publishedAt ? `date-${formattedDate.value}` : undefined))
 
-const navId = computed(() => `release-${encodeURI(release.title)}`)
+const navId = computed(() => `release-${slugify(release.title)}`)
 
 function navigateToTitle() {
   navigateTo(`#${navId.value}`)

app/components/Changelog/Releases.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { slugify } from '~~/shared/utils/html'
+
 const { info, requestedDate, requestedVersion } = defineProps<{
   info: ChangelogReleaseInfo
   requestedDate?: string
@@ -40,7 +42,7 @@ watch(
     if (rv) {
       for (const match of matchingDateReleases.value ?? []) {
         if (match.title.toLowerCase().includes(rv)) {
-          navigateTo(`#release-${encodeURI(match.title)}`)
+          navigateTo(`#release-${slugify(match.title)}`)
           return
         }
       }

server/utils/changelog/markdown.ts

@@ -5,9 +5,8 @@ import {
   ALLOWED_TAGS,
   calculateSemanticDepth,
   isNpmJsUrlThatCanBeRedirected,
-  slugify,
 } from '../readme'
-import { stripHtmlTags } from '#shared/utils/html'
+import { stripHtmlTags, slugify } from '#shared/utils/html'
 import sanitizeHtml from 'sanitize-html'
 import { hasProtocol } from 'ufo'
 

server/utils/readme.ts

@@ -3,7 +3,7 @@ import sanitizeHtml from 'sanitize-html'
 import { hasProtocol } from 'ufo'
 import type { ReadmeResponse, TocItem } from '#shared/types/readme'
 import { convertBlobOrFileToRawUrl, type RepositoryInfo } from '#shared/utils/git-providers'
-import { decodeHtmlEntities, stripHtmlTags } from '#shared/utils/html'
+import { decodeHtmlEntities, stripHtmlTags, slugify } from '#shared/utils/html'
 import { convertToEmoji } from '#shared/utils/emoji'
 import { toProxiedImageUrl } from '#server/utils/image-proxy'
 import { highlightCodeSync } from './shiki'
@@ -200,25 +200,6 @@ export const ALLOWED_ATTR: Record<string, string[]> = {
   'p': ['align'],
 }
 
-/**
- * Generate a GitHub-style slug from heading text.
- * - Convert to lowercase
- * - Remove HTML tags
- * - Replace spaces with hyphens
- * - Remove special characters (keep alphanumeric, hyphens, underscores)
- * - Collapse multiple hyphens
- */
-export function slugify(text: string): string {
-  return stripHtmlTags(text)
-    .replace(/&nbsp;?/g, '') // remove non breaking spaces
-    .toLowerCase()
-    .trim()
-    .replace(/\s+/g, '-') // Spaces to hyphens
-    .replace(/[^\w\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff-]/g, '') // Keep alphanumeric, CJK, hyphens
-    .replace(/-+/g, '-') // Collapse multiple hyphens
-    .replace(/^-|-$/g, '') // Trim leading/trailing hyphens
-}
-
 /**
  * Lazy ATX heading extension for marked: allows headings without a space after `#`.
  *

shared/utils/html.ts

@@ -27,3 +27,21 @@ export function stripHtmlTags(text: string): string {
   } while (result !== previous)
   return result
 }
+/**
+ * Generate a GitHub-style slug from heading text.
+ * - Convert to lowercase
+ * - Remove HTML tags
+ * - Replace spaces with hyphens
+ * - Remove special characters (keep alphanumeric, hyphens, underscores)
+ * - Collapse multiple hyphens
+ */
+export function slugify(text: string): string {
+  return stripHtmlTags(text)
+    .replace(/ ?/g, '') // remove non breaking spaces
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-') // Spaces to hyphens
+    .replace(/[^\w\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff-]/g, '') // Keep alphanumeric, CJK, hyphens
+    .replace(/-+/g, '-') // Collapse multiple hyphens
+    .replace(/^-|-$/g, '') // Trim leading/trailing hyphens
+}