feat: add events and event detail

app.config.js

@@ -9,10 +9,10 @@ export default defineConfig({
     preset: 'cloudflare_module',
     rollupConfig: {
       external: ['__STATIC_CONTENT_MANIFEST', 'node:async_hooks']
-    },
-    prerender: {
-      crawlLinks: true
     }
+    // prerender: {
+    //   routes: ['/']
+    // }
   },
   vite: {
     optimizeDeps: {

src/components/Card.jsx

@@ -86,18 +86,16 @@ Card.Eyebrow = function CardEyebrow(props) {
       class={clsx(
         local.class,
         'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
-        local.decorate && 'pl-3.5'
+        'pl-3.5'
       )}
       {...other}
     >
-      {local.decorate && (
-        <span
-          class="absolute inset-y-0 left-0 flex items-center"
-          aria-hidden="true"
-        >
-          <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
-        </span>
-      )}
+      <span
+        class="absolute inset-y-0 left-0 flex items-center"
+        aria-hidden="true"
+      >
+        <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+      </span>
       {local.children}
     </time>
   )

src/components/EventLine.jsx

@@ -0,0 +1,33 @@
+import bodyParser from '@zentered/issue-forms-body-parser'
+import { Suspense, createResource } from 'solid-js'
+import { Card } from '~/components/Card'
+import { formatDate } from '~/lib/formatDate'
+
+export function EventLine(props) {
+  const [issueData] = createResource(async () => {
+    return bodyParser(props.event.body)
+  })
+
+  return (
+    <article class="md:grid md:grid-cols-4 md:items-baseline">
+      <Suspense>
+        <Card class="md:col-span-3">
+          <Card.Title href={`/events/${props.event.number}`}>
+            {props.event.title}
+          </Card.Title>
+          <Card.Description>
+            {issueData()?.['event-description'].text}
+          </Card.Description>
+          <Card.Cta>Event Details</Card.Cta>
+        </Card>
+        <Card.Eyebrow
+          as="time"
+          dateTime={issueData()?.date.date}
+          class="mt-1 hidden md:block"
+        >
+          {formatDate(issueData()?.date.date)}
+        </Card.Eyebrow>
+      </Suspense>
+    </article>
+  )
+}

src/components/SimpleLayout.jsx

@@ -13,7 +13,7 @@ export function SimpleLayout(props) {
           {local.intro}
         </p>
       </header>
-      {local.children && <div class="mt-16 sm:mt-20">{local.children}</div>}
+      <div class="mt-16 sm:mt-20">{local.children}</div>
     </Container>
   )
 }

src/to-refactor/events/[id].jsx → src/routes/events/[id].jsx

@@ -1,67 +1,56 @@
 import graphql from '~/server/graphql.js'
 import issueQuery from '~/graphql/issue.query.js'
-import { useParams, useRouteData } from 'solid-start'
-import { Match, Show, Switch, createMemo, createResource } from 'solid-js'
+import fileQuery from '~/graphql/file.query.js'
+import { Match, Show, Switch, createMemo } from 'solid-js'
 import bodyParser from '@zentered/issue-forms-body-parser'
 import { SolidMarkdown } from 'solid-markdown'
 import { Prose } from '~/components/Prose'
 import { formatDate } from '~/lib/formatDate'
-import fileQuery from '~/graphql/file.query.js'
-import { A } from '@solidjs/router'
+import { A, useParams, createAsync, cache } from '@solidjs/router'
 import { SimpleLayout } from '~/components/SimpleLayout'
 
-export function routeData() {
+const eventsData = cache(async () => {
   const params = useParams()
-  const [data] = graphql(issueQuery.gql, {
+  const issue = await graphql(issueQuery.gql, {
     ...issueQuery.vars,
     repository: 'events',
     number: parseInt(params.id)
   })
+  issue.parsedBody = await bodyParser(issue.repository.issue.body)
+  return issue
+}, 'eventsData')
 
-  const [locationsFile] = graphql(fileQuery.gql('locations.json'), {
+const locationsFile = cache(async () => {
+  const file = await graphql(fileQuery.gql('locations.json'), {
     ...fileQuery.vars,
     repository: 'events'
   })
+  return JSON.parse(file.repository.object.text)
+}, 'locationsFile')
 
-  const [issueData] = createResource(data, async () => {
-    const issue = await bodyParser(data()?.repository.issue.body)
-    return issue
-  })
-
-  const locations = createMemo(() => {
-    if (locationsFile()) {
-      return JSON.parse(locationsFile().repository.object.text)
-    }
-  })
-
-  const location = locations()?.find((l) => l.id === issueData()?.location.text)
-
-  return {
-    data,
-    issueData,
-    location
-  }
+export const route = {
+  load: () => [eventsData(), locationsFile()]
 }
 
 export default function Event() {
-  const { data, issueData, location } = useRouteData()
+  const issueData = createAsync(eventsData)
+  const locationsList = createAsync(locationsFile)
+  const location = createMemo(() => {
+    locationsList()?.find((l) => l.id === issueData()?.parsedBody.location.text)
+  })
 
   return (
-    <SimpleLayout
-      title="Meet our team"
-      intro="We’re a dynamic group of individuals who are passionate about what
-      we do."
-    >
+    <SimpleLayout title="Upcoming Event" intro="">
       <Switch>
-        <Match when={issueData()?.['featured-image']?.images?.[0]}>
+        <Match when={issueData()?.parsedBody['featured-image']?.images[0]}>
           <img
-            src={issueData()['featured-image']?.images?.[0]?.src}
-            alt={issueData()['featured-image']?.images?.[0]?.alt}
+            src={issueData()['featured-image']?.images[0]?.src}
+            alt={issueData()['featured-image']?.images[0]?.alt}
             sizes="(min-width: 1024px) 32rem, 20rem"
             class="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
           />
         </Match>
-        <Match when={!issueData()?.['featured-image']?.images}>
+        <Match when={!issueData()?.parsedBody['featured-image']?.images}>
           <img
             src="/assets/cdc-logo.svg"
             alt="CDC logo"
@@ -72,20 +61,20 @@ export default function Event() {
       </Switch>
       <div class="lg:pl-20">
         <dl class="w-64 space-y-8 xl:w-80">
-          <Show when={location}>
+          <Show when={location() && location().name}>
             <div class="flex flex-col-reverse gap-y-4">
               <dt class="text-base leading-7 text-gray-600">
-                {location.name}, {location.city}
+                {location().name}, {location().city}
                 <br />
-                <Show when={location.what3words}>
+                <Show when={location().what3words}>
                   <A
-                    href={`https://w3w.co/${location.what3words.replace(
+                    href={`https://w3w.co/${location().what3words.replace(
                       '///',
                       ''
                     )}`}
                     target="_blank"
                   >
-                    {location.what3words}
+                    {location().what3words}
                   </A>
                 </Show>
               </dt>
@@ -98,22 +87,22 @@ export default function Event() {
         <dl class="w-64 space-y-8 xl:w-80">
           <div class="flex flex-col-reverse gap-y-4">
             <dt class="text-base leading-7 text-gray-600">
-              {formatDate(issueData()?.['date'].date)} -{' '}
-              {issueData()?.['time'].time}
+              {formatDate(issueData()?.parsedBody.date.date)} -{' '}
+              {issueData()?.parsedBody['time'].time}
               <br />
-              Duration: {issueData()?.['duration'].text}
+              Duration: {issueData()?.parsedBody['duration'].text}
             </dt>
             <dd class="text-5xl font-semibold tracking-tight text-gray-900">
               When
             </dd>
           </div>
         </dl>
         <dl class="w-64 space-y-8 xl:w-80">
-          <Show when={issueData()?.['code-of-conduct']}>
+          <Show when={issueData()?.parsedBody['code-of-conduct']}>
             <div class="flex flex-col-reverse gap-y-4">
               <dt class="text-base leading-7 text-gray-600">
                 <SolidMarkdown>
-                  {issueData()['code-of-conduct'].list[0].text}
+                  {issueData()?.parsedBody['code-of-conduct'].list[0].text}
                 </SolidMarkdown>
               </dt>
               <dd class="text-5xl font-semibold tracking-tight text-gray-900">
@@ -123,23 +112,23 @@ export default function Event() {
           </Show>
         </dl>
       </div>
-      <Show when={issueData()?.['date']}>
+      <Show when={issueData()?.parsedBody.date}>
         <div class="lg:order-first lg:row-span-2">
           <time
             class={
               'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-800 dark:text-zinc-500 pl-3.5'
             }
           >
-            {formatDate(issueData()?.['date'].date)} -{' '}
-            {issueData()['time'].time}
+            {formatDate(issueData()?.parsedBody.date.date)} -{' '}
+            {issueData()?.parsedBody['time'].time}
           </time>
           <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
-            {data()?.repository.issue.title}
+            {issueData()?.repository.issue.title}
           </h1>
           <div class="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
             <Prose>
               <SolidMarkdown>
-                {issueData()?.['event-description'].text}
+                {issueData()?.parsedBody['event-description'].text}
               </SolidMarkdown>
             </Prose>
           </div>

src/routes/events/index.jsx

@@ -0,0 +1,79 @@
+import upcomingEventsQuery from '~/graphql/upcoming-events.query.js'
+// import pastEventsQuery from '~/graphql/past-events.query.js'
+import graphql from '~/server/graphql.js'
+import { For, Show, Suspense, createResource } from 'solid-js'
+import { SimpleLayout } from '~/components/SimpleLayout'
+import { createAsync, cache } from '@solidjs/router'
+import bodyParser from '@zentered/issue-forms-body-parser'
+import { Card } from '~/components/Card'
+import { formatDate } from '~/lib/formatDate'
+
+function EventLine(props) {
+  const [issueData] = createResource(async () => {
+    return bodyParser(props.event.body)
+  })
+
+  return (
+    <article class="md:grid md:grid-cols-4 md:items-baseline">
+      <Suspense>
+        <Card class="md:col-span-3">
+          <Card.Title href={`/events/${props.event.number}`}>
+            {props.event.title}
+          </Card.Title>
+          <Card.Description>
+            {issueData()?.['event-description'].text}
+          </Card.Description>
+          <Card.Cta>Event Details</Card.Cta>
+        </Card>
+        <Card.Eyebrow
+          as="time"
+          dateTime={issueData()?.date.date}
+          class="mt-1 hidden md:block"
+        >
+          {formatDate(issueData()?.date.date)}
+        </Card.Eyebrow>
+      </Suspense>
+    </article>
+  )
+}
+
+const getEvents = cache(async () => {
+  return graphql(upcomingEventsQuery.gql, {
+    ...upcomingEventsQuery.vars,
+    repository: 'events'
+  })
+}, 'events')
+
+// const getPastEvents = cache(async () => {
+//   return graphql(pastEventsQuery.gql, {
+//     ...pastEventsQuery.vars,
+//     repository: 'events'
+//   })
+// }, 'pastEvents')
+
+export const route = {
+  load: () => [getEvents()]
+}
+
+export default function Event() {
+  const events = createAsync(getEvents)
+
+  return (
+    <>
+      <SimpleLayout title="Upcoming Events" intro="">
+        <Suspense>
+          <Show when={events()}>
+            <For each={events().repository.issues.nodes}>
+              {(event) => <EventLine event={event} />}
+            </For>
+          </Show>
+        </Suspense>
+      </SimpleLayout>
+      {/* <SimpleLayout title="Past Events" intro="">
+        <For each={events.past()?.repository?.issues.nodes}>
+          {(event) => <EventReduced event={event} />}
+        </For>
+      </SimpleLayout> */}
+    </>
+  )
+}