feat: add events and event detail pages

package.json

@@ -56,7 +56,7 @@
     "@solidjs/meta": "^0.29.1",
     "@solidjs/router": "^0.9.0",
     "@tailwindcss/typography": "^0.5.10",
-    "@zentered/issue-forms-body-parser": "^2.1.4",
+    "@zentered/issue-forms-body-parser": "^2.2.0",
     "clsx": "^2.0.0",
     "graphql": "^16.8.1",
     "solid-heroicons": "^3.2.4",

src/graphql/file.query.js

@@ -1,19 +1,22 @@
 import { gql } from '@solid-primitives/graphql'
 
 export default {
-  gql: gql`
+  gql: function (p) {
+    const path = p ?? 'README.md'
+    return gql`
     query ($organization: String!, $repository: String!) {
       repository(owner: $organization, name: $repository) {
         id
         name
-        object(expression: "main:README.md") {
+        object(expression: "main:${path}") {
           ... on Blob {
             text
           }
         }
       }
     }
-  `,
+  `
+  },
   vars: {
     organization: process.env.GH_ORG
   }

src/graphql/issue.query.js

@@ -0,0 +1,34 @@
+import { gql } from '@solid-primitives/graphql'
+
+export default {
+  gql: gql`
+    query ($organization: String!, $repository: String!, $number: Int!) {
+      repository(owner: $organization, name: $repository) {
+        issue(number: $number) {
+          id
+          number
+          title
+          url
+          body
+          reactions(first: 100) {
+            nodes {
+              content
+            }
+          }
+          comments(first: 100) {
+            nodes {
+              id
+              author {
+                login
+              }
+              body
+            }
+          }
+        }
+      }
+    }
+  `,
+  vars: {
+    organization: process.env.GH_ORG
+  }
+}

src/graphql/issues.query.js

@@ -4,8 +4,14 @@ export default {
   gql: gql`
     query ($organization: String!, $repository: String!) {
       repository(owner: $organization, name: $repository) {
-        issues(first: 100, states: OPEN) {
+        issues(
+          first: 100
+          states: OPEN
+          labels: "Approved :white_check_mark:"
+        ) {
           nodes {
+            id
+            number
             title
             url
             body

src/routes/events/[id].jsx

@@ -0,0 +1,152 @@
+import graphql from '~/lib/graphql.server.js'
+import issueQuery from '~/graphql/issue.query.js'
+import { useParams, useRouteData } from 'solid-start'
+import { Container } from '~/components/Container'
+import { Match, Show, Switch, createMemo, createResource } 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'
+
+export function routeData() {
+  const params = useParams()
+  const [data] = graphql(issueQuery.gql, {
+    ...issueQuery.vars,
+    repository: 'events',
+    number: parseInt(params.id)
+  })
+
+  const [locationsFile] = graphql(fileQuery.gql('locations.json'), {
+    ...fileQuery.vars,
+    repository: 'events'
+  })
+
+  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 default function Event() {
+  const { data, issueData, location } = useRouteData()
+
+  return (
+    <Container class="mt-16 sm:mt-32">
+      <div class="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
+        <div class="lg:pl-20">
+          <div class="max-w-xs px-2.5 lg:max-w-none">
+            <Switch>
+              <Match when={issueData()?.['featured-image']?.images?.[0]}>
+                <img
+                  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}>
+                <img
+                  src="/assets/cdc-logo.svg"
+                  alt="CDC logo"
+                  sizes="(min-width: 1024px) 32rem, 20rem"
+                  class="aspect-square rotate-3 rounded-2xl object-cover"
+                />
+              </Match>
+            </Switch>
+          </div>
+        </div>
+        <div class="lg:pl-20">
+          <dl class="w-64 space-y-8 xl:w-80">
+            <Show when={location}>
+              <div class="flex flex-col-reverse gap-y-4">
+                <dt class="text-base leading-7 text-gray-600">
+                  {location.name}, {location.city}
+                  <br />
+                  <Show when={location.what3words}>
+                    <A
+                      href={`https://w3w.co/${location.what3words.replace(
+                        '///',
+                        ''
+                      )}`}
+                      target="_blank"
+                    >
+                      {location.what3words}
+                    </A>
+                  </Show>
+                </dt>
+                <dd class="text-5xl font-semibold tracking-tight text-gray-900">
+                  Where
+                </dd>
+              </div>
+            </Show>
+          </dl>
+          <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}
+                <br />
+                Duration: {issueData()?.['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']}>
+              <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}
+                  </SolidMarkdown>
+                </dt>
+                <dd class="text-5xl font-semibold tracking-tight text-gray-900">
+                  Code of Conduct
+                </dd>
+              </div>
+            </Show>
+          </dl>
+        </div>
+        <Show when={issueData()?.['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}
+            </time>
+            <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+              {data()?.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}
+                </SolidMarkdown>
+              </Prose>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </Container>
+  )
+}

src/routes/events/index.jsx

@@ -11,12 +11,13 @@ function EventLine(props) {
     const data = await bodyParser(props.event.body)
     return data
   })
-  const slug = props.event.title
 
   return (
     <article class="md:grid md:grid-cols-4 md:items-baseline">
       <Card class="md:col-span-3">
-        <Card.Title href={`/articles/${slug}`}>{props.event.title}</Card.Title>
+        <Card.Title href={`/events/${props.event.number}`}>
+          {props.event.title}
+        </Card.Title>
         <Card.Description>
           {issueData()?.['event-description'].text}
         </Card.Description>