v.1.5.0 - improve table of contents

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2023-11-10
+
+### Changed
+
+- Improve table of contents:
+	- Add `.bookmark` element to individual extension sections to ensure there is an accurate location from the table of contents that does not result in upper rows of the snippets table being partially obscured.
+	- Add an entry for category sections to table of contents even if there are no snippets for that category.
+- Add a custom margin for paragraphs to make spacing more consistent.
+
 ## [1.4.0] - 2023-11-10
 
 ### Changed

package.json

@@ -7,7 +7,7 @@
   },
   "description": "View and edit all your snippets in one purty place. Yee-haw!",
   "icon": "img/logo.webp",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "engines": {
     "vscode": "^1.4.0",
     "node": ">=12.0.0"

src/view/category-section.js

@@ -4,7 +4,7 @@ let {
 } = require("./file-section");
 let format = require("../helper/format");
 
-const notFoundHTML = `<p class="empty">Oucho Gaucho! 🌵 Nothing to round up! 🤠</p>`;
+const notFoundHTML = `<p>Oucho Gaucho! 🌵 Nothing to round up! 🤠</p>`;
 
 /**
  * Creates the HTML for a section for a category of snippets e.g. "project" for snippets defined in
@@ -44,7 +44,7 @@ let createExtensionCategorySection = (extensions) => {
 
   extensions.forEach((extension) => {
     let id = format.slugify(extension.id);
-    section += `<div><h3 id="${id}">${extension.name}</h3>`;
+    section += `<div class="extension"><div id="${id}" class="bookmark"></div><h3>${extension.name}</h3>`;
 
     extension.snippetsFiles.forEach((snippetsFile) => {
       section += createExtensionFileSection(snippetsFile);

src/view/styles.css

@@ -107,6 +107,11 @@ body {
   }
 }
 
+p {
+  margin: 0;
+  margin-block-start: 1.5rem;
+}
+
 code {
   font-family: var(--vscode-editor-font-family);
   font-size: calc(14px + 0.15vw);
@@ -173,8 +178,12 @@ section {
   margin-block-end: 4rem;
 }
 
+.extension,
 .file-section {
   position: relative;
+}
+
+.file-section {
   margin-block-end: 2.5rem;
 }
 
@@ -254,7 +263,7 @@ section#extension header :is(p, div) {
   top: calc(var(--h2-height) * -1);
 }
 
-section#extension .bookmark {
+.extension .file-section .bookmark {
   top: calc((var(--h2-height) + var(--extension-h3-height)) * -1);
 }
 

src/view/table-of-contents.js

@@ -37,12 +37,15 @@ const createCategoryEntry = (category, snippetsFiles) => {
     entries += createSnippetsFileEntry(snippetsFile);
   });
 
+  let title = `${format.capitalize(category)} Snippets`;
+  html += `<li><a href="#${category}">${title}</a>`;
+
   if (entries !== "") {
-    let title = `${format.capitalize(category)} Snippets`;
-    html += `<li><a href="#${category}">${title}</a><ul>`;
-    html += `${entries}</ul></li>`;
+    html += `<ul>${entries}</ul>`;
   }
 
+  html += `</li>`;
+
   return html;
 };
 

test/suite/view/category-section.test.js

@@ -47,9 +47,9 @@ describe("category-section.js", () => {
       assert.strictEqual(section.includes(expected), true);
     });
 
-    it("should create a section that states there are no snippets when there are no snippets", () => {
+    it("should state there are no snippets", () => {
       let section = createCategorySection([], "user");
-      let expected = `<p class="empty">Oucho Gaucho!`;
+      let expected = `<p>Oucho Gaucho!`;
 
       assert.strictEqual(section.includes(expected), true);
     });

todo.md

@@ -1,8 +1,5 @@
 # To Do
 
-1. Redo creating webp of logo. Quality is a bit too low.
-1. TOC entry for an extension leds to view with first row of the first file table being slightly obscured.
-
 ## Changes to consider
 
 1. Support for multi-root workspaces. For multi-root workspaces, a sub workspace can have its own snippets in its *.vscode* folder. You would need look in the `.code-workspace` to discover the sub workspaces and inspect them.