Updates from template

src/docs/components/Shell.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import { graphql, useStaticQuery } from 'gatsby';
+import { graphql, useStaticQuery, Link } 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';
@@ -58,48 +56,34 @@ const Shell = ({
     <div className={isDarkMode ? 'page-container dark' : 'page-container'}>
       {/* Menu */}
       <header className='menu'>
-        <AniLink
-          cover
-          direction={viewportWidth < 600 ? 'up' : 'right'}
-          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
+        <Link
           to='/search'
-          aria-label='Search'
+          aria-label='Search' title='Search'
           className={isSearch ? 'menu-button active' : 'menu-button'}
         >
           <SearchIcon />
-        </AniLink>
-        <AniLink
-          cover
-          direction={viewportWidth < 600 ? 'up' : 'right'}
-          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
+        </Link>
+        <Link
           to='/list'
-          aria-label='Snippet list'
+          aria-label='Snippet list' title='Snippet list'
           className={isList ? 'menu-button active' : 'menu-button'}
         >
           <ListIcon />
-        </AniLink>
+        </Link>
         {/* eslint-disable-next-line */}
         <a target='_blank'
           rel='noopener'
           href={config.repositoryUrl}
           aria-label='View on GitHub'
+          title='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'
+         <button
           aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+          title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
           className='menu-button'
-          childComponent={React.Fragment}
         >
           {isDarkMode ? (
             <LightModeIcon
@@ -112,7 +96,7 @@ const Shell = ({
               onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
             />
           )}
-        </ReactCSSTransitionReplace>
+        </button>
       </header>
       {/* Content */}
       <div className='content'>

src/docs/components/SnippetCard.js

@@ -1,13 +1,12 @@
 import React from 'react';
+import { Link } from 'gatsby';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import config from '../../../config';
 
 import { getTextualContent, getCodeBlocks, optimizeAllNodes } from '../util';
 // import ShareIcon from './SVGs/ShareIcon';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 import CollapseOpenIcon from './SVGs/CollapseOpenIcon';
 import CollapseClosedIcon from './SVGs/CollapseClosedIcon';
-import ReactCSSTransitionReplace from 'react-css-transition-replace';
 
 // ===================================================
 // Snippet Card HOC - check components below for more
@@ -95,18 +94,12 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
         >
           {examplesOpen ? <CollapseOpenIcon /> : <CollapseClosedIcon />}Examples
         </button>
-        <ReactCSSTransitionReplace
-          transitionName='roll-up'
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={300}
-        >
-          {examplesOpen && (
-            <pre
-              className='section card-examples language-py'
-              dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
-            />
-          )}
-        </ReactCSSTransitionReplace>
+        {examplesOpen && (
+          <pre
+            className='section card-examples language-py'
+            dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
+          />
+        )}
       </div>
     </div>
   );
@@ -127,50 +120,46 @@ const ShortCard = ({
       getCodeBlocks(snippetData.html).code,
     )}`;
   return (
-    <div className='card short'>
-      <CardCorner difficulty={difficulty} />
-      <h4 className='card-title'>
-        <AniLink
-          paintDrip
-          to={`/snippet/${snippetData.id}`}
-          hex={isDarkMode ? '#434E76' : '#FFFFFF'}
-        >
+    <Link to={`/snippet/${snippetData.id}`} rel='canonical' className='clickable-card-wrapper'>
+      <div className='card short'>
+        <CardCorner difficulty={difficulty} />
+        <h4 className='card-title'>
           {snippetData.title}
-        </AniLink>
-      </h4>
-      <div
-        className='card-description'
-        dangerouslySetInnerHTML={{
-          __html: `${getTextualContent(snippetData.html)}`,
-        }}
-      />
-      {withCode ? <div className='card-bottom'>
-        <CopyToClipboard
-          text={snippetData.code}
-          onCopy={() => {
-            let tst = document.createElement('div');
-            tst.classList = 'toast';
-            tst.innerHTML = 'Snippet copied to clipboard!';
-            document.body.appendChild(tst);
-            setTimeout(function() {
-              tst.style.opacity = 0;
-              setTimeout(function() {
-                document.body.removeChild(tst);
-              }, 300);
-            }, 1700);
+        </h4>
+        <div
+          className='card-description'
+          dangerouslySetInnerHTML={{
+            __html: `${getTextualContent(snippetData.html)}`,
           }}
-        >
-          <button
-            className='button button-a button-copy'
-            aria-label='Copy to clipboard'
-          />
-        </CopyToClipboard>
-        <pre
-          className={`card-code language-${config.language}`}
-          dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
         />
-      </div> : '' }
-    </div>
+        {withCode ? <div className='card-bottom'>
+          <CopyToClipboard
+            text={snippetData.code}
+            onCopy={() => {
+              let tst = document.createElement('div');
+              tst.classList = 'toast';
+              tst.innerHTML = 'Snippet copied to clipboard!';
+              document.body.appendChild(tst);
+              setTimeout(function() {
+                tst.style.opacity = 0;
+                setTimeout(function() {
+                  document.body.removeChild(tst);
+                }, 300);
+              }, 1700);
+            }}
+          >
+            <button
+              className='button button-a button-copy'
+              aria-label='Copy to clipboard'
+            />
+          </CopyToClipboard>
+          <pre
+            className={`card-code language-${config.language}`}
+            dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
+          />
+        </div> : '' }
+      </div>
+    </Link>
   );
 };