Skip to content

Commit 4e3629f

Browse files
petergoespetergoes
committed
feat: add detail layout
1 parent f2d0cf2 commit 4e3629f

File tree

4 files changed

+150
-15
lines changed

4 files changed

+150
-15
lines changed

‎packages/website/src/layouts/detail.astro‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
---
2+
import Document, { type Props as DocumentProps } from './document.astro';
3+
import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator } from '@components/breadcrumb-nav/breadcrumb-nav';
4+
import { IconChevronRight } from '@tabler/icons-react';
5+
import TableOfContents from '@components/table-of-content/table-of-content.astro';
6+
7+
export type Props = DocumentProps;
8+
9+
const { ...props } = Astro.props;
10+
---
11+
12+
<Document {...props}>
13+
<div class="ma-layout-detail">
14+
<div class="ma-layout-detail__content">
15+
<div class="ma-layout-detail__side-bar">TODO: site menu</div>
16+
17+
<nav class="ma-layout-detail__breadcrumbs" aria-labelledby="breadcrumb-label">
18+
<h2 hidden id="breadcrumb-label">Kruimelpad</h2>
19+
<BreadcrumbNav>
20+
<BreadcrumbNavLink href="/">Home</BreadcrumbNavLink>
21+
<BreadcrumbNavSeparator>
22+
<IconChevronRight />
23+
</BreadcrumbNavSeparator>
24+
<BreadcrumbNavLink href="#">{props.title}</BreadcrumbNavLink>
25+
</BreadcrumbNav>
26+
</nav>
27+
28+
<main id="main" class="ma-layout-detail__main">
29+
<header class="ma-layout-detail__header"><slot name="header" /></header>
30+
31+
<aside class="ma-layout-detail__anchor-nav">
32+
<TableOfContents />
33+
</aside>
34+
35+
<div class="ma-layout-detail__main-content">
36+
<slot />
37+
</div>
38+
</main>
39+
</div>
40+
</div>
41+
</Document>
42+
43+
<style>
44+
.ma-layout-detail {
45+
container: ma-layout-detail / inline-size;
46+
width: 100%;
47+
}
48+
49+
.ma-layout-detail__content {
50+
display: grid;
51+
grid-template-columns: var(--basis-space-inline-2xl) 1fr var(--basis-space-inline-2xl);
52+
grid-template-areas:
53+
'. site-nav .'
54+
'. breadcrumbs .'
55+
'. header .'
56+
'. anchor-nav .'
57+
'. content .';
58+
inline-size: 100%;
59+
}
60+
61+
.ma-layout-detail__side-bar {
62+
grid-area: site-nav;
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
}
67+
68+
.ma-layout-detail__breadcrumbs {
69+
grid-area: breadcrumbs;
70+
}
71+
72+
.ma-layout-detail__header {
73+
grid-area: header;
74+
}
75+
76+
.ma-layout-detail__anchor-nav {
77+
grid-area: anchor-nav;
78+
}
79+
80+
.ma-layout-detail__main {
81+
display: contents;
82+
}
83+
84+
.ma-layout-detail__main-content {
85+
grid-area: content;
86+
}
87+
88+
@container ma-layout-detail (width >= 768px) {
89+
.ma-layout-detail__content {
90+
grid-template-columns: var(--basis-space-inline-2xl) minmax(220px, var(--basis-page-max-inline-size)) var(
91+
--basis-space-inline-2xl
92+
);
93+
grid-template-rows: auto auto auto 1fr;
94+
grid-template-areas:
95+
'. breadcrumbs .'
96+
'. header .'
97+
'. anchor-nav .'
98+
'. content . ';
99+
}
100+
}
101+
102+
@container ma-layout-detail (width >= 1140px) {
103+
.ma-layout-detail__side-bar {
104+
position: relative;
105+
}
106+
.ma-layout-detail__content {
107+
grid-template-columns:
108+
minmax(100px, 300px) var(--basis-space-inline-2xl) minmax(220px, var(--basis-page-max-inline-size))
109+
var(--basis-space-inline-2xl);
110+
grid-template-rows: auto auto auto 1fr;
111+
grid-template-areas:
112+
'site-nav . breadcrumbs . '
113+
'site-nav . header . '
114+
'site-nav . anchor-nav . '
115+
'site-nav . content . ';
116+
}
117+
}
118+
119+
@container ma-layout-detail (width >= 1500px) {
120+
.ma-layout-detail__anchor-nav > :global(*) {
121+
position: sticky;
122+
top: 0px;
123+
}
124+
.ma-layout-detail__content {
125+
grid-template-columns:
126+
minmax(100px, 300px) var(--basis-space-inline-2xl) 1fr minmax(220px, var(--basis-page-max-inline-size))
127+
var(--basis-space-inline-2xl) minmax(100px, 300px) 1fr;
128+
grid-template-rows: auto auto 1fr;
129+
grid-template-areas:
130+
'site-nav . . breadcrumbs . anchor-nav .'
131+
'site-nav . . header . anchor-nav .'
132+
'site-nav . . content . anchor-nav . ';
133+
}
134+
}
135+
</style>

