Skip to content

Commit c435267

Browse files
colepeterscolepeters
committed
Get cookin’!
1 parent 1eaf29d commit c435267

23 files changed

+563
-58
lines changed

‎app/api/cookbook/$$.mjs

+53-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,64 @@
1-
import navDataLoader from '../../docs/nav-data.mjs'
1+
/* eslint-disable filenames/match-regex */
2+
import { readFileSync } from 'fs'
3+
import { URL } from 'url'
4+
import { Arcdown } from 'arcdown'
5+
import arcStaticImg from 'markdown-it-arc-static-img'
6+
import navDataLoader, {
7+
other as otherLinks,
8+
} from '../../docs/nav-data.mjs'
9+
import HljsLineWrapper from '../../docs/hljs-line-wrapper.mjs'
210

3-
export async function get (req) {
4-
const { path: activePath } = req
11+
const arcdown = new Arcdown({
12+
pluginOverrides: {
13+
markdownItToc: {
14+
containerClass: 'toc mbe2 mis-2 leading2',
15+
listType: 'ul',
16+
level: [ 1, 2, 3 ],
17+
},
18+
},
19+
plugins: [ arcStaticImg ],
20+
hljs: {
21+
sublanguages: { javascript: [ 'xml', 'css' ] },
22+
plugins: [ new HljsLineWrapper({ className: 'code-line' }) ],
23+
},
24+
})
525

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'
26+
/** @type {import('@enhance/types').EnhanceApiFn} */
27+
export async function get (request) {
28+
const { path: activePath } = request
29+
let recipePath = activePath.replace(/^\/?docs\//, '') || 'index'
30+
31+
let recipeURL = new URL(`../../${recipePath}.md`, import.meta.url)
1032

1133
const navData = navDataLoader('docs', activePath)
1234

35+
let recipeMarkdown
36+
try {
37+
recipeMarkdown = readFileSync(recipeURL.pathname, 'utf-8')
38+
}
39+
catch (e) {
40+
return {
41+
location: '/404'
42+
}
43+
}
44+
45+
const recipe = await arcdown.render(recipeMarkdown)
46+
47+
const initialState = {
48+
recipe,
49+
otherLinks,
50+
navData,
51+
}
52+
53+
let cacheControl =
54+
process.env.ARC_ENV === 'production'
55+
? 'max-age=3600;'
56+
: 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
57+
1358
return {
1459
headers: {
1560
'cache-control': cacheControl,
1661
},
17-
json: {
18-
navData,
19-
},
62+
json: initialState,
2063
}
2164
}

‎app/api/cookbook/index.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/docs/md/patterns/building-for-the-browser.md ‎app/cookbook/build-for-the-browser.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Building for the browser
2+
title: Build for the browser
33
---
44

55
## The `@bundles` plugin

‎app/docs/md/patterns/architect-migration.md ‎app/cookbook/migrate-from-architect.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
---
2-
title: Architect Migration
3-
links:
4-
- "arc.codes": https://arc.codes
2+
title: Migrate from Architect
53
---
64

75
Enhance uses [Architect](https://arc.codes) under the hood for local development and deployment. It is possible to migrate between a typical Architect project structure and the Enhance file-based routing. It is also possible to mix the two approaches together in the same app. They are incrementally adoptable in both directions.

‎app/docs/md/patterns/rendering-markdown.md ‎app/cookbook/render-markdown.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
---
2-
title: Rendering Markdown
3-
links:
4-
- "Arcdown": https://github.com/architect/arcdown/blob/main/readme.md
2+
title: Render Markdown
53
---
64

75
Enhance can be used to render Markdown with minimal effort — in fact, this very site is itself an Enhance app that renders Markdown to HTML on demand. You can dig into the [source code](https://github.com/enhance-dev/enhance.dev) to see exactly how we've set it up, or follow along below.

‎app/cookbook/roll-your-own-auth.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Roll your own auth
3+
---
4+
5+
In this five part series on the Begin blog, you’ll learn what authentication is, how it works, and how to implement it yourself. We cover username and password flows, email and phone verification, using magic links, and interfacing with OAuth.
6+
7+
**[Get started on the Begin blog](https://begin.com/blog/posts/2023-05-10-why-you-should-roll-your-own-auth)!**

‎app/docs/md/patterns/event-listeners.md ‎app/cookbook/use-event-listeners.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Event Listeners
2+
title: Use event listeners
33
---
44

55
An event is a signal that something has happened on your page. The browser notifies you so you can react to them.

‎app/docs/md/patterns/form-validation.md ‎app/cookbook/validate-forms.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Form Validation
2+
title: Validate forms
33
---
44

55
HTML forms are very powerful on their own.

‎app/docs/md/patterns/testing/index.md ‎app/cookbook/write-unit-tests.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Testing
2+
title: Write unit tests
33
---
44

55
A big benefit of Enhance custom element [pure functions](https://en.wikipedia.org/wiki/Pure_function) is that they return a string that you can test against an expected output. It doesn't need to get any more complicated than that to get started.

‎app/elements/cookbook/article.mjs

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
export default function CookbookArticle ({ html }) {
2+
return html`
3+
<style>
4+
article,
5+
aside,
6+
hr {
7+
max-inline-size: 86ch;
8+
}
9+
10+
article > * + * {
11+
margin-block-end: var(--space-0);
12+
}
13+
14+
h2,
15+
h3,
16+
h4 {
17+
font-weight: 600;
18+
margin-block-end: var(--space--2);
19+
letter-spacing: -0.025em;
20+
}
21+
22+
h2 {
23+
margin-block-start: var(--space-2);
24+
font-size: var(--text-3);
25+
}
26+
27+
h3 {
28+
font-size: var(--text-2);
29+
}
30+
31+
h4 {
32+
font-size: var(--text-1);
33+
}
34+
35+
aside h1 {
36+
color: var(--dark-purple);
37+
}
38+
39+
a {
40+
text-decoration: underline;
41+
}
42+
43+
strong {
44+
font-weight: 650;
45+
color: var(--black-white);
46+
}
47+
48+
small {
49+
color: var(--inky-lily);
50+
}
51+
52+
ul li {
53+
list-style-position: inside;
54+
}
55+
56+
li > ul {
57+
padding-left: var(--space-0);
58+
}
59+
60+
ol {
61+
padding-left: var(--space-0);
62+
}
63+
64+
ol li {
65+
list-style-position: outside;
66+
}
67+
68+
dt {
69+
font-weight: 600;
70+
margin-block-end: var(--space-4);
71+
}
72+
73+
dd + dt {
74+
margin-block-start: var(--space-2);
75+
}
76+
77+
dd {
78+
border: 2px solid var(--cloud-ateneo);
79+
border-radius: 0.25rem;
80+
font-size: var(--text--1);
81+
padding-block: var(--space--1);
82+
padding-inline: var(--space-0);
83+
}
84+
85+
dd > *:not(:last-child) {
86+
margin-block-end: var(--space-0);
87+
}
88+
89+
table {
90+
width: 100%;
91+
border: 1px solid var(--cloud-ateneo);
92+
}
93+
94+
table thead th,
95+
table tfoot th {
96+
color: var(--inky-lily);
97+
background: var(--cloud-ateneo);
98+
}
99+
100+
table caption {
101+
padding: var(--space--2);
102+
}
103+
104+
table th,
105+
table td {
106+
padding: var(--space--2);
107+
border: 1px solid var(--cloud-ateneo);
108+
}
109+
110+
blockquote {
111+
padding-block: var(--space--1);
112+
padding-inline: var(--space-0);
113+
background-color: var(--cloud-ateneo);
114+
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;
115+
border-radius: 0.25rem;
116+
}
117+
118+
:not(pre) > code {
119+
padding: 0.1rem 0.2rem;
120+
line-height: 1rem;
121+
overflow-wrap: break-word;
122+
background-color: var(--cloud-ateneo);
123+
font-family: Menlo, Monaco, Consolas, monospace;
124+
border-radius: 0.25rem;
125+
}
126+
127+
:not(pre, dt) > code {
128+
font-size: 0.9375em; /* Fixed width fonts tend to have larger x height */
129+
}
130+
131+
blockquote :not(pre) > code {
132+
background-color: var(--smoke-denim);
133+
}
134+
135+
pre code {
136+
display: block;
137+
max-width: 100%;
138+
min-width: 100px;
139+
padding: var(--space-0);
140+
font-family: 'Roboto Mono', monospace;
141+
color: var(--hl-color);
142+
background-color: var(--cloud-ateneo);
143+
border-radius: 0.25rem;
144+
white-space: pre;
145+
tab-size: 2;
146+
-webkit-overflow-scrolling: touch;
147+
overflow-x: auto;
148+
}
149+
150+
pre button {
151+
display: none;
152+
position: absolute;
153+
top: 0.5rem;
154+
right: 0.5rem;
155+
width: 1rem;
156+
height: 1rem;
157+
opacity: 0.5;
158+
color: var(--inky-lily);
159+
}
160+
161+
pre:hover button {
162+
display: block;
163+
}
164+
165+
pre button:hover {
166+
opacity: 1;
167+
}
168+
169+
pre button svg {
170+
width: 1rem;
171+
height: 1rem;
172+
pointer-events: none;
173+
}
174+
175+
hr {
176+
border-color: var(--gray-200);
177+
}
178+
179+
.backButton,
180+
.linkButton {
181+
background-color: var(--cloud);
182+
border-radius: 99em;
183+
box-shadow: 0 4px 6px hsla(0deg 0% 0% / 0.125);
184+
color: var(--dark-purple);
185+
transition: color 0.15s linear;
186+
}
187+
188+
.backButton:hover,
189+
.linkButton:hover {
190+
color: var(--magenta);
191+
}
192+
193+
.backButton svg {
194+
transition: translate 0.15s ease-in-out;
195+
}
196+
197+
.backButton:hover svg,
198+
.backButton:focus svg {
199+
translate: -0.25em 0;
200+
}
201+
</style>
202+
<article class="leading4 mi-auto pbe4">
203+
<a class="backButton inline-flex align-items-center pis0 pie2 pb-2 mbs4 font-semibold no-underline" href="/cookbook/">
204+
<svg class="inline-block mie-6" width="16px" height="16px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
205+
More recipes
206+
</a>
207+
<slot></slot>
208+
</article>
209+
210+
<hr class="mbs4 pbs4 border-bs1 border-solid mi-auto" />
211+
212+
<aside class="mi-auto leading4 mbe6">
213+
<h1 class="text3 leading1 tracking-1 font-bold mbe2">Find more recipes in the Enhance Cookbook!</h1>
214+
<p class="text1 mbe4">Learning new things can be fun — but also challenging. The Enhance Cookbook is here to show you around the kitchen and help you get your hands dirty.</p>
215+
216+
<a class="linkButton pi2 pb0 font-semibold no-underline" href="/cookbook/">
217+
Explore the Cookbook!
218+
</a>
219+
</aside>
220+
`
221+
}

0 commit comments

Comments
 (0)