app/components/Icon.tsx

@@ -7,7 +7,8 @@ import { PluginsIcon } from "@/icons/PluginsIcon";
 import { PresetsIcon } from "@/icons/PresetsIcon";
 import { ThemingIcon } from "@/icons/ThemingIcon";
 import { WarningIcon } from "@/icons/WarningIcon";
-import { createUniqueId, For } from "solid-js";
+import { useId } from "@/hooks/useId";
+import { For } from "solid-js";
 import clsx from "clsx";
 
 const icons = {
@@ -34,7 +35,7 @@ export type IconProps = JSX.IntrinsicElements["svg"] & {
 };
 
 export function Icon(props: IconProps) {
-	const id = createUniqueId();
+	const id = useId();
 	const IconComponent = icons[props.icon];
 
 	return (

app/components/Logo.tsx

@@ -1,9 +1,9 @@
 import type { JSX } from "solid-js";
 
-import { createUniqueId } from "solid-js";
+import { useId } from "@/hooks/useId";
 
 function LogomarkPaths() {
-	const id = createUniqueId();
+	const id = useId();
 
 	return (
 		<>

app/components/Search.tsx

@@ -1,16 +1,7 @@
 import type { SearchResult } from "@/services/FlexSearchService";
 import type { JSX, Accessor, Setter } from "solid-js";
 
-// import React, {
-// 	useId,
-// 	createSignal,
-// 	createEffect,
-// 	createContext,
-// 	useContext,
-// 	Fragment,
-// } from "react";
 import {
-	createUniqueId,
 	createContext,
 	useContext,
 	For,
@@ -20,9 +11,9 @@ import {
 import { Dialog, DialogPanel } from "terracotta";
 import { useDebounce } from "@/hooks/useDebounce";
 import { Highlighter } from "solid-highlight-words";
-// import { navigation } from "@/lib/navigation";
 import { navigate } from "vike/client/router";
 import { onSearch } from "./Search.telefunc";
+import { useId } from "@/hooks/useId";
 import clsx from "clsx";
 
 const SearchContext = createContext<{
@@ -56,7 +47,7 @@ function SearchIcon(props: JSX.IntrinsicElements["svg"]) {
 }
 
 function LoadingIcon(props: JSX.IntrinsicElements["svg"]) {
-	const id = createUniqueId();
+	const id = useId();
 
 	return (
 		<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
@@ -135,15 +126,7 @@ function HighlightQuery({ text, query }: { text: string; query: string }) {
 
 function SearchResultItem(props: { result: SearchResult; query: string }) {
 	const { close } = useContext(SearchContext);
-	const id = createUniqueId();
+	const id = useId();
-
-	// const sectionTitle = navigation.find((section) =>
-	// 	section.links.find((link) => link.href === result.url.split("#")[0]),
-	// )?.title;
-
-	// const hierarchy = [sectionTitle, result.pageTitle].filter(
-	// 	(x): x is string => typeof x === "string",
-	// );
 
 	return (
 		<li

app/hooks/useId.tsx

@@ -0,0 +1,6 @@
+import { createUniqueId } from "solid-js";
+
+export function useId() {
+	const id = createUniqueId();
+	return `memento-${id}`;
+}

app/partials/HeroBackground.tsx

@@ -1,9 +1,9 @@
 import type { JSX } from "solid-js";
 
-import { createUniqueId } from "solid-js";
+import { useId } from "@/hooks/useId";
 
 export function HeroBackground(props: JSX.IntrinsicElements["svg"]) {
-	const id = createUniqueId();
+	const id = useId();
 
 	return (
 		<svg