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 -->