fix: minor fixes (#1315)

asyncapi · Feb 14, 2023 · fb6ffac · fb6ffac
1 parent dc54d5a
commit fb6ffac
Show file tree

Hide file tree

Showing 25 changed files with 73 additions and 127 deletions.
diff --git a/components/Calendar.js b/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}

diff --git a/components/navigation/communityItems.js b/components/navigation/communityItems.js
@@ -6,10 +6,11 @@ import IconDashboard from '../icons/Dashboard'
 import IconTSC from '../icons/TSC'
 import IconMeetings from '../icons/Meetings'
 import IconNewsroom from '../icons/Newsroom'
+import IconOverview from '../icons/Overview'
 
 
 export default [
-
+  { icon: IconOverview, title: 'Overview', href: '/community', description: 'Connect, share, and learn.' },
   { icon: IconTools, title: 'Tools & Services', href: '/tools', description: 'Explore the tools and services our awesome community has created.' },
   { icon: IconGithubOrganization, title: 'GitHub Organization', href: 'https://github.com/asyncapi', target: '_blank', description: 'Want to sneak in the code? Everything we do is open-sourced in our GitHub organization.' },
   { icon: IconSlack, title: 'Slack Workspace', href: 'https://asyncapi.com/slack-invite', target: '_blank', description: `Need help? Want to share something? Join our Slack workspace. We're nice people :)` },

diff --git a/lib/staticHelpers.js b/lib/staticHelpers.js
@@ -1,4 +1,5 @@
 import { getPostBySlug, getAllPosts } from './api'
+import moment from 'moment';
 // import markdownToHtml from './markdownToHtml'
 
 export function getStaticPropsHelper(path) {
@@ -59,3 +60,14 @@ export function getStaticPathsHelper(path) {
     }
   }
 }
+
+export function getEvents(events, size) {
+    let meetingsWithDates = events.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);
+  }
diff --git a/pages/community/events/index.js b/pages/community/events/index.js
@@ -1,6 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { useState } from 'react';
-import Button from '../../../components/buttons/Button';
 import GoogleCalendarButton from '../../../components/buttons/GoogleCalendarButton';
 import ICSFileButton from '../../../components/buttons/ICSFileButton';
 import Heading from '../../../components/typography/Heading';

diff --git a/pages/community/index.js b/pages/community/index.js
@@ -5,8 +5,9 @@ import Button from '../../components/buttons/Button';
 import IconRocket from '../../components/icons/Rocket';
 import NewsletterSubscribe from '../../components/NewsletterSubscribe';
 import GenericLayout from '../../components/layout/GenericLayout';
-import Link from 'next/link';
 import orbitData from '../../config/orbitData.json';
