Fix a bug when adding a script or style from both a page and its template

Author: ivanreese

system/.prettierrc

@@ -68,22 +68,15 @@ function compileHtml(page: Page, pages: Page[]) {
   let html = template.body
 
   // Add extra CSS or scripts
-  frontmatter.styles ??= frontmatter.style ?? ""
-  frontmatter.styles += template.frontmatter.styles ?? template.frontmatter.style ?? ""
-  if (frontmatter.styles) {
-    for (const style of trimAll(frontmatter.styles.split(","))) {
-      const styleTag = `<link rel="stylesheet" href="${style}">`
-      html = html.replace("</head>", `${indent(styleTag)}\n</head>`)
-    }
-  }
-  frontmatter.scripts ??= frontmatter.script ?? ""
-  frontmatter.scripts += template.frontmatter.scripts ?? template.frontmatter.script ?? ""
-  if (frontmatter.scripts) {
-    for (const script of trimAll(frontmatter.scripts.split(","))) {
-      const scriptTag = `<script defer src="${script}"></script>`
-      html = html.replace("</body>", `${indent(scriptTag)}\n</body>`)
-    }
-  }
+  // We accept both the singular and the plural, from both the page and the template
+  let styles = [frontmatter.styles, frontmatter.style, template.frontmatter.styles, template.frontmatter.style]
+  let scripts = [frontmatter.scripts, frontmatter.script, template.frontmatter.scripts, template.frontmatter.script]
+  // combine and then filter empty values
+  styles = trimAll(styles.join(",").split(",")).filter((v) => v)
+  scripts = trimAll(scripts.join(",").split(",")).filter((v) => v)
+  // insert at the end of the head
+  for (const style of styles) html = html.replace("</head>", `  <link rel="stylesheet" href="${style}">\n</head>`)
+  for (const script of scripts) html = html.replace("</head>", `  <script defer src="${script}"></script>\n</head>`)
 
   html = expandMacros(html, page, pages)
 

system/compile-page.ts

@@ -11,7 +11,7 @@ export const unique = <T>(arr: T[]) => Array.from(new Set(arr))
 type Existing<T> = T extends null | undefined | void ? never : T
 export const compact = <T>(arr: (T | null)[]): Existing<T>[] => arr.filter(nonnull)
 export const nonnull = <T>(v: T): v is Existing<T> => v != null
-export const indent = (str: string, spaces = "  ") => splitLines(str).map((line) => spaces + line).join("\n") // prettier-ignore
+export const indent = (str = "", spaces = "  ") => splitLines(str).map((line) => spaces + line).join("\n") // prettier-ignore
 export const splitOnce = (str: string, sep: string) => {
   const i = str.indexOf(sep)
   return i === -1 ? [str] : [str.slice(0, i), str.slice(i + sep.length)]