@forsakringskassan/docs-generator 2.10.0 → 2.11.0

package/dist/index.d.ts

@@ -329,7 +329,7 @@ export declare interface MOTDOptions {
     /** Name of the container to render content in. */
     container?: string;
     /** Message to display */
-    message: string;
+    message?: string;
 }
 
 /**
@@ -523,7 +523,16 @@ export declare function searchProcessor(): Processor;
  *
  * @public
  */
-export declare function selectableVersionProcessor(pkg: PackageJson, container: string, options?: ProcessorOptions): Processor;
+export declare function selectableVersionProcessor(pkg: PackageJson, container: string, options?: SelectableVersionProcessorOptions): Processor;
+
+/**
+ * Options for {@link selectableVersionProcessor#}.
+ *
+ * @public
+ */
+export declare interface SelectableVersionProcessorOptions extends ProcessorOptions {
+    readonly message?: string;
+}
 
 /**
  * Options passed from the example compiler to the `setup` function.

package/dist/index.js

@@ -358,7 +358,8 @@ function manifestProcessor(options = {}) {
 function normalizeOptions(options) {
   const defaults = {
     enabled: true,
-    container: "body:begin"
+    container: "body:begin",
+    message: void 0
   };
   return { ...defaults, ...options };
 }
@@ -367,14 +368,30 @@ function motdProcessor(options) {
   return {
     name: "motd-processor",
     after: "generate-docs",
+    runtime: [{ src: "src/runtime/motd/index.ts" }],
     handler(context) {
       if (!enabled) {
         return;
       }
-      context.addTemplateBlock(container, "version-banner", {
-        filename: "partials/version-banner.html",
-        data: { message }
+      const useLegacyTemplate = context.hasTemplate(
+        "partials/version-banner.html"
+      );
+      const data = {
+        message
+      };
+      context.addTemplateBlock(container, "motd-container", {
+        filename: "partials/motd-container.njk.html",
+        data: useLegacyTemplate ? void 0 : data
       });
+      if (useLegacyTemplate) {
+        console.warn(
+          `[deprecated] using the "partial/version-banner.html" template for motdProcessor is deprecated`
+        );
+        context.addTemplateBlock(container, "version-banner", {
+          filename: "partials/version-banner.html",
+          data
+        });
+      }
     }
   };
 }
@@ -413,13 +430,19 @@ function themeSelectProcessor() {
 }
 
 function selectableVersionProcessor(pkg, container, options) {
-  const { enabled = true } = options ?? {};
+  const { enabled = true, message = "Det finns en nyare version" } = options ?? {};
   return {
     name: "selectable-version-processor",
     after: "generate-docs",
     runtime: [
       {
-        src: "src/runtime/select-version.ts"
+        src: "src/runtime/select-version.ts",
+        buildOptions: {
+          define: {
+            __PKG_VERSION__: JSON.stringify(pkg.version),
+            __MESSAGE__: JSON.stringify(message)
+          }
+        }
       }
     ],
     handler(context) {

package/dist/processors/motd.js

@@ -0,0 +1,39 @@
+"use strict";
+
+// src/runtime/motd/motd.ts
+var container = document.querySelector("#motd-container");
+function showMessage(root, container2, message) {
+  const { template: id = "motd-message" } = message;
+  const selector = `template#${id}`;
+  const template = root.querySelector(selector);
+  if (!template) {
+    throw new Error(`MOTD template element with id "${id}" not found!`);
+  }
+  const wrapper = template.content.cloneNode(true);
+  const bindings = {
+    message: message.message,
+    ...message.bindings
+  };
+  for (const element of wrapper.querySelectorAll(
+    "[data-bind]"
+  )) {
+    const key = element.dataset.bind;
+    const value = bindings[key] ?? "";
+    element.innerHTML = value;
+    element.removeAttribute("data-bind");
+  }
+  if (message.preprocess) {
+    message.preprocess(wrapper);
+  }
+  container2.append(wrapper);
+}
+var motd = {
+  enabled: true,
+  showMessage: showMessage.bind(null, document, container)
+};
+
+// src/runtime/motd/motd-symbol.ts
+var motdSymbol = Symbol.for("motd");
+
+// src/runtime/motd/index.ts
+window[motdSymbol] = motd;

package/dist/processors/selectable-version.js

@@ -1902,7 +1902,28 @@ function memoize(callback) {
   };
 }
 
+// src/runtime/motd/motd-symbol.ts
+var motdSymbol = Symbol.for("motd");
+
+// src/runtime/motd/motd-proxy.ts
+var motdProxy = {
+  get enabled() {
+    return Boolean(window[motdSymbol]);
+  },
+  showMessage(...args) {
+    if (window[motdSymbol]) {
+      window[motdSymbol].showMessage(...args);
+    } else {
+      throw new Error(
+        "motdProcessor(..) not enabled, cannot call showMessage(..)!"
+      );
+    }
+  }
+};
+
 // src/runtime/select-version.ts
+var current = __PKG_VERSION__;
+var message = __MESSAGE__;
 var dialog = document.querySelector("#version-dialog");
 var dialogCloseButton = dialog?.querySelector("button");
 var form = document.querySelector("#version");
@@ -1929,11 +1950,21 @@ function clickOutside(event) {
 async function fetchVersions() {
   const url = getUrl(document, "../versions.json");
   const response = await fetch(url);
-  const data = await response.json();
-  return data.versions;
+  if (!response.ok) {
+    console.error("An error occured when loading versions.json.");
+    return {
+      latest: current,
+      versions: [current]
+    };
+  }
+  return await response.json();
 }
 var getVersions = memoize(fetchVersions);
-function initVersionProcessor() {
+async function initVersionProcessor() {
+  const { latest } = await getVersions();
+  if (motdProxy.enabled && latest !== current) {
+    motdProxy.showMessage({ message });
+  }
   if (!dialog || !dialogCloseButton || !form) {
     return;
   }
@@ -1946,7 +1977,7 @@ function initVersionProcessor() {
   form.addEventListener("submit", async (event) => {
     event.preventDefault();
     try {
-      const versions = await getVersions();
+      const { versions } = await getVersions();
       updateVersionList(versions);
     } catch {
       setErrorMessage();

package/dist/runtime.d.ts

@@ -1,3 +1,34 @@
+/**
+ * A runtime proxy for the motd api. When the `motdProcessor(..)` is installed
+ * the calls are routed to the actual API implementation or when not installed
+ * it gives useful error messages.
+ *
+ * @public
+ */
+export declare const motd: MOTDApi;
+
+/**
+ * @public
+ */
+export declare interface MOTDApi {
+    readonly enabled: boolean;
+    showMessage(message: MOTDMessage): void;
+}
+
+/**
+ * @public
+ */
+export declare interface MOTDMessage {
+    /** Text message (may include HTML) */
+    message: string;
+    /** ID of message template to use */
+    template?: string;
+    /** Optional extra bindings */
+    bindings?: Record<string, string>;
+    /** Called with the new DOM element before the element is shown */
+    preprocess?(element: DocumentFragment): void;
+}
+
 /**
  * Executes callback when DOM is ready. If DOM is already ready the callback is
  * executed during the next cycle.

package/dist/runtime.js

@@ -139029,6 +139029,7 @@ var init_architectureDiagram_IFBEXTG3 = __esm({
 // src/runtime/index.ts
 var runtime_exports = {};
 __export(runtime_exports, {
+  motd: () => motdProxy,
   onContentReady: () => onContentReady
 });
 module.exports = __toCommonJS(runtime_exports);
@@ -141930,6 +141931,25 @@ onContentReady(() => {
   calculateVisibility(refs);
 });
 
+// src/runtime/motd/motd-symbol.ts
+var motdSymbol = Symbol.for("motd");
+
+// src/runtime/motd/motd-proxy.ts
+var motdProxy = {
+  get enabled() {
+    return Boolean(window[motdSymbol]);
+  },
+  showMessage(...args) {
+    if (window[motdSymbol]) {
+      window[motdSymbol].showMessage(...args);
+    } else {
+      throw new Error(
+        "motdProcessor(..) not enabled, cannot call showMessage(..)!"
+      );
+    }
+  }
+};
+
 // src/runtime/index.ts
 window.toggleMarkup = toggleMarkup;
 /*! Bundled license information:

package/dist/style/index.css

@@ -1193,13 +1193,6 @@ kbd {
   background-color: #f4f4f4;
 }
 
-.cookie-warning {
-  background: var(--docs-cookie-background-color);
-  border-bottom: 2px solid var(--docs-cookie-border-color);
-  display: none;
-  padding: 1rem 1.5rem 0;
-}
-
 :root {
   --docs-font-family: arial, "Helvetica Neue", sans-serif;
   --docs-font-weight: normal;
@@ -1233,6 +1226,11 @@ kbd {
   --docs-messagebox-warning-background: var(--docs-warning-background);
   --docs-messagebox-danger-border: var(--docs-error-color);
   --docs-messagebox-danger-background: var(--docs-error-background);
+  --docs-motd-text-color: var(--docs-text-color-discrete);
+  --docs-motd-info-accent-color: #4a52b6;
+  --docs-motd-info-background-color: #f5f6fa;
+  --docs-motd-link-color: var(--docs-text-color-discrete);
+  --docs-motd-hover-color: var(--docs-text-color-default);
   --docs-tags-optional-background-color: transparent;
   --docs-tags-optional-border-color: #5f6165;
   --docs-tags-optional-text-color: var(--docs-text-color-discrete);
@@ -1309,6 +1307,51 @@ textarea {
   margin: 0;
 }
 
+.cookie-warning {
+  background: var(--docs-cookie-background-color);
+  border-bottom: 2px solid var(--docs-cookie-border-color);
+  display: none;
+  padding: 1rem 1.5rem 0;
+}
+
+.docs-motd {
+  padding: 1.5rem;
+  margin: 0.5rem;
+  color: var(--docs-motd-text-color);
+}
+.docs-motd a {
+  color: var(--docs-motd-link-color);
+}
+.docs-motd a:hover, .docs-motd a:focus {
+  color: var(--docs-motd-hover-color);
+}
+.docs-motd p:last-child {
+  margin-bottom: 0;
+}
+.docs-motd--info {
+  border: 2px solid var(--docs-motd-info-accent-color);
+  border-top: 1rem solid var(--docs-motd-info-accent-color);
+  background-color: var(--docs-motd-info-background-color);
+  border-radius: 2px;
+}
+.docs-motd--info .icon--circle {
+  color: #fff;
+}
+.docs-motd--info .icon--i {
+  color: var(--docs-motd-text-color);
+}
+.docs-motd__icon {
+  float: left;
+  height: 1.5rem;
+  margin: 0 0.4rem 0 0;
+  width: 1.5rem;
+}
+.docs-motd__icon .icon,
+.docs-motd__icon .icon-stack {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .version {
   color: var(--docs-text-color-discrete);
   text-wrap: nowrap;
@@ -1350,4 +1393,15 @@ body {
 .page-header {
   --docs-text-color-default: var(--docs-header-text-color-default);
   --docs-text-color-discrete: var(--docs-header-text-color-discrete);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

package/dist/style/site.css

@@ -1,10 +1,3 @@
-.cookie-warning {
-  background: var(--docs-cookie-background-color);
-  border-bottom: 2px solid var(--docs-cookie-border-color);
-  display: none;
-  padding: 1rem 1.5rem 0;
-}
-
 :root {
   --docs-font-family: arial, "Helvetica Neue", sans-serif;
   --docs-font-weight: normal;
@@ -38,6 +31,11 @@
   --docs-messagebox-warning-background: var(--docs-warning-background);
   --docs-messagebox-danger-border: var(--docs-error-color);
   --docs-messagebox-danger-background: var(--docs-error-background);
+  --docs-motd-text-color: var(--docs-text-color-discrete);
+  --docs-motd-info-accent-color: #4a52b6;
+  --docs-motd-info-background-color: #f5f6fa;
+  --docs-motd-link-color: var(--docs-text-color-discrete);
+  --docs-motd-hover-color: var(--docs-text-color-default);
   --docs-tags-optional-background-color: transparent;
   --docs-tags-optional-border-color: #5f6165;
   --docs-tags-optional-text-color: var(--docs-text-color-discrete);
@@ -114,6 +112,51 @@ textarea {
   margin: 0;
 }
 
+.cookie-warning {
+  background: var(--docs-cookie-background-color);
+  border-bottom: 2px solid var(--docs-cookie-border-color);
+  display: none;
+  padding: 1rem 1.5rem 0;
+}
+
+.docs-motd {
+  padding: 1.5rem;
+  margin: 0.5rem;
+  color: var(--docs-motd-text-color);
+}
+.docs-motd a {
+  color: var(--docs-motd-link-color);
+}
+.docs-motd a:hover, .docs-motd a:focus {
+  color: var(--docs-motd-hover-color);
+}
+.docs-motd p:last-child {
+  margin-bottom: 0;
+}
+.docs-motd--info {
+  border: 2px solid var(--docs-motd-info-accent-color);
+  border-top: 1rem solid var(--docs-motd-info-accent-color);
+  background-color: var(--docs-motd-info-background-color);
+  border-radius: 2px;
+}
+.docs-motd--info .icon--circle {
+  color: #fff;
+}
+.docs-motd--info .icon--i {
+  color: var(--docs-motd-text-color);
+}
+.docs-motd__icon {
+  float: left;
+  height: 1.5rem;
+  margin: 0 0.4rem 0 0;
+  width: 1.5rem;
+}
+.docs-motd__icon .icon,
+.docs-motd__icon .icon-stack {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 :root {
   --docs-breakpoint-sm: 640px;
   --docs-breakpoint-md: 1024px;
@@ -161,4 +204,15 @@ body {
 .page-header {
   --docs-text-color-default: var(--docs-header-text-color-default);
   --docs-text-color-discrete: var(--docs-header-text-color-discrete);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-generator",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Documentation generator",
   "keywords": [
     "documentation"

package/templates/macro/motd.njk.html

@@ -0,0 +1,21 @@
+{%- macro motd(message) %}
+<div class="docs-motd docs-motd--info">
+    <span class="docs-motd__icon">
+        <span class="icon-stack icon-stack--info">
+            <svg class="icon icon--circle" focusable="false" aria-hidden="true">
+                <use xlink:href="#docs-icon-circle"></use>
+            </svg>
+            <svg class="icon icon--i" focusable="false" aria-hidden="true">
+                <use xlink:href="#docs-icon-i"></use>
+            </svg>
+        </span>
+    </span>
+    {%- if message -%}
+    <span class="sr-only">Informationsmeddelande</span>
+    <p>{{ message }}</p>
+    {%- else -%}
+    <span data-bind="screenreader" class="sr-only"></span>
+    <p data-bind="message"></p>
+    {%- endif -%}
+</div>
+{% endmacro -%}

package/templates/partials/footer.html

@@ -1,3 +1,4 @@
-<!-- prettier-ignore -->
-{%- block footer %}
-{%- endblock %}
+<div class="footer">
+    <!-- prettier-ignore -->
+    {% container "footer" %}
+</div>

package/templates/partials/motd-container.njk.html

@@ -0,0 +1,14 @@
+{% from "macro/motd.njk.html" import motd -%}
+
+{# template used for dynamic messages #}
+<template id="motd-message">
+{{- motd() -}}
+</template>
+
+{# container hold all messages #}
+<div id="motd-container">
+    {# render all static messages #}
+    {%- if message -%}
+    {{- motd(message) -}}
+    {%- endif -%}
+</div>

package/templates/partials/version-banner.html

@@ -1,14 +0,0 @@
-<div id="version-banner" class="message-box message-box--info" style="display: none">
-    <span class="message-box__icon">
-        <span class="icon-stack icon-stack--info">
-            <svg class="icon__info icon" focusable="false" aria-hidden="true">
-                <use xlink:href="#docs-icon-circle"></use>
-            </svg>
-            <svg class="icon" focusable="false" aria-hidden="true">
-                <use xlink:href="#docs-icon-i"></use>
-            </svg>
-        </span>
-    </span>
-    <span class="sr-only">Informationsmeddelande</span>
-    <p>{{ message }}</p>
-</div>