diff --git a/gatsby-config.js b/gatsby-config.js index 448c152b1..8129baccf 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -15,6 +15,13 @@ module.exports = { path: `${__dirname}/${config.snippetPath}`, }, }, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `snippets_archive`, + path: `${__dirname}/${config.snippetArchivePath}`, + }, + }, { resolve: `gatsby-source-filesystem`, options: { diff --git a/gatsby-node.js b/gatsby-node.js index 4481cc43a..2f5d0c987 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,5 +1,6 @@ const path = require(`path`); const { createFilePath } = require(`gatsby-source-filesystem`); +const config = require('./config'); const toKebabCase = str => str && @@ -28,6 +29,7 @@ exports.createPages = ({ graphql, actions }) => { frontmatter { tags } + fileAbsolutePath } } } @@ -42,14 +44,22 @@ exports.createPages = ({ graphql, actions }) => { const snippets = result.data.allMarkdownRemark.edges; snippets.forEach((post, index) => { - - createPage({ - path: post.node.fields.slug, - component: snippetPage, - context: { - slug: post.node.fields.slug, - }, - }); + if (post.node.fileAbsolutePath.indexOf(config.snippetArchivePath) === -1) + createPage({ + path: `/snippet${post.node.fields.slug}`, + component: snippetPage, + context: { + slug: post.node.fields.slug, + }, + }); + else + createPage({ + path: `/snippet_archive${post.node.fields.slug}`, + component: snippetPage, + context: { + slug: post.node.fields.slug, + }, + }); }); // Create tag pages. @@ -61,8 +71,7 @@ exports.createPages = ({ graphql, actions }) => { }, []); tags.forEach(tag => { - const tagPath = `/tags/${toKebabCase(tag)}/`; - const tagRegex = `/^\\s*${tag}/`; + const tagPath = `/tag/${toKebabCase(tag)}/`; createPage({ path: tagPath, component: tagPage, diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js index ebb617c57..845f99055 100644 --- a/src/docs/components/SnippetCard.js +++ b/src/docs/components/SnippetCard.js @@ -119,6 +119,7 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => { const ShortCard = ({ snippetData, withCode = false, + archived = false, difficulty, isDarkMode }) => { @@ -133,7 +134,7 @@ const ShortCard = ({

{snippetData.title} diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js index 33753fe85..b9bd2bde4 100644 --- a/src/docs/pages/list.js +++ b/src/docs/pages/list.js @@ -3,6 +3,7 @@ import { graphql } from 'gatsby'; import { connect } from 'react-redux'; import { pushNewPage } from '../state/app'; import { capitalize } from '../util'; +import config from '../../../config'; import Shell from '../components/Shell'; import Meta from '../components/Meta'; @@ -16,6 +17,7 @@ import SimpleCard from '../components/SimpleCard'; // Snippet list page // =================================================== const ListPage = props => { + console.log(props); const snippets = props.data.snippetDataJson.data.map(snippet => ({ title: snippet.title, html: props.data.allMarkdownRemark.edges.find( @@ -24,12 +26,34 @@ const ListPage = props => { tags: snippet.attributes.tags, text: snippet.attributes.text, id: snippet.id, + archived: props.data.allMarkdownRemark.edges.find( + v => v.node.frontmatter.title === snippet.title, + ).node.fileAbsolutePath.indexOf(config.snippetArchivePath) !== -1, code: getCodeBlocks( props.data.allMarkdownRemark.edges.find( v => v.node.frontmatter.title === snippet.title, ).node.rawMarkdownBody, ).code, })); + const archivedSnippets = props.data.snippetsArchiveDataJson.data.map(snippet => ({ + title: snippet.title, + html: props.data.allMarkdownRemark.edges.find( + v => v.node.frontmatter.title === snippet.title, + ).node.html, + tags: snippet.attributes.tags, + text: snippet.attributes.text, + id: snippet.id, + archived: props.data.allMarkdownRemark.edges.find( + v => v.node.frontmatter.title === snippet.title, + ).node.fileAbsolutePath.indexOf(config.snippetArchivePath) !== -1, + code: getCodeBlocks( + props.data.allMarkdownRemark.edges.find( + v => v.node.frontmatter.title === snippet.title, + ).node.rawMarkdownBody, + ).code, + })); + console.log(snippets); + console.log(archivedSnippets); const tags = snippets.reduce((acc, snippet) => { if (!snippet.tags) return acc; const primaryTag = snippet.tags[0]; @@ -57,19 +81,20 @@ const ListPage = props => { Click on a snippet’s name to view its code or a tag name to view all snippets in that category.

- {tags.map(tag => ( + {tags.sort((a,b) => a.localeCompare(b)).map(tag => ( <>

{capitalize(tag)}

{snippets + .filter(snippet => !snippet.archived) .filter(snippet => snippet.tags[0] === tag) .map(snippet => ( { ))} ))} +

+ Archived +

+ {archivedSnippets + .filter(snippet => snippet.archived) + .map(snippet => ( + + ))}
{staticPages.map(page => (