diff --git a/projects/site/public/static/images/social-card.png b/projects/site/public/static/images/social-card.png
index 54dbd8987..a728358b2 100644
Binary files a/projects/site/public/static/images/social-card.png and b/projects/site/public/static/images/social-card.png differ
diff --git a/projects/site/public/static/images/social-card.svg b/projects/site/public/static/images/social-card.svg
index 6d88c4333..7f7c2f686 100644
--- a/projects/site/public/static/images/social-card.svg
+++ b/projects/site/public/static/images/social-card.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js
index 34c03165d..63c115bee 100644
--- a/projects/site/src/_11ty/layouts/common.js
+++ b/projects/site/src/_11ty/layouts/common.js
@@ -1,7 +1,7 @@
/* eslint-env node */
/* global process */
-import { ELEMENTS_PLAYGROUND_BASE_URL, ELEMENTS_REPO_BASE_URL } from '../utils/env.js';
+import { ELEMENTS_REPO_BASE_URL } from '../utils/env.js';
import { UPDATE_FEEDS } from '../plugins/updates-feed.js';
import { DEPLOYED_SITE_URL, getSiteUrl } from '../utils/site-url.js';
import {
@@ -159,89 +159,43 @@ export const renderDocsNav = data => /* html */ `
Getting Started
- Getting Started
+ Overview
Installation
CLI
MCP
Skills
Lint
+ What’s New
GitHub
-
-
- Integrations
- Getting Started
- Angular
- Bundles
- CDN
- Custom Elements
- Eleventy
- Golang
- HTMX + Go
- Hugo
- Import Maps
- Lit
- Lit Library
- MCP Apps
- NextJS
- Nuxt
- Pi
- Preact
- React
- SolidJS
- Sphinx
- Svelte
- TypeScript
- Vue
-
-
- About
- What’s New
- Changelog
- Metrics
- Support
- Accessibility
- Contributions
- Requests
- Migration
- Sitemap
-
-
-
- Foundations
- Overview
- Typography
- Iconography
-
- Themes
- Design Tokens
- Size & Space
- Objects
- Interactions
- Support
- Status
- Color
- Animation
- Fonts
- Layers
- Custom
-
-
- Layout
- Horizontal
- Vertical
- Grid
-
- Popovers
- i18n
- Visualization
- View Transitions
- DESIGN.md
+
+ Patterns
+ Overview
+ Agent
+ Authentication
+ Browse
+ Chat
+ Code
+ Dashboard
+ Editor
+ Empty States
+ Heatmap
+ Keyboard Shortcut
+ Logging
+ Media
+ Navigation
+ Onboarding
+ Panel
+ Responsive
+ Search
+ Subheader
+ Trend
-
+
Elements
+ Overview
Accordion
Alert
Avatar
@@ -256,7 +210,7 @@ export const renderDocsNav = data => /* html */ `
Color
Combobox
Copy Button
-
+
Datagrid
Getting Started
Integrations
@@ -294,7 +248,7 @@ export const renderDocsNav = data => /* html */ `
Dropdown Group
Dropzone
File
-
+
Format
Bytes
Datetime
@@ -302,7 +256,7 @@ export const renderDocsNav = data => /* html */ `
Relative Time
Truncate
-
+
Forms
Getting Started
Validation
@@ -318,7 +272,7 @@ export const renderDocsNav = data => /* html */ `
Logo
Markdown
Markdown CSS
-
+
Media
Controller
Pause Button
@@ -333,7 +287,7 @@ export const renderDocsNav = data => /* html */ `
Menu
Month
-
+
Monaco
Input
Diff Input
@@ -373,7 +327,7 @@ export const renderDocsNav = data => /* html */ `
Toolbar
Tooltip
Tree
-
+
Viewport
Viewport
Gridlines
@@ -383,30 +337,79 @@ export const renderDocsNav = data => /* html */ `
Week
-
- Patterns
- Agent
- Authentication
- Browse
- Chat
- Code
- Dashboard
- Editor
- Empty States
- Heatmap
- Keyboard Shortcut
- Logging
- Media
- Navigation
- Onboarding
- Panel
- Responsive
- Search
- Subheader
- Trend
+
+ Foundations
+ Overview
+ Typography
+ Iconography
+
+ Themes
+ Design Tokens
+ Size & Space
+ Objects
+ Interactions
+ Support
+ Status
+ Color
+ Animation
+ Fonts
+ Layers
+ Custom
+
+
+ Layout
+ Horizontal
+ Vertical
+ Grid
+
+ Popovers
+ i18n
+ Visualization
+ View Transitions
+ DESIGN.md
-
+
+ Integrations
+ Getting Started
+ Angular
+ Bundles
+ CDN
+ Custom Elements
+ Eleventy
+ Golang
+ HTMX + Go
+ Hugo
+ Import Maps
+ Lit
+ Lit Library
+ MCP Apps
+ NextJS
+ Nuxt
+ Pi
+ Preact
+ React
+ SolidJS
+ Sphinx
+ Svelte
+ TypeScript
+ Vue
+
+
+
+ About
+ What’s New
+ Changelog
+ Metrics
+ Support
+ Accessibility
+ Contributions
+ Requests
+ Migration
+ Sitemap
+
+
+
Labs
Responsive Layout
@@ -417,41 +420,43 @@ export const renderDocsNav = data => /* html */ `
Forms
-
- API Design
- Properties & Attributes
- Slots
- Registration
- CustomEvents
- Stateless
- Composition
- Styles
- Packaging
- Glossary
- Logs
-
-
-
- Internal Guidelines
- Agent Harness
- Agent Tooling
- Agent Ownership
- Documentation
- Examples
- TypeScript
- Testing
- Unit Testing
- Accessibility Testing
- Lighthouse Testing
- SSR Testing
- Visual Testing
- Troubleshooting
- Component Creation
-
-
-
- Internal Examples
- All Examples
+
+ Internal
+
+ API Design
+ Guidelines
+ Properties & Attributes
+ Slots
+ Registration
+ CustomEvents
+ Stateless
+ Composition
+ Styles
+ Packaging
+ Glossary
+ Logs
+
+
+ Guidelines
+ Agent Harness
+ Agent Tooling
+ Agent Ownership
+ Documentation
+ Examples
+ TypeScript
+ Testing
+ Unit Testing
+ Accessibility Testing
+ Lighthouse Testing
+ SSR Testing
+ Visual Testing
+ Troubleshooting
+ Component Creation
+
+
+ Examples
+ All Examples
+
`;
@@ -504,9 +509,10 @@ export function renderBasePageHeader(data) {
NV
NVIDIA Elements
-
- ${ELEMENTS_PLAYGROUND_BASE_URL ? /* html */ `` : ''}
-
+
+
+
+
System Themes
diff --git a/projects/site/src/_11ty/layouts/metadata.test.ts b/projects/site/src/_11ty/layouts/metadata.test.ts
index b83954169..a828ba1c3 100644
--- a/projects/site/src/_11ty/layouts/metadata.test.ts
+++ b/projects/site/src/_11ty/layouts/metadata.test.ts
@@ -526,18 +526,37 @@ describe('renderBasePageHeader', () => {
{ url: '/docs/about/support/', catalog: false, starters: false }
])('should link to the catalog and select the current header section on $url', ({ url, catalog, starters }) => {
const html = renderBasePageHeader({ page: { url } });
- const catalogButton = html.match(/]*)>Catalog<\/a>/);
- const startersButton = html.match(/]*)>Starters<\/a>/);
+ const elementsButton = html.match(/]*)>Elements<\/a>/);
+ const integrationsButton = html.match(/]*)>Integrations<\/a>/);
- expect(catalogButton?.[2]).toBe('/docs/elements/');
- expect(catalogButton?.[1].includes('selected')).toBe(catalog);
- expect(startersButton?.[2]).toBe('/docs/integrations/');
- expect(startersButton?.[1].includes('selected')).toBe(starters);
+ expect(elementsButton?.[2]).toBe('/docs/elements/');
+ expect(elementsButton?.[1].includes('selected')).toBe(catalog);
+ expect(integrationsButton?.[2]).toBe('/docs/integrations/');
+ expect(integrationsButton?.[1].includes('selected')).toBe(starters);
expect(html).toContain('NVIDIA Elements');
});
});
describe('renderDocsNav', () => {
+ it.each([
+ { url: '/examples/', internal: true, allExamples: true, button: false },
+ { url: '/examples/button/', internal: false, allExamples: false, button: false },
+ { url: '/docs/elements/button/examples/', internal: false, allExamples: false, button: true },
+ { url: '/docs/api-design/', internal: true, allExamples: false, button: false },
+ { url: '/docs/internal/guidelines/testing/', internal: true, allExamples: false, button: false },
+ { url: '/', internal: false, allExamples: false, button: false }
+ ])('should expand and select the current navigation section on $url', ({ url, internal, allExamples, button }) => {
+ const html = renderDocsNav({ page: { url } });
+ const internalNode = html.match(/]*)>\s*Internal<\/a>/);
+ const allExamplesNode = html.match(/]*)>All Examples<\/a>/);
+ const buttonNode = html.match(/]*)>Button<\/a>/);
+
+ expect(internalNode?.[1].includes('expanded')).toBe(internal);
+ expect(allExamplesNode?.[1].includes('highlighted')).toBe(allExamples);
+ expect(allExamplesNode?.[1].includes('selected')).toBe(allExamples);
+ expect(buttonNode?.[1].includes('highlighted selected')).toBe(button);
+ });
+
it.each(
['/docs/viewport/', '/docs/viewport/gridlines/', '/docs/viewport/minimap/', '/docs/viewport/zoom-range/'].flatMap(
component => ['', 'api/', 'examples/'].map(tab => `${component}${tab}`)
@@ -570,8 +589,10 @@ describe('renderDocsNav', () => {
it('should link the elements section label to the component catalog', () => {
const html = renderDocsNav({ page: { url: '/docs/elements/' } });
- expect(html).toContain('');
- expect(html).toContain('Elements');
+ expect(html).toMatch(/\s*Elements<\/a>/);
+ expect(html).toContain(
+ 'Overview'
+ );
expect(html).not.toContain('Elements');
});
});