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

Update list, search and index to show demos and browser support

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-24 10:43:07 +03:00
parent 1142849d11
commit 0bb3c03186
5 changed files with 63 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,11 +22,8 @@ const IndexPage = props => {
tags: snippet.attributes.tags,
text: snippet.attributes.text,
id: snippet.id,
code: getCodeBlocks(
props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.rawMarkdownBody,
).code,
code: snippet.attributes.codeBlocks,
supportPercentage: snippet.attributes.browserSupport.supportPercentage,
}));
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
@ -125,13 +122,22 @@ export const indexPageQuery = graphql`
}
}
}
snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
data {
id
title
attributes {
tags
text
codeBlocks {
html
css
js
scopedCss
}
browserSupport {
supportPercentage
}
}
}
}

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

@ -24,11 +24,8 @@ const ListPage = props => {
tags: snippet.attributes.tags,
text: snippet.attributes.text,
id: snippet.id,
code: getCodeBlocks(
props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.rawMarkdownBody,
).code,
code: snippet.attributes.codeBlocks,
supportPercentage: snippet.attributes.browserSupport.supportPercentage,
}));
const tags = snippets.reduce((acc, snippet) => {
if (!snippet.tags) return acc;
@ -57,7 +54,7 @@ const ListPage = props => {
Click on a snippet’s name to view its code or a tag name to view all
snippets in that category.
</p>
{tags.map(tag => (
{tags.sort((a,b) => a.localeCompare(b)).map(tag => (
<>
<h3 className='tag-title' key={`tag_title_${tag}`}>
<AniLink
@ -114,13 +111,22 @@ export default connect(
export const listPageQuery = graphql`
query snippetListing {
snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
data {
id
title
attributes {
tags
text
codeBlocks {
html
css
js
scopedCss
}
browserSupport {
supportPercentage
}
}
}
}

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

@ -22,11 +22,8 @@ const SearchPage = props => {
tags: snippet.attributes.tags,
text: snippet.attributes.text,
id: snippet.id,
code: getCodeBlocks(
props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.rawMarkdownBody,
).code,
code: snippet.attributes.codeBlocks,
supportPercentage: snippet.attributes.browserSupport.supportPercentage,
}));
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
@ -110,13 +107,22 @@ export default connect(
export const searchPageQuery = graphql`
query searchSnippetList {
snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
data {
id
title
attributes {
tags
text
codeBlocks {
html
css
js
scopedCss
}
browserSupport {
supportPercentage
}
}
}
}