andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update remaining pages

Browse Source 
Everything that used remark and JSON now uses the new Snippet schema
This commit is contained in:
Angelos Chalaris
2019-09-17 00:15:31 +03:00
parent 75c4b3321b
commit 48f921b975
4 changed files with 101 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
gatsby-node.js
View File

@ -225,7 +225,6 @@ exports.createPages = ({ graphql, actions }) => {
tags: node.tags.all, tags: node.tags.all,
id: node.slug.slice(1) id: node.slug.slice(1)
})); }));
const tagRegex = `/^\\s*${tag}/`;
createPage({ createPage({
path: tagPath, path: tagPath,
component: tagPage, component: tagPage,
@ -236,12 +235,22 @@ exports.createPages = ({ graphql, actions }) => {
}); });
}); });
const beginnerSnippets = snippets
.filter(({ node }) => node.tags.all.includes('beginner'))
.filter(snippet => !snippet.node.archived)
.map(({ node }) => ({
title: node.title,
html: node.html.text,
tags: node.tags.all,
id: node.slug.slice(1)
}));
createPage({ createPage({
path: `/beginner`, path: `/beginner`,
component: tagPage, component: tagPage,
context: { context: {
tag: `beginner snippets`, tag: `beginner snippets`,
tagRegex: `/beginner/`, snippets: beginnerSnippets
}, },
}); });

47
src/docs/pages/index.js
View File

@ -13,14 +13,7 @@ import SimpleCard from '../components/SimpleCard';
// Home page (splash and search) // Home page (splash and search)
// =================================================== // ===================================================
const IndexPage = props => { const IndexPage = props => {
const snippets = props.data.snippetDataJson.data.map(snippet => ({ const snippets = props.data.allSnippet.edges;
title: snippet.title,
html: props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.html,
tags: snippet.attributes.tags,
id: snippet.id
}));
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery); const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
const [searchResults, setSearchResults] = React.useState(snippets); const [searchResults, setSearchResults] = React.useState(snippets);
@ -31,9 +24,9 @@ const IndexPage = props => {
let results = snippets; let results = snippets;
if (q.trim().length) if (q.trim().length)
results = snippets.filter( results = snippets.filter(
v => ({node}) =>
v.tags.filter(t => t.indexOf(q) !== -1).length || node.tags.all.filter(t => t.indexOf(q) !== -1).length ||
v.title.toLowerCase().indexOf(q) !== -1, node.title.toLowerCase().indexOf(q) !== -1,
); );
setSearchResults(results); setSearchResults(results);
}, [searchQuery]); }, [searchQuery]);
@ -80,11 +73,16 @@ const IndexPage = props => {
Click on a snippet card to view the snippet. Click on a snippet card to view the snippet.
</p> </p>
<h2 className='page-sub-title'>Search results</h2> <h2 className='page-sub-title'>Search results</h2>
{searchResults.map(snippet => ( {searchResults.map(({node}) => (
<SnippetCard <SnippetCard
short short
key={`snippet_${snippet.id}`} key={`snippet_${node.id}`}
snippetData={snippet} snippetData={{
title: node.title,
html: node.html.text,
tags: node.tags.all,
id: node.id
}}
isDarkMode={props.isDarkMode} isDarkMode={props.isDarkMode}
/> />
))} ))}
@ -139,22 +137,17 @@ export const indexPageQuery = graphql`
} }
} }
} }
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) { allSnippet {
data {
id
title
attributes {
tags
}
}
}
allMarkdownRemark {
edges { edges {
node { node {
html title
frontmatter { html {
title text
} }
tags {
all
}
id
} }
} }
} }

100
src/docs/pages/list.js
View File

@ -15,28 +15,15 @@ import SimpleCard from '../components/SimpleCard';
// Snippet list page // Snippet list page
// =================================================== // ===================================================
const ListPage = props => { const ListPage = props => {
const snippets = props.data.snippetDataJson.data.map(snippet => ({ const snippets = props.data.allSnippet.edges;
title: snippet.title, const archivedSnippets = props.data.allArchivedSnippet.edges;
html: props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title, const tags = [...new Set(
).node.html, snippets.map(snippet => (snippet.node.tags || { primary: null }).primary)
tags: snippet.attributes.tags, )]
id: snippet.id, .filter(Boolean)
})); .sort((a, b) => a.localeCompare(b));
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,
id: snippet.id,
}));
const tags = snippets.reduce((acc, snippet) => {
if (!snippet.tags) return acc;
const primaryTag = snippet.tags[0];
if (!acc.includes(primaryTag)) acc.push(primaryTag);
return acc;
}, []);
const staticPages = [ const staticPages = [
{ {
url: 'beginner', url: 'beginner',
@ -79,12 +66,17 @@ const ListPage = props => {
</Link> </Link>
</h3> </h3>
{snippets {snippets
.filter(snippet => snippet.tags[0] === tag) .filter(({node}) => node.tags.primary === tag)
.map(snippet => ( .map(({node}) => (
<SnippetCard <SnippetCard
key={`snippet_${snippet.id}`} key={`snippet_${node.id}`}
short short
snippetData={snippet} snippetData={{
title: node.title,
html: node.html.text,
tags: node.tags.all,
id: node.id
}}
/> />
))} ))}
</> </>
@ -95,12 +87,17 @@ const ListPage = props => {
Archived snippets Archived snippets
</Link></h3> </Link></h3>
{archivedSnippets {archivedSnippets
.map(snippet => ( .map(({node}) => (
<SnippetCard <SnippetCard
key={`a_snippet_${snippet.id}`} key={`a_snippet_${node.id}`}
short short
archived archived
snippetData={snippet} snippetData={{
title: node.title,
html: node.html.text,
tags: node.tags.all,
id: node.id
}}
/> />
))} ))}
<br/> <br/>
@ -131,31 +128,32 @@ export default connect(
export const listPageQuery = graphql` export const listPageQuery = graphql`
query snippetListing { query snippetListing {
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) { allSnippet(filter: {archived: {eq: false}}) {
data {
id
title
attributes {
tags
}
}
}
snippetsArchiveDataJson : snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets_archive"} }) {
data {
id
title
attributes {
tags
}
}
}
allMarkdownRemark {
edges { edges {
node { node {
html title
frontmatter { html {
title text
} }
tags {
all
primary
}
id
}
}
}
allArchivedSnippet: allSnippet(filter: {archived: {eq: true}}) {
edges {
node {
title
html {
text
}
tags {
all
}
id
} }
} }
} }

49
src/docs/pages/search.js
View File

@ -12,14 +12,7 @@ import SnippetCard from '../components/SnippetCard';
// Search page // Search page
// =================================================== // ===================================================
const SearchPage = props => { const SearchPage = props => {
const snippets = props.data.snippetDataJson.data.map(snippet => ({ const snippets = props.data.allSnippet.edges;
title: snippet.title,
html: props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.html,
tags: snippet.attributes.tags,
id: snippet.id,
}));
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery); const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
const [searchResults, setSearchResults] = React.useState(snippets); const [searchResults, setSearchResults] = React.useState(snippets);
@ -30,9 +23,9 @@ const SearchPage = props => {
let results = snippets; let results = snippets;
if (q.trim().length) if (q.trim().length)
results = snippets.filter( results = snippets.filter(
v => ({ node }) =>
v.tags.filter(t => t.indexOf(q) !== -1).length || node.tags.all.filter(t => t.indexOf(q) !== -1).length ||
v.title.toLowerCase().indexOf(q) !== -1, node.title.toLowerCase().indexOf(q) !== -1,
); );
setSearchResults(results); setSearchResults(results);
}, [searchQuery]); }, [searchQuery]);
@ -75,11 +68,16 @@ const SearchPage = props => {
) : ( ) : (
<> <>
<h2 className='page-sub-title'>Search results</h2> <h2 className='page-sub-title'>Search results</h2>
{searchResults.map(snippet => ( {searchResults.map(({node}) => (
<SnippetCard <SnippetCard
key={`snippet_${snippet.id}`} key={`snippet_${node.id}`}
short short
snippetData={snippet} snippetData={{
title: node.title,
html: node.html.text,
tags: node.tags.all,
id: node.id
}}
isDarkMode={props.isDarkMode} isDarkMode={props.isDarkMode}
/> />
))} ))}
@ -102,22 +100,17 @@ export default connect(
export const searchPageQuery = graphql` export const searchPageQuery = graphql`
query searchSnippetList { query searchSnippetList {
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) { allSnippet {
data {
id
title
attributes {
tags
}
}
}
allMarkdownRemark {
edges { edges {
node { node {
html title
frontmatter { html {
title text
} }
tags {
all
}
id
} }
} }
} }