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 { 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 Seo from '../../components/Seo'
|
||||
|
||||
import Toc from './Toc'
|
||||
import Paths from './Paths'
|
||||
|
||||
import stylesDoc from '../Doc.module.scss'
|
||||
import styles from './index.module.scss'
|
||||
import ContentWrapperTemplate from '../ContentWrapperTemplate'
|
||||
|
||||
const SwaggerMeta = ({ contact, license }) => (
|
||||
<ul className={styles.swaggerMeta}>
|
||||
@ -52,87 +45,41 @@ BasePath.propTypes = {
|
||||
basePath: PropTypes.string
|
||||
}
|
||||
|
||||
export default class ApiSwaggerTemplate extends Component {
|
||||
static propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
location: PropTypes.object.isRequired,
|
||||
pageContext: PropTypes.object.isRequired
|
||||
}
|
||||
export default function ApiSwaggerTemplate({
|
||||
data,
|
||||
path,
|
||||
location,
|
||||
pageContext
|
||||
}) {
|
||||
const { api } = pageContext
|
||||
const { host, basePath, info, paths } = api
|
||||
const { title, license, contact } = info
|
||||
|
||||
// output section title as defined in sections.yml
|
||||
sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
|
||||
// compare section against section title from sections.yml
|
||||
if (node.title.toLowerCase().includes('references')) {
|
||||
return node.title
|
||||
}
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<ContentWrapperTemplate
|
||||
data={data}
|
||||
path={path}
|
||||
location={location}
|
||||
pageContext={pageContext}
|
||||
info={info}
|
||||
toc={<Toc data={api} />}
|
||||
>
|
||||
{(contact || license) && (
|
||||
<SwaggerMeta contact={contact} license={license} />
|
||||
)}
|
||||
|
||||
render() {
|
||||
const { location, pageContext } = this.props
|
||||
const { api } = pageContext
|
||||
const { host, basePath, info, paths } = api
|
||||
const { title, description, version, license, contact } = info
|
||||
{(host || basePath) && <BasePath host={host} basePath={basePath} />}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<body className="references" />
|
||||
</Helmet>
|
||||
<Paths paths={paths} />
|
||||
|
||||
<Seo
|
||||
title={title}
|
||||
description={description}
|
||||
slug={pageContext.slug}
|
||||
article
|
||||
location={location}
|
||||
<DocFooter
|
||||
url={`https://github.com/oceanprotocol/${title.toLowerCase()}`}
|
||||
externalName={`${title} Swagger spec`}
|
||||
/>
|
||||
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</ContentWrapperTemplate>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const apiSwaggerQuery = graphql`
|
||||
|
||||
@ -1,82 +1,29 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import React from 'react'
|
||||
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 Toc from './Toc'
|
||||
|
||||
import stylesDoc from '../Doc.module.scss'
|
||||
import ContentWrapperTemplate from '../ContentWrapperTemplate'
|
||||
|
||||
export default class TypedocTemplate extends Component {
|
||||
static propTypes = {
|
||||
data: PropTypes.object.isRequired,
|
||||
location: PropTypes.object.isRequired,
|
||||
pageContext: PropTypes.object.isRequired
|
||||
}
|
||||
export default function TypedocTemplate({ data, path, location, pageContext }) {
|
||||
const { typedoc } = pageContext
|
||||
const { sourceUrl } = typedoc.info
|
||||
|
||||
// output section title as defined in sections.yml
|
||||
sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
|
||||
// compare section against section title from sections.yml
|
||||
if (node.title.toLowerCase().includes('references')) {
|
||||
return node.title
|
||||
}
|
||||
})
|
||||
|
||||
render() {
|
||||
const { location, pageContext } = this.props
|
||||
const { typedoc } = pageContext
|
||||
const { title, description, version, sourceUrl } = typedoc.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={<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<ContentWrapperTemplate
|
||||
data={data}
|
||||
path={path}
|
||||
location={location}
|
||||
pageContext={pageContext}
|
||||
info={typedoc.info}
|
||||
toc={<Toc data={typedoc.children} />}
|
||||
>
|
||||
<Entities entities={typedoc.children} sourceUrl={sourceUrl} />
|
||||
</ContentWrapperTemplate>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const TypedocQuery = graphql`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user