Change event layout

src/components/Event.astro

@@ -1,54 +1,70 @@
 ---
 import { CollectionEntry } from 'astro:content';
 import Markdown from '@astrojs/markdown-component';
-// import truncateMarkdown from 'markdown-truncate';
 
 export interface Props {
   title: string;
   event: string;
   body: string;
   pres_url: string;
+  pres_source: string;
   start_date: Date;
   venue: string;
 }
 
-const { title, event, body, pres_url, start_date, venue} = Astro.props;
-// const { Content } = await event.render();
+const { title, event, body, pres_url, pres_source, start_date, venue } = Astro.props;
 
-var formatted_date = start_date.toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+var formatted_date = start_date.toLocaleDateString('en-GB', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+
+var currentDate = new Date();
+var eventDate = new Date(start_date);
+var eventFormat = '';
+{
+  currentDate < eventDate ? (eventFormat = 'opacity-100') : (eventFormat = 'opacity-45');
+}
 // Truncate text
 // TODO: Better way?
 // TODO: Make to helper or plugin
 // var truncatedText = body.split("</p>");
-
-//${image ? 'md:grid-cols-2' : ''
-
 ---
-<article class="max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 md:grid-cols-2">
+
+<article class=`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 md:grid-cols-2 ${eventFormat}
+`>
   <div class="relative h-0 pb-[56.25%] md:pb-[75%] lg:pb-[56.25%] overflow-hidden">
-<h3 class="text-xl">
-{formatted_date}, {venue}
-</h3>
-<a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={pres_url}>
-  {pres_url}
-</a>
-</div>
-
-    <div class="mt-2">
-      <header>
+    <h3 class="text-xl">
+      {formatted_date}
+    </h3>
+    <h3 class="text-xl">
+      {venue}
+    </h3>
+    {
+      pres_source ? (
+        <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={pres_source}>
+          {title}
+        </a>
+      ) : (
+        ''
+      )
+    }
+  </div>
+
+  <div class="mt-2">
+    <header>
       <h2 class="text-xl sm:text-2xl leading-tight mb-2 font-subheading font-semibold dark:text-slate-300">
-        {
-          pres_url ? (
-            <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={pres_url}>
-              {title}
-            </a>
-          ) : (
-            title
-          )
-        } @ {event}
+        {event}
       </h2>
-      </header>
-      <!-- TODO: Seems kind of ridiculous -->
-      <Markdown class="m-2" />{body}
+    </header>
+    <!-- TODO: Seems kind of ridiculous -->
+    <Markdown class="m-2" />{body}
+    <div class="mt-2">
+      <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={pres_url}>
+        {pres_url}
+      </a>
     </div>
-</article>
+  </div>
+</article>

src/content/events/2020-02-27-megacomm.md

@@ -4,6 +4,7 @@ title: Automating and testing documentation
 event: MEGAComm
 layout: "../../layouts/Event.astro"
 venue: 'Cinema City, Jerusalem'
+pres_source: 'https://megacomm.org/'
 pres_url: 'https://megacomm.org/'
 start_date: 2020-02-27T12:20:00.000Z
 end_date: 2020-02-27T12:20:00.000Z

src/content/events/2020-12-04-write-the-docs-au.md

@@ -4,6 +4,7 @@ title: An introduction to developer experience, and the role of a documentarian
 event: Write the Docs
 layout: "../../layouts/Event.astro"
 venue: 'online'
+pres_source: 'https://writethedocs.org/'
 pres_url: 'https://writethedocs.org/'
 start_date: 2020-12-03T12:20:00.000Z
 end_date: 2020-12-04T12:20:00.000Z

src/content/events/2020-12-09-automate-api-perfection.md

@@ -4,6 +4,7 @@ title: Automate your APIs to perfection
 event: APIDays
 layout: "../../layouts/Event.astro"
 venue: 'online'
+pres_source: 'https://writethedocs.org/'
 pres_url: 'https://writethedocs.org/'
 start_date: 2020-12-07T12:20:00.000Z
 end_date: 2020-12-09T12:20:00.000Z

src/content/events/2021-02-20-arizona-stc.md

@@ -4,6 +4,7 @@ title: An Introduction to docs-as-code
 event: Arizona STC
 layout: "../../layouts/Event.astro"
 venue: Online
+pres_source: https://www.meetup.com/Metro-Phoenix-Technical-Communicators/events/276301189/
 pres_url: https://www.meetup.com/Metro-Phoenix-Technical-Communicators/events/276301189/
 start_date: 2021-02-20T12:20:00.000Z
 end_date: 2021-02-20T12:20:00.000Z

src/content/events/2021-03-09-last-clubhouse.md

@@ -4,6 +4,7 @@ title: An Introduction to Developer Experience
 event: LAST Clubhouse
 layout: "../../layouts/Event.astro"
 venue: Online
+pres_source: https://clubhouse.lastconference.com/offers/jt4DeFvC
 pres_url: https://clubhouse.lastconference.com/offers/jt4DeFvC
 start_date: 2021-03-09T12:20:00.000Z
 end_date: 2021-03-09T12:20:00.000Z

src/content/events/2022-11-03-heapcon-2022.md

@@ -6,8 +6,8 @@ event: heapcon
 start_date: 2022-11-03T12:20:00.000Z
 end_date: 2022-11-04T00:00:00.000Z
 venue: Belgrade, Serbia
-pres_source: https://heapcon.io/2022/
-pres_url: https://heapcon.io/2022/a-short-guide-to-creating-interactive-fiction/
+pres_url: https://heapcon.io/2022/
+pres_source: https://heapcon.io/2022/a-short-guide-to-creating-interactive-fiction/
 ---
 
 Interactive fiction (IF) occupies a curious middle ground between technical writing, programming, and creative writing. This presentation takes a look at the history of IF games, the tools used to create them across the decades, and how you can use your programming skills to tell stories.

src/content/events/2023-11-13-slush-2023.md

@@ -6,7 +6,7 @@ event: Slush
 start_date: 2023-11-13T12:20:00.000Z
 end_date: 2023-11-16T12:20:00.000Z
 venue: 'Helsinki, Finland'
-pres_source: https://slush.org/speakers/
+pres_url: https://slush.org/speakers/
 ---
 
 Chris is back at Europe's cosy winter for Startups and keen to meet interesting products, projects and people.

src/content/events/2023-11-13-web-summit-2023.md

@@ -6,7 +6,7 @@ event: Web Summit
 start_date: 2023-11-13T12:20:00.000Z
 end_date: 2023-11-16T12:20:00.000Z
 venue: 'MEO Arena, Lisbon'
-pres_source: https://websummit.com
+pres_url: https://websummit.com
 ---
 
 Chris is back at Europe's pre-eminent event for Startups and keen to meet interesting products, projects and people.

src/pages/events/[...page].astro

@@ -1,15 +1,13 @@
 ---
-import Layout from "~/layouts/PageLayoutNoBG.astro";
-import { Pagination } from "accessible-astro-components";
+import Layout from '~/layouts/PageLayoutNoBG.astro';
+import { Pagination } from 'accessible-astro-components';
 import Headline from '~/components/blog/Headline.astro';
-import Event from "~/components/Event.astro";
+import Event from '~/components/Event.astro';
 import { getCollection } from 'astro:content';
 
 export async function getStaticPaths({ paginate }) {
   let allEvents = await getCollection('events');
-allEvents = allEvents.sort(
-    (a, b) => new Date(b.data.start_date).valueOf() - new Date(a.data.start_date).valueOf()
-  );
+  allEvents = allEvents.sort((a, b) => new Date(b.data.start_date).valueOf() - new Date(a.data.start_date).valueOf());
   return paginate(allEvents, {
     // TODO: Parameterize
     pageSize: 25,
@@ -18,8 +16,8 @@ allEvents = allEvents.sort(
 const { page } = Astro.props;
 
 const meta = {
-  title: "Events",
-  description: "I have spoken at and reported on hundreds of events around the world. This page still needs some polish 😁.",
+  title: 'Events',
+  description: 'I have spoken at and reported on hundreds of events around the world.',
   // canonical: post.canonical || url,
   // image: await findImage(post.image),
   // noindex: BLOG?.post?.noindex,
@@ -29,39 +27,34 @@ const meta = {
 
 <Layout {meta}>
   <section class="px-6 sm:px-6 py-6 sm:py-6 lg:py-6 mx-auto max-w-4xl">
-
-    <Headline
-      subtitle={meta.description}
-    >
+    <Headline subtitle={meta.description}>
       {meta.title}
     </Headline>
-  <ul>
-    {
+    <ul>
+      {
         page.data.map((event) => (
-      <li class="mb-12 md:mb-20">
-
-        <Event
+          <li class="">
+            <Event
               title={event.data.title}
               event={event.data.event}
               body={event.body}
               pres_url={event.data.pres_url}
+              pres_source={event.data.pres_source}
               start_date={event.data.start_date}
               venue={event.data.venue}
             />
-      </li>
-      ))
-    }
-  </ul>
-  <!-- TODO: Index page -->
-  <Pagination
-  firstPage={page.url.prev ? "/events" : null}
-  previousPage={page.url.prev ? page.url.prev : null}
-  nextPage={page.url.next ? page.url.next : null}
-  lastPage={page.url.next
-    ? `/blog/${Math.round(page.total / page.size)}`
-    : null}
-  currentPage={page.currentPage}
-  totalPages={Math.round(page.total / page.size)}
-/>
-</section>
-</Layout>
+          </li>
+        ))
+      }
+    </ul>
+    <!-- TODO: Index page -->
+    <Pagination
+      firstPage={page.url.prev ? '/events' : null}
+      previousPage={page.url.prev ? page.url.prev : null}
+      nextPage={page.url.next ? page.url.next : null}
+      lastPage={page.url.next ? `/blog/${Math.round(page.total / page.size)}` : null}
+      currentPage={page.currentPage}
+      totalPages={Math.round(page.total / page.size)}
+    />
+  </section>
+</Layout>