ui: Enable specifying additional docfy config as json (#10464)

ui/packages/consul-ui/.docfy-config.js

@@ -1,11 +1,33 @@
 const path = require('path');
+
 const autolinkHeadings = require('remark-autolink-headings');
 const refractor = require('refractor');
 const prism = require('@mapbox/rehype-prism');
 
+const fs = require('fs');
+const read = fs.readFileSync;
+const exists = fs.existsSync;
+const chalk = require('chalk'); // comes with ember
+
+// allow extra docfy config
+let user = {sources: [], labels: {}};
+const $CONSUL_DOCFY_CONFIG = process.env.CONSUL_DOCFY_CONFIG || '';
+if($CONSUL_DOCFY_CONFIG.length > 0) {
+  try {
+      if(exists($CONSUL_DOCFY_CONFIG)) {
+        user = JSON.parse(read($CONSUL_DOCFY_CONFIG));
+      } else {
+        throw new Error(`Unable to locate ${$CONSUL_DOCFY_CONFIG}`);
+      }
+  } catch(e) {
+    console.error(chalk.yellow(`Docfy: ${e.message}`));
+  }
+}
+
 refractor.alias('handlebars', 'hbs');
 refractor.alias('shell', 'sh');
 
+
 module.exports = {
   remarkHbsOptions: {
     escapeCurliesCode: false
@@ -56,8 +78,9 @@ module.exports = {
       urlSchema: 'auto',
       urlPrefix: 'docs/consul',
     }
-  ],
+  ].concat(user.sources),
   labels: {
-    "consul": "Consul Components"
+    "consul": "Consul Components",
+    ...user.labels
   }
 };

ui/packages/consul-ui/README.md

@@ -90,12 +90,7 @@ CONSUL_HTTP_ADDR=http://10.0.0.1:8500 make start-consul
 
 ### Environment Variables
 
-There are various environment variable you can use whilst running `make start` or `make test` to configure various features:
-
-| Variable | Default Value | Description |
-| -------- | ------------- | ----------- |
-| `TESTEM_AUTOLAUNCH` | Chrome | Controls which browser to open tests in. A setting of "" means 'let me manually open the browser' |
-| `EMBER_TEST_REPORT` |  | Output a test report |
+See [./docs/index.mdx](./docs/index.mdx#environment-variables)
 
 ### Contributing/Engineering Documentation
 

ui/packages/consul-ui/app/styles/debug.scss

@@ -57,7 +57,8 @@ html.is-debug body > .brand-loader {
     }
     > h1,
     > h2,
-    > h3 {
+    > h3,
+    > h4 {
       margin-bottom: 1em;
     }
     > h1 {
@@ -70,6 +71,9 @@ html.is-debug body > .brand-loader {
     > h3 {
       @extend %h300;
     }
+    > h4 {
+      @extend %h400;
+    }
     > p {
       @extend %p1;
     }

ui/packages/consul-ui/docs/index.mdx

@@ -5,6 +5,16 @@ title: Introduction
 
 Welcome to Consul UIs engineering documentation.
 
+## Environment Variables
+
+There are various environment variable you can use whilst running `make start` or `make test` to configure various features:
+
+| Variable | Default Value | Description |
+| -------- | ------------- | ----------- |
+| `TESTEM_AUTOLAUNCH` | Chrome | Controls which browser to open tests in. A setting of `""` means 'let me manually open the browser' |
+| `EMBER_TEST_REPORT` |  | Output a test report |
+| `CONSUL_DOCFY_CONFIG` |  | Define an additional `docfy-config.json` file to use |
+
 ## Adding documentation
 
 Our documentation use [docfy](https://docfy.dev/docs) for rendering our markdown+glimmer-component documentation. In order to live render any code examples use the `preview-template` meta, for example: