Fix archive issues, add archive listing page

2019-08-19 10:02:32 +03:00
parent 26904954ab
commit f9656c18ac
5 changed files with 4384 additions and 4302 deletions
--- a/src/docs/pages/archive.js
+++ b/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
+          }
+        }
+      }
+    }
+  }
+`;