diff --git a/data/aquarius.json b/data/aquarius.json index e2cae9d6..3f71d089 100644 --- a/data/aquarius.json +++ b/data/aquarius.json @@ -6,6 +6,7 @@ "title":"Aquarius", "version":"0.1.4" }, + "basePath": "/api/v1/aquarius", "paths":{ "/api/v1/aquarius/assets":{ "get":{ diff --git a/data/brizo.json b/data/brizo.json index f25073a6..20156ee1 100644 --- a/data/brizo.json +++ b/data/brizo.json @@ -6,6 +6,7 @@ "title":"Brizo", "version":"1.0" }, + "basePath": "/api/v1/brizo", "paths":{ "/api/v1/brizo/services/access/initialize":{ "post":{ diff --git a/src/components/DocHeader.jsx b/src/components/DocHeader.jsx index f9ebca13..4a7aab49 100644 --- a/src/components/DocHeader.jsx +++ b/src/components/DocHeader.jsx @@ -4,7 +4,7 @@ import remark from 'remark' import remarkReact from 'remark-react' import styles from './DocHeader.module.scss' -const DocHeader = ({ title, description }) => { +const DocHeader = ({ title, description, prepend }) => { const descriptionHtml = description && remark() @@ -13,7 +13,9 @@ const DocHeader = ({ title, description }) => { return (
-

{title}

+

+ {title} {prepend && prepend} +

{description && (
{descriptionHtml}
)} @@ -23,7 +25,8 @@ const DocHeader = ({ title, description }) => { DocHeader.propTypes = { title: PropTypes.string.isRequired, - description: PropTypes.string + description: PropTypes.string, + prepend: PropTypes.any } export default DocHeader diff --git a/src/components/HeaderSection.module.scss b/src/components/HeaderSection.module.scss index b52a9734..d8a6a4c1 100644 --- a/src/components/HeaderSection.module.scss +++ b/src/components/HeaderSection.module.scss @@ -23,7 +23,7 @@ color: $orange; } - :global(.api) & { + :global(.reference) & { color: $green; } } diff --git a/src/templates/ApiSwagger.jsx b/src/templates/ApiSwagger.jsx index f6e4ad40..4a988a18 100644 --- a/src/templates/ApiSwagger.jsx +++ b/src/templates/ApiSwagger.jsx @@ -80,12 +80,13 @@ export default class ApiSwaggerTemplate extends Component { const { location, data, pageContext } = this.props const sections = data.allSectionsYaml.edges const { api } = pageContext - const { title, description, version } = api.info + const { host, basePath, info } = api + const { title, description, version, license, contact } = info // 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('api')) { + if (node.title.toLowerCase().includes('reference')) { return node.title } }) @@ -123,9 +124,44 @@ export default class ApiSwaggerTemplate extends Component { + {version} + + } /> - {version} + {(contact || license) && ( + + )} + + {(host || basePath) && ( +
+ + {host} + {basePath} + +
+ )} {Object.entries(api.paths).map( ([key, value]) => ( diff --git a/src/templates/ApiSwagger.module.scss b/src/templates/ApiSwagger.module.scss index 647ef031..a3075818 100644 --- a/src/templates/ApiSwagger.module.scss +++ b/src/templates/ApiSwagger.module.scss @@ -1,5 +1,54 @@ @import 'variables'; +.version { + font-size: $font-size-base; + font-family: $font-family-monospace; + color: $brand-grey-light; +} + +.swaggerMeta { + margin-top: -($spacer); + padding: 0; + font-size: $font-size-small; + + li { + display: inline-block; + margin-left: $spacer; + + &:first-child { + margin-left: 0; + } + + &:before { display: none;} + } +} + +.basePath { + margin-top: $spacer * 2; + font-size: $font-size-large; + font-family: $font-family-monospace; + font-weight: $font-weight-bold; + position: relative; + + &:after { + content: 'Base path'; + font-size: $font-size-mini; + color: $brand-grey-light; + position: absolute; + left: 0; + top: -1.25rem; + } + + span { + color: $brand-grey-light; + } + + code { + // stylelint-disable-next-line + font-size: inherit !important; + } +} + .pathName { font-size: $font-size-h2; border-bottom: 1px solid $brand-grey-lighter;