diff --git a/src/components/DocsMenu.js b/src/components/DocsMenu.js
index bb075d74f6..29cf34b5e9 100644
--- a/src/components/DocsMenu.js
+++ b/src/components/DocsMenu.js
@@ -6,8 +6,9 @@ export default class DocsMenu extends React.Component {
     render() {
         let site = _.get(this.props, 'site', null);
         let page = _.get(this.props, 'page', null);
-        let root_docs_path = _.get(site, 'data.doc_sections.root_docs_path', null);
-        let root_page = getPage(this.props.pageContext.pages, root_docs_path);
+        let root_docs_path = _.get( site, 'data.doc_sections.root_docs_path', null );
+        let pageContextProps = this.props.pageContext.pages;
+        let root_page = getPage(pageContextProps, root_docs_path);
         return (
             <nav id="docs-nav" className="docs-nav">
                 <div id="docs-nav-inside" className="docs-nav-inside sticky">
@@ -26,14 +27,14 @@ export default class DocsMenu extends React.Component {
                             </li>
                             {_.map(_.get(site, 'data.doc_sections.sections', null), (section, section_idx) => {
                                 let section_path = pathJoin(root_docs_path, section);
-                                let section_page = getPage(this.props.pageContext.pages, section_path);
-                                let child_pages = _.orderBy(getPages(this.props.pageContext.pages, section_path), 'frontmatter.weight');
+                                let section_page = getPage(pageContextProps, section_path);
+                                let child_pages = _.orderBy(getPages(pageContextProps, section_path), 'frontmatter.weight');
                                 let child_count = _.size(child_pages);
                                 let has_children = child_count > 0 ? true : false;
-                                let is_current_page = _.get(page, 'url', null) === _.get(section_page, 'url', null) ? true : false;
+                                let is_current_page = !!(_.get(page, 'url', null) === _.get(section_page, 'url', null));
                                 let is_active = _.get(page, 'url', null).startsWith(_.get(section_page, 'url', null));
                                 return (
-                                    <React.Fragment key={section_idx + '.1'}>
+                                    <React.Fragment key={`${section_idx}.1`}>
                                         <li
                                             key={section_idx}
                                             className={classNames('docs-menu-item', {
diff --git a/src/components/Header.js b/src/components/Header.js
index 3b079a3608..84cfa0874e 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -11,24 +11,24 @@ export default class Header extends React.Component {
                 <div className="inner">
                     <div className="site-header-inside">
                         <div className="site-branding">
-                            {_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img', null) ? (
+                            { _.get( this.props, 'pageContext.site.siteMetadata.header.logo_img', null ) ? (
                                 <p className="site-logo">
-                                    <Link to={withPrefix(_.get(this.props, 'pageContext.site.siteMetadata.header.url', null) || '/')}>
+                                    <Link to={ withPrefix( _.get( this.props, 'pageContext.site.siteMetadata.header.url', null ) || '/' ) }>
                                         <img
-                                            src={withPrefix(_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img', null))}
-                                            alt={_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img_alt', null)}
+                                            src={ withPrefix( _.get( this.props, 'pageContext.site.siteMetadata.header.logo_img', null ) ) }
+                                            alt={ _.get( this.props, 'pageContext.site.siteMetadata.header.logo_img_alt', null ) }
                                         />
                                     </Link>
                                 </p>
                             ) : (
-                                    <p className="site-logo">
-                                        <Link to={withPrefix(_.get(this.props, 'pageContext.site.siteMetadata.header.url', null) || '/')}>
-                                            {_.get(this.props, 'pageContext.site.siteMetadata.header.title', null)}
-                                        </Link>
-                                    </p>
-                                )}
+                                <p className="site-logo">
+                                    <Link to={ withPrefix( _.get( this.props, 'pageContext.site.siteMetadata.header.url', null ) || '/' ) }>
+                                        { _.get( this.props, 'pageContext.site.siteMetadata.header.title', null ) }
+                                    </Link>
+                                </p>
+                            ) }
                         </div>
-                        {_.get(this.props, 'pageContext.site.siteMetadata.header.has_nav', null) && (
+                        { _.get( this.props, 'pageContext.site.siteMetadata.header.has_nav', null ) && (
                             <React.Fragment>
                                 <nav id="main-navigation" className="site-navigation" aria-label="Main Navigation">
                                     <div className="site-nav-inside">
@@ -37,36 +37,36 @@ export default class Header extends React.Component {
                                             <span className="icon-close" aria-hidden="true" />
                                         </button>
                                         <ul className="menu">
-                                            {_.map(_.get(this.props, 'pageContext.site.siteMetadata.header.nav_links', null), (action, action_idx) => {
-                                                let page_url = _.trim(_.get(this.props, 'pageContext.url', null), '/');
-                                                let action_url = _.trim(_.get(action, 'url', null), '/');
+                                            { _.map( _.get( this.props, 'pageContext.site.siteMetadata.header.nav_links', null ), ( action, action_idx ) => {
+                                                let page_url = _.trim( _.get( this.props, 'pageContext.url', null ), '/' );
+                                                let action_url = _.trim( _.get( action, 'url', null ), '/' );
                                                 return (
                                                     <li
-                                                        key={action_idx}
-                                                        className={classNames('menu-item', {
-                                                            'has-children': _.get(action, 'has_subnav', null) && _.get(action, 'subnav_links', null),
+                                                        key={ action_idx }
+                                                        className={ classNames( 'menu-item', {
+                                                            'has-children': _.get( action, 'has_subnav', null ) && _.get( action, 'subnav_links', null ),
                                                             current: page_url === action_url,
-                                                            'menu-button': _.get(action, 'style', null) !== 'link'
-                                                        })}
+                                                            'menu-button': _.get( action, 'style', null ) !== 'link'
+                                                        } ) }
                                                     >
-                                                        <ActionLink {...this.props} action={action} />
-                                                        {_.get(action, 'has_subnav', null) && _.get(action, 'subnav_links', null) && (
+                                                        <ActionLink { ...this.props } action={ action } />
+                                                        { _.get( action, 'has_subnav', null ) && _.get( action, 'subnav_links', null ) && (
                                                             <React.Fragment>
                                                                 <button className="submenu-toggle">
                                                                     <span className="icon-angle-right" aria-hidden="true" />
                                                                     <span className="screen-reader-text">Sub-menu</span>
                                                                 </button>
                                                                 <Submenu
-                                                                    {...this.props}
-                                                                    submenu={_.get(action, 'subnav_links', null)}
-                                                                    menu_class={'submenu'}
-                                                                    page={this.props.pageContext}
+                                                                    { ...this.props }
+                                                                    submenu={ _.get( action, 'subnav_links', null ) }
+                                                                    menu_class={ 'submenu' }
+                                                                    page={ this.props.pageContext }
                                                                 />
                                                             </React.Fragment>
-                                                        )}
+                                                        ) }
                                                     </li>
                                                 );
-                                            })}
+                                            } ) }
                                         </ul>
                                     </div>
                                 </nav>
@@ -75,13 +75,12 @@ export default class Header extends React.Component {
                                     <span className="icon-menu" aria-hidden="true" />
                                 </button>
                             </React.Fragment>
-                        )}
+                        ) }
                     </div>
                 </div>
                 <div>
                     <>
-                        myCustomTextInputID
-  <div id="sb-search-input-example">
+                        <div id="sb-search-input-example">
                             <div className="sb-content sb-hero">
                                 <div className="sb-search sb-hero">
                                     <div className="sb-input">
@@ -100,10 +99,10 @@ export default class Header extends React.Component {
                                 </div>
                             </div>
                             <style
-                                dangerouslySetInnerHTML={{
+                                dangerouslySetInnerHTML={ {
                                     __html:
                                         "\n        @font-face {\n            font-family: font-sb;\n            src: url(https://api.searchbar.org/fonts/sb.eot?39450784);\n            src: url(https://api.searchbar.org/fonts/sb.eot?39450784#iefix) format('embedded-opentype'), url(https://api.searchbar.org/fonts/sb.woff?39450784) format('woff'), url(https://api.searchbar.org/fonts/?39450784) format('truetype'), url(https://api.searchbar.org/fonts/sb.svg?39450784#font-sb) format('svg');\n            font-weight: 400;\n            font-style: normal\n        }\n\n        #sb-search-input-example {\n            position: static;\n            top: 0;\n            width: 100%;\n            height: 90px;\n            place-content: center;\n            display: flex;\n        }\n\n        #sb-search-input-example a, #sb-search-input-example button, #sb-search-input-example div, #sb-search-input-example em, #sb-search-input-example h1, #sb-search-input-example h2, #sb-search-input-example h3, #sb-search-input-example h4, #sb-search-input-example h5, #sb-search-input-example input, #sb-search-input-example p, #sb-search-input-example span {\n            all: initial;\n            font-family: Roboto, Helvetica, Arial;\n            font-size: 0px;\n        }\n\n        #sb-search-input-example div, #sb-search-input-example h1, #sb-search-input-example h2, #sb-search-input-example h3, #sb-search-input-example h4, #sb-search-input-example h5, #sb-search-input-example p {\n            display: block\n        }\n\n        #sb-search-input-example div, #sb-search-input-example em, #sb-search-input-example h1, #sb-search-input-example h2, #sb-search-input-example h3, #sb-search-input-example h4, #sb-search-input-example h5, #sb-search-input-example p, #sb-search-input-example span {\n            font-size: inherit;\n            font-weight: inherit;\n            text-transform: inherit;\n            color: inherit\n        }\n\n        #sb-search-input-example a, #sb-search-input-example a * {\n            cursor: pointer;\n            user-select: none\n        }\n\n        #sb-search-input-example * {\n            box-sizing: border-box\n        }\n\n\n        #sb-search-input-example .sb-content {\n            background: rgba(238, 238, 238, .82);\n            backdrop-filter: blur(30px);\n            -webkit-backdrop-filter: blur(30px);\n            border-radius: 46px;\n            display: block;\n            text-align: left;\n            width: 100%;\n            top: calc(120px - 92px);\n            margin-bottom: 0;\n            overflow: hidden;\n            z-index: 1000\n        }\n\n        #sb-search-input-example .sb-content.sb-hero {\n            top: 0px;\n            max-width: 660px;\n            height: auto;\n            z-index: 800;\n            background-color: rgba(202, 202, 202, 0.2);\n            -webkit-backdrop-filter: blur(30px);\n            backdrop-filter: blur(30px)\n        }\n\n        #sb-search-input-example .sb-search {\n            background: rgba(255, 255, 255, 0.7);\n            backdrop-filter: blur(30px);\n            -webkit-backdrop-filter: blur(30px);\n            border-radius: 116px;\n            border: 0 none;\n            height: 58px;\n            width: auto;\n            margin: 16px;\n            display: flex;\n            z-index: 999;\n            position: relative;\n        }\n\n        #sb-search-input-example .sb-search.sb-hero {\n            padding: 0 0 0 16px;\n            background-color: white;\n        }\n\n        #sb-search-input-example .sb-input {\n            align-items: center;\n            display: flex;\n            height: 100%;\n            width: 100%;\n            border-radius: 100%;\n            padding: 0 0 0 8px\n        }\n\n        #sb-search-input-example input {\n            outline: 0;\n            color: #007cff;\n            background-color: rgba(0, 0, 0, 0);\n            -webkit-appearance: none\n        }\n\n        #sb-search-input-example ::placeholder {\n            color: #8a8a8a;\n            opacity: 1\n\n        }\n\n        #sb-search-input-example input[type=search]::-ms-clear {\n            display: none;\n            width: 0;\n            height: 0\n        }\n\n        #sb-search-input-example input[type=search]::-ms-reveal {\n            display: none;\n            width: 0;\n            height: 0\n        }\n\n        #sb-search-input-example input[type=search]::-webkit-search-cancel-button, #sb-search-input-example input[type=search]::-webkit-search-decoration, #sb-search-input-example input[type=search]::-webkit-search-results-button, #sb-search-input-example input[type=search]::-webkit-search-results-decoration {\n            display: none\n        }\n\n        #sb-search-input-example .sb-search-field {\n            border: 0 none;\n            height: 100%;\n            width: 100%;\n            font-size: 18px;\n            display: block\n        }\n\n        #sb-search-input-example .sb-icon {\n            font: normal normal 400 26px font-sb;\n            line-height: 26px;\n            align-items: center;\n            padding: 10px;\n            speak: none;\n            display: inline-block;\n            text-decoration: inherit;\n            text-align: center;\n            text-transform: none;\n            cursor: pointer;\n            margin: 0;\n        }\n\n        #sb-search-input-example .sb-search-icon {\n            box-sizing: border-box;\n            border: 0px;\n            margin-right: 7px;\n            align-items: center;\n            border-radius: 50%;\n            background: #007cff;\n            color: #fff;\n            cursor: pointer;\n            display: flex;\n        }\n\n        @media (prefers-color-scheme: dark) {\n\n            #sb-search-input-example .sb-search.sb-hero {\n                background-color: rgba(0, 0, 0, 0.7);\n            }\n\n            #sb-search-input-example .sb-content {\n                background: rgba(20, 20, 20, .8);\n            }\n\n\n            #sb-search-input-example .sb-search {\n                background: rgba(0, 0, 0, 0.7);\n            }\n\n            #sb-search-input-example .sb-icon {\n                color: #fff;\n            }\n\n            #sb-search-input-example input {\n                outline: 0;\n                color: #5eb2fe;\n                -webkit-appearance: none;\n            }\n\n            #sb-search-input-example ::placeholder {\n                color: #b5b5b5;\n                opacity: 1;\n            }\n\n        }\n\t"
-                                }}
+                                } }
                             />
                         </div>
                     </>
@@ -112,10 +111,10 @@ export default class Header extends React.Component {
                     <a className="github-corner" href="https://github.com/bgoonz/BGOONZ_BLOG_2.0" aria-label="View source on Github">
                         <svg
                             aria-hidden="true"
-                            width={30}
-                            height={30}
+                            width={ 30 }
+                            height={ 30 }
                             viewBox="0 0 250 250"
-                            style={{
+                            style={ {
                                 zIndex: 100000,
                                 fill: 'black',
                                 color: '#fff',
@@ -124,14 +123,14 @@ export default class Header extends React.Component {
                                 border: 1,
                                 left: '0px',
                                 transform: 'scale(-1.5, 1.5)'
-                            }}
+                            } }
                         >
                             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                             <path
                                 className="octo-arm"
                                 d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                                 fill="currentColor"
-                                style={{ transformOrigin: '130px 106px' }}
+                                style={ { transformOrigin: '130px 106px' } }
                             ></path>
                             <path
                                 className="octo-body"