style(website): refreshed community page design

website/content/pages/community.md

@@ -3,28 +3,40 @@ title: Community
 headline: Help us build the CMS of the future.
 subhead: Get help, help others, and find out what's new through the channels below.
 sections:
-  - title: contribitung
+  - title: Contributing
     channels:
-      - title: Contrubutor guide
-        description: Instructions for contribitung to the project
-        url: /docs/contributor-guide
-  - title: communication
+      - title: Contributor guide
+        description: Instructions for contributing to the project
+        cta:
+          href: /docs/contributor-guide
+          label: Read the guide
+  - title: Communication
     channels:
       - title: Decap CMS Discord
         description: Live community chat for all things Decap CMS.
-        url: /chat
+        cta:
+          href: /chat
+          label: Join the chat
       - title: GitHub Issues
         description: Report bugs, request features, and comment on existing issues.
-        url: https://github.com/decaporg/decap-cms/issues
+        cta:
+          href: https://github.com/decaporg/decap-cms/issues
+          label: View issues
       - title: GitHub Discussions
         description: Ask questions and discuss ideas.
-        url: https://github.com/decaporg/decap-cms/discussions
-  - title: help
+        cta:
+          href: https://github.com/decaporg/decap-cms/discussions
+          label: View discussions
+  - title: Help
     channels:
       - title: Professional help
-        description: Our partners offer a range of services that can help you get the most out of Decap CMS. Find onboarding, priority support, and development of custom features.
-        url: /services
+        description: The team of maintainers offers a range of professional services to help you get the most out of Decap CMS. Find onboarding, priority support, and development of custom features.
+        cta:
+          href: /services
+          label: Find out more
       - title: Community help
-        description: Get help from the community on our Dicsord server's help channel.
-        url: /chat
+        description: Get help from the community on our Discord server's help channel.
+        cta:
+          href: /chat
+          label: Join the chat
 ---

website/gatsby-node.js

@@ -49,13 +49,12 @@ exports.createPages = async ({ graphql, actions }) => {
   });
 
   // redirects from older URLs
-  const { createRedirect } = actions
+  const { createRedirect } = actions;
 
   createRedirect({
     fromPath: `/docs/add-to-your-site/`,
     toPath: `/docs/basic-steps/`,
-  })
-
+  });
 };
 
 function pad(n) {

website/src/components/community-channels-list.js

@@ -1,58 +1,19 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
-import theme from '../theme';
-
-const StyledCommunityChannelsList = styled.ul`
-  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: ${theme.colors.primaryDark};
-      left: -16px;
-    }
-  }
-
-  p {
-    color: ${theme.colors.gray};
-    margin-bottom: 0;
-  }
-`;
+import Features from './features';
+import Grid from './grid';
 
 function CommunityChannelsList({ channels }) {
   return (
-    <StyledCommunityChannelsList>
-      {channels.map(({ title, description, url }, idx) => (
-        <li key={idx}>
-          <a href={url} rel="noopener noreferrer">
-            <strong>{title}</strong>
-            <p>{description}</p>
-          </a>
-        </li>
-      ))}
-    </StyledCommunityChannelsList>
+    <Grid cols={channels.length}>
+      <Features
+        items={channels.map(({ title, description, cta }) => ({
+          feature: title,
+          description,
+          cta,
+        }))}
+      />
+    </Grid>
   );
 }
 

website/src/components/community.js

@@ -6,41 +6,37 @@ import Markdownify from './markdownify';
 import PageHero from './page-hero';
 import HeroTitle from './hero-title';
 import Lead from './lead';
+import theme from '../theme';
 import Container from './container';
-import SectionLabel from './section-label';
-import Grid from './grid';
 import CommunityChannelsList from './community-channels-list';
-import theme from '../theme';
 
 function Community({ headline, subhead, sections }) {
   return (
-    <>
+    <Container size="md">
       <PageHero>
-        <HeroTitle>
-          <Markdownify source={headline} />
-        </HeroTitle>
-        <Lead light>
-          <Markdownify source={subhead} />
-        </Lead>
-      </PageHero>
+        <div
+          css={css`
+            margin-bottom: ${theme.space[7]};
+          `}
+        >
+          <HeroTitle>
+            <Markdownify source={headline} />
+          </HeroTitle>
+          <Lead light>
+            <Markdownify source={subhead} />
+          </Lead>
+        </div>
 
-      <Container>
-        <Grid cols={2}>
-          <div
-            css={css`
-              margin-bottom: ${theme.space[5]};
-            `}
-          >
-            {sections.map(({ title: sectionTitle, channels }, channelIdx) => (
-              <React.Fragment key={channelIdx}>
-                <SectionLabel>{sectionTitle}</SectionLabel>
-                <CommunityChannelsList channels={channels} />
-              </React.Fragment>
-            ))}
-          </div>
-        </Grid>
-      </Container>
-    </>
+        {sections.map(({ title: sectionTitle, channels }, channelIdx) => (
+          <React.Fragment key={channelIdx}>
+            <h2>
+              <Markdownify source={sectionTitle} />
+            </h2>
+            <CommunityChannelsList channels={channels} />
+          </React.Fragment>
+        ))}
+      </PageHero>
+    </Container>
   );
 }
 

website/src/global-styles.js

@@ -119,7 +119,6 @@ const globalStyles = css`
   .right {
     float: right;
   }
-
 `;
 
 function GlobalStyles() {

website/src/pages/community.js

@@ -28,7 +28,10 @@ export const pageQuery = graphql`
           channels {
             title
             description
-            url
+            cta {
+              href
+              label
+            }
           }
         }
       }