@growthbeaker/vscode-help-docs 0.1.0 → 0.1.2

package/README.md

@@ -9,13 +9,13 @@ VS Code extensions that ship user-facing docs have three unsatisfying options: o
 ## Install
 
 ```bash
-npm install vscode-help-docs
+npm install @growthbeaker/vscode-help-docs
 ```
 
 ## Quick Start
 
 ```typescript
-import { createHelpPanel } from "vscode-help-docs";
+import { createHelpPanel } from "@growthbeaker/vscode-help-docs";
 
 // In your extension's activate()
 const cmd = vscode.commands.registerCommand("myExtension.openHelp", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growthbeaker/vscode-help-docs",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A reusable VS Code webview panel that renders a folder of markdown files with a navigation sidebar",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/webview/main.js

@@ -139,14 +139,17 @@
     const fragment = document.createDocumentFragment();
 
     for (const node of tree) {
-      fragment.appendChild(createNavNode(node));
+      fragment.appendChild(createNavNode(node, 0));
     }
 
     sidebar.appendChild(fragment);
   }
 
   /** Create a DOM element for a nav tree node */
-  function createNavNode(node) {
+  function createNavNode(node, depth) {
+    var basePadding = 16;
+    var depthIndent = depth * 16;
+
     if (node.type === 'folder') {
       const details = document.createElement('details');
       details.className = 'nav-folder';
@@ -156,6 +159,7 @@
 
       const summary = document.createElement('summary');
       summary.className = 'nav-folder-header';
+      summary.style.paddingLeft = (basePadding + depthIndent) + 'px';
       summary.textContent = node.title;
       details.appendChild(summary);
 
@@ -175,7 +179,7 @@
 
       if (node.children) {
         for (const child of node.children) {
-          details.appendChild(createNavNode(child));
+          details.appendChild(createNavNode(child, depth + 1));
         }
       }
 
@@ -183,6 +187,7 @@
     } else {
       const link = document.createElement('a');
       link.className = 'nav-item';
+      link.style.paddingLeft = (basePadding + depthIndent + 16) + 'px';
       link.textContent = node.title;
       link.href = '#';
       link.dataset.path = node.path;

package/src/webview/styles.css

@@ -24,8 +24,8 @@ body {
 /* --- Navigation Sidebar --- */
 
 .nav-sidebar {
-  width: 220px;
-  min-width: 180px;
+  width: 320px;
+  min-width: 220px;
   background: var(--vscode-sideBar-background);
   border-right: 1px solid var(--vscode-panel-border);
   overflow-y: auto;
@@ -39,7 +39,7 @@ body {
 
 .nav-folder-header {
   display: block;
-  padding: 6px 16px;
+  padding: 6px 16px 6px 16px;
   cursor: pointer;
   font-weight: 600;
   font-size: 0.85em;
@@ -72,7 +72,7 @@ details[open] > .nav-folder-header::before {
 
 .nav-item {
   display: block;
-  padding: 4px 16px 4px 32px;
+  padding: 4px 16px 4px 32px; /* padding-left overridden dynamically by main.js */
   color: var(--vscode-foreground);
   text-decoration: none;
   font-size: 0.9em;