fix: add slugify pattern

Author: Flo0806

server/utils/readme.ts

@@ -157,6 +157,25 @@ const ALLOWED_ATTR: Record<string, string[]> = {
 // GitHub-style callout types
 // Format: > [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], > [!CAUTION]
 
+/**
+ * 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
+ */
+function slugify(text: string): string {
+  return text
+    .replace(/<[^>]*>/g, '') // Strip HTML tags
+    .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
+}
+
 /**
  * Resolve a relative URL to an absolute URL.
  * If repository info is available, resolve to provider's raw file URLs.
@@ -240,6 +259,9 @@ export async function renderReadmeHtml(
   const collectedLinks: PlaygroundLink[] = []
   const seenUrls = new Set<string>()
 
+  // Track used heading slugs to handle duplicates (GitHub-style: foo, foo-1, foo-2)
+  const usedSlugs = new Map<string, number>()
+
   // Track heading hierarchy to ensure sequential order for accessibility
   // Page h1 = package name, h2 = "Readme" section heading
   // So README starts at h3, and we ensure no levels are skipped
@@ -262,7 +284,17 @@ export async function renderReadmeHtml(
 
     lastSemanticLevel = semanticLevel
     const text = this.parser.parseInline(tokens)
-    return `<h${semanticLevel} data-level="${depth}">${text}</h${semanticLevel}>\n`
+
+    // Generate GitHub-style slug for anchor links
+    let slug = slugify(text)
+    if (!slug) slug = 'heading' // Fallback for empty headings
+
+    // Handle duplicate slugs (GitHub-style: foo, foo-1, foo-2)
+    const count = usedSlugs.get(slug) ?? 0
+    usedSlugs.set(slug, count + 1)
+    const id = count === 0 ? slug : `${slug}-${count}`
+
+    return `<h${semanticLevel} id="${id}" data-level="${depth}">${text}</h${semanticLevel}>\n`
   }
 
   // Syntax highlighting for code blocks (uses shared highlighter)