diff --git a/ui/packages/consul-ui/.docfy-config.js b/ui/packages/consul-ui/.docfy-config.js
new file mode 100644
index 0000000000..2c08b7ca81
--- /dev/null
+++ b/ui/packages/consul-ui/.docfy-config.js
@@ -0,0 +1,30 @@
+const path = require('path');
+const autolinkHeadings = require('remark-autolink-headings');
+const refractor = require('refractor');
+const prism = require('@mapbox/rehype-prism');
+
+refractor.alias('handlebars', 'hbs');
+refractor.alias('shell', 'sh');
+
+module.exports = {
+ remarkHbsOptions: {
+ escapeCurliesCode: false
+ },
+ remarkPlugins: [
+ autolinkHeadings,
+ {
+ behavior: 'wrap'
+ }
+ ],
+ rehypePlugins: [
+ prism
+ ],
+ sources: [
+ {
+ root: path.resolve(__dirname, 'app/components'),
+ pattern: '**/README.mdx',
+ urlSchema: 'auto',
+ urlPrefix: 'docs/components',
+ }
+ ],
+};
diff --git a/ui/packages/consul-ui/.eslintrc.js b/ui/packages/consul-ui/.eslintrc.js
index c5aba82625..0daee79585 100644
--- a/ui/packages/consul-ui/.eslintrc.js
+++ b/ui/packages/consul-ui/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
files: [
'.eslintrc.js',
'.dev.eslintrc.js',
+ '.docfy-config.js',
'.template-lintrc.js',
'ember-cli-build.js',
'testem.js',
diff --git a/ui/packages/consul-ui/.storybook/main.js b/ui/packages/consul-ui/.storybook/main.js
deleted file mode 100644
index 2b2c11427e..0000000000
--- a/ui/packages/consul-ui/.storybook/main.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/* eslint-env node */
-module.exports = {
- "stories": [
- "../app/**/*.stories.mdx"
- ],
- "addons": [
- "@storybook/addon-links",
- "@storybook/addon-docs",
- "@storybook/addon-controls",
- ]
-}
diff --git a/ui/packages/consul-ui/.storybook/preview.js b/ui/packages/consul-ui/.storybook/preview.js
deleted file mode 100644
index 6211181204..0000000000
--- a/ui/packages/consul-ui/.storybook/preview.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
- layout: 'padded'
-}
diff --git a/ui/packages/consul-ui/app/components/app-error/README.stories.mdx b/ui/packages/consul-ui/app/components/app-error/README.stories.mdx
deleted file mode 100644
index 4eb7063d41..0000000000
--- a/ui/packages/consul-ui/app/components/app-error/README.stories.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-
-
-
-# AppError
-
-
-
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
index d02427ff38..8dc88a2ab3 100644
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@@ -11,7 +11,7 @@
[role="banner"] > label {
@extend %main-nav-horizontal-toggle-button;
}
-.hashicorp-consul > input[id] {
+.app > input[id] {
@extend %main-nav-horizontal-toggle;
}
%main-header-horizontal > div {
diff --git a/ui/packages/consul-ui/app/components/auth-dialog/README.mdx b/ui/packages/consul-ui/app/components/auth-dialog/README.mdx
index 676d553796..3436b7c1eb 100644
--- a/ui/packages/consul-ui/app/components/auth-dialog/README.mdx
+++ b/ui/packages/consul-ui/app/components/auth-dialog/README.mdx
@@ -1,7 +1,7 @@
## AuthDialog
-```handlebars
-
+```hbs
+
{{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
Here's the login form:
diff --git a/ui/packages/consul-ui/app/components/auth-profile/README.mdx b/ui/packages/consul-ui/app/components/auth-profile/README.mdx
index f4fa59771d..3dfaa8aef1 100644
--- a/ui/packages/consul-ui/app/components/auth-profile/README.mdx
+++ b/ui/packages/consul-ui/app/components/auth-profile/README.mdx
@@ -1,6 +1,6 @@
## AuthProfile
-```handlebars
+```hbs
```
diff --git a/ui/packages/consul-ui/app/components/consul/metadata/list/README.mdx b/ui/packages/consul-ui/app/components/consul/metadata/list/README.mdx
index 32ae96e4d1..6a9e33e179 100644
--- a/ui/packages/consul-ui/app/components/consul/metadata/list/README.mdx
+++ b/ui/packages/consul-ui/app/components/consul/metadata/list/README.mdx
@@ -15,7 +15,7 @@ A presentational component for presenting Consul Metadata
The following example shows how to construct the required structure from the
Consul API using a `object-entries` helper.
-```handlebars
+```hbs
```
diff --git a/ui/packages/consul-ui/app/components/copy-button/README.mdx b/ui/packages/consul-ui/app/components/copy-button/README.mdx
index 9e307ab510..826cfe20c8 100644
--- a/ui/packages/consul-ui/app/components/copy-button/README.mdx
+++ b/ui/packages/consul-ui/app/components/copy-button/README.mdx
@@ -1,7 +1,6 @@
-## CopyButton
+# CopyButton
-```handlebars
-{{! inline }}
+```hbs preview-template
-
+{{#each source.data as |service|}}
+{{service.Name}}
+{{/each}}
```
@@ -38,7 +38,7 @@ Behind the scenes in the Consul UI we map URIs back to our `ember-data` backed `
Straightforward usage can use `mut` to easily update data within a template using an event handler approach.
-```handlebars
+```hbs
{{! listen for HTTP API changes}}
+ Eng Docs
+
diff --git a/ui/packages/consul-ui/app/components/event-source/README.mdx b/ui/packages/consul-ui/app/components/event-source/README.mdx
index 589176cc8b..52951cc992 100644
--- a/ui/packages/consul-ui/app/components/event-source/README.mdx
+++ b/ui/packages/consul-ui/app/components/event-source/README.mdx
@@ -1,6 +1,6 @@
## EventSource
-```handlebars
+```hbs
+
-
diff --git a/ui/packages/consul-ui/app/components/jwt-source/README.mdx b/ui/packages/consul-ui/app/components/jwt-source/README.mdx
index 51b1a12f22..83fcf1a841 100644
--- a/ui/packages/consul-ui/app/components/jwt-source/README.mdx
+++ b/ui/packages/consul-ui/app/components/jwt-source/README.mdx
@@ -1,6 +1,6 @@
## JwtSource
-```handlebars
+```hbs
```
diff --git a/ui/packages/consul-ui/app/components/ref/README.mdx b/ui/packages/consul-ui/app/components/ref/README.mdx
index 5a810da949..7eaedc530c 100644
--- a/ui/packages/consul-ui/app/components/ref/README.mdx
+++ b/ui/packages/consul-ui/app/components/ref/README.mdx
@@ -21,7 +21,7 @@ This can be thought of as providing the public API for the component, the author
Here we provide a public API for a form component whilst authoring.
-```handlebars
+```hbs
{{! /components/form/index.hbs }}