feat: homepage improvements

package.json

@@ -55,6 +55,7 @@
     "@solid-primitives/graphql": "^2.0.1",
     "@solidjs/meta": "^0.29.1",
     "@solidjs/router": "^0.9.0",
+    "@tailwindcss/typography": "^0.5.10",
     "@zentered/issue-forms-body-parser": "^2.1.4",
     "clsx": "^2.0.0",
     "graphql": "^16.8.1",

src/components/Atomic.jsx

@@ -0,0 +1,22 @@
+export const H1 = (props) => {
+  return (
+    <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+      {props.children}
+    </h1>
+  )
+}
+export const H2 = (props) => {
+  return (
+    <h2 class="text-3xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-3xl">
+      {props.children}
+    </h2>
+  )
+}
+
+export const H3 = (props) => {
+  return (
+    <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+      {props.children}
+    </h3>
+  )
+}

src/components/Card.jsx

@@ -56,6 +56,7 @@ Card.Title = function CardTitle(props) {
 
 Card.Description = function CardDescription(props) {
   const [local] = splitProps(props, ['children'])
+
   return (
     <SolidMarkdown class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
       {local.children}
@@ -65,6 +66,7 @@ Card.Description = function CardDescription(props) {
 
 Card.Cta = function CardCta(props) {
   const [local] = splitProps(props, ['children'])
+
   return (
     <div
       aria-hidden="true"

src/components/Container.jsx

@@ -12,6 +12,7 @@ export const ContainerOuter = (props) => {
 
 export const ContainerInner = (props) => {
   const [local, other] = splitProps(props, ['class', 'ref', 'children'])
+
   return (
     <div
       ref={local.ref}
@@ -25,6 +26,7 @@ export const ContainerInner = (props) => {
 
 export const Container = (props) => {
   const [local, other] = splitProps(props, ['children', 'ref'])
+
   return (
     <ContainerOuter ref={local.ref} {...other}>
       <ContainerInner>{local.children}</ContainerInner>

src/components/Prose.jsx

@@ -0,0 +1,8 @@
+import clsx from 'clsx'
+import { splitProps } from 'solid-js'
+
+export function Prose(props) {
+  const [local, other] = splitProps(props, ['class'])
+
+  return <div class={clsx(local.class, 'prose dark:prose-invert')} {...other} />
+}

src/graphql/file.query.js

@@ -2,11 +2,11 @@ import { gql } from '@solid-primitives/graphql'
 
 export default {
   gql: gql`
-    query ($organization: String!, $repository: String!, $path: String!) {
+    query ($organization: String!, $repository: String!) {
       repository(owner: $organization, name: $repository) {
         id
         name
-        object(expression: "main:$path") {
+        object(expression: "main:README.md") {
           ... on Blob {
             text
           }

src/root.jsx

@@ -16,7 +16,7 @@ import './root.css'
 import { Header } from './components/Header'
 import { Footer } from './components/Footer'
 import announcementQuery from '~/graphql/announcement.query.js'
-import graphql from '~/data/graphql.server.js'
+import graphql from '~/lib/graphql.server.js'
 import { createMemo } from 'solid-js'
 
 const destructBody = (body) => {

src/routes/about.jsx

@@ -4,7 +4,7 @@ import Logo from '~/assets/cdc-logo.png'
 import { GitHubIcon, LinkedInIcon } from '~/components/SocialIcons'
 import clsx from 'clsx'
 import organizationQuery from '~/graphql/organization.query.js'
-import graphql from '~/data/graphql.server.js'
+import graphql from '~/lib/graphql.server.js'
 import { useRouteData } from 'solid-start'
 
 function SocialLink(props) {

src/routes/events.jsx → src/routes/events/index.jsx

@@ -1,7 +1,7 @@
 import { Card } from '~/components/Card'
 import { formatDate } from '~/lib/formatDate'
 import issuesQuery from '~/graphql/issues.query.js'
-import graphql from '~/data/graphql.server.js'
+import graphql from '~/lib/graphql.server.js'
 import { useRouteData } from 'solid-start'
 import { For, createResource } from 'solid-js'
 import bodyParser from '@zentered/issue-forms-body-parser'
@@ -18,16 +18,16 @@ function EventLine(props) {
       <Card class="md:col-span-3">
         <Card.Title href={`/articles/${slug}`}>{props.event.title}</Card.Title>
         <Card.Description>
-          {issueData()['event-description'].text}
+          {issueData()?.['event-description'].text}
         </Card.Description>
         <Card.Cta>Event Details</Card.Cta>
       </Card>
       <Card.Eyebrow
         as="time"
-        dateTime={issueData().date.date}
+        dateTime={issueData()?.date.date}
         class="mt-1 hidden md:block"
       >
-        {formatDate(issueData().date.date)}
+        {formatDate(issueData()?.date.date)}
       </Card.Eyebrow>
     </article>
   )

src/routes/index.jsx

@@ -1,8 +1,13 @@
-import { For, splitProps } from 'solid-js'
+import { For, createResource, splitProps, Show } from 'solid-js'
 import clsx from 'clsx'
 import { Container } from '~/components/Container'
 import { GitHubIcon, LinkedInIcon } from '~/components/SocialIcons'
 import { A } from 'solid-start'
+import graphql from '~/lib/graphql.server.js'
+import fileQuery from '~/graphql/file.query.js'
+import issuesQuery from '~/graphql/issues.query.js'
+import bodyParser from '@zentered/issue-forms-body-parser'
+import { H1, H2, H3 } from '~/components/Atomic'
 
 function Photos() {
   let rotations = ['rotate-2', '-rotate-2', 'rotate-2', 'rotate-2', '-rotate-2']
@@ -41,23 +46,83 @@ function SocialLink(props) {
   )
 }
 
+function EventBox(props) {
+  const [issueData] = createResource(async () => {
+    const data = await bodyParser(props.event.body)
+    return data
+  })
+
+  return (
+    <article class="flex flex-col items-start justify-between">
+      <div class="relative w-full">
+        <img
+          src={props.event.imageUrl}
+          alt=""
+          class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]"
+        />
+        <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
+      </div>
+      <div class="max-w-xl">
+        <div class="mt-8 flex items-center gap-x-4 text-xs">
+          <time dateTime={issueData()?.date.date} class="text-gray-500">
+            {issueData()?.date.date}
+          </time>
+        </div>
+        <div class="group relative">
+          <H3>
+            <a href={props.event.href}>
+              <span class="absolute inset-0" />
+              <A href="/" class="">
+                {props.event.title}
+              </A>
+            </a>
+          </H3>
+        </div>
+        {/* <div class="relative mt-8 flex items-center gap-x-4">
+        <img
+          src={props.event.author.imageUrl}
+          alt=""
+          class="h-10 w-10 rounded-full bg-gray-100"
+        />
+        <div class="text-sm leading-6">
+          <p class="font-semibold text-gray-900">
+            <a href={props.event.author.href}>
+              <span class="absolute inset-0" />
+              {props.event.author.name}
+            </a>
+          </p>
+        </div>
+      </div> */}
+      </div>
+    </article>
+  )
+}
+
 export default function App() {
+  const [readmeFile] = graphql(fileQuery.gql, {
+    repository: 'home',
+    path: 'README.md',
+    ...fileQuery.vars
+  })
+  const [readmeData] = createResource(readmeFile, async () => {
+    const data = await bodyParser(readmeFile().repository.object.text)
+    return data
+  })
+  const [events] = graphql(issuesQuery.gql, {
+    repository: 'events',
+    ...issuesQuery.vars
+  })
+
   return (
     <>
-      <h1 class="text-black">Vite + Solid</h1>
       <Container class="mt-9">
         <div class="max-w-2xl">
-          <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
-            Cyprus Developer Community
-          </h1>
-          <p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
-            The Cyprus Developer Community is an umbrella for developer and
-            technology groups in Cyprus. You can join our Discord server (it's
-            like Slack, but for communities) to chat with other developers,
-            share your knowledge, and get help from other community members; or
-            join our regular events that we organize with our participating
-            groups.
-          </p>
+          <H1>Cyprus Developer Community</H1>
+          <Show when={readmeData}>
+            <p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
+              {readmeData()?.about?.content}
+            </p>
+          </Show>
           <div class="mt-6 flex gap-6">
             <SocialLink
               href="https://github.com/cyprus-developer-community"
@@ -73,6 +138,14 @@ export default function App() {
         </div>
       </Container>
       <Photos />
+      <Container class="bg-white py-24 sm:py-32">
+        <H2>Upcoming Events</H2>
+        <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          <For each={events()?.repository?.issues.nodes}>
+            {(event) => <EventBox event={event} />}
+          </For>
+        </div>
+      </Container>
     </>
   )
 }

tailwind.config.cjs

@@ -1,8 +1,8 @@
+const typographyPlugin = require('@tailwindcss/typography')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {}
-  },
-  plugins: []
+  darkMode: 'class',
+  plugins: [typographyPlugin]
 }