Merge pull request #2667 from redsh4de/feat/stableid-helper

use sha256 for deterministic ids [beta]

Author: plowsof

src/components/ui/accordion/Accordion.astro

@@ -1,5 +1,6 @@
 ---
 import AccordionItem from "./AccordionItem.astro";
+import { stableId } from "@/utils/stableId";
 
 export interface AccordionItemType {
   title: string;
@@ -13,15 +14,11 @@ export interface Props {
 }
 
 const { items, multiExpand = false, variant = "default" } = Astro.props;
-if (items?.some((i) => typeof i.title !== "string" || !i.title.trim())) {
+const titles = items?.map((i) => i.title) ?? [];
+if (titles.some((t) => !t.trim())) {
   throw new Error("<Accordion> item has an empty title.");
 }
-const accordionId = items?.length
-  ? `${variant}-${[...items.map((i) => i.title).join("")]
-      .slice(0, 7)
-      .map((c) => c.codePointAt(0))
-      .join("-")}`
-  : `${variant}-slot`;
+const accordionId = `${variant}-${titles.length ? stableId(titles) : "slot"}`;
 const accordionName = multiExpand ? undefined : `accordion-${accordionId}`;
 ---
 

src/components/ui/header/NavItem.astro

@@ -4,6 +4,7 @@ import type { ImageMetadata } from "astro";
 import MaskIcon from "@/components/ui/icons/MaskIcon.astro";
 import NavDropdownLink from "./NavDropdownLink.astro";
 import { icons } from "@/utils/icons";
+import { stableId } from "@/utils/stableId";
 
 export interface DropdownItem {
   label: string;
@@ -21,11 +22,8 @@ export interface Props {
 
 const { label, href, dropdown = [] } = Astro.props;
 const isDropdown = dropdown.length > 0;
-const id = `dd-${[...label]
-  .slice(0, 7)
-  .map((c) => c.codePointAt(0))
-  .join("-")}`;
-const closeId = id + "-close";
+const id = `dd-${stableId(label)}`;
+const closeId = `${id}-close`;
 ---
 
 <li class="nav-item" data-is-dropdown={isDropdown || undefined}>

src/components/ui/tabs/SectionTabs.astro

@@ -1,4 +1,6 @@
 ---
+import { stableId } from "@/utils/stableId";
+
 interface Tab {
   label: string;
   count?: number;
@@ -15,10 +17,7 @@ if (!tabs || tabs.length === 0) {
   throw new Error("<SectionTabs> requires at least one tab");
 }
 
-const uid = `stabs-${[...tabs.map((t) => t.label).join("")]
-  .slice(0, 7)
-  .map((c) => c.codePointAt(0))
-  .join("-")}`;
+const uid = `stabs-${stableId(tabs.map((t) => t.label))}`;
 ---
 
 <div class:list={["section-tabs", className]} id={uid}>

src/utils/stableId.ts

@@ -0,0 +1,6 @@
+import { createHash } from "node:crypto";
+
+export const stableId = (input: string | string[], length = 12): string => {
+  const data = typeof input === "string" ? input : JSON.stringify(input);
+  return createHash("sha256").update(data).digest("hex").slice(0, length);
+};