Fix archive issues, add archive listing page

gatsby-node.js

@@ -44,20 +44,24 @@ exports.createPages = ({ graphql, actions }) => {
     const snippets = result.data.allMarkdownRemark.edges;
 
     snippets.forEach((post, index) => {
+      if(post.node.fileAbsolutePath.indexOf('README') !== -1)
+        return;
       if (post.node.fileAbsolutePath.indexOf(config.snippetArchivePath) === -1)
         createPage({
           path: `/snippet${post.node.fields.slug}`,
           component: snippetPage,
           context: {
             slug: post.node.fields.slug,
+            scope: `./snippets`,
           },
         });
       else
         createPage({
-          path: `/snippet_archive${post.node.fields.slug}`,
+          path: `/archive${post.node.fields.slug}`,
           component: snippetPage,
           context: {
             slug: post.node.fields.slug,
+            scope: `./snippets_archive`,
           },
         });
     });

src/docs/components/SnippetCard.js

@@ -134,7 +134,7 @@ const ShortCard = ({
       <h4 className='card-title'>
         <AniLink
           paintDrip
-          to={archived ? `/snippet_archive/${snippetData.id}` : `/snippet/${snippetData.id}`}
+          to={archived ? `/archive/${snippetData.id}` : `/snippet/${snippetData.id}`}
           hex={isDarkMode ? '#434E76' : '#FFFFFF'}
         >
           {snippetData.title}

src/docs/pages/archive.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import { connect } from 'react-redux';
+import { pushNewPage } from '../state/app';
+
+import Meta from '../components/Meta';
+import Shell from '../components/Shell';
+import SnippetCard from '../components/SnippetCard';
+
+import { capitalize, getRawCodeBlocks as getCodeBlocks } from '../util';
+
+// ===================================================
+// Individual snippet category/tag page
+// ===================================================
+const ArchivePage = props => {
+  const posts = props.data.allMarkdownRemark.edges;
+
+  React.useEffect(() => {
+    props.dispatch(pushNewPage('Archived', props.path));
+  }, []);
+
+  return (
+    <>
+      <Meta title='Archived' />
+      <Shell>
+        <h2 className='page-title'>Archived</h2>
+        <p className='page-sub-title'>These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p>
+        <p className='light-sub'>Click on a snippet's name to view its code.</p>
+        {posts &&
+          posts.map(({ node }) => (
+            <SnippetCard
+              key={`snippet_${node.id}`}
+              short
+              archived
+              snippetData={{
+                title: node.frontmatter.title,
+                html: node.html,
+                code: getCodeBlocks(node.rawMarkdownBody).code,
+                tags: node.frontmatter.tags.split(',').map(v => v.trim()),
+                id: node.fields.slug.slice(1),
+              }}
+              isDarkMode={props.isDarkMode}
+            />
+          ))}
+      </Shell>
+    </>
+  );
+};
+
+export default connect(
+  state => ({
+    isDarkMode: state.app.isDarkMode,
+    lastPageTitle: state.app.lastPageTitle,
+    lastPageUrl: state.app.lastPageUrl,
+    searchQuery: state.app.searchQuery,
+  }),
+  null,
+)(ArchivePage);
+
+export const archivePageQuery = graphql`
+  query ArchivePage {
+    allMarkdownRemark(
+      limit: 1000
+      sort: { fields: [frontmatter___title], order: ASC }
+      filter: { fileAbsolutePath: { regex: "/snippets_archive/" }, frontmatter: {title: { ne: "" } } }
+    ) {
+      totalCount
+      edges {
+        node {
+          excerpt(pruneLength: 400)
+          id
+          html
+          rawMarkdownBody
+          fields {
+            slug
+          }
+          frontmatter {
+            title
+            tags
+          }
+        }
+      }
+    }
+  }
+`;

src/docs/templates/SnippetPage.js

@@ -56,7 +56,7 @@ export default connect(
 )(SnippetPage);
 
 export const pageQuery = graphql`
-  query BlogPostBySlug($slug: String!) {
+  query BlogPostBySlug($slug: String!, $scope: String!) {
     logo: file(absolutePath: { regex: "/logo_reverse_md.png/" }) {
       id
       childImageSharp {
@@ -89,7 +89,7 @@ export const pageQuery = graphql`
         title
       }
     }
-    snippetDataJson(meta: { type: { eq: "snippetArray" }, scope: {eq: "./snippets"} }) {
+    snippetDataJson(meta: { type: { eq: "snippetArray" }, scope: {eq: $scope} }) {
       data {
         title
         id