chore(docs): add media docs support

coryrylan · coryrylan · commit f3906cbf0205 · 2026-05-18T10:57:19.000-05:00
- Added '@nvidia-elements/media' to the configuration and package.json.
- Updated Eleventy configuration to include public component documentation for media.
- Enhanced example URL generation to support media components.
- Refactored coverage calculation logic in API template for better clarity.
- Updated pnpm lockfile to reflect new dependencies and versions.

Signed-off-by: Cory Rylan &lt;crylan@nvidia.com&gt;
diff --git a/knip.config.js b/knip.config.js
@@ -24,6 +24,7 @@ export default {
     '@nvidia-elements/forms',
     '@nvidia-elements/lint',
     '@nvidia-elements/markdown',
+    '@nvidia-elements/media',
     '@nvidia-elements/styles',
     '@semantic-release/commit-analyzer',
     '@semantic-release/github',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/internals/eslint/README.md b/projects/internals/eslint/README.md
@@ -74,6 +74,7 @@ Applied to `src/**/*.ts`, `src/**/*.tsx`, test files, and `*.examples.ts`.
 **Source hygiene**
 
 - **`no-dead-code`**. Flags commented-out imports, exports, declarations, control-flow, and test blocks. The project currently sets this to `warn` during cleanup.
+- **`no-deep-class-inheritance`**. Limits class inheritance chains to two superclass hops by default, stopping at configured `allowedRoots` such as `HTMLElement` and `LitElement`.
 - **`require-spdx-header`**. Every source file must start with the two-line SPDX header (`SPDX-FileCopyrightText` copyright + `SPDX-License-Identifier: Apache-2.0`). The rule accepts any 4-digit year; auto-fix preserves an existing year and falls back to the current year only when inserting a header from scratch.
 
 ### Example rules (plugin `local-typescript`, files `**/*.examples.ts`)
diff --git a/projects/site/eleventy.config.js b/projects/site/eleventy.config.js
@@ -222,7 +222,7 @@ export default function (eleventyConfig) {
    * - Access the collection data in templates and layouts
    * - Sort and filter content based on frontmatter or other criteria
    *
-   * This collection includes all markdown files in src/docs/elements/, making component docs easily accessible throughout the site build process.
+   * This collection includes public component docs, making component metadata accessible throughout the site build process.
    *
    * Used by `../src/docs/elements/_tabs/api.11ty.js` to generate the API documentation page for each component.
    */
@@ -233,6 +233,7 @@ export default function (eleventyConfig) {
       'src/docs/elements/data-grid/index.md',
       'src/docs/code/*.md',
       'src/docs/monaco/*.md',
+      'src/docs/media/*.md',
       'src/docs/markdown/index.md'
     ]);
   });
diff --git a/projects/site/package.json b/projects/site/package.json
@@ -88,6 +88,8 @@
         "../forms/dist/**/*.examples.json",
         "../markdown/dist/**/*.js",
         "../markdown/dist/**/*.examples.json",
+        "../media/dist/**/*.js",
+        "../media/dist/**/*.examples.json",
         "../monaco/dist/**/*.js",
         "../monaco/dist/**/*.examples.json",
         "../internals/metadata/static/**",
@@ -121,6 +123,10 @@
           "script": "../markdown:build",
           "cascade": false
         },