‎packages/website/src/pages/[...component].astro‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
import { getCollection } from 'astro:content';
33
import { render } from 'astro:content';
4-
import Document from '@layouts/document.astro';
4+
import DetailLayout from '@layouts/detail.astro';
5+
import OverviewLayout from '@layouts/overview.astro';
56
import { MDXComponents } from '@utils/mdx-components.astro';
6-
import TableOfContents from '@components/table-of-content/table-of-content.astro';
77
88
export async function getStaticPaths() {
99
const components = await getCollection('components');
@@ -19,9 +19,11 @@ const { Content } = await render(page);
1919
2020
const description =
2121
page.data.title && page.data.description ? `${page.data.title}: ${page.data.description}` : page.data.description;
22+
23+
const Layout = page.data?.page_layout === 'overview' ? OverviewLayout : DetailLayout;
2224
---
2325

24-
<Document
26+
<Layout
2527
title={page.data.title}
2628
titleSm={page.data.title_sm}
2729
description={description}
@@ -31,6 +33,8 @@ const description =
3133
keywords={['component', page.data.title?.toLowerCase() || '', ...(page.data.keywords || [])]}
3234
index={page.data.unlisted !== true}
3335
>
34-
<TableOfContents />
36+
<h1 slot="header">{page.data.title}</h1>
37+
<p slot="header">{page.data.description}</p>
38+
3539
<Content components={MDXComponents} />
36-
</Document>
40+
</Layout>

‎packages/website/src/pages/[...slug].astro‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
22
import { getCollection } from 'astro:content';
33
import { render } from 'astro:content';
4-
import Document from '@layouts/document.astro';
4+
import DetailLayout from '@layouts/detail.astro';
55
import { MDXComponents } from '@utils/mdx-components.astro';
6-
import TableOfContents from '@components/table-of-content/table-of-content.astro';
76
87
export async function getStaticPaths() {
98
const docs = await getCollection('docs');
@@ -18,7 +17,7 @@ const { page } = Astro.props;
1817
const { Content } = await render(page);
1918
---
2019

21-
<Document
20+
<DetailLayout
2221
title={page.data.title}
2322
titleSm={page.data.title_sm}
2423
description={page.data.description}
@@ -28,6 +27,5 @@ const { Content } = await render(page);
2827
keywords={page.data.keywords}
2928
index={page.data.unlisted !== true}
3029
>
31-
<TableOfContents />
3230
<Content components={MDXComponents} />
33-
</Document>
31+
</DetailLayout>

‎packages/website/src/pages/[...wcag].astro‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
22
import { getCollection } from 'astro:content';
33
import { render } from 'astro:content';
4-
import Document from '@layouts/document.astro';
4+
import DetailLayout from '@layouts/detail.astro';
55
import { MDXComponents } from '@utils/mdx-components.astro';
6-
import TableOfContents from '@components/table-of-content/table-of-content.astro';
76
87
export async function getStaticPaths() {
98
const wcag = await getCollection('wcag');
@@ -21,7 +20,7 @@ const description =
2120
page.data.title && page.data.description ? `${page.data.title}: ${page.data.description}` : page.data.description;
2221
---
2322

24-
<Document
23+
<DetailLayout
2524
title={page.data.title}
2625
titleSm={page.data.title_sm}
2726
description={description}
@@ -31,6 +30,5 @@ const description =
3130
keywords={['wcag', page.data.title?.toLowerCase() || '', ...(page.data.keywords || [])]}
3231
index={page.data.unlisted !== true}
3332
>
34-
<TableOfContents />
3533
<Content components={MDXComponents} />
36-
</Document>
34+
</DetailLayout>

0 commit comments

Comments
 (0)
⚡