From 7df5cd4a8caef2260ba9debab5fce50cd96b9355 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 16 Aug 2019 13:47:46 +0300 Subject: [PATCH] Test performance improvements by trimming views --- gatsby-node.js | 6 ------ snippets/deepMapKeys.md | 3 +-- snippets/promisify.md | 4 ++-- snippets/pull.md | 2 -- snippets/size.md | 1 - snippets/without.md | 2 -- src/docs/components/SnippetCard.js | 31 ++++++++++++++++-------------- src/docs/pages/list.js | 7 ------- src/docs/pages/search.js | 7 ------- src/docs/styles/_button.scss | 5 +++++ src/docs/templates/SnippetPage.js | 6 ------ src/docs/templates/TagPage.js | 5 ----- src/docs/util/index.js | 4 ++-- 13 files changed, 27 insertions(+), 56 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 1d1ee9844..4481cc43a 100644 --- a/gatsby-node.js +++ b/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, }, }); }); diff --git a/snippets/deepMapKeys.md b/snippets/deepMapKeys.md index d2ea1cca1..c3c3e790a 100644 --- a/snippets/deepMapKeys.md +++ b/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`. diff --git a/snippets/promisify.md b/snippets/promisify.md index b65136d83..134da9a11 100644 --- a/snippets/promisify.md +++ b/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) => diff --git a/snippets/pull.md b/snippets/pull.md index 9da74adfe..1ffcc5874 100644 --- a/snippets/pull.md +++ b/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; diff --git a/snippets/size.md b/snippets/size.md index e03f338fc..d5bb31cab 100644 --- a/snippets/size.md +++ b/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 diff --git a/snippets/without.md b/snippets/without.md index e388642dd..6b3262496 100644 --- a/snippets/without.md +++ b/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)); ``` diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js index 987204c51..ebb617c57 100644 --- a/src/docs/components/SnippetCard.js +++ b/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 }) => { + /> {/* + /> 
-      
+       : ''}
     
   );
 };
diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js
index 5623ef677..33753fe85 100644
--- a/src/docs/pages/list.js
+++ b/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
diff --git a/src/docs/pages/search.js b/src/docs/pages/search.js
index b6747cd7f..4b35685e4 100644
--- a/src/docs/pages/search.js
+++ b/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
diff --git a/src/docs/styles/_button.scss b/src/docs/styles/_button.scss
index f3e2384f0..42db1fe36 100644
--- a/src/docs/styles/_button.scss
+++ b/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;
diff --git a/src/docs/templates/SnippetPage.js b/src/docs/templates/SnippetPage.js
index 2dfbf3800..3da1314ba 100644
--- a/src/docs/templates/SnippetPage.js
+++ b/src/docs/templates/SnippetPage.js
@@ -65,12 +65,6 @@ export const pageQuery = graphql`
         }
       }
     }
-    site {
-      siteMetadata {
-        title
-        author
-      }
-    }
     allMarkdownRemark {
       edges {
         node {
diff --git a/src/docs/templates/TagPage.js b/src/docs/templates/TagPage.js
index 182ce604a..59c38ce64 100644
--- a/src/docs/templates/TagPage.js
+++ b/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 }
diff --git a/src/docs/util/index.js b/src/docs/util/index.js
index 8900689ec..305295c8f 100644
--- a/src/docs/util/index.js
+++ b/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]*?)
 {
       results.push(match);
     });
   }
-  return results[1];
+  return results[1].slice(0, results[1].lastIndexOf('
'));
 };
 
 // Gets the code blocks in a gatsby page