Extact section ids

Author: hasparus

src/app/(main)/resources/[category]/blog-posts-section.tsx

@@ -3,8 +3,7 @@
 import { Button } from "@/app/conf/_design-system/button"
 import { Eyebrow } from "@/_design-system/eyebrow"
 import { BlogCard } from "@/components/blog-page/blog-card"
-
-import { sectionId } from "./texts"
+import { sectionIds } from "./texts"
 
 export interface BlogPost {
   href: string
@@ -31,7 +30,7 @@ export function BlogPostsSection({
 }: BlogPostsSectionProps) {
   return (
     <section
-      id={sectionId("Blog posts")}
+      id={sectionIds["blog-or-newsletter"]}
       className="gql-container gql-section flex flex-col gap-10 lg:gap-16"
     >
       <header className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">

src/app/(main)/resources/[category]/cards-section.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/app/conf/_design-system/button"
 
 import { ResourceHubCard } from "../resource-hub-card"
 
-import { texts, sectionKindNames, sectionId } from "./texts"
+import { texts, sectionKindNames, sectionIds } from "./texts"
 
 function sectionLabel(kind: Kind) {
   return sectionKindNames[kind] ?? `${kind[0].toUpperCase()}${kind.slice(1)}`
@@ -20,11 +20,10 @@ export function CardsSection({
   const sectionData = texts[category].sections[section.kind]
   const heading = sectionData?.heading ?? sectionLabel(section.kind)
   const text = sectionData?.text
-  const label = sectionLabel(section.kind)
 
   return (
     <section
-      id={sectionId(label)}
+      id={sectionIds[section.kind]}
       className="gql-container gql-section flex flex-col gap-6"
     >
       <header className="flex items-center justify-between gap-4">

src/components/toc-hero/toc-hero-contents.tsx

@@ -1,6 +1,7 @@
 import { clsx } from "clsx"
 
 import { ChevronRight } from "@/app/conf/_design-system/pixelarticons/chevron-right"
+import { slugify } from "@/app/(main)/resources/[category]/texts"
 
 export interface TocHeroContentsProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -34,7 +35,7 @@ export function TocHeroContents({
             typeof section === "string"
               ? {
                   name: section,
-                  href: `#${section.toLowerCase().replace(/ /g, "-")}`,
+                  href: `#${slugify(section)}`,
                 }
               : section