docs: update community info with channel links (#2403)

website/src/pages/community.js

@@ -1,30 +1,20 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import Markdown from 'react-markdown';
 import { graphql } from 'gatsby';
 
 import Layout from '../components/layout';
-import EventWidget from '../components/event-widget';
 import Markdownify from '../components/markdownify';
 
 import '../css/imports/collab.css';
 
 const CommunityPage = ({ data }) => {
-  const {
-    title,
-    headline,
-    subhead,
-    primarycta,
-    upcomingevent,
-    howitworks,
-    howtojoin,
-  } = data.markdownRemark.frontmatter;
+  const { title, headline, subhead, sections } = data.markdownRemark.frontmatter;
 
   return (
     <Layout>
       <div className="community page">
         <Helmet title={title} />
-        <section className="community hero">
+        <section className="hero">
           <div className="contained">
             <div className="hero-copy">
               <h1 className="headline">
@@ -33,36 +23,28 @@ const CommunityPage = ({ data }) => {
               <h2 className="subhead">
                 <Markdownify source={subhead} />
               </h2>
-              <h3 className="ctas">
-                <ul>
-                  <li>
-                    <Markdownify source={primarycta} />
-                  </li>
-                </ul>
-              </h3>
-            </div>
-
-            <div className="calendar-cta">
-              <h2>{upcomingevent.hook}</h2>
-              <EventWidget />
-              <div className="cal-cta">
-                <Markdownify source={primarycta} />
-              </div>
             </div>
           </div>
         </section>
 
-        <section className="how-it-works clearfix">
+        <section className="community-channels clearfix">
           <div className="contained">
             <div className="half">
-              <h4 className="section-label">How it works</h4>
-              <p>
-                <Markdown source={howitworks} />
-              </p>
-              <h4 className="section-label">How to join</h4>
-              <p>
-                <Markdown source={howtojoin} />
-              </p>
+              {sections.map(({ title: sectionTitle, channels }, channelIdx) => (
+                <React.Fragment key={channelIdx}>
+                  <h4 className="section-label">{sectionTitle}</h4>
+                  <ul className="community-channels-list">
+                    {channels.map(({ title, description, url }, idx) => (
+                      <li key={idx}>
+                        <a href={url}>
+                          <strong>{title}</strong>
+                          <p>{description}</p>
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </React.Fragment>
+              ))}
             </div>
           </div>
         </section>
@@ -77,12 +59,14 @@ export const pageQuery = graphql`
       frontmatter {
         headline
         subhead
-        primarycta
-        upcomingevent {
-          hook
+        sections {
+          title
+          channels {
+            title
+            description
+            url
+          }
         }
-        howitworks
-        howtojoin
       }
     }
   }

website/src/pages/index.js

@@ -16,7 +16,7 @@ import '../css/imports/community.css';
 const Features = ({ items }) =>
   items.map(item => (
     <div className="feature" key={item.feature}>
-      {item.imgpath && <img src={require(`../img/${item.imgpath}`)} />}
+      {item.imgpath && <img src={require(`../img/${item.imgpath}`)} alt="" />}
       <h3>
         <Markdownify source={item.feature} />
       </h3>