added h1 headers, larger card component for meetups own page. (#28)

* added h1 headers, larger card component for meetups own page. * removed unused vars * fix test
PlanBee-dev · Jul 28, 2023 · 9d81e98 · 9d81e98
1 parent 5a55735
commit 9d81e98
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 35 deletions.
diff --git a/packages/site/src/components/Header.astro b/packages/site/src/components/Header.astro
@@ -1,5 +1,10 @@
 ---
 import HeaderLink from './HeaderLink.astro';
+
+let { headerText } = Astro.props;
+if (!headerText) {
+  headerText = 'Developer meetups in Oulu area';
+}
 ---
 
 <header>
@@ -101,5 +106,11 @@ import HeaderLink from './HeaderLink.astro';
     </div>
   </nav>
 
-  <h1 class="sr-only">Oulu developer meetups</h1>
+  <div class="my-4 px-4 mx-auto max-w-2xl">
+    <h1
+      class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"
+    >
+      {headerText}
+    </h1>
+  </div>
 </header>
diff --git a/packages/site/src/components/MeetupPageCard.astro b/packages/site/src/components/MeetupPageCard.astro
@@ -0,0 +1,94 @@
+---
+const meetupProps = Astro.props;
+const { location, locationLink, time, organizer, organizerLink, meetupLink } =
+  meetupProps.meetup.data;
+
+const { Content } = await meetupProps.meetup.render();
+---
+
+<div class="m-auto overflow-hidden max-w-7xl bg-white shadow sm:rounded-lg">
+  <!--card header -->
+  <div class="border-b border-gray-200 bg-sky-100 px-4 py-5 sm:px-6">
+    <div
+      class="-ml-4 -mt-4 flex flex-wrap items-center justify-between sm:flex-nowrap"
+    >
+      <div class="ml-4 mt-4">
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <img
+              class="h-12 w-12 rounded-full"
+              src={`${import.meta.env.BASE_URL}images/dev-logo.jpg`}
+              alt="developer logo"
+            />
+          </div>
+          <div class="ml-4">
+            <h3 class="text-base font-semibold leading-6 text-gray-900">
+              Organized by
+            </h3>
+            <p class="text-sm text-gray-500">
+              <a href={organizerLink} target="_blank">{organizer}</a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="ml-4 mt-4 flex flex-shrink-0">
+        <button
+          type="button"
+          class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        >
+          <svg
+            class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z"
+            >
+            </path>
+            <path
+              d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z"
+            >
+            </path>
+          </svg>
+          <span>Sign up</span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!--card body -->
+  <div class="border-t border-gray-100">
+    <dl class="divide-y divide-gray-100">
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-900">When</dt>
+        <dd
+          class="mt-1 font-semibold leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
+        >
+          {time}
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-900">Where</dt>
+        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <a href={locationLink} target="_blank">{location}</a>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-900">Sign up link</dt>
+        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <a href={meetupLink} target="_blank">{meetupLink}</a>
+        </dd>
+      </div>
+      <div
+        class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 text-center"
+      >
+        <dt class="text-sm font-medium text-gray-900 sm:col-span-3">
+          Description
+        </dt>
+        <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0">
+          <article><Content /></article>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>
diff --git a/packages/site/src/content/meetups/25-8-2028-cloudamite.mdx b/packages/site/src/content/meetups/25-8-2028-cloudamite.mdx
@@ -9,6 +9,12 @@ description: 'Join us for an evening of AI talks and discussions.'
 meetupLink: 'https://meetup.com/great-ai-meetup'
 ---
 
+## Internal AI meetup
 Join us for an evening of AI talks and discussions, while our seasoned and awesome developers share their experiences and insights about latest AI tools. 
 
-Whether it is coding or creating images, videos or music, there is something for everything. Even in open source.
+## Coding helpers
+There are so much more options nowadays than just github's copilot. Like Amazon's code whisperer on sourcegraph's Cody AI. Or you can just ask chatGPT(-4). 
+
+## Do art! With open source
+Stable diffusion for the win. For images and animations. But what is facebook doing releasing their own models?
+
diff --git a/packages/site/src/layouts/Meetup.astro b/packages/site/src/layouts/Meetup.astro
@@ -3,39 +3,21 @@ import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 import BaseHead from '../components/BaseHead.astro';
-import MeetupCard from '../components/MeetupCard.astro';
+import MeetupPageCard from '../components/MeetupPageCard.astro';
 
-const {
-  name,
-  description,
-  location,
-  locationLink,
-  time,
-  organizer,
-  organizerLink,
-  meetupLink,
-} = Astro.props;
+const { meetup } = Astro.props;
 ---
 
 <head>
   <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 </head>
 <body class="h-full">
   <div class="min-h-full">
-    <Header />
+    <Header headerText={meetup.data.name} />
     <div class="py-10">
       <main>
-        <div class="mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8">
-          <MeetupCard
-            name={name}
-            description={description}
-            location={location}
-            locationLink={locationLink}
-            time={time}
-            organizer={organizer}
-            organizerLink={organizerLink}
-            meetupLink={meetupLink}
-          />
+        <div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
+          <MeetupPageCard meetup={meetup} />
         </div>
       </main>
       <Footer />

diff --git a/packages/site/src/pages/index.astro b/packages/site/src/pages/index.astro
@@ -25,7 +25,7 @@ const meetup = {
   <body class="h-full">
     <div class="min-h-full">
       <Header />
-      <div class="py-10">
+      <div class="py-4">
         <main>
           <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 flex flex-col">
             <div class="container">

diff --git a/packages/site/src/pages/meetups/[...slug].astro b/packages/site/src/pages/meetups/[...slug].astro
@@ -12,7 +12,6 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<'meetups'>;
 
 const meetup = Astro.props;
-//const { Content } = await meetup.render();
 ---
 
-<Meetup {...meetup.data} />
+<Meetup {meetup} />
diff --git a/packages/site/src/pages/meetups/index.astro b/packages/site/src/pages/meetups/index.astro
@@ -15,10 +15,9 @@ const meetups = await getCollection('meetups');
 <body class="h-full">
   <div class="min-h-full">
     <Header />
-    <div class="py-10">
+    <div class="py-4">
       <main>
-        <div class="mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8">
-          <h1 class="text-2xl text-center m-8">Oulu developer meetups</h1>
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div
             class="mx-auto max-w-4xl border border-gray-400 rounded-xl p-8 sm:px-24 bg-gray-50"
           >

diff --git a/packages/site/src/pages/submit.astro b/packages/site/src/pages/submit.astro
@@ -10,10 +10,10 @@ import BaseHead from '../components/BaseHead.astro';
 </head>
 <body class="h-full">
   <div class="min-h-full">
-    <Header />
-    <div class="py-10">
+    <Header headerText="Submitting your own meetup" />
+    <div class="py-8">
       <main>
-        <div class="mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div
             class="mx-auto max-w-3xl border border-gray-400 rounded-xl p-8 sm:px-24 bg-gray-50"
           >

diff --git a/packages/site/test/index.test.ts b/packages/site/test/index.test.ts
@@ -27,7 +27,10 @@ test('main heading is set', async () => {
 
   expect(
     await page
-      .getByRole('heading', { level: 1, name: 'Oulu developer meetups' })
+      .getByRole('heading', {
+        level: 1,
+        name: 'Developer meetups in Oulu area',
+      })
       .isVisible(),
   ).toBeTruthy();
 });