diff --git a/src/docs/components/SimpleCard.js b/src/docs/components/SimpleCard.js index cd93b6af9..7cbafc0a6 100644 --- a/src/docs/components/SimpleCard.js +++ b/src/docs/components/SimpleCard.js @@ -5,8 +5,7 @@ import React from 'react'; // =================================================== const SimpleCard = ({ title, - children, - isDarkMode + children }) => (

diff --git a/src/docs/pages/archive.js b/src/docs/pages/archive.js index 4f781a258..3c9abc375 100644 --- a/src/docs/pages/archive.js +++ b/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 diff --git a/src/docs/pages/glossary.js b/src/docs/pages/glossary.js new file mode 100644 index 000000000..f6004a1b0 --- /dev/null +++ b/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 ( + <> + + +

Glossary

+

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.

+ {posts && + posts.map(term => ( + +

{term.attributes.text}

+
+ ))} +
+ + ); +}; + +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 + } + } + } +`; diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js index 77d936f46..3f8287a0b 100644 --- a/src/docs/pages/list.js +++ b/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(() => { diff --git a/src/docs/templates/TagPage.js b/src/docs/templates/TagPage.js index 80e709197..03c9bf766 100644 --- a/src/docs/templates/TagPage.js +++ b/src/docs/templates/TagPage.js @@ -66,7 +66,6 @@ export const tagPageQuery = graphql` totalCount edges { node { - excerpt(pruneLength: 400) id html rawMarkdownBody