oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

add header navigation, more jellyfish

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-09 13:57:11 +01:00
parent afbd9bebfc
commit 96265db342
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 115 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gatsby-config.js
View File

@ -52,7 +52,10 @@ module.exports = {
{
resolve: 'gatsby-plugin-sass',
options: {
includePaths: [`${__dirname}/src/styles`]
includePaths: [
`${__dirname}/node_modules`,
`${__dirname}/src/styles`
]
}
},
{

58
src/components/Header.jsx
View File

@ -1,18 +1,58 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import { Link, StaticQuery, graphql } from 'gatsby'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
import styles from './Header.module.scss'
const Header = ({ siteTitle }) => (
<header className={styles.header}>
<div className={styles.headerContent}>
<Link to={'/'} className={styles.headerLogo}>
<Logo className={styles.headerLogoImage} />
<h1 className={styles.headerTitle}>{siteTitle}</h1>
</Link>
</div>
</header>
<StaticQuery
query={graphql`
query {
site {
siteMetadata {
title
}
}
allSectionsYaml {
edges {
node {
title
description
link
}
}
}
}
`}
render={data => {
const { title } = data.site.siteMetadata
const sections = data.allSectionsYaml.edges
return (
<header className={styles.header}>
<div className={styles.headerContent}>
<Link to={'/'} className={styles.headerLogo}>
<Logo className={styles.headerLogoImage} />
<h1 className={styles.headerTitle}>{title}</h1>
</Link>
<nav className={styles.headerMenu}>
{sections.map(({ node }) => (
<Link
key={node.title}
to={node.link}
className={styles.section}
>
{node.title}
</Link>
))}
</nav>
</div>
</header>
)
}}
/>
)
Header.propTypes = {

15
src/components/Header.module.scss
View File

@ -1,7 +1,8 @@
@import 'variables';
.header {
background: $brand-black;
background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center -4rem;
background-size: cover;
width: 100%;
padding: $spacer / 2 0;
padding-right: $spacer / 1.5;
@ -48,3 +49,15 @@
.headerMenu {
justify-self: flex-end;
}
.section {
display: inline-block;
margin: 0 $spacer / 2;
font-family: $font-family-button;
color: $brand-grey-light;
&:hover,
&:focus {
color: $brand-white;
}
}

3
src/components/HeaderHome.module.scss
View File

@ -2,7 +2,8 @@
@import 'animations';
.header {
background: $brand-black;
background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center 7rem;
background-size: cover;
width: 100%;
padding: $spacer * 2 0;
min-height: 30rem;

10
src/components/HeaderSection.jsx
View File

@ -1,18 +1,24 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import Content from './Content'
import styles from './HeaderSection.module.scss'
const HeaderSection = ({ title }) => (
<header className={styles.headerSection}>
<Content>
<h1 className={styles.headerSectionTitle}>{title}</h1>
<h1 className={styles.headerSectionTitle}>
<Link className={styles.rootLink} to="/">
/
</Link>
{title}
</h1>
</Content>
</header>
)
HeaderSection.propTypes = {
title: PropTypes.string
title: PropTypes.array
}
export default HeaderSection

9
src/components/HeaderSection.module.scss
View File

@ -1,12 +1,17 @@
@import 'variables';
.headerSection {
padding: $spacer / 2 0;
padding: $spacer 0;
border-bottom: .1rem solid $brand-grey-lighter;
}
.headerSectionTitle {
margin: 0;
font-size: $font-size-large;
font-size: $font-size-h4;
color: $brand-grey-light;
}
.rootLink {
display: inline-block;
margin-right: $spacer / 4;
}

33
src/components/Layout.jsx
View File

@ -1,32 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import Header from './Header'
const Layout = ({ children, header }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => {
const { title } = data.site.siteMetadata
const headerElement = header || <Header siteTitle={title} />
const Layout = ({ children, header }) => {
const headerElement = header || <Header />
return (
<>
{headerElement}
{children}
</>
)
}}
/>
)
return (
<>
{headerElement}
{children}
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,

23
src/templates/Doc.jsx
View File

@ -16,12 +16,22 @@ export default class DocTemplate extends Component {
render() {
const { location } = this.props
const post = this.props.data.markdownRemark
const sections = this.props.data.allSectionsYaml.edges
const { section } = post.fields
const { title, description } = post.frontmatter
// output section title as defined in sections.yml
const sectionTitle = sections.map(({ node }) => {
// compare section against section title from sections.yml
if (node.title.toLowerCase().includes(section)) {
return node.title
}
})
return (
<Layout location={location}>
<HeaderSection title={section} />
<HeaderSection title={sectionTitle} />
<Content>
{section ? (
<main className={styles.wrapper}>
@ -79,6 +89,7 @@ export const pageQuery = graphql`
title
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt
@ -91,5 +102,15 @@ export const pageQuery = graphql`
section
}
}
allSectionsYaml {
edges {
node {
title
description
link
}
}
}
}
`