npm - @staticbolt/docs - Versions diffs - 0.0.1-beta.3 → 0.0.1-beta.5 - Mend

@staticbolt/docs 0.0.1-beta.3 → 0.0.1-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/sources/parts/document/document.part.html CHANGED Viewed

@@ -1,10 +1,13 @@
 <!--
   @part The whole docs page inside <body>: header, sidebar, content, table of contents, pagination.
   @attr title - Site name shown in the header.
+  @attr home - Where the header title links to. Default `~/`.
+  @attr bundle - Directory of the Pagefind index, relative to the output directory. Default `pagefind`.
   @attr minHeading - Lowest heading level in the table of contents. Default 2.
   @attr maxHeading - Highest heading level in the table of contents. Default 3.
-  @attr mermaid - Present to render mermaid fences. Needs the mermaid package.
+  @attr mermaid - Present to render mermaid fences.
   @slot - The page content.
+  @slot sidebar - The sidebar tree, filled in by contentPlugin through the layout.
   @slot logo - Rendered before the title in the header link.
   @slot icons - Links rendered in the header and the sidebar footer.
 -->
@@ -14,13 +17,14 @@
 <a class="skip-content-link" href="">Skip to content</a>
-<part src="@staticbolt/docs/parts/header/header.part.html" title="{{ $data.title }}">
+<part inherit src="@staticbolt/docs/parts/header/header.part.html">
   <slot name="logo" slot="logo"></slot>
   <slot name="icons" slot="icons"></slot>
 </part>
 <div class="markdown-layout">
   <part src="@staticbolt/docs/parts/sidebar/sidebar.part.html">
+    <slot name="sidebar"></slot>
     <slot name="icons" slot="icons"></slot>
   </part>
@@ -38,11 +42,7 @@
     </div>
   </div>
-  <part
-    maxHeading="{{ $data.maxHeading ?? 3 }}"
-    minHeading="{{ $data.minHeading ?? 2 }}"
-    src="@staticbolt/docs/parts/table-of-content/table-of-content-desktop.part.html"
-  ></part>
+  <part inherit src="@staticbolt/docs/parts/table-of-content/table-of-content-desktop.part.html"></part>
 </div>
 <part src="@staticbolt/docs/parts/callouts/callouts.part.html"></part>

package/sources/parts/header/header.part.html CHANGED Viewed

@@ -14,7 +14,7 @@
     <div class="header-title">
       <div class="title-wrapper">
-        <a href="~/" translate="no">
+        <a href="{{ $data.home ?? '~/' }}" translate="no">
           <slot name="logo"></slot>
           {{ $data.title }}
         </a>
@@ -22,7 +22,7 @@
     </div>
     <div class="header-center">
-      <part src="../pagefind/pagefind.part.html"></part>
+      <part inherit src="../pagefind/pagefind.part.html"></part>
     </div>
     <div class="header-icons">

package/sources/parts/header/header.style.css CHANGED Viewed

@@ -1,6 +1,8 @@
 :root {
   --header-icon-size: 1.5em;
   --sb-header-height: 4rem;
+  --sb-header-title-size: var(--sb-text-h3);
+  --sb-header-title-color: var(--sb-color-accent-high);
   @media (max-width: 900px) {
     --sb-header-height: 3rem;
@@ -78,9 +80,9 @@
     .title-wrapper {
       a {
         font-family: var(--sb-md-font);
-        font-size: var(--sb-text-h3);
+        font-size: var(--sb-header-title-size);
         font-weight: 600;
-        color: var(--sb-color-accent-high);
+        color: var(--sb-header-title-color);
         text-decoration: none;
       }
     }

package/sources/parts/mermaid/mermaid.part.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!-- ::: Renders ```mermaid fences, themed from the page's CSS variables ::: -->
-<script type="module" data-mermaid-script src="@staticbolt/docs/scripts/mermaid.ts"></script>
+<script type="module" data-mermaid-script src="@staticbolt/docs/mermaid"></script>
 <!-- ::: Drop the script from pages without a diagram ::: -->
 <script type="application/x-typescript" build-time>

package/sources/parts/pagefind/pagefind.part.html CHANGED Viewed

@@ -8,18 +8,20 @@
   </svg>
 </button>
-<pagefind-modal></pagefind-modal>
+<pagefind-modal data-bundle="{{ $data.bundle ?? 'pagefind' }}"></pagefind-modal>
 <!-- ::: Path from this page to the Pagefind bundle, so the site works on any subpath ::: -->
 <script type="application/x-typescript" build-time module>
   import { dirname, relative } from "node:path";
   const modal = document.querySelector("pagefind-modal");
-  modal.setAttribute("data-bundle-path", relative(dirname(__filepath), "pagefind") + "/");
+  const bundle = modal.getAttribute("data-bundle") || "pagefind";
+  modal.setAttribute("data-bundle-path", relative(dirname(__filepath), bundle) + "/");
+  modal.removeAttribute("data-bundle");
 </script>
 <insert selector="body">
-  <link class="pagefind-stylesheet" as="style" bundle href="./pagefind.style.css" rel="preload" />
+  <link class="pagefind-stylesheet" as="style" bundle href="@staticbolt/docs/parts/pagefind/pagefind.style.css" rel="preload" />
   <script type="application/x-typescript" module>
     (async () => {

package/sources/parts/sidebar/sidebar.part.html CHANGED Viewed

@@ -1,6 +1,6 @@
 <div class="sidebar">
   <nav aria-label="Sidebar navigation">
-    <slot name="sidebar"></slot>
+    <slot></slot>
   </nav>
   <div class="sidebar-footer">

package/sources/parts/sidebar/sidebar.style.css CHANGED Viewed

@@ -142,6 +142,16 @@
       font-size: var(--sb-text-base);
       font-weight: 600;
       color: var(--sb-color-gray-0);
+      &.active {
+        color: var(--sb-color-accent-high);
+      }
+      @media (pointer: fine) {
+        &:hover {
+          color: var(--sb-color-accent-high);
+        }
+      }
     }
   }

package/sources/parts/table-of-content/table-of-content-desktop.part.html CHANGED Viewed

@@ -12,8 +12,8 @@
     .querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
     .filter(el => !el.closest(".not-content"));
-  const maxHeading = +"{{ $data.maxHeading }}";
-  const minHeading = +"{{ $data.minHeading }}";
+  const maxHeading = +"{{ $data.maxHeading ?? 3 }}";
+  const minHeading = +"{{ $data.minHeading ?? 2 }}";
   const ul = document.createElement("ul");
   ul.classList.add("toc-list");

package/sources/scripts/mermaid.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import _mermaid from "mermaid/dist/mermaid.esm.min.mjs";
 import type { Mermaid } from "mermaid";
-const mermaid = _mermaid as unknown as Mermaid;
+const mermaid = _mermaid as Mermaid;
 // Resolves CSS vars including light-dark() — element must be in DOM
 function resolveColor(cssVariable: string) {
@@ -73,3 +73,5 @@ async function renderDiagrams() {
 await renderDiagrams();
 document.addEventListener("color-scheme-changed", renderDiagrams);
+export { renderDiagrams };