Working save

srm985 · Oct 19, 2023 · 61b1431 · 61b1431
1 parent c3f3fb0
commit 61b1431
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 92 deletions.
diff --git a/src/components/CodeBlockComponent/index.js b/src/components/CodeBlockComponent/index.js
@@ -13,45 +13,58 @@ import './styles.scss';
 
 function CodeBlockComponent(props) {
     const {
+        children,
         className,
-        language,
-        value
+        inline: isInline,
+        language
     } = props;
 
+    const fieldValue = children[0];
+
     const {
         displayName
     } = CodeBlockComponent;
 
     const componentClassNames = classNames(
         displayName,
-        className
+        className,
+        {
+            [`${displayName}--inline`]: isInline
+        }
     );
 
     return (
-        <SyntaxHighlighter
-            className={componentClassNames}
-            language={language}
-            showLineNumbers
-            style={vscDarkPlus}
-            wrapLines
-        >
-            {value}
-        </SyntaxHighlighter>
+        isInline ? (
+            <code className={componentClassNames}>{fieldValue}</code>
+        ) : (
+            <SyntaxHighlighter
+                className={componentClassNames}
+                language={language}
+                showLineNumbers
+                style={vscDarkPlus}
+                wrapLines
+            >
+                {fieldValue}
+            </SyntaxHighlighter>
+        )
     );
 }
 
 CodeBlockComponent.displayName = 'CodeBlockComponent';
 
 CodeBlockComponent.propTypes = {
+    children: PropTypes.arrayOf(PropTypes.string),
     className: PropTypes.string,
-    language: PropTypes.string,
-    value: PropTypes.string
+    // eslint-disable-next-line react/boolean-prop-naming
+    inline: PropTypes.bool,
+    language: PropTypes.string
 };
 
 CodeBlockComponent.defaultProps = {
+    children: [],
     className: '',
-    language: '',
-    value: ''
+    inline: false,
+    language: ''
 };
 
 export default CodeBlockComponent;
diff --git a/src/components/CodeBlockComponent/styles.scss b/src/components/CodeBlockComponent/styles.scss
@@ -11,4 +11,10 @@ $code-block-font-size: 16px !important;
     * {
         font-size: $code-block-font-size;
     }
+
+    &--inline {
+        padding: calc($planck-length / 2) $planck-length;
+
+        background-color: rgba($color-orange, 0.1);
+    }
 }
diff --git a/src/components/FooterComponent/index.js b/src/components/FooterComponent/index.js
@@ -47,12 +47,12 @@ function FooterComponent(props) {
         );
     });
 
-    console.log(renderLinkButtons());
-
     return (
         <footer className={displayName}>
             <p className={`${displayName}__copy`}>{footerCopy}</p>
-            <div className={`${displayName}__links`} />
+            <div className={`${displayName}__links`}>
+                {renderLinkButtons()}
+            </div>
         </footer>
     );
 }

diff --git a/src/components/LayoutComponent/index.js b/src/components/LayoutComponent/index.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {
-    Children, cloneElement
+    cloneElement
 } from 'react';
 
 import Footer from '../FooterComponent';
