Test performance improvements by trimming views

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