chore(docs): fixup metadata issues

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/site/public/robots.txt

@@ -1,6 +1,5 @@
 User-agent: *
 Allow: /
-Disallow: /assets/
 Disallow: /.pagefind/
 
-Sitemap: https://nvidia.github.io/elements/sitemap.xml
+Sitemap: https://nvidia.github.io/elements/sitemap.xml

projects/site/src/_11ty/layouts/common.js

@@ -11,10 +11,11 @@ import { escapeAttr, resolvePageMeta, renderJsonLd, BASE_URL } from './metadata.
 export const renderBaseHead = data => {
   const meta = resolvePageMeta(data);
   const ogType = meta.url === '/' ? 'website' : 'article';
+  const robots = data.noindex ? 'noindex,follow' : 'all';
   return /* html */ `
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="robots" content="all">
+  <meta name="robots" content="${robots}">
   <base href="${BASE_URL}" />
   <title data-pagefind-meta="title">${escapeAttr(meta.title)}</title>
   <meta name="description" content="${escapeAttr(meta.description)}">

projects/site/src/_11ty/layouts/metadata.js

@@ -57,9 +57,38 @@ function findElementByTag(tag) {
   return siteData.elements.find(e => e.name === tag) ?? null;
 }
 
+function appendSiteName(title) {
+  if (title === 'NVIDIA Elements' || title.endsWith(' | NVIDIA Elements')) return title;
+  return `${title} | NVIDIA Elements`;
+}
+
+function resolveSectionTitle(data, title) {
+  const url = data.page?.url ?? '';
+  if (url === '/examples/') return 'Example Gallery';
+  if (url.startsWith('/docs/internal/guidelines/')) return `${title} Guidelines`;
+  if (url.startsWith('/docs/integrations/')) return `${title} Integration`;
+  if (url.startsWith('/docs/foundations/themes/')) return `Theme ${title}`;
+  if (url.startsWith('/docs/labs/layout/responsive/patterns/')) return 'Responsive Layout Patterns';
+  if (url.startsWith('/docs/labs/') && !url.startsWith('/docs/labs/layout/')) return `${title} Lab`;
+  return title;
+}
+
+function resolvePageTitle(data, title) {
+  if (data.changelog?.title) return appendSiteName(`${data.changelog.title} Changelog`);
+  if (data.isApiTab) return appendSiteName(`${title} API`);
+  if (data.isExamplesTab) return appendSiteName(`${title} Examples`);
+  return appendSiteName(resolveSectionTitle(data, title));
+}
+
+function hasGeneratedPage(data, generatedUrls, url) {
+  if (!generatedUrls.size) return true;
+  return url === '/' || url === data.page?.url || generatedUrls.has(url);
+}
+
 export function resolvePageMeta(data) {
   const url = data.page?.url ?? '/';
-  const title = data.title ?? 'NVIDIA Elements';
+  const rawTitle = data.title ?? 'NVIDIA Elements';
+  const title = resolvePageTitle(data, rawTitle);
   const tag = data.tag ?? data.component?.data?.tag;
   const element = findElementByTag(tag);
   const componentDescription = element?.manifest?.description?.trim();
@@ -71,10 +100,12 @@ export function resolvePageMeta(data) {
     description = `${componentDescription} — API reference for <${tag}>.`;
   } else if (data.isExamplesTab && componentDescription) {
     description = `${componentDescription} — Interactive examples for <${tag}>.`;
+  } else if (data.changelog?.description) {
+    description = `Changelog for ${data.changelog.title}: ${data.changelog.description}`;
   } else if (componentDescription) {
     description = componentDescription;
   } else {
-    description = `Documentation for ${title} in NVIDIA Elements, the framework-agnostic design system for AI/ML factories.`;
+    description = `Documentation for ${rawTitle} in NVIDIA Elements, the framework-agnostic design system for AI/ML factories.`;
   }
 
   const canonicalUrl = `${SITE_ORIGIN}${PATH_PREFIX}${url}`;
@@ -90,6 +121,7 @@ export function renderJsonLd(data, meta) {
   const isDocs = meta.url.startsWith('/docs/');
   const articleType = isDocs ? 'TechArticle' : 'WebPage';
   const date = data.page?.date instanceof Date ? data.page.date.toISOString() : new Date().toISOString();
+  const generatedUrls = new Set(data.collections?.all?.map(entry => entry.url).filter(Boolean));
 
   const article = {
     '@context': 'https://schema.org',
@@ -116,11 +148,12 @@ export function renderJsonLd(data, meta) {
   let cumulative = '';
   segments.forEach((seg, i) => {
     cumulative += `/${seg}`;
+    const item = i === segments.length - 1 && !meta.url.endsWith('/') ? meta.url : `${cumulative}/`;
     itemListElement.push({
       '@type': 'ListItem',
       position: i + 2,
       name: titleCaseSegment(seg),
-      item: `${SITE_ORIGIN}${PATH_PREFIX}${cumulative}/`
+      ...(hasGeneratedPage(data, generatedUrls, item) ? { item: `${SITE_ORIGIN}${PATH_PREFIX}${item}` } : {})
     });
   });
 

projects/site/src/_11ty/plugins/llms-txt.js

@@ -3,18 +3,47 @@ import markdownIt from 'markdown-it';
 import { ApiService } from '@internals/tools/api';
 import { ExamplesService } from '@internals/tools/examples';
 import { skills } from '@internals/tools/skills';
-import { ELEMENTS_PAGES_BASE_URL } from '../utils/env.js';
+import { BASE_URL } from '../layouts/metadata.js';
+import { ELEMENTS_PAGES_BASE_URL, ELEMENTS_SITE_URL } from '../utils/env.js';
 
-const BASE = ELEMENTS_PAGES_BASE_URL || 'http://localhost:8082/elements';
+const SITE_ORIGIN = ELEMENTS_SITE_URL.replace(/\/$/, '');
+const PATH_PREFIX = BASE_URL.replace(/\/$/, '');
+const BASE = (ELEMENTS_PAGES_BASE_URL || `${SITE_ORIGIN}${PATH_PREFIX}`).replace(/\/$/, '');
 
 const md = markdownIt({ html: true, linkify: true, breaks: false });
+const relativeMarkdownUrlPattern = /\b(href|src)="((?!(?:[a-z][a-z\d+.-]*:|\/\/))[^"]+?)\.md(?=")/gi;
 const CSS = `:root{color-scheme:light dark}body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;max-width:48rem;margin:0 auto;padding:2rem 1rem 4rem;color:#1a1a1a;background:#fff}@media (prefers-color-scheme:dark){body{color:#e6e6e6;background:#111}a{color:#6ea8ff}code,pre{background:#222}hr,td,th{border-color:#333}}code,pre{background:#f3f3f3}nav.crumbs{margin-bottom:2rem;font-size:.875rem}nav.crumbs a{color:inherit;opacity:.7;text-decoration:none}nav.crumbs a:hover{opacity:1;text-decoration:underline}h1,h2,h3,h4,h5,h6{line-height:1.25;margin:2em 0 .5em}h1{font-size:2rem;margin-top:0}h2{font-size:1.5rem;border-bottom:1px solid currentColor;padding-bottom:.3em;opacity:.95}h3{font-size:1.2rem}ol,p,ul{margin:.75em 0}a{color:#0969da}code{font:0.9em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.1em .3em;border-radius:3px}pre{padding:1rem;border-radius:6px;overflow-x:auto}pre code{background:0 0;padding:0}table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.9em}td,th{border:1px solid #ddd;padding:.5em .75em;text-align:left;vertical-align:top}th{background:#f7f7f7}@media (prefers-color-scheme:dark){th{background:#1a1a1a}}blockquote{border-left:4px solid #ccc;margin:1em 0;padding:.25em 1em;opacity:.85}hr{border:0;border-top:1px solid #eee;margin:2em 0}`;
 
+function escapeAttr(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function getMarkdownMeta(markdown) {
+  const tokens = md.parse(markdown, {});
+  const titleIndex = tokens.findIndex(token => token.type === 'heading_open');
+  const descriptionIndex = tokens.findIndex(token => token.type === 'paragraph_open');
+  const title = titleIndex >= 0 ? tokens[titleIndex + 1]?.content : undefined;
+  const description = descriptionIndex >= 0 ? tokens[descriptionIndex + 1]?.content : undefined;
+
+  return {
+    title: title || 'Elements context',
+    description: description || 'NVIDIA Elements context fragment for AI and LLM tools.'
+  };
+}
+
 async function writeDoc(path, markdown) {
+  const meta = getMarkdownMeta(markdown);
+  const htmlUrl = `${path.replace('./.11ty-vite/public', BASE)}.html`;
   const nav = path.endsWith('context/index')
     ? ''
     : `<nav class="crumbs"><a href="${BASE}/context/index.html">← All context</a></nav>`;
-  const html = `<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="alternate" type="text/markdown" title="Markdown version" href="${path.replace('./.11ty-vite/public', BASE)}.md" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>Elements</title><style>${CSS}</style></head><body>${nav}<main>${md.render(markdown).replaceAll('.md"', '.html"')}</main></body></html>`;
+  const renderedMarkdown = md.render(markdown).replace(relativeMarkdownUrlPattern, '$1="$2.html');
+  const html = `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="robots" content="noindex,follow"><meta name="description" content="${escapeAttr(meta.description)}"><link rel="canonical" href="${htmlUrl}"><link rel="alternate" type="text/markdown" title="Markdown version" href="${path.replace('./.11ty-vite/public', BASE)}.md" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>${escapeAttr(meta.title)} | NVIDIA Elements context</title><style>${CSS}</style></head><body>${nav}<main>${renderedMarkdown}</main></body></html>`;
   await fsp.writeFile(`${path}.md`, markdown, 'utf-8');
   await fsp.writeFile(`${path}.html`, html, 'utf-8');
 }

projects/site/src/_11ty/plugins/sitemap-xml.js

@@ -5,6 +5,7 @@ import { ELEMENTS_SITE_URL } from '../utils/env.js';
 const SITE_ORIGIN = ELEMENTS_SITE_URL.replace(/\/$/, '');
 const PATH_PREFIX = BASE_URL.replace(/\/$/, '');
 const EXCLUDED_PREFIXES = ['/docs/changelog/', '/docs/metrics/', '/examples/', '/404'];
+const ROBOTS_NOINDEX = /<meta\s+[^>]*name=["']robots["'][^>]*content=["'][^"']*\bnoindex\b/i;
 
 function isPublishable(url) {
   if (!url) return false;
@@ -13,13 +14,17 @@ function isPublishable(url) {
   return true;
 }
 
+function isPublishableResult(result) {
+  if (!isPublishable(result.url) || result.data?.noindex || result.data?.component?.data?.hideExamplesTab) return false;
+  return !ROBOTS_NOINDEX.test(result.content ?? '');
+}
+
 export function sitemapPlugin(eleventyConfig) {
   eleventyConfig.on('eleventy.after', async ({ results } = {}) => {
-    const urls = [...new Set((results ?? []).map(r => r.url).filter(isPublishable))].sort();
-    const lastmod = new Date().toISOString();
+    const urls = [...new Set((results ?? []).filter(isPublishableResult).map(result => result.url))].sort();
     const entries = urls.map(url => {
       const loc = `${SITE_ORIGIN}${PATH_PREFIX}${url}`;
-      return ['<url>', `<loc>${loc}</loc>`, `<lastmod>${lastmod}</lastmod>`, '</url>'].join('\n');
+      return ['<url>', `<loc>${loc}</loc>`, '</url>'].join('\n');
     });
 
     const xml = [

projects/site/src/docs/about/migration.md

@@ -16,6 +16,14 @@
 
 This guide covers migrating from the internal `@nve/*` packages to the new open source `@nvidia-elements/*` packages.
 
+## Agent Skill
+
+Agents can leverage the migration skill by calling the skill from the Elements CLI or MCP.
+
+```shell
+nve skills.get migration
+```
+
 ## Overview
 
 The Elements Design System is now hosted and developed in a public GitHub repository. Packages are now published to the public npm registry under the `@nvidia-elements` scope. The component APIs, tag names, and theming system remain the same. The primary changes are package names, import paths, and registry configuration.

projects/site/src/docs/elements/_tabs/examples.11ty.js

@@ -23,6 +23,9 @@ export const data = {
     alias: 'component',
     addAllPagesToCollections: true
   },
+  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/
   permalink: data => {
     const filePath = data.component.filePathStem;
@@ -46,13 +49,16 @@ export async function render(data) {
   const element = elements.find(e => e.name === componentData.tag);
   const exampleTemplates = examples.filter(example => example.element === componentData.tag);
 
-  if (data.component.data.hideExamplesTab || !element) return '';
-
   data.tag = componentData.tag;
   data.title = componentData.title;
   data.page.fileSlug = componentData.page.fileSlug;
   data.isExamplesTab = true;
 
+  if (data.component.data.hideExamplesTab || !element) {
+    data.noindex = true;
+    return '';
+  }
+
   return /* html */ `
     <style scoped>
       .canvas-editable-container {

projects/site/src/examples/index.11ty.js

@@ -5,8 +5,25 @@
 import { PlaygroundService } from '@internals/tools/playground';
 import { renderGlobalsScript } from '../_11ty/layouts/common.js';
 import { siteData } from '../index.11tydata.js';
+import { ELEMENTS_SITE_URL } from '../_11ty/utils/env.js';
 
 const { BASE_URL, examples } = siteData;
+const SITE_ORIGIN = ELEMENTS_SITE_URL.replace(/\/$/, '');
+const PATH_PREFIX = BASE_URL.replace(/\/$/, '');
+
+function escapeAttr(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function getCanonicalUrl(example) {
+  const path = example.elementName ? `/docs/elements/${example.elementName}/examples/` : '/examples/';
+  return `${SITE_ORIGIN}${PATH_PREFIX}${path}`;
+}
 
 export const data = {
   title: 'Examples',
@@ -27,8 +44,11 @@ export async function render(data) {
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex,follow">
+    <meta name="description" content="${escapeAttr(data.example.summary || data.example.description || `${data.example.name} example for NVIDIA Elements.`)}">
+    <link rel="canonical" href="${getCanonicalUrl(data.example)}">
     <base href="${BASE_URL}" />
-    <title data-pagefind-meta="title">Example - ${data.example.permalink}</title>
+    <title data-pagefind-meta="title">${escapeAttr(data.example.name)} example | NVIDIA Elements</title>
     <style>
       @import '/examples/index.css';
     </style>

projects/site/src/index.md

@@ -1,16 +1,34 @@
 ---
 {
   title: 'Getting Started',
-  description: 'Get started with NVIDIA Elements: install Web Components, themes, and starter templates for building framework-agnostic UI for AI/ML factories.',
+  description: 'Get started with NVIDIA Elements Design System: framework-agnostic Web Components, design tokens, CLI, MCP, skills, and lint tooling for AV, robotics, and AI infrastructure.',
   layout: 'docs.11ty.js'
 }
 ---
 
 <div nve-layout="column gap:lg pad-top:lg">
   <h1 nve-text="display sm">Elements</h1>
-  <h2 nve-text="heading">The Design Language for AI/ML Factories, Robotics, and Autonomous Vehicles</h2>
+  <h2 nve-text="heading">The Design Language and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles</h2>
 </div>
-
+<nve-divider></nve-divider>
+<section nve-layout="grid gap:xl span-items:12 @md|span-items:6 @xl|span-items:3">
+  <div nve-layout="column gap:sm">
+    <p nve-text="label semibold">Built for AI Infrastructure</p>
+    <p nve-text="body sm muted">Operational UI for AI/ML workloads, autonomous vehicle tools, and robotics consoles.</p>
+  </div>
+  <div nve-layout="column gap:sm">
+    <p nve-text="label semibold">Framework Agnostic</p>
+    <p nve-text="body sm muted">Web Components run in React, Angular, Vue, Svelte, Lit, plain HTML, server-rendered templates, and mixed stacks.</p>
+  </div>
+  <div nve-layout="column gap:sm">
+    <p nve-text="label semibold">Agent-Ready Tooling</p>
+    <p nve-text="body sm muted"><a href="docs/cli/" nve-text="link no-visit">CLI</a> and <a href="docs/mcp/" nve-text="link no-visit">MCP</a> expose component APIs, tokens, examples, imports, validation, and setup to terminals and AI assistants.</p>
+  </div>
+  <div nve-layout="column gap:sm">
+    <p nve-text="label semibold">Stable API Contracts</p>
+    <p nve-text="body sm muted"><a href="docs/mcp/#skills" nve-text="link no-visit">Skills</a> and <a href="docs/lint/" nve-text="link no-visit">lint</a> guide authoring best practices, common UI patterns and automated static analysis.</p>
+  </div>
+</section>
 <nve-divider></nve-divider>
 
 ```shell
@@ -19,6 +37,9 @@ curl -fsSL {{ELEMENTS_PAGES_BASE_URL}}/install.sh | bash
 
 # create a new project
 nve project.create
+
+# configure dependencies and MCP tools
+nve project.setup
 ```
 
 <div nve-layout="grid gap:md span-items:12 @md|span-items:4">
@@ -57,22 +78,28 @@ import '@nvidia-elements/core/button/define.js';
 
 <section nve-layout="row gap:sm align:center align:wrap pad-x:md">
   <nve-button>
-    <a href="./docs/integrations/installation/"><nve-icon name="gear"></nve-icon> Installation</a>
+    <a href="./docs/integrations/installation/"><nve-icon name="gear"></nve-icon> Install</a>
+  </nve-button>
+  <nve-button>
+    <a href="docs/cli/"><nve-icon name="terminal"></nve-icon> CLI</a>
+  </nve-button>
+  <nve-button>
+    <a href="docs/mcp/"><nve-icon name="sparkles"></nve-icon> MCP</a>
   </nve-button>
   <nve-button>
-    <a href="docs/mcp/"><svg width="18" height="18"><use href="#cursor-svg"></use></svg> Add to Cursor</a>
+    <a href="docs/mcp/"><svg width="18" height="18"><use href="#cursor-svg"></use></svg> Cursor</a>
   </nve-button>
   <nve-button>
-    <a href="docs/mcp/"><svg width="18" height="18"><use href="#codex-svg"></use></svg> Add to Codex</a>
+    <a href="docs/mcp/"><svg width="18" height="18"><use href="#codex-svg"></use></svg> Codex</a>
   </nve-button>
   <nve-button>
-    <a href="docs/mcp/"><svg width="18" height="18"><use href="#claude-svg"></use></svg> Add to Claude</a>
+    <a href="docs/mcp/"><svg width="18" height="18"><use href="#claude-svg"></use></svg> Claude</a>
   </nve-button>
   <nve-button>
     <a href="{{ELEMENTS_REPO_BASE_URL}}" target="_blank"><nve-icon name="fork"></nve-icon> GitHub</a>
   </nve-button>
   <nve-button>
-    <a href="https://registry.npmjs.org" target="_blank"><nve-icon name="archive" style="--color: var(--nve-sys-accent-primary-background)"></nve-icon> npm Package</a>
+    <a href="https://www.npmjs.com/package/@nvidia-elements/core" target="_blank"><nve-icon name="archive"></nve-icon> npm</a>
   </nve-button>
   <nve-button>
     <a href="./docs/integrations/typescript/"><svg width="18" height="18"><use href="#typescript-svg"></use></svg> TypeScript</a>