+import { getEvents } from '../../lib/staticHelpers';
+import eventsData from '../../config/meetings.json';
 
 function CommunityIndexPage() {
   const image = '/img/social/website-card.png';
@@ -89,7 +90,7 @@ function CommunityIndexPage() {
       <div className="gh-img mt-10 md:mt-0 w-full h-auto w-full object-contain">
         <img
           className="gh-img object-contain"
-          src="/img/homepage/discuss-page.png"
+          src="/img/homepage/discuss-page.webp"
           alt="github-discussion"
         />
       </div>
@@ -137,14 +138,14 @@ function CommunityIndexPage() {
               <Button
                 text="Become an ambassador"
                 buttonSize="medium"
-                href="/community/ambassador-program"
+                href="/community/ambassadors"
               />
             </div>
           </div>
         </div>
         <div className="w-full h-fit-content md:w-3/6 flex justify-end rounded-lg">
           <img
-            src="/img/homepage/ambassador.png"
+            src="/img/homepage/ambassador.webp"
             alt="slack-cover"
             className="md:rounded-r-lg object-fit "
           />
@@ -177,8 +178,9 @@ function CommunityIndexPage() {
               className="text-sm mt-10"
             >
               Join an AsyncAPI meeting from anywhere in the world! We host both
-              live and recorded community events. You can also sign up for
-              our community newsletter to stay up-to-date on all meetings and events.
+              live and recorded community events. You can also sign up for our
+              community newsletter to stay up-to-date on all meetings and
+              events.
             </Heading>
             <div className="mt-10">
               <Button
@@ -193,94 +195,31 @@ function CommunityIndexPage() {
         <div className="w-full md:h-full md:w-3/5 flex relative justify-end  bg-eventCover bg-cover bg-center">
           <div className="bg-primary-500 w-full opacity-25 rounded-b-lg md:rounded-b-none md:rounded-r-lg" />
           <div className="absolute h-full w-full hidden md:flex justify-end">
-            <div className="w-4/5 mt-10">
-              <div className="bg-white w-full p-2 md:p-4 rounded-l-md">
-                <div className="flex">
-                  <div className="flex justify-center flex-col w-24 md:w-40 bg-pink-400 p-1 md:p-4 rounded-md text-xs md:text-sm font-semibold text-white">
-                    <span className="text-center">Conference</span>
-                  </div>
-                  <div className="ml-4 text-left">
-                    <h1 className="text-md md:text-xl">AsyncAPI Conference</h1>
-                    <span className="text-gray-500 text-xs md:text-sm">
-                      3rd Nov, 2022 - 5th Nov, 2022
-                    </span>
-                  </div>
-                </div>
-                <div
-                  className="w-full bg-gray-200 mt-4"
-                  style={{ height: '1px' }}
-                />
-                <div className="flex mt-2 justify-between">
-                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                    <h1 className="text-sm md:text-2xl">91</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Days left
-                    </div>
-                  </div>
-                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                    <h1 className="text-sm md:text-2xl">40</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Talks
-                    </div>
-                  </div>
-                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                    <h1 className="text-sm md:text-2xl">1.4k</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Attendees
-                    </div>
-                  </div>
-                  <div className="text-left">
-                    <h1 className="text-sm md:text-2xl">91</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Days left
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-white mt-10 w-full p-2 md:p-4 rounded-l-md">
-                <div className="flex">
-                  <div className="flex w-24 md:w-40 justify-center flex-col w-24 md:w-40 bg-secondary-500 p-1 md:p-4 rounded-md text-xs md:text-sm font-semibold text-white">
-                    <span className="text-center">Spec 3.0</span>
-                  </div>
-                  <div className="ml-4 text-left">
-                    <h1 className="text-md md:text-xl">Spec 3.0</h1>
-                    <span className="text-gray-500 text-xs md:text-sm">
-                      3rd Nov, 2022 - 5th Nov, 2022
-                    </span>
-                  </div>
-                </div>
-                <div
-                  className="w-full bg-gray-200 mt-4"
-                  style={{ height: '1px' }}
-                />
-                <div className="flex mt-2 justify-between">
-                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                    <h1 className="text-sm md:text-2xl">91</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Days left
-                    </div>
-                  </div>
-                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                    <h1 className="text-sm md:text-2xl">40</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Talks
-                    </div>
-                  </div>
-                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                    <h1 className="text-sm md:text-2xl">1.4k</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Attendees
-                    </div>
-                  </div>
-                  <div className="text-left">
-                    <h1 className="text-sm md:text-2xl">91</h1>
-                    <div className="text-gray-500 text-xs md:text-sm">
-                      Days left
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <ul className="w-4/5 mt-10">
+              {getEvents(eventsData, 3).map((event, index) => {
+                return (
+                  <li
+                    key={index}
+                    className="bg-white w-full p-2 md:p-4 rounded-l-md"
+                  >
+                    <a href={event.url} className="flex">
+                      <div className="flex justify-center flex-col w-24 md:w-40 bg-pink-400 p-1 md:p-4 rounded-md text-xs md:text-sm font-semibold text-white">
+                        <span className="text-center">
+                          {event.title.split(' ')[0]}
+                        </span>
+                      </div>
+                      <div className="ml-4 text-left">
+                        <h1 className="text-md md:text-xl">{event.title}</h1>
+                        <span className="text-gray-500 text-xs md:text-sm">
+                          {event.date.local().format('LLLL')} UTC
+                          {event.date.local().format('Z')}
+                        </span>
+                      </div>
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
           </div>
         </div>
       </div>
@@ -315,8 +254,15 @@ function CommunityIndexPage() {
           </a>
         </div>
         <div className="h-full cursor-pointer rounded-lg shadow-lg bg-usecases bg-cover bg-center mt-10 relative md:w-[49%] md:mt-0">
-          <Link href="/community/contributors">
+          <a
+            href="https://github.com/orgs/asyncapi/discussions/593"
+            target="_blank"
+            rel="noreferrer"
+          >
             <div>
+              <div className="absolute p-2 bg-primary-600 text-white font-bold rounded-tl-lg">
+                Coming Soon
+              </div>
               <div className="w-full h-full absolute rounded-lg" />
               <div className="w-full h-full flex flex-col justify-end absolute">
                 <div className="bg-yellow-600 text-left rounded-b-lg p-5 ">
@@ -333,13 +279,13 @@ function CommunityIndexPage() {
                     textColor="text-white"
                     className="text-sm"
                   >
-                    Recognize the people who inspire and contribute
-                    to our OSS community.
+                    Recognize the people who inspire and contribute to our OSS
+                    community.
                   </Heading>
                 </div>
               </div>
             </div>
-          </Link>
+          </a>
         </div>
       </div>
       <div className="z-40 mt-[30rem] md:mt-10 bg-white w-full md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
@@ -368,9 +314,9 @@ function CommunityIndexPage() {
               className="text-slate-500 text-sm mt-10"
             >
               AsyncAPI’s incredible community of developers, designers,
-              technical writers, and more hail from over 83 countries. We actively
-              contribute, collaborate, and mentor others on how to build with
-              AsyncAPI.
+              technical writers, and more hail from over 83 countries. We
+              actively contribute, collaborate, and mentor others on how to
+              build with AsyncAPI.
             </Heading>
             <div className="mt-10">
               <Button

diff --git a/public/img/homepage/ambassador-cover.webp b/public/img/homepage/ambassador-cover.webp
diff --git a/public/img/homepage/ambassador.png b/public/img/homepage/ambassador.png
diff --git a/public/img/homepage/ambassador.webp b/public/img/homepage/ambassador.webp
diff --git a/public/img/homepage/discuss-page.png b/public/img/homepage/discuss-page.png
diff --git a/public/img/homepage/discuss-page.webp b/public/img/homepage/discuss-page.webp
diff --git a/public/img/homepage/event-cover.png b/public/img/homepage/event-cover.png
diff --git a/public/img/homepage/event-cover.webp b/public/img/homepage/event-cover.webp
diff --git a/public/img/homepage/gathering.jpg b/public/img/homepage/gathering.jpg
diff --git a/public/img/homepage/gathering.webp b/public/img/homepage/gathering.webp
diff --git a/public/img/homepage/mapbase.png b/public/img/homepage/mapbase.png
diff --git a/public/img/homepage/mapbase.webp b/public/img/homepage/mapbase.webp
diff --git a/public/img/homepage/roadmap.png b/public/img/homepage/roadmap.png
diff --git a/public/img/homepage/roadmap.webp b/public/img/homepage/roadmap.webp
diff --git a/public/img/homepage/slack-cover.jpeg b/public/img/homepage/slack-cover.jpeg
diff --git a/public/img/homepage/slack-cover.png b/public/img/homepage/slack-cover.png
diff --git a/public/img/homepage/slack-cover.webp b/public/img/homepage/slack-cover.webp
diff --git a/public/img/homepage/tutorials.png b/public/img/homepage/tutorials.png
diff --git a/public/img/homepage/usecases.png b/public/img/homepage/usecases.png
diff --git a/public/img/homepage/usecases.webp b/public/img/homepage/usecases.webp
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -76,11 +76,11 @@ function getColors(color, shades) {
 
 module.exports = {
   content: [
-    "./pages/**/*.{js,jsx}",
-    "./components/**/*.{js,jsx}",
-    "./config/tools.json"
+    './pages/**/*.{js,jsx}',
+    './components/**/*.{js,jsx}',
+    './config/tools.json',
   ],
-  theme:{
+  theme: {
     fontWeight: {
       'extra-light': 200,
       light: 300,
@@ -92,12 +92,13 @@ module.exports = {
       black: 900,
     },
     backgroundImage: {
-      eventCover: "url('/img/homepage/event-cover.png')",
-      channelCover: "url('/img/homepage/slack-cover.png')",
-      tutorialCover: "url('/img/homepage/tutorials.png')",
-      usecases: "url('/img/homepage/usecases.png')",
-      roadmapCover: "url('/img/homepage/roadmap.png')",
+      eventCover: "url('/img/homepage/event-cover.webp')",
+      channelCover: "url('/img/homepage/slack-cover.webp')",
+      usecases: "url('/img/homepage/usecases.webp')",
+      roadmapCover: "url('/img/homepage/roadmap.webp')",
       confBg: "url('/img/homepage/confBlurBg.webp')",
+      ambassadorCover: "url('/img/homepage/gathering.webp')",
+      mapCover: "url('/img/homepage/mapbase.webp')",
     },
     fontFamily: {
       sans: ['Inter', ...defaultTheme.fontFamily.sans],