fix: add 'rel' attirubte to edit link (#3293)

website/src/cms/cms.js

@@ -25,9 +25,7 @@ function getEmotionCache() {
 
 const PreviewContainer = ({ children, highlight }) => (
   <CacheProvider value={getEmotionCache()}>
-    <Layout>
+    <Layout>{highlight ? <Highlight>{children}</Highlight> : children}</Layout>
-      {highlight ? <Highlight>{children}</Highlight> : children}
-    </Layout>
   </CacheProvider>
 );
 
@@ -42,7 +40,7 @@ class Highlight extends React.Component {
       if (this.ref.current) {
         Prism.highlightAllUnder(this.ref.current);
       }
-    })
+    });
   }
 
   componentDidMount() {
@@ -54,13 +52,9 @@ class Highlight extends React.Component {
   }
 
   render() {
-    return (
+    return <div ref={this.ref}>{this.props.children}</div>;
-      <div ref={this.ref}>
+  }
-        {this.props.children}
-      </div>
-    );
 }
-};
 
 const BlogPostPreview = ({ entry, widgetFor }) => {
   const data = entry.get('data');
@@ -121,8 +115,7 @@ const NotificationPreview = ({ entry }) => (
         <Notification key={idx} url={notif.get('url')} loud={notif.get('loud')}>
           {notif.get('message')}
         </Notification>
-      ))
+      ))}
-    }
   </PreviewContainer>
 );
 

website/src/components/edit-link.js

@@ -15,7 +15,7 @@ const EditLink = ({ collection, filename }) => (
       }
     `}
   >
-    <a href={`/admin/#/edit/${collection}/${filename}`} target="_blank">
+    <a href={`/admin/#/edit/${collection}/${filename}`} target="_blank" rel="noopener noreferrer">
       <svg
         version="1.1"
         id="pencil"

website/src/components/layout.js

@@ -33,7 +33,7 @@ export const LayoutTemplate = ({ children }) => (
     <GlobalStyles />
     {children}
   </ThemeProvider>
-)
+);
 
 const Layout = ({ hasPageHero, children }) => {
   return (

website/src/components/markdown.js

@@ -127,7 +127,7 @@ const StyledMarkdown = styled.div`
 
 const Markdown = ({ body, html }) => {
   if (body) {
-    return <StyledMarkdown>{body}</StyledMarkdown>
+    return <StyledMarkdown>{body}</StyledMarkdown>;
   }
   return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
 };

website/src/templates/doc-page.js

@@ -12,7 +12,10 @@ import Widgets from '../components/widgets';
 import Markdown from '../components/markdown';
 
 function filenameFromPath(p) {
-  return p.split('/').slice(-1)[0].split('.')[0];
+  return p
+    .split('/')
+    .slice(-1)[0]
+    .split('.')[0];
 }
 
 const toMenu = (menu, nav) =>
@@ -40,13 +43,9 @@ export const DocsTemplate = ({
   group,
 }) => (
   <Container size="md">
-    <SidebarLayout
+    <SidebarLayout sidebar={showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}>
-      sidebar={showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}
-    >
       <article data-docs-content>
-        {filename && (
+        {filename && <EditLink collection={`docs_${group}`} filename={filename} />}
-          <EditLink collection={`docs_${group}`} filename={filename} />
-        )}
         <h1>{title}</h1>
         <Markdown body={body} html={html} />
         {showWidgets && <Widgets widgets={widgets} />}
@@ -56,8 +55,13 @@ export const DocsTemplate = ({
 );
 
 const DocPage = ({ data, location }) => {
-  const { nav, page: { frontmatter, html, fields }, widgets, menu } = data;
+  const {
-  const { title, group } = frontmatter
+    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;