Merge pull request #262 from iodigital-com/feature/events

feat(events): add events connection meetup.com
iodigital-com · Aug 29, 2024 · ccbd1ab · ccbd1ab
2 parents 77db317 + 035a76c
commit ccbd1ab
Show file tree

Hide file tree

Showing 13 changed files with 1,213 additions and 10 deletions.
diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -34,6 +34,8 @@ jobs:
         run: node scripts/youtube.js
       - name: Update Jobs data
         run: node scripts/jobs.js
+      - name: Update Events data
+        run: node scripts/events.js
       - name: Commit and Push updated json files to the repository
         uses: EndBug/add-and-commit@v9
         with:

diff --git a/components/EventCalendar.js b/components/EventCalendar.js
@@ -0,0 +1,47 @@
+import Link from '@/components/Link'
+import { isFutureEvent } from '@/lib/events'
+
+const EventCalendar = ({ events }) => {
+  return (
+    <ul className="m-0 flex list-none flex-col gap-8 bg-gray-100 p-8">
+      {events.map((event) => (
+        <li
+          className={`relative m-0 bg-white p-4 ${
+            isFutureEvent(event.dateTime) ? '' : ' opacity-50'
+          }`}
+          key={event.id}
+        >
+          <h3 className="m-0 text-lg font-medium line-clamp-2">{event.title}</h3>
+          <p className="m-0 text-sm line-clamp-2">{event.description}</p>
+          <p className="m-0 mt-auto pt-6 text-xs line-clamp-2">
+            <time
+              className={`font-bold ${isFutureEvent(event.dateTime) ? 'text-io_blue-600' : ''}`}
+              dateTime={new Intl.DateTimeFormat('en-US', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              }).format(new Date(event.dateTime))}
+            >
+              {new Intl.DateTimeFormat('en-US', {
+                day: 'numeric',
+                month: 'long',
+              }).format(new Date(event.dateTime))}
+            </time>
+            {' | '}
+            {event.groupName}
+          </p>
+          <Link
+            href={event.eventUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="absolute top-0 right-0 bottom-0 left-0 text-0"
+          >
+            Go to page for {event.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default EventCalendar
diff --git a/components/EventCarousel.js b/components/EventCarousel.js
@@ -0,0 +1,53 @@
+import Link from '@/components/Link'
+import { isFutureEvent } from '@/lib/events'
+
+const EventCarousel = ({ events }) => {
+  return (
+    <ul className="my-12 mb-24 flex flex-col flex-wrap items-center md:snap-x md:flex-row md:flex-nowrap md:items-stretch md:gap-12 md:overflow-x-auto md:px-12">
+      {events.map((event) => (
+        <li
+          key={event.id}
+          className={`mb-8 shrink-0 md:mb-0 md:snap-center ${
+            isFutureEvent(event.dateTime) ? '' : ' opacity-50'
+          }`}
+          style={{ width: 500, maxWidth: '100vw' }}
+        >
+          <div className="relative flex h-full flex-col  bg-gray-100 p-8">
+            <header>
+              <h3 className="mb-2 text-3xl font-medium line-clamp-2">{event.title}</h3>
+
+              <p className="hyphens-auto text-lg line-clamp-3 ">{event.description}</p>
+            </header>
+            <p className="m-0 mt-auto pt-6 text-xs line-clamp-2">
+              <time
+                className={`font-bold ${isFutureEvent(event.dateTime) ? 'text-io_blue-600' : ''}`}
+                dateTime={new Intl.DateTimeFormat('en-US', {
+                  day: 'numeric',
+                  month: 'long',
+                  year: 'numeric',
+                }).format(new Date(event.dateTime))}
+              >
+                {new Intl.DateTimeFormat('en-US', {
+                  day: 'numeric',
+                  month: 'long',
+                }).format(new Date(event.dateTime))}
+              </time>
+              {' | '}
+              {event.groupName}
+            </p>
+            <Link
+              href={event.eventUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="absolute top-0 right-0 bottom-0 left-0 text-0"
+            >
+              Go to page for {event.title}
+            </Link>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default EventCarousel
diff --git a/data/events.json b/data/events.json
diff --git a/layouts/PostLayout.js b/layouts/PostLayout.js
@@ -13,8 +13,18 @@ import formatDate from '@/lib/utils/formatDate'
 import Arrow from '@/data/arrow.svg'
 import Clock from '@/data/clock.svg'
 import SeriePlaylist from '@/components/SeriePlaylist'
+import EventCalendar from '@/components/EventCalendar'
+import { hasFutureEvents } from '@/lib/events'
 
-export default function PostLayout({ frontMatter, authorDetails, serie, next, prev, children }) {
+export default function PostLayout({
+  frontMatter,
+  authorDetails,
+  serie,
+  events,
+  next,
+  prev,
+  children,
+}) {
   const { slug, date, title, tags, images, summary, readingTime } = frontMatter
   const { theme } = useBrandingTheme()
   const authorNames = new Intl.ListFormat('en').format(authorDetails.map(({ name }) => name))
@@ -156,8 +166,15 @@ export default function PostLayout({ frontMatter, authorDetails, serie, next, pr
             <div className="xl:col-span-2 xl:pb-0">
               <div className="container prose mx-auto pt-10 pb-8 dark:prose-dark ">
                 {children}
+
+                <hr className="my-24" />
                 <div>
-                  <hr className="my-24" />
+                  {hasFutureEvents(events) && (
+                    <div className="mb-8">
+                      <h1>Upcoming events</h1>
+                      <EventCalendar events={events} />
+                    </div>
+                  )}
                   <h1>Share</h1>
                   <Share />
                 </div>

diff --git a/layouts/SerieLayout.js b/layouts/SerieLayout.js
@@ -3,6 +3,7 @@ import removeMarkdown from 'markdown-to-text'
 import Link from '@/components/Link'
 import { BlogSEO } from '@/components/SEO'
 import Image from '@/components/Image'
+import Share from '@/components/Share'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import Serie from '@/components/Serie'
@@ -13,8 +14,18 @@ import formatDate from '@/lib/utils/formatDate'
 import Arrow from '@/data/arrow.svg'
 import Clock from '@/data/clock.svg'
 import { Children } from 'react'
+import EventCalendar from '@/components/EventCalendar'
+import { hasFutureEvents } from '@/lib/events'
 
-export default function PostLayout({ frontMatter, authorDetails, posts, next, prev, children }) {
+export default function PostLayout({
+  frontMatter,
+  authorDetails,
+  posts,
+  events,
+  next,
+  prev,
+  children,
+}) {
   const { slug, date, title, tags, images, summary, readingTime } = frontMatter
   const { theme } = useBrandingTheme()
   const authorNames = new Intl.ListFormat('en').format(authorDetails.map(({ name }) => name))
@@ -147,8 +158,20 @@ export default function PostLayout({ frontMatter, authorDetails, posts, next, pr
               {Children.count > 0 && (
                 <div className="container prose mx-auto pt-10 pb-8 dark:prose-dark ">
                   {children}
+                  <hr className="my-24" />
+                  <div>
+                    {hasFutureEvents(events) && (
+                      <div className="mb-8">
+                        <h1>Upcoming events</h1>
+                        <EventCalendar events={events} />
+                      </div>
+                    )}
+                    <h1>Share</h1>
+                    <Share />
+                  </div>
                 </div>
               )}
+
               <div className="container mx-auto pb-8 ">
                 <ul>
                   {!posts.length && 'No articles found.'}

diff --git a/lib/events.js b/lib/events.js
@@ -0,0 +1,21 @@
+import events from '@/data/events.json'
+
+export async function getAllEvents() {
+  return events
+}
+
+export async function getLatestEvents(num = 5) {
+  const { events } = await getAllEvents()
+
+  return {
+    events: events.slice(0, num),
+  }
+}
+
+export const isFutureEvent = (date) => {
+  return new Date(date) > new Date()
+}
+
+export const hasFutureEvents = (events) => {
+  return events.some((event) => isFutureEvent(event.dateTime))
+}
diff --git a/package.json b/package.json
@@ -25,15 +25,18 @@
     "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.0",
     "autoprefixer": "^10.4.5",
+    "date-fns": "^3.6.0",
     "esbuild": "^0.13.13",
     "github-slugger": "^1.3.0",
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
     "markdown-it": "^13.0.1",
     "markdown-to-text": "^0.1.1",
+    "marked": "9",
     "mdx-bundler": "^8.0.0",
     "next": "^12.1.6",
     "next-themes": "^0.0.14",
+    "node-html-parser": "^6.1.13",
     "postcss": "^8.4.5",
     "preact": "^10.6.2",
     "react": "17.0.2",

diff --git a/pages/articles/[...slug].js b/pages/articles/[...slug].js
@@ -4,6 +4,7 @@ import generateRss from '@/lib/generate-rss'
 import { MDXLayoutRenderer } from '@/components/MDXComponents'
 import { formatSlug, getAllFilesFrontMatter, getFileBySlug, getFiles } from '@/lib/mdx'
 import { getRelatedJobs } from '@/lib/jobs'
+import { getLatestEvents } from '@/lib/events'
 import { getSerie } from '@/lib/series'
 import JobGrid from '@/components/JobGrid'
 
@@ -44,12 +45,16 @@ export async function getStaticProps({ params }) {
   const searchString = authorDetails.reduce((acc, author) => acc + author.occupation + ' ', '')
   const { jobs } = await getRelatedJobs(4, searchString)
 
+  const { events } = await getLatestEvents(3)
+
   const theme = post.frontMatter.theme || 'blue'
 
-  return { props: { post, authorDetails, prev, next, jobs, serie, theme } }
+  return {
+    props: { post, authorDetails, prev, next, jobs, events, serie, theme },
+  }
 }
 
-export default function Blog({ post, authorDetails, prev, next, jobs, serie }) {
+export default function Blog({ post, authorDetails, prev, next, jobs, events, serie }) {
   const { mdxSource, toc, frontMatter } = post
 
   return (
@@ -65,7 +70,9 @@ export default function Blog({ post, authorDetails, prev, next, jobs, serie }) {
             prev={prev}
             next={next}
             serie={serie}
+            events={events}
           />
+
           <div className="container mx-auto space-y-2 pt-6 pb-8 md:space-y-5">
             <h2 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
               Jobs

diff --git a/pages/index.js b/pages/index.js
@@ -4,8 +4,10 @@ import siteMetadata from '@/data/siteMetadata'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import { getLatestVideos } from '@/lib/youtube'
 import { getLatestJobs } from '@/lib/jobs'
+import { getLatestEvents } from '@/lib/events'
 import Image from '@/components/Image'
 import JobGrid from '@/components/JobGrid'
+import EventCarousel from '@/components/EventCarousel'
 import VideoCarousel from '@/components/VideoCarousel'
 import { getAllAuthors } from '@/lib/authors'
 import SectionTitle from '@/components/SectionTitle'
@@ -25,14 +27,17 @@ export async function getStaticProps() {
   )
   const { videos } = await getLatestVideos(10)
   const { jobs } = await getLatestJobs(9)
+  const { events } = await getLatestEvents(9)
 
   const allAuthors = await getAllAuthors()
   const contributors = shuffle(allAuthors.filter((author) => author.slug[0] !== 'default'))
 
-  return { props: { posts, videos, jobs, contributors, theme: 'green' } }
+  return {
+    props: { posts, videos, jobs, events, contributors, theme: 'green' },
+  }
 }
 
-export default function Home({ posts, videos, jobs, contributors }) {
+export default function Home({ posts, videos, jobs, events, contributors }) {
   const { theme } = useBrandingTheme()
 
   const authors = contributors.reduce((acc, author) => {
@@ -162,6 +167,11 @@ export default function Home({ posts, videos, jobs, contributors }) {
       </SectionTitle>
       <VideoCarousel videos={videos} />
 
+      <SectionTitle id="events">
+        Our latest <span className="font-serif font-light">events</span>
+      </SectionTitle>
+      <EventCarousel events={events} />
+
       <SectionTitle id="jobs">
         Some of our <span className="font-serif font-light">jobs</span>
       </SectionTitle>

diff --git a/pages/series/[...slug].js b/pages/series/[...slug].js
@@ -4,6 +4,7 @@ import generateRss from '@/lib/generate-rss'
 import { MDXLayoutRenderer } from '@/components/MDXComponents'
 import { formatSlug, getAllFilesFrontMatter, getFileBySlug, getFiles } from '@/lib/mdx'
 import { getLatestJobs } from '@/lib/jobs'
+import { getLatestEvents } from '@/lib/events'
 import { getSerie } from '@/lib/series'
 import JobGrid from '@/components/JobGrid'
 import path from 'path'
@@ -48,12 +49,14 @@ export async function getStaticProps({ params }) {
 
   const { jobs } = await getLatestJobs(4)
 
+  const { events } = await getLatestEvents(3)
+
   const theme = serie.frontMatter.theme || 'blue'
 
-  return { props: { serie, posts, authorDetails, prev, next, jobs, theme } }
+  return { props: { serie, posts, authorDetails, prev, next, jobs, events, theme } }
 }
 
-export default function Serie({ posts, authorDetails, prev, next, jobs, serie }) {
+export default function Serie({ posts, authorDetails, prev, next, jobs, events, serie }) {
   const { mdxSource, toc, frontMatter } = serie
 
   return (
@@ -70,6 +73,7 @@ export default function Serie({ posts, authorDetails, prev, next, jobs, serie })
             next={next}
             serie={serie}
             posts={posts}
+            events={events}
           />
 
           <div className="container mx-auto space-y-2 pt-6 pb-8 md:space-y-5">