Update remaining assets and code, add webber

src/docs/components/Shell.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+import { connect } from 'react-redux';
+import AniLink from 'gatsby-plugin-transition-link/AniLink';
+import ReactCSSTransitionReplace from 'react-css-transition-replace';
+import config from '../../../config';
+
+import { toggleDarkMode } from '../state/app';
+
+import SearchIcon from './SVGs/SearchIcon';
+import GithubIcon from './SVGs/GithubIcon';
+import DarkModeIcon from './SVGs/DarkModeIcon';
+import LightModeIcon from './SVGs/LightModeIcon';
+import ListIcon from './SVGs/ListIcon';
+
+// ===================================================
+// Application-level UI component
+// ===================================================
+const Shell = ({
+  isDarkMode,
+  isSearch,
+  isList,
+  dispatch,
+  withIcon = true,
+  withTitle = true,
+  children,
+}) => {
+  const data = useStaticQuery(graphql`
+    query SiteTitleQuery {
+      site {
+        siteMetadata {
+          title
+          description
+        }
+      }
+      file(relativePath: { eq: "30s-icon.png" }) {
+        id
+        childImageSharp {
+          original {
+            src
+          }
+        }
+      }
+      snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
+        data {
+          title
+          id
+          attributes {
+            tags
+          }
+        }
+      }
+    }
+  `);
+  let viewportWidth = typeof window !== 'undefined' && window.innerWidth;
+
+  return (
+    <div className={isDarkMode ? 'page-container dark' : 'page-container'}>
+      {/* Menu */}
+      <header className='menu'>
+        <AniLink
+          cover
+          direction={viewportWidth < 600 ? 'up' : 'right'}
+          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
+          to='/search'
+          aria-label='Search'
+          className={isSearch ? 'menu-button active' : 'menu-button'}
+        >
+          <SearchIcon />
+        </AniLink>
+        <AniLink
+          cover
+          direction={viewportWidth < 600 ? 'up' : 'right'}
+          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
+          to='/list'
+          aria-label='Snippet list'
+          className={isList ? 'menu-button active' : 'menu-button'}
+        >
+          <ListIcon />
+        </AniLink>
+        {/* eslint-disable-next-line */}
+        <a target='_blank'
+          rel='noopener'
+          href={config.repositoryUrl}
+          aria-label='View on GitHub'
+          className='menu-button'
+        >
+          <GithubIcon />
+        </a>
+        {/* 
+          The use of React.Fragment here will cause a lot of errors to show up in webber:dev.
+          Truth is, this is the only decent way I found to deal with this module's odd behavior.
+          Keep as is, unless you can provide a better solution, in which case please send a PR.
+         */}
+        <ReactCSSTransitionReplace
+          transitionName='cross-fade'
+          transitionEnterTimeout={300}
+          transitionLeaveTimeout={300}
+          component='button'
+          className='menu-button'
+          childComponent={React.Fragment}
+        >
+          {isDarkMode ? (
+            <LightModeIcon
+              key='lmit'
+              onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
+            />
+          ) : (
+            <DarkModeIcon
+              key='dmit'
+              onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
+            />
+          )}
+        </ReactCSSTransitionReplace>
+      </header>
+      {/* Content */}
+      <div className='content'>
+        {withTitle ? (
+          <h1 className='website-title'>
+            {data.site.siteMetadata.title}
+            {withIcon ? (
+              <img
+                src={data.file.childImageSharp.original.src}
+                alt='Logo'
+                className='website-logo'
+              />
+            ) : (
+              ''
+            )}
+          </h1>
+        ) : (
+          ''
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default connect(
+  state => ({
+    isDarkMode: state.app.isDarkMode,
+    lastPageTitle: state.app.lastPageTitle,
+    lastPageUrl: state.app.lastPageUrl,
+    searchQuery: state.app.searchQuery,
+  }),
+  null,
+)(Shell);