kss-modern 0.0.43 → 0.0.45

package/README.md

@@ -69,6 +69,21 @@ Styleguide 2.1
 .btn { /* styles */ }
 ```
 
+## Markup Includes
+
+The `Markup:` field accepts three formats. File paths are resolved relative to `contentDir`.
+
+```scss
+/* Inline HTML */
+Markup: <button class="btn {{modifier_class}}">Click me</button>
+
+/* Static .html file — contents are inlined as-is */
+Markup: templates/components/badge.html
+
+/* Static .pug file — compiled to HTML at build time */
+Markup: templates/components/card.pug
+```
+
 ## Development
 
 ```bash

package/dist/node/lib/index.mjs

@@ -172,6 +172,39 @@ function generateId() {
   return value;
 }
 
+const INSERT_MARKUP_REGEX = /<insert-markup>(\d+(?:\.\d+)*)(?:-(\d*))?<\/insert-markup>/g;
+function resolveInsertMarkupInRepository(repository, sectionsById) {
+  for (const [id, entry] of repository) {
+    entry.markup = resolveMarkup(entry.markup, repository, sectionsById, /* @__PURE__ */ new Set([id]));
+  }
+}
+function resolveMarkup(markup, repository, sectionsById, visited) {
+  return markup.replace(INSERT_MARKUP_REGEX, (_match, refId, modifierIdxStr) => {
+    if (visited.has(refId))
+      return errorBlock(refId, `circular reference detected for section "${refId}"`);
+    const refEntry = repository.get(refId);
+    if (!refEntry)
+      return errorBlock(refId, `section "${refId}" not found`);
+    let inserted = refEntry.markup;
+    if (modifierIdxStr !== void 0 && modifierIdxStr !== "") {
+      const modifierIdx = Number(modifierIdxStr);
+      const refSection = sectionsById.get(refId);
+      const modifier = refSection?.modifiers[modifierIdx];
+      if (!modifier)
+        return errorBlock(refId, `modifier index ${modifierIdx} out of range for section "${refId}"`);
+      const className = modifier.name.replace(/^\./, "");
+      inserted = inserted.replaceAll("{{modifier_class}}", className);
+    }
+    const nextVisited = new Set(visited);
+    nextVisited.add(refId);
+    return resolveMarkup(inserted, repository, sectionsById, nextVisited);
+  });
+}
+function errorBlock(refId, message) {
+  console.warn(`[insert-markup] ${message}`);
+  return `<pre class="kss-modern-insert-markup-error" data-section-ref="${sanitizeSpecialCharacters(refId)}">[insert-markup] ${sanitizeSpecialCharacters(message)}</pre>`;
+}
+
 const accordionRenderer = (bodyContent, props) => {
   const type = props.type || "info";
   const title = props.title || "Click to expand";
@@ -925,7 +958,7 @@ async function generateFullPageFile(data) {
         <link rel="icon" type="image/svg+xml" href="/styleguide-assets/favicon/fullpage-light.svg">
       `}
     ${data.ogImageUrl ? `<meta property="og:image" content="${data.ogImageUrl}">` : ""}
-    <script type="module" src="/styleguide-assets/fullpage-BnZffO-C.js"><\/script>
+    <script type="module" src="/styleguide-assets/fullpage-vgwUQzah.js"><\/script>
     ${computedStyleTags}
 </head>
 <body${data.page.bodyclass ? ` class="${data.page.bodyclass}"` : ""}>
@@ -2147,17 +2180,21 @@ async function buildStyleguide(config) {
   const menuSectionMapping = [];
   const fileWriteTasks = [];
   let markupRepository = /* @__PURE__ */ new Map();
+  const sectionsById = /* @__PURE__ */ new Map();
   parsedContent.forEach((firstLevelSection) => {
     firstLevelSection.sections.forEach((secondLevelSection) => {
+      sectionsById.set(secondLevelSection.id, { modifiers: secondLevelSection.modifiers.map((m) => ({ name: m.value })) });
       if (secondLevelSection.markup)
         markupRepository.set(secondLevelSection.id, { markup: secondLevelSection.markup });
       secondLevelSection.sections.forEach((thirdLevelSection) => {
+        sectionsById.set(thirdLevelSection.id, { modifiers: thirdLevelSection.modifiers.map((m) => ({ name: m.value })) });
         if (thirdLevelSection.markup)
           markupRepository.set(thirdLevelSection.id, { markup: thirdLevelSection.markup });
       });
     });
   });
   markupRepository = await compilePugMarkup(config.mode, config.contentDir, markupRepository);
+  resolveInsertMarkupInRepository(markupRepository, sectionsById);
   parsedContent.forEach((firstLevelSection, indexFirstLevel) => {
     searchSectionMapping[indexFirstLevel] = {
       title: firstLevelSection.header,

package/dist/styleguide-assets/.vite/manifest.json

@@ -20,7 +20,7 @@
     "name": "utils"
   },
   "client/fullpage.ts": {
-    "file": "fullpage-BnZffO-C.js",
+    "file": "fullpage-vgwUQzah.js",
     "name": "fullpage",
     "src": "client/fullpage.ts",
     "isEntry": true,
@@ -104,7 +104,7 @@
     ]
   },
   "node_modules/html-validate/dist/esm/browser.js": {
-    "file": "browser-WqBcffEc.js",
+    "file": "browser-sbHfjbF0.js",
     "name": "browser",
     "src": "node_modules/html-validate/dist/esm/browser.js",
     "isDynamicEntry": true,