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

website/src/components/docsearch.js

@@ -24,10 +24,10 @@ class DocSearch extends Component {
     }
 
     return (
-      <a className="utility-input">
-        <img src={searchIcon} />
+      <div className="utility-input">
+        <img src={searchIcon} alt="" />
         <input type="search" placeholder="Search the docs" className="algolia-search" />
-      </a>
+      </div>
     );
   }
 }

website/src/components/header.js

@@ -55,7 +55,7 @@ class Header extends Component {
               <div className="contained">
                 <div className="logo-container">
                   <Link to="/" className="logo">
-                    <img src={logo} />
+                    <img src={logo} alt="Netlify CMS" />
                   </Link>
                   <DocSearch />
                 </div>

website/src/components/video-embed.js

@@ -36,20 +36,23 @@ class VideoEmbed extends Component {
         frameBorder={0}
         allow="autoplay; encrypted-media"
         allowFullScreen
+        title="video_embed"
       />
     );
 
-    const imgPlaceholder = <img src={screenshotEditor} className="responsive" />;
+    const imgPlaceholder = (
+      <img src={screenshotEditor} className="responsive" alt="editor video screenshot" />
+    );
 
     return (
-      <a className="hero-graphic" onClick={this.toggleVideo}>
+      <div className="hero-graphic" onClick={this.toggleVideo}>
         {toggled ? embedcode : imgPlaceholder}
         {!toggled && (
           <div className="hero-videolink">
             <PlayIcon className="hero-videolink-arrow" />
           </div>
         )}
-      </a>
+      </div>
     );
   }
 }

website/src/css/imports/collab.css

@@ -1,5 +1,5 @@
 .collab,
-.how-it-works {
+.community-channels {
   margin: $medium $tiny;
 
   @media screen and (min-width: $mobile) {
@@ -40,7 +40,7 @@
   }
 }
 
-.how-it-works {
+.community-channels {
   padding-bottom: $xl;
   text-align: left;
 
@@ -52,3 +52,41 @@
     color: $darkGreen;
   }
 }
+
+.community-channels-list {
+  margin-left: 0;
+
+  li {
+    list-style-type: none;
+    margin-bottom: 24px;
+  }
+
+  a {
+    display: block;
+    font-weight: inherit;
+    position: relative;
+
+    &:focus,
+    &:active,
+    &:hover {
+      &:before {
+        display: block;
+      }
+    }
+
+    &:before {
+      display: none;
+      content: '';
+      position: absolute;
+      width: 3px;
+      height: 100%;
+      background-color: $darkGreen;
+      left: -16px;
+    }
+  }
+
+  p {
+    color: $grey;
+    margin-bottom: 0;
+  }
+}

website/src/css/imports/header.css

@@ -95,23 +95,6 @@ header {
     @media screen and (max-width: $tablet) {
       position: static;
     }
-
-    /*.nav-link {
-      @media screen and (min-width: 487px) and (max-width: 767px) {
-        margin-top: $micro;
-      }
-    }*/
-
-    /*.utility-input {
-      @media screen and (max-width: 767px) {
-        display: block;
-        height: $small;
-        margin: $tiny 0 0 0;
-      }
-      @media screen and (min-width: 487px) and (max-width: 767px) {
-        margin-top: 32px;
-      }
-    }*/
   }
 
   .nav-container {

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>