Skip to content

Commit 1eaf29d

Browse files
colepeterscolepeters
committed
Centralize site header; add cookbook route
1 parent 9f15e40 commit 1eaf29d

File tree

10 files changed

+106
-64
lines changed

10 files changed

+106
-64
lines changed

‎app/api/cookbook.mjs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export async function get () {
2+
return {
3+
statusCode: 301,
4+
location: '/cookbook/',
5+
}
6+
}

‎app/api/cookbook/$$.mjs

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import navDataLoader from '../../docs/nav-data.mjs'
2+
3+
export async function get (req) {
4+
const { path: activePath } = req
5+
6+
const cacheControl =
7+
process.env.ARC_ENV === 'production'
8+
? 'max-age=3600'
9+
: 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
10+
11+
const navData = navDataLoader('docs', activePath)
12+
13+
return {
14+
headers: {
15+
'cache-control': cacheControl,
16+
},
17+
json: {
18+
navData,
19+
},
20+
}
21+
}

‎app/elements/product-nav.mjs

+5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ export default function ProductNav ({ html }) {
1010
<a href="/why-enhance">Why Enhance?</a>
1111
</h2>
1212
</masthead-slice>
13+
<masthead-slice>
14+
<h2 class="semibold">
15+
<a href="/wasm">Enhance WASM</a>
16+
</h2>
17+
</masthead-slice>
1318
<masthead-slice>
1419
<h2 class="semibold">
1520
<a href="/docs">Docs</a>

‎app/elements/site-header.mjs

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
export default function SiteHeader ({ html, state }) {
2+
const { attrs } = state
3+
const { active = '' } = attrs
4+
5+
const checkActive = href => active === href ? 'active' : ''
6+
7+
const productPageLabels = {
8+
'/': 'Home',
9+
'/docs': 'Docs',
10+
'/resources': 'Resources',
11+
'/wasm': 'WASM',
12+
'/why-enhance': 'Why Enhance',
13+
}
14+
15+
return html`
16+
<style scope="global">
17+
body {
18+
margin-block-start: var(--masthead-max-height);
19+
}
20+
21+
/* Allow masthead to set its own link colours */
22+
begin-masthead a {
23+
color: unset;
24+
}
25+
</style>
26+
27+
<begin-masthead product="Enhance" active="products" breakpoint="56em">
28+
<span slot="product-page">${productPageLabels[active]}</span>
29+
<product-nav slot="product-nav"></product-nav>
30+
<div slot="product-nav-lg" class="flex align-items-center">
31+
<masthead-product-link
32+
href="/"
33+
${checkActive('/')}
34+
>
35+
Home
36+
</masthead-product-link>
37+
38+
<masthead-product-link
39+
href="/docs"
40+
${checkActive('/docs')}
41+
>
42+
Docs
43+
</masthead-product-link>
44+
45+
<masthead-product-link
46+
href="/cookbook"
47+
${checkActive('/cookbook')}
48+
>
49+
Cookbook
50+
</masthead-product-link>
51+
52+
<masthead-product-link
53+
href="/wasm"
54+
${checkActive('/wasm')}
55+
>
56+
Enhance WASM
57+
</masthead-product-link>
58+
59+
<masthead-product-link
60+
href="/why-enhance"
61+
${checkActive('/why-enhance')}
62+
>
63+
Why Enhance?
64+
</masthead-product-link>
65+
</div>
66+
</begin-masthead>
67+
`
68+
}

‎app/pages/cookbook/$$.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<site-header active="/cookbook"></site-header>
2+

‎app/pages/docs/$$.html

+1-29
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,2 @@
1-
<style scope="global">
2-
body {
3-
margin-block-start: var(--masthead-max-height);
4-
}
5-
6-
@media screen and (min-width: 56em) {
7-
body {
8-
margin: 0;
9-
}
10-
}
11-
12-
/* Allow masthead to set its own link colours */
13-
begin-masthead a {
14-
color: unset;
15-
}
16-
</style>
17-
18-
<begin-masthead product="Enhance" active="products" breakpoint="56em">
19-
<span slot="product-page">Docs</span>
20-
<product-nav slot="product-nav"></product-nav>
21-
<div slot="product-nav-lg" class="flex align-items-center">
22-
<masthead-product-link href="/">Home</masthead-product-link>
23-
<masthead-product-link href="/docs" active>Docs</masthead-product-link>
24-
<masthead-product-link href="/wasm">Enhance WASM</masthead-product-link>
25-
<masthead-product-link href="/why-enhance">
26-
Why Enhance?
27-
</masthead-product-link>
28-
</div>
29-
</begin-masthead>
1+
<site-header active="/docs"></site-header>
302
<docs-layout></docs-layout>

‎app/pages/index.html

+1-13
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131

3232
body {
3333
background: white;
34-
margin-block-start: var(--masthead-max-height);
3534
}
3635

3736
body > *:not(begin-masthead) {
@@ -105,18 +104,7 @@
105104

106105
<docs-symbols></docs-symbols>
107106

108-
<begin-masthead product="Enhance" active="products" breakpoint="56em">
109-
<span slot="product-page">Home</span>
110-
<product-nav slot="product-nav"></product-nav>
111-
<div slot="product-nav-lg" class="flex align-items-center">
112-
<masthead-product-link active href="/">Home</masthead-product-link>
113-
<masthead-product-link href="/docs">Docs</masthead-product-link>
114-
<masthead-product-link href="/wasm">Enhance WASM</masthead-product-link>
115-
<masthead-product-link href="/why-enhance">
116-
Why Enhance?
117-
</masthead-product-link>
118-
</div>
119-
</begin-masthead>
107+
<site-header active="/"></site-header>
120108

121109
<landing-intro class='block relative'></landing-intro>
122110

‎app/pages/showcase.html

+1-9
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,7 @@
4343

4444
<docs-symbols></docs-symbols>
4545

46-
<begin-masthead active="showcase" breakpoint="56em">
47-
<div slot="product-nav-lg" class="flex align-items-center">
48-
<masthead-product-link href="/">Home</masthead-product-link>
49-
<masthead-product-link href="/docs">Docs</masthead-product-link>
50-
<masthead-product-link href="/why-enhance">
51-
Why Enhance?
52-
</masthead-product-link>
53-
</div>
54-
</begin-masthead>
46+
<begin-masthead active="showcase" breakpoint="56em"></begin-masthead>
5547

5648
<main class='leading4'>
5749
<header id='showcase-header' class='relative mi-auto'>

‎app/pages/wasm.html

+1-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
<style scope="global">
22
body {
33
background: white;
4-
margin-block-start: var(--masthead-max-height);
54
}
65
</style>
76

8-
<begin-masthead product="Enhance" active="products" breakpoint="56em">
9-
<span slot="product-page">Enhance WASM</span>
10-
<product-nav slot="product-nav"></product-nav>
11-
<div slot="product-nav-lg" class="flex align-items-center">
12-
<masthead-product-link href="/">Home</masthead-product-link>
13-
<masthead-product-link href="/docs">Docs</masthead-product-link>
14-
<masthead-product-link active href="/wasm">Enhance WASM</masthead-product-link>
15-
<masthead-product-link href="/why-enhance">Why Enhance?</masthead-product-link>
16-
</div>
17-
</begin-masthead>
18-
7+
<site-header active="/wasm"></site-header>
198
<wasm-sky class="text0 leading4">
209
<wasm-heading slot="heading"></wasm-heading>
2110
<div slot="body">

‎app/pages/why-enhance.html

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<style scope='global'>
22
body {
33
background: white;
4-
margin-block-start: var(--masthead-max-height);
54
}
65

76
main {

0 commit comments

Comments
 (0)