fix(tools): redirect demos based on filename

Author: bennypowers

tools/pfe-tools/dev-server/config.ts

@@ -23,6 +23,7 @@ import { join } from 'node:path';
 const replace = fromRollup(rollupReplace);
 
 type BaseConfig = DevServerConfig & PfeConfig;
+
 export interface PfeDevServerConfigOptions extends BaseConfig {
   hostname?: string;
   litcssOptions?: LitCSSOptions;

tools/pfe-tools/dev-server/plugins/dev-server-templates.ts

@@ -37,7 +37,17 @@ async function getDemos(config: PfeDevServerInternalConfig) {
             .getTagNames()
             .flatMap(tagName =>
               manifest.getDemoMetadata(tagName, config as PfeDevServerInternalConfig)
-                  .filter(demo => demo.filePath?.includes(tagName))));
+                  .filter(demo => demo.filePath?.includes(tagName))
+                  .map(demo => {
+                    if (demo.filePath?.endsWith(`${tagName}.html`) || demo.filePath?.endsWith('index.html')) {
+                      return {
+                        ...demo,
+                        permalink: dirname(demo.permalink),
+                      };
+                    } else {
+                      return demo;
+                    }
+                  })));
 }
 
 async function getTemplateContent(demo?: DemoRecord) {