+        {
+          "script": "../media:build",
+          "cascade": false
+        },
         {
           "script": "../monaco:build",
           "cascade": false
@@ -244,6 +250,7 @@
     "@nvidia-elements/forms": "workspace:*",
     "@nvidia-elements/lint": "workspace:*",
     "@nvidia-elements/markdown": "workspace:*",
+    "@nvidia-elements/media": "workspace:*",
     "@nvidia-elements/core": "workspace:*",
     "@nvidia-elements/monaco": "workspace:*",
     "@nvidia-elements/styles": "workspace:*",
diff --git a/projects/site/src/_11ty/layouts/docs.11ty.js b/projects/site/src/_11ty/layouts/docs.11ty.js
@@ -36,6 +36,7 @@ function getSection(url) {
     if (section === 'integrations') return 'integrations';
     if (section === 'foundations') return 'foundations';
     if (section === 'patterns') return 'patterns';
+    if (section === 'media') return 'elements';
     if (section === 'code' || section === 'monaco' || section === 'markdown') return 'code';
     if (section === 'labs') return 'labs';
     if (section === 'internal' || section === 'api-design') return 'internal';
diff --git a/projects/site/src/_11ty/templates/api.js b/projects/site/src/_11ty/templates/api.js
@@ -58,8 +58,7 @@ export function elementSummary(tag) {
   const element = elements.find(d => d.name === tag);
   const testReports = Object.values(tests.projects);
   const unitTestResults = testReports.flatMap(report => report.coverage.testResults);
-  const coverageTotal =
-    unitTestResults.find(result => result.file?.includes(tag.replace('nve-', '')))?.branches.pct ?? 0;
+  const coverageTotal = getElementCoverageTotal(tag, unitTestResults);
   const lighthouseResults = testReports
     .flatMap(report => report.lighthouse)
     .flatMap(result => result.testResults)
@@ -93,6 +92,18 @@ export function elementSummary(tag) {
   </section>`;
 }
 
+function getElementCoverageTotal(tag, unitTestResults) {
+  const elementName = tag.replace('nve-', '');
+  const implementationPath = `${elementName}/${elementName}.ts`;
+  const exactResult = unitTestResults.find(result => result.file === implementationPath);
+  const fileNameResult = unitTestResults.find(result => result.file?.endsWith(`/${elementName}.ts`));
+  const broadResult = unitTestResults.find(
+    result => result.file?.includes(elementName) && !result.file.endsWith('/define.ts')
+  );
+
+  return (exactResult ?? fileNameResult ?? broadResult)?.branches.pct;
+}
+
 /**
  * Generates the component support buttons section for a given custom element tag.
  * @param {string} tag - The component tag name
@@ -192,15 +203,16 @@ export function badgeStatus(status, container = '', content = '') {
  */
 export function badgeCoverage(value, container = '', content = '') {
   let status = 'unknown';
-  let formattedValue = value
+  const hasCoverage = Number.isFinite(value);
+  const formattedValue = hasCoverage
     ? new Intl.NumberFormat('default', {
         style: 'percent',
         minimumFractionDigits: 2,
         maximumFractionDigits: 2
       }).format(value / 100)
-    : null;
+    : 'unknown';
 
-  if (value !== undefined) {
+  if (hasCoverage) {
     if (value >= 90) {
       status = 'success';
     } else if (value >= 70) {
diff --git a/projects/site/src/docs/elements/_tabs/examples.11ty.js b/projects/site/src/docs/elements/_tabs/examples.11ty.js
@@ -26,12 +26,13 @@ export const data = {
   eleventyComputed: {
     noindex: data => data.component.data.hideExamplesTab || !data.component.data.tag
   },
-  // Generate URLs in the format /docs/elements/{component-name}/examples/ or /docs/code/{component-name}/examples/ or /docs/monaco/{component-name}/examples/
+  // Generate URLs in the format /docs/elements/{component-name}/examples/ or package-specific component docs paths.
   permalink: data => {
     const filePath = data.component.filePathStem;
     let dir = 'elements';
     if (filePath.includes('/code/')) dir = 'code';
     else if (filePath.includes('/monaco/')) dir = 'monaco';
+    else if (filePath.includes('/media/')) dir = 'media';
     else if (filePath.includes('/markdown/')) dir = '';
     return `/docs/${dir}/${data.component.fileSlug}/examples/`;
   }
diff --git a/projects/starters/eleventy-ssr/src/index.11ty.js b/projects/starters/eleventy-ssr/src/index.11ty.js
@@ -2,6 +2,9 @@
 
 import { ApiService, ExamplesService } from '@internals/metadata';
 
+const ssrPackageNames = ['@nvidia-elements/code', '@nvidia-elements/core', '@nvidia-elements/media'];
+const hasSsrEntrypoint = entrypoint => ssrPackageNames.some(packageName => entrypoint?.startsWith(`${packageName}/`));
+
 const elements = (await ApiService.getData()).data.elements;
 const examples = (await ExamplesService.getData())
   .filter(
@@ -14,10 +17,11 @@ const examples = (await ExamplesService.getData())
   )
   .map(example => {
     const element = elements.find(e => e.name === example.element && !e.manifest?.deprecated);
-    return element
+    const entrypoint = element?.manifest?.metadata?.entrypoint;
+    return element && hasSsrEntrypoint(entrypoint)
       ? {
           name: example.element,
-          entrypoint: element?.manifest?.metadata?.entrypoint,
+          entrypoint,
           template: example.template
             .replaceAll('<label>', '<label slot="label">')
             .replaceAll('<nve-control-message>', '<nve-control-message slot="messages">')
