chore(typedoc-theme): Port navbar and sidebar from 0.22.x

package.json

@@ -103,7 +103,6 @@
     "!vendor/riba/infra/schematics"
   ],
   "resolutions": {
-    "bootstrap": "twbs/bootstrap#main",
     "@ribajs/accessibility": "workspace:^",
     "@ribajs/artcodestudio": "workspace:^",
     "@ribajs/bs4": "workspace:^",

packages/typedoc-theme-client/scripts/components/navigation-primary/navigation-primary.component.tsx

@@ -3,12 +3,10 @@ import { EventDispatcher } from "@ribajs/events";
 import { Dropdown } from "@ribajs/bs5";
 import { Pjax } from "@ribajs/router";
 import type {} from "@ribajs/fuse";
-import childTemplateList from "./child-template-list.html?raw";
-import childTemplateDropdown from "./child-template-dropdown.html?raw";
 
 import type {
   NavigationPrimaryComponentScope,
-  NavigationFlat,
+  Module,
   JsxTsdNavigationPrimaryProps,
   Dataset,
 } from "../../types/index.js";
@@ -17,19 +15,16 @@ export class NavigationPrimaryComponent extends Component {
   public static tagName = "tsd-navigation-primary";
 
   static get observedAttributes(): (keyof JsxTsdNavigationPrimaryProps)[] {
-    return ["type"];
+    return [];
   }
 
   protected requiredAttributes(): (keyof JsxTsdNavigationPrimaryProps)[] {
-    return ["type"];
+    return [];
   }
 
   protected routerEvents = new EventDispatcher("main");
 
   public scope: NavigationPrimaryComponentScope = {
-    childTemplateList,
-    childTemplateDropdown,
-    type: "list",
     selectedModule: "Modules",
     onModuleSelect: this.onModuleSelect,
   };
@@ -66,16 +61,16 @@ export class NavigationPrimaryComponent extends Component {
     }
   }
 
-  public onModuleSelect(mod: NavigationFlat) {
+  public onModuleSelect(mod: Module) {
     console.debug("onModuleSelect");
-    this.scope.selectedModule = mod.parent?.name || mod.name;
+    this.scope.selectedModule = mod.name;
     const pjax = Pjax.getInstance("main");
-    if (!pjax || !mod.href) {
+    if (!pjax || !mod.url) {
       console.warn("No module with href or no pjax instance found!");
       return;
     }
     Dropdown.hideAll();
-    pjax.goTo(mod.href);
+    pjax.goTo(mod.url);
   }
 
   protected setSelectedModule(dataset: Dataset) {
@@ -90,101 +85,75 @@ export class NavigationPrimaryComponent extends Component {
   }
 
   protected async fetchData() {
-    const data = await HttpService.getJSON<NavigationFlat>(
-      "/assets/primary-navigation.json"
-    );
-    this.scope.primaryNav = data.body;
-    console.debug("NavigationPrimaryComponent", this.scope.primaryNav);
+    const data = await HttpService.getJSON<Module[]>("/assets/modules.json");
+    this.scope.modules = data.body;
+    console.debug("NavigationPrimaryComponent", this.scope.modules);
   }
 
   protected template(): ReturnType<TemplateFunction> {
-    if (this.scope.type === "list") {
-      return (
-        <nav class="tsd-navigation primary" rv-if="data.extern.length | empty">
-          <ul>
-            <li
-              rv-each-mod="primaryNav"
-              rv-add-class="mod.classNames"
-              rv-route-class-active="mod.href"
-              rv-route-class-parent-active="mod.parent.href"
-              rv-template="childTemplateList"
-            ></li>
-          </ul>
-        </nav>
-      );
-    } else {
-      return (
-        <div class="dropdown">
-          <button
-            rv-bs5-dropdown=""
-            class="btn btn-outline-primary dropdown-toggle d-flex justify-content-between align-items-center"
-            id="dropdownMenuModules"
-            aria-haspopup="true"
-            aria-expanded="false"
+    return (
+      <div class="dropdown">
+        <button
+          rv-bs5-dropdown=""
+          class="btn btn-outline-primary dropdown-toggle d-flex justify-content-between align-items-center"
+          id="dropdownMenuModules"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          <span rv-text="selectedModule">Modules</span>{" "}
+          <bs5-icon
+            src="/assets/iconset/svg/arrow_carrot_thin.svg"
+            size={16}
+            direction="down"
+          ></bs5-icon>
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuModules">
+          <fuse-search
+            rv-parent
+            rv-co-items="modules"
+            options="{'keys': ['name', 'packageName']}"
           >
-            <span rv-text="selectedModule">Modules</span>{" "}
-            <bs5-icon
-              src="/assets/iconset/svg/arrow_carrot_thin.svg"
-              size={16}
-              direction="down"
-            ></bs5-icon>
-          </button>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenuModules">
-            <fuse-search
-              rv-parent
-              rv-co-items="primaryNav"
-              options="{'keys': ['name', 'parent.name']}"
-            >
-              <div class="mx-2 mb-2">
-                <input
-                  type="search"
-                  class="form-control"
-                  placeholder="Filter..."
-                  aria-label="Filter"
-                  rv-value="searchPattern"
-                  rv-on-input="search"
-                  rv-on-cut="search"
-                  rv-on-paste="search"
-                />
-              </div>
-              <div class="scrollbar-y-scroll scrollbar-primary">
-                <div class="dropdown-header">Modules</div>
-                <div rv-show="searchPattern | size" rv-each-result="results">
-                  <div
-                    class="dropdown-item cursor-pointer"
-                    rv-add-class="result.item.classNames"
-                    rv-route-class-active="result.item.href"
-                    rv-route-class-parent-active="result.item.parent.href"
-                    rv-on-click="$parent.$parent.onModuleSelect | args result.item"
-                  >
-                    <a
-                      rv-href="result.item.href"
-                      rv-text="result.item.parent.name"
-                    ></a>
-                  </div>
-                </div>
+            <div class="mx-2 mb-2">
+              <input
+                type="search"
+                class="form-control"
+                placeholder="Filter..."
+                aria-label="Filter"
+                rv-value="searchPattern"
+                rv-on-input="search"
+                rv-on-cut="search"
+                rv-on-paste="search"
+              />
+            </div>
+            <div class="scrollbar-y-scroll scrollbar-primary">
+              <div class="dropdown-header">Modules</div>
+              <div rv-show="searchPattern | size" rv-each-result="results">
                 <div
-                  rv-if="results | size | eq 0"
-                  rv-show="searchPattern | size"
+                  class="dropdown-item cursor-pointer"
+                  rv-add-class="result.item.classNames"
+                  rv-route-class-active="result.item.url"
+                  rv-route-class-parent-active="result.item.url"
+                  rv-on-click="$parent.$parent.onModuleSelect | args result.item"
                 >
-                  <div class="dropdown-item">No result</div>
+                  <a rv-href="result.item.url" rv-text="result.item.name"></a>
                 </div>
-                <div rv-hide="searchPattern | size" rv-each-item="items">
-                  <div
-                    class="dropdown-item cursor-pointer"
-                    rv-add-class="item.classNames"
-                    rv-route-class-active="item.href"
-                    rv-route-class-parent-active="item.parent.href"
-                    rv-on-click="$parent.$parent.onModuleSelect | args item"
-                  >
-                    <a rv-href="item.href" rv-text="item.parent.name"></a>
-                  </div>
+              </div>
+              <div rv-if="results | size | eq 0" rv-show="searchPattern | size">
+                <div class="dropdown-item">No result</div>
+              </div>
+              <div rv-hide="searchPattern | size" rv-each-item="items">
+                <div
+                  class="dropdown-item cursor-pointer"
+                  rv-route-class-active="item.url"
+                  rv-on-click="$parent.$parent.onModuleSelect | args item"
+                >
+                  <a rv-href="item.url" rv-text="item.name"></a>
                 </div>
               </div>
-            </fuse-search>
-          </div>
+            </div>
+          </fuse-search>
         </div>
-      );
-    }
+      </div>
+    );
   }
 }

packages/typedoc-theme-client/scripts/original/bootstrap.ts

@@ -1,13 +1,13 @@
 import { Application, registerComponent } from "./typedoc/Application";
-import { initSearch } from "./typedoc/components/Search";
+// import { initSearch } from "./typedoc/components/Search";
 import { Toggle } from "./typedoc/components/Toggle";
 import { Filter } from "./typedoc/components/Filter";
 import { Accordion } from "./typedoc/components/Accordion";
 import { initTheme } from "./typedoc/Theme";
 
 console.debug("bootstrap original...");
 
-initSearch();
+// initSearch();
 
 registerComponent(Toggle, "a[data-toggle]");
 registerComponent(Accordion, ".tsd-index-accordion");

packages/typedoc-theme-client/scripts/types/index.ts

@@ -8,7 +8,7 @@ export * from "./member-signatures-component-scope.js";
 export * from "./module-info.js";
 export * from "./module-options.js";
 export * from "./navbar-component-scope.js";
-export * from "./navigation-flat.js";
+export * from "./module.js";
 export * from "./navigation-primary-component-scope.js";
 export * from "./navigation-primary.js";
 export * from "./navigation-secondary-component-scope.js";

packages/typedoc-theme-client/scripts/types/jsx/jsx-navigation-primary-props.ts

@@ -1,5 +1,3 @@
 import type { JsxHtmlGlobalProps } from "@ribajs/jsx/src/types/index";
 
-export interface JsxTsdNavigationPrimaryProps extends JsxHtmlGlobalProps {
-  type: "list" | "dropdown";
-}
+export type JsxTsdNavigationPrimaryProps = JsxHtmlGlobalProps;

packages/typedoc-theme-client/scripts/types/module.ts

@@ -0,0 +1,6 @@
+export interface Module {
+  name: string;
+  url?: string;
+  packageName?: string;
+  packageVersion?: string;
+}

packages/typedoc-theme-client/scripts/types/navigation-primary-component-scope.ts

@@ -1,17 +1,10 @@
 import type { ScopeBase } from "@ribajs/core";
-import type {
-  NavigationFlat,
-  JsxTsdNavigationPrimaryProps,
-  Dataset,
-} from "./index.js";
+import type { Module, Dataset } from "./index.js";
 import type { NavigationPrimaryComponent } from "../components/navigation-primary/navigation-primary.component.js";
 
 export interface NavigationPrimaryComponentScope
   extends ScopeBase<{ dataset: Dataset }> {
-  primaryNav?: NavigationFlat;
-  childTemplateList: string;
-  childTemplateDropdown: string;
-  type: JsxTsdNavigationPrimaryProps["type"];
+  modules?: Module[];
   selectedModule: string;
   onModuleSelect: NavigationPrimaryComponent["onModuleSelect"];
 }

packages/typedoc-theme-client/styles/_bootstrap.scss

@@ -1,47 +1,50 @@
 // See https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
 
 // Configuration
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/maps";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
 
 // Layout & components
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/accordion";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/offcanvas";
-@import "~bootstrap/scss/placeholders";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
 
 // Helpers
-@import "~bootstrap/scss/helpers";
+@import "bootstrap/scss/helpers";
 
 // Utilities
-@import "~bootstrap/scss/utilities/api";
+@import "bootstrap/scss/utilities/api";