Add Enhance WASM landing

app/api/$$.mjs

@@ -1,10 +1,10 @@
 import { checkRedirects } from '../lib/marketing-redirects.mjs'
 
-async function catchAll() {
+async function catchAll () {
   return {
     statusCode: 302,
     location: '/404',
   }
 }
 
-export const get = [checkRedirects, catchAll]
+export const get = [ checkRedirects, catchAll ]

app/api/cta/$event.mjs

@@ -1,7 +1,7 @@
 import QRCode from 'qrcode'
 import data from '@begin/data'
 
-export async function get(req) {
+export async function get (req) {
   const { event } = req.pathParameters
   const dataUrl = await QRCode.toDataURL(`https://enhance.dev/cta/${event}`)
   const gacode =

app/api/cta/views.mjs

@@ -1,6 +1,6 @@
 import data from '@begin/data'
 
-export async function get() {
+export async function get () {
   let views = await data.get({
     table: 'views',
     key: 'cta',

app/api/discord.mjs

@@ -1,4 +1,4 @@
-export async function get() {
+export async function get () {
   return {
     statusCode: 302,
     location: 'https://discord.gg/J8bUSfKs8W',

app/api/docs.mjs

@@ -1,4 +1,4 @@
-export async function get() {
+export async function get () {
   return {
     statusCode: 301,
     location: '/docs/',

app/api/docs/$$.mjs

@@ -15,18 +15,18 @@ const arcdown = new Arcdown({
     markdownItToc: {
       containerClass: 'toc mbe2 mis-2 leading2',
       listType: 'ul',
-      level: [1, 2, 3],
+      level: [ 1, 2, 3 ],
     },
   },
-  plugins: [arcStaticImg],
+  plugins: [ arcStaticImg ],
   hljs: {
-    sublanguages: { javascript: ['xml', 'css'] },
-    plugins: [new HljsLineWrapper({ className: 'code-line' })],
+    sublanguages: { javascript: [ 'xml', 'css' ] },
+    plugins: [ new HljsLineWrapper({ className: 'code-line' }) ],
   },
 })
 
 /** @type {import('@enhance/types').EnhanceApiFn} */
-export async function get(request) {
+export async function get (request) {
   const { path: activePath } = request
   let docPath = activePath.replace(/^\/?docs\//, '') || 'index'
 
@@ -61,7 +61,8 @@ export async function get(request) {
   let docMarkdown
   try {
     docMarkdown = readFileSync(docURL.pathname, 'utf-8')
-  } catch (_err) {
+  }
+  catch (_err) {
     let searchTerm = null
     if (!docPath.endsWith('/index')) {
       const docPathParts = docPath.split('/')

app/api/email/interest/add.mjs

@@ -1,7 +1,7 @@
 import data from '@begin/data'
 
 /** @type {import('@enhance/types').EnhanceApiFn} */
-export async function post(req) {
+export async function post (req) {
   const email = req.body.email
   const timestamp = new Date(Date.now()).toISOString()
   await data.set({ table: 'email', email, timestamp })

app/api/index.mjs

@@ -1,7 +1,7 @@
 import navDataLoader from '../docs/nav-data.mjs'
 
 /** @type {import('@enhance/types').EnhanceApiFn} */
-export async function get({ query }) {
+export async function get ({ query }) {
   const { thanks } = query
 
   const cacheControl =

app/api/wasm.mjs

@@ -0,0 +1,23 @@
+import navDataLoader from '../docs/nav-data.mjs'
+
+/** @type {import('@enhance/types').EnhanceApiFn} */
+export async function get ({ query }) {
+  const { thanks } = query
+
+  const cacheControl =
+    process.env.ARC_ENV === 'production'
+      ? 'max-age=86400'
+      : 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
+
+  const navData = navDataLoader('docs', '/wasm')
+
+  return {
+    headers: {
+      'cache-control': cacheControl,
+    },
+    json: {
+      thanks,
+      navData,
+    },
+  }
+}

app/api/why-enhance.mjs

@@ -1,6 +1,6 @@
 import navDataLoader from '../docs/nav-data.mjs'
 
-export async function get() {
+export async function get () {
   const navData = navDataLoader('docs', '/why-enhance')
 
   const cacheControl =

app/docs/hljs-line-wrapper.mjs

@@ -1,11 +1,11 @@
 /* eslint-disable fp/no-class */
 
 export default class {
-  constructor(options) {
+  constructor (options) {
     this.className = options.className
   }
 
-  'after:highlight'(result) {
+  'after:highlight' (result) {
     const tokens = []
 
     const safelyTagged = result.value.replace(
@@ -17,7 +17,8 @@ export default class {
 
         if (match === '</span>') {
           tokens.pop()
-        } else {
+        }
+        else {
           tokens.push(match)
         }
 

app/docs/nav-data.mjs

@@ -59,7 +59,7 @@ export const data = [
         path: '/docs/routing/api-routes/',
         label: 'API Routes',
         hasChildren: true,
-        items: ['middleware', 'tutorial'],
+        items: [ 'middleware', 'tutorial' ],
       },
     ],
   },
@@ -76,7 +76,7 @@ export const data = [
         path: '/docs/elements/html/',
         label: 'HTML',
         hasChildren: true,
-        items: ['slots'],
+        items: [ 'slots' ],
       },
       {
         slug: 'state',
@@ -114,15 +114,15 @@ export const data = [
         slug: 'alternatives',
         path: '/docs/enhance-styles/alternatives/',
         hasChildren: true,
-        items: ['tailwind', 'sass'],
+        items: [ 'tailwind', 'sass' ],
       },
     ],
   },
   {
     type: TYPE.category,
     label: 'Enhance UI',
     slug: 'enhance-ui',
-    items: [{ slug: 'image', label: 'Image (beta)' }],
+    items: [ { slug: 'image', label: 'Image (beta)' } ],
   },
   {
     type: TYPE.category,
@@ -143,7 +143,7 @@ export const data = [
         slug: 'testing',
         path: '/docs/patterns/testing/',
         hasChildren: true,
-        items: [{ slug: 'webdriverio', label: 'WebdriverIO' }],
+        items: [ { slug: 'webdriverio', label: 'WebdriverIO' } ],
       },
       'architect-migration',
     ],
@@ -215,13 +215,13 @@ export const other = {
   },
 }
 
-export function unslug(string) {
+export function unslug (string) {
   return string
     .replace(/-/g, ' ')
     .replace(/(^\w{1})|(\s+\w{1})/g, (l) => l.toUpperCase())
 }
 
-function parseItems(items, root, activePath) {
+function parseItems (items, root, activePath) {
   const parsedItems = items.map((item) => {
     if (typeof item === 'string') {
       // create full item from shorthand item
@@ -231,7 +231,8 @@ function parseItems(items, root, activePath) {
         path: `/${root}/${item}`,
         label: unslug(item),
       }
-    } else {
+    }
+    else {
       if (!item.type) {
         item.type = 'doc'
       }
@@ -252,7 +253,7 @@ function parseItems(items, root, activePath) {
     return item
   })
 
-  function testForActive(i) {
+  function testForActive (i) {
     return i.active || i.items?.some(testForActive)
   }
 

app/elements/app-wrap.mjs

@@ -1,4 +1,4 @@
-export default function AppWrap({ html, state = {} }) {
+export default function AppWrap ({ html, state = {} }) {
   // const modals = Array(Math.parseInt(state.attrs?.quantity || 1)).fill(0)
   // space or comma separated values for modal names "one,two three"
   const modals = state?.attrs?.modals?.split(/[\s*,?\s*]/) || []
@@ -60,8 +60,8 @@ export default function AppWrap({ html, state = {} }) {
 
 
       ${modals
-        .map(
-          (modalName) => /* css*/ `
+    .map(
+      (modalName) => /* css*/ `
             /* Hide main content when modal opens. Hidden from screen readers and traps focus */
             :host
               > input[name='group-click-${modalName}']:not(:checked)
@@ -81,12 +81,12 @@ export default function AppWrap({ html, state = {} }) {
               display: block;
             }
           `
-        )
-        .join('\n')}
+    )
+    .join('\n')}
     </style>
     ${modals
-      .map(
-        (modalName) => /* html*/ `
+    .map(
+      (modalName) => /* html*/ `
             <input
               tabindex="-1"
               aria-hidden="true"
@@ -102,13 +102,13 @@ export default function AppWrap({ html, state = {} }) {
               name="group-key-${modalName}"
               type="radio" />
           `
-      )
-      .join('')}
+    )
+    .join('')}
 
     <slot name="main"></slot>
     ${modals
-      .map(
-        (modalName) => /* html*/ `
+    .map(
+      (modalName) => /* html*/ `
             <div class="modal-container" id="modal-container-${modalName}">
               <button
                 class="overlay"
@@ -131,8 +131,8 @@ export default function AppWrap({ html, state = {} }) {
             </div>
           <form id="modal-form-${modalName}"></form>
           `
-      )
-      .join('')}
+    )
+    .join('')}
     <script>
       // TODO: set aria-hidden on main
       // TODO: change main to inert and not display none when dialog open

app/elements/axol-wink.mjs

@@ -1,4 +1,4 @@
-export default function AxolWink({ html }) {
+export default function AxolWink ({ html }) {
   return html`
     <style>
       :host {

app/elements/begin-logo.mjs

@@ -1,4 +1,4 @@
-export default function BeginLogo({ html }) {
+export default function BeginLogo ({ html }) {
   return html`
     <svg
       width="16"

app/elements/cherub-head.mjs

@@ -1,4 +1,4 @@
-export default function CherubHead({ html }) {
+export default function CherubHead ({ html }) {
   return html`
     <style>
       :host {

app/elements/cherub-mascot.mjs

@@ -1,4 +1,4 @@
-export default function CherubMascot({ html }) {
+export default function CherubMascot ({ html }) {
   return html`
     <style>
       :host {

app/elements/cta-qrcode.mjs

@@ -1,4 +1,4 @@
-export default function CtaQrcode({ html, state }) {
+export default function CtaQrcode ({ html, state }) {
   const { store } = state
   const { dataUrl } = store
   return html`<img src="${dataUrl}" />`

app/elements/doc/callout.mjs

@@ -1,13 +1,13 @@
-const LEVELS = ['note', 'tip', 'info', 'caution', 'danger']
-const MARKS = ['📝', '💡', 'ℹ️', '⚠️', '🔥']
+const LEVELS = [ 'note', 'tip', 'info', 'caution', 'danger' ]
+const MARKS = [ '📝', '💡', 'ℹ️', '⚠️', '🔥' ]
 const generatedStyles = LEVELS.map(
   (level) => `
 callout-container.callout-${level} {
   background-color: var(--callout-${level})
 }`
 ).join('\n')
 
-export default function Callout({ html, state }) {
+export default function Callout ({ html, state }) {
   const { attrs } = state
   const thin = typeof attrs.thin !== 'undefined'
   const level = attrs.level || 'note'
@@ -56,8 +56,8 @@ export default function Callout({ html, state }) {
         align-items-center
       ">
       ${mark?.length > 0 && mark !== 'none'
-        ? `<callout-mark class="text2 align-self-start">${mark}</callout-mark>`
-        : ''}
+    ? `<callout-mark class="text2 align-self-start">${mark}</callout-mark>`
+    : ''}
       <div>
         <slot></slot>
       </div>

app/elements/doc/code-mirror.mjs

@@ -1,6 +1,6 @@
 import arc from '@architect/functions'
 
-export default function DocCodeMirror({ html /* state */ }) {
+export default function DocCodeMirror ({ html /* state */ }) {
   // const { attrs = {} } = state
   // let {
   //   lang = 'javascript',

app/elements/doc/code.mjs

@@ -1,7 +1,7 @@
 import arc from '@architect/functions'
 const moduleUrl = arc.static('js/elements/doc-code.mjs')
 
-export default function DocCode({ html }) {
+export default function DocCode ({ html }) {
   return html`
     <style>
       :host {

app/elements/doc/content.mjs

@@ -1,4 +1,4 @@
-export default function DocContent({ html }) {
+export default function DocContent ({ html }) {
   return html`
     <style>
       :host > * {

app/elements/doc/link-callout.mjs

@@ -1,4 +1,4 @@
-export default function LinkCallout({ html, state }) {
+export default function LinkCallout ({ html, state }) {
   const { attrs } = state
   const link = attrs.link || '/'
   const mark = attrs.mark || 'none'

app/elements/doc/video.mjs

@@ -1,6 +1,6 @@
 import arc from '@architect/functions'
 
-export default function DocVideo({ html, state }) {
+export default function DocVideo ({ html, state }) {
   const { attrs } = state
   const playbackId = attrs['playback-id']
   const name = attrs.name || 'Enhance Video'