Template update

gatsby-config.js

@@ -9,7 +9,6 @@ module.exports = {
   },
   plugins: [
     `gatsby-plugin-sitemap`,
-    `gatsby-plugin-transition-link`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {

package.json

@@ -38,7 +38,6 @@
     "gatsby-plugin-sass": "^2.1.3",
     "gatsby-plugin-sharp": "^2.2.7",
     "gatsby-plugin-sitemap": "^2.2.8",
-    "gatsby-plugin-transition-link": "^1.12.4",
     "gatsby-remark-copy-linked-files": "^2.1.3",
     "gatsby-remark-images": "^3.1.6",
     "gatsby-remark-prismjs": "^3.3.3",
@@ -46,7 +45,6 @@
     "gatsby-transformer-json": "^2.2.2",
     "gatsby-transformer-remark": "^2.6.6",
     "gatsby-transformer-sharp": "^2.2.3",
-    "gsap": "^2.1.3",
     "kleur": "^3.0.3",
     "markdown-builder": "^0.9.0",
     "node-sass": "^4.12.0",
@@ -55,7 +53,6 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-css-transition-replace": "^3.0.3",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
     "react-redux": "^7.1.0",

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,36 @@ const Shell = ({
     <div className={isDarkMode ? 'page-container dark' : 'page-container'}>
       {/* Menu */}
       <header className='menu'>
-        <AniLink
+        <Link
-          cover
-          direction={viewportWidth < 600 ? 'up' : 'right'}
-          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
           to='/search'
           aria-label='Search'
+          title='Search'
           className={isSearch ? 'menu-button active' : 'menu-button'}
         >
           <SearchIcon />
-        </AniLink>
+        </Link>
-        <AniLink
+        <Link
-          cover
-          direction={viewportWidth < 600 ? 'up' : 'right'}
-          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
           to='/'
           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>
-        {/* 
+        <button
-          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'
           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 +98,7 @@ const Shell = ({
               onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
             />
           )}
-        </ReactCSSTransitionReplace>
+        </button>
       </header>
       {/* Content */}
       <div className='content'>

src/docs/components/SnippetCard.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Link } from 'gatsby';
 import config from '../../../config';
 
 import { getTextualContent, getCodeBlocks, optimizeAllNodes, getExplanation, getBrowserSupport } 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
@@ -131,38 +129,34 @@ const ShortCard = ({
   isDarkMode
 }) => {
   return (
-    <div className='card short'>
+    <Link to={`/snippet/${snippetData.id}`} className='clickable-card-wrapper' rel='canonical'>
-      <h4 className='card-title'>
+      <div className='card short'>
-        <AniLink
+        <h4 className='card-title'>
-          paintDrip
-          to={`/snippet/${snippetData.id}`}
-          hex={isDarkMode ? '#434E76' : '#FFFFFF'}
-        >
           {snippetData.title}
-        </AniLink>
+        </h4>
-      </h4>
+        <div
-      <div
+          className='card-description'
-        className='card-description'
+          dangerouslySetInnerHTML={{
-        dangerouslySetInnerHTML={{
+            __html: `${getTextualContent(snippetData.html)}`,
-          __html: `${getTextualContent(snippetData.html)}`,
+          }}
-        }}
+        />
-      />
+        <div className='card-bottom'>
-      <div className='card-bottom'>
+          <h5 className='card-section-demo-title'>Demo</h5>
-        <h5 className='card-section-demo-title'>Demo</h5>
+          <div className='card-snippet-demo' data-scope={snippetData.id.replace(/\//g,'')}>
-        <div className='card-snippet-demo' data-scope={snippetData.id.replace(/\//g,'')}>
+            <style>
-          <style>
+              {snippetData.code.scopedCss}
-            {snippetData.code.scopedCss}
+            </style>
-          </style>
+            <div dangerouslySetInnerHTML={{ __html: snippetData.code.html }} />
-          <div dangerouslySetInnerHTML={{ __html: snippetData.code.html }} />
+            {
-          {
+              snippetData.code.js &&
-            snippetData.code.js &&
+              <script>
-            <script>
+                {`function()(${snippetData.code.js})();`}
-              {`function()(${snippetData.code.js})();`}
+              </script>
-            </script>
+            }
-          }
+          </div>
         </div>
       </div>
-    </div>
+    </Link>
   );
 };
 

src/docs/pages/404.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Link } from 'gatsby';
 import { connect } from 'react-redux';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 
 import Shell from '../components/Shell';
 import Meta from '../components/Meta';
@@ -21,10 +21,8 @@ const NotFoundPage = ({ isDarkMode }) => (
         <p className='empty-page-subtext'>
           Seems like you have reached a page that does not exist.
         </p>
-        <AniLink
+        <Link
-          paintDrip
           to='/'
-          hex={isDarkMode ? '#434E76' : '#FFFFFF'}
           className='button button-a button-home'
         >
           <svg
@@ -43,7 +41,7 @@ const NotFoundPage = ({ isDarkMode }) => (
             <polyline points='9 22 9 12 15 12 15 22'></polyline>
           </svg>
           &nbsp;&nbsp;Go home
-        </AniLink>
+        </Link>
       </div>
     </Shell>
   </>

src/docs/pages/index.js

@@ -1,15 +1,12 @@
 import React from 'react';
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import { connect } from 'react-redux';
 import { pushNewPage } from '../state/app';
 import { capitalize } from '../util';
 
 import Shell from '../components/Shell';
 import Meta from '../components/Meta';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 import SnippetCard from '../components/SnippetCard';
-
-import { getRawCodeBlocks as getCodeBlocks } from '../util';
 import SimpleCard from '../components/SimpleCard';
 
 // ===================================================
@@ -80,14 +77,12 @@ const ListPage = props => {
         {tags.sort((a,b) => a.localeCompare(b)).map(tag => (
           <>
             <h3 className='tag-title' key={`tag_title_${tag}`}>
-              <AniLink
+              <Link
                 key={`tag_link_${tag}`}
-                paintDrip
                 to={`/tag/${tag}`}
-                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
               >
                 {capitalize(tag)}
-              </AniLink>
+              </Link>
             </h3>
             {snippets
               .filter(snippet => snippet.tags[0] === tag)
@@ -105,13 +100,11 @@ const ListPage = props => {
         {staticPages.map(page => (
           <SimpleCard 
             title={(
-              <AniLink
+              <Link
-                paintDrip
                 to={`/${page.url}`}
-                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
               >
                 {page.title}
-              </AniLink>
+              </Link>
             )}
           >
             <p>{page.description}</p>

src/docs/styles/_button.scss

@@ -52,6 +52,7 @@
   background-position: center;
   width: 44px;
   height: 44px;
+  z-index: 10;
 }
 .button.button-social-sh {
   position: absolute;

src/docs/styles/_card.scss

@@ -2,6 +2,8 @@
 // Cards
 // ===================================================
 .card {
+  backface-visibility: hidden;
+  will-change: transform;
   position: relative;
   transition: all 0.3s ease;
   margin: 1rem 1.25rem;
@@ -203,8 +205,13 @@
   }
 }
 
-
+.clickable-card-wrapper {
-// Animation for card example
+  &:link, &:visited {
-.roll-up-height {
+    &:hover, &:focus {
-  transition: height 0.3s ease-in-out;
+      text-decoration: none;
-}
+      .card {
+        transform: scale(1.025);
+      }
+    }
+  }
+}

src/docs/styles/_fonts.scss

@@ -28,7 +28,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.ttf) format('truetype');
+  src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -36,7 +36,7 @@
   font-style: italic;
   font-weight: 300;
   font-display: swap;
-  src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.ttf) format('truetype');
+  src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -44,7 +44,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.ttf) format('truetype');
+  src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -52,7 +52,7 @@
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.ttf) format('truetype');
+  src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -60,7 +60,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.ttf) format('truetype');
+  src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -68,7 +68,7 @@
   font-style: italic;
   font-weight: 500;
   font-display: swap;
-  src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.ttf) format('truetype');
+  src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -76,7 +76,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.ttf) format('truetype');
+  src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -84,7 +84,7 @@
   font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.ttf) format('truetype');
+  src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -92,6 +92,6 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(../../../assets/NotoSans-Bold.ttf) format('truetype');
+  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(../../../assets/NotoSans-Bold.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

src/docs/styles/_menu.scss

@@ -63,23 +63,3 @@
     }
   }
 }
-
-// Animate transition between light and dark mode
-.cross-fade-leave {
-  transform: scale(1);
-}
-.cross-fade-leave.cross-fade-leave-active {
-  transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
-  transform: scale(0.1);
-}
-.cross-fade-enter {
-  transform: scale(0.1);
-}
-.cross-fade-enter.cross-fade-enter-active {
-  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
-  transform: scale(0.95)
-}
-.cross-fade-height {
-  height: 61px;
-  transition: height 0.15s ease-in-out 0.15s;
-}

src/docs/templates/SnippetPage.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import { connect } from 'react-redux';
 
 import Meta from '../components/Meta';
 import Shell from '../components/Shell';
 import SnippetCard from '../components/SnippetCard';
 import BackArrowIcon from '../components/SVGs/BackArrowIcon';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 
 // ===================================================
 // Individual snippet page template
@@ -21,16 +20,13 @@ const SnippetPage = props => {
     <>
       <Meta title={post.frontmatter.title} description={post.excerpt} />
       <Shell>
-        <AniLink
+        <Link
           className='link-back'
           to={`${props.lastPageUrl}`}
-          cover
-          direction='right'
-          bg={props.isDarkMode ? '#434E76' : '#FFFFFF'}
         >
           <BackArrowIcon />
           &nbsp;&nbsp;Back to {props.lastPageTitle}
-        </AniLink>
+        </Link>
         <SnippetCard
           snippetData={{
             id: postData.id,

src/docs/util/index.js

@@ -7,19 +7,10 @@ const capitalize = (str, lowerRest = false) =>
 
 // Get the textual content in a gatsby page
 const getTextualContent = (str, noExplain = false) => {
-  const regex = /([\s\S]*?)<div class="gatsby-highlight"/g;
+  const result = str.slice(0, str.indexOf('<div class="gatsby-highlight"'));
-  const results = [];
+  if (noExplain)
-  let m = null;
+    return result.slice(0, result.lastIndexOf('<p>'));
-  while ((m = regex.exec(str)) !== null) {
+  return result;
-    if (m.index === regex.lastIndex) regex.lastIndex += 1;
-
-    m.forEach((match, groupIndex) => {
-      results.push(match);
-    });
-  }
-  if(noExplain)
-    return results[1].slice(0, results[1].lastIndexOf('<p>'));
-  return results[1];
 };
 
 // Gets the explanation for a snippet file.