Update individual snippet pages

Reduce data sizes and load times, improve performance

gatsby-node.js

@@ -188,7 +188,7 @@ exports.createPages = ({ graphql, actions }) => {
     const snippets = result.data.allSnippet.edges;
 
     snippets.forEach(snippet => {
-      if(!snippet.archived) {
+      if (!snippet.node.archived) {
         createPage({
           path: `/snippet${snippet.node.slug}`,
           component: snippetPage,
@@ -210,7 +210,11 @@ exports.createPages = ({ graphql, actions }) => {
     });
 
     // Create tag pages.
-    const tags = [...new Set(snippets.map(snippet => snippet.tags.primary))].sort((a,b) => a.localeCompare(b));
+    const tags = [...new Set(
+      snippets.map(snippet => (snippet.tags || {primary: null}).primary)
+    )]
+      .filter(Boolean)
+      .sort((a, b) => a.localeCompare(b));
 
     tags.forEach(tag => {
       const tagPath = `/tag/${toKebabCase(tag)}/`;

src/docs/components/SnippetCard.js

@@ -42,24 +42,18 @@ const CardCorner = ({ difficulty = 'intermediate' }) => (
 // ===================================================
 const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
   const [examplesOpen, setExamplesOpen] = React.useState(false);
-  const tags = snippetData.tags;
+
-  let cardCodeHtml = `${optimizeAllNodes(
-    getCodeBlocks(snippetData.html).code,
-  )}`;
-  let cardExamplesHtml = `${optimizeAllNodes(
-    getCodeBlocks(snippetData.html).example,
-  )}`;
   return (
     <div className='card'>
       <CardCorner difficulty={difficulty} />
       <h4 className='card-title'>{snippetData.title}</h4>
-      {tags.map(tag => (
+      {snippetData.tags.map(tag => (
         <span className='tag' key={`tag_${tag}`}>{tag}</span>
       ))}
       <div
         className='card-description'
         dangerouslySetInnerHTML={{
-          __html: `${getTextualContent(snippetData.html)}`,
+          __html: snippetData.textHtml,
         }}
       />
       <div className='card-bottom'>
@@ -83,12 +77,9 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
             aria-label='Copy to clipboard'
           />
         </CopyToClipboard>
-        {/* <button className="button button-b button-social-sh" aria-label="Share">
-          <ShareIcon />
-        </button> */}
         <pre
           className={`card-code language-${config.language}`}
-          dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
+          dangerouslySetInnerHTML={{ __html: snippetData.codeHtml }}
         />
         <button
           className='button button-example-toggler'
@@ -99,7 +90,7 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
           {examplesOpen && (
             <pre
               className='section card-examples language-js'
-              dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
+              dangerouslySetInnerHTML={{ __html: snippetData.exampleHtml }}
             />
           )}
       </div>

src/docs/templates/SnippetPage.js

@@ -11,14 +11,11 @@ import BackArrowIcon from '../components/SVGs/BackArrowIcon';
 // Individual snippet page template
 // ===================================================
 const SnippetPage = props => {
-  const post = props.data.markdownRemark;
+  const snippet = props.data.snippet;
-  const postData = props.data.snippetDataJson.data.find(
-    v => v.title === post.frontmatter.title,
-  );
 
   return (
     <>
-      <Meta title={post.frontmatter.title} description={post.excerpt} />
+      <Meta title={snippet.title} description={snippet.text.short} />
       <Shell>
         <Link
           className='link-back'
@@ -29,10 +26,13 @@ const SnippetPage = props => {
         </Link>
         <SnippetCard
           snippetData={{
-            title: postData.title,
+            title: snippet.title,
-            html: post.html,
+            html: snippet.html.full,
-            code: postData.attributes.codeBlocks.code,
+            codeHtml: snippet.html.code,
-            tags: postData.attributes.tags,
+            exampleHtml: snippet.html.example,
+            textHtml: snippet.html.text,
+            code: snippet.code.src,
+            tags: snippet.tags.all,
           }}
           isDarkMode={props.isDarkMode}
         />
@@ -52,7 +52,7 @@ export default connect(
 )(SnippetPage);
 
 export const pageQuery = graphql`
-  query BlogPostBySlug($slug: String!, $scope: String!) {
+  query SnippetBySlug($slug: String!) {
     logo: file(absolutePath: { regex: "/logo_reverse_md.png/" }) {
       id
       childImageSharp {
@@ -61,42 +61,23 @@ export const pageQuery = graphql`
         }
       }
     }
-    allMarkdownRemark {
+    snippet (slug: {eq: $slug }) {
-      edges {
+      title
-        node {
+      html {
-          fields {
+        full
-            slug
+        code
-          }
+        example
-          fileAbsolutePath
+        text
-          frontmatter {
-            title
-          }
-        }
       }
-    }
+      code {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
+        src
-      id
-      fields {
-        slug
       }
-      excerpt(pruneLength: 160)
+      tags {
-      html
+        all
-      frontmatter {
-        title
       }
-    }
+      title
-    snippetDataJson(meta: { type: { eq: "snippetArray" }, scope: {eq: $scope} }) {
+      text {
-      data {
+        short
-        title
-        id
-        attributes {
-          text
-          codeBlocks {
-            es6
-            example
-          }
-          tags
-        }
       }
     }
   }