Add email template page

app/api/events/$id.mjs

@@ -2,9 +2,10 @@ import events from '../../data/events.json' assert { type: 'json' }
 import  { inflateEvent } from '../events.mjs'
 
 export async function get(req) {
-  let { path } = req
+  let { path, query } = req
   const event = events.find(e => e.id === req.params.id)
-
+  let display = "page"
+  if (query && Object.hasOwn(query, "email")) display = "email"
   if (!event) {
     return {
       statusCode: 404,
@@ -24,7 +25,8 @@ export async function get(req) {
     json: {
       events: inflatedEvent,
       sponsors: eventSponsors,
-      talks: eventTalks
+      talks: eventTalks,
+      display
     }
   }}
-}
+}

app/pages/events/$id.mjs

@@ -3,9 +3,68 @@ import { marked } from "marked"
 export default function ({ html, state = {} }) {
   let { store = {} } = state
   let event = store.events[0]
-  let { id, title, sponsors, talks, description } = event
+  let display = store.display
+  let DEFAULT_LOCATION = "The Collective Seattle, 400 Dexter Ave N, Seattle, WA 98109"
+  let {
+    id,
+    title,
+    sponsors,
+    talks,
+    description,
+    date,
+    location=DEFAULT_LOCATION
+  } = event
+
   let hasTalks = talks && talks.length > 0
   let hasSponsors = sponsors && sponsors.length > 0
+  if (display === "email") {
+    let eventDate = new Date(date)
+    return html`
+      <style>
+        .container {
+          display: block;
+          margin: 20px;
+        }
+      </style>
+      <div class="container">
+        <button id="copy-html-btn">Copy HTML to clipboard</button>
+        <div id="html-contents">
+          <p>GREETING TEXT</p>
+          <!-- sponsor -->
+          ${hasSponsors ? sponsors.map(s => `
+            <p>
+              <a href="${s.url}"><img width="200" alt="${s.name} logo" src="https://seattlejs.com/_public/images/sponsors/${s.image}" title="${s.name} logo"></a>
+            </p>
+            <p>Special thanks to our friends at <a href="${s.url}">${s.name}</a> for sponsoring snacks for this month's event! 😎</p>
+          `).join('') : null}
+          <ul>
+            <li>🗓 ${eventDate.toLocaleDateString(undefined, {weekday: "long", month: "long", day: "numeric"})}</li>
+            <li>⏰ 5:30pm - 8:30pm</li>
+            <li>📍 ${location}</li>
+            <li>🎟 <a href="https://ti.to/event-loop/">Buy Tickets</a></li>
+          </ul>
+          <! -- loop through talks -->
+          ${hasTalks ? talks.map(t => `
+              <h4 style="font-family: headline-gothic-atf-round, sans-serif; font-weight: 700; font-size: 24px;">${t.title} by ${t.speaker.name}</h4>
+              <p><img width="200" alt="photo of ${t.speaker.name}" src="https://seattlejs.com/_public/images/speakers/${t.speaker.photo}" title="${t.speaker.name}"></p>
+              ${description && `<p>${marked(description)}</p>` }
+            `).join('') : null }
+          <!-- end loop -->
+          <p>See you all on ${eventDate.toLocaleDateString(undefined, {month: "long", day: "numeric"})}</p>
+        </div>
+        <script>
+        const copyHTML = async () => {
+          const holder = document.getElementById("html-contents")
+          await navigator.clipboard.writeText(holder.innerHTML)
+        }
+        window.addEventListener("DOMContentLoaded", () => {
+          const htmlButton = document.getElementById("copy-html-btn")
+          htmlButton.addEventListener("click", copyHTML)
+        })
+        </script>
+      </div>
+    `
+  }
   return html`
   <page-layout title=${title}>
       <h3>${title}</h3>