fixup!

Author: avivkeller

package-lock.json

@@ -1,9 +1,9 @@
 import { buildSideBarProps } from './utils/buildBarProps.mjs';
 import buildContent from './utils/buildContent.mjs';
 import { getSortedHeadNodes } from './utils/getSortedHeadNodes.mjs';
-import { href } from '../../utils/file.mjs';
 import { groupNodesByModule } from '../../utils/generators.mjs';
 import { getRemarkRecma } from '../../utils/remark.mjs';
+import { href } from '../../utils/url.mjs';
 
 const remarkRecma = getRemarkRecma();
 

src/generators/jsx-ast/generate.mjs

@@ -19,9 +19,9 @@ import {
   visitTextWithUnixManualNode,
   visitYAML,
 } from './visitors.mjs';
-import { href } from '../../../utils/file.mjs';
 import { UNIST } from '../../../utils/queries/index.mjs';
 import { getRemark } from '../../../utils/remark.mjs';
+import { href } from '../../../utils/url.mjs';
 import { IGNORE_STABILITY_STEMS } from '../constants.mjs';
 
 // Creates an instance of the Remark processor with GFM support

src/generators/metadata/utils/parse.mjs

@@ -1,12 +1,12 @@
 import { randomUUID } from 'node:crypto';
-import { sep } from 'node:path/posix';
 
 import { jsx, toJs } from 'estree-util-to-js';
 import { transform } from 'lightningcss-wasm';
 
 import bundleCode from './bundle.mjs';
 import { createChunkedRequire } from './chunks.mjs';
 import { minifyHTML } from '../../../utils/html-minifier.mjs';
+import { href } from '../../../utils/url.mjs';
 import { SPECULATION_RULES } from '../constants.mjs';
 
 /**
@@ -113,16 +113,16 @@ export async function processJSXEntries(
   const results = await Promise.all(
     entries.map(async ({ data: { api, path, heading } }) => {
       const title = `${heading.data.name} | ${titleSuffix}`;
-
-      // The number of occurances is 1 less than the length of the split
-      // We also remove 1 `/`, as the path begins with a `/`
-      const root = '../'.repeat(path.split(sep).length - 2) || './';
+      const root = `${href('/', path)}/`;
 
       // Replace template placeholders with actual content
       const renderedHtml = template
         .replace('{{title}}', title)
         .replace('{{dehydrated}}', serverBundle.pages.get(`${api}.js`) ?? '')
-        .replace('{{importMap}}', clientBundle.importMap ?? '')
+        .replace(
+          '{{importMap}}',
+          clientBundle.importMap?.replaceAll('/', root) ?? ''
+        )
         .replace('{{entrypoint}}', `${api}.js?${randomUUID()}`)
         .replace('{{speculationRules}}', SPECULATION_RULES)
         .replace('{{ogTitle}}', title)

src/generators/web/utils/processing.mjs

@@ -18,25 +18,3 @@ export const writeFile = (file, ...args) =>
   fs
     .mkdir(dirname(file), { recursive: true })
     .then(() => fs.writeFile(file, ...args));
-
-/**
- * Kind of like `path.posix.relative`, however, this functions more like a URL resolution
- * @param {string} from
- * @param {string} to
- * @returns {string}
- */
-export const href = (to, from) => {
-  if (to.includes('://')) {
-    return to;
-  }
-
-  const a = to.split('/').filter(Boolean);
-  const b = from.split('/').slice(0, -1).filter(Boolean);
-
-  while (a[0] === b[0]) {
-    a.shift();
-    b.shift();
-  }
-
-  return [...b.map(() => '..'), ...a].join('/');
-};

src/utils/file.mjs

@@ -46,3 +46,26 @@ export const importFromURL = async url => {
 
   return imported.default ?? imported;
 };
+
+/**
+ * Kind of like `path.posix.relative`, however, this functions more like a URL resolution
+ * @param {string} from
+ * @param {string} to
+ * @returns {string}
+ */
+export const href = (to, from) => {
+  if (to.includes('://')) {
+    return to;
+  }
+
+  const a = to.split('/').filter(Boolean);
+  const b = from.split('/').slice(0, -1).filter(Boolean);
+
+  while (a[0] !== undefined && a[0] === b[0]) {
+    a.shift();
+    b.shift();
+  }
+
+  const rel = [...b.map(() => '..'), ...a].join('/');
+  return rel || '.';
+};