mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Fix: Refactor components
This commit is contained in:
Akshay
parent
06e337146f
commit
faa3c79e65
79
src/templates/ContentWrapperTemplate.jsx
Normal file
79
src/templates/ContentWrapperTemplate.jsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { Helmet } from 'react-helmet'
|
||||||
|
import Layout from '../components/Layout'
|
||||||
|
import Content from '../components/Content'
|
||||||
|
import HeaderSection from '../components/HeaderSection'
|
||||||
|
import Sidebar from '../components/Sidebar'
|
||||||
|
import DocHeader from '../components/DocHeader'
|
||||||
|
import Seo from '../components/Seo'
|
||||||
|
|
||||||
|
import stylesDoc from './Doc.module.scss'
|
||||||
|
|
||||||
|
export default class ContentWrapperTemplate extends Component {
|
||||||
|
static propTypes = {
|
||||||
|
data: PropTypes.object.isRequired,
|
||||||
|
location: PropTypes.object.isRequired,
|
||||||
|
pageContext: PropTypes.object.isRequired,
|
||||||
|
toc: PropTypes.object.isRequired,
|
||||||
|
info: PropTypes.object.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
|
||||||
|
if (node.title.toLowerCase().includes('references')) {
|
||||||
|
return node.title
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { location, pageContext } = this.props
|
||||||
|
const { title, description, version } = this.props.info
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Helmet>
|
||||||
|
<body className="references" />
|
||||||
|
</Helmet>
|
||||||
|
|
||||||
|
<Seo
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
slug={pageContext.slug}
|
||||||
|
article
|
||||||
|
location={location}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Layout location={location}>
|
||||||
|
<HeaderSection title={this.sectionTitle} />
|
||||||
|
|
||||||
|
<Content>
|
||||||
|
<main className={stylesDoc.wrapper}>
|
||||||
|
<aside className={stylesDoc.sidebar}>
|
||||||
|
<Sidebar
|
||||||
|
location={location}
|
||||||
|
sidebar="references"
|
||||||
|
collapsed
|
||||||
|
toc
|
||||||
|
tocComponent={this.props.toc}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
<article className={stylesDoc.main}>
|
||||||
|
<DocHeader
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
prepend={
|
||||||
|
<span className={stylesDoc.version}>
|
||||||
|
<span>v{version}</span>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{this.props.children}
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,21 +1,14 @@
|
|||||||
import React, { Component } from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { graphql } from 'gatsby'
|
import { graphql } from 'gatsby'
|
||||||
import { Helmet } from 'react-helmet'
|
|
||||||
|
|
||||||
import Layout from '../../components/Layout'
|
|
||||||
import Content from '../../components/Content'
|
|
||||||
import HeaderSection from '../../components/HeaderSection'
|
|
||||||
import Sidebar from '../../components/Sidebar'
|
|
||||||
import DocHeader from '../../components/DocHeader'
|
|
||||||
import DocFooter from '../../components/DocFooter'
|
import DocFooter from '../../components/DocFooter'
|
||||||
import Seo from '../../components/Seo'
|
|
||||||
|
|
||||||
import Toc from './Toc'
|
import Toc from './Toc'
|
||||||
import Paths from './Paths'
|
import Paths from './Paths'
|
||||||
|
|
||||||
import stylesDoc from '../Doc.module.scss'
|
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
|
import ContentWrapperTemplate from '../ContentWrapperTemplate'
|
||||||
|
|
||||||
const SwaggerMeta = ({ contact, license }) => (
|
const SwaggerMeta = ({ contact, license }) => (
|
||||||
<ul className={styles.swaggerMeta}>
|
<ul className={styles.swaggerMeta}>
|
||||||
@ -52,87 +45,41 @@ BasePath.propTypes = {
|
|||||||
basePath: PropTypes.string
|
basePath: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class ApiSwaggerTemplate extends Component {
|
export default function ApiSwaggerTemplate({
|
||||||
static propTypes = {
|
data,
|
||||||
data: PropTypes.object.isRequired,
|
path,
|
||||||
location: PropTypes.object.isRequired,
|
location,
|
||||||
pageContext: PropTypes.object.isRequired
|
pageContext
|
||||||
}
|
}) {
|
||||||
|
const { api } = pageContext
|
||||||
|
const { host, basePath, info, paths } = api
|
||||||
|
const { title, license, contact } = info
|
||||||
|
|
||||||
// output section title as defined in sections.yml
|
return (
|
||||||
sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
|
<>
|
||||||
// compare section against section title from sections.yml
|
<ContentWrapperTemplate
|
||||||
if (node.title.toLowerCase().includes('references')) {
|
data={data}
|
||||||
return node.title
|
path={path}
|
||||||
}
|
location={location}
|
||||||
})
|
pageContext={pageContext}
|
||||||
|
info={info}
|
||||||
|
toc={<Toc data={api} />}
|
||||||
|
>
|
||||||
|
{(contact || license) && (
|
||||||
|
<SwaggerMeta contact={contact} license={license} />
|
||||||
|
)}
|
||||||
|
|
||||||
render() {
|
{(host || basePath) && <BasePath host={host} basePath={basePath} />}
|
||||||
const { location, pageContext } = this.props
|
|
||||||
const { api } = pageContext
|
|
||||||
const { host, basePath, info, paths } = api
|
|
||||||
const { title, description, version, license, contact } = info
|
|
||||||
|
|
||||||
return (
|
<Paths paths={paths} />
|
||||||
<>
|
|
||||||
<Helmet>
|
|
||||||
<body className="references" />
|
|
||||||
</Helmet>
|
|
||||||
|
|
||||||
<Seo
|
<DocFooter
|
||||||
title={title}
|
url={`https://github.com/oceanprotocol/${title.toLowerCase()}`}
|
||||||
description={description}
|
externalName={`${title} Swagger spec`}
|
||||||
slug={pageContext.slug}
|
|
||||||
article
|
|
||||||
location={location}
|
|
||||||
/>
|
/>
|
||||||
|
</ContentWrapperTemplate>
|
||||||
<Layout location={location}>
|
</>
|
||||||
<HeaderSection title={this.sectionTitle} />
|
)
|
||||||
|
|
||||||
<Content>
|
|
||||||
<main className={stylesDoc.wrapper}>
|
|
||||||
<aside className={stylesDoc.sidebar}>
|
|
||||||
<Sidebar
|
|
||||||
location={location}
|
|
||||||
sidebar="references"
|
|
||||||
collapsed
|
|
||||||
toc
|
|
||||||
tocComponent={<Toc data={api} />}
|
|
||||||
/>
|
|
||||||
</aside>
|
|
||||||
<article className={stylesDoc.main}>
|
|
||||||
<DocHeader
|
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
prepend={
|
|
||||||
<span className={stylesDoc.version}>
|
|
||||||
<span>v{version}</span>
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{(contact || license) && (
|
|
||||||
<SwaggerMeta contact={contact} license={license} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(host || basePath) && (
|
|
||||||
<BasePath host={host} basePath={basePath} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Paths paths={paths} />
|
|
||||||
|
|
||||||
<DocFooter
|
|
||||||
url={`https://github.com/oceanprotocol/${title.toLowerCase()}`}
|
|
||||||
externalName={`${title} Swagger spec`}
|
|
||||||
/>
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const apiSwaggerQuery = graphql`
|
export const apiSwaggerQuery = graphql`
|
||||||
|
|||||||
@ -1,82 +1,29 @@
|
|||||||
import React, { Component } from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { graphql } from 'gatsby'
|
import { graphql } from 'gatsby'
|
||||||
import { Helmet } from 'react-helmet'
|
|
||||||
import Layout from '../../components/Layout'
|
|
||||||
import Content from '../../components/Content'
|
|
||||||
import HeaderSection from '../../components/HeaderSection'
|
|
||||||
import Sidebar from '../../components/Sidebar'
|
|
||||||
import DocHeader from '../../components/DocHeader'
|
|
||||||
import Seo from '../../components/Seo'
|
|
||||||
|
|
||||||
import Entities from './Entities'
|
import Entities from './Entities'
|
||||||
import Toc from './Toc'
|
import Toc from './Toc'
|
||||||
|
|
||||||
import stylesDoc from '../Doc.module.scss'
|
import ContentWrapperTemplate from '../ContentWrapperTemplate'
|
||||||
|
|
||||||
export default class TypedocTemplate extends Component {
|
export default function TypedocTemplate({ data, path, location, pageContext }) {
|
||||||
static propTypes = {
|
const { typedoc } = pageContext
|
||||||
data: PropTypes.object.isRequired,
|
const { sourceUrl } = typedoc.info
|
||||||
location: PropTypes.object.isRequired,
|
|
||||||
pageContext: PropTypes.object.isRequired
|
|
||||||
}
|
|
||||||
|
|
||||||
// output section title as defined in sections.yml
|
return (
|
||||||
sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
|
<>
|
||||||
// compare section against section title from sections.yml
|
<ContentWrapperTemplate
|
||||||
if (node.title.toLowerCase().includes('references')) {
|
data={data}
|
||||||
return node.title
|
path={path}
|
||||||
}
|
location={location}
|
||||||
})
|
pageContext={pageContext}
|
||||||
|
info={typedoc.info}
|
||||||
render() {
|
toc={<Toc data={typedoc.children} />}
|
||||||
const { location, pageContext } = this.props
|
>
|
||||||
const { typedoc } = pageContext
|
<Entities entities={typedoc.children} sourceUrl={sourceUrl} />
|
||||||
const { title, description, version, sourceUrl } = typedoc.info
|
</ContentWrapperTemplate>
|
||||||
|
</>
|
||||||
return (
|
)
|
||||||
<>
|
|
||||||
<Helmet>
|
|
||||||
<body className="references" />
|
|
||||||
</Helmet>
|
|
||||||
|
|
||||||
<Seo
|
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
slug={pageContext.slug}
|
|
||||||
article
|
|
||||||
location={location}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Layout location={location}>
|
|
||||||
<HeaderSection title={this.sectionTitle} />
|
|
||||||
|
|
||||||
<Content>
|
|
||||||
<main className={stylesDoc.wrapper}>
|
|
||||||
<aside className={stylesDoc.sidebar}>
|
|
||||||
<Sidebar
|
|
||||||
location={location}
|
|
||||||
sidebar="references"
|
|
||||||
collapsed
|
|
||||||
toc
|
|
||||||
tocComponent={<Toc data={typedoc.children} />}
|
|
||||||
/>
|
|
||||||
</aside>
|
|
||||||
<article className={stylesDoc.main}>
|
|
||||||
<DocHeader
|
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
prepend={<span className={stylesDoc.version}>{version}</span>}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Entities entities={typedoc.children} sourceUrl={sourceUrl} />
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TypedocQuery = graphql`
|
export const TypedocQuery = graphql`
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user