@@ -69,12 +69,12 @@ function LayoutComponent(props) {
             }
             <main className={mainContentClassNames}>
                 {
-                    Children.map(children, (child) => cloneElement(child, {
+                    cloneElement(children, {
                         content: {
                             ...content,
                             ...extractedContent
                         }
-                    }))
+                    })
                 }
             </main>
             {

diff --git a/src/components/LayoutComponent/queries.js b/src/components/LayoutComponent/queries.js
@@ -4,7 +4,6 @@ import {
 } from 'gatsby';
 import PropTypes from 'prop-types';
 import React, {
-    Children,
     cloneElement
 } from 'react';
 
@@ -57,13 +56,7 @@ function Query(props) {
                     }
                 `
             }
-            render={(data) => (
-                <>
-                    {
-                        Children.map(children, (child) => cloneElement(child, data))
-                    }
-                </>
-            )}
+            render={(data) => cloneElement(children, data)}
         />
     );
 }

diff --git a/src/components/ListComponent/index.js b/src/components/ListComponent/index.js
@@ -10,27 +10,29 @@ function ListComponent(props) {
         displayName
     } = ListComponent;
 
-    const renderListItems = (listItemsList) => listItemsList.map((listItemDetails) => {
+    console.log(props);
+
+    const renderListItems = (childList) => childList.map((childDetails) => {
         const {
+            children: nestedChildren,
             key,
-            props: nestedProps,
-            props: {
-                children: nestedChildren,
-                node: {
-                    ordered: isOrderedList,
-                    type: nodeType
-                } = {}
-            },
-            type: functionalType
-        } = listItemDetails;
-
-        const isList = nodeType === 'list';
-        const isListItem = nodeType === 'listItem';
-
-        const isTypeFunction = functionalType !== undefined && typeof functionalType === 'function';
+            tagName: elementType,
+            value
+        } = childDetails;
+
+        if (value === '\n') {
+            return undefined;
+        }
+
+        const isList = elementType === 'ul' || elementType === 'ol';
+
+        // console.log({
+        //     childDetails
+        // });
 
         if (isList) {
-            const isShortList = nestedChildren.length <= 10;
+            const isOrderedList = elementType === 'ol';
+            const isShortList = nestedChildren.length <= 14;
 
             const componentClassNames = classNames(
                 displayName,
@@ -46,57 +48,55 @@ function ListComponent(props) {
                     <ol
                         className={componentClassNames}
                         key={key}
-                    >
-                        {renderListItems(nestedChildren)}
+                    >{renderListItems(nestedChildren)}
                     </ol>
                 ) : (
                     <ul
                         className={componentClassNames}
                         key={key}
-                    >
-                        {renderListItems(nestedChildren)}
+                    >{renderListItems(nestedChildren)}
                     </ul>
                 )
             );
         }
 
-        if (isListItem) {
+        if (value) {
+            if (value === '.') {
+                console.log({
+                    childDetails
+                });
+            }
             return (
-                <li key={key}>
-                    {renderListItems(nestedChildren)}
-                </li>
+                <li>{value}</li>
             );
         }
 
-        return isTypeFunction ? functionalType(nestedProps) : renderListItems(nestedChildren);
-    });
+        return renderListItems(nestedChildren);
+    }).filter((listItem) => listItem);
 
     return renderListItems([
-        {
-            props
-        }
+        props.node
     ]);
 }
 
 ListComponent.displayName = 'ListComponent';
 
 ListComponent.propTypes = {
-    children: PropTypes.arrayOf(PropTypes.shape({
-        key: PropTypes.string,
-        props: PropTypes.shape({
+    node: PropTypes.shape({
+        children: PropTypes.arrayOf(PropTypes.shape({
             children: PropTypes.arrayOf(PropTypes.shape({
-                props: PropTypes.shape({
-                    value: PropTypes.string
-                })
-            }))
-        })
-    })),
-    isOrderedList: PropTypes.bool
+                type: PropTypes.string,
+                value: PropTypes.string
+            })),
+            tagName: PropTypes.string
+        })),
+        key: PropTypes.string,
+        tagName: PropTypes.string
+    })
 };
 
 ListComponent.defaultProps = {
-    children: [],
-    isOrderedList: false
+    node: {}
 };
 
 export default ListComponent;
diff --git a/src/components/SEOComponent/queries.js b/src/components/SEOComponent/queries.js
@@ -4,7 +4,6 @@ import {
 } from 'gatsby';
 import PropTypes from 'prop-types';
 import React, {
-    Children,
     cloneElement
 } from 'react';
 
@@ -33,13 +32,7 @@ function Query(props) {
                     }
                 `
             }
-            render={(data) => (
-                <>
-                    {
-                        Children.map(children, (child) => cloneElement(child, data))
-                    }
-                </>
-            )}
+            render={(data) => cloneElement(children, data)}
         />
     );
 }

diff --git a/src/components/SectionComponent/index.js b/src/components/SectionComponent/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -33,9 +34,7 @@ function SectionComponent(props) {
 
     return (
         <section className={componentClassNames}>
-            {
-                children
-            }
+            <>{children}</>
         </section>
     );
 }

diff --git a/src/components/TextBlockComponent/index.js b/src/components/TextBlockComponent/index.js
@@ -73,12 +73,13 @@ class TextBlockComponent extends React.Component {
         );
 
         // Hooking markdown components into React components.
-        const renderers = {
-            break: renderHardBreak,
+        const components = {
+            a: renderLink,
+            br: renderHardBreak,
             code: CodeBlock,
-            image: Image,
-            link: renderLink,
-            list: List
+            img: Image,
+            ol: List,
+            ul: List
         };
 
         const componentClassNames = classNames(
@@ -93,10 +94,9 @@ class TextBlockComponent extends React.Component {
         return (
             <VisibilityChecker handleChange={this.handleVisibilityChange}>
                 <div className={componentClassNames}>
-                    <ReactMarkdown
-                        renderers={renderers}
-                        source={text}
-                    />
+                    <ReactMarkdown components={components}>
+                        {text}
+                    </ReactMarkdown>
                 </div>
             </VisibilityChecker>
         );