From 573507b8ff77a4010153f01b30556864641948fb Mon Sep 17 00:00:00 2001
From: FX-Wood <fxwood.work@gmail.com>
Date: Thu, 19 Oct 2023 23:45:13 +0000
Subject: [PATCH 01/10] add email template

---
 app/api/events/$id.mjs   | 10 ++++---
 app/pages/events/$id.mjs | 57 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/app/api/events/$id.mjs b/app/api/events/$id.mjs
index 4baf27f..318dcb3 100644
--- a/app/api/events/$id.mjs
+++ b/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
     }
   }}
-}
\ No newline at end of file
+}
diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index d2b5dfb..4b2b1ea 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -3,9 +3,63 @@ 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
+  console.log({hasTalks})
   let hasSponsors = sponsors && sponsors.length > 0
+  if (display === "email") {
+    let eventDate = new Date(date)
+    // this xmp tag is a hack, detailed in this stackoverflow answer:
+    // https://stackoverflow.com/a/16785992
+    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 +75,4 @@ export default function ({ html, state = {} }) {
     </page-layout>
   `
 }
+

From c1b4878b25798ca25041479aed6fd7d2cecdfa69 Mon Sep 17 00:00:00 2001
From: FX-Wood <fxwood.work@gmail.com>
Date: Thu, 19 Oct 2023 23:55:00 +0000
Subject: [PATCH 02/10] remove old comment, whitespace

---
 app/pages/events/$id.mjs | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index 4b2b1ea..be073f8 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -10,8 +10,6 @@ export default function ({ html, state = {} }) {
   let hasSponsors = sponsors && sponsors.length > 0
   if (display === "email") {
     let eventDate = new Date(date)
-    // this xmp tag is a hack, detailed in this stackoverflow answer:
-    // https://stackoverflow.com/a/16785992
     let htmlContents = `
       <p>GREETING TEXT</p>
       <!-- sponsor -->
@@ -45,7 +43,6 @@ export default function ({ html, state = {} }) {
       </style>
       <div class="container">
         <button id="copy-html-btn">Copy HTML to clipboard</button>
-
         ${htmlContents}
         <script>
          const copyHTML = async () => {

From 3680a34f518348dda4fc9f4d4a0348979c5721d0 Mon Sep 17 00:00:00 2001
From: FX-Wood <fxwood.work@gmail.com>
Date: Thu, 19 Oct 2023 23:56:29 +0000
Subject: [PATCH 03/10] remove console log

---
 app/pages/events/$id.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index be073f8..470bc59 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -6,7 +6,6 @@ export default function ({ html, state = {} }) {
   let display = store.display
   let { id, title, sponsors, talks, description, date } = event
   let hasTalks = talks && talks.length > 0
-  console.log({hasTalks})
   let hasSponsors = sponsors && sponsors.length > 0
   if (display === "email") {
     let eventDate = new Date(date)

From 7cc137a4725e3ef95931ef90df543852330daf40 Mon Sep 17 00:00:00 2001
From: FX-Wood <fxwood.work@gmail.com>
Date: Fri, 20 Oct 2023 00:02:20 +0000
Subject: [PATCH 04/10] lint

---
 app/api/events/$id.mjs   | 31 ++++++++--------
 app/pages/events/$id.mjs | 76 ++++++++++++++++++++++++++++------------
 2 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/app/api/events/$id.mjs b/app/api/events/$id.mjs
index 318dcb3..544c6c0 100644
--- a/app/api/events/$id.mjs
+++ b/app/api/events/$id.mjs
@@ -1,11 +1,11 @@
 import events from '../../data/events.json' assert { type: 'json' }
-import  { inflateEvent } from '../events.mjs'
+import { inflateEvent } from '../events.mjs'
 
 export async function get(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"
+  let display = 'page'
+  if (query && Object.hasOwn(query, 'email')) display = 'email'
   if (!event) {
     return {
       statusCode: 404,
@@ -15,18 +15,19 @@ export async function get(req) {
       }
     }
   } else {
-  // We have to convert event from an object to an array to inflate it
-  let inflatedEvent = [event].map(inflateEvent)
-  let eventSponsors = event.sponsors
-  let eventTalks = event.talks
+    // We have to convert event from an object to an array to inflate it
+    let inflatedEvent = [event].map(inflateEvent)
+    let eventSponsors = event.sponsors
+    let eventTalks = event.talks
 
-  // In event/$id we are reusing the element <list-talks> which expects a list of events
-  return {
-    json: {
-      events: inflatedEvent,
-      sponsors: eventSponsors,
-      talks: eventTalks,
-      display
+    // In event/$id we are reusing the element <list-talks> which expects a list of events
+    return {
+      json: {
+        events: inflatedEvent,
+        sponsors: eventSponsors,
+        talks: eventTalks,
+        display
+      }
     }
-  }}
+  }
 }
diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index 470bc59..91ed188 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -1,4 +1,4 @@
-import { marked } from "marked"
+import { marked } from 'marked'
 
 export default function ({ html, state = {} }) {
   let { store = {} } = state
@@ -7,31 +7,60 @@ export default function ({ html, state = {} }) {
   let { id, title, sponsors, talks, description, date } = event
   let hasTalks = talks && talks.length > 0
   let hasSponsors = sponsors && sponsors.length > 0
-  if (display === "email") {
+  if (display === 'email') {
     let eventDate = new Date(date)
     let htmlContents = `
       <p>GREETING TEXT</p>
       <!-- sponsor -->
-      ${hasSponsors ? sponsors.map(s => `
+      ${
+        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}
+      `
+              )
+              .join('')
+          : null
+      }
       <ul>
-        <li>🗓 ${eventDate.toLocaleDateString(undefined, {weekday: "long", month: "long", day: "numeric"})}</li>
+        <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 }
+      ${
+        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>
+      <p>See you all on ${eventDate.toLocaleDateString(undefined, {
+        month: 'long',
+        day: 'numeric'
+      })}</p>
     `
     return html`
       <style>
@@ -44,25 +73,27 @@ export default function ({ html, state = {} }) {
         <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)
-        })
+          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}>
+    <page-layout title=${title}>
       <h3>${title}</h3>
-      ${description && `<p>${marked(description)}</p>` }
+      ${description && `<p>${marked(description)}</p>`}
       <h4>Thanks to our Sponsors ❤️</h4>
       ${hasSponsors ? html`<list-sponsors></list-sponsors>` : null}
-      ${hasTalks ? html`<list-talks event_id="${id}"></list-talks>`: html`<p>No talks were given durring this event.</p>`}
+      ${hasTalks
+        ? html`<list-talks event_id="${id}"></list-talks>`
+        : html`<p>No talks were given durring this event.</p>`}
       <div class="">
         <a target="_self" href="/events">
           See all past events <i class="fa-solid fa-arrow-right"></i>
@@ -71,4 +102,3 @@ export default function ({ html, state = {} }) {
     </page-layout>
   `
 }
-

From 42394e11bc4a517ce98b48461074fc530455ad41 Mon Sep 17 00:00:00 2001
From: FX-Wood <fxwood.work@gmail.com>
Date: Fri, 20 Oct 2023 00:07:01 +0000
Subject: [PATCH 05/10] Revert "lint" as the linter made it hard to read

This reverts commit 7cc137a4725e3ef95931ef90df543852330daf40.
---
 app/api/events/$id.mjs   | 31 ++++++++--------
 app/pages/events/$id.mjs | 76 ++++++++++++----------------------------
 2 files changed, 38 insertions(+), 69 deletions(-)

diff --git a/app/api/events/$id.mjs b/app/api/events/$id.mjs
index 544c6c0..318dcb3 100644
--- a/app/api/events/$id.mjs
+++ b/app/api/events/$id.mjs
@@ -1,11 +1,11 @@
 import events from '../../data/events.json' assert { type: 'json' }
-import { inflateEvent } from '../events.mjs'
+import  { inflateEvent } from '../events.mjs'
 
 export async function get(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'
+  let display = "page"
+  if (query && Object.hasOwn(query, "email")) display = "email"
   if (!event) {
     return {
       statusCode: 404,
@@ -15,19 +15,18 @@ export async function get(req) {
       }
     }
   } else {
-    // We have to convert event from an object to an array to inflate it
-    let inflatedEvent = [event].map(inflateEvent)
-    let eventSponsors = event.sponsors
-    let eventTalks = event.talks
+  // We have to convert event from an object to an array to inflate it
+  let inflatedEvent = [event].map(inflateEvent)
+  let eventSponsors = event.sponsors
+  let eventTalks = event.talks
 
-    // In event/$id we are reusing the element <list-talks> which expects a list of events
-    return {
-      json: {
-        events: inflatedEvent,
-        sponsors: eventSponsors,
-        talks: eventTalks,
-        display
-      }
+  // In event/$id we are reusing the element <list-talks> which expects a list of events
+  return {
+    json: {
+      events: inflatedEvent,
+      sponsors: eventSponsors,
+      talks: eventTalks,
+      display
     }
-  }
+  }}
 }
diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index 91ed188..470bc59 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -1,4 +1,4 @@
-import { marked } from 'marked'
+import { marked } from "marked"
 
 export default function ({ html, state = {} }) {
   let { store = {} } = state
@@ -7,60 +7,31 @@ export default function ({ html, state = {} }) {
   let { id, title, sponsors, talks, description, date } = event
   let hasTalks = talks && talks.length > 0
   let hasSponsors = sponsors && sponsors.length > 0
-  if (display === 'email') {
+  if (display === "email") {
     let eventDate = new Date(date)
     let htmlContents = `
       <p>GREETING TEXT</p>
       <!-- sponsor -->
-      ${
-        hasSponsors
-          ? sponsors
-              .map(
-                s => `
+      ${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
-      }
+      `).join('') : null}
       <ul>
-        <li>🗓 ${eventDate.toLocaleDateString(undefined, {
-          weekday: 'long',
-          month: 'long',
-          day: 'numeric'
-        })}</li>
+        <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
-      }
+      ${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>
+      <p>See you all on ${eventDate.toLocaleDateString(undefined, {month: "long", day: "numeric"})}</p>
     `
     return html`
       <style>
@@ -73,27 +44,25 @@ export default function ({ html, state = {} }) {
         <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)
-          })
+         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}>
+  <page-layout title=${title}>
       <h3>${title}</h3>
-      ${description && `<p>${marked(description)}</p>`}
+      ${description && `<p>${marked(description)}</p>` }
       <h4>Thanks to our Sponsors ❤️</h4>
       ${hasSponsors ? html`<list-sponsors></list-sponsors>` : null}
-      ${hasTalks
-        ? html`<list-talks event_id="${id}"></list-talks>`
-        : html`<p>No talks were given durring this event.</p>`}
+      ${hasTalks ? html`<list-talks event_id="${id}"></list-talks>`: html`<p>No talks were given durring this event.</p>`}
       <div class="">
         <a target="_self" href="/events">
           See all past events <i class="fa-solid fa-arrow-right"></i>
@@ -102,3 +71,4 @@ export default function ({ html, state = {} }) {
     </page-layout>
   `
 }
+

From 210f2c24e84b23be1123c65b3879a50cc7d8b522 Mon Sep 17 00:00:00 2001
From: FX-Wood <fxwood.work@gmail.com>
Date: Fri, 20 Oct 2023 02:33:25 +0000
Subject: [PATCH 06/10] use innerHTML

---
 app/pages/events/$id.mjs | 55 ++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index 470bc59..3c688d9 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -10,28 +10,6 @@ export default function ({ html, state = {} }) {
   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>
@@ -42,15 +20,38 @@ export default function ({ html, state = {} }) {
       </style>
       <div class="container">
         <button id="copy-html-btn">Copy HTML to clipboard</button>
-        ${htmlContents}
+        <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="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>
+        </div>
         <script>
-         const copyHTML = async () => {
-          console.log(\`${htmlContents}\`)
-          await navigator.clipboard.writeText(\`${htmlContents}\`);
+        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)
+          htmlButton.addEventListener("click", copyHTML2)
         })
         </script>
       </div>

From 8d1c2361d55ddc4e6f8ce821d444747db3169362 Mon Sep 17 00:00:00 2001
From: FX Wood <40310772+FX-Wood@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:19:24 +0000
Subject: [PATCH 07/10] remove cruft

---
 app/pages/events/$id.mjs | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index 3c688d9..c5a8f59 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -9,8 +9,6 @@ export default function ({ html, state = {} }) {
   let hasSponsors = sponsors && sponsors.length > 0
   if (display === "email") {
     let eventDate = new Date(date)
-    let htmlContents = `
-    `
     return html`
       <style>
         .container {
@@ -51,7 +49,7 @@ export default function ({ html, state = {} }) {
         }
         window.addEventListener("DOMContentLoaded", () => {
           const htmlButton = document.getElementById("copy-html-btn")
-          htmlButton.addEventListener("click", copyHTML2)
+          htmlButton.addEventListener("click", copyHTML)
         })
         </script>
       </div>
@@ -72,4 +70,3 @@ export default function ({ html, state = {} }) {
     </page-layout>
   `
 }
-

From 8decc78a3e9e2cdd779a4de65e55885b96536fec Mon Sep 17 00:00:00 2001
From: FX Wood <40310772+FX-Wood@users.noreply.github.com>
Date: Wed, 8 Nov 2023 21:47:31 +0000
Subject: [PATCH 08/10] Fix a couple string template references

---
 app/pages/events/$id.mjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index c5a8f59..36feae1 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -25,7 +25,7 @@ export default function ({ html, state = {} }) {
             <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>
+            <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>
@@ -36,7 +36,7 @@ export default function ({ html, state = {} }) {
           <! -- 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>
+              <p><img width="200" alt="${t.title}" src="https://seattlejs.com/_public/images/speakers/${t.speaker.photo}" title="${t.speaker.name}"></p>
               ${description && `<p>${marked(description)}</p>` }
             `).join('') : null }
           <!-- end loop -->

From 517c250fa80b81839b1cef95a53563f9cfacfc52 Mon Sep 17 00:00:00 2001
From: FX Wood <40310772+FX-Wood@users.noreply.github.com>
Date: Wed, 8 Nov 2023 22:01:26 +0000
Subject: [PATCH 09/10] Fix event location

---
 app/pages/events/$id.mjs | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index 36feae1..b48ccaf 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -4,7 +4,17 @@ export default function ({ html, state = {} }) {
   let { store = {} } = state
   let event = store.events[0]
   let display = store.display
-  let { id, title, sponsors, talks, description, date } = event
+  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") {
@@ -30,7 +40,7 @@ export default function ({ html, state = {} }) {
           <ul>
             <li>🗓 ${eventDate.toLocaleDateString(undefined, {weekday: "long", month: "long", day: "numeric"})}</li>
             <li>⏰ 5:30pm - 8:30pm</li>
-            <li>📍 LOCATION</li>
+            <li>📍 ${location}</li>
             <li>🎟 <a href="https://ti.to/event-loop/">Buy Tickets</a></li>
           </ul>
           <! -- loop through talks -->

From be627106fe0a0df255ebdfd3ad661d627324a649 Mon Sep 17 00:00:00 2001
From: FX Wood <40310772+FX-Wood@users.noreply.github.com>
Date: Wed, 8 Nov 2023 22:03:32 +0000
Subject: [PATCH 10/10] Fix alt text

---
 app/pages/events/$id.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/events/$id.mjs b/app/pages/events/$id.mjs
index b48ccaf..366149e 100644
--- a/app/pages/events/$id.mjs
+++ b/app/pages/events/$id.mjs
@@ -46,7 +46,7 @@ export default function ({ html, state = {} }) {
           <! -- 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.title}" src="https://seattlejs.com/_public/images/speakers/${t.speaker.photo}" title="${t.speaker.name}"></p>
+              <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 -->