1import React from 'react' 2import styled from 'styled-components' 3import {StaticQuery, graphql} from 'gatsby' 4import {Flex} from 'rebass' 5import {SidebarLink} from './links' 6import Accordion from './Accordion' 7 8const 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 17const 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 52export 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