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

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