chore: fix docs site cms

website/src/cms/cms.js

@@ -8,9 +8,13 @@ import WidgetDoc from '../components/widget-doc';
 import Release from '../components/release';
 import WhatsNew from '../components/whats-new';
 import Notification from '../components/notification';
+import Community from '../components/community';
+import '../css/imports/hero.css';
 import '../css/imports/docs.css';
 import '../css/imports/whatsnew.css';
 import '../css/imports/header.css';
+import '../css/imports/collab.css';
+import '../css/imports/community.css';
 
 const withHighlight = WrappedComponent =>
   class Highlight extends React.Component {
@@ -52,6 +56,11 @@ const BlogPostPreview = ({ entry, widgetFor }) => {
   );
 };
 
+const CommunityPreview = ({ entry }) => {
+  const { title, headline, subhead, sections } = entry.get('data').toJS();
+  return <Community title={title} headline={headline} subhead={subhead} sections={sections} />;
+};
+
 const DocsPreview = ({ entry, widgetFor }) => (
   <DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
 );
@@ -88,3 +97,4 @@ CMS.registerPreviewTemplate('docs', withHighlight(DocsPreview));
 CMS.registerPreviewTemplate('widget_docs', withHighlight(WidgetDocPreview));
 CMS.registerPreviewTemplate('releases', ReleasePreview);
 CMS.registerPreviewTemplate('notifications', NotificationPreview);
+CMS.registerPreviewTemplate('community', CommunityPreview);

website/src/components/community.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Markdownify from '../components/markdownify';
+
+const Community = ({ headline, subhead, sections }) => (
+  <div className="community page">
+    <section className="hero">
+      <div className="contained">
+        <div className="hero-copy">
+          <h1 className="headline">
+            <Markdownify source={headline} />
+          </h1>
+          <h2 className="subhead">
+            <Markdownify source={subhead} />
+          </h2>
+        </div>
+      </div>
+    </section>
+
+    <section className="community-channels clearfix">
+      <div className="contained">
+        <div className="half">
+          {sections.map(({ title: sectionTitle, channels }, channelIdx) => (
+            <React.Fragment key={channelIdx}>
+              <h4 className="section-label">{sectionTitle}</h4>
+              <ul className="community-channels-list">
+                {channels.map(({ title: channelTitle, description, url }, idx) => (
+                  <li key={idx}>
+                    <a href={url}>
+                      <strong>{channelTitle}</strong>
+                      <p>{description}</p>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </section>
+  </div>
+);
+
+export default Community;

website/src/pages/community.js

@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
 import { graphql } from 'gatsby';
 
 import Layout from '../components/layout';
-import Markdownify from '../components/markdownify';
+import Community from '../components/community';
 
 import '../css/imports/collab.css';
 
@@ -12,43 +12,8 @@ const CommunityPage = ({ data }) => {
 
   return (
     <Layout>
-      <div className="community page">
+      <Helmet title={title} />
-        <Helmet title={title} />
+      <Community headline={headline} subhead={subhead} sections={sections} />
-        <section className="hero">
-          <div className="contained">
-            <div className="hero-copy">
-              <h1 className="headline">
-                <Markdownify source={headline} />
-              </h1>
-              <h2 className="subhead">
-                <Markdownify source={subhead} />
-              </h2>
-            </div>
-          </div>
-        </section>
-
-        <section className="community-channels clearfix">
-          <div className="contained">
-            <div className="half">
-              {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>
-      </div>
     </Layout>
   );
 };

website/static/admin/config.yml

@@ -46,25 +46,27 @@ collections: # A list of collections the CMS should be able to edit
       - {label: "Body", name: "body", widget: "markdown"}
   - name: community
     label: Community
-    file: website/content/pages/community.md
+    files:
-    preview_path: "community"
+      - name: community
-    fields:
+        label: Community
-      - {label: Title, name: title}
+        file: website/content/pages/community.md
-      - {label: Headline, name: headline}
+        preview_path: "community"
-      - {label: Subheading, name: subhead}
-      - label: Sections
-        name: sections
-        widget: list
         fields:
-          - {name: title, label: Title}
+          - {label: Title, name: title}
-          - name: channels
+          - {label: Headline, name: headline}
-            label: Channels
+          - {label: Subheading, name: subhead}
+          - label: Sections
+            name: sections
             widget: list
             fields:
               - {name: title, label: Title}
-                {name: url, label: URL}
+              - name: channels
-                {name: description, label: Description}
+                label: Channels
-
+                widget: list
+                fields:
+                  - {name: title, label: Title}
+                  - {name: url, label: URL}
+                  - {name: description, label: Description}
   - name: updates
     label: Updates
     files: