- 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)
markkelnar · Nov 5, 2020 · 059a540 · 059a540
1 parent 642b080
commit 059a540
Show file tree

Hide file tree

Showing 24 changed files with 426 additions and 105 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}