Merge pull request #29 from ga4gh/add-theme-config

Add theme config; fixes #25

Author: jaeddy

src/lib/config.js

@@ -13,6 +13,7 @@ const localConfig = {
   docsRoot: userConfig.docsRoot || 'docs',
   uiRoot: userConfig.uiRoot || 'swagger-ui',
   redocRoot: userConfig.redocRoot || 'redoc-ui',
+  redocTheme: userConfig.redocTheme || 'default',
   defaultBranch: userConfig.defaultBranch || 'master',
   branchPathBase: userConfig.branchPath || 'preview',
   contactUrl: userConfig.contactUrl || ''

src/lib/redoc-ui.js

@@ -3,18 +3,29 @@
 import shell from 'shelljs';
 import path from 'path';
 import config from './config';
+import themes from './theme';
 import Log from './log';
 
 const log = new Log();
 var OPENAPI_YAML_PATH = path.join(config.branchPath, 'openapi.yaml');
 
+const constructOptsArg = (themes, themeName) => {
+    if (themeName == 'default') {
+        return '';
+      } else {
+        let argStr = `--options='${JSON.stringify(themes[themeName])}'`;
+        return argStr
+    }
+}
+
 const setupUI = () => {
+    var redocOpts = constructOptsArg(themes, config.redocTheme);
     var uiPath = path.join(config.branchPath, config.docsRoot);
     shell.mkdir('-p', uiPath);
     var indexPath = path.join(uiPath, 'index.html');
     log.log(`Generating OpenAPI docs index at '${indexPath}'`);
     shell.exec(
-        `redoc-cli bundle --output ${indexPath} ${OPENAPI_YAML_PATH}`
+        `redoc-cli bundle --output ${indexPath} ${OPENAPI_YAML_PATH} ${redocOpts}`
     );
     log.preview({
         'title': 'OpenAPI docs folder contents',

src/lib/theme.js

@@ -0,0 +1,63 @@
+const ga4gh_theme = {
+    "pathInMiddlePanel": true,
+    "theme": {
+        "spacing": {
+            "sectionVertical": 10
+        },
+        "colors": {
+            "primary": {
+                "main": "rgba(27, 117, 187, 1)",
+                "light": "rgba(99, 162, 211, 1)",
+                "dark": "rgba(6, 71, 121, 1)",
+                "contrastText": "#fff"
+            },
+            "success": {
+                "main": "rgba(141, 198, 62, 1)",
+                "light": "rgba(201, 240, 147, 1)",
+                "dark": "rgba(83, 136, 10, 1)",
+                "contrastText": "#000"
+            },
+            "warning": {
+                "main": "rgba(250, 166, 51, 1)",
+                "light": "rgba(255, 203, 131, 1)",
+                "dark": "rgba(173, 101, 1, 1)",
+                "contrastText": "#000"
+            },
+            "error": {
+                "main": "rgba(227, 74, 58, 1)",
+                "light": "rgba(255, 151, 140, 1)",
+                "dark": "rgba(155, 20, 6, 1)",
+                "contrastText": "#000"
+            },
+            "http": {
+                "get": "rgba(107, 189, 91, 1)"
+            }
+        },
+        "typography": {
+            "links": {
+                "color": "rgba(144, 98, 165, 1)",
+                "visited": "rgba(144, 98, 165, 1)",
+                "hover": "rgba(159, 121, 176, 1)"
+            },
+            "code": {
+                "color": "rgba(227, 74, 58, 1)"
+            }
+        },
+        "rightPanel": {
+            "backgroundColor": "rgba(66, 66, 66, 1)",
+            "textColor": "rgba(255, 255, 255, 1)"
+        },
+        "codeSample": {
+            "backgroundColor": "rgba(34, 31, 31, 1)"
+        },
+        "menu": {
+            "backgroundColor": "rgba(246, 246, 248, 1)"
+        }
+    }
+}
+
+const themes = {
+    ga4gh: ga4gh_theme
+};
+
+export default themes;