From a2252e10a5be0138f4ad216044b60a9be425ed20 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 28 Nov 2018 13:20:03 +0100
Subject: [PATCH] use pet store as example, output data from the depths of
 swagger json files

---
 data/repositories.yml        |  4 ++++
 data/sidebars/api.yml        |  5 ++++
 gatsby-node.js               | 46 ++++++++++++++++++------------------
 src/pages/index.module.scss  |  1 -
 src/styles/global.scss       |  4 ++++
 src/templates/ApiSwagger.jsx | 45 +++++++++++++++++++++++++++++++----
 6 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/data/repositories.yml b/data/repositories.yml
index 843a4c86..c57a73b0 100644
--- a/data/repositories.yml
+++ b/data/repositories.yml
@@ -11,6 +11,10 @@
           url: /api/aquarius/
 
     - name: brizo
+      links:
+          - name: API reference
+            url: /api/brizo/
+
     - name: pleuston
 
 - group: Libraries
diff --git a/data/sidebars/api.yml b/data/sidebars/api.yml
index 705f6229..119c5d09 100644
--- a/data/sidebars/api.yml
+++ b/data/sidebars/api.yml
@@ -17,3 +17,8 @@
   items:
     - title: API reference
       link: /api/brizo/
+
+- group: pet store
+  items:
+    - title: API reference
+      link: /api/petstore/
diff --git a/gatsby-node.js b/gatsby-node.js
index 526b79b5..a8def835 100755
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -155,16 +155,16 @@ exports.createPages = ({ graphql, actions }) => {
                     './src/templates/ApiSwagger.jsx'
                 )
 
-                const brizoSlug = '/api/brizo/'
+                const petStoreSlug = '/api/petstore/'
 
                 try {
                     const spec = await getSpec()
 
                     createPage({
-                        path: brizoSlug,
+                        path: petStoreSlug,
                         component: apiSwaggerTemplate,
                         context: {
-                            slug: brizoSlug,
+                            slug: petStoreSlug,
                             api: spec
                         }
                     })
@@ -172,29 +172,29 @@ exports.createPages = ({ graphql, actions }) => {
                     console.log(error)
                 }
 
-                // const aquariusSpecs = require('./data/aquarius.json')
-                // const aquariusSlug = '/api/aquarius/'
+                const aquariusSpecs = require('./data/aquarius.json')
+                const aquariusSlug = '/api/aquarius/'
 
-                // createPage({
-                //     path: aquariusSlug,
-                //     component: apiSwaggerTemplate,
-                //     context: {
-                //         slug: aquariusSlug,
-                //         api: aquariusSpecs
-                //     }
-                // })
+                createPage({
+                    path: aquariusSlug,
+                    component: apiSwaggerTemplate,
+                    context: {
+                        slug: aquariusSlug,
+                        api: aquariusSpecs
+                    }
+                })
 
-                // const brizoSpecs = require('./data/brizo.json')
-                // const brizoSlug = '/api/brizo/'
+                const brizoSpecs = require('./data/brizo.json')
+                const brizoSlug = '/api/brizo/'
 
-                // createPage({
-                //     path: brizoSlug,
-                //     component: apiSwaggerTemplate,
-                //     context: {
-                //         slug: brizoSlug,
-                //         api: brizoSpecs
-                //     }
-                // })
+                createPage({
+                    path: brizoSlug,
+                    component: apiSwaggerTemplate,
+                    context: {
+                        slug: brizoSlug,
+                        api: brizoSpecs
+                    }
+                })
 
                 resolve()
             })
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index e9fd5744..1009b7a3 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -38,7 +38,6 @@
     &:last-child {
         flex-basis: 100%;
         text-align: center;
-        opacity: .75;
     }
 }
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c75a171b..c2c6562f 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -272,6 +272,10 @@ samp {
     font-size: $font-size-small !important;
     border-radius: $border-radius !important;
     text-shadow: none !important;
+
+    h1 &, h2 &, h3 &, h4 &, h5 & {
+        font-size: inherit !important;
+    }
 }
 
 :not(pre) > code {
diff --git a/src/templates/ApiSwagger.jsx b/src/templates/ApiSwagger.jsx
index 0a483fba..c806a2b5 100644
--- a/src/templates/ApiSwagger.jsx
+++ b/src/templates/ApiSwagger.jsx
@@ -11,6 +11,17 @@ import SEO from '../components/Seo'
 import stylesDoc from './Doc.module.scss'
 // import styles from './ApiSwagger.module.scss'
 
+const toc = api => {
+    const items = Object.keys(api.paths).map(
+        key =>
+            `<li key=${key}>
+                <a href="#${key.replace(/\//gi, '-')}"><code>${key}</code></a>
+            </li>`
+    )
+
+    return `<ul>${items}</ul>`
+}
+
 export default class ApiSwaggerTemplate extends Component {
     static propTypes = {
         data: PropTypes.object.isRequired,
@@ -55,6 +66,10 @@ export default class ApiSwaggerTemplate extends Component {
                                     location={location}
                                     sidebar={'api'}
                                     collapsed
+                                    toc
+                                    tableOfContents={toc(api)
+                                        .split(',')
+                                        .join('')}
                                 />
                             </aside>
                             <article className={stylesDoc.main}>
@@ -65,11 +80,31 @@ export default class ApiSwaggerTemplate extends Component {
 
                                 {version}
 
-                                {Object.keys(api.paths).map(key => (
-                                    <>
-                                        <h2 key={key}>{key}</h2>
-                                    </>
-                                ))}
+                                {Object.entries(api.paths).map(
+                                    ([key, value]) => (
+                                        <>
+                                            <h2
+                                                key={key}
+                                                id={key.replace(/\//gi, '-')}
+                                            >
+                                                <code>{key}</code>
+                                            </h2>
+
+                                            {Object.entries(value).map(
+                                                ([key, value]) => (
+                                                    <>
+                                                        <h4 key={key}>
+                                                            <code>{key}</code>
+                                                        </h4>
+                                                        <p>
+                                                            {value['summary']}
+                                                        </p>
+                                                    </>
+                                                )
+                                            )}
+                                        </>
+                                    )
+                                )}
                             </article>
                         </main>
                     </Content>