Add SEO component (#1834)

Add SEO component

package.json

@@ -52,6 +52,7 @@
     "react-helmet": "5.2.1",
     "react-live": "2.2.1",
     "react-lottie": "1.2.3",
+    "react-seo-component": "0.1.10",
     "react-utterances": "0.6.4",
     "styled-components": "4.4.1"
   },

root-wrapper.js

@@ -7,6 +7,7 @@ import {
   Code,
   StyledH2,
   StyledH3,
+  StyledH4,
 } from './src/components/elements';
 import {
   InlineCode,
@@ -26,6 +27,7 @@ const components = {
   blockquote: BlockQuote,
   h2: StyledH2,
   h3: StyledH3,
+  h4: StyledH4,
   p: Paragraph,
   'p.a': AnchorTag,
   'p.inlineCode': StyledInlineCode,

src/components/elements/H3.js

@@ -1,21 +1,6 @@
 import styled from 'styled-components';
+import { StyledH2 } from './H2';
 
-export const StyledH3 = styled.h3`
-  font-family: ${props => props.theme.fontBody};
-  color: ${props => props.theme.fontDark};
-  a {
-    float: left;
-    padding-right: 4px;
-    margin-left: -20px;
-  }
-  svg {
-    visibility: hidden;
-  }
-  &:hover {
-    a {
-      svg {
-        visibility: visible;
-      }
-    }
-  }
+export const StyledH3 = styled(StyledH2)`
+  font-size: 20px;
 `;

src/components/elements/H4.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { StyledH2 } from './H2';
+
+export const StyledH4 = styled(StyledH2)`
+  font-size: 18px;
+`;

src/components/elements/index.js

@@ -4,3 +4,4 @@ export * from './Code';
 export * from './GroupedElements';
 export * from './H2';
 export * from './H3';
+export * from './H4';