@forsakringskassan/docs-generator 1.24.0

package/templates/partials/theme-select.html

@@ -0,0 +1,68 @@
+<div class="toolbar__item">
+    <div class="select-field" hidden>
+        <label for="fkds-theme-select" class="label sr-only"> Tema </label>
+        <div class="select-field__icon-wrapper">
+            <select id="fkds-theme-select" class="select-field__select">
+                <option value="exp">Externportal</option>
+                <option value="int">Intern</option>
+            </select>
+            <svg focusable="false" class="icon select-field__icon">
+                <use xlink:href="#docs-icon-arrow-down"></use>
+            </svg>
+        </div>
+    </div>
+
+    <script>
+        function themeSelector() {
+            const cookieName = "fkds-theme";
+
+            function getCookie(key) {
+                const cookie = document.cookie.split("; ").find((item) => item.trim().startsWith(`${key}=`));
+                if (cookie) {
+                    const [, value] = cookie.split("=", 2);
+                    return value;
+                } else {
+                    return null;
+                }
+            }
+
+            function setCookie(key, value) {
+                document.cookie = `${key}=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=strict`;
+            }
+
+            function enableTheme(theme) {
+                const style = Array.from(document.querySelectorAll("[data-theme]"));
+                for (const el of style) {
+                    el.disabled = el.dataset.theme !== theme;
+                }
+            }
+
+            const el = document.querySelector("#fkds-theme-select");
+            const wrapper = el.closest(".select-field");
+            el.addEventListener("change", () => {
+                const theme = el.value;
+                setCookie(cookieName, theme);
+                enableTheme(theme);
+            });
+
+            const selected = getCookie(cookieName) || "exp";
+            enableTheme(selected);
+            el.value = selected;
+
+            wrapper.hidden = false;
+        }
+
+        /* technical debt, this entire script should be moved to src/runtime and
+         * import this function instead */
+        function onContentReady(callback) {
+            const { readyState } = document;
+            if (readyState === "complete" || readyState === "interactive") {
+                setTimeout(callback, 0);
+            } else {
+                document.addEventListener("DOMContentLoaded", callback);
+            }
+        }
+
+        onContentReady(themeSelector);
+    </script>
+</div>

package/templates/partials/topnav.html

@@ -0,0 +1,22 @@
+<nav class="imenu imenu--horizontal" aria-label="Primär">
+    <ul class="imenu__list">
+        <!-- prettier-ignore -->
+        {%- for nav in topnav.children -%}
+        {% set navPath = nav.path | replace("html", "") %}
+        {% set navPath = navPath | replace(".", "") %}
+        {% set activePage = navPath in doc.fileInfo.fullPath %}
+        <li class="imenu__list__item {% if activePage %}imenu__list__item--highlight{% endif %}">
+            <div
+                class="imenu__list__anchor-container {% if activePage %}imenu__list__anchor-container--highlight{% endif %}"
+            >
+                <a
+                    class="imenu__list__anchor {% if activePage %}imenu__list__anchor--highlight{% endif %}"
+                    href="{{ nav.path | relative(doc) }}"
+                >
+                    {{ nav.title }}
+                </a>
+            </div>
+        </li>
+        {%- endfor -%}
+    </ul>
+</nav>

package/templates/partials/version-banner.html

@@ -0,0 +1,14 @@
+<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>

package/templates/partials/version.html

@@ -0,0 +1,3 @@
+<div class="toolbar__item">
+    <span class="version">{{ pkg.version }}</span>
+</div>

package/templates/pattern.template.html

@@ -0,0 +1,19 @@
+{% extends "content-with-menu.template.html" %}
+<!-- prettier-ignore -->
+{% block aside %}
+<dl>
+    <!-- prettier-ignore -->
+    {% if doc.attributes.component %}
+    <dt>Komponent</dt>
+    <dd>
+        {% for component in doc.attributes.component %}
+        <code>{{ component }}</code>{% if not loop.last %}, {% endif %} {% endfor %}
+    </dd>
+    {% endif %}
+</dl>
+{% endblock %}
+
+<!-- prettier-ignore -->
+{% block content %}
+{{ doc.body | marked }}
+{% endblock %}

package/tsconfig-examples.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "strict": true,
+        "noImplicitAny": true,
+        "moduleResolution": "node",
+        "lib": ["es2020", "dom"]
+    }
+}