Update tag pages

Improve speed, move all of the querying to node

gatsby-node.js

@@ -131,7 +131,7 @@ exports.createResolvers = ({ createResolvers }) => createResolvers({
         const html = await resolver(node, args);
         return {
           full: `${html}`,
-          text: `${getTextualContent(html)}`,
+          text: `${getTextualContent(html, true)}`,
           code: `${optimizeAllNodes(getCodeBlocks(html).code)}`,
           example: `${optimizeAllNodes(getCodeBlocks(html).example)}`
         };
@@ -209,20 +209,29 @@ exports.createPages = ({ graphql, actions }) => {
 
     // Create tag pages.
     const tags = [...new Set(
-      snippets.map(snippet => (snippet.tags || {primary: null}).primary)
+      snippets.map(snippet => (snippet.node.tags || {primary: null}).primary)
     )]
       .filter(Boolean)
       .sort((a, b) => a.localeCompare(b));
-
+    
     tags.forEach(tag => {
       const tagPath = `/tag/${toKebabCase(tag)}/`;
+      const taggedSnippets = snippets
+        .filter(snippet => snippet.node.tags.primary === tag)
+        .filter(snippet => !snippet.node.archived)
+        .map(({node}) => ({
+          title: node.title,
+          html: node.html.text,
+          tags: node.tags.all,
+          id: node.slug.slice(1)
+        }));
       const tagRegex = `/^\\s*${tag}/`;
       createPage({
         path: tagPath,
         component: tagPage,
         context: {
           tag,
-          tagRegex,
+          snippets: taggedSnippets
         },
       });
     });

src/docs/components/SnippetCard.js

@@ -115,13 +115,12 @@ const ShortCard = ({
     <div className='card short'>
       <CardCorner difficulty={difficulty} />
       <h4 className='card-title'>
-        
           {snippetData.title}
       </h4>
       <div
         className='card-description'
         dangerouslySetInnerHTML={{
-          __html: `${getTextualContent(snippetData.html, true)}`,
+          __html: snippetData.html,
         }}
       />
       </div>

src/docs/templates/TagPage.js

@@ -13,8 +13,8 @@ import { capitalize, getRawCodeBlocks as getCodeBlocks } from '../util';
 // Individual snippet category/tag page
 // ===================================================
 const TagRoute = props => {
-  const posts = props.data.allMarkdownRemark.edges;
   const tag = props.pageContext.tag;
+  const snippets = props.pageContext.snippets;
 
   React.useEffect(() => {
     props.dispatch(pushNewPage(capitalize(tag), props.path));
@@ -26,16 +26,16 @@ const TagRoute = props => {
       <Shell>
         <h2 className='page-title'>{capitalize(tag)}</h2>
         <p className='light-sub'>Click on a snippet card to view the snippet.</p>
-        {posts &&
+        {snippets &&
-          posts.map(({ node }) => (
+          snippets.map(snippet => (
             <SnippetCard
-              key={`snippet_${node.id}`}
+              key={`snippet_${snippet.id}`}
               short
               snippetData={{
-                title: node.frontmatter.title,
+                title: snippet.title,
-                html: node.html,
+                html: snippet.html,
-                tags: node.frontmatter.tags.split(',').map(v => v.trim()),
+                tags: snippet.tags,
-                id: node.fields.slug.slice(1),
+                id: snippet.id,
               }}
               isDarkMode={props.isDarkMode}
             />
@@ -54,28 +54,3 @@ export default connect(
   }),
   null,
 )(TagRoute);
-
-export const tagPageQuery = graphql`
-  query TagPage($tagRegex: String) {
-    allMarkdownRemark(
-      limit: 1000
-      sort: { fields: [frontmatter___title], order: ASC }
-      filter: { fileAbsolutePath: { regex: "/snippets(?!_archive)/" }, frontmatter: { tags: { regex: $tagRegex } } }
-    ) {
-      totalCount
-      edges {
-        node {
-          id
-          html
-          fields {
-            slug
-          }
-          frontmatter {
-            title
-            tags
-          }
-        }
-      }
-    }
-  }
-`;