add viewport to boilerplate, add fix for firefox flash on load

[squeep-html-template-helper] / lib / template-helper.js
diff --git a/lib/template-helper.js b/lib/template-helper.js

index 00937a0d554318e026b2083190379cead7eaa71c..c61958db9a31a67ae34b84dea72edfa6a4e125f0 100644 (file)
--- a/lib/template-helper.js
+++ b/lib/template-helper.js
@@ -70,6 +70,7 @@ function htmlHead(pagePathLevel, ctx, options) {
    } = options;
    return `\t<head>
  \t\t<meta charset="utf-8">
+\t\t<meta name="viewport" content="width=device-width,initial-scale=1">
  \t\t<link rel="stylesheet" href="${rootPathPfx}static/theme.css">
  \t\t<link rel="stylesheet" href="${rootPathPfx}static/custom.css">
  ${headElements.map((e) => '\t\t' + e).join('\n')}
@@ -91,8 +92,9 @@ function htmlBody(pagePathLevel, ctx, options, main = []) {
    const {
      bodyAttributes = {},
    } = options;
+  const firefoxFix = '\n<script>0</script>'; // This fixes a layout rendering flash on load in Firefox; do not know why this works, but it does.
    return `
-\t<body${elementAttributes(bodyAttributes)}>
+\t<body${elementAttributes(bodyAttributes)}>${firefoxFix}
  ${htmlHeader(pagePathLevel, ctx, options)}
  ${htmlMessages(ctx, options)}
  \t\t<main>
@@ -145,7 +147,7 @@ ${spacer}</nav>` : '';
   * @returns {String}
   */
  function htmlHeader(pagePathLevel, ctx, options) {
-  const rootPathPfx = '../'.repeat(Math.max(pagePathLevel - 1, 0));
+  const rootPathPfx = '../'.repeat(pagePathLevel);
    const {
      logoUrl = '',
      pageTitle = '',
@@ -281,9 +283,9 @@ ${UL(ctx.notifications, 1)}
   * @param {Object[]=} options.navLinks
   * @param {String[]=} options.footerEntries
   * @param {String=} options.errorHeading
- * @param {String=} options.errorContent
+ * @param {String[]=} options.errorContent
   * @param {String=} options.notificationHeading
- * @param {String=} options.notificationContent
+ * @param {String[]=} options.notificationContent
   * @param {String[]} main - contents
   * @returns {String}
   */