varvara-typedoc-theme 0.3.5 → 0.3.7

package/README.md

@@ -1,6 +1,6 @@
 # Varvara 🤦‍♀️ TypeDoc Theme
 
-_View a_ [_live example here_](https://marcmarine.github.io/western-signs).
+_View a_ [_live example here_](https://docs.label.energy).
 
 Varvara TypeDoc Theme is a custom theme for TypeDoc, designed to provide a seamless documentation experience for TypeScript projects.
 
@@ -42,7 +42,7 @@ npx typedoc --plugin varvara-typedoc-theme --theme varvara-css src/index.ts
 
 ### Method 2: Configuration File
 
-Create a `typedoc.js` configuration file in your project's root directory:
+Create a `typedoc.mjs` configuration file in your project's root directory:
 
 > [!NOTE]
 > You can use various TypeDoc [configuration files](https://typedoc.org/documents/Options.Configuration.html) to customize your documentation generation.
@@ -57,7 +57,12 @@ const config = {
   theme: 'varvara-css',
 
   // Optional: Include version information
-  includeVersion: true
+  includeVersion: true,
+
+  // Optional: Include groups
+  navigation: {
+    includeGroups: true
+  }
 
   // Additional TypeDoc configuration options
   // ... other options as needed

package/assets/overrides.css

@@ -16,11 +16,26 @@
   box-sizing: border-box;
 }
 
+.va-collapse {
+  overflow: hidden;
+}
+
 .va-button {
   display: flex;
   align-items: center;
 }
 
+.va-button span {
+  color: inherit;
+}
+
+.va-button span,
+.va-collapse summary {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .title {
   flex: 1;
 }

package/dist/index.js

@@ -58,49 +58,6 @@ function footer(context) {
 
 // src/partials/navigation.tsx
 import { JSX as JSX2, ReflectionFlag, i18n as i18n2, translateTagName, ReflectionFlags } from "typedoc";
-
-// src/utils.ts
-import {
-  DeclarationReflection,
-  ProjectReflection,
-  ReflectionKind
-} from "typedoc";
-function getDisplayName(refl) {
-  let version = "";
-  if ((refl instanceof DeclarationReflection || refl instanceof ProjectReflection) && refl.packageVersion) {
-    version = ` - v${refl.packageVersion}`;
-  }
-  return `${refl.name}${version}`;
-}
-var rootsCache = new WeakMap;
-function getHierarchyRoots(project) {
-  const cached = rootsCache.get(project);
-  if (cached)
-    return cached;
-  const allClasses = project.getReflectionsByKind(ReflectionKind.ClassOrInterface);
-  const roots = allClasses.filter((refl) => {
-    if (!refl.implementedBy && !refl.extendedBy) {
-      return false;
-    }
-    if (!refl.implementedTypes && !refl.extendedTypes) {
-      return true;
-    }
-    const types = [
-      ...refl.implementedTypes || [],
-      ...refl.extendedTypes || []
-    ];
-    return types.every((type) => !type.visit({
-      reference(ref) {
-        return ref.reflection !== undefined;
-      }
-    }));
-  });
-  const result = roots.sort((a, b) => a.name.localeCompare(b.name));
-  rootsCache.set(project, result);
-  return result;
-}
-
-// src/partials/navigation.tsx
 function pageSidebar(context) {
   return (props) => {
     return /* @__PURE__ */ JSX2.createElement("div", {
@@ -145,7 +102,7 @@ function settings(context) {
 }
 function buildSectionNavigation(context, headings) {
   const levels = [[]];
-  const PADDING_PER_LEVEL = 18;
+  const PADDING_PER_LEVEL = 12;
   function finalizeLevel(finishedHandlingHeadings) {
     const level = levels.pop();
     if (levels[levels.length - 1].length === 0 && finishedHandlingHeadings) {
@@ -163,10 +120,12 @@ function buildSectionNavigation(context, headings) {
     while (inferredLevel > levels.length) {
       levels.push([]);
     }
+    const icon = heading.kind && context.icons[heading.kind]();
     levels[levels.length - 1].push(/* @__PURE__ */ JSX2.createElement("a", {
       href: heading.link,
-      class: [heading.classes, "va-button"].join(" ")
-    }, heading.kind && context.icons[heading.kind](), heading.text));
+      class: [heading.classes, "va-button"].join(" "),
+      style: !icon ? `padding-left: ${PADDING_PER_LEVEL * (inferredLevel - 1)}px` : ""
+    }, icon, /* @__PURE__ */ JSX2.createElement("span", null, heading.text)));
   }
   while (levels.length > 1) {
     finalizeLevel(true);
@@ -214,20 +173,17 @@ var navigation = (context) => (props) => {
   const navigationData = context.getNavigation();
   return /* @__PURE__ */ JSX2.createElement("nav", {
     class: "va-button-group"
-  }, /* @__PURE__ */ JSX2.createElement("details", {
-    class: "va-collapse tsd-accordion"
-  }, /* @__PURE__ */ JSX2.createElement("summary", null, /* @__PURE__ */ JSX2.createElement("a", {
-    href: context.urlTo(props.project)
-  }, getDisplayName(props.project))), /* @__PURE__ */ JSX2.createElement(Navigation, {
+  }, /* @__PURE__ */ JSX2.createElement(Navigation, {
     data: navigationData,
     context
-  })));
+  }));
 };
 var Navigation = ({ data, context }) => /* @__PURE__ */ JSX2.createElement(JSX2.Fragment, null, data.map((item) => item.children && item.children.length > 0 ? /* @__PURE__ */ JSX2.createElement("details", {
   class: "va-collapse tsd-accordion"
 }, /* @__PURE__ */ JSX2.createElement("summary", {
-  class: "tsd-accordion-summary"
-}, item.text), /* @__PURE__ */ JSX2.createElement(Navigation, {
+  class: "tsd-accordion-summary",
+  "data-key": `section-${item.text}`
+}, item.kind && context.icons[item.kind](), item.text), /* @__PURE__ */ JSX2.createElement(Navigation, {
   data: item.children,
   context
 })) : /* @__PURE__ */ JSX2.createElement(Item, {
@@ -239,13 +195,13 @@ var Item = ({ item, context }) => {
   return item.path ? /* @__PURE__ */ JSX2.createElement("a", {
     href: context.relativeURL(item.path),
     class: "va-button"
-  }, icon, item.text) : /* @__PURE__ */ JSX2.createElement("span", {
+  }, icon, /* @__PURE__ */ JSX2.createElement("span", null, item.text)) : /* @__PURE__ */ JSX2.createElement("span", {
     class: "va-button"
-  }, icon, item.text);
+  }, icon, /* @__PURE__ */ JSX2.createElement("span", null, item.text));
 };
 
 // src/partials/toolbar.tsx
-import { i18n as i18n3, DeclarationReflection as DeclarationReflection2, JSX as JSX3, ProjectReflection as ProjectReflection2 } from "typedoc";
+import { i18n as i18n3, DeclarationReflection, JSX as JSX3, ProjectReflection } from "typedoc";
 function toolbar(context) {
   return (props) => /* @__PURE__ */ JSX3.createElement("header", {
     class: "page-toolbar"
@@ -256,7 +212,7 @@ function toolbar(context) {
   }, /* @__PURE__ */ JSX3.createElement("a", {
     href: context.options.getValue("titleLink") || context.relativeURL("index.html"),
     class: "title va-button"
-  }, /* @__PURE__ */ JSX3.createElement("b", null, props.project.name), (props.project instanceof DeclarationReflection2 || props.project instanceof ProjectReflection2) && props.project.packageVersion && /* @__PURE__ */ JSX3.createElement("span", {
+  }, /* @__PURE__ */ JSX3.createElement("b", null, props.project.name), (props.project instanceof DeclarationReflection || props.project instanceof ProjectReflection) && props.project.packageVersion && /* @__PURE__ */ JSX3.createElement("span", {
     class: "version-badge"
   }, "v", props.project.packageVersion)), /* @__PURE__ */ JSX3.createElement("button", {
     id: "tsd-search-trigger",
@@ -293,18 +249,9 @@ function toolbar(context) {
   }, Object.entries(context.options.getValue("navigationLinks")).map(([label, url]) => /* @__PURE__ */ JSX3.createElement("a", {
     href: url,
     class: "va-button"
-  }, /* @__PURE__ */ JSX3.createElement("span", null, label), /* @__PURE__ */ JSX3.createElement("svg", {
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }, /* @__PURE__ */ JSX3.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M1.52346 0.380859H15.6187V14.4761H13.333V4.28282L2.33158 15.2842L0.715332 13.668L11.7167 2.66657H1.52346V0.380859Z",
-    fill: "currentColor"
-  })))))), /* @__PURE__ */ JSX3.createElement("dialog", {
+  }, /* @__PURE__ */ JSX3.createElement("span", null, label), /* @__PURE__ */ JSX3.createElement("i", {
+    class: "va-icon va-icon--external"
+  }))))), /* @__PURE__ */ JSX3.createElement("dialog", {
     id: "tsd-search",
     "aria-label": i18n3.theme_search()
   }, /* @__PURE__ */ JSX3.createElement("input", {
@@ -332,6 +279,49 @@ function toolbar(context) {
 // src/partials/layout.tsx
 import { extname } from "path";
 import { JSX as JSX4 } from "typedoc";
+
+// src/utils.ts
+import {
+  DeclarationReflection as DeclarationReflection2,
+  ProjectReflection as ProjectReflection2,
+  ReflectionKind
+} from "typedoc";
+function getDisplayName(refl) {
+  let version = "";
+  if ((refl instanceof DeclarationReflection2 || refl instanceof ProjectReflection2) && refl.packageVersion) {
+    version = ` - v${refl.packageVersion}`;
+  }
+  return `${refl.name}${version}`;
+}
+var rootsCache = new WeakMap;
+function getHierarchyRoots(project) {
+  const cached = rootsCache.get(project);
+  if (cached)
+    return cached;
+  const allClasses = project.getReflectionsByKind(ReflectionKind.ClassOrInterface);
+  const roots = allClasses.filter((refl) => {
+    if (!refl.implementedBy && !refl.extendedBy) {
+      return false;
+    }
+    if (!refl.implementedTypes && !refl.extendedTypes) {
+      return true;
+    }
+    const types = [
+      ...refl.implementedTypes || [],
+      ...refl.extendedTypes || []
+    ];
+    return types.every((type) => !type.visit({
+      reference(ref) {
+        return ref.reflection !== undefined;
+      }
+    }));
+  });
+  const result = roots.sort((a, b) => a.name.localeCompare(b.name));
+  rootsCache.set(project, result);
+  return result;
+}
+
+// src/partials/layout.tsx
 function layout(context) {
   return (template, props) => /* @__PURE__ */ JSX4.createElement("html", {
     class: "default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varvara-typedoc-theme",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "author": "Marc Mariné <shenobi@gmail.com>",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "varvara-css": "^0.7.4"
+    "varvara-css": "^0.8.0"
   },
   "devDependencies": {
     "@types/bun": "latest"