terra_ui_components 0.0.103__tar.gz → 0.0.117__tar.gz

terra_ui_components-0.0.117/CONTRIBUTING.md

@@ -0,0 +1,15 @@
+# Contributing to Terra UI Components
+
+For detailed contributing guidelines, please visit:
+
+**https://terra-ui.netlify.app/about/contributing/**
+
+The documentation includes information on:
+
+-   GitHub Issues
+-   Pull Requests
+-   Creating New Components
+-   Python Widgets
+-   Testing
+-   Documentation
+-   Best Practices

{terra_ui_components-0.0.103 → terra_ui_components-0.0.117}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.103
+Version: 0.0.117
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8

{terra_ui_components-0.0.103 → terra_ui_components-0.0.117}/custom-elements-manifest.config.js

@@ -236,7 +236,7 @@ export default {
             referencesTemplate: (_, tag) => [
                 {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,
@@ -251,7 +251,7 @@ export default {
             referencesTemplate: (_, tag) => {
                 return {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,

{terra_ui_components-0.0.103 → terra_ui_components-0.0.117}/custom-elements-manifest.mjs

@@ -236,7 +236,7 @@ export default {
             referencesTemplate: (_, tag) => [
                 {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,
@@ -251,7 +251,7 @@ export default {
             referencesTemplate: (_, tag) => {
                 return {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,

{terra_ui_components-0.0.103 → terra_ui_components-0.0.117}/docs/_includes/default.njk

@@ -70,6 +70,87 @@
       Skip to main content
     </a>
 
+        {# Top Navigation Bar #}
+        <header id="top-nav" class="top-nav">
+            <div class="top-nav__left">
+                <a href="/" class="top-nav__logo">
+                    <terra-icon name="nasa-logo" font-size="4rem"></terra-icon>
+                    <span class="top-nav__title">Terra UI</span>
+                </a>
+            </div>
+            </nav>
+            <div class="top-nav__right">
+                <terra-dropdown id="about-dropdown" placement="bottom-start" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret title="About">
+                        About
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item value="project-overview">
+                            <a href="{{ '/' | url }}">Project Overview</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="contributing">
+                            <a href="{{ '/about/contributing' | url }}">Contributing</a>
+                        </terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+                <terra-dropdown id="getting-started-dropdown" placement="bottom-start" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret title="Getting Started">
+                        Getting Started
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item value="installation">
+                            <a href="{{ '/getting-started/installation' | url }}">Installation</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="usage">
+                            <a href="{{ '/getting-started/usage' | url }}">Usage</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="themes">
+                            <a href="{{ '/getting-started/themes' | url }}">Themes</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="customizing">
+                            <a href="{{ '/getting-started/customizing' | url }}">Customizing</a>
+                        </terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+
+                <terra-dropdown id="frameworks-dropdown" placement="bottom-start" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret title="Frameworks">
+                        Frameworks
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item value="react">
+                            <a href="{{ '/frameworks/react' | url }}">React</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="vue">
+                            <a href="{{ '/frameworks/vue' | url }}">Vue</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="angular">
+                            <a href="{{ '/frameworks/angular' | url }}">Angular</a>
+                        </terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+                
+                <button class="top-nav__search" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
+                    <sl-icon name="search"></sl-icon>
+                </button>
+                <a href="https://github.com/nasa/terra-ui-components" title="View Terra UI Components on GitHub" class="top-nav__icon-link">
+                    <sl-icon name="github"></sl-icon>
+                </a>
+                <terra-dropdown id="theme-selector" placement="bottom-end" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret="" title="Press \ to toggle" data-optional="" data-valid="" data-user-valid="">
+                        <sl-icon class="only-light" name="sun-fill" aria-hidden="true" library="default"></sl-icon>
+                        <sl-icon class="only-dark" name="moon-fill" aria-hidden="true" library="default"></sl-icon>
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item type="checkbox" value="light" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Light</terra-menu-item>
+                        <terra-menu-item type="checkbox" value="dark" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Dark</terra-menu-item>
+                        <hr role="separator" aria-orientation="horizontal" style="margin: var(--terra-spacing-x-small) 0; border: none; border-top: 1px solid var(--terra-panel-border-color);">
+                        <terra-menu-item type="checkbox" value="auto" tabindex="0" role="menuitemcheckbox" aria-checked="true" aria-disabled="false" checked="">System</terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+            </div>
+        </header>
+
         {# Menu toggle #}
         <button id="menu-toggle" type="button" aria-label="Menu">
             <svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
@@ -79,46 +160,7 @@
             </svg>
         </button>
 
-        {# Icon toolbar #}
-        <div id="icon-toolbar">
-            {# GitHub #}
-            <a href="https://github.com/nasa/terra-ui-components" title="View Terra UI Components on GitHub">
-                <sl-icon name="github"></sl-icon>
-            </a>
-            <sl-dropdown id="environment-selector" placement="bottom-end" distance="3">
-                <terra-button slot="trigger" size="large" variant="text" caret="" title="Environment" data-optional="" data-valid="" data-user-valid="">
-                    <span id="environment-display">UAT</span>
-                </terra-button>
-                <sl-menu role="menu">
-                    <sl-menu-item type="checkbox" value="uat" tabindex="-1" role="menuitemcheckbox" aria-checked="true" aria-disabled="false" checked="">UAT</sl-menu-item>
-                    <sl-menu-item type="checkbox" value="prod" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">PROD</sl-menu-item>
-                </sl-menu>
-            </sl-dropdown>
-            <sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
-                <terra-button slot="trigger" size="large" variant="text" caret="" title="Press \ to toggle" data-optional="" data-valid="" data-user-valid="">
-                    <sl-icon class="only-light" name="sun-fill" aria-hidden="true" library="default"></sl-icon>
-                    <sl-icon class="only-dark" name="moon-fill" aria-hidden="true" library="default"></sl-icon>
-                </terra-button>
-                <sl-menu role="menu">
-                    <sl-menu-item type="checkbox" value="light" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Light</sl-menu-item>
-                    <sl-menu-item type="checkbox" value="dark" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Dark</sl-menu-item>
-                    <sl-divider role="separator" aria-orientation="horizontal"></sl-divider>
-                    <sl-menu-item type="checkbox" value="auto" tabindex="0" role="menuitemcheckbox" aria-checked="true" aria-disabled="false" checked="">System</sl-menu-item>
-                </sl-menu>
-            </sl-dropdown>
-        </div>
-
         <aside id="sidebar" data-preserve-scroll>
-            <header>
-                <a href="/" class="sidebar-logo">
-                    <img src="{{ assetUrl('images/logo.svg') }}" alt="Terra UI Components"/>
-                    Terra UI Components
-                </a>
-                <div class="sidebar-version">
-                    {{ meta.version }}
-                </div>
-            </header>
-
             <div class="sidebar-buttons">
                 <terra-button size="small" class="repo-button repo-button--github" href="https://github.com/nasa/terra-ui-components" target="_blank">
                     <sl-icon slot="prefix" name="github"></sl-icon> Code
@@ -128,11 +170,6 @@
         </terra-button>
             </div>
 
-            <button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
-                <sl-icon name="search"></sl-icon>
-                <span>Search</span>
-            </button>
-
             <nav>
                 {% include 'sidebar.njk' %}
             </nav>

terra_ui_components-0.0.117/docs/_includes/sidebar.njk

@@ -0,0 +1,86 @@
+<ul>
+    <li>
+        <h2>Design System</h2>
+        <ul>
+            <li>
+                <a href="{{ '/horizon-design-system' | url }}">Overview</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/typography' | url }}">Typography</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/color' | url }}">Color</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/spacing' | url }}">Spacing</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/elevation' | url }}">Elevation</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/border-radius' | url }}">Border Radius</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/transition' | url }}">Transition</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/z-index' | url }}">Z-index</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/more' | url }}">More Tokens</a>
+            </li>
+            <li>
+                <a href="{{ '/horizon-design-system/#adoption-status' | url }}">HDS Adoption Status</a>
+            </li>
+        </ul>
+    </li>
+    
+    <li>
+        <h2>Forms</h2>
+        <ul>
+            <li>
+                <a href="{{ '/forms' | url }}">Overview</a>
+            </li>
+        </ul>
+    </li>
+    
+    {% for sectionName in meta.sidebarSectionOrder %}
+        {% if meta.componentsBySection[sectionName] %}
+            <li>
+                <h2>{{ sectionName }}</h2>
+                <ul>
+                    {% for component in meta.componentsBySection[sectionName] %}
+                        <li>
+                            <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
+                                {{ component.name | classNameToComponentName }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+    {% endfor %}
+    {# Include any sections not in the defined order (fallback) #}
+    {% for sectionName, components in meta.componentsBySection %}
+        {% set isInOrder = false %}
+        {% for orderedSection in meta.sidebarSectionOrder %}
+            {% if orderedSection == sectionName %}
+                {% set isInOrder = true %}
+            {% endif %}
+        {% endfor %}
+        {% if not isInOrder %}
+            <li>
+                <h2>{{ sectionName }}</h2>
+                <ul>
+                    {% for component in components %}
+                        <li>
+                            <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
+                                {{ component.name | classNameToComponentName }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+    {% endfor %}
+</ul>

{terra_ui_components-0.0.103 → terra_ui_components-0.0.117}/docs/assets/scripts/docs.js

@@ -152,7 +152,7 @@
 //
 ;(() => {
     function getEnvironment() {
-        return localStorage.getItem('terra-environment') || 'uat'
+        return localStorage.getItem('terra-environment') || 'prod'
     }
 
     function setEnvironment(newEnvironment) {
@@ -210,6 +210,10 @@
     setEnvironment(environment)
 })()
 
+//
+// Top navigation dropdown menu item clicks (now handled by terra-dropdown component)
+//
+
 //
 // Open details when printing
 //

{terra_ui_components-0.0.103 → terra_ui_components-0.0.117}/docs/assets/styles/docs.css

@@ -23,6 +23,8 @@
     --docs-content-vertical-spacing: 2rem;
     --docs-search-overlay-background: rgb(0 0 0 / 0.2);
     --docs-skip-to-main-width: 200px;
+    --docs-top-nav-height: 85px;
+    --docs-top-nav-bg: var(--terra-color-carbon-80);
 }
 
 /* Light theme */
@@ -727,11 +729,179 @@ pre:hover .copy-code-button,
     );
 }
 
+/* Top Navigation Bar */
+#top-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--docs-top-nav-height);
+    background-color: var(--docs-top-nav-bg);
+    z-index: 25;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1.5rem;
+    border-bottom: solid var(--docs-border-width) var(--docs-border-color);
+}
+
+.terra-theme-dark #top-nav {
+    background-color: var(--terra-color-carbon-20);
+}
+
+.top-nav__left {
+    display: flex;
+    align-items: center;
+}
+
+.top-nav__logo {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: white;
+    gap: 0.75rem;
+}
+
+.top-nav__logo img {
+    width: 40px;
+    height: auto;
+    display: block;
+}
+
+.top-nav__logo terra-icon {
+    color: white;
+    font-size: 1.5rem;
+}
+
+.top-nav__title {
+    font-size: var(--terra-font-size-large);
+    font-weight: var(--terra-font-weight-semibold);
+    color: white;
+}
+
+.top-nav__center {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.top-nav__center terra-dropdown terra-button::part(base) {
+    color: var(--terra-color-spacesuit-white);
+    font-size: var(--terra-font-size-medium);
+}
+
+.top-nav__center terra-dropdown terra-button:hover::part(base) {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.terra-theme-dark .top-nav__center terra-dropdown terra-button::part(base) {
+    color: var(--terra-color-carbon-80);
+}
+
+.terra-theme-dark .top-nav__center terra-dropdown terra-button:hover::part(base) {
+    color: var(--terra-color-carbon-70);
+}
+
+.top-nav__right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.top-nav__search {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 1.25rem;
+    padding: 0.5rem;
+    cursor: pointer;
+    border-radius: var(--docs-border-radius);
+    transition: background-color 150ms ease;
+}
+
+.top-nav__search:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.terra-theme-dark .top-nav__search:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-nav__icon-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.25rem;
+    padding: 0.5rem;
+    text-decoration: none;
+    border-radius: var(--docs-border-radius);
+    transition: background-color 150ms ease;
+}
+
+.top-nav__icon-link:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.terra-theme-dark .top-nav__icon-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-nav__right terra-dropdown terra-button::part(base) {
+    color: var(--terra-color-spacesuit-white);
+}
+
+.top-nav__right terra-dropdown terra-button:hover::part(base) {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.terra-theme-dark .top-nav__right terra-dropdown terra-button::part(base) {
+    color: var(--terra-color-carbon-80);
+}
+
+.terra-theme-dark .top-nav__right terra-dropdown terra-button:hover::part(base) {
+    color: var(--terra-color-carbon-70);
+}
+
+/* Fix dropdown menu items to be clickable */
+.top-nav__center terra-menu terra-menu-item,
+.top-nav__right terra-menu terra-menu-item {
+    padding: 0;
+}
+
+.top-nav__center terra-menu terra-menu-item a,
+.top-nav__center terra-menu terra-menu-item a:visited,
+.top-nav__right terra-menu terra-menu-item a,
+.top-nav__right terra-menu terra-menu-item a:visited {
+    color: inherit;
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    padding: 0.5rem 1rem;
+}
+
+@media screen and (max-width: 900px) {
+    #top-nav {
+        padding: 0 1rem;
+    }
+
+    .top-nav__center {
+        display: none;
+    }
+
+    .top-nav__title {
+        font-size: var(--terra-font-size-medium);
+    }
+}
+
 /* Sidebar */
 #sidebar {
     position: fixed;
     flex: 0;
-    top: 0;
+    top: var(--docs-top-nav-height);
     left: 0;
     bottom: 0;
     z-index: 20;
@@ -855,6 +1025,7 @@ main {
     padding: var(--docs-content-vertical-spacing) var(--docs-content-padding)
         calc(var(--docs-content-vertical-spacing) * 2) var(--docs-content-padding);
     margin-left: var(--docs-sidebar-width);
+    margin-top: var(--docs-top-nav-height);
 }
 
 .sidebar-open .content {
@@ -910,8 +1081,8 @@ main {
 
 .content__toc ul {
     position: sticky;
-    top: 5rem;
-    max-height: calc(100vh - 6rem);
+    top: calc(var(--docs-top-nav-height) + 1rem);
+    max-height: calc(100vh - var(--docs-top-nav-height) - 2rem);
     font-size: var(--terra-font-size-small);
     line-height: 1.33;
     border-left: solid 1px var(--terra-color-carbon-20);
@@ -1021,7 +1192,7 @@ main {
     display: none;
     position: fixed;
     z-index: 30;
-    top: 0.25rem;
+    top: calc(var(--docs-top-nav-height) + 0.25rem);
     left: 0.25rem;
     height: auto;
     width: auto;
@@ -1063,7 +1234,7 @@ html.sidebar-open #menu-toggle {
 /* Skip to main content */
 #skip-to-main {
     position: fixed;
-    top: 0.25rem;
+    top: calc(var(--docs-top-nav-height) + 0.25rem);
     left: calc(50% - var(--docs-skip-to-main-width) / 2);
     z-index: 100;
     width: var(--docs-skip-to-main-width);
@@ -1075,17 +1246,9 @@ html.sidebar-open #menu-toggle {
     padding: 0.5rem;
 }
 
-/* Icon toolbar */
+/* Icon toolbar - now integrated into top nav, hide old one */
 #icon-toolbar {
-    display: flex;
-    position: fixed;
-    top: 0;
-    right: 1rem;
-    z-index: 10;
-    background: var(--terra-color-carbon-80);
-    border-bottom-left-radius: calc(var(--docs-border-radius) * 2);
-    border-bottom-right-radius: calc(var(--docs-border-radius) * 2);
-    padding: 0.125rem 0.25rem;
+    display: none;
 }
 
 #icon-toolbar button,
@@ -1247,7 +1410,7 @@ html.sidebar-open #menu-toggle {
 }
 
 .splash-start {
-    min-width: 420px;
+    min-width: 600px;
 }
 
 .splash-start h1 {
@@ -1419,7 +1582,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 /* Color palettes */
 .color-palette {
     display: grid;
-    grid-template-columns: 200px repeat(11, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 1rem var(--terra-spacing-2x-small);
     margin: 2rem 0;
 }
@@ -1427,7 +1590,6 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 .color-palette__name {
     font-size: var(--terra-font-size-medium);
     font-weight: var(--terra-font-weight-semibold);
-    grid-template-columns: repeat(11, 1fr);
 }
 
 .color-palette__name code {
@@ -1451,11 +1613,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 
 @media screen and (max-width: 1200px) {
     .color-palette {
-        grid-template-columns: repeat(6, 1fr);
-    }
-
-    .color-palette__name {
-        grid-column-start: span 6;
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     }
 }
 

{terra_ui_components-0.0.103 → terra_ui_components-0.0.117}/docs/eleventy.config.cjs

@@ -17,6 +17,8 @@ const prettier = require('./_utilities/prettier.cjs')
 const scrollingTables = require('./_utilities/scrolling-tables.cjs')
 const typography = require('./_utilities/typography.cjs')
 const replacer = require('./_utilities/replacer.cjs')
+const matter = require('gray-matter')
+const { globbySync } = require('globby')
 
 const assetsDir = 'assets'
 const cdndir = 'cdn'
@@ -28,9 +30,48 @@ module.exports = function (eleventyConfig) {
     //
     // Global data
     //
-    eleventyConfig.addGlobalData('baseUrl', 'https://disc.gsfc.nasa.gov/') // the production URL
+    eleventyConfig.addGlobalData('baseUrl', 'https://terra-ui.netlify.app/') // the production URL
     eleventyConfig.addGlobalData('layout', 'default') // make 'default' the default layout
     eleventyConfig.addGlobalData('toc', true) // enable the table of contents
+    // Read component markdown files to get sidebarSection from front matter
+    const componentSectionMap = {}
+    const componentMarkdownFiles = globbySync('pages/components/*.md')
+    componentMarkdownFiles.forEach(file => {
+        const content = fs.readFileSync(file, 'utf8')
+        const { data } = matter(content)
+        if (data.sidebarSection) {
+            // Extract component name from filename (e.g., "avatar.md" -> "terra-avatar")
+            const componentName = path.basename(file, '.md')
+            componentSectionMap[`terra-${componentName}`] = data.sidebarSection
+        }
+    })
+
+    // Group components by sidebar section
+    const componentsBySection = {}
+    allComponents.forEach(component => {
+        // Get section from markdown front matter, default to "Components"
+        const section = componentSectionMap[component.tagName] || 'Components'
+
+        if (section !== 'Hidden') {
+            if (!componentsBySection[section]) {
+                componentsBySection[section] = []
+            }
+            componentsBySection[section].push(component)
+        }
+    })
+
+    // Sort components within each section
+    Object.keys(componentsBySection).forEach(section => {
+        componentsBySection[section].sort((a, b) => {
+            if (a.name < b.name) return -1
+            if (a.name > b.name) return 1
+            return 0
+        })
+    })
+
+    // Define the order of sections in the sidebar
+    const sidebarSectionOrder = ['Forms', 'Elements', 'Components']
+
     eleventyConfig.addGlobalData('meta', {
         title: 'Terra UI Components',
         description:
@@ -38,6 +79,8 @@ module.exports = function (eleventyConfig) {
         image: 'images/og-image.png',
         version: customElementsManifest.package.version,
         components: allComponents,
+        componentsBySection,
+        sidebarSectionOrder,
         cdndir,
         npmdir,
     })