Added styling for sitemap generator

dist/modules/seo/buildSitemapXml.d.ts

@@ -1,14 +1,25 @@
 import type { SitemapEntry } from './buildSitemapEntries.js';
+type BuildSitemapXmlOptions = {
+    /**
+     * URL of a CSS stylesheet to make the sitemap readable in the browser, e.g.
+     * '/sitemap.css'. Uses `type="text/css"` — the W3C "Associating Style Sheets
+     * with XML" mechanism, which is NOT deprecated (unlike XSLT / type="text/xsl",
+     * which Chrome/WebKit are removing). CSS on XML shows no warning, styles the
+     * raw tags directly (e.g. `url { display: block }` turns the wall of text into
+     * cards), and crawlers ignore the directive entirely.
+     */
+    cssUrl?: string;
+};
 /**
  * Serializes sitemap entries to a clean, indented XML STRING — valid for crawlers
- * and readable in the browser as the native XML tree (indented, collapsible,
- * syntax-highlighted by the browser itself).
+ * and (with `cssUrl`) styled in the browser via plain CSS.
  *
- * NO XSLT stylesheet: browsers (Chrome et al.) are REMOVING XSLT support, so a
- * <?xml-stylesheet?> approach is a dead end — it shows a deprecation warning now
- * and will break soon. Instead we serve plain XML with the correct Content-Type;
- * the browser renders its built-in formatted XML view (the "code tree" look) with
- * no transformation needed.
+ * Two viewing modes:
+ *  - No cssUrl → the browser's native formatted XML tree (indented, collapsible).
+ *  - With cssUrl → a `<?xml-stylesheet type="text/css">` directive; the project's
+ *    CSS styles the XML tags (cards, labels via ::before). NOT XSLT — that's being
+ *    removed from browsers and shows a deprecation warning. CSS is safe and
+ *    W3C-standard.
  *
  *   // app/sitemap.xml/route.ts
  *   import { buildSitemapXml } from '@intecion/ipal-kit'
@@ -16,16 +27,19 @@ import type { SitemapEntry } from './buildSitemapEntries.js';
  *   export const dynamic = 'force-dynamic'
  *   export async function GET() {
  *     const entries = await sitemap()
- *     const xml = buildSitemapXml(entries)
+ *     const xml = buildSitemapXml(entries, { cssUrl: '/sitemap.css' })
  *     return new Response(xml, {
  *       headers: { 'Content-Type': 'application/xml; charset=utf-8' },
  *     })
  *   }
  *
- * The indentation makes the raw XML pleasant to read; the browser's default XML
- * viewer adds the tree/fold UI. Crawlers read the XML as usual.
+ * Put sitemap.css in the project's /public and style the tags (see docs/seo.md
+ * for a starter). Note: <loc> is an XML tag, not <a href> — CSS can't make it a
+ * clickable link (some browsers auto-detect URLs); the win is readability, not
+ * clickability.
  *
- * NOTE: if you use this custom route, DON'T also keep app/sitemap.ts — pick one
- * (this route OR the Next MetadataRoute). Two sitemaps confuse crawlers.
+ * NOTE: if you use this custom route, DON'T also keep app/sitemap.ts — pick one.
+ * Two sitemaps confuse crawlers.
  */
-export declare function buildSitemapXml(entries: SitemapEntry[]): string;
+export declare function buildSitemapXml(entries: SitemapEntry[], opts?: BuildSitemapXmlOptions): string;
+export {};

dist/modules/seo/buildSitemapXml.js

@@ -1,13 +1,13 @@
 /**
  * Serializes sitemap entries to a clean, indented XML STRING — valid for crawlers
- * and readable in the browser as the native XML tree (indented, collapsible,
- * syntax-highlighted by the browser itself).
+ * and (with `cssUrl`) styled in the browser via plain CSS.
  *
- * NO XSLT stylesheet: browsers (Chrome et al.) are REMOVING XSLT support, so a
- * <?xml-stylesheet?> approach is a dead end — it shows a deprecation warning now
- * and will break soon. Instead we serve plain XML with the correct Content-Type;
- * the browser renders its built-in formatted XML view (the "code tree" look) with
- * no transformation needed.
+ * Two viewing modes:
+ *  - No cssUrl → the browser's native formatted XML tree (indented, collapsible).
+ *  - With cssUrl → a `<?xml-stylesheet type="text/css">` directive; the project's
+ *    CSS styles the XML tags (cards, labels via ::before). NOT XSLT — that's being
+ *    removed from browsers and shows a deprecation warning. CSS is safe and
+ *    W3C-standard.
  *
  *   // app/sitemap.xml/route.ts
  *   import { buildSitemapXml } from '@intecion/ipal-kit'
@@ -15,18 +15,21 @@
  *   export const dynamic = 'force-dynamic'
  *   export async function GET() {
  *     const entries = await sitemap()
- *     const xml = buildSitemapXml(entries)
+ *     const xml = buildSitemapXml(entries, { cssUrl: '/sitemap.css' })
  *     return new Response(xml, {
  *       headers: { 'Content-Type': 'application/xml; charset=utf-8' },
  *     })
  *   }
  *
- * The indentation makes the raw XML pleasant to read; the browser's default XML
- * viewer adds the tree/fold UI. Crawlers read the XML as usual.
+ * Put sitemap.css in the project's /public and style the tags (see docs/seo.md
+ * for a starter). Note: <loc> is an XML tag, not <a href> — CSS can't make it a
+ * clickable link (some browsers auto-detect URLs); the win is readability, not
+ * clickability.
  *
- * NOTE: if you use this custom route, DON'T also keep app/sitemap.ts — pick one
- * (this route OR the Next MetadataRoute). Two sitemaps confuse crawlers.
- */ export function buildSitemapXml(entries) {
+ * NOTE: if you use this custom route, DON'T also keep app/sitemap.ts — pick one.
+ * Two sitemaps confuse crawlers.
+ */ export function buildSitemapXml(entries, opts = {}) {
+    const { cssUrl } = opts;
     const esc = (s)=>s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
     const urls = entries.map((e)=>{
         const parts = [
@@ -36,12 +39,8 @@
             const iso = e.lastModified instanceof Date ? e.lastModified.toISOString() : String(e.lastModified);
             parts.push(`    <lastmod>${esc(iso)}</lastmod>`);
         }
-        if (e.changeFrequency) {
-            parts.push(`    <changefreq>${e.changeFrequency}</changefreq>`);
-        }
-        if (typeof e.priority === 'number') {
-            parts.push(`    <priority>${e.priority}</priority>`);
-        }
+        if (e.changeFrequency) parts.push(`    <changefreq>${e.changeFrequency}</changefreq>`);
+        if (typeof e.priority === 'number') parts.push(`    <priority>${e.priority}</priority>`);
         const alternates = e.alternates?.languages;
         if (alternates) {
             for (const [lang, href] of Object.entries(alternates)){
@@ -52,7 +51,8 @@
         }
         return `  <url>\n${parts.join('\n')}\n  </url>`;
     }).join('\n');
-    return `<?xml version="1.0" encoding="UTF-8"?>\n` + `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" ` + `xmlns:xhtml="http://www.w3.org/1999/xhtml">\n` + urls + `\n</urlset>`;
+    const stylesheet = cssUrl ? `<?xml-stylesheet type="text/css" href="${esc(cssUrl)}"?>\n` : '';
+    return `<?xml version="1.0" encoding="UTF-8"?>\n` + stylesheet + `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" ` + `xmlns:xhtml="http://www.w3.org/1999/xhtml">\n` + urls + `\n</urlset>`;
 }
 
 //# sourceMappingURL=buildSitemapXml.js.map