Update remaining pages
Everything that used remark and JSON now uses the new Snippet schema
This commit is contained in:
Angelos Chalaris
@ -225,7 +225,6 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
tags: node.tags.all,
|
||||
id: node.slug.slice(1)
|
||||
}));
|
||||
const tagRegex = `/^\\s*${tag}/`;
|
||||
createPage({
|
||||
path: tagPath,
|
||||
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({
|
||||
path: `/beginner`,
|
||||
component: tagPage,
|
||||
context: {
|
||||
tag: `beginner snippets`,
|
||||
tagRegex: `/beginner/`,
|
||||
snippets: beginnerSnippets
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -13,14 +13,7 @@ import SimpleCard from '../components/SimpleCard';
|
||||
// Home page (splash and search)
|
||||
// ===================================================
|
||||
const IndexPage = props => {
|
||||
const snippets = props.data.snippetDataJson.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 snippets = props.data.allSnippet.edges;
|
||||
|
||||
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
|
||||
const [searchResults, setSearchResults] = React.useState(snippets);
|
||||
@ -31,9 +24,9 @@ const IndexPage = props => {
|
||||
let results = snippets;
|
||||
if (q.trim().length)
|
||||
results = snippets.filter(
|
||||
v =>
|
||||
v.tags.filter(t => t.indexOf(q) !== -1).length ||
|
||||
v.title.toLowerCase().indexOf(q) !== -1,
|
||||
({node}) =>
|
||||
node.tags.all.filter(t => t.indexOf(q) !== -1).length ||
|
||||
node.title.toLowerCase().indexOf(q) !== -1,
|
||||
);
|
||||
setSearchResults(results);
|
||||
}, [searchQuery]);
|
||||
@ -80,11 +73,16 @@ const IndexPage = props => {
|
||||
Click on a snippet card to view the snippet.
|
||||
</p>
|
||||
<h2 className='page-sub-title'>Search results</h2>
|
||||
{searchResults.map(snippet => (
|
||||
{searchResults.map(({node}) => (
|
||||
<SnippetCard
|
||||
short
|
||||
key={`snippet_${snippet.id}`}
|
||||
snippetData={snippet}
|
||||
key={`snippet_${node.id}`}
|
||||
snippetData={{
|
||||
title: node.title,
|
||||
html: node.html.text,
|
||||
tags: node.tags.all,
|
||||
id: node.id
|
||||
}}
|
||||
isDarkMode={props.isDarkMode}
|
||||
/>
|
||||
))}
|
||||
@ -139,22 +137,17 @@ export const indexPageQuery = graphql`
|
||||
}
|
||||
}
|
||||
}
|
||||
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
|
||||
data {
|
||||
id
|
||||
title
|
||||
attributes {
|
||||
tags
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark {
|
||||
allSnippet {
|
||||
edges {
|
||||
node {
|
||||
html
|
||||
frontmatter {
|
||||
title
|
||||
title
|
||||
html {
|
||||
text
|
||||
}
|
||||
tags {
|
||||
all
|
||||
}
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,28 +15,15 @@ import SimpleCard from '../components/SimpleCard';
|
||||
// Snippet list page
|
||||
// ===================================================
|
||||
const ListPage = props => {
|
||||
const snippets = props.data.snippetDataJson.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 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 snippets = props.data.allSnippet.edges;
|
||||
const archivedSnippets = props.data.allArchivedSnippet.edges;
|
||||
|
||||
const tags = [...new Set(
|
||||
snippets.map(snippet => (snippet.node.tags || { primary: null }).primary)
|
||||
)]
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => a.localeCompare(b));
|
||||
|
||||
const staticPages = [
|
||||
{
|
||||
url: 'beginner',
|
||||
@ -79,12 +66,17 @@ const ListPage = props => {
|
||||
</Link>
|
||||
</h3>
|
||||
{snippets
|
||||
.filter(snippet => snippet.tags[0] === tag)
|
||||
.map(snippet => (
|
||||
.filter(({node}) => node.tags.primary === tag)
|
||||
.map(({node}) => (
|
||||
<SnippetCard
|
||||
key={`snippet_${snippet.id}`}
|
||||
key={`snippet_${node.id}`}
|
||||
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
|
||||
</Link></h3>
|
||||
{archivedSnippets
|
||||
.map(snippet => (
|
||||
.map(({node}) => (
|
||||
<SnippetCard
|
||||
key={`a_snippet_${snippet.id}`}
|
||||
key={`a_snippet_${node.id}`}
|
||||
short
|
||||
archived
|
||||
snippetData={snippet}
|
||||
snippetData={{
|
||||
title: node.title,
|
||||
html: node.html.text,
|
||||
tags: node.tags.all,
|
||||
id: node.id
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<br/>
|
||||
@ -131,31 +128,32 @@ export default connect(
|
||||
|
||||
export const listPageQuery = graphql`
|
||||
query snippetListing {
|
||||
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
|
||||
data {
|
||||
id
|
||||
title
|
||||
attributes {
|
||||
tags
|
||||
}
|
||||
}
|
||||
}
|
||||
snippetsArchiveDataJson : snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets_archive"} }) {
|
||||
data {
|
||||
id
|
||||
title
|
||||
attributes {
|
||||
tags
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark {
|
||||
allSnippet(filter: {archived: {eq: false}}) {
|
||||
edges {
|
||||
node {
|
||||
html
|
||||
frontmatter {
|
||||
title
|
||||
title
|
||||
html {
|
||||
text
|
||||
}
|
||||
tags {
|
||||
all
|
||||
primary
|
||||
}
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
allArchivedSnippet: allSnippet(filter: {archived: {eq: true}}) {
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
html {
|
||||
text
|
||||
}
|
||||
tags {
|
||||
all
|
||||
}
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,14 +12,7 @@ import SnippetCard from '../components/SnippetCard';
|
||||
// Search page
|
||||
// ===================================================
|
||||
const SearchPage = props => {
|
||||
const snippets = props.data.snippetDataJson.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 snippets = props.data.allSnippet.edges;
|
||||
|
||||
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
|
||||
const [searchResults, setSearchResults] = React.useState(snippets);
|
||||
@ -30,9 +23,9 @@ const SearchPage = props => {
|
||||
let results = snippets;
|
||||
if (q.trim().length)
|
||||
results = snippets.filter(
|
||||
v =>
|
||||
v.tags.filter(t => t.indexOf(q) !== -1).length ||
|
||||
v.title.toLowerCase().indexOf(q) !== -1,
|
||||
({ node }) =>
|
||||
node.tags.all.filter(t => t.indexOf(q) !== -1).length ||
|
||||
node.title.toLowerCase().indexOf(q) !== -1,
|
||||
);
|
||||
setSearchResults(results);
|
||||
}, [searchQuery]);
|
||||
@ -75,11 +68,16 @@ const SearchPage = props => {
|
||||
) : (
|
||||
<>
|
||||
<h2 className='page-sub-title'>Search results</h2>
|
||||
{searchResults.map(snippet => (
|
||||
{searchResults.map(({node}) => (
|
||||
<SnippetCard
|
||||
key={`snippet_${snippet.id}`}
|
||||
key={`snippet_${node.id}`}
|
||||
short
|
||||
snippetData={snippet}
|
||||
snippetData={{
|
||||
title: node.title,
|
||||
html: node.html.text,
|
||||
tags: node.tags.all,
|
||||
id: node.id
|
||||
}}
|
||||
isDarkMode={props.isDarkMode}
|
||||
/>
|
||||
))}
|
||||
@ -102,22 +100,17 @@ export default connect(
|
||||
|
||||
export const searchPageQuery = graphql`
|
||||
query searchSnippetList {
|
||||
snippetDataJson(meta: { type: { eq: "snippetListingArray" }, scope: {eq: "./snippets"} }) {
|
||||
data {
|
||||
id
|
||||
title
|
||||
attributes {
|
||||
tags
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark {
|
||||
allSnippet {
|
||||
edges {
|
||||
node {
|
||||
html
|
||||
frontmatter {
|
||||
title
|
||||
node {
|
||||
title
|
||||
html {
|
||||
text
|
||||
}
|
||||
tags {
|
||||
all
|
||||
}
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user