fix: Correct parameter IDs

Author: YDX-2147483647

website/src/components/ui/FunctionDefinition.tsx

@@ -2,16 +2,21 @@ import type { FC } from "hono/jsx";
 import type { Func } from "../../types/model";
 import { TypeIcon } from "./TypeIcon";
 import { genPath } from "./genPath";
-import { type2href } from "./type2href";
+import { buildParamId, type2href } from "./type2href";
 
 type FunctionDefinitionProps = {
 	func: Func;
-	prefix?: string;
+	/**
+	 * The prefix for parameter IDs
+	 *
+	 * See `buildParamId`.
+	 */
+	prefix?: string | undefined;
 };
 
 export const FunctionDefinition: FC<FunctionDefinitionProps> = ({
 	func,
-	prefix = "",
+	prefix = undefined,
 }) => {
 	return (
 		<div class="bg-gray-50 p-4 rounded-md border border-gray-100 overflow-x-auto">
@@ -28,7 +33,7 @@ export const FunctionDefinition: FC<FunctionDefinitionProps> = ({
 							{!param.positional && (
 								<div class="flex-shrink-0">
 									<a
-										href={`#${prefix}-${func.name}-parameters-${param.name}`}
+										href={`#${buildParamId(param.name, prefix)}`}
 										class="text-gray-800 hover:text-blue-500 transition-colors mr-1"
 									>
 										<span class="font-medium">{param.name}</span>

website/src/components/ui/FunctionDisplay.tsx

@@ -7,13 +7,18 @@ import { HtmlContent } from "./HtmlContent";
 
 type FunctionDisplayProps = {
 	func: Func;
-	prefix?: string;
+	/**
+	 * The prefix for IDs of function parameters
+	 *
+	 * See `buildParamId`.
+	 */
+	prefix?: string | undefined;
 	isExampleFolding?: boolean;
 };
 
 export const FunctionDisplay: FC<FunctionDisplayProps> = ({
 	func,
-	prefix = "",
+	prefix = undefined,
 	isExampleFolding = true,
 }) => {
 	return (

website/src/components/ui/FunctionParameters.tsx

@@ -4,16 +4,21 @@ import { ChevronRightIcon } from "../icons";
 import { HtmlContent } from "./HtmlContent";
 import { Tooltip } from "./Tooltip";
 import { TypeIcon } from "./TypeIcon";
-import { type2href } from "./type2href";
+import { buildParamId, type2href } from "./type2href";
 
 type FunctionParametersProps = {
 	func: Func;
-	prefix?: string;
+	/**
+	 * The prefix for IDs
+	 *
+	 * See `buildParamId`.
+	 */
+	prefix?: string | undefined;
 };
 
 export const FunctionParameters: FC<FunctionParametersProps> = ({
 	func,
-	prefix = "",
+	prefix = undefined,
 }) => {
 	return (
 		<div class="space-y-6">
@@ -23,7 +28,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 					class="bg-gray-50 rounded-md p-4 border border-gray-100"
 				>
 					<h4
-						id={`${prefix}-${func.name}-parameters-${param.name}`}
+						id={buildParamId(param.name, prefix)}
 						class="flex flex-wrap items-center gap-2 mb-3"
 					>
 						<code class="text-base font-medium">{param.name}</code>

website/src/components/ui/type2href.ts

@@ -58,3 +58,28 @@ export const type2href = (parameterType: string): string | null => {
 	}
 	return null;
 };
+
+/**
+ * Build the ID of a parameter with prefix
+ *
+ * If the parameter belongs to a top-level function on a page, leave `prefix` empty;
+ * Otherwise, set it to an appropriate prefix.
+ *
+ * ## Example values of `prefix`
+ *
+ * | Page (kind)         | Function         | Parameter  | `prefix`                |
+ * | ------------------- | ---------------- | ---------- | ----------------------- |
+ * | `figure` (function) | `figure`         | `body`     | `undefined`             |
+ * | `figure` (function) | `figure.caption` | `body`     | `"definitions-caption"` |
+ * | `calc` (group)      | `calc.abs`       | `value`    | `"functions-abs"`       |
+ * | `array` (type)      | `array.at`       | `index`    | `"definitions-at"`      |
+ * | `array` (type)      | Constructor      | `value`    | `"constructor"`      |
+ */
+export function buildParamId(
+	parameterName: string,
+	prefix: string | undefined,
+): string {
+	return prefix === undefined
+		? `parameters-${parameterName}`
+		: `${prefix}-${parameterName}`;
+}