Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 1x 1x 1x 1x 10x 10x 10x 500x 1000x 110x 110x 10x 10x 10x 10x 10x 20x 10x | import type { Metadata } from 'next';
import { PageFeedback } from '@/components/PageFeedback';
import { Pager } from '@/components/Pager';
import type { Theme } from '@/lib/design-tokens';
import type { TocItem } from '@/lib/markdown';
import { getAdjacentPages, getBreadcrumbs, getPageByUrl } from '@/lib/navigation';
import { HOOK_GROUPS, headingId } from '@/lib/styling-hook-groups';
import { getStylingHookIndexData, stylingHookIndexMarkdown } from '@/lib/styling-hooks';
import { StylingHookIndex, ThemeMarkdownButton } from './StylingHookIndex';
const URL = '/styling-api/styling-hook-index';
const TITLE = 'Styling Hook Index';
const DESCRIPTION = 'A complete directory of SLDS 2 global styling hooks and design values';
export const metadata: Metadata = {
title: `${TITLE} | SLDS 2`,
description: DESCRIPTION,
};
/** Sections (H2) and Color's subsections (H3), in config order. */
function tableOfContents(): TocItem[] {
const toc: TocItem[] = [];
const seen = new Set<string>();
for (const { section, subsection } of HOOK_GROUPS) {
for (const [text, level] of [
[section, 2],
[subsection, 3],
] as const) {
if (!text || seen.has(text)) continue;
seen.add(text);
toc.push({ id: headingId(text), text, level });
}
}
return toc;
}
export default function StylingHookIndexPage() {
const data = getStylingHookIndexData();
const navPage = getPageByUrl(URL);
const { prev, next } = navPage ? getAdjacentPages(navPage) : { prev: null, next: null };
const markdown = Object.fromEntries(
Object.entries(data.themes).map(([theme, index]) => [theme, stylingHookIndexMarkdown(index, TITLE)]),
) as Record<Theme, string>;
return (
<StylingHookIndex
data={data}
breadcrumbs={navPage ? getBreadcrumbs(navPage) : []}
title={TITLE}
description={DESCRIPTION}
toc={tableOfContents()}
>
<p className="styling-hook-index__source">
Generated from <code>{data.source}</code>.
</p>
<div className="page-actions">
<ThemeMarkdownButton markdown={markdown} />
<PageFeedback />
</div>
<hr className="page-divider" />
<Pager
prev={prev && { name: prev.name, url: prev.url }}
next={next && { name: next.name, url: next.url }}
/>
</StylingHookIndex>
);
}
|