Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.4 kB · 48 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import React from "react";
export function slugify(str: string) { return str .toString() .toLowerCase() .trim() // Remove whitespace from both ends of a string .replace(/\s+/g, "-") // Replace spaces with - .replace(/&/g, "-and-") // Replace & with 'and' .replace(/[^\w-]+/g, "") // Remove all non-word characters except for - .replace(/--+/g, "-"); // Replace multiple - with single -}
function flattenChildren(children: React.ReactNode): string { if (children == null || typeof children === "boolean") return ""; if (typeof children === "string" || typeof children === "number") return String(children); if (Array.isArray(children)) return children.map(flattenChildren).join(""); if (React.isValidElement(children)) return flattenChildren( (children.props as { children?: React.ReactNode }).children, ); return "";}
export function createHeading(level: number) { const Heading = ({ children }: { children: React.ReactNode }) => { const text = flattenChildren(children); const slug = slugify(text); return React.createElement( `h${level}`, { id: slug }, [ React.createElement("a", { href: `#${slug}`, key: `link-${slug}`, className: "anchor", "aria-label": `Link to section: ${text}`, }), ], children, ); };
Heading.displayName = `Heading${level}`;
return Heading;}