mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
add header navigation, more jellyfish
This commit is contained in:
parent
afbd9bebfc
commit
96265db342
@ -52,7 +52,10 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
resolve: 'gatsby-plugin-sass',
|
resolve: 'gatsby-plugin-sass',
|
||||||
options: {
|
options: {
|
||||||
includePaths: [`${__dirname}/src/styles`]
|
includePaths: [
|
||||||
|
`${__dirname}/node_modules`,
|
||||||
|
`${__dirname}/src/styles`
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -1,18 +1,58 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
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 { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
|
||||||
import styles from './Header.module.scss'
|
import styles from './Header.module.scss'
|
||||||
|
|
||||||
const Header = ({ siteTitle }) => (
|
const Header = ({ siteTitle }) => (
|
||||||
|
<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}>
|
<header className={styles.header}>
|
||||||
<div className={styles.headerContent}>
|
<div className={styles.headerContent}>
|
||||||
<Link to={'/'} className={styles.headerLogo}>
|
<Link to={'/'} className={styles.headerLogo}>
|
||||||
<Logo className={styles.headerLogoImage} />
|
<Logo className={styles.headerLogoImage} />
|
||||||
<h1 className={styles.headerTitle}>{siteTitle}</h1>
|
<h1 className={styles.headerTitle}>{title}</h1>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
<nav className={styles.headerMenu}>
|
||||||
|
{sections.map(({ node }) => (
|
||||||
|
<Link
|
||||||
|
key={node.title}
|
||||||
|
to={node.link}
|
||||||
|
className={styles.section}
|
||||||
|
>
|
||||||
|
{node.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
|
|
||||||
Header.propTypes = {
|
Header.propTypes = {
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: $brand-black;
|
background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center -4rem;
|
||||||
|
background-size: cover;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $spacer / 2 0;
|
padding: $spacer / 2 0;
|
||||||
padding-right: $spacer / 1.5;
|
padding-right: $spacer / 1.5;
|
||||||
@ -48,3 +49,15 @@
|
|||||||
.headerMenu {
|
.headerMenu {
|
||||||
justify-self: flex-end;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -2,7 +2,8 @@
|
|||||||
@import 'animations';
|
@import 'animations';
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: $brand-black;
|
background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center 7rem;
|
||||||
|
background-size: cover;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $spacer * 2 0;
|
padding: $spacer * 2 0;
|
||||||
min-height: 30rem;
|
min-height: 30rem;
|
||||||
|
@ -1,18 +1,24 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
import { Link } from 'gatsby'
|
||||||
import Content from './Content'
|
import Content from './Content'
|
||||||
import styles from './HeaderSection.module.scss'
|
import styles from './HeaderSection.module.scss'
|
||||||
|
|
||||||
const HeaderSection = ({ title }) => (
|
const HeaderSection = ({ title }) => (
|
||||||
<header className={styles.headerSection}>
|
<header className={styles.headerSection}>
|
||||||
<Content>
|
<Content>
|
||||||
<h1 className={styles.headerSectionTitle}>{title}</h1>
|
<h1 className={styles.headerSectionTitle}>
|
||||||
|
<Link className={styles.rootLink} to="/">
|
||||||
|
/
|
||||||
|
</Link>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
</Content>
|
</Content>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
|
||||||
HeaderSection.propTypes = {
|
HeaderSection.propTypes = {
|
||||||
title: PropTypes.string
|
title: PropTypes.array
|
||||||
}
|
}
|
||||||
|
|
||||||
export default HeaderSection
|
export default HeaderSection
|
||||||
|
@ -1,12 +1,17 @@
|
|||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
.headerSection {
|
.headerSection {
|
||||||
padding: $spacer / 2 0;
|
padding: $spacer 0;
|
||||||
border-bottom: .1rem solid $brand-grey-lighter;
|
border-bottom: .1rem solid $brand-grey-lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerSectionTitle {
|
.headerSectionTitle {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: $font-size-large;
|
font-size: $font-size-h4;
|
||||||
color: $brand-grey-light;
|
color: $brand-grey-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rootLink {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: $spacer / 4;
|
||||||
|
}
|
||||||
|
@ -1,22 +1,9 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { StaticQuery, graphql } from 'gatsby'
|
|
||||||
import Header from './Header'
|
import Header from './Header'
|
||||||
|
|
||||||
const Layout = ({ children, header }) => (
|
const Layout = ({ children, header }) => {
|
||||||
<StaticQuery
|
const headerElement = header || <Header />
|
||||||
query={graphql`
|
|
||||||
query SiteTitleQuery {
|
|
||||||
site {
|
|
||||||
siteMetadata {
|
|
||||||
title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
render={data => {
|
|
||||||
const { title } = data.site.siteMetadata
|
|
||||||
const headerElement = header || <Header siteTitle={title} />
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -24,9 +11,7 @@ const Layout = ({ children, header }) => (
|
|||||||
{children}
|
{children}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}}
|
}
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
Layout.propTypes = {
|
Layout.propTypes = {
|
||||||
children: PropTypes.node.isRequired,
|
children: PropTypes.node.isRequired,
|
||||||
|
@ -16,12 +16,22 @@ export default class DocTemplate extends Component {
|
|||||||
render() {
|
render() {
|
||||||
const { location } = this.props
|
const { location } = this.props
|
||||||
const post = this.props.data.markdownRemark
|
const post = this.props.data.markdownRemark
|
||||||
|
const sections = this.props.data.allSectionsYaml.edges
|
||||||
const { section } = post.fields
|
const { section } = post.fields
|
||||||
const { title, description } = post.frontmatter
|
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 (
|
return (
|
||||||
<Layout location={location}>
|
<Layout location={location}>
|
||||||
<HeaderSection title={section} />
|
<HeaderSection title={sectionTitle} />
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
{section ? (
|
{section ? (
|
||||||
<main className={styles.wrapper}>
|
<main className={styles.wrapper}>
|
||||||
@ -79,6 +89,7 @@ export const pageQuery = graphql`
|
|||||||
title
|
title
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||||
id
|
id
|
||||||
excerpt
|
excerpt
|
||||||
@ -91,5 +102,15 @@ export const pageQuery = graphql`
|
|||||||
section
|
section
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
allSectionsYaml {
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
title
|
||||||
|
description
|
||||||
|
link
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
Loading…
Reference in New Issue
Block a user