mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
more nav tweaks, test content images
This commit is contained in:
parent
0c7f9c0c3b
commit
01858ab17e
GPG Key ID:
606EEEF3C479A91F
@ -1,3 +1,6 @@
|
||||
---
|
||||
title: Architecture
|
||||
description: The architecture of Ocean Protocol with all its components and how they work together.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
---
|
||||
title: Ecosystem
|
||||
description: The Ocean Protocol network consists of various components.
|
||||
---
|
||||
|
||||
Learn about all of them here.
|
||||
|
||||
- 💧 keeper
|
||||
- 🐋 aquarius
|
||||
- brizo
|
||||
- 🦄 pleuston
|
||||
- 🦑 squid
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Get up to speed with Ocean Protocol
|
||||
---
|
||||
|
||||
What is Ocean Protocol?
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Terminology
|
||||
description: Terminology specific to Ocean Protocol.
|
||||
---
|
||||
|
||||
There is terminology specific to Ocean Protocol.
|
||||
|
||||
## Asset
|
||||
|
||||
A data set or data service.
|
||||
|
||||
BIN
content/images/components.png
Normal file
BIN
content/images/components.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
@ -26,9 +26,14 @@ module.exports = {
|
||||
{
|
||||
resolve: 'gatsby-remark-images',
|
||||
options: {
|
||||
maxWidth: 600
|
||||
maxWidth: 756,
|
||||
quality: 80,
|
||||
withWebp: true,
|
||||
linkImagesToOriginal: false,
|
||||
showCaptions: true
|
||||
}
|
||||
},
|
||||
'gatsby-remark-smartypants',
|
||||
'gatsby-remark-prismjs',
|
||||
'gatsby-remark-autolink-headers'
|
||||
]
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"gatsby-remark-autolink-headers": "^2.0.10",
|
||||
"gatsby-remark-images": "^2.0.6",
|
||||
"gatsby-remark-prismjs": "^3.0.3",
|
||||
"gatsby-remark-smartypants": "^2.0.6",
|
||||
"gatsby-source-filesystem": "^2.0.7",
|
||||
"gatsby-transformer-remark": "^2.1.11",
|
||||
"gatsby-transformer-sharp": "^2.1.8",
|
||||
|
||||
@ -7,6 +7,6 @@
|
||||
|
||||
.headerSectionTitle {
|
||||
margin: 0;
|
||||
font-size: $font-size-h4;
|
||||
font-size: $font-size-large;
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
|
||||
@ -3,25 +3,6 @@ import PropTypes from 'prop-types'
|
||||
import { Link } from 'gatsby'
|
||||
import styles from './Sidebar.module.scss'
|
||||
|
||||
function groupExpanded(items, pathname) {
|
||||
var breakException = {}
|
||||
|
||||
try {
|
||||
items.forEach(item => {
|
||||
if (item.link === pathname) {
|
||||
throw breakException
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
if (e !== breakException) {
|
||||
throw e
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const SidebarLink = ({ link, title, linkClasses }) => {
|
||||
if (link) {
|
||||
if (link.match(/^\s?http(s?)/gi)) {
|
||||
@ -82,11 +63,9 @@ export default class Sidebar extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<nav>
|
||||
<nav className={styles.sidebar}>
|
||||
{sidebarfile.map((group, i) => (
|
||||
<div key={i}>
|
||||
{groupExpanded(group.items, location.pathname) ? (
|
||||
<>
|
||||
<h4 className={styles.groupTitle}>
|
||||
{group.items[0].link ? (
|
||||
<SidebarLink
|
||||
@ -103,20 +82,6 @@ export default class Sidebar extends Component {
|
||||
items={group.items}
|
||||
location={location}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<h4 className={styles.groupTitle}>
|
||||
{group.items[0].link ? (
|
||||
<SidebarLink
|
||||
link={group.items[0].link}
|
||||
title={group.group}
|
||||
linkClasses={styles.groupTitleLink}
|
||||
/>
|
||||
) : (
|
||||
group.group
|
||||
)}
|
||||
</h4>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
@ -1,18 +1,33 @@
|
||||
@import 'variables';
|
||||
|
||||
.sidebar {
|
||||
padding-top: $spacer / 2;
|
||||
}
|
||||
|
||||
.groupTitle {
|
||||
font-size: $font-size-large;
|
||||
margin-bottom: $spacer / 2;
|
||||
font-size: $font-size-small;
|
||||
font-family: $font-family-button;
|
||||
text-transform: uppercase;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer / 4;
|
||||
}
|
||||
|
||||
.groupTitleLink {
|
||||
color: $brand-grey-light;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: none;
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-left: 1px solid $brand-grey-lighter;
|
||||
margin-left: $spacer / 2;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
@ -20,12 +35,21 @@
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $brand-grey-light;
|
||||
color: $brand-grey;
|
||||
display: inline-block;
|
||||
padding: $spacer / 6 $spacer / 2;
|
||||
border-left: .1rem solid transparent;
|
||||
margin-left: -.05rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: none;
|
||||
color: $brand-purple;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
composes: link;
|
||||
color: $brand-grey;
|
||||
color: $brand-purple;
|
||||
border-left-color: $brand-purple;
|
||||
}
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
items:
|
||||
- title: What is Ocean Protocol?
|
||||
link: /concepts/introduction/
|
||||
- title: Terminology
|
||||
link: /concepts/terminology/
|
||||
- title: Ecosystem overview
|
||||
link: /concepts/ecosystem/
|
||||
- title: Terminology
|
||||
link: /concepts/terminology/
|
||||
|
||||
- group: Architecture
|
||||
items:
|
||||
|
||||
@ -25,11 +25,11 @@ const IndexPage = ({ location }) => (
|
||||
Understand the fundamentals of Ocean Protocol.
|
||||
</SectionLink>
|
||||
|
||||
<SectionLink to="/setup/" title="Setup Guides">
|
||||
<SectionLink to="/setup/keeper/" title="Setup Guides">
|
||||
Setting up the Ocean Protocol components.
|
||||
</SectionLink>
|
||||
|
||||
<SectionLink to="/tutorials/" title="Tutorials">
|
||||
<SectionLink to="/tutorials/jupyter/" title="Tutorials">
|
||||
Browse tutorials for most common setup and development
|
||||
use-cases.
|
||||
</SectionLink>
|
||||
|
||||
@ -30,9 +30,9 @@ $font-size-mini: .65rem;
|
||||
$font-size-text: $font-size-base;
|
||||
$font-size-label: $font-size-base;
|
||||
$font-size-title: 1.4rem;
|
||||
$font-size-h1: 3.4rem;
|
||||
$font-size-h2: 2.7rem;
|
||||
$font-size-h3: 2rem;
|
||||
$font-size-h1: 3rem;
|
||||
$font-size-h2: 2rem;
|
||||
$font-size-h3: 1.7rem;
|
||||
$font-size-h4: 1.5rem;
|
||||
$font-size-h5: 1.125rem;
|
||||
|
||||
|
||||
@ -17,23 +17,31 @@ export default class DocTemplate extends Component {
|
||||
const { location } = this.props
|
||||
const post = this.props.data.markdownRemark
|
||||
const { section } = post.fields
|
||||
const { title, description } = post.frontmatter
|
||||
|
||||
return (
|
||||
<Layout location={location}>
|
||||
<HeaderSection title={section} />
|
||||
<Content>
|
||||
<div className={styles.wrapper}>
|
||||
<main className={styles.wrapper}>
|
||||
<aside className={styles.sidebar}>
|
||||
<Sidebar location={location} sidebar={section} />
|
||||
</aside>
|
||||
|
||||
<main className={styles.main}>
|
||||
<h1>{post.frontmatter.title}</h1>
|
||||
<article className={styles.main}>
|
||||
<header className={styles.header}>
|
||||
<h1 className={styles.title}>{title}</h1>
|
||||
{description && (
|
||||
<p className={styles.lead}>{description}</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div
|
||||
className={styles.docContent}
|
||||
dangerouslySetInnerHTML={{ __html: post.html }}
|
||||
/>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
)
|
||||
@ -53,6 +61,7 @@ export const pageQuery = graphql`
|
||||
html
|
||||
frontmatter {
|
||||
title
|
||||
description
|
||||
}
|
||||
fields {
|
||||
section
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import 'variables';
|
||||
|
||||
.wrapper {
|
||||
@media (min-width: $break-point--small) {
|
||||
@media (min-width: $break-point--medium) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -14,3 +14,27 @@
|
||||
.main {
|
||||
flex: 0 0 70%;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer * $line-height;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-size-h1;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer / $line-height;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
.docContent {
|
||||
figcaption {
|
||||
font-size: $font-size-small;
|
||||
text-align: center;
|
||||
color: $brand-grey-light;
|
||||
margin-top: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user