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

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);

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"

website/src/components/layout.js

@@ -28,6 +28,13 @@ const LAYOUT_QUERY = graphql`
   }
 `;
 
+export const LayoutTemplate = ({ children }) => (
+  <ThemeProvider theme={theme}>
+    <GlobalStyles />
+    {children}
+  </ThemeProvider>
+)
+
 const Layout = ({ hasPageHero, children }) => {
   return (
     <StaticQuery query={LAYOUT_QUERY}>
@@ -35,8 +42,12 @@ const Layout = ({ hasPageHero, children }) => {
         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>

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;

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>
 );

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>
   );
 };

website/src/templates/blog-post.js

@@ -24,7 +24,7 @@ export const BlogPostTemplate = ({ title, author, date, body, html }) => (
       <MetaInfo>
         by {author} on {date}
       </MetaInfo>
-      <Markdown html={body || html} />
+      <Markdown body={body} html={html} />
     </Page>
   </Container>
 );

website/src/templates/doc-page.js

@@ -4,13 +4,17 @@ import { graphql } from 'gatsby';
 import 'prismjs/themes/prism-tomorrow.css';
 
 import Layout from '../components/layout';
-import EditLink from '../components/edit-link';
-import Widgets from '../components/widgets';
 import DocsNav from '../components/docs-nav';
 import Container from '../components/container';
 import SidebarLayout from '../components/sidebar-layout';
+import EditLink from '../components/edit-link';
+import Widgets from '../components/widgets';
 import Markdown from '../components/markdown';
 
+function filenameFromPath(p) {
+  return p.split('/').slice(-1)[0].split('.')[0];
+}
+
 const toMenu = (menu, nav) =>
   menu.map(group => ({
     title: group.title,
@@ -25,7 +29,7 @@ const DocsSidebar = ({ docsNav, location }) => (
 
 export const DocsTemplate = ({
   title,
-  editLinkPath,
+  filename,
   body,
   html,
   showWidgets,
@@ -33,15 +37,18 @@ export const DocsTemplate = ({
   showSidebar,
   docsNav,
   location,
+  group,
 }) => (
   <Container size="md">
     <SidebarLayout
-      sidebar={<div>{showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}</div>}
+      sidebar={showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}
     >
       <article data-docs-content>
-        {editLinkPath && <EditLink path={editLinkPath} />}
+        {filename && (
+          <EditLink collection={`docs_${group}`} filename={filename} />
+        )}
         <h1>{title}</h1>
-        <Markdown html={body || html} />
+        <Markdown body={body} html={html} />
         {showWidgets && <Widgets widgets={widgets} />}
       </article>
     </SidebarLayout>
@@ -49,22 +56,25 @@ export const DocsTemplate = ({
 );
 
 const DocPage = ({ data, location }) => {
-  const { nav, page, widgets, menu } = data;
+  const { nav, page: { frontmatter, html, fields }, widgets, menu } = data;
+  const { title, group } = frontmatter
 
   const docsNav = toMenu(menu.siteMetadata.menu.docs, nav);
   const showWidgets = location.pathname.indexOf('/docs/widgets') !== -1;
+  const filename = filenameFromPath(fields.path);
 
   return (
     <Layout>
-      <Helmet title={page.frontmatter.title} />
+      <Helmet title={title} />
       <DocsTemplate
-        title={page.frontmatter.title}
-        editLinkPath={page.fields.path}
-        html={page.html}
+        title={title}
+        filename={filename}
+        html={html}
         showWidgets={showWidgets}
         widgets={widgets}
         docsNav={docsNav}
         location={location}
+        group={group}
         showSidebar
       />
     </Layout>
@@ -79,6 +89,7 @@ export const pageQuery = graphql`
       }
       frontmatter {
         title
+        group
       }
       html
     }