fix(docs): iframe example paths

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

Author: coryrylan

projects/site/package.json

@@ -201,7 +201,7 @@
  ]
  },
 "test": {
-"command": "vitest run src/_11ty/layouts/metadata.test.ts src/_11ty/layouts/links.test.ts src/_11ty/transforms/site-urls.test.ts src/_11ty/shortcodes/api.test.ts src/_11ty/plugins/llms-txt.test.ts src/_11ty/plugins/sitemap-xml.test.ts src/docs/metrics/api-status.test.ts",
+"command": "vitest run src/_11ty/layouts/metadata.test.ts src/_11ty/layouts/links.test.ts src/_11ty/transforms/site-urls.test.ts src/_11ty/shortcodes/api.test.ts src/_11ty/shortcodes/example.test.ts src/_11ty/plugins/llms-txt.test.ts src/_11ty/plugins/sitemap-xml.test.ts src/docs/metrics/api-status.test.ts src/examples/index.test.ts",
 "files": [
 "src/**/*.js",
 "src/**/*.md",

projects/site/src/_11ty/shortcodes/example.js

@@ -66,7 +66,7 @@ export async function exampleShortcode(
 consttemplateContent=example?.template.replace(/\n\n/g,'\n');
 constreload=globalThis.process.env.ELEVENTY_RUN_MODE==='serve' ? reloadScript(example,canvasId) : '';
 constinlineTemplate=/* html */`<div id="${canvasId}_content">${templateContent}</div>${reload}`;
-constiframeTemplate=/* html */`<iframe loading="lazy" src="examples/${example?.permalink}index.html" style="height: 100%; width: 100%; border: none;"></iframe>`;
+constiframeTemplate=/* html */`<iframe loading="lazy" src="/examples/${example?.permalink}index.html" style="height: 100%; width: 100%; border: none;"></iframe>`;
 consttemplate=config.inline ? inlineTemplate : iframeTemplate;
 constsummary=markdown
 .render(example.description||example.summary||'')

projects/site/src/_11ty/shortcodes/example.test.ts

@@ -0,0 +1,48 @@
+import{afterEach,describe,expect,it,vi}from'vitest';
+
+constpatternExample={
+id: 'pattern-chat-popover-chat',
+name: 'PopoverChat',
+template: '<nve-dialog></nve-dialog>',
+summary: 'Bottom-right anchored chat dialog with launcher button.',
+description: '',
+tags: ['pattern'],
+entrypoint: '@internals/patterns/chat.examples.json',
+element: 'nve-patterns',
+elementName: 'patterns',
+permalink: '@internals/patterns/chat-pattern-chat-popover-chat/'
+};
+
+asyncfunctionimportShortcode(){
+vi.resetModules();
+vi.doMock('../../index.11tydata.js',()=>({
+siteData: {
+examples: [patternExample]
+}
+}));
+vi.doMock('@internals/tools/playground',()=>({
+PlaygroundService: {
+create: vi.fn().mockResolvedValue('')
+}
+}));
+
+returnimport('./example.js');
+}
+
+afterEach(()=>{
+vi.doUnmock('../../index.11tydata.js');
+vi.doUnmock('@internals/tools/playground');
+});
+
+describe('exampleShortcode',()=>{
+it('should render iframe examples from the root examples route',async()=>{
+const{ exampleShortcode }=awaitimportShortcode();
+
+consthtml=awaitexampleShortcode('@internals/patterns/chat.examples.json','PopoverChat',{
+inline: false
+});
+
+expect(html).toContain('src="/examples/@internals/patterns/chat-pattern-chat-popover-chat/index.html"');
+expect(html).not.toContain('/docs/patterns/chat/examples/');
+});
+});

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

@@ -20,8 +20,31 @@ function escapeAttr(value) {
 .replace(/'/g,''');
 }
 
-functiongetCanonicalUrl(example){
-constpath=example.elementName ? `/docs/elements/${example.elementName}/examples/` : '/examples/';
+functiongetPatternName(example){
+returnexample.entrypoint?.match(/^@internals\/patterns\/([^/]+)\.examples\.json$/)?.[1]??null;
+}
+
+exportfunctiongetCanonicalPath(example){
+constpatternName=getPatternName(example);
+
+if(patternName)return`/docs/patterns/${patternName}/`;
+if(example.elementName)return`/docs/elements/${example.elementName}/examples/`;
+
+return'/examples/';
+}
+
+exportfunctiongetDocumentationPath(example){
+constpatternName=getPatternName(example);
+
+if(patternName)return`/docs/patterns/${patternName}/`;
+if(example.elementName)return`/docs/elements/${example.elementName}/`;
+
+return'/examples/';
+}
+
+exportfunctiongetCanonicalUrl(example){
+constpath=getCanonicalPath(example);
+
 return`${SITE_ORIGIN}${PATH_PREFIX}${path}`;
 }
 
@@ -67,7 +90,7 @@ export async function render(data) {
  <body data-pagefind-ignore="all">
  <div id="iframe-links" nve-layout="row gap:sm align:right" hidden>
  <a href="${awaitPlaygroundService.create({template: data.example.template,name: data.example.id})}" target="_blank" nve-text="link body sm">playground &#8599;</a>
- <a href="/docs/elements/${data.example.elementName}/" target="_blank" nve-text="link body sm">documentation &#8599;</a>
+ <a href="${getDocumentationPath(data.example)}" target="_blank" nve-text="link body sm">documentation &#8599;</a>
  </div>
  <div id="example-container" data-element="${data.example.id}">
 ${data.example.template}

projects/site/src/examples/index.test.ts

@@ -0,0 +1,56 @@
+import{afterEach,describe,expect,it,vi}from'vitest';
+
+interfaceExample{
+elementName?: string;
+entrypoint?: string;
+}
+
+asyncfunctionimportExamplePage(){
+vi.resetModules();
+vi.stubEnv('ELEMENTS_SITE_URL','https://nvidia.github.io');
+vi.stubEnv('PAGES_BASE_URL','/elements/');
+vi.doMock('../index.11tydata.js',()=>({
+siteData: {
+BASE_URL: '/elements/',
+examples: []
+}
+}));
+vi.doMock('@internals/tools/playground',()=>({
+PlaygroundService: {
+create: vi.fn().mockResolvedValue('')
+}
+}));
+
+returnimport('./index.11ty.js');
+}
+
+afterEach(()=>{
+vi.unstubAllEnvs();
+vi.doUnmock('../index.11tydata.js');
+vi.doUnmock('@internals/tools/playground');
+});
+
+describe('example page urls',()=>{
+it('should point pattern examples at pattern documentation',async()=>{
+const{ getCanonicalPath, getCanonicalUrl, getDocumentationPath }=awaitimportExamplePage();
+constexample: Example={
+elementName: 'patterns',
+entrypoint: '@internals/patterns/subheader.examples.json'
+};
+
+expect(getCanonicalPath(example)).toBe('/docs/patterns/subheader/');
+expect(getDocumentationPath(example)).toBe('/docs/patterns/subheader/');
+expect(getCanonicalUrl(example)).toBe('https://nvidia.github.io/elements/docs/patterns/subheader/');
+});
+
+it('should keep component examples pointed at component documentation',async()=>{
+const{ getCanonicalPath, getDocumentationPath }=awaitimportExamplePage();
+constexample: Example={
+elementName: 'button',
+entrypoint: '@nvidia-elements/core/button/button.examples.json'
+};
+
+expect(getCanonicalPath(example)).toBe('/docs/elements/button/examples/');
+expect(getDocumentationPath(example)).toBe('/docs/elements/button/');
+});
+});