1 | import React from 'react'
|
2 | import styled from 'styled-components'
|
3 | import {StaticQuery, graphql} from 'gatsby'
|
4 | import {Flex} from 'rebass'
|
5 | import {SidebarLink} from './links'
|
6 | import Accordion from './Accordion'
|
7 |
|
8 | const LinkDesc = styled.span`
|
9 | font-size: 11px;
|
10 | line-height: 1.5;
|
11 | text-transform: lowercase;
|
12 | display: block;
|
13 | font-weight: 400;
|
14 | color: ${(props) => props.theme.colors.darkGray};
|
15 | `
|
16 |
|
17 | const DocLinks = ({data}) => {
|
18 | const linkInfo = data.allMarkdownRemark.nodes
|
19 | const sections = ['cli-commands', 'configuring-npm', 'using-npm']
|
20 | let sortedData = {}
|
21 |
|
22 | sections.map((section) => (
|
23 | sortedData[section] = linkInfo.filter(function (item) {
|
24 | return item.frontmatter.section === section
|
25 | })
|
26 | ))
|
27 |
|
28 | return sections.map((section, index) => (
|
29 | <Accordion key={index} section={section}>
|
30 | {sortedData[section].map((linkData, index) => {
|
31 | const title = section === 'cli-commands'
|
32 | ? linkData.frontmatter.title.replace(/(npm-)+([a-zA-Z\\.-]*)/, 'npm $2')
|
33 | : linkData.frontmatter.title
|
34 |
|
35 | return (
|
36 | <Flex flexDirection='column' key={index}>
|
37 | <SidebarLink
|
38 | to={`${linkData.fields.slug}`}
|
39 | activeClassName='active-sidebar-link'
|
40 | >
|
41 | {title}
|
42 | <LinkDesc>{linkData.frontmatter.description}</LinkDesc>
|
43 | </SidebarLink>
|
44 | </Flex>
|
45 | )
|
46 | })
|
47 | }
|
48 | </Accordion>
|
49 | ))
|
50 | }
|
51 |
|
52 | export default props => (
|
53 | <StaticQuery
|
54 | query={graphql`
|
55 | query sortedLinkData {
|
56 | allMarkdownRemark(sort: {fields: frontmatter___title}) {
|
57 | nodes {
|
58 | fields {
|
59 | slug
|
60 | }
|
61 | frontmatter {
|
62 | description
|
63 | section
|
64 | title
|
65 | }
|
66 | }
|
67 | }
|
68 | }
|
69 | `}
|
70 | render={data => <DocLinks data={data} {...props} />}
|
71 | />
|
72 | )
|
73 |
|
\ | No newline at end of file |