chore: use cms w/ open authoring for site edits (#3287)

decaporg · Feb 19, 2020 · 783440e · 783440e
1 parent bcdd680
commit 783440e
Show file tree

Hide file tree

Showing 13 changed files with 411 additions and 305 deletions.
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -1,42 +1,15 @@
 const pkg = require('./package.json');
+const fs = require('fs');
+const yaml = require('js-yaml');
+
+const staticConfig = yaml.safeLoad(fs.readFileSync('./site.yml', 'utf8'));
 
 module.exports = {
   siteMetadata: {
     title: 'Netlify CMS | Open-Source Content Management System',
     description: 'Open source content management for your Git workflow',
     siteUrl: pkg.homepage,
-    menu: {
-      docs: [
-        {
-          name: 'start',
-          title: 'Quick Start',
-        },
-        {
-          name: 'features',
-          title: 'Features',
-        },
-        {
-          name: 'reference',
-          title: 'Reference',
-        },
-        {
-          name: 'media',
-          title: 'Media',
-        },
-        {
-          name: 'guides',
-          title: 'Guides',
-        },
-        {
-          name: 'customization',
-          title: 'Customization',
-        },
-        {
-          name: 'contributing',
-          title: 'Contributing',
-        },
-      ],
-    },
+    menu: staticConfig.menu,
   },
   plugins: [
     {

diff --git a/website/package.json b/website/package.json
@@ -15,24 +15,25 @@
   "dependencies": {
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
-    "dayjs": "^1.8.19",
+    "dayjs": "^1.8.20",
     "emotion-theming": "^10.0.27",
-    "gatsby": "2.19.12",
+    "gatsby": "2.19.18",
     "gatsby-plugin-catch-links": "2.1.25",
     "gatsby-plugin-emotion": "^4.1.22",
     "gatsby-plugin-manifest": "2.2.41",
-    "gatsby-plugin-netlify-cms": "^4.1.38",
+    "gatsby-plugin-netlify-cms": "^4.1.40",
     "gatsby-plugin-react-helmet": "3.1.22",
     "gatsby-remark-autolink-headers": "2.1.24",
     "gatsby-remark-external-links": "^0.0.4",
     "gatsby-remark-prismjs": "3.3.31",
     "gatsby-source-filesystem": "2.1.48",
     "gatsby-transformer-json": "2.2.26",
-    "gatsby-transformer-remark": "2.6.50",
-    "gatsby-transformer-yaml": "2.2.24",
+    "gatsby-transformer-remark": "2.6.52",
+    "gatsby-transformer-yaml": "2.2.25",
+    "js-yaml": "^3.13.1",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
-    "netlify-cms-app": "^2.11.13",
+    "netlify-cms-app": "^2.11.20",
     "prismjs": "^1.19.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -43,7 +44,7 @@
   },
   "devDependencies": {
     "babel-plugin-prismjs": "^2.0.1",
-    "babel-preset-gatsby": "^0.2.28",
+    "babel-preset-gatsby": "^0.2.29",
     "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.20.1"
   },

diff --git a/website/site.yml b/website/site.yml
@@ -0,0 +1,16 @@
+menu:
+  docs:
+    - name: start
+      title: Quick Start
+    - name: features
+      title: Features
+    - name: reference
+      title: Reference
+    - name: media
+      title: Media
+    - name: guides
+      title: Guides
+    - name: customization
+      title: Customization
+    - name: contributing
+      title: Contributing
diff --git a/website/src/cms/cms.js b/website/src/cms/cms.js
@@ -2,92 +2,135 @@ import React from 'react';
 import CMS from 'netlify-cms-app';
 import dayjs from 'dayjs';
 import Prism from 'prismjs';
+import { CacheProvider } from '@emotion/core';
+import createCache from '@emotion/cache';
 import { BlogPostTemplate } from '../templates/blog-post';
+import { LayoutTemplate as Layout } from '../components/layout';
 import { DocsTemplate } from '../templates/doc-page';
 import WidgetDoc from '../components/widget-doc';
 import WhatsNew from '../components/whats-new';
 import Notification from '../components/notification';
 import Community from '../components/community';
+import siteConfig from '../../site.yml';
 
-const withHighlight = WrappedComponent =>
-  class Highlight extends React.Component {
-    constructor(props) {
-      super(props);
-      this.ref = React.createRef();
-    }
+let emotionCache;
+function getEmotionCache() {
+  const previewPaneIframe = document.querySelector('iframe[class*="PreviewPaneFrame"]');
+  const previewPaneHeadEl = previewPaneIframe.contentWindow.document.querySelector('head');
+  if (!emotionCache || emotionCache.sheet.container !== previewPaneHeadEl) {
+    emotionCache = createCache({ container: previewPaneHeadEl });
+  }
+  return emotionCache;
+}
 
-    highlight() {
-      Prism.highlightAllUnder(this.ref.current);
-    }
+const PreviewContainer = ({ children, highlight }) => (
+  <CacheProvider value={getEmotionCache()}>
+    <Layout>
+      {highlight ? <Highlight>{children}</Highlight> : children}
+    </Layout>
+  </CacheProvider>
+);
 
-    componentDidMount() {
-      this.highlight();
-    }
+class Highlight extends React.Component {
+  constructor(props) {
+    super(props);
+    this.ref = React.createRef();
+  }
 
-    componentDidUpdate() {
-      this.highlight();
-    }
+  highlight() {
+    setTimeout(() => {
+      if (this.ref.current) {
+        Prism.highlightAllUnder(this.ref.current);
+      }
+    })
+  }
 
-    render() {
-      return (
-        <div className="language-markup" ref={this.ref}>
-          <WrappedComponent {...this.props} />
-        </div>
-      );
-    }
-  };
+  componentDidMount() {
+    this.highlight();
+  }
+
+  componentDidUpdate() {
+    this.highlight();
+  }
+
+  render() {
+    return (
+      <div ref={this.ref}>
+        {this.props.children}
+      </div>
+    );
+  }
+};
 
 const BlogPostPreview = ({ entry, widgetFor }) => {
   const data = entry.get('data');
   return (
-    <BlogPostTemplate
-      title={data.get('title')}
-      author={data.get('author')}
-      date={dayjs(data.get('date')).format('MMMM D, YYYY')}
-      body={widgetFor('body')}
-    />
+    <PreviewContainer highlight={true}>
+      <BlogPostTemplate
+        title={data.get('title')}
+        author={data.get('author')}
+        date={dayjs(data.get('date')).format('MMMM D, YYYY')}
+        body={widgetFor('body')}
+      />
+    </PreviewContainer>
   );
 };
 
 const CommunityPreview = ({ entry }) => {
   const { title, headline, subhead, sections } = entry.get('data').toJS();
-  return <Community title={title} headline={headline} subhead={subhead} sections={sections} />;
+  return (
+    <PreviewContainer>
+      <Community title={title} headline={headline} subhead={subhead} sections={sections} />
+    </PreviewContainer>
+  );
 };
 
 const DocsPreview = ({ entry, widgetFor }) => (
-  <DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
+  <PreviewContainer highlight={true}>
+    <DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
+  </PreviewContainer>
 );
 
 const WidgetDocPreview = ({ entry, widgetFor }) => (
-  <WidgetDoc visible={true} label={entry.get('label')} body={widgetFor('body')} />
+  <PreviewContainer highlight={true}>
+    <WidgetDoc visible={true} label={entry.get('label')} body={widgetFor('body')} />
+  </PreviewContainer>
 );
 
 const ReleasePreview = ({ entry }) => (
-  <WhatsNew
-    updates={entry
-      .getIn(['data', 'updates'])
-      .map(release => ({
-        version: release.get('version'),
-        date: dayjs(release.get('date')).format('MMMM D, YYYY'),
-        description: release.get('description'),
-      }))
-      .toJS()}
-  />
+  <PreviewContainer highlight={true}>
+    <WhatsNew
+      updates={entry
+        .getIn(['data', 'updates'])
+        .map(release => ({
+          version: release.get('version'),
+          date: dayjs(release.get('date')).format('MMMM D, YYYY'),
+          description: release.get('description'),
+        }))
+        .toJS()}
+    />
+  </PreviewContainer>
 );
 
-const NotificationPreview = ({ entry }) =>
-  entry
-    .getIn(['data', 'notifications'])
-    .filter(notif => notif.get('published'))
-    .map((notif, idx) => (
-      <Notification key={idx} url={notif.get('url')} loud={notif.get('loud')}>
-        {notif.get('message')}
-      </Notification>
-    ));
+const NotificationPreview = ({ entry }) => (
+  <PreviewContainer>
+    {entry
+      .getIn(['data', 'notifications'])
+      .filter(notif => notif.get('published'))
+      .map((notif, idx) => (
+        <Notification key={idx} url={notif.get('url')} loud={notif.get('loud')}>
+          {notif.get('message')}
+        </Notification>
+      ))
+    }
+  </PreviewContainer>
+);
 
-CMS.registerPreviewTemplate('blog', withHighlight(BlogPostPreview));
-CMS.registerPreviewTemplate('docs', withHighlight(DocsPreview));
-CMS.registerPreviewTemplate('widget_docs', withHighlight(WidgetDocPreview));
+CMS.registerPreviewTemplate('blog', BlogPostPreview);
+siteConfig.menu.docs.forEach(group => {
+  CMS.registerPreviewTemplate(`docs_${group.name}`, DocsPreview);
+});
+CMS.registerPreviewTemplate('widget_docs', WidgetDocPreview);
 CMS.registerPreviewTemplate('releases', ReleasePreview);
 CMS.registerPreviewTemplate('notifications', NotificationPreview);
 CMS.registerPreviewTemplate('community', CommunityPreview);
diff --git a/website/src/components/edit-link.js b/website/src/components/edit-link.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/core';
 
-const EditLink = ({ path }) => (
+const EditLink = ({ collection, filename }) => (
   <div
     css={css`
       float: right;
@@ -15,7 +15,7 @@ const EditLink = ({ path }) => (
       }
     `}
   >
-    <a href={`https://github.com/netlify/netlify-cms/blob/master/website/content/${path}`}>
+    <a href={`/admin/#/edit/${collection}/${filename}`} target="_blank">
       <svg
         version="1.1"
         id="pencil"

diff --git a/website/src/components/layout.js b/website/src/components/layout.js
@@ -28,15 +28,26 @@ const LAYOUT_QUERY = graphql`
   }
 `;
 
+export const LayoutTemplate = ({ children }) => (
+  <ThemeProvider theme={theme}>
+    <GlobalStyles />
+    {children}
+  </ThemeProvider>
+)
+
 const Layout = ({ hasPageHero, children }) => {
   return (
     <StaticQuery query={LAYOUT_QUERY}>
       {data => {
         const { title, description } = data.site.siteMetadata;
 
         return (
-          <ThemeProvider theme={theme}>
-            <GlobalStyles />
+          <LayoutTemplate
+            title={title}
+            description={description}
+            hasPageHero={hasPageHero}
+            footerButtons={data.footer.childDataYaml.footer.buttons}
+          >
             <Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
               <meta name="description" content={description} />
               <link
@@ -47,7 +58,7 @@ const Layout = ({ hasPageHero, children }) => {
             <Header hasHeroBelow={hasPageHero} />
             {children}
             <Footer buttons={data.footer.childDataYaml.footer.buttons} />
-          </ThemeProvider>
+          </LayoutTemplate>
         );
       }}
     </StaticQuery>

diff --git a/website/src/components/markdown.js b/website/src/components/markdown.js
@@ -125,12 +125,11 @@ const StyledMarkdown = styled.div`
   }
 `;
 
-const Markdown = ({ html }) => {
-  if (React.isValidElement(html)) {
-    return html;
-  } else {
-    return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
+const Markdown = ({ body, html }) => {
+  if (body) {
+    return <StyledMarkdown>{body}</StyledMarkdown>
   }
+  return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
 };
 
 export default Markdown;
diff --git a/website/src/components/sidebar-layout.js b/website/src/components/sidebar-layout.js
@@ -15,12 +15,12 @@ const SidebarLayout = ({ sidebar, children }) => (
     css={css`
       ${mq[1]} {
         display: grid;
-        grid-template-columns: 300px 1fr;
+        grid-template-columns: ${sidebar ? '300px' : ''} minmax(0, 1fr);
         grid-gap: 2rem;
       }
     `}
   >
-    <div>{sidebar}</div>
+    {sidebar && <div>{sidebar}</div>}
     <Children>{children}</Children>
   </Page>
 );

diff --git a/website/src/components/widget-doc.js b/website/src/components/widget-doc.js
@@ -10,7 +10,7 @@ const WidgetDoc = ({ visible, label, body, html }) => {
   return (
     <div>
       <h3>{label}</h3>
-      <Markdown html={body || html} />
+      <Markdown html={html} body={body} />
     </div>
   );
 };