output more swagger metadata

data/aquarius.json

@@ -6,6 +6,7 @@
     "title":"Aquarius",
     "version":"0.1.4"
   },
+  "basePath": "/api/v1/aquarius",
   "paths":{
     "/api/v1/aquarius/assets":{
       "get":{

data/brizo.json

@@ -6,6 +6,7 @@
     "title":"Brizo",
     "version":"1.0"
   },
+  "basePath": "/api/v1/brizo",
   "paths":{
     "/api/v1/brizo/services/access/initialize":{
       "post":{

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 (
         <header className={styles.header}>
-            <h1 className={styles.title}>{title}</h1>
+            <h1 className={styles.title}>
+                {title} {prepend && prepend}
+            </h1>
             {description && (
                 <div className={styles.lead}>{descriptionHtml}</div>
             )}
@@ -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

src/components/HeaderSection.module.scss

@@ -23,7 +23,7 @@
         color: $orange;
     }
 
-    :global(.api) & {
+    :global(.reference) & {
         color: $green;
     }
 }

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 {
                                 <DocHeader
                                     title={title}
                                     description={description}
+                                    prepend={
+                                        <span className={styles.version}>
+                                            {version}
+                                        </span>
+                                    }
                                 />
 
-                                {version}
+                                {(contact || license) && (
+                                    <ul className={styles.swaggerMeta}>
+                                        {contact && (
+                                            <li>
+                                                <a
+                                                    href={`mailto:${
+                                                        contact.email
+                                                    }`}
+                                                >
+                                                    {contact.email}
+                                                </a>
+                                            </li>
+                                        )}
+                                        {license && (
+                                            <li>
+                                                <a href={license.url}>
+                                                    {license.name}
+                                                </a>
+                                            </li>
+                                        )}
+                                    </ul>
+                                )}
+
+                                {(host || basePath) && (
+                                    <div className={styles.basePath}>
+                                        <code>
+                                            <span>{host}</span>
+                                            {basePath}
+                                        </code>
+                                    </div>
+                                )}
 
                                 {Object.entries(api.paths).map(
                                     ([key, value]) => (

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;