- ${headings
- .map(
- h =>
- `
-
- {
+ const href = getSiteHref(`${this.page.url}#${h.id}`);
+ return `
- + ${h.textContent} -
` - ) + `;
+ })
.join('')}
+`;
+
+ const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
+
+ expect(result).toContain('href="https://nvidia.github.io/elements/docs/cli/"');
+ expect(result).toContain('href="https://nvidia.github.io/elements/docs/mcp/#skills"');
+ expect(result).toContain('href="https://nvidia.github.io/elements/docs/metrics/"');
+ expect(result).toContain('href="https://nvidia.github.io/elements/docs/api-design/"');
+ expect(result).toContain('href="https://nvidia.github.io/elements/"');
+ expect(result).toContain('src="https://nvidia.github.io/elements/static/images/integrations/angular.svg"');
+ });
+
+ it('should keep local same-site urls root-relative outside build output', async () => {
+ const { siteUrlsTransform } = await importTransform('serve');
+ const html = `
+Metrics
+CLI
+
+`;
+
+ const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
+
+ expect(result).toContain('href="/docs/metrics/"');
+ expect(result).toContain('href="/docs/cli/"');
+ expect(result).toContain('src="/static/images/integrations/angular.svg"');
+ });
+
+ it('should keep pages preview urls local when building for local preview', async () => {
+ const { siteUrlsTransform } = await importTransform('build', {
+ localPreview: true,
+ pagesBaseUrl: '/elements/preview/'
+ });
+ const html = `
+
+`;
+
+ const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
+
+ expect(result).toContain('href="/elements/preview/"');
+ expect(result).toContain('href="/elements/preview/docs/cli/"');
+ expect(result).toContain('src="/elements/preview/static/images/integrations/angular.svg"');
+ });
+
+ it('should preserve source module urls when building production output', async () => {
+ const { siteUrlsTransform } = await importTransform('build');
+ const html = `
+
+
+`;
+
+ const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
+
+ expect(result).toContain('src="/404/index.ts"');
+ expect(result).toContain('src="https://nvidia.github.io/elements/static/images/integrations/angular.svg"');
+ });
+
+ it('should preserve source module urls when building for local preview', async () => {
+ const { siteUrlsTransform } = await importTransform('build', {
+ localPreview: true,
+ pagesBaseUrl: '/elements/preview/'
+ });
+ const html = `
+
+
+`;
+
+ const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
+
+ expect(result).toContain('src="/404/index.ts"');
+ expect(result).toContain('src="/elements/preview/static/images/integrations/angular.svg"');
+ });
+
+ it('should preserve external protocol and fragment urls', async () => {
+ const { siteUrlsTransform } = await importTransform('build');
+ const html = `
+External
+Protocol
+Email
+Phone
+Data
+Blob
+JavaScript
+Fragment
+
+`;
+
+ const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
+
+ expect(result).toContain('href="https://example.com/docs/"');
+ expect(result).toContain('href="//example.com/docs/"');
+ expect(result).toContain('href="mailto:docs@nvidia.com"');
+ expect(result).toContain('href="tel:5555555555"');
+ expect(result).toContain('href="data:text/plain,docs"');
+ expect(result).toContain('href="blob:https://example.com/id"');
+ expect(result).toContain('href="javascript:void(0)"');
+ expect(result).toContain('href="#section"');
+ expect(result).toContain('href="#icon"');
+ });
+
+ it('should not rewrite urls inside template content', async () => {
+ const { siteUrlsTransform } = await importTransform('build');
+ const html = 'CLI
';
+
+ const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
+
+ expect(result).toBe(html);
+ });
+
+ it('should return non-html output unchanged', async () => {
+ const { siteUrlsTransform } = await importTransform('build');
+ const html = 'CLI';
+
+ await expect(siteUrlsTransform.call(createContext(), html, 'index.xml')).resolves.toBe(html);
+ });
+
+ it('should use the Eleventy page output path when the output path argument is omitted', async () => {
+ const { siteUrlsTransform } = await importTransform('serve');
+ const html = 'CLI';
+
+ const result = await siteUrlsTransform.call(createContext('/docs/integrations/', 'dist/index.html'), html);
+
+ expect(result).toContain('href="/docs/cli/"');
+ });
+});
diff --git a/projects/site/src/_11ty/utils/site-url.js b/projects/site/src/_11ty/utils/site-url.js
new file mode 100644
index 000000000..5e2594c56
--- /dev/null
+++ b/projects/site/src/_11ty/utils/site-url.js
@@ -0,0 +1,87 @@
+/* eslint-env node */
+/* global process */
+
+import { ELEMENTS_PAGES_BASE_URL, ELEMENTS_SITE_URL } from './env.js';
+
+export const ELEMENTS_SITE_ORIGIN = ELEMENTS_SITE_URL.replace(/\/+$/, '');
+
+export const BASE_URL = normalizeBasePath(process.env.PAGES_BASE_URL);
+export const DEPLOYED_SITE_URL = getDeployedSiteUrl();
+export const IS_LOCAL_PREVIEW = process.env.LOCAL_PREVIEW === 'true';
+const BASE_PATH = BASE_URL === '/' ? '' : BASE_URL.replace(/\/$/, '');
+
+export function normalizeBasePath(value) {
+ const path = String(value ?? '')
+ .trim()
+ .replace(/^\/+|\/+$/g, '');
+
+ return path ? `/${path}/` : '/';
+}
+
+export function getDeployedSiteUrl() {
+ const pagesBaseUrl = ELEMENTS_PAGES_BASE_URL.trim().replace(/\/+$/, '');
+
+ if (pagesBaseUrl) return pagesBaseUrl;
+ if (BASE_URL === '/') return ELEMENTS_SITE_ORIGIN;
+
+ return `${ELEMENTS_SITE_ORIGIN}${BASE_URL.replace(/\/$/, '')}`;
+}
+
+function normalizeSitePath(path) {
+ const value = String(path ?? '/').trim();
+ if (!value) return '/';
+ return value.startsWith('/') ? value : `/${value}`;
+}
+
+function removeDuplicateBasePath(pathname) {
+ if (!BASE_PATH) return pathname;
+
+ const duplicateBasePath = `${BASE_PATH}${BASE_PATH}`;
+
+ if (pathname === duplicateBasePath) return BASE_PATH;
+ if (pathname.startsWith(`${duplicateBasePath}/`)) return `${BASE_PATH}${pathname.slice(duplicateBasePath.length)}`;
+
+ return pathname;
+}
+
+function addBasePath(path) {
+ const url = new URL(normalizeSitePath(path), ELEMENTS_SITE_ORIGIN);
+ url.pathname = removeDuplicateBasePath(url.pathname);
+
+ if (!BASE_PATH || url.pathname === BASE_PATH || url.pathname.startsWith(`${BASE_PATH}/`)) {
+ return `${url.pathname}${url.search}${url.hash}`;
+ }
+
+ const pathname = url.pathname === '/' ? `${BASE_PATH}/` : `${BASE_PATH}${url.pathname}`;
+ return `${pathname}${url.search}${url.hash}`;
+}
+
+function removeBasePath(path) {
+ const url = new URL(normalizeSitePath(path), ELEMENTS_SITE_ORIGIN);
+ url.pathname = removeDuplicateBasePath(url.pathname);
+
+ if (BASE_PATH && url.pathname === BASE_PATH) {
+ return `/${url.search}${url.hash}`;
+ }
+
+ if (BASE_PATH && url.pathname.startsWith(`${BASE_PATH}/`)) {
+ return `${url.pathname.slice(BASE_PATH.length)}${url.search}${url.hash}`;
+ }
+
+ return `${url.pathname}${url.search}${url.hash}`;
+}
+
+export function getSiteHref(path = '/') {
+ if (process.env.ELEVENTY_RUN_MODE === 'build' && !IS_LOCAL_PREVIEW) return getSiteUrl(path);
+ return addBasePath(path);
+}
+
+export function getSitePath(path = '/') {
+ return removeBasePath(path);
+}
+
+export function getSiteUrl(path = '/') {
+ const normalizedPath = removeBasePath(path);
+
+ return `${DEPLOYED_SITE_URL}${normalizedPath}`;
+}
diff --git a/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts b/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts
index fab17702d..df2249002 100644
--- a/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts
+++ b/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts
@@ -198,55 +198,55 @@ export class MetricsCarousel extends LitElement {
return [
{
- href: '/elements/docs/metrics/',
+ href: '/docs/metrics/',
title: 'Available Components',
label: 'Browse our component offerings',
metricCount: totalElements
},
{
- href: '/elements/docs/metrics/',
+ href: '/docs/metrics/',
title: 'Total Web Components',
label: 'Browse our component offerings',
metricCount: totalElements
},
{
- href: '/elements/docs/metrics/testing-and-performance/',
+ href: '/docs/metrics/testing-and-performance/',
title: 'Total Automated Tests',
label: 'View automated test results',
metricCount: totalAutomatedTests
},
{
- href: '/elements/docs/metrics/testing-and-performance/',
+ href: '/docs/metrics/testing-and-performance/',
title: 'Unit Tests',
label: 'View our unit test suite',
metricCount: totalUnitTests
},
{
- href: '/elements/docs/metrics/testing-and-performance/',
+ href: '/docs/metrics/testing-and-performance/',
title: '% Test Coverage',
label: 'View our test coverage',
metricCount: `${Math.round(elementsTestCoverage)}%`
},
{
- href: '/elements/docs/metrics/testing-and-performance/',
+ href: '/docs/metrics/testing-and-performance/',
title: 'Axe Tests',
label: 'View Axe accessibility test results',
metricCount: totalAxeTests
},
{
- href: '/elements/docs/metrics/testing-and-performance/',
+ href: '/docs/metrics/testing-and-performance/',
title: 'Lighthouse Test Suites',
label: 'View Lighthouse test results',
metricCount: totalLighthouseTests
},
{
- href: '/elements/docs/metrics/testing-and-performance/',
+ href: '/docs/metrics/testing-and-performance/',
title: 'Visual Regression Tests',
label: 'View visual test results',
metricCount: totalVisualTests
},
{
- href: '/elements/docs/metrics/testing-and-performance/',
+ href: '/docs/metrics/testing-and-performance/',
title: 'SSR Tests',
label: 'View SSR test results',
metricCount: totalSsrTests
diff --git a/projects/site/src/docs/about/contributions.md b/projects/site/src/docs/about/contributions.md
index 2f6b5df82..92b6a0941 100644
--- a/projects/site/src/docs/about/contributions.md
+++ b/projects/site/src/docs/about/contributions.md
@@ -59,9 +59,9 @@ The main focus is to enable you to deliver value to your users.
2. **Design Review**: The initial MVP design passes review and is ready for implementation.
-3. **Implementation**: Provide a API proposal spec on the component adhering to the [coding and API guidelines](./docs/api-design/)
+3. **Implementation**: Provide a API proposal spec on the component adhering to the [coding and API guidelines](/docs/api-design/)
-4. **Code and Design Quality**: New components should maintain a high standard of code quality and adhere to the [coding and API guidelines](./docs/api-design/)
+4. **Code and Design Quality**: New components should maintain a high standard of code quality and adhere to the [coding and API guidelines](/docs/api-design/)
5. **Unit Testing**: As with other contributions, all new components should have appropriate unit tests to verify their functionality and performance.
diff --git a/projects/site/src/docs/about/migration.md b/projects/site/src/docs/about/migration.md
index 7ba9f53de..14727ae9f 100644
--- a/projects/site/src/docs/about/migration.md
+++ b/projects/site/src/docs/about/migration.md
@@ -89,7 +89,7 @@ Replace import paths throughout your source code:
## Deprecations & Removals
-The following are the active deprecations. Each next major release removes the prior deprecations. Read more about the versioning and deprecation cycle policy.
+The following are the active deprecations. Each next major release removes the prior deprecations. Read more about the versioning and deprecation cycle policy.
### Logo
diff --git a/projects/site/src/docs/elements/dialog.md b/projects/site/src/docs/elements/dialog.md
index 72d4856fc..1e6497929 100644
--- a/projects/site/src/docs/elements/dialog.md
+++ b/projects/site/src/docs/elements/dialog.md
@@ -9,7 +9,7 @@
## Installation
-Learn more about native [Popover APIs](docs/foundations/popovers/).
+Learn more about native [Popover APIs](/docs/foundations/popovers/).
{% install 'nve-dialog' %}
diff --git a/projects/site/src/docs/elements/drawer.md b/projects/site/src/docs/elements/drawer.md
index 15af6821b..85fe1a7d6 100644
--- a/projects/site/src/docs/elements/drawer.md
+++ b/projects/site/src/docs/elements/drawer.md
@@ -9,7 +9,7 @@
## Installation
-Learn more about native [Popover APIs](docs/foundations/popovers/).
+Learn more about native [Popover APIs](/docs/foundations/popovers/).
{% install 'nve-drawer' %}
diff --git a/projects/site/src/docs/elements/dropdown.md b/projects/site/src/docs/elements/dropdown.md
index 570358385..a39fb275e 100644
--- a/projects/site/src/docs/elements/dropdown.md
+++ b/projects/site/src/docs/elements/dropdown.md
@@ -9,7 +9,7 @@
## Installation
-Learn more about native [Popover APIs](docs/foundations/popovers/).
+Learn more about native [Popover APIs](/docs/foundations/popovers/).
{% install 'nve-dropdown' %}
diff --git a/projects/site/src/docs/elements/forms/index.md b/projects/site/src/docs/elements/forms/index.md
index 699ca44ba..f02e919e9 100644
--- a/projects/site/src/docs/elements/forms/index.md
+++ b/projects/site/src/docs/elements/forms/index.md
@@ -36,11 +36,11 @@ See the links below for specific integration patterns for the following framewor
- {% svg-logo 'lit' '20' %} Lit Integration
+ {% svg-logo 'lit' '20' %} Lit Integration
- {% svg-logo 'angular' '20' %} Angular Integration
+ {% svg-logo 'angular' '20' %} Angular Integration
diff --git a/projects/site/src/docs/elements/icon.md b/projects/site/src/docs/elements/icon.md
index 674d33845..f8568f155 100644
--- a/projects/site/src/docs/elements/icon.md
+++ b/projects/site/src/docs/elements/icon.md
@@ -14,7 +14,7 @@
The Iconography system exposes an SVG based icon library to the `nve-icon` element.
-See the searchable [Interactive Icon Catalog](./docs/foundations/iconography/)
+See the searchable [Interactive Icon Catalog](/docs/foundations/iconography/)
` element.
-[Icon Element Documentation](./docs/elements/icon/)
+[Icon Element Documentation](/docs/elements/icon/)
-
+
@@ -34,7 +34,7 @@ Foundations are the shared visual system behind every NVIDIA Elements interface.
-
+
@@ -47,7 +47,7 @@ Foundations are the shared visual system behind every NVIDIA Elements interface.
-
+
@@ -60,7 +60,7 @@ Foundations are the shared visual system behind every NVIDIA Elements interface.
-
+
@@ -73,7 +73,7 @@ Foundations are the shared visual system behind every NVIDIA Elements interface.
-
+
@@ -86,7 +86,7 @@ Foundations are the shared visual system behind every NVIDIA Elements interface.
-
+
@@ -99,7 +99,7 @@ Foundations are the shared visual system behind every NVIDIA Elements interface.
-
+
@@ -112,7 +112,7 @@ Foundations are the shared visual system behind every NVIDIA Elements interface.
-
+
diff --git a/projects/site/src/docs/foundations/layout/grid.md b/projects/site/src/docs/foundations/layout/grid.md
index ef922f458..c8de1ecd4 100644
--- a/projects/site/src/docs/foundations/layout/grid.md
+++ b/projects/site/src/docs/foundations/layout/grid.md
@@ -331,5 +331,5 @@ You can mix both approaches for the most flexibility. Items with explicit `span`
## Next Steps
-- Explore [horizontal](docs/foundations/layout/horizontal/) and [vertical](docs/foundations/layout/vertical/) layouts for simpler needs
-- Learn about [gap spacing](docs/foundations/layout/#gap-spacing) and [padding](docs/foundations/layout/#padding) options
+- Explore [horizontal](/docs/foundations/layout/horizontal/) and [vertical](/docs/foundations/layout/vertical/) layouts for simpler needs
+- Learn about [gap spacing](/docs/foundations/layout/#gap-spacing) and [padding](/docs/foundations/layout/#padding) options
diff --git a/projects/site/src/docs/foundations/layout/horizontal.md b/projects/site/src/docs/foundations/layout/horizontal.md
index 9b93b6dde..3369ac0ea 100644
--- a/projects/site/src/docs/foundations/layout/horizontal.md
+++ b/projects/site/src/docs/foundations/layout/horizontal.md
@@ -211,6 +211,6 @@ Horizontal layouts support alignment along both axes:
## Next Steps
-- Explore [vertical layouts](docs/foundations/layout/vertical/) for stacked content
-- Learn about [grid layouts](docs/foundations/layout/grid/) for two-dimensional control
-- Understand [gap](docs/foundations/layout/#gap-spacing) and [padding](docs/foundations/layout/#padding) spacing options
+- Explore [vertical layouts](/docs/foundations/layout/vertical/) for stacked content
+- Learn about [grid layouts](/docs/foundations/layout/grid/) for two-dimensional control
+- Understand [gap](/docs/foundations/layout/#gap-spacing) and [padding](/docs/foundations/layout/#padding) spacing options
diff --git a/projects/site/src/docs/foundations/layout/index.md b/projects/site/src/docs/foundations/layout/index.md
index f957fa763..d539fa4c1 100644
--- a/projects/site/src/docs/foundations/layout/index.md
+++ b/projects/site/src/docs/foundations/layout/index.md
@@ -60,9 +60,9 @@ npm install @nvidia-elements/styles @nvidia-elements/themes
The `nve-layout` attribute provides a unified API for three layout modes:
-- **[Horizontal Layout](docs/foundations/layout/horizontal/)** (`row`): Flexbox-based horizontal arrangements
-- **[Vertical Layout](docs/foundations/layout/vertical/)** (`column`): Flexbox-based vertical stacking
-- **[Grid Layout](docs/foundations/layout/grid/)** (`grid`): CSS Grid-based multi-dimensional layouts
+- **[Horizontal Layout](/docs/foundations/layout/horizontal/)** (`row`): Flexbox-based horizontal arrangements
+- **[Vertical Layout](/docs/foundations/layout/vertical/)** (`column`): Flexbox-based vertical stacking
+- **[Grid Layout](/docs/foundations/layout/grid/)** (`grid`): CSS Grid-based multi-dimensional layouts
Each layout mode supports spacing, alignment, and responsive behavior through a consistent syntax.
@@ -99,9 +99,9 @@ Each layout mode supports spacing, alignment, and responsive behavior through a
-Apply the `nve-layout` attribute to **native HTML elements** rather than Elements components. Use semantic HTML elements like ``, ``, `