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,59 @@ 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 { id, title, sponsors, talks, description, date } = event
   let hasTalks = talks && talks.length > 0
   let hasSponsors = sponsors && sponsors.length > 0
+  if (display === "email") {
+    let eventDate = new Date(date)
+    let htmlContents = `
+      <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="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="${t.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>
+    `
+    return html`
+      <style>
+        .container {
+          display: block;
+          margin: 20px;
+        }
+      </style>
+      <div class="container">
+        <button id="copy-html-btn">Copy HTML to clipboard</button>
+        ${htmlContents}
+        <script>
+         const copyHTML = async () => {
+          console.log(\`${htmlContents}\`)
+          await navigator.clipboard.writeText(\`${htmlContents}\`);
+        }
+        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>
@@ -21,3 +71,4 @@ export default function ({ html, state = {} }) {
     </page-layout>
   `
 }
+