Skip to content

Commit

Permalink
Revert "lint" as the linter made it hard to read
Browse files Browse the repository at this point in the history
This reverts commit 7cc137a.
  • Loading branch information
FX-Wood committed Oct 20, 2023
1 parent 7cc137a commit 42394e1
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 69 deletions.
31 changes: 15 additions & 16 deletions app/api/events/$id.mjs
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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
}
}
}}
}
76 changes: 23 additions & 53 deletions app/pages/events/$id.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { marked } from 'marked'
import { marked } from "marked"

export default function ({ html, state = {} }) {
let { store = {} } = state
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -102,3 +71,4 @@ export default function ({ html, state = {} }) {
</page-layout>
`
}

0 comments on commit 42394e1

Please sign in to comment.