Test performance improvements by trimming views

gatsby-node.js

@@ -42,17 +42,12 @@ exports.createPages = ({ graphql, actions }) => {
     const snippets = result.data.allMarkdownRemark.edges;
 
     snippets.forEach((post, index) => {
-      const previous =
-        index === snippets.length - 1 ? null : snippets[index + 1].node;
-      const next = index === 0 ? null : snippets[index - 1].node;
 
       createPage({
         path: post.node.fields.slug,
         component: snippetPage,
         context: {
           slug: post.node.fields.slug,
-          previous,
-          next,
         },
       });
     });
@@ -73,7 +68,6 @@ exports.createPages = ({ graphql, actions }) => {
         component: tagPage,
         context: {
           tag,
-          tagRegex,
         },
       });
     });

snippets/deepMapKeys.md

@@ -3,10 +3,9 @@ title: deepMapKeys
 tags: object,recursion,advanced
 ---
 
-Deep maps an object keys.
+Deep maps an object's keys.
 
 Creates an object with the same values as the provided object and keys generated by running the provided function for each key.
-
 Use `Object.keys(obj)` to iterate over the object's keys. 
 Use `Array.prototype.reduce()` to create a new object with the same values and mapped keys using `fn`.
 

snippets/promisify.md

@@ -5,11 +5,11 @@ tags: adapter,function,promise,intermediate
 
 Converts an asynchronous function to return a promise.
 
+*In Node 8+, you can use [`util.promisify`](https://nodejs.org/api/util.html#util_util_promisify_original)*
+
 Use currying to return a function returning a `Promise` that calls the original function.
 Use the `...rest` operator to pass in all the parameters.
 
-*In Node 8+, you can use [`util.promisify`](https://nodejs.org/api/util.html#util_util_promisify_original)*
-
 ```js
 const promisify = func => (...args) =>
   new Promise((resolve, reject) =>

snippets/pull.md

@@ -8,8 +8,6 @@ Mutates the original array to filter out the values specified.
 Use `Array.prototype.filter()` and `Array.prototype.includes()` to pull out the values that are not needed.
 Use `Array.prototype.length = 0` to mutate the passed in an array by resetting it's length to zero and `Array.prototype.push()` to re-populate it with only the pulled values.
 
-_(For a snippet that does not mutate the original array see [`without`](#without))_
-
 ```js
 const pull = (arr, ...args) => {
   let argState = Array.isArray(args[0]) ? args[0] : args;

snippets/size.md

@@ -9,7 +9,6 @@ Get type of `val` (`array`, `object` or `string`).
 Use `length` property for arrays.
 Use `length` or `size` value if available or number of keys for objects.
 Use `size` of a [`Blob` object](https://developer.mozilla.org/en-US/docs/Web/API/Blob) created from `val` for strings.
-
 Split strings into array of characters with `split('')` and return its length.
 
 ```js

snippets/without.md

@@ -7,8 +7,6 @@ Filters out the elements of an array, that have one of the specified values.
 
 Use `Array.prototype.filter()` to create an array excluding(using `!Array.includes()`) all given values.
 
-_(For a snippet that mutates the original array see [`pull`](#pull))_
-
 ```js
 const without = (arr, ...args) => arr.filter(v => !args.includes(v));
 ```

src/docs/components/SnippetCard.js

@@ -3,7 +3,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import config from '../../../config';
 
 import { getTextualContent, getCodeBlocks, optimizeAllNodes } from '../util';
-import ClipboardIcon from './SVGs/ClipboardIcon';
+// import ClipboardIcon from './SVGs/ClipboardIcon';
 // import ShareIcon from './SVGs/ShareIcon';
 import AniLink from 'gatsby-plugin-transition-link/AniLink';
 import CollapseOpenIcon from './SVGs/CollapseOpenIcon';
@@ -81,9 +81,7 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
           <button
             className='button button-a button-copy'
             aria-label='Copy to clipboard'
-          >
-            <ClipboardIcon />
-          </button>
+          />
         </CopyToClipboard>
         {/* <button className="button button-b button-social-sh" aria-label="Share">
           <ShareIcon />
@@ -118,10 +116,17 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
 // ===================================================
 // Short snippet view (title, description, code*)
 // ===================================================
-const ShortCard = ({ snippetData, difficulty, isDarkMode }) => {
-  let cardCodeHtml = `${optimizeAllNodes(
-    getCodeBlocks(snippetData.html).code,
-  )}`;
+const ShortCard = ({ 
+  snippetData, 
+  withCode = false, 
+  difficulty, 
+  isDarkMode 
+}) => {
+  let cardCodeHtml;
+  if(withCode)
+    cardCodeHtml = `${optimizeAllNodes(
+      getCodeBlocks(snippetData.html).code,
+    )}`;
   return (
     <div className='card short'>
       <CardCorner difficulty={difficulty} />
@@ -137,10 +142,10 @@ const ShortCard = ({ snippetData, difficulty, isDarkMode }) => {
       <div
         className='card-description'
         dangerouslySetInnerHTML={{
-          __html: `${getTextualContent(snippetData.html)}`,
+          __html: `${getTextualContent(snippetData.html, true)}`,
         }}
       />
-      <div className='card-bottom'>
+      { withCode ? <div className='card-bottom'>
         <CopyToClipboard
           text={snippetData.code}
           onCopy={() => {
@@ -159,15 +164,13 @@ const ShortCard = ({ snippetData, difficulty, isDarkMode }) => {
           <button
             className='button button-a button-copy'
             aria-label='Copy to clipboard'
-          >
-            <ClipboardIcon />
-          </button>
+          />
         </CopyToClipboard>
         <pre
           className={`card-code language-${config.language}`}
           dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
         />
-      </div>
+      </div> : ''}
     </div>
   );
 };

src/docs/pages/list.js

@@ -114,13 +114,6 @@ export default connect(
 
 export const listPageQuery = graphql`
   query snippetListing {
-    site {
-      siteMetadata {
-        title
-        description
-        author
-      }
-    }
     snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
       data {
         id

src/docs/pages/search.js

@@ -110,13 +110,6 @@ export default connect(
 
 export const searchPageQuery = graphql`
   query searchSnippetList {
-    site {
-      siteMetadata {
-        title
-        description
-        author
-      }
-    }
     snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
       data {
         id

src/docs/styles/_button.scss

@@ -47,6 +47,11 @@
   top: -32px;
   right: 24px;
   padding: 0.5rem 0.625rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard' %3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 44px;
+  height: 44px;
 }
 .button.button-social-sh {
   position: absolute;

src/docs/templates/SnippetPage.js

@@ -65,12 +65,6 @@ export const pageQuery = graphql`
         }
       }
     }
-    site {
-      siteMetadata {
-        title
-        author
-      }
-    }
     allMarkdownRemark {
       edges {
         node {

src/docs/templates/TagPage.js

@@ -58,11 +58,6 @@ export default connect(
 
 export const tagPageQuery = graphql`
   query TagPage($tagRegex: String) {
-    site {
-      siteMetadata {
-        title
-      }
-    }
     allMarkdownRemark(
       limit: 1000
       sort: { fields: [frontmatter___title], order: ASC }

src/docs/util/index.js

@@ -6,7 +6,7 @@ const capitalize = (str, lowerRest = false) =>
   (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));
 
 // Get the textual content in a gatsby page
-const getTextualContent = str => {
+const getTextualContent = (str, noExplain = false) => {
   const regex = /([\s\S]*?)<div class="gatsby-highlight"/g;
   const results = [];
   let m = null;
@@ -17,7 +17,7 @@ const getTextualContent = str => {
       results.push(match);
     });
   }
-  return results[1];
+  return results[1].slice(0, results[1].lastIndexOf('<p>'));
 };
 
 // Gets the code blocks in a gatsby page