Add glossary page

src/docs/components/SimpleCard.js

@@ -5,8 +5,7 @@ import React from 'react';
 // ===================================================
 const SimpleCard = ({ 
   title, 
-  children, 
+  children
-  isDarkMode 
 }) => (
   <div className='card short'>
     <h4 className='card-title'>

src/docs/pages/archive.js

@@ -7,7 +7,7 @@ import Meta from '../components/Meta';
 import Shell from '../components/Shell';
 import SnippetCard from '../components/SnippetCard';
 
-import { capitalize, getRawCodeBlocks as getCodeBlocks } from '../util';
+import { getRawCodeBlocks as getCodeBlocks } from '../util';
 
 // ===================================================
 // Individual snippet category/tag page

src/docs/pages/glossary.js

@@ -0,0 +1,60 @@
+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 SimpleCard from '../components/SimpleCard';
+
+// ===================================================
+// Individual snippet category/tag page
+// ===================================================
+const GlossaryPage = props => {
+  const posts = props.data.snippetDataJson.data;
+  console.log(posts);
+
+  React.useEffect(() => {
+    props.dispatch(pushNewPage('Glossary', props.path));
+  }, []);
+
+  return (
+    <>
+      <Meta title='Glossary' />
+      <Shell>
+        <h2 className='page-title'>Glossary</h2>
+        <p className='page-sub-title'>Developers use a lot of terminology daily. Every once in a while, you might find a term you do not know. We know how frustrating that can get, so we provide you with a handy glossary of frequently used web development terms.</p>
+        {posts &&
+          posts.map(term => (
+            <SimpleCard title={term.title}>
+              <p>{term.attributes.text}</p>
+            </SimpleCard>
+          ))}
+      </Shell>
+    </>
+  );
+};
+
+export default connect(
+  state => ({
+    isDarkMode: state.app.isDarkMode,
+    lastPageTitle: state.app.lastPageTitle,
+    lastPageUrl: state.app.lastPageUrl,
+    searchQuery: state.app.searchQuery,
+  }),
+  null,
+)(GlossaryPage);
+
+export const archivePageQuery = graphql`
+  query GlossaryPage {
+    snippetDataJson(meta: {type: {eq: "glossaryTermArray"}}) {
+      data {
+        attributes {
+          text
+        }
+        title
+        id
+      }
+    }
+  }
+`;

src/docs/pages/list.js

@@ -61,16 +61,21 @@ const ListPage = props => {
     return acc;
   }, []);
   const staticPages = [
+    {
+      url: 'beginner',
+      title: 'Beginner snippets',
+      description: 'Snippets aimed towards individuals at the start of their web developer journey.',
+    },
+    {
+      url: 'glossary',
+      title: 'Glossary',
+      description: 'A handy glossary of web development terminology.',
+    },
     {
       url: 'about',
       title: 'About',
       description: 'A few word about us, our goals and our projects.',
     },
-    {
-      url: 'beginner',
-      title: 'Beginner snippets',
-      description: 'Snippets aimed towards individuals at the start of their web developer journey.',
-    }
   ];
 
   React.useEffect(() => {

src/docs/templates/TagPage.js

@@ -66,7 +66,6 @@ export const tagPageQuery = graphql`
       totalCount
       edges {
         node {
-          excerpt(pruneLength: 400)
           id
           html
           rawMarkdownBody