From 1805e49e31f70cfc342e7b9eb8f8edd21a641eeb Mon Sep 17 00:00:00 2001
From: Brad Paugh <brad.paugh@dialpad.com>
Date: Thu, 21 Apr 2022 14:14:09 -0700
Subject: [PATCH] fix: add baseurl to sitenav

---
 docs/.eleventy.js        |   2 +-
 docs/_data/nav.js        | 282 ++++++++++++++++++
 docs/_data/nav.json      | 282 ------------------
 docs/_data/site-nav.js   | 623 +++++++++++++++++++++++++++++++++++++++
 docs/_data/site-nav.json | 621 --------------------------------------
 5 files changed, 906 insertions(+), 904 deletions(-)
 create mode 100644 docs/_data/nav.js
 delete mode 100644 docs/_data/nav.json
 create mode 100644 docs/_data/site-nav.js
 delete mode 100644 docs/_data/site-nav.json

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 620a0143db..94fbf4049d 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -1,6 +1,6 @@
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginTOC = require("eleventy-plugin-nesting-toc");
-const sections = require("./_data/site-nav.json").sections
+const sections = require("./_data/site-nav.js").sections
 
 const alignAvailablePages = sections => sections.map(section => section.subsections
     ? alignAvailablePages(section.subsections)
diff --git a/docs/_data/nav.js b/docs/_data/nav.js
new file mode 100644
index 0000000000..8439ab8d1d
--- /dev/null
+++ b/docs/_data/nav.js
@@ -0,0 +1,282 @@
+module.exports = {
+  sections: [
+    {
+      title: "Getting Started",
+      url: "getting-started/",
+      pages: [
+        {
+          title: "Overview",
+          url: "getting-started/overview/",
+        },
+        {
+          title: "Using Dialtone",
+          url: "getting-started/usage/",
+        },
+        {
+          title: "Installing Dialtone",
+          url: "getting-started/installing/",
+        },
+      ],
+    },
+    {
+      title: "Icons",
+      url: "icons/",
+      pages: [
+        {
+          title: "Creating Icons",
+          url: "icons/creating/",
+        },
+        {
+          title: "Brand Icons",
+          url: "icons/brand/",
+        },
+        {
+          title: "System Icons",
+          url: "icons/system/",
+        },
+        {
+          title: "Weather Icons",
+          url: "icons/weather/",
+        },
+        {
+          title: "Patterns",
+          url: "icons/patterns/",
+        },
+        {
+          title: "Sizes",
+          url: "icons/sizes/",
+        },
+      ],
+    },
+    {
+      title: "Variables",
+      url: "variables/",
+      pages: [
+        {
+          title: "Color",
+          url: "variables/color/",
+        },
+        {
+          title: "Spacing",
+          url: "variables/spacing/",
+        },
+      ],
+    },
+    {
+      title: "Layout",
+      url: "utilities/layout/",
+      pages: [
+        {
+          title: "Display",
+          url: "utilities/layout/display/",
+        },
+        {
+          title: "Flex",
+          url: "utilities/layout/flex/",
+        },
+        {
+          title: "Grid",
+          url: "utilities/layout/grid/",
+        },
+        {
+          title: "Height",
+          url: "utilities/layout/height/",
+        },
+        {
+          title: "Margin",
+          url: "utilities/layout/margin/",
+        },
+        {
+          title: "Overflow",
+          url: "utilities/layout/overflow/",
+        },
+        {
+          title: "Padding",
+          url: "utilities/layout/padding/",
+        },
+        {
+          title: "Positioning",
+          url: "utilities/layout/positioning/",
+        },
+        {
+          title: "Stacks & Flows",
+          url: "utilities/layout/Stacks/",
+        },
+        {
+          title: "Width",
+          url: "utilities/layout/width/",
+        },
+        {
+          title: "Z-Index",
+          url: "utilities/layout/z-index/",
+        },
+      ],
+    },
+    {
+      title: "Visual Styles",
+      url: "utilities/visual/",
+      pages: [
+        {
+          title: "Background Colors",
+          url: "utilities/visual/backgrounds/",
+        },
+        {
+          title: "Background Gradients",
+          url: "utilities/visual/background-gradients/",
+        },
+        {
+          title: "Background Patterns",
+          url: "utilities/visual/background-patterns/",
+        },
+        {
+          title: "Borders",
+          url: "utilities/visual/borders/",
+        },
+        {
+          title: "Border Colors",
+          url: "utilities/visual/border-colors/",
+        },
+        {
+          title: "Border Radius",
+          url: "utilities/visual/border-radius/",
+        },
+        {
+          title: "Box Shadows",
+          url: "utilities/visual/box-shadows/",
+        },
+        {
+          title: "Opacity",
+          url: "utilities/visual/opacity/",
+        },
+      ],
+    },
+    {
+      title: "Typography",
+      url: "utilities/typography/",
+      pages: [
+        {
+          title: "Font Family",
+          url: "utilities/typography/font-family/",
+        },
+        {
+          title: "Font Size",
+          url: "utilities/typography/sizes/",
+        },
+        {
+          title: "Font Style",
+          url: "utilities/typography/styles/",
+        },
+        {
+          title: "Font Weight",
+          url: "utilities/typography/font-weight/",
+        },
+        {
+          title: "Layout",
+          url: "utilities/typography/layout/",
+        },
+        {
+          title: "Line Height",
+          url: "utilities/typography/line-height/",
+        },
+        {
+          title: "Lists",
+          url: "utilities/typography/lists/",
+        },
+        {
+          title: "Text Colors",
+          url: "utilities/typography/colors/",
+        },
+        {
+          title: "Text Opacity",
+          url: "utilities/typography/text-opacity/",
+        },
+      ],
+    },
+    {
+      title: "Components",
+      url: "components/",
+      pages: [
+        {
+          title: "Avatars",
+          url: "components/avatars/",
+        },
+        {
+          title: "Badges",
+          url: "components/badges/",
+        },
+        {
+          title: "Banners",
+          url: "components/banners/",
+        },
+        {
+          title: "Breadcumbs",
+          url: "components/breadcrumbs/",
+        },
+        {
+          title: "Buttons",
+          url: "components/buttons/",
+        },
+        {
+          title: "Checkboxes",
+          url: "components/checkboxes/",
+        },
+        {
+          title: "Forms",
+          url: "components/forms/",
+        },
+        {
+          title: "Inputs",
+          url: "components/inputs/",
+        },
+        {
+          title: "Links",
+          url: "components/links/",
+        },
+        {
+          title: "Modals",
+          url: "components/modals/",
+        },
+        {
+          title: "Notices",
+          url: "components/notices/",
+        },
+        {
+          title: "Popover",
+          url: "components/popover/",
+        },
+        {
+          title: "Radios",
+          url: "components/radios/",
+        },
+        {
+          title: "Select Menus",
+          url: "components/select/",
+        },
+        {
+          title: "Skeleton",
+          url: "components/skeleton/",
+        },
+        {
+          title: "Tables",
+          url: "components/tables/",
+        },
+        {
+          title: "Tabs",
+          url: "components/tabs/",
+        },
+        {
+          title: "Textareas",
+          url: "components/textareas/",
+        },
+        {
+          title: "Toasts",
+          url: "components/toast/",
+        },
+        {
+          title: "Tooltips",
+          url: "components/tooltips/",
+        },
+      ],
+    },
+  ],
+};
diff --git a/docs/_data/nav.json b/docs/_data/nav.json
deleted file mode 100644
index 596dafa56b..0000000000
--- a/docs/_data/nav.json
+++ /dev/null
@@ -1,282 +0,0 @@
-{
-  "sections": [
-    {
-      "title": "Getting Started",
-      "url": "getting-started/",
-      "pages": [
-        {
-          "title": "Overview",
-          "url": "getting-started/overview/"
-        },
-        {
-          "title": "Using Dialtone",
-          "url": "getting-started/usage/"
-        },
-        {
-          "title": "Installing Dialtone",
-          "url": "getting-started/installing/"
-        }
-      ]
-    },
-    {
-      "title": "Icons",
-      "url": "icons/",
-      "pages": [
-        {
-          "title": "Creating Icons",
-          "url": "icons/creating/"
-        },
-        {
-          "title": "Brand Icons",
-          "url": "icons/brand/"
-        },
-        {
-          "title": "System Icons",
-          "url": "icons/system/"
-        },
-        {
-          "title": "Weather Icons",
-          "url": "icons/weather/"
-        },
-        {
-          "title": "Patterns",
-          "url": "icons/patterns/"
-        },
-        {
-          "title": "Sizes",
-          "url": "icons/sizes/"
-        }
-      ]
-    },
-    {
-      "title": "Variables",
-      "url": "variables/",
-      "pages": [
-        {
-          "title": "Color",
-          "url": "variables/color/"
-        },
-        {
-          "title": "Spacing",
-          "url": "variables/spacing/"
-        }
-      ]
-    },
-    {
-      "title": "Layout",
-      "url": "utilities/layout/",
-      "pages": [
-        {
-          "title": "Display",
-          "url": "utilities/layout/display/"
-        },
-        {
-          "title": "Flex",
-          "url": "utilities/layout/flex/"
-        },
-        {
-          "title": "Grid",
-          "url": "utilities/layout/grid/"
-        },
-        {
-          "title": "Height",
-          "url": "utilities/layout/height/"
-        },
-        {
-          "title": "Margin",
-          "url": "utilities/layout/margin/"
-        },
-        {
-          "title": "Overflow",
-          "url": "utilities/layout/overflow/"
-        },
-        {
-          "title": "Padding",
-          "url": "utilities/layout/padding/"
-        },
-        {
-          "title": "Positioning",
-          "url": "utilities/layout/positioning/"
-        },
-        {
-          "title": "Stacks & Flows",
-          "url": "utilities/layout/Stacks/"
-        },
-        {
-          "title": "Width",
-          "url": "utilities/layout/width/"
-        },
-        {
-          "title": "Z-Index",
-          "url": "utilities/layout/z-index/"
-        }
-      ]
-    },
-    {
-      "title": "Visual Styles",
-      "url": "utilities/visual/",
-      "pages": [
-        {
-          "title": "Background Colors",
-          "url": "utilities/visual/backgrounds/"
-        },
-        {
-          "title": "Background Gradients",
-          "url": "utilities/visual/background-gradients/"
-        },
-        {
-          "title": "Background Patterns",
-          "url": "utilities/visual/background-patterns/"
-        },
-        {
-          "title": "Borders",
-          "url": "utilities/visual/borders/"
-        },
-        {
-          "title": "Border Colors",
-          "url": "utilities/visual/border-colors/"
-        },
-        {
-          "title": "Border Radius",
-          "url": "utilities/visual/border-radius/"
-        },
-        {
-          "title": "Box Shadows",
-          "url": "utilities/visual/box-shadows/"
-        },
-        {
-          "title": "Opacity",
-          "url": "utilities/visual/opacity/"
-        }
-      ]
-    },
-    {
-      "title": "Typography",
-      "url": "utilities/typography/",
-      "pages": [
-        {
-          "title": "Font Family",
-          "url": "utilities/typography/font-family/"
-        },
-        {
-          "title": "Font Size",
-          "url": "utilities/typography/sizes/"
-        },
-        {
-          "title": "Font Style",
-          "url": "utilities/typography/styles/"
-        },
-        {
-          "title": "Font Weight",
-          "url": "utilities/typography/font-weight/"
-        },
-        {
-          "title": "Layout",
-          "url": "utilities/typography/layout/"
-        },
-        {
-          "title": "Line Height",
-          "url": "utilities/typography/line-height/"
-        },
-        {
-          "title": "Lists",
-          "url": "utilities/typography/lists/"
-        },
-        {
-          "title": "Text Colors",
-          "url": "utilities/typography/colors/"
-        },
-        {
-          "title": "Text Opacity",
-          "url": "utilities/typography/text-opacity/"
-        }
-      ]
-    },
-    {
-      "title": "Components",
-      "url": "components/",
-      "pages": [
-        {
-          "title": "Avatars",
-          "url": "components/avatars/"
-        },
-        {
-          "title": "Badges",
-          "url": "components/badges/"
-        },
-        {
-          "title": "Banners",
-          "url": "components/banners/"
-        },
-        {
-          "title": "Breadcumbs",
-          "url": "components/breadcrumbs/"
-        },
-        {
-          "title": "Buttons",
-          "url": "components/buttons/"
-        },
-        {
-          "title": "Checkboxes",
-          "url": "components/checkboxes/"
-        },
-        {
-          "title": "Forms",
-          "url": "components/forms/"
-        },
-        {
-          "title": "Inputs",
-          "url": "components/inputs/"
-        },
-        {
-          "title": "Links",
-          "url": "components/links/"
-        },
-        {
-          "title": "Modals",
-          "url": "components/modals/"
-        },
-        {
-          "title": "Notices",
-          "url": "components/notices/"
-        },
-        {
-          "title": "Popover",
-          "url": "components/popover/"
-        },
-        {
-          "title": "Radios",
-          "url": "components/radios/"
-        },
-        {
-          "title": "Select Menus",
-          "url": "components/select/"
-        },
-        {
-          "title": "Skeleton",
-          "url": "components/skeleton/"
-        },
-        {
-          "title": "Tables",
-          "url": "components/tables/"
-        },
-        {
-          "title": "Tabs",
-          "url": "components/tabs/"
-        },
-        {
-          "title": "Textareas",
-          "url": "components/textareas/"
-        },
-        {
-          "title": "Toasts",
-          "url": "components/toast/"
-        },
-        {
-          "title": "Tooltips",
-          "url": "components/tooltips/"
-        }
-      ]
-    }
-  ]
-}
diff --git a/docs/_data/site-nav.js b/docs/_data/site-nav.js
new file mode 100644
index 0000000000..ecd8e87dbb
--- /dev/null
+++ b/docs/_data/site-nav.js
@@ -0,0 +1,623 @@
+var Site = require('./site.js');
+
+module.exports = {
+  sections: [
+    {
+      title: "About",
+      url: `about/dialtone/`,
+      subsections: [
+        {
+          title: "About",
+          url: `${Site.baseurl}about/dialtone/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "About Dialtone",
+              url: `${Site.baseurl}about/dialtone/`,
+              publish: "yes",
+            },
+            {
+              title: "Contributing",
+              url: `${Site.baseurl}about/contributing/`,
+              publish: "yes",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "Getting Started",
+      url: `getting-started/installation/`,
+      subsections: [
+        {
+          title: "Getting Started",
+          url: `${Site.baseurl}getting-started/installation/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Installation",
+              url: `${Site.baseurl}getting-started/installation/`,
+              publish: "yes",
+            },
+            {
+              title: "Using Dialtone",
+              url: `${Site.baseurl}getting-started/usage/`,
+              publish: "yes",
+            },
+            {
+              title: "Building Dialtone Locally",
+              url: `${Site.baseurl}getting-started/building-locally/`,
+              publish: "yes",
+            },
+          ],
+        },
+        {
+          title: "Accessibility",
+          url: `${Site.baseurl}getting-started/accessibility/fundamentals/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Fundamentals",
+              url: `${Site.baseurl}getting-started/accessibility/fundamentals/`,
+              publish: "yes",
+            },
+            {
+              title: "Best Practices",
+              url: `${Site.baseurl}getting-started/accessibility/best-practices/`,
+              publish: "yes",
+            },
+            {
+              title: "Tooling",
+              url: `${Site.baseurl}getting-started/accessibility/tooling/`,
+              publish: "yes",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "Design",
+      url: `design/colors/color-palette`,
+      subsections: [
+        {
+          title: "Colors",
+          url: `${Site.baseurl}design/colors/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Color Palette",
+              url: `${Site.baseurl}design/colors/color-palette/`,
+            },
+          ],
+        },
+        {
+          title: "Icons",
+          url: `${Site.baseurl}design/icons/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Brand Icons",
+              url: `${Site.baseurl}design/icons/brand/`,
+            },
+            {
+              title: "System Icons",
+              url: `${Site.baseurl}design/icons/system/`,
+            },
+            {
+              title: "Weather Icons",
+              url: `${Site.baseurl}design/icons/weather/`,
+            },
+            {
+              title: "Sizes",
+              url: `${Site.baseurl}design/icons/sizes/`,
+            },
+            {
+              title: "Adding Icons",
+              url: `${Site.baseurl}design/icons/adding/`,
+            },
+          ],
+        },
+        {
+          title: "Illustrations",
+          url: `${Site.baseurl}design/illustrations/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Patterns",
+              url: `${Site.baseurl}design/illustrations/patterns/`,
+            },
+            {
+              title: "Spot Illustrations",
+              url: `${Site.baseurl}design/illustrations/spot/`,
+            },
+          ],
+        },
+        {
+          title: "Spacing",
+          url: `${Site.baseurl}design/spacing/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Spacing System",
+              url: `${Site.baseurl}design/spacing/spacing-system/`,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "Utilities",
+      url: `utilities/backgrounds/attachment`,
+      subsections: [
+        {
+          title: "Backgrounds",
+          url: `${Site.baseurl}utilities/backgrounds/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Background Attachment",
+              url: `${Site.baseurl}utilities/backgrounds/attachment/`,
+            },
+            {
+              title: "Background Clip",
+              url: `${Site.baseurl}utilities/backgrounds/clip/`,
+            },
+            {
+              title: "Background Color",
+              url: `${Site.baseurl}utilities/backgrounds/color/`,
+            },
+            {
+              title: "Background Position",
+              url: `${Site.baseurl}utilities/backgrounds/position/`,
+            },
+            {
+              title: "Background Repeat",
+              url: `${Site.baseurl}utilities/backgrounds/repeat/`,
+            },
+            {
+              title: "Background Size",
+              url: `${Site.baseurl}utilities/backgrounds/size/`,
+            },
+            {
+              title: "Gradients",
+              url: `${Site.baseurl}utilities/backgrounds/gradients/`,
+            },
+            {
+              title: "Patterns",
+              url: `${Site.baseurl}utilities/backgrounds/patterns/`,
+            },
+          ],
+        },
+        {
+          title: "Borders",
+          url: `${Site.baseurl}utilities/borders/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Border Color",
+              url: `${Site.baseurl}utilities/borders/color/`,
+            },
+            {
+              title: "Border Direction",
+              url: `${Site.baseurl}utilities/borders/direction/`,
+            },
+            {
+              title: "Border Radius",
+              url: `${Site.baseurl}utilities/borders/radius/`,
+            },
+            {
+              title: "Border Style",
+              url: `${Site.baseurl}utilities/borders/style/`,
+            },
+            {
+              title: "Border Width",
+              url: `${Site.baseurl}utilities/borders/width/`,
+            },
+            {
+              title: "Divide Color",
+              url: `${Site.baseurl}utilities/borders/divide-color/`,
+            },
+            {
+              title: "Divide Width",
+              url: `${Site.baseurl}utilities/borders/divide-width/`,
+            },
+          ],
+        },
+        {
+          title: "Effects & Transitions",
+          url: `${Site.baseurl}utilities/effects/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Box Shadow",
+              url: `${Site.baseurl}utilities/effects/box-shadow/`,
+            },
+            {
+              title: "Opacity",
+              url: `${Site.baseurl}utilities/effects/opacity/`,
+            },
+            {
+              title: "Transition",
+              url: `${Site.baseurl}utilities/effects/transition/`,
+            },
+          ],
+        },
+        {
+          title: "Flex",
+          url: `${Site.baseurl}utilities/flex/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Align Content",
+              url: `${Site.baseurl}utilities/flex/align-content/`,
+            },
+            {
+              title: "Align Items",
+              url: `${Site.baseurl}utilities/flex/align-items/`,
+            },
+            {
+              title: "Align Self",
+              url: `${Site.baseurl}utilities/flex/align-self/`,
+            },
+            {
+              title: "Columns & Layouts",
+              url: `${Site.baseurl}utilities/flex/columns-layouts/`,
+            },
+            {
+              title: "Direction, Wrap, & Flow",
+              url: `${Site.baseurl}utilities/flex/direction-wrap-flow/`,
+            },
+            {
+              title: "Flex, Grow, & Shrink",
+              url: `${Site.baseurl}utilities/flex/flex-grow-shrink/`,
+            },
+            {
+              title: "Justify Content",
+              url: `${Site.baseurl}utilities/flex/justify/`,
+            },
+            {
+              title: "Order",
+              url: `${Site.baseurl}utilities/flex/order/`,
+            },
+          ],
+        },
+        {
+          title: "Grid",
+          url: `${Site.baseurl}utilities/grid/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Columns",
+              url: `${Site.baseurl}utilities/grid/column-start-end-span/`,
+            },
+            {
+              title: "Gap",
+              url: `${Site.baseurl}utilities/grid/gap/`,
+            },
+            {
+              title: "Justify Items",
+              url: `${Site.baseurl}utilities/grid/justify-items/`,
+            },
+            {
+              title: "Justify Self",
+              url: `${Site.baseurl}utilities/grid/justify-self/`,
+            },
+            {
+              title: "Layouts",
+              url: `${Site.baseurl}utilities/grid/layouts/`,
+            },
+            {
+              title: "Place Content",
+              url: `${Site.baseurl}utilities/grid/place-content/`,
+            },
+            {
+              title: "Place Items",
+              url: `${Site.baseurl}utilities/grid/place-items/`,
+            },
+            {
+              title: "Place Self",
+              url: `${Site.baseurl}utilities/grid/place-self/`,
+            },
+            {
+              title: "Rows",
+              url: `${Site.baseurl}utilities/grid/row-start-end-span/`,
+            },
+          ],
+        },
+        {
+          title: "Interactivity",
+          url: `${Site.baseurl}utilities/interactivity/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Cursor",
+              url: `${Site.baseurl}utilities/interactivity/cursor/`,
+            },
+            {
+              title: "Outline",
+              url: `${Site.baseurl}utilities/interactivity/outline/`,
+            },
+            {
+              title: "Pointer Events",
+              url: `${Site.baseurl}utilities/interactivity/pointer-events/`,
+            },
+          ],
+        },
+        {
+          title: "Layout",
+          url: `${Site.baseurl}utilities/layout/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Box Sizing",
+              url: `${Site.baseurl}utilities/layout/box-sizing/`,
+            },
+            {
+              title: "Coordinates",
+              url: `${Site.baseurl}utilities/layout/coordinates/`,
+            },
+            {
+              title: "Display",
+              url: `${Site.baseurl}utilities/layout/display/`,
+            },
+            {
+              title: "Overflow",
+              url: `${Site.baseurl}utilities/layout/overflow/`,
+            },
+            {
+              title: "Position",
+              url: `${Site.baseurl}utilities/layout/position/`,
+            },
+            {
+              title: "Visibility",
+              url: `${Site.baseurl}utilities/layout/visibility/`,
+            },
+            {
+              title: "Z-Index",
+              url: `${Site.baseurl}utilities/layout/z-index/`,
+            },
+          ],
+        },
+        {
+          title: "Responsive",
+          url: `${Site.baseurl}utilities/responsive/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Breakpoints",
+              url: `${Site.baseurl}utilities/responsive/breakpoints/`,
+            },
+          ],
+        },
+        {
+          title: "Sizing",
+          url: `${Site.baseurl}utilities/sizing/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Height",
+              url: `${Site.baseurl}utilities/sizing/height/`,
+            },
+            {
+              title: "Max-Height",
+              url: `${Site.baseurl}utilities/sizing/max-height/`,
+            },
+            {
+              title: "Min-Height",
+              url: `${Site.baseurl}utilities/sizing/min-height/`,
+            },
+            {
+              title: "Width",
+              url: `${Site.baseurl}utilities/sizing/width/`,
+            },
+            {
+              title: "Max-Width",
+              url: `${Site.baseurl}utilities/sizing/max-width/`,
+            },
+            {
+              title: "Min-Width",
+              url: `${Site.baseurl}utilities/sizing/min-width/`,
+            },
+          ],
+        },
+        {
+          title: "Spacing",
+          url: `${Site.baseurl}utilities/spacing/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Auto Spacing",
+              url: `${Site.baseurl}utilities/spacing/auto-spacing/`,
+            },
+            {
+              title: "Margin",
+              url: `${Site.baseurl}utilities/spacing/margin/`,
+            },
+            {
+              title: "Padding",
+              url: `${Site.baseurl}utilities/spacing/padding/`,
+            },
+          ],
+        },
+        {
+          title: "SVG",
+          url: `${Site.baseurl}utilities/svg/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Size",
+              url: `${Site.baseurl}utilities/svg/size/`,
+            },
+          ],
+        },
+        {
+          title: "Typography",
+          url: `${Site.baseurl}utilities/typography/`,
+          publish: "yes",
+          pages: [
+            {
+              title: "Color",
+              url: `${Site.baseurl}utilities/typography/color/`,
+            },
+            {
+              title: "Font Family",
+              url: `${Site.baseurl}utilities/typography/font-family/`,
+            },
+            {
+              title: "Font Size",
+              url: `${Site.baseurl}utilities/typography/font-size/`,
+            },
+            {
+              title: "Font Style",
+              url: `${Site.baseurl}utilities/typography/font-style/`,
+            },
+            {
+              title: "Font Weight",
+              url: `${Site.baseurl}utilities/typography/font-weight/`,
+            },
+            {
+              title: "Line Height",
+              url: `${Site.baseurl}utilities/typography/line-height/`,
+            },
+            {
+              title: "Lists",
+              url: `${Site.baseurl}utilities/typography/lists/`,
+            },
+            {
+              title: "Text Align",
+              url: `${Site.baseurl}utilities/typography/text-align/`,
+            },
+            {
+              title: "Text Decoration",
+              url: `${Site.baseurl}utilities/typography/text-decoration/`,
+            },
+            {
+              title: "Text Opacity",
+              url: `${Site.baseurl}utilities/typography/text-opacity/`,
+            },
+            {
+              title: "Text Overflow",
+              url: `${Site.baseurl}utilities/typography/text-overflow/`,
+            },
+            {
+              title: "Text Transform",
+              url: `${Site.baseurl}utilities/typography/text-transform/`,
+            },
+            {
+              title: "Vertical Align",
+              url: `${Site.baseurl}utilities/typography/vertical-align/`,
+            },
+            {
+              title: "Whitespace",
+              url: `${Site.baseurl}utilities/typography/whitespace/`,
+            },
+            {
+              title: "Word Break",
+              url: `${Site.baseurl}utilities/typography/word-break/`,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "Components",
+      url: `components/avatar`,
+      pages: [
+        {
+          title: "Avatar",
+          url: `${Site.baseurl}components/avatar/`,
+          publish: "yes",
+        },
+        {
+          title: "Badge",
+          url: `${Site.baseurl}components/badge/`,
+          publish: "yes",
+        },
+        {
+          title: "Banner",
+          url: `${Site.baseurl}components/banner/`,
+          publish: "yes",
+        },
+        {
+          title: "Breadcrumbs",
+          url: `${Site.baseurl}components/breadcrumbs/`,
+          publish: "yes",
+        },
+        {
+          title: "Button",
+          url: `${Site.baseurl}components/button/`,
+          publish: "yes",
+        },
+        {
+          title: "Checkbox",
+          url: `${Site.baseurl}components/checkbox/`,
+          publish: "yes",
+        },
+        {
+          title: "Input",
+          url: `${Site.baseurl}components/input/`,
+          publish: "yes",
+        },
+        {
+          title: "Link",
+          url: `${Site.baseurl}components/link/`,
+          publish: "yes",
+        },
+        {
+          title: "Modal",
+          url: `${Site.baseurl}components/modal/`,
+          publish: "yes",
+        },
+        {
+          title: "Notice",
+          url: `${Site.baseurl}components/notice/`,
+          publish: "yes",
+        },
+        {
+          title: "Popover",
+          url: `${Site.baseurl}components/popover/`,
+          publish: "yes",
+        },
+        {
+          title: "Radio",
+          url: `${Site.baseurl}components/radio/`,
+          publish: "yes",
+        },
+        {
+          title: "Select",
+          url: `${Site.baseurl}components/select/`,
+          publish: "yes",
+        },
+        {
+          title: "Skeleton",
+          url: `${Site.baseurl}components/skeleton/`,
+        },
+        {
+          title: "Table",
+          url: `${Site.baseurl}components/table/`,
+          publish: "yes",
+        },
+        {
+          title: "Tabs",
+          url: `${Site.baseurl}components/tabs/`,
+          publish: "yes",
+        },
+        {
+          title: "Toast",
+          url: `${Site.baseurl}components/toast/`,
+          publish: "yes",
+        },
+        {
+          title: "Toggle",
+          url: `${Site.baseurl}components/toggle/`,
+          publish: "yes",
+        },
+        {
+          title: "Tooltip",
+          url: `${Site.baseurl}components/tooltip/`,
+          publish: "yes",
+        },
+      ],
+    },
+  ],
+};
diff --git a/docs/_data/site-nav.json b/docs/_data/site-nav.json
deleted file mode 100644
index d16291907d..0000000000
--- a/docs/_data/site-nav.json
+++ /dev/null
@@ -1,621 +0,0 @@
-{
-  "sections": [
-    {
-      "title": "About",
-      "url": "about/dialtone/",
-      "subsections": [
-        {
-          "title": "About",
-          "url": "about/dialtone/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "About Dialtone",
-              "url": "about/dialtone/",
-              "publish": "yes"
-            },
-            {
-              "title": "Contributing",
-              "url": "about/contributing/",
-              "publish": "yes"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Getting Started",
-      "url": "getting-started/installation/",
-      "subsections": [
-        {
-          "title": "Getting Started",
-          "url": "getting-started/installation/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Installation",
-              "url": "getting-started/installation/",
-              "publish": "yes"
-            },
-            {
-              "title": "Using Dialtone",
-              "url": "getting-started/usage/",
-              "publish": "yes"
-            },
-            {
-              "title": "Building Dialtone Locally",
-              "url": "getting-started/building-locally/",
-              "publish": "yes"
-            }
-          ]
-        },
-        {
-          "title": "Accessibility",
-          "url": "getting-started/accessibility/fundamentals/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Fundamentals",
-              "url": "getting-started/accessibility/fundamentals/",
-              "publish": "yes"
-            },
-            {
-              "title": "Best Practices",
-              "url": "getting-started/accessibility/best-practices/",
-              "publish": "yes"
-            },
-            {
-              "title": "Tooling",
-              "url": "getting-started/accessibility/tooling/",
-              "publish": "yes"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Design",
-      "url": "design/colors/color-palette",
-      "subsections": [
-        {
-          "title": "Colors",
-          "url": "design/colors/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Color Palette",
-              "url": "design/colors/color-palette/"
-            }
-          ]
-        },
-        {
-          "title": "Icons",
-          "url": "design/icons/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Brand Icons",
-              "url": "design/icons/brand/"
-            },
-            {
-              "title": "System Icons",
-              "url": "design/icons/system/"
-            },
-            {
-              "title": "Weather Icons",
-              "url": "design/icons/weather/"
-            },
-            {
-              "title": "Sizes",
-              "url": "design/icons/sizes/"
-            },
-            {
-              "title": "Adding Icons",
-              "url": "design/icons/adding/"
-            }
-          ]
-        },
-        {
-          "title": "Illustrations",
-          "url": "design/illustrations/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Patterns",
-              "url": "design/illustrations/patterns/"
-            },
-            {
-              "title": "Spot Illustrations",
-              "url": "design/illustrations/spot/"
-            }
-          ]
-        },
-        {
-          "title": "Spacing",
-          "url": "design/spacing/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Spacing System",
-              "url": "design/spacing/spacing-system/"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Utilities",
-      "url": "utilities/backgrounds/attachment",
-      "subsections": [
-        {
-          "title": "Backgrounds",
-          "url": "utilities/backgrounds/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Background Attachment",
-              "url": "utilities/backgrounds/attachment/"
-            },
-            {
-              "title": "Background Clip",
-              "url": "utilities/backgrounds/clip/"
-            },
-            {
-              "title": "Background Color",
-              "url": "utilities/backgrounds/color/"
-            },
-            {
-              "title": "Background Position",
-              "url": "utilities/backgrounds/position/"
-            },
-            {
-              "title": "Background Repeat",
-              "url": "utilities/backgrounds/repeat/"
-            },
-            {
-              "title": "Background Size",
-              "url": "utilities/backgrounds/size/"
-            },
-            {
-              "title": "Gradients",
-              "url": "utilities/backgrounds/gradients/"
-            },
-            {
-              "title": "Patterns",
-              "url": "utilities/backgrounds/patterns/"
-            }
-          ]
-        },
-        {
-          "title": "Borders",
-          "url": "utilities/borders/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Border Color",
-              "url": "utilities/borders/color/"
-            },
-            {
-              "title": "Border Direction",
-              "url": "utilities/borders/direction/"
-            },
-            {
-              "title": "Border Radius",
-              "url": "utilities/borders/radius/"
-            },
-            {
-              "title": "Border Style",
-              "url": "utilities/borders/style/"
-            },
-            {
-              "title": "Border Width",
-              "url": "utilities/borders/width/"
-            },
-            {
-              "title": "Divide Color",
-              "url": "utilities/borders/divide-color/"
-            },
-            {
-              "title": "Divide Width",
-              "url": "utilities/borders/divide-width/"
-            }
-          ]
-        },
-        {
-          "title": "Effects & Transitions",
-          "url": "utilities/effects/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Box Shadow",
-              "url": "utilities/effects/box-shadow/"
-            },
-            {
-              "title": "Opacity",
-              "url": "utilities/effects/opacity/"
-            },
-            {
-              "title": "Transition",
-              "url": "utilities/effects/transition/"
-            }
-          ]
-        },
-        {
-          "title": "Flex",
-          "url": "utilities/flex/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Align Content",
-              "url": "utilities/flex/align-content/"
-            },
-            {
-              "title": "Align Items",
-              "url": "utilities/flex/align-items/"
-            },
-            {
-              "title": "Align Self",
-              "url": "utilities/flex/align-self/"
-            },
-            {
-              "title": "Columns & Layouts",
-              "url": "utilities/flex/columns-layouts/"
-            },
-            {
-              "title": "Direction, Wrap, & Flow",
-              "url": "utilities/flex/direction-wrap-flow/"
-            },
-            {
-              "title": "Flex, Grow, & Shrink",
-              "url": "utilities/flex/flex-grow-shrink/"
-            },
-            {
-              "title": "Justify Content",
-              "url": "utilities/flex/justify/"
-            },
-            {
-              "title": "Order",
-              "url": "utilities/flex/order/"
-            }
-          ]
-        },
-        {
-          "title": "Grid",
-          "url": "utilities/grid/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Columns",
-              "url": "utilities/grid/column-start-end-span/"
-            },
-            {
-              "title": "Gap",
-              "url": "utilities/grid/gap/"
-            },
-            {
-              "title": "Justify Items",
-              "url": "utilities/grid/justify-items/"
-            },
-            {
-              "title": "Justify Self",
-              "url": "utilities/grid/justify-self/"
-            },
-            {
-              "title": "Layouts",
-              "url": "utilities/grid/layouts/"
-            },
-            {
-              "title": "Place Content",
-              "url": "utilities/grid/place-content/"
-            },
-            {
-              "title": "Place Items",
-              "url": "utilities/grid/place-items/"
-            },
-            {
-              "title": "Place Self",
-              "url": "utilities/grid/place-self/"
-            },
-            {
-              "title": "Rows",
-              "url": "utilities/grid/row-start-end-span/"
-            }
-          ]
-        },
-        {
-          "title": "Interactivity",
-          "url": "utilities/interactivity/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Cursor",
-              "url": "utilities/interactivity/cursor/"
-            },
-            {
-              "title": "Outline",
-              "url": "utilities/interactivity/outline/"
-            },
-            {
-              "title": "Pointer Events",
-              "url": "utilities/interactivity/pointer-events/"
-            }
-          ]
-        },
-        {
-          "title": "Layout",
-          "url": "utilities/layout/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Box Sizing",
-              "url": "utilities/layout/box-sizing/"
-            },
-            {
-              "title": "Coordinates",
-              "url": "utilities/layout/coordinates/"
-            },
-            {
-              "title": "Display",
-              "url": "utilities/layout/display/"
-            },
-            {
-              "title": "Overflow",
-              "url": "utilities/layout/overflow/"
-            },
-            {
-              "title": "Position",
-              "url": "utilities/layout/position/"
-            },
-            {
-              "title": "Visibility",
-              "url": "utilities/layout/visibility/"
-            },
-            {
-              "title": "Z-Index",
-              "url": "utilities/layout/z-index/"
-            }
-          ]
-        },
-        {
-          "title": "Responsive",
-          "url": "utilities/responsive/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Breakpoints",
-              "url": "utilities/responsive/breakpoints/"
-            }
-          ]
-        },
-        {
-          "title": "Sizing",
-          "url": "utilities/sizing/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Height",
-              "url": "utilities/sizing/height/"
-            },
-            {
-              "title": "Max-Height",
-              "url": "utilities/sizing/max-height/"
-            },
-            {
-              "title": "Min-Height",
-              "url": "utilities/sizing/min-height/"
-            },
-            {
-              "title": "Width",
-              "url": "utilities/sizing/width/"
-            },
-            {
-              "title": "Max-Width",
-              "url": "utilities/sizing/max-width/"
-            },
-            {
-              "title": "Min-Width",
-              "url": "utilities/sizing/min-width/"
-            }
-          ]
-        },
-        {
-          "title": "Spacing",
-          "url": "utilities/spacing/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Auto Spacing",
-              "url": "utilities/spacing/auto-spacing/"
-            },
-            {
-              "title": "Margin",
-              "url": "utilities/spacing/margin/"
-            },
-            {
-              "title": "Padding",
-              "url": "utilities/spacing/padding/"
-            }
-          ]
-        },
-        {
-          "title": "SVG",
-          "url": "utilities/svg/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Size",
-              "url": "utilities/svg/size/"
-            }
-          ]
-        },
-        {
-          "title": "Typography",
-          "url": "utilities/typography/",
-          "publish": "yes",
-          "pages": [
-            {
-              "title": "Color",
-              "url": "utilities/typography/color/"
-            },
-            {
-              "title": "Font Family",
-              "url": "utilities/typography/font-family/"
-            },
-            {
-              "title": "Font Size",
-              "url": "utilities/typography/font-size/"
-            },
-            {
-              "title": "Font Style",
-              "url": "utilities/typography/font-style/"
-            },
-            {
-              "title": "Font Weight",
-              "url": "utilities/typography/font-weight/"
-            },
-            {
-              "title": "Line Height",
-              "url": "utilities/typography/line-height"
-            },
-            {
-              "title": "Lists",
-              "url": "utilities/typography/lists/"
-            },
-            {
-              "title": "Text Align",
-              "url": "utilities/typography/text-align/"
-            },
-            {
-              "title": "Text Decoration",
-              "url": "utilities/typography/text-decoration/"
-            },
-            {
-              "title": "Text Opacity",
-              "url": "utilities/typography/text-opacity/"
-            },
-            {
-              "title": "Text Overflow",
-              "url": "utilities/typography/text-overflow/"
-            },
-            {
-              "title": "Text Transform",
-              "url": "utilities/typography/text-transform/"
-            },
-            {
-              "title": "Vertical Align",
-              "url": "utilities/typography/vertical-align/"
-            },
-            {
-              "title": "Whitespace",
-              "url": "utilities/typography/whitespace/"
-            },
-            {
-              "title": "Word Break",
-              "url": "utilities/typography/word-break/"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Components",
-      "url": "components/avatar",
-      "pages": [
-        {
-          "title": "Avatar",
-          "url": "components/avatar/",
-          "publish": "yes"
-        },
-        {
-          "title": "Badge",
-          "url": "components/badge/",
-          "publish": "yes"
-        },
-        {
-          "title": "Banner",
-          "url": "components/banner/",
-          "publish": "yes"
-        },
-        {
-          "title": "Breadcrumbs",
-          "url": "components/breadcrumbs/",
-          "publish": "yes"
-        },
-        {
-          "title": "Button",
-          "url": "components/button/",
-          "publish": "yes"
-        },
-        {
-          "title": "Checkbox",
-          "url": "components/checkbox/",
-          "publish": "yes"
-        },
-        {
-          "title": "Input",
-          "url": "components/input/",
-          "publish": "yes"
-        },
-        {
-          "title": "Link",
-          "url": "components/link/",
-          "publish": "yes"
-        },
-        {
-          "title": "Modal",
-          "url": "components/modal/",
-          "publish": "yes"
-        },
-        {
-          "title": "Notice",
-          "url": "components/notice/",
-          "publish": "yes"
-        },
-        {
-          "title": "Popover",
-          "url": "components/popover/",
-          "publish": "yes"
-        },
-        {
-          "title": "Radio",
-          "url": "components/radio/",
-          "publish": "yes"
-        },
-        {
-          "title": "Select",
-          "url": "components/select/",
-          "publish": "yes"
-        },
-        {
-          "title": "Skeleton",
-          "url": "components/skeleton/"
-        },
-        {
-          "title": "Table",
-          "url": "components/table/",
-          "publish": "yes"
-        },
-        {
-          "title": "Tabs",
-          "url": "components/tabs/",
-          "publish": "yes"
-        },
-        {
-          "title": "Toast",
-          "url": "components/toast/",
-          "publish": "yes"
-        },
-        {
-          "title": "Toggle",
-          "url": "components/toggle/",
-          "publish": "yes"
-        },
-        {
-          "title": "Tooltip",
-          "url": "components/tooltip/",
-          "publish": "yes"
-        }
-      ]
-    }
-  ]
-}