From 059a5406dfd6b93ef71dc0ed8c0bcb61fba9b091 Mon Sep 17 00:00:00 2001
From: Jason Bahl <jasonbahl@mac.com>
Date: Thu, 5 Nov 2020 08:38:59 -0700
Subject: [PATCH] - add support for twitter embeds coming from WordPress - add
 some global css (can't seem to get chakra theme to use globals) - initial
 templates for blog (so I can compare content)

---
 package.json                                |   1 +
 src/components/DeveloperReferenceSidebar.js |  27 ----
 src/components/RecipePreview.js             |   2 +-
 src/components/RecipeSidebar.js             |   3 +-
 src/components/TableOfContents.js           |   2 +-
 src/components/parse-html.js                |   2 +-
 src/components/parsed-components/Pre.js     |   7 +-
 src/components/parsed-components/index.js   |  33 +++++
 src/components/sidebar/SidebarCategory.js   |   9 +-
 src/pages/actions.js                        |  24 ++--
 src/pages/blog.js                           |  56 +++++++-
 src/pages/filters.js                        |  24 ++--
 src/pages/functions.js                      |  25 ++--
 src/pages/recipes.js                        |   6 +-
 src/styles/global.css                       |  42 +++++-
 src/templates/SnippetTag.js                 |   4 +-
 src/templates/WpAction.js                   |   2 +-
 src/templates/WpCodeSnippet.js              |  14 +-
 src/templates/WpContentNode.js              |   2 +-
 src/templates/WpDocument.js                 |  19 ++-
 src/templates/WpFilter.js                   |   2 +-
 src/templates/WpFunction.js                 |   2 +-
 src/templates/WpPost.js                     |  71 +++++++++
 yarn.lock                                   | 152 +++++++++++++++++++-
 24 files changed, 426 insertions(+), 105 deletions(-)
 create mode 100644 src/templates/WpPost.js

diff --git a/package.json b/package.json
index 93c54b8..779420b 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "react-lorem-component": "^0.13.0",
     "react-scroll": "^1.8.1",
     "react-spinners": "^0.9.0",
+    "react-twitter-embed": "^3.0.3",
     "react-use": "^15.3.4",
     "showdown": "^1.9.1",
     "slugger": "^1.0.1",
diff --git a/src/components/DeveloperReferenceSidebar.js b/src/components/DeveloperReferenceSidebar.js
index f1a235e..8f49b3b 100644
--- a/src/components/DeveloperReferenceSidebar.js
+++ b/src/components/DeveloperReferenceSidebar.js
@@ -1,35 +1,8 @@
 import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby'
 import Sidebar from "./sidebar/Sidebar";
 
 const DeveloperReferenceSidebar = ({ title }) => {
 
-    const data = useStaticQuery(graphql`
-    {
-      allWpFilter(sort: {fields: title, order: ASC}) {
-        nodes {
-          id
-          title
-          path: uri
-        }
-      }
-      allWpAction(sort: {fields: title, order: ASC}) {
-        nodes {
-          id
-          title
-          path: uri
-        }
-      }
-      allWpFunction(sort: {fields: title, order: ASC}) {
-        nodes {
-          id
-          title
-          path: uri
-        }
-      }
-    }
-    `);
-
     const routes = [
         {
             heading: false,
diff --git a/src/components/RecipePreview.js b/src/components/RecipePreview.js
index efd48d6..34b0eff 100644
--- a/src/components/RecipePreview.js
+++ b/src/components/RecipePreview.js
@@ -21,7 +21,7 @@ const RecipePreview = ({title, path, content, tags}) => (
                zIndex="1"
                right="1.25em"
         >
-            {tags.map(tag => (
+            {tags && tags.map(tag => (
                 <Tag
                     size="sm"
                     key={tag.id}
diff --git a/src/components/RecipeSidebar.js b/src/components/RecipeSidebar.js
index 9e7d8ee..7ef627c 100644
--- a/src/components/RecipeSidebar.js
+++ b/src/components/RecipeSidebar.js
@@ -25,7 +25,8 @@ const RecipeSidebar = () => {
             title: `View All (${data.allWpCodeSnippet.totalCount})`,
             path: `/recipes`,
         }
-    ]
+    ];
+
     data.allWpCodeSnippetTag.nodes.map(tag => {
         taglist.push({
             title: `${tag.name} (${tag.count})`,
diff --git a/src/components/TableOfContents.js b/src/components/TableOfContents.js
index 532fd9d..af8568d 100644
--- a/src/components/TableOfContents.js
+++ b/src/components/TableOfContents.js
@@ -53,7 +53,7 @@ const TableOfContents = ({ content, reduceHeadings = false }) => {
                 break;
             case 'h4':
                 headingProps = {
-                    as: 'h3',
+                    as: 'h4',
                     fontSize: 'xs',
                     lineHeight: 'sm',
                     fontWeight: 'sm',
diff --git a/src/components/parse-html.js b/src/components/parse-html.js
index c35fd86..cd1da49 100644
--- a/src/components/parse-html.js
+++ b/src/components/parse-html.js
@@ -47,7 +47,7 @@ export const ParseHtmlToReact = (html, components, reduceHeadings = false) => {
         let componentName = node.name.charAt(0).toUpperCase() + node.name.slice(1)
         // Allow heading sizes to be reduced for large chunks of parsed content.
         if (reduceHeadings && componentName.startsWith("H") && componentName.length === 2) {
-          componentName = `H${parseInt(componentName[1]) + 1}`
+            componentName = `H${parseInt(componentName[1]) + 1}`
         }
 
         if ( ! components[componentName] ) {
diff --git a/src/components/parsed-components/Pre.js b/src/components/parsed-components/Pre.js
index d6dc73a..421afd5 100644
--- a/src/components/parsed-components/Pre.js
+++ b/src/components/parsed-components/Pre.js
@@ -4,7 +4,12 @@ import CodeBlock from '../codeblock/CodeBlock'
 
 export const Pre = props => {
     const { children } = props;
-    const code = children && children[0].props && children[0].props.children && children[0].props.children[0] ? children[0].props.children[0] : null;
+    let code;
+    if ( props && props.code ) {
+        code = props.code;
+    } else {
+        code = children && children[0].props && children[0].props.children && children[0].props.children[0] ? children[0].props.children[0] : null;
+    }
 
     // Sometimes the classname will be on the code tag and not on the pre tag.
     let additionalProps = {}
diff --git a/src/components/parsed-components/index.js b/src/components/parsed-components/index.js
index 98ed36e..5aba640 100644
--- a/src/components/parsed-components/index.js
+++ b/src/components/parsed-components/index.js
@@ -9,6 +9,7 @@ import {
     useColorModeValue
 } from "@chakra-ui/core"
 import slugger from 'slugger'
+import { TwitterTweetEmbed } from 'react-twitter-embed'
 
 export const H1 = ((props) => {
     return <Heading apply="wp.h1" as={`h1`} {...props}>{props.children}</Heading>
@@ -126,4 +127,36 @@ export const Noscript = (props) => {
     return <noscript {...props} />
 };
 
+const getId = (string) => {
+    const regex = /status\/(\d+)/g;
+    let m;
+
+    while ((m = regex.exec(string)) !== null) {
+        // This is necessary to avoid infinite loops with zero-width matches
+        if (m.index === regex.lastIndex) {
+            regex.lastIndex++;
+        }
+
+        return m.length && m[1] ? m[1] : null;
+    }
+};
+
+export const Div = (props) => {
+
+    /**
+     * Convert embedded tweets into actual embeds
+     */
+    if ( props.className && 'wp-block-embed__wrapper' === props.className ) {
+        // return <TwitterTweetEmbed tweetId={'1161402608688361472'} />
+        if (props.children && props.children[1] && props.children[1].props.children  && props.children[1].props.children[2] && props.children[1].props.children[2].props.href ) {
+            const status = props.children[1].props.children[2].props.href;
+            const id = getId(status);
+            return id ? <TwitterTweetEmbed tweetId={id} /> : null;
+        }
+
+       // return <chakra.p>{props.children[1].props.children[2].props.href}</chakra.p>
+    }
+    return <chakra.div {...props} />
+};
+
 export * from './Pre'
diff --git a/src/components/sidebar/SidebarCategory.js b/src/components/sidebar/SidebarCategory.js
index 1c80b4d..522c203 100644
--- a/src/components/sidebar/SidebarCategory.js
+++ b/src/components/sidebar/SidebarCategory.js
@@ -49,16 +49,15 @@ function SidebarCategory(props) {
             current: ref.current,
         });
         if (toggle && shouldScroll && ref.current != null) {
-            const contentEl = contentRef.current
-            console.log( contentEl );
+            const contentEl = ref.current
+            console.log( { contentRef } );
 
             if (toggle === true && contentEl) {
                 // 10 is added for better margin
-                const height =
-                    ref.current.offsetTop - (isMobile ? 10 : contentEl.offsetTop)
+                const height = ref.current.offsetTop
                 contentEl.scrollTop = height
 
-                console.log( { height } );
+                console.log( { height: height } );
 
                 setToggle({ toggle })
             }
diff --git a/src/pages/actions.js b/src/pages/actions.js
index 502dabe..6fefec0 100644
--- a/src/pages/actions.js
+++ b/src/pages/actions.js
@@ -35,20 +35,16 @@ const Filters = ({data}) => {
                     <Box style={{flex: 1}}>
                         <Box pt={3} pl={10} pr={0} mt="0" mx="auto" minH="80vh">
                             <PageTransition>
-                                <Flex>
-                                    <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
-                                        <Breadcrumb crumbs={crumbs} />
-                                        <Heading as={'h1'}>Actions</Heading>
-                                        <Text my={5}>WordPress provides an API called "actions" which allow functions to be executed at specific times during a request.</Text>
-                                        {data.allWpAction.nodes.map( filter => {
-                                            return (
-                                                <Box mb={5}>
-                                                    <Link as={GatsbyLink} to={filter.uri}>{filter.title}</Link>
-                                                </Box>
-                                            );
-                                        })}
-                                    </Box>
-                                </Flex>
+                                <Breadcrumb crumbs={crumbs} />
+                                <Heading as={'h1'}>Actions</Heading>
+                                <Text my={5}>WordPress provides an API called "actions" which allow functions to be executed at specific times during a request.</Text>
+                                {data.allWpAction.nodes.map( filter => {
+                                    return (
+                                        <Box mb={5}>
+                                            <Link as={GatsbyLink} to={filter.uri}>{filter.title}</Link>
+                                        </Box>
+                                    );
+                                })}
                             </PageTransition>
                         </Box>
                     </Box>
diff --git a/src/pages/blog.js b/src/pages/blog.js
index 75523af..1e42f2f 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -1,15 +1,63 @@
 import React from 'react'
+import {
+    Box,
+    Flex,
+    Heading,
+    Link,
+} from "@chakra-ui/core"
+import { graphql, Link as GatsbyLink } from "gatsby";
 import Layout from '../components/Layout'
-import Container from "../components/Container";
+import Container from "../components/Container"
+import PageTransition from "../components/PageTransition"
+import Breadcrumb from "../components/breadcrumb/Breadcrumb";
+
+const Filters = ({data}) => {
+
+    const crumbs = [
+        {
+            title: 'Blog',
+            path: '/blog',
+            isCurrentPage: true,
+        }
+    ];
 
-const Blog = () => {
     return (
         <Layout>
             <Container>
-                <h2>Blog!</h2>
+                <Flex>
+                    <Box style={{flex: 1}}>
+                        <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
+                            <PageTransition>
+                                <Breadcrumb crumbs={crumbs} />
+                                <Heading mb={10} as={'h1'}>Blog</Heading>
+                                {data.allWpPost.nodes.map( post => {
+                                    return (
+                                        <Box mb={5}>
+                                            <Link as={GatsbyLink} to={post.uri}>{post.title}</Link>
+                                        </Box>
+                                    );
+                                })}
+                            </PageTransition>
+                        </Box>
+                    </Box>
+                </Flex>
             </Container>
         </Layout>
     );
 }
 
-export default Blog;
+export const data = graphql`
+  {
+    allWpPost(sort: {order: DESC, fields: date}) {
+      nodes {
+        title
+        id
+        content
+        date
+        uri
+      }
+    }
+  }
+`
+
+export default Filters;
diff --git a/src/pages/filters.js b/src/pages/filters.js
index 8b98be9..9a49d0b 100644
--- a/src/pages/filters.js
+++ b/src/pages/filters.js
@@ -35,20 +35,16 @@ const Filters = ({data}) => {
                     <Box style={{flex: 1}}>
                         <Box pt={3} pl={10} pr={0} mt="0" mx="auto" minH="80vh">
                             <PageTransition>
-                                <Flex>
-                                    <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
-                                        <Breadcrumb crumbs={crumbs} />
-                                        <Heading as={'h1'}>Filters</Heading>
-                                        <Text my={5}>WordPress provides an API called "filters" which allow functions to modify data of other functions. WPGraphQL applies many filters throughout its codebase allowing developers to customize the Schema and other parts of the GraphQL server. Below are the filters provided by WPGraphQL that are available for developers to hook into.</Text>
-                                        {data.allWpFilter.nodes.map( filter => {
-                                            return (
-                                                <Box mb={5}>
-                                                    <Link as={GatsbyLink} to={filter.uri}>{filter.title}</Link>
-                                                </Box>
-                                            );
-                                        })}
-                                    </Box>
-                                </Flex>
+                                <Breadcrumb crumbs={crumbs} />
+                                <Heading as={'h1'}>Filters</Heading>
+                                <Text my={5}>WordPress provides an API called "filters" which allow functions to modify data of other functions. WPGraphQL applies many filters throughout its codebase allowing developers to customize the Schema and other parts of the GraphQL server. Below are the filters provided by WPGraphQL that are available for developers to hook into.</Text>
+                                {data.allWpFilter.nodes.map( filter => {
+                                    return (
+                                        <Box mb={5}>
+                                            <Link as={GatsbyLink} to={filter.uri}>{filter.title}</Link>
+                                        </Box>
+                                    );
+                                })}
                             </PageTransition>
                         </Box>
                     </Box>
diff --git a/src/pages/functions.js b/src/pages/functions.js
index cf3b8f6..f5640e1 100644
--- a/src/pages/functions.js
+++ b/src/pages/functions.js
@@ -35,22 +35,17 @@ const Functions = ({ data }) => {
                     <DeveloperReferenceSidebar/>
                     <Box style={{flex: 1}}>
                         <Box pt={3} pl={10} pr={0} mt="0" mx="auto" minH="80vh">
-                            <PageTransition>
-                                <Flex>
-                                    <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
-                                        <Breadcrumb crumbs={crumbs} />
-                                        <Heading as="h1">Functions</Heading>
-                                        <Text my={5}>The functions documented below are provided by WPGraphQL to extend the Schema or interact with the GraphQL API.</Text>
+                            <PageTransition><Breadcrumb crumbs={crumbs} />
+                                <Heading as="h1">Functions</Heading>
+                                <Text my={5}>The functions documented below are provided by WPGraphQL to extend the Schema or interact with the GraphQL API.</Text>
 
-                                        {data.allWpFunction.nodes.map( func => {
-                                            return (
-                                                <Box mb={5}>
-                                                    <Link as={GatsbyLink} to={func.uri}>{func.title}</Link>
-                                                </Box>
-                                            );
-                                        })}
-                                    </Box>
-                                </Flex>
+                                {data.allWpFunction.nodes.map( func => {
+                                    return (
+                                        <Box mb={5}>
+                                            <Link as={GatsbyLink} to={func.uri}>{func.title}</Link>
+                                        </Box>
+                                    );
+                                })}
                             </PageTransition>
                         </Box>
                     </Box>
diff --git a/src/pages/recipes.js b/src/pages/recipes.js
index 3f4d93b..976ca0a 100644
--- a/src/pages/recipes.js
+++ b/src/pages/recipes.js
@@ -28,8 +28,8 @@ const Snippets = ({data}) => {
             <Container>
                 <Flex>
                     <RecipeSidebar/>
-                    <div style={{flex: 1}}>
-                        <Box pt={3} px={5} mt="0" mx="auto" maxW="60rem" minH="80vh">
+                    <Box style={{flex: 1}}>
+                        <Box pt={3} pl={10} pr={0} mt="0" mx="auto" minH="80vh">
                             <PageTransition>
                                 <Breadcrumb crumbs={crumbs}/>
                                 <Heading as="h1" fontSize={`4xl`}>Recipes</Heading>
@@ -51,7 +51,7 @@ const Snippets = ({data}) => {
                                 </Stack>
                             </PageTransition>
                         </Box>
-                    </div>
+                    </Box>
                 </Flex>
             </Container>
         </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 56a2236..599aba4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,7 +1,47 @@
 .wp-block-image img {
-    width: auto!important;
     margin-top: 1rem;
     margin-bottom: 1rem;
     max-width: 100%;
     height: auto;
 }
+
+.wp-block-image .aligncenter {
+    margin-left: auto;
+    margin-right: auto;
+    display: table;
+}
+
+.wp-block-image .aligncenter figcaption {
+    text-align: center;
+}
+
+.wp-block-image figcaption {
+    font-size: 0.75em;
+    margin-top: 1em;
+}
+
+table {
+    font-size: 18px;
+    padding: 0;
+    width: 100%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+table td {
+    padding: 15px;
+    border-bottom: solid 1px #ccc;
+}
+table tr:nth-child(even) {
+    background: #ccc;
+}
+.chakra-ui-dark table tr:nth-child(even) {
+    background: #1A365D;
+}
+
+.chakra-ui-dark table td {
+    padding: 15px;
+    border-bottom: solid 1px #20222c;
+}
+iframe {
+    margin: 1rem 0;
+}
diff --git a/src/templates/SnippetTag.js b/src/templates/SnippetTag.js
index 77d5afd..5557fd0 100644
--- a/src/templates/SnippetTag.js
+++ b/src/templates/SnippetTag.js
@@ -13,8 +13,8 @@ const SnippetTag = ({data}) => {
     const tag = data.wpCodeSnippetTag;
     const crumbs = [
       {
-        title: `Code Snippets`,
-        path: `/code-snippets`,
+        title: `Recipes`,
+        path: `/recipes`,
       },
       {
         title: tag.name,
diff --git a/src/templates/WpAction.js b/src/templates/WpAction.js
index 8c82ed3..de09ca7 100644
--- a/src/templates/WpAction.js
+++ b/src/templates/WpAction.js
@@ -41,7 +41,7 @@ const WpContentNode = ({data}) => {
                                 <Flex>
                                     <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
                                         <Breadcrumb crumbs={crumbs}/>
-                                        <Heading as="h1" fontSize={`4xl`}>{title}.</Heading>
+                                        <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
                                         {ParseHtml(content)}
                                     </Box>
                                     <TableOfContents content={content}
diff --git a/src/templates/WpCodeSnippet.js b/src/templates/WpCodeSnippet.js
index 32626da..2f2f55f 100644
--- a/src/templates/WpCodeSnippet.js
+++ b/src/templates/WpCodeSnippet.js
@@ -28,15 +28,17 @@ const WpCodeSnippet = ({data}) => {
             <Container>
                 <Flex>
                     <RecipeSidebar />
-                    <div style={{flex: 1}}>
-                        <Box pt={3} px={5} mt="0" mx="auto" maxW="60rem" minH="80vh">
+                    <Box style={{flex: 1}}>
+                        <Box pt={3} pl={10} pr={0} mt="0" mx="auto" minH="80vh">
                             <PageTransition>
-                                <Breadcrumb crumbs={crumbs} />
-                                <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
-                                <div>{ParseHtml(content)}</div>
+                                <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
+                                    <Breadcrumb crumbs={crumbs} />
+                                    <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
+                                    {ParseHtml(content)}
+                                </Box>
                             </PageTransition>
                         </Box>
-                    </div>
+                    </Box>
                 </Flex>
             </Container>
         </Layout>
diff --git a/src/templates/WpContentNode.js b/src/templates/WpContentNode.js
index c289fcf..016ef20 100644
--- a/src/templates/WpContentNode.js
+++ b/src/templates/WpContentNode.js
@@ -17,7 +17,7 @@ const WpContentNode = ({data}) => {
                     <div style={{flex: 1}}>
                         <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
                             <PageTransition>
-                                <Heading as="h1" fontSize={`4xl`}>{title}.</Heading>
+                                <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
                                 <div>{ParseHtml(content)}</div>
                             </PageTransition>
                         </Box>
diff --git a/src/templates/WpDocument.js b/src/templates/WpDocument.js
index 62fbcfe..9e70b55 100644
--- a/src/templates/WpDocument.js
+++ b/src/templates/WpDocument.js
@@ -7,11 +7,25 @@ import PageTransition from "../components/PageTransition";
 import DocsSidebar from "../components/DocsSidebar"
 import {ParseHtml} from "../components/parse-html"
 import TableOfContents from "../components/TableOfContents";
+import Breadcrumb from "../components/breadcrumb/Breadcrumb";
 
 
 const WpContentNode = ({data}) => {
 
-    const {wpContentNode: {title, content}} = data;
+    const {wpContentNode: {title, content, uri}} = data;
+
+    const crumbs = [
+        {
+            title: 'Docs',
+            path: '/docs/introduction',
+            isCurrentPage: false,
+        },
+        {
+            title: title,
+            path: uri,
+            isCurrentPage: true,
+        }
+    ];
 
     return (
 
@@ -24,7 +38,8 @@ const WpContentNode = ({data}) => {
                             <PageTransition>
                                 <Flex>
                                     <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
-                                        <Heading as="h1" fontSize={`4xl`}>{title}.</Heading>
+                                        <Breadcrumb crumbs={crumbs} />
+                                        <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
                                         {ParseHtml(content)}
                                     </Box>
                                     <TableOfContents content={content} contentRef={ParseHtml(content)}/>
diff --git a/src/templates/WpFilter.js b/src/templates/WpFilter.js
index 3925b45..b643730 100644
--- a/src/templates/WpFilter.js
+++ b/src/templates/WpFilter.js
@@ -41,7 +41,7 @@ const WpContentNode = ({data}) => {
                                 <Flex>
                                     <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
                                         <Breadcrumb crumbs={crumbs}/>
-                                        <Heading as="h1" fontSize={`4xl`}>{title}.</Heading>
+                                        <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
                                         {ParseHtml(content)}
                                     </Box>
                                     <TableOfContents content={content}
diff --git a/src/templates/WpFunction.js b/src/templates/WpFunction.js
index af0f2eb..f3b194a 100644
--- a/src/templates/WpFunction.js
+++ b/src/templates/WpFunction.js
@@ -41,7 +41,7 @@ const WpContentNode = ({data}) => {
                                 <Flex>
                                     <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
                                         <Breadcrumb crumbs={crumbs}/>
-                                        <Heading as="h1" fontSize={`4xl`}>{title}.</Heading>
+                                        <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
                                         {ParseHtml(content)}
                                     </Box>
                                     <TableOfContents content={content}
diff --git a/src/templates/WpPost.js b/src/templates/WpPost.js
new file mode 100644
index 0000000..a23c0ab
--- /dev/null
+++ b/src/templates/WpPost.js
@@ -0,0 +1,71 @@
+import React from "react";
+import {Box, Flex, Heading} from '@chakra-ui/core'
+import Layout from "../components/Layout";
+import Container from "../components/Container";
+import {graphql} from 'gatsby'
+import PageTransition from "../components/PageTransition";
+import {ParseHtml} from "../components/parse-html"
+import TableOfContents from "../components/TableOfContents";
+import Breadcrumb from "../components/breadcrumb/Breadcrumb";
+
+const WpContentNode = ({data}) => {
+
+    const {wpContentNode: {title, content, uri}} = data;
+
+    const crumbs = [
+        {
+            title: `Blog`,
+            path: `/blog`,
+        },
+        {
+            title: title,
+            path: uri,
+            isCurrentPage: true,
+        }
+    ];
+
+    return (
+
+        <Layout>
+            <Container>
+                <Flex>
+                    <Box style={{flex: 1}}>
+                        <Box pt={3} pl={10} pr={0} mt="0" mx="auto" minH="80vh">
+                            <PageTransition>
+                                <Flex>
+                                    <Box pt={3} mt="0" mx="auto" maxW="48rem" minH="80vh">
+                                        <Breadcrumb crumbs={crumbs}/>
+                                        <Heading as="h1" fontSize={`4xl`}>{title}</Heading>
+                                        {ParseHtml(content)}
+                                    </Box>
+                                    <TableOfContents
+                                        content={content}
+                                        contentRef={ParseHtml(content)}
+                                    />
+                                </Flex>
+                            </PageTransition>
+                        </Box>
+                    </Box>
+                </Flex>
+            </Container>
+        </Layout>
+    );
+}
+
+export const query = graphql`
+query($id: String) {
+    wpContentNode(id: { eq: $id }) {
+        __typename
+        id
+        uri
+        ...on WpNodeWithTitle {
+            title
+        }
+        ...on WpNodeWithContentEditor {
+            content
+        }
+    }
+}
+`;
+
+export default WpContentNode
diff --git a/yarn.lock b/yarn.lock
index 8a962e2..e711b4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3079,6 +3079,21 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
+airbnb-prop-types@^2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz#b96274cefa1abb14f623f804173ee97c13971dc2"
+  integrity sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==
+  dependencies:
+    array.prototype.find "^2.1.1"
+    function.prototype.name "^1.1.2"
+    is-regex "^1.1.0"
+    object-is "^1.1.2"
+    object.assign "^4.1.0"
+    object.entries "^1.1.2"
+    prop-types "^15.7.2"
+    prop-types-exact "^1.2.0"
+    react-is "^16.13.1"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -3332,6 +3347,14 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
+array.prototype.find@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.1.tgz#3baca26108ca7affb08db06bf0be6cb3115a969c"
+  integrity sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.4"
+
 array.prototype.flat@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
@@ -6094,6 +6117,41 @@ envinfo@^7.7.3:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.7.3.tgz#4b2d8622e3e7366afb8091b23ed95569ea0208cc"
   integrity sha512-46+j5QxbPWza0PB1i15nZx0xQ4I/EfQxg9J8Had3b408SV63nEtor2e+oiY63amTo9KTuh2a3XLObNwduxYwwA==
 
+enzyme-adapter-react-16@^1.11.0:
+  version "1.15.5"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.5.tgz#7a6f0093d3edd2f7025b36e7fbf290695473ee04"
+  integrity sha512-33yUJGT1nHFQlbVI5qdo5Pfqvu/h4qPwi1o0a6ZZsjpiqq92a3HjynDhwd1IeED+Su60HDWV8mxJqkTnLYdGkw==
+  dependencies:
+    enzyme-adapter-utils "^1.13.1"
+    enzyme-shallow-equal "^1.0.4"
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    object.values "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+    react-test-renderer "^16.0.0-0"
+    semver "^5.7.0"
+
+enzyme-adapter-utils@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.13.1.tgz#59c1b734b0927543e3d8dc477299ec957feb312d"
+  integrity sha512-5A9MXXgmh/Tkvee3bL/9RCAAgleHqFnsurTYCbymecO4ohvtNO5zqIhHxV370t7nJAwaCfkgtffarKpC0GPt0g==
+  dependencies:
+    airbnb-prop-types "^2.16.0"
+    function.prototype.name "^1.1.2"
+    object.assign "^4.1.0"
+    object.fromentries "^2.0.2"
+    prop-types "^15.7.2"
+    semver "^5.7.1"
+
+enzyme-shallow-equal@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz#b9256cb25a5f430f9bfe073a84808c1d74fced2e"
+  integrity sha512-MttIwB8kKxypwHvRynuC3ahyNc+cFbR8mjVIltnmzQ0uKGqmsfO4bfBuLxb0beLNPhjblUEYvEbsg+VSygvF1Q==
+  dependencies:
+    has "^1.0.3"
+    object-is "^1.1.2"
+
 eol@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/eol/-/eol-0.9.1.tgz#f701912f504074be35c6117a5c4ade49cd547acd"
@@ -6137,7 +6195,24 @@ es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstrac
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.18.0-next.0:
+es-abstract@^1.17.4:
+  version "1.17.7"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
+  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.1"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
   integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
@@ -6573,6 +6648,11 @@ executable@^4.1.0:
   dependencies:
     pify "^2.2.0"
 
+exenv@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exif-parser@^0.1.12:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/exif-parser/-/exif-parser-0.1.12.tgz#58a9d2d72c02c1f6f02a0ef4a9166272b7760922"
@@ -7231,11 +7311,25 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function.prototype.name@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.2.tgz#5cdf79d7c05db401591dfde83e3b70c5123e9a45"
+  integrity sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    functions-have-names "^1.2.0"
+
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+functions-have-names@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91"
+  integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==
+
 gatsby-cli@^2.12.113:
   version "2.12.113"
   resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.12.113.tgz#8e6a09a520d4dd845474a96755b5662d35fcd5dc"
@@ -10858,6 +10952,14 @@ object-is@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
+object-is@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
+  integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -12140,6 +12242,15 @@ prompts@^2.3.2:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
+prop-types-exact@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
+  integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
+  dependencies:
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    reflect.ownkeys "^0.2.0"
+
 prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -12494,7 +12605,7 @@ react-icons@^3.11.0:
   dependencies:
     camelcase "^5.0.0"
 
-react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -12536,6 +12647,11 @@ react-popper@2.2.3:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-proptype-conditional-require@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz#69c2d5741e6df5e08f230f36bbc2944ee1222555"
+  integrity sha1-acLVdB5t9eCPIw82u8KUTuEiJVU=
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -12596,6 +12712,26 @@ react-style-singleton@^2.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
+react-test-renderer@^16.0.0-0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
+  integrity sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.19.1"
+
+react-twitter-embed@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-3.0.3.tgz#a534132d4bbec812a63e3899dc716de2bfc3cec2"
+  integrity sha512-kF1Srlb1TqnZUqKA0FC4I/E+m+RUBCMZeU20hDRzmYLAjR1EA/6tr/PMZ22s7rd6wjQpIBLXNZjt0rfUpY8Chw==
+  dependencies:
+    enzyme-adapter-react-16 "^1.11.0"
+    exenv "^1.2.2"
+    react-proptype-conditional-require "^1.0.4"
+    scriptjs "^2.5.9"
+
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
@@ -12776,6 +12912,11 @@ redux@^4.0.5:
     loose-envify "^1.4.0"
     symbol-observable "^1.2.0"
 
+reflect.ownkeys@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
+  integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -13320,6 +13461,11 @@ screenfull@^5.0.0:
   resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.2.tgz#b9acdcf1ec676a948674df5cd0ff66b902b0bed7"
   integrity sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ==
 
+scriptjs@^2.5.9:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
 seedable-random@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/seedable-random/-/seedable-random-0.0.1.tgz#0b30cea79e4399688c5a067503a066b7c41e8316"
@@ -13363,7 +13509,7 @@ semver-truncate@^1.1.2:
   dependencies:
     semver "^5.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==