chore(typedoc-theme): Replaced original sidebars with its own

gjsify · Jun 23, 2023 · 2acfa27 · 2acfa27
1 parent e481a7e
commit 2acfa27
Show file tree

Hide file tree

Showing 48 changed files with 1,260 additions and 1,974 deletions.
diff --git a/@types b/@types
diff --git a/packages/typedoc-theme-client/scripts/components/index.scss b/packages/typedoc-theme-client/scripts/components/index.scss
@@ -2,6 +2,6 @@
 @import "./header/header.component";
 @import "./member-signatures/member-signatures.component";
 @import "./navbar/navbar.component";
-@import "./navigation-secondary/navigation-secondary.component";
-@import "./navigation-primary/navigation-primary.component";
+@import "./sidebar-content/sidebar-content.component";
+@import "./module-menu/module-menu.component";
 @import "./search/search.component";
diff --git a/packages/typedoc-theme-client/scripts/components/index.ts b/packages/typedoc-theme-client/scripts/components/index.ts
@@ -2,6 +2,6 @@ export * from "./footer/footer.component";
 export * from "./header/header.component";
 export * from "./member-signatures/member-signatures.component.js";
 export * from "./navbar/navbar.component.js";
-export * from "./navigation-secondary/navigation-secondary.component.js";
-export * from "./navigation-primary/navigation-primary.component.js";
+export * from "./sidebar-content/sidebar-content.component.js";
+export * from "./module-menu/module-menu.component.js";
 export * from "./search/search.component.js";
diff --git a/...primary/navigation-primary.component.scss → ...ts/module-menu/module-menu.component.scss b/...primary/navigation-primary.component.scss → ...ts/module-menu/module-menu.component.scss
@@ -1,4 +1,4 @@
-tsd-navigation-primary {
+tsd-module-menu {
 
     .dropdown {
         .dropdown-toggle {

diff --git a/...-primary/navigation-primary.component.tsx → ...nts/module-menu/module-menu.component.tsx b/...-primary/navigation-primary.component.tsx → ...nts/module-menu/module-menu.component.tsx
@@ -5,26 +5,26 @@ import { Pjax } from "@ribajs/router";
 import type {} from "@ribajs/fuse";
 
 import type {
-  NavigationPrimaryComponentScope,
+  ModuleMenuScope,
   Module,
-  JsxTsdNavigationPrimaryProps,
+  JsxTsdModuleMenuProps,
   Dataset,
 } from "../../types/index.js";
 
-export class NavigationPrimaryComponent extends Component {
-  public static tagName = "tsd-navigation-primary";
+export class ModuleMenuComponent extends Component {
+  public static tagName = "tsd-module-menu";
 
-  static get observedAttributes(): (keyof JsxTsdNavigationPrimaryProps)[] {
+  static get observedAttributes(): (keyof JsxTsdModuleMenuProps)[] {
     return [];
   }
 
-  protected requiredAttributes(): (keyof JsxTsdNavigationPrimaryProps)[] {
+  protected requiredAttributes(): (keyof JsxTsdModuleMenuProps)[] {
     return [];
   }
 
   protected routerEvents = new EventDispatcher("main");
 
-  public scope: NavigationPrimaryComponentScope = {
+  public scope: ModuleMenuScope = {
     selectedModule: "Modules",
     onModuleSelect: this.onModuleSelect,
   };
@@ -35,7 +35,7 @@ export class NavigationPrimaryComponent extends Component {
 
   protected connectedCallback() {
     super.connectedCallback();
-    this.init(NavigationPrimaryComponent.observedAttributes);
+    this.init(ModuleMenuComponent.observedAttributes);
   }
 
   protected async beforeBind() {
@@ -87,7 +87,7 @@ export class NavigationPrimaryComponent extends Component {
   protected async fetchData() {
     const data = await HttpService.getJSON<Module[]>("/assets/modules.json");
     this.scope.modules = data.body;
-    console.debug("NavigationPrimaryComponent", this.scope.modules);
+    console.debug("ModuleMenu", this.scope.modules);
   }
 
   protected template(): ReturnType<TemplateFunction> {

diff --git a/...-theme-client/scripts/components/navigation-secondary/navigation-secondary.component.scss b/...-theme-client/scripts/components/navigation-secondary/navigation-secondary.component.scss
diff --git a/...es/typedoc-theme-client/scripts/components/sidebar-content/sidebar-content.component.scss b/...es/typedoc-theme-client/scripts/components/sidebar-content/sidebar-content.component.scss
diff --git a/...ondary/navigation-secondary.component.tsx → ...bar-content/sidebar-content.component.tsx b/...ondary/navigation-secondary.component.tsx → ...bar-content/sidebar-content.component.tsx
@@ -2,26 +2,26 @@ import { Component, TemplateFunction } from "@ribajs/core";
 import { hasChildNodesTrim } from "@ribajs/utils";
 import { EventDispatcher } from "@ribajs/events";
 
-import type { NavigationSecondaryComponentScope } from "../../types/index.js";
+import type { SidebarContentComponentScope } from "../../types/index.js";
 
-export class NavigationComponent extends Component {
-  public static tagName = "tsd-navigation-secondary";
+export class SidebarContentComponent extends Component {
+  public static tagName = "tsd-sidebar-content";
 
   static get observedAttributes() {
     return [];
   }
 
   protected routerEvents = new EventDispatcher("main");
 
-  public scope: NavigationSecondaryComponentScope = {};
+  public scope: SidebarContentComponentScope = {};
 
   constructor() {
     super();
   }
 
   protected connectedCallback() {
     super.connectedCallback();
-    this.init(NavigationComponent.observedAttributes);
+    this.init(SidebarContentComponent.observedAttributes);
   }
 
   protected async beforeBind() {
@@ -35,10 +35,10 @@ export class NavigationComponent extends Component {
 
   protected onNewPage() {
     const templateEl = document.getElementById(
-      "tsd-navigation-secondary-template"
+      "tsd-sidebar-content-template"
     ) as HTMLTemplateElement | null;
     if (!templateEl) {
-      console.warn("[NavigationComponent] No template found!");
+      console.warn("[SidebarContentComponent] No template found!");
       return;
     }
     this.scope.template = templateEl.innerHTML;

diff --git a/packages/typedoc-theme-client/scripts/main.ts b/packages/typedoc-theme-client/scripts/main.ts
@@ -1,12 +1,13 @@
 import { ready } from "@ribajs/utils";
 import { Riba, coreModule } from "@ribajs/core";
+// import { EventDispatcher } from "@ribajs/events";
 import { routerModule, FadeTransition } from "@ribajs/router";
 import { bs5Module, ThemeService } from "@ribajs/bs5";
 import { fuseModule } from "@ribajs/fuse";
 import { gjsifyTypedocModule } from "./module";
 
 // Import original typedoc bootstrap
-import "./original/bootstrap.js";
+import { bootstrap as bootstrapOriginal } from "./original/bootstrap.js";
 
 declare global {
   interface Window {
@@ -45,6 +46,11 @@ const bootstrap = () => {
     console.error(error);
   });
 
+  // EventDispatcher.getInstance("main").on("newPageReady", () => {
+  //   bootstrapOriginal();
+  // });
+  bootstrapOriginal();
+
   // Also add theme class to body for TypeDoc Theme backward compatibility
   theme.onChange((data) => {
     document.body.classList.remove("os", "dark", "light");

diff --git a/packages/typedoc-theme-client/scripts/original/bootstrap.ts b/packages/typedoc-theme-client/scripts/original/bootstrap.ts
@@ -1,31 +1,28 @@
 import { Application, registerComponent } from "./typedoc/Application";
-// 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...");
+export const bootstrap = () => {
+  console.debug("bootstrap original...");
 
-// initSearch();
+  registerComponent(Toggle, "a[data-toggle]");
+  registerComponent(Accordion, ".tsd-index-accordion");
 
-registerComponent(Toggle, "a[data-toggle]");
-registerComponent(Accordion, ".tsd-index-accordion");
-registerComponent(Filter, ".tsd-filter-item input[type=checkbox]");
+  const themeChoice = document.getElementById("tsd-theme");
+  if (themeChoice) {
+    initTheme(themeChoice as HTMLOptionElement);
+  }
 
-const themeChoice = document.getElementById("tsd-theme");
-if (themeChoice) {
-  initTheme(themeChoice as HTMLOptionElement);
-}
+  const app = new Application();
 
-const app = new Application();
+  Object.defineProperty(window, "app", { value: app });
 
-Object.defineProperty(window, "app", { value: app });
-
-// Safari is broken and doesn't let you click on a link within
-// a <summary> tag, so we have to manually handle clicks there.
-document.querySelectorAll("summary a").forEach((el) => {
-  el.addEventListener("click", () => {
-    location.assign((el as HTMLAnchorElement).href);
+  // Safari is broken and doesn't let you click on a link within
+  // a <summary> tag, so we have to manually handle clicks there.
+  document.querySelectorAll("summary a").forEach((el) => {
+    el.addEventListener("click", () => {
+      location.assign((el as HTMLAnchorElement).href);
+    });
   });
-});
+};
diff --git a/packages/typedoc-theme-client/scripts/original/typedoc/Application.ts b/packages/typedoc-theme-client/scripts/original/typedoc/Application.ts
@@ -37,7 +37,6 @@ export class Application {
    */
   constructor() {
     this.createComponents(document.body);
-    this.ensureActivePageVisible();
     this.ensureFocusedElementVisible();
     this.listenForCodeCopies();
     window.addEventListener("hashchange", () =>
@@ -63,35 +62,14 @@ export class Application {
     this.ensureFocusedElementVisible();
   }
 
-  private ensureActivePageVisible() {
-    const pageLink = document.querySelector(".tsd-navigation .current");
-    let iter = pageLink?.parentElement;
-    while (iter && !iter.classList.contains(".tsd-navigation")) {
-      // Expand parent namespaces if collapsed, and this module
-      if (iter instanceof HTMLDetailsElement) {
-        iter.open = true;
-      }
-      iter = iter.parentElement;
-    }
-
-    if (pageLink) {
-      const top =
-        pageLink.getBoundingClientRect().top -
-        document.documentElement.clientHeight / 4;
-      // If we are showing three columns, this will scroll the site menu down to
-      // show the page we just loaded in the navigation.
-      document.querySelector(".site-menu")!.scrollTop = top;
-    }
-  }
-
   /**
    * Ensures that if a user was linked to a reflection which is hidden because of filter
    * settings, that reflection is still shown.
    */
   private ensureFocusedElementVisible() {
     if (this.alwaysVisibleMember) {
       this.alwaysVisibleMember.classList.remove("always-visible");
-      this.alwaysVisibleMember.firstElementChild!.remove();
+      this.alwaysVisibleMember.firstElementChild?.remove();
       this.alwaysVisibleMember = null;
     }
 
@@ -100,9 +78,9 @@ export class Application {
     const reflAnchor = document.getElementById(location.hash.substring(1));
     if (!reflAnchor) return;
 
-    let reflContainer = reflAnchor.parentElement!;
+    let reflContainer = reflAnchor.parentElement;
     while (reflContainer && reflContainer.tagName !== "SECTION") {
-      reflContainer = reflContainer.parentElement!;
+      reflContainer = reflContainer.parentElement;
     }
 
     if (!reflContainer) {