Skip to content

Instantly share code, notes, and snippets.

@patricoferris
Created December 4, 2018 13:50
Show Gist options
  • Save patricoferris/bee052f209770e02f50537e496d9d55b to your computer and use it in GitHub Desktop.
Save patricoferris/bee052f209770e02f50537e496d9d55b to your computer and use it in GitHub Desktop.
/*IMPORTS GO HERE*/
// The functional component of our index page
const IndexPage = (props) => {
// Getting the data
const notes = props.data.allMarkdownRemark;
// Grouping based on the slug - the first part being the subject
const subjects = _.chain(notes.edges)
.groupBy(node => node.node.fields.slug.split('/')[1])
.map(node => node)
.value();
// Mapping over the 'subjects' and each node within and generating links to the pages
return (
<Layout>
<h2 style={{textAlign: 'center', fontFamily: 'courier, monospace'}}>Subjects</h2>
<Accordion>
{subjects.map((arr, i) => (
<AccordionItem key={arr[0].node.fields.slug.split('/')[1]}>
<AccordionItemTitle>{arr[0].node.fields.slug.split('/')[1].toUpperCase()}</AccordionItemTitle>
{arr.map(({ node }, j) => (
<AccordionItemBody key={node.frontmatter.title}>
<Link to={node.fields.slug} className="link" >
<div className="post-list">
{node.frontmatter.title}
</div>
</Link>
</AccordionItemBody>
))}
</AccordionItem>
))}
</Accordion>
</Layout>
)
}
export default IndexPage
// The graphql query that generates the data we need
export const query = graphql`
query ListQuery {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment