Get cookin’!

app/api/cookbook/$$.mjs

@@ -1,21 +1,64 @@
-import navDataLoader from '../../docs/nav-data.mjs'
+/* eslint-disable filenames/match-regex */
+import { readFileSync } from 'fs'
+import { URL } from 'url'
+import { Arcdown } from 'arcdown'
+import arcStaticImg from 'markdown-it-arc-static-img'
+import navDataLoader, {
+  other as otherLinks,
+} from '../../docs/nav-data.mjs'
+import HljsLineWrapper from '../../docs/hljs-line-wrapper.mjs'
 
-export async function get (req) {
-  const { path: activePath } = req
+const arcdown = new Arcdown({
+  pluginOverrides: {
+    markdownItToc: {
+      containerClass: 'toc mbe2 mis-2 leading2',
+      listType: 'ul',
+      level: [ 1, 2, 3 ],
+    },
+  },
+  plugins: [ arcStaticImg ],
+  hljs: {
+    sublanguages: { javascript: [ 'xml', 'css' ] },
+    plugins: [ new HljsLineWrapper({ className: 'code-line' }) ],
+  },
+})
 
-  const cacheControl =
-    process.env.ARC_ENV === 'production'
-      ? 'max-age=3600'
-      : 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
+/** @type {import('@enhance/types').EnhanceApiFn} */
+export async function get (request) {
+  const { path: activePath } = request
+  let recipePath = activePath.replace(/^\/?docs\//, '') || 'index'
+
+  let recipeURL = new URL(`../../${recipePath}.md`, import.meta.url)
 
   const navData = navDataLoader('docs', activePath)
 
+  let recipeMarkdown
+  try {
+    recipeMarkdown = readFileSync(recipeURL.pathname, 'utf-8')
+  }
+  catch (e) {
+    return {
+      location: '/404'
+    }
+  }
+
+  const recipe = await arcdown.render(recipeMarkdown)
+
+  const initialState = {
+    recipe,
+    otherLinks,
+    navData,
+  }
+
+  let cacheControl =
+    process.env.ARC_ENV === 'production'
+      ? 'max-age=3600;'
+      : 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
+
   return {
     headers: {
       'cache-control': cacheControl,
     },
-    json: {
-      navData,
-    },
+    json: initialState,
   }
 }

app/api/cookbook/index.mjs

@@ -0,0 +1,21 @@
+import navDataLoader from '../../docs/nav-data.mjs'
+
+export async function get (req) {
+  const { path: activePath } = req
+
+  const cacheControl =
+    process.env.ARC_ENV === 'production'
+      ? 'max-age=3600'
+      : 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
+
+  const navData = navDataLoader('docs', activePath)
+
+  return {
+    headers: {
+      'cache-control': cacheControl,
+    },
+    json: {
+      navData,
+    },
+  }
+}

app/docs/md/patterns/building-for-the-browser.md → app/cookbook/build-for-the-browser.md

@@ -1,5 +1,5 @@
 ---
-title: Building for the browser
+title: Build for the browser
 ---
 
 ## The `@bundles` plugin

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

@@ -1,7 +1,5 @@
 ---
-title: Architect Migration
-links:
-  - "arc.codes": https://arc.codes
+title: Migrate from Architect
 ---
 
 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,7 +1,5 @@
 ---
-title: Rendering Markdown
-links:
-  - "Arcdown": https://github.com/architect/arcdown/blob/main/readme.md
+title: Render Markdown
 ---
 
 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

@@ -0,0 +1,7 @@
+---
+title: Roll your own auth
+---
+
+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.
+
+**[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,5 +1,5 @@
 ---
-title: Event Listeners
+title: Use event listeners
 ---
 
 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,5 +1,5 @@
 ---
-title: Form Validation
+title: Validate forms
 ---
 
 HTML forms are very powerful on their own.

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

@@ -1,5 +1,5 @@
 ---
-title: Testing
+title: Write unit tests
 ---
 
 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

@@ -0,0 +1,221 @@
+export default function CookbookArticle ({ html }) {
+  return html`
+    <style>
+      article,
+      aside,
+      hr {
+        max-inline-size: 86ch;
+      }
+      
+      article > * + * {
+        margin-block-end: var(--space-0);
+      }
+
+      h2,
+      h3,
+      h4 {
+        font-weight: 600;
+        margin-block-end: var(--space--2);
+        letter-spacing: -0.025em;
+      }
+
+      h2 {
+        margin-block-start: var(--space-2);
+        font-size: var(--text-3);
+      }
+
+      h3 {
+        font-size: var(--text-2);
+      }
+
+      h4 {
+        font-size: var(--text-1);
+      }
+
+      aside h1 {
+        color: var(--dark-purple);
+      }
+
+      a {
+        text-decoration: underline;
+      }
+
+      strong {
+        font-weight: 650;
+        color: var(--black-white);
+      }
+
+      small {
+        color: var(--inky-lily);
+      }
+
+      ul li {
+        list-style-position: inside;
+      }
+
+      li > ul {
+        padding-left: var(--space-0);
+      }
+
+      ol {
+        padding-left: var(--space-0);
+      }
+
+      ol li {
+        list-style-position: outside;
+      }
+
+      dt {
+        font-weight: 600;
+        margin-block-end: var(--space-4);
+      }
+
+      dd + dt {
+        margin-block-start: var(--space-2);
+      }
+
+      dd {
+        border: 2px solid var(--cloud-ateneo);
+        border-radius: 0.25rem;
+        font-size: var(--text--1);
+        padding-block: var(--space--1);
+        padding-inline: var(--space-0);
+      }
+
+      dd > *:not(:last-child) {
+        margin-block-end: var(--space-0);
+      }
+
+      table {
+        width: 100%;
+        border: 1px solid var(--cloud-ateneo);
+      }
+
+      table thead th,
+      table tfoot th {
+        color: var(--inky-lily);
+        background: var(--cloud-ateneo);
+      }
+
+      table caption {
+        padding: var(--space--2);
+      }
+
+      table th,
+      table td {
+        padding: var(--space--2);
+        border: 1px solid var(--cloud-ateneo);
+      }
+
+      blockquote {
+        padding-block: var(--space--1);
+        padding-inline: var(--space-0);
+        background-color: var(--cloud-ateneo);
+        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;
+        border-radius: 0.25rem;
+      }
+
+      :not(pre) > code {
+        padding: 0.1rem 0.2rem;
+        line-height: 1rem;
+        overflow-wrap: break-word;
+        background-color: var(--cloud-ateneo);
+        font-family: Menlo, Monaco, Consolas, monospace;
+        border-radius: 0.25rem;
+      }
+
+      :not(pre, dt) > code {
+        font-size: 0.9375em; /* Fixed width fonts tend to have larger x height */
+      }
+
+      blockquote :not(pre) > code {
+        background-color: var(--smoke-denim);
+      }
+
+      pre code {
+        display: block;
+        max-width: 100%;
+        min-width: 100px;
+        padding: var(--space-0);
+        font-family: 'Roboto Mono', monospace;
+        color: var(--hl-color);
+        background-color: var(--cloud-ateneo);
+        border-radius: 0.25rem;
+        white-space: pre;
+        tab-size: 2;
+        -webkit-overflow-scrolling: touch;
+        overflow-x: auto;
+      }
+
+      pre button {
+        display: none;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 1rem;
+        height: 1rem;
+        opacity: 0.5;
+        color: var(--inky-lily);
+      }
+
+      pre:hover button {
+        display: block;
+      }
+
+      pre button:hover {
+        opacity: 1;
+      }
+
+      pre button svg {
+        width: 1rem;
+        height: 1rem;
+        pointer-events: none;
+      }
+
+      hr {
+        border-color: var(--gray-200);
+      }
+
+      .backButton,
+      .linkButton {
+        background-color: var(--cloud);
+        border-radius: 99em;
+        box-shadow: 0 4px 6px hsla(0deg 0% 0% / 0.125);
+        color: var(--dark-purple);
+        transition: color 0.15s linear;
+      }
+
+      .backButton:hover,
+      .linkButton:hover {
+        color: var(--magenta);
+      }
+
+      .backButton svg {
+        transition: translate 0.15s ease-in-out;
+      }
+
+      .backButton:hover svg,
+      .backButton:focus svg {
+        translate: -0.25em 0;
+      }
+    </style>
+    <article class="leading4 mi-auto pbe4">
+      <a class="backButton inline-flex align-items-center pis0 pie2 pb-2 mbs4 font-semibold no-underline" href="/cookbook/">
+        <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>
+        More recipes
+      </a>
+      <slot></slot>
+    </article>
+
+    <hr class="mbs4 pbs4 border-bs1 border-solid mi-auto" />
+
+    <aside class="mi-auto leading4 mbe6">
+      <h1 class="text3 leading1 tracking-1 font-bold mbe2">Find more recipes in the Enhance Cookbook!</h1>
+      <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>
+
+      <a class="linkButton pi2 pb0 font-semibold no-underline" href="/cookbook/">
+        Explore the Cookbook!
+      </a>
+    </aside>
+  `
+}