fix(tools): windows paths

Author: bennypowers

docs/components/demos.11tydata.cjs

@@ -1,24 +1,9 @@
-const { dirname } = require('path');
 module.exports = {
   templateEngineOverride: 'njk',
   permalink: '{{ demo.permalink }}',
   pagination: {
     data: 'demos',
     alias: 'demo',
     size: 1,
-    // somehow the main pf-icon demo is being printed twice.
-    // so we'll group by tag name, and only take the first of each.
-    before: demos => Object.values(Object.groupBy(demos
-        .filter(demo => demo.permalink?.includes(demo.tagName))
-        .map(demo => {
-          if (demo.filePath?.endsWith(`${demo.tagName}.html`)) {
-            return {
-              ...demo,
-              permalink: `${dirname(demo.permalink)}/`,
-            };
-          } else {
-            return demo;
-          }
-        }), demo => demo.tagName)).map(([x]) => x),
   },
 };

tools/pfe-tools/11ty/plugins/custom-elements-manifest.cjs

@@ -1,5 +1,5 @@
 // @ts-check
-const { join } = require('node:path');
+const { join, sep } = require('node:path');
 const { existsSync } = require('node:fs');
 const { glob } = require('glob');
 const { stat, rm } = require('node:fs/promises');
@@ -63,7 +63,7 @@ module.exports = function configFunction(eleventyConfig, pluginOpts = {}) {
     const options = { ...getPfeConfig(), ...pluginOpts };
     if (runMode === 'build') {
       const files = await glob(`${dir.output}/${options.site.componentSubpath}/*/demo/*`);
-      const htmls = files.filter(x => x.endsWith('.html') && !x.endsWith('/index.html'));
+      const htmls = files.filter(x => x.endsWith('.html') && !x.endsWith(`${sep}index.html`));
       for (const file of htmls) {
         const dir = file.replace(/\.html$/, '');
         if (await isDir(dir)) {
@@ -77,7 +77,7 @@ module.exports = function configFunction(eleventyConfig, pluginOpts = {}) {
   //            components/jazz-hands/demo/special-name/index.html
   // Here, we rewrite the subresource links so they point to the right files.
   eleventyConfig.addTransform('reroute-special-demo-subresources', function(content) {
-    if (this.inputPath.endsWith('/demos.html')) {
+    if (this.inputPath.endsWith(`${sep}demos.html`)) {
       const [, one, , three, four] = this.outputPath.split('/');
       if (one === 'components' && three === 'demo' && four !== 'index.html') {
         const cheerio = require('cheerio');

tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts

@@ -16,7 +16,7 @@ import type {
   Slot,
 } from 'custom-elements-manifest/schema';
 
-import { join, normalize } from 'node:path';
+import path, { join, normalize } from 'node:path';
 import { readFileSync } from 'node:fs';
 
 import { getAllPackages } from './get-all-packages.js';
@@ -317,7 +317,7 @@ export class Manifest {
       const filePath =
         demo.source?.href.replace(
           options.sourceControlURLPrefix,
-          `${join(options.rootDir, options.elementsDir)}/`,
+          `${join(normalize(options.rootDir), normalize(options.elementsDir))}${path.sep}`,
         ) ?? '';
       const [last = ''] = filePath.split('/').reverse();
       const filename = last.replace('.html', '');

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

@@ -3,7 +3,7 @@ import type { DemoRecord } from '../../custom-elements-manifest/lib/Manifest.js'
 import type { Context, Next } from 'koa';
 
 import { readFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
+import path, { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import nunjucks from 'nunjucks';
@@ -39,8 +39,7 @@ async function getDemos(config: PfeDevServerInternalConfig) {
               manifest.getDemoMetadata(tagName, config as PfeDevServerInternalConfig)
                   .filter(demo => demo.filePath?.includes(tagName))
                   .map(demo => {
-                    if (demo.filePath?.endsWith(`${tagName}.html`)
-                    || demo.filePath?.endsWith('/index.html')) {
+                    if (demo.filePath?.endsWith(`${path.sep}index.html`)) {
                       return {
                         ...demo,
                         permalink: `${dirname(demo.permalink)}/`,