feat: new community section from community branch

components/Calendar.js

@@ -1,25 +1,12 @@
-import moment from 'moment';
 import eventsData from '../config/meetings.json';
 import GoogleCalendarButton from './buttons/GoogleCalendarButton';
 import Heading from './typography/Heading';
+import { getEvents } from '../lib/staticHelpers';
 
 export default function Calendar({ className = '', size, text="text-left" }) {
   const CALENDAR_URL =
     'https://calendar.google.com/calendar/embed?src=c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com&ctz=UTC';
   const eventsExist = eventsData.length > 0;
-
-  function getEvents() {
-      let meetingsWithDates = eventsData.map((event) => ({
-        ...event,
-        date: moment(event.date),
-      }));
-      meetingsWithDates.sort((a, b) => a.date - b.date);
-      return meetingsWithDates
-        .filter((meeting) => meeting.date > new Date())
-        .slice(0, size || meetingsWithDates.length);
-  }
-
-
   return (
     <div
       className={`rounded-md border border-gray-200 overflow-hidden bg-white p-4`}
@@ -28,7 +15,7 @@ export default function Calendar({ className = '', size, text="text-left" }) {
         Upcoming events
       </Heading> 
       <ul>
-        {getEvents().map((event, index) => (
+        {getEvents(eventsData, size).map((event, index) => (
           <li key={index}>
             <a
               href={event.url}

components/Meeting.js

@@ -2,33 +2,50 @@ import YoutubeButton from './buttons/YoutubeButton';
 import Paragraph from './typography/Paragraph';
 import TextLink from './typography/TextLink';
 import Heading from './typography/Heading';
+import { ArrowRightIcon } from '@heroicons/react/outline';
 
 export default function Meeting({ 
     name = '', 
     purpose = '',
     host = '',
     hostProfile = '',
-    youtube = '' 
+    youtube = '', 
+    bg = ''
 }) {
 
   return (
-    <div className="rounded-md border border-gray-200 overflow-hidden bg-white p-4">
-        <Heading level="h2" typeStyle="heading-md-semibold">
-            { name }
-        </Heading>   
-        <Paragraph typeStyle="body-md" className="my-4">
-            <strong>Purpose:</strong> { purpose }
-        </Paragraph>
-        <Paragraph typeStyle="body-md" className="my-4">
-            <strong>Host:</strong> 
-            { hostProfile 
-                ? (<TextLink href={ hostProfile } target="_blank">
-                { host }
-                </TextLink>)
-                : ` ${host}.`
-            }
-        </Paragraph>
-        <YoutubeButton text="Watch recordings" href={ youtube }/>
-    </div>
+    <a href={youtube} target="_blank" rel="noreferrer">
+      <div
+        className={`meeting-card overflow-hidden p-4 bg-${bg} w-full lg:w-[300px] h-[300px] cursor-pointer hover:bg-dark hover:text-white flex flex-col justify-between`}
+      >
+        <div>
+          <h3 className="text-xl">{name}</h3>
+          <div>
+            <Paragraph typeStyle="body-sm" className="my-4" textColor="white">
+              {purpose}
+            </Paragraph>
+          </div>
+        </div>
+        <div className="flex items-center justify-between">
+          <Paragraph typeStyle="body-md" className="my-4">
+            <strong>Host:</strong>
+            {hostProfile ? (
+              <TextLink
+                href={hostProfile}
+                target="_blank"
+                className="hover:text-primary-500"
+              >
+                {host}
+              </TextLink>
+            ) : (
+              ` ${host}.`
+            )}
+          </Paragraph>
+          <div>
+            <ArrowRightIcon className="w-[20px] ml-3 text-slate-400" />
+          </div>
+        </div>
+      </div>
+    </a>
   );
 }

components/icons/Ambassador.js

@@ -0,0 +1,31 @@
+export default function IconArrowDown({ className = '' }) {
+  return (
+    <svg
+      width="11"
+      height="7"
+      viewBox="0 0 512 512"
+      ill="#000000"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M494.462,199.131c-9.25-9.25-21.001-15.101-33.751-16.935l0.031-119.217c0.001-2.52-1.101-4.914-3.015-6.552
+			c-1.914-1.638-4.447-2.358-6.94-1.967l-77.373,12.116c-4.195,0.656-7.288,4.27-7.288,8.518l-0.001,23.084l-246.52,49.785
+			c-4.668,0.943-7.688,5.49-6.744,10.157c0.826,4.091,4.423,6.917,8.442,6.917c0.566,0,1.139-0.056,1.715-0.172l243.106-49.095
+			l-0.002,40.208c0,4.761,3.859,8.621,8.62,8.622c0.001,0,0,0,0.001,0c4.761,0,8.621-3.859,8.621-8.62l0.006-73.508l60.128-9.416
+			l-0.086,336.877l-60.119-9.38l0.067-210.367c0.001-4.761-3.857-8.622-8.618-8.624c-0.001,0-0.002,0-0.003,0
+			c-4.76,0-8.62,3.858-8.621,8.619l-0.056,177.003L58.964,304.995l0.551-127.309l35.661-7.203c4.668-0.943,7.688-5.49,6.744-10.157
+			c-0.941-4.667-5.487-7.686-10.157-6.744l-42.548,8.593c-4.009,0.809-6.898,4.324-6.915,8.414l-0.095,21.991H8.621
+			c-4.762,0-8.621,3.86-8.621,8.621v83.121c0,4.761,3.859,8.621,8.621,8.621h33.153l-0.083,19.058
+			c-0.017,4.115,2.876,7.667,6.909,8.486l108.919,22.07l-23.899,97.845H93.582l3.653-92.705c0.187-4.758-3.517-8.766-8.275-8.955
+			c-4.759-0.177-8.766,3.519-8.953,8.275l-4.006,101.667c-0.092,2.344,0.775,4.623,2.4,6.314c1.625,1.691,3.869,2.646,6.214,2.646
+			h55.775c3.974,0,7.433-2.716,8.375-6.576l6.992-28.63l39.942,0.02c0.002,0,0.003,0,0.005,0c3.751,0,7.071-2.424,8.213-5.997
+			l19.363-60.591l142.776,28.9l-0.007,23.156c-0.002,4.25,3.093,7.866,7.292,8.521l77.362,12.07c0.444,0.07,0.886,0.103,1.329,0.103
+			c2.04,0,4.034-0.725,5.606-2.071c1.913-1.637,3.014-4.029,3.015-6.548l0.031-119.159c12.745-1.81,24.521-7.658,33.806-16.931
+			C517.848,260.537,517.836,222.505,494.462,199.131z M41.849,275.703H17.243v-65.878h24.89L41.849,275.703z M189.408,405.214
+			l-29.44-0.014l14.464-59.215l31.844,6.445L189.408,405.214z M482.297,271.718c-6.003,5.995-13.468,9.98-21.583,11.63
+			l-0.014-52.636l0.008-31.022c8.118,1.66,15.576,5.646,21.562,11.633C498.923,227.976,498.934,255.072,482.297,271.718z"
+      />
+    </svg>
+  );
+}

components/icons/Conference.js

@@ -0,0 +1,34 @@
+export default function Conference({ className }) {
+  return (
+    <svg className={className} width="20px" height="20px" viewBox="0 0 24 24">
+      <path
+        d="M7.5 4.20581L16.5 19.7943"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.7942 7.5L4.20573 16.5"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.3293 3.30664L9.6706 20.6933"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.6934 14.3293L3.30669 9.6706"
+        stroke="#C78017"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

components/icons/Webinar.js

@@ -0,0 +1,66 @@
+export default function Webinar({ className }) {
+  return (
+    <svg className={className} width="20px" height="20px" viewBox="0 0 256 256">
+      <path
+        d="m40.59 49.24c-1.28 0-33.08 24.32-33.08 76 0 53.23 30.89 81.28 32.64 81.49s16.43-13.58 16.43-14.68-26.95-20.59-26.95-65.28 26.73-61.33 26.73-62.85c0-.92-12.26-14.68-15.77-14.68z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m40.29 214.77a9.09 9.09 0 0 1 -1.14-.07c-1.64-.2-4.12-.51-10.79-7.93a101.48 101.48 0 0 1 -12.11-16.87c-7.63-13.17-16.74-35.07-16.74-64.64 0-28.86 9.43-49.51 17.34-61.74a89.8 89.8 0 0 1 12.44-15.39c7-6.88 9.5-6.88 11.3-6.88 3.49 0 7.2 1.57 14.9 9.4 8.87 9 8.87 10.89 8.87 13.28 0 3.72-2.18 5.75-4.29 7.71-5.55 5.17-22.44 20.89-22.44 55.16 0 23.42 7.81 43 23.21 58.11 1.75 1.72 3.74 3.67 3.74 7.18 0 2.89 0 4.81-12.22 15.59-5.72 5.04-8.69 7.09-12.07 7.09zm.84-155.77c-7.46 7.05-25.62 28.17-25.62 66.26 0 39.53 17.7 63 25.27 71.28 1.54-1.33 3.28-2.92 4.85-4.4-15.92-17.6-24-39.56-24-65.35 0-25.52 8.06-46.81 24-63.36-1.48-1.54-3.1-3.16-4.5-4.43z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m74.77 78.6c-1.55 0-21.69 12.71-22.13 46.88-.45 35.05 19.72 52.36 21 52.58s14.24-13.36 14.24-14.46-15.48-11.84-14.68-35.49c.88-25.85 14.9-34.61 14.9-35.71s-11.36-13.8-13.33-13.8z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m73.73 186.06a8.38 8.38 0 0 1 -1.38-.12c-7.35-1.22-16.66-16.9-16.75-17.05-5.14-8.72-11.22-23.36-11-43.52.26-19.94 6.73-33.19 12.12-40.78 3.43-4.84 11.62-14 18-14 3.75 0 6.73 2 13.27 9 7.33 7.85 8.1 9.92 8.1 12.77 0 3.51-2.09 5.59-3.47 7-3 3-10.82 10.79-11.43 29a36.5 36.5 0 0 0 11.21 28.19c1.56 1.61 3.51 3.61 3.51 7s-1.46 5.38-6.84 11.14a116.63 116.63 0 0 1 -8.33 8.18c-1.34 1.19-3.74 3.19-7.01 3.19zm.68-97.53c-4.83 4.5-13.5 15.57-13.77 37-.28 21.97 8.26 35.61 13.36 41.79 1.12-1.12 2.3-2.35 3.38-3.5a51.81 51.81 0 0 1 -12.14-36c .64-18.82 7.56-30 12.45-35.83-1.06-1.16-2.22-2.39-3.28-3.46z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m215.41 49.24c1.28 0 33.08 24.32 33.08 76 0 53.23-30.89 81.28-32.64 81.49s-16.43-13.58-16.43-14.68 26.95-20.59 26.95-65.28-26.73-61.36-26.73-62.87c0-.9 12.26-14.66 15.77-14.66z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m215.7 214.77c-3.38 0-6.34-2-12.06-7.1-12.22-10.79-12.22-12.7-12.22-15.59 0-3.5 2-5.45 3.74-7.18 15.4-15.14 23.21-34.69 23.21-58.11 0-34.27-16.89-50-22.44-55.16-2.11-2-4.29-4-4.29-7.71 0-2.39 0-4.27 8.87-13.28 7.71-7.83 11.41-9.4 14.9-9.4 1.79 0 4.25 0 11.3 6.88a89.8 89.8 0 0 1 12.44 15.39c7.91 12.24 17.34 32.88 17.34 61.74 0 29.57-9.1 51.47-16.74 64.64a101.48 101.48 0 0 1 -12.11 16.86c-6.67 7.41-9.15 7.72-10.8 7.93a9 9 0 0 1 -1.14.09zm-5.33-22.62c1.56 1.48 3.31 3.07 4.85 4.4 7.57-8.23 25.27-31.75 25.27-71.28 0-38.09-18.16-59.21-25.62-66.26-1.4 1.27-3 2.89-4.48 4.43 15.91 16.55 24 37.84 24 63.36-.03 25.78-8.09 47.74-24.02 65.34z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m181.23 78.6c1.55 0 21.69 12.71 22.13 46.88.45 35.05-19.72 52.36-21 52.58s-14.24-13.36-14.24-14.46 15.48-11.84 14.68-35.49c-.88-25.85-14.9-34.61-14.9-35.71s11.36-13.8 13.33-13.8z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m182.27 186.06c-3.3 0-5.66-2-7-3.15a116.63 116.63 0 0 1 -8.33-8.18c-5.38-5.77-6.84-7.8-6.84-11.14s1.95-5.44 3.51-7a36.5 36.5 0 0 0 11.17-28.17c-.62-18.22-8.47-26.06-11.43-29-1.38-1.38-3.47-3.46-3.47-7 0-2.85.77-4.92 8.1-12.77 6.54-7 9.52-9 13.27-9 6.39 0 14.57 9.16 18 14 5.39 7.6 11.86 20.84 12.12 40.78.26 20.16-5.82 34.79-11 43.52-.09.16-9.41 15.83-16.75 17.05a8.38 8.38 0 0 1 -1.35.06zm-3.65-22.25c1.08 1.15 2.26 2.38 3.38 3.5 5.11-6.17 13.64-19.82 13.36-41.74-.27-21.48-8.94-32.54-13.77-37-1.06 1.07-2.22 2.3-3.28 3.47 4.9 5.87 11.81 17 12.45 35.83a51.81 51.81 0 0 1 -12.14 35.95z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m151.07 128.11c0 15.17-10.17 28.47-26.79 27.47-14.77-.89-26.79-12.3-26.79-27.47s10.76-27.07 26.79-27.47c15.83-.39 26.79 12.3 26.79 27.47z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m126.06 163.63q-1.12 0-2.27-.07c-19.56-1.18-34.31-16.42-34.31-35.45 0-20 14.55-35 34.59-35.47a33.24 33.24 0 0 1 24.35 9.36 36.5 36.5 0 0 1  10.65 26.09c0 10.56-4 20.4-11 27a31.37 31.37 0 0 1 -22.01 8.54zm-1.07-55h-.52c-11.18.28-19 8.29-19 19.47 0 10.44 8.29 18.82 19.27 19.48a15.85 15.85 0 0 0 12.33-4.15c3.8-3.58 6-9.17 6-15.34a20.43 20.43 0 0 0 -5.82-14.64 17.14 17.14 0 0 0 -12.25-4.82z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m40.59 49.24c-1.28 0-33.08 24.32-33.08 76 0 53.23 30.89 81.28 32.64 81.49s16.43-13.58 16.43-14.68-26.95-20.59-26.95-65.28 26.73-61.33 26.73-62.85c0-.92-12.26-14.68-15.77-14.68z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m74.77 78.6c-1.55 0-21.69 12.71-22.13 46.88-.45 35.05 19.72 52.36 21 52.58s14.24-13.36 14.24-14.46-15.48-11.84-14.68-35.49c.88-25.85 14.9-34.61 14.9-35.71s-11.36-13.8-13.33-13.8z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m215.41 49.24c1.28 0 33.08 24.32 33.08 76 0 53.23-30.89 81.28-32.64 81.49s-16.43-13.58-16.43-14.68 26.95-20.59 26.95-65.28-26.73-61.36-26.73-62.87c0-.9 12.26-14.66 15.77-14.66z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m181.23 78.6c1.55 0 21.69 12.71 22.13 46.88.45 35.05-19.72 52.36-21 52.58s-14.24-13.36-14.24-14.46 15.48-11.84 14.68-35.49c-.88-25.85-14.9-34.61-14.9-35.71s11.36-13.8 13.33-13.8z"
+        fill="#47BCEE"
+      />
+      <path
+        d="m151.07 128.11c0 15.17-10.17 28.47-26.79 27.47-14.77-.89-26.79-12.3-26.79-27.47s10.76-27.07 26.79-27.47c15.83-.39 26.79 12.3 26.79 27.47z"
+        fill="#e83a2a"
+      />
+    </svg>
+  );
+}

components/layout/CommunityLayout.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Head from '../Head';
+import Container from './Container';
+import NavBar from '../navigation/NavBar';
+import StickyNavbar from '../navigation/StickyNavbar';
+
+
+export default function CommunityLayout({
+  title,
+  description,
+  children,
+  wide = true,
+}) {
+  return (
+    <>
+      <Head title={title} description={description} />
+      <StickyNavbar>
+        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
+      </StickyNavbar>
+      <Container wide={wide}>{children}</Container>
+    </>
+  );
+}

components/layout/GenericLayout.js

@@ -1,33 +1,36 @@
-import Head from '../Head'
-import NavBar from '../navigation/NavBar'
-import Container from './Container'
-import Footer from '../Footer'
-import AnnouncementHero from '../campaigns/AnnoucementHero'
-import StickyNavbar from '../navigation/StickyNavbar'
+import Head from '../Head';
+import NavBar from '../navigation/NavBar';
+import Container from './Container';
+import Footer from '../Footer';
+import AnnouncementHero from '../campaigns/AnnoucementHero';
+import StickyNavbar from '../navigation/StickyNavbar';
 
 export default function GenericLayout({
   title,
   description,
   image,
   children,
-  wide = true
+  wide = true,
+  hideBanner = false,
 }) {
-  if (!title || !description || !image) throw new Error('Props `title`, `description`, and `image` are required at GenericLayout component.')
-
+  if (!title || !description || !image)
+    throw new Error(
+      'Props `title`, `description`, and `image` are required at GenericLayout component.'
+    );
+
   return (
     <>
-      <Head
-        title={title}
-        description={description}
-        image={image}
-      />
-     <StickyNavbar>
-       <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
-     </StickyNavbar>
+      <Head title={title} description={description} image={image} />
+      <StickyNavbar>
+        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
+      </StickyNavbar>
       <Container wide={wide}>
-        <AnnouncementHero className="text-center my-4" small={true} />
+        <AnnouncementHero
+          className={`text-center m-4 ${hideBanner && 'hidden'}`}
+          small={true}
+        />
         {children}
       </Container>
     </>
-  )
+  );
 }

components/layout/Layout.js

@@ -18,26 +18,26 @@ export default function Layout({ children }) {
       <DocsLayout post={post} navItems={allDocPosts}>
         {children}
       </DocsLayout>
-    )
+    );
   } else if (pathname.startsWith('/blog/')) {
     const post = getPostBySlug(pathname, 'blog')
     return (
       <BlogLayout post={post} navItems={posts["blog"]}>
         {children}
       </BlogLayout>
-    )
+    );
   } else if (pathname === '/blog') {
     return (
       <BlogContext.Provider value={{ navItems: posts["blog"] }}>
         {children}
       </BlogContext.Provider>
-    )
+    );
   } else if (pathname === '/jobs') {
     return (
       <JobsContext.Provider value={{ navItems: posts["jobs"] }}>
         {children}
       </JobsContext.Provider>
-    )
+    );
   } else if (pathname.startsWith('/jobs/')) {
     const post = getPostBySlug(pathname, 'jobs')
     return (
@@ -46,13 +46,9 @@ export default function Layout({ children }) {
       </JobsLayout>
     )
   } else {
-    const post = getPostBySlug(pathname)
+    const post = getPostBySlug(pathname);
     if (post) {
-      return (
-        <GenericPostLayout post={post}>
-          {children}
-        </GenericPostLayout>
-      )
+      return <GenericPostLayout post={post}>{children}</GenericPostLayout>;
     }
   }