|
1 | 1 | --- |
2 | 2 | import { siteName, siteTitle, siteThemeColor, siteColorScheme, siteKeywords, twitterCard } from '../seo.config.ts'; |
3 | 3 | import { Root } from '@components/root/root'; |
4 | | -import { Body } from '@components/body/body'; |
5 | 4 | import { PageBody } from '@components/page-body/page-body'; |
| 5 | +import { PageHeader } from '@components/page-header/page-header'; |
| 6 | +import { PageFooter } from '@components/page-footer/page-footer'; |
| 7 | +import { NavBar } from '@components/nav-bar/nav-bar'; |
6 | 8 | import { PageLayout } from '@components/page-layout/page-layout'; |
7 | 9 | import { SkipLink } from '@components/skip-link/skip-link.tsx'; |
| 10 | +import { NavList } from '@components/nav-list/nav-list'; |
| 11 | +import { NavListLink } from '@components/nav-list/nav-list'; |
| 12 | +import { Logo } from '@components/logo/logo'; |
| 13 | +import { LinkList, LinkListLink } from '@components/link-list/link-list'; |
| 14 | +import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator } from '@components/breadcrumb-nav/breadcrumb-nav'; |
| 15 | +import { IconChevronRight } from '@tabler/icons-react'; |
8 | 16 |
|
9 | 17 | import '@fontsource/fira-code'; |
10 | 18 | import '@fontsource/fira-sans/700'; |
@@ -35,6 +43,28 @@ const _seoImageAlt = seoImage ? seoImageAlt : fallbackSeoImageAlt; |
35 | 43 | const _keywords = new Set([...siteKeywords, ...(keywords || [])]); |
36 | 44 | const _follow = follow === undefined ? index : follow; |
37 | 45 | const _robots = `${index ? 'index' : 'noindex'} ${_follow ? 'follow' : 'nofollow'}`; |
| 46 | +
|
| 47 | +const mainNavigationItems = [ |
| 48 | + { href: '/', label: 'Home' }, |
| 49 | + { href: '/handboek/', label: 'Handboek' }, |
| 50 | + { href: '/richtlijnen/', label: 'Richtlijnen' }, |
| 51 | + { href: '/componenten/', label: 'Componenten' }, |
| 52 | + { href: '/voorbeelden/', label: 'Voorbeelden' }, |
| 53 | + { href: '/community/', label: 'Community' }, |
| 54 | + { href: '/project/', label: 'Project' }, |
| 55 | +]; |
| 56 | +
|
| 57 | +const footerNavigationItems = [ |
| 58 | + { href: '/blog/', label: 'Blog' }, |
| 59 | + { href: '/project/kernteam/', label: 'Contact' }, |
| 60 | + { href: '/toegankelijkheidsverklaring/', label: 'Toegankelijkheid' }, |
| 61 | + { href: '/privacyverklaring/', label: 'Privacyverklaring' }, |
| 62 | + { href: '/colofon/', label: 'Colofon' }, |
| 63 | + { href: '/github/', label: 'GitHub' }, |
| 64 | + { href: '/slack/', label: 'Slack' }, |
| 65 | + { href: '/figma/', label: 'Figma' }, |
| 66 | + { href: 'https://www.linkedin.com/company/nl-design-system/', label: 'LinkedIn', external: true }, |
| 67 | +]; |
38 | 68 | --- |
39 | 69 |
|
40 | 70 | <Root lang={lang} dir="ltr"> |
@@ -67,37 +97,48 @@ const _robots = `${index ? 'index' : 'noindex'} ${_follow ? 'follow' : 'nofollow |
67 | 97 | <slot name="head" /> |
68 | 98 | </head> |
69 | 99 |
|
70 | | - <Body> |
| 100 | + <body> |
71 | 101 | <SkipLink href="#main">Naar de inhoud</SkipLink> |
72 | 102 | <PageLayout> |
73 | | - <header> |
74 | | - TODO: PageHeader |
75 | | - <nav aria-labelledby="hoofdnavigatie-label"> |
76 | | - <h2 id="hoofdnavigatie-label">Hoofdmenu</h2> |
77 | | - TODO: Hoofd navigatie |
78 | | - </nav> |
79 | | - </header> |
80 | | - |
| 103 | + <PageHeader> |
| 104 | + <a href="/"><Logo /></a> |
| 105 | + </PageHeader> |
| 106 | + <NavBar aria-labelledby="hoofdnavigatie-label"> |
| 107 | + <h2 hidden id="hoofdnavigatie-label">Hoofdmenu</h2> |
| 108 | + <NavList> |
| 109 | + {mainNavigationItems.map(({ href, label }) => <NavListLink href={href}>{label}</NavListLink>)} |
| 110 | + </NavList> |
| 111 | + </NavBar> |
81 | 112 | <PageBody> |
82 | 113 | <nav aria-labelledby="breadcrumb-label"> |
83 | | - <h2 id="breadcrumb-label">Kruimelpad</h2> |
84 | | - TODO: Breadcrumb navigatie |
| 114 | + <h2 hidden id="breadcrumb-label">Kruimelpad</h2> |
| 115 | + <BreadcrumbNav> |
| 116 | + <BreadcrumbNavLink href="/">Home</BreadcrumbNavLink> |
| 117 | + <BreadcrumbNavSeparator><IconChevronRight /></BreadcrumbNavSeparator> |
| 118 | + <BreadcrumbNavLink href="#">{documentTitle}</BreadcrumbNavLink> |
| 119 | + </BreadcrumbNav> |
85 | 120 | </nav> |
86 | 121 |
|
87 | 122 | <main id="main"> |
88 | 123 | <slot /> |
89 | 124 | </main> |
90 | 125 | </PageBody> |
91 | 126 |
|
92 | | - <footer> |
93 | | - TODO: PageFooter |
| 127 | + <PageFooter> |
94 | 128 | <nav aria-labelledby="site-navigatie-label"> |
95 | | - <h2 id="site-navigatie-label">Submenu</h2> |
96 | | - TODO: Footer navigatie |
| 129 | + <h2 hidden id="site-navigatie-label">Submenu</h2> |
| 130 | + <LinkList> |
| 131 | + { |
| 132 | + footerNavigationItems.map(({ href, label }) => ( |
| 133 | + /* TODO: add `icon={<IconChevronLeft/>}` */ |
| 134 | + <LinkListLink href={href}>{label}</LinkListLink> |
| 135 | + )) |
| 136 | + } |
| 137 | + </LinkList> |
97 | 138 | </nav> |
98 | | - </footer> |
| 139 | + </PageFooter> |
99 | 140 | </PageLayout> |
100 | | - </Body> |
| 141 | + </body> |
101 | 142 | </Root> |
102 | 143 |
|
103 | 144 | <style is:global> |
|
0 commit comments