0.24.0 - Added Project snippets section

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,13 +11,11 @@ assignees: ''
 
 A clear and concise description of what the bug is.
 
-## To Reproduce 
+## To Reproduce
 
 Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
+1. Run command '...'
+2. Click on '....' etc.
 
 ## Expected behavior
 
@@ -27,11 +25,11 @@ A clear and concise description of what you expected to happen.
 
 If applicable, add screenshots to help explain your problem.
 
-## Version/environment
+## Environment information
 
 Please complete the following information:
-- On the main menu, go to *Help*, and select *About* from the drop down. Copy the information from the *About* dialog. 
-- If you are working remotely or using WSL, please state this too.
+- On the main menu, go to *Help*, and select *About* from the drop down. Copy the information from the *About* dialog.
+- Are you are working remotely or using WSL? Please state this too.
 
 ## Additional context
 

CHANGELOG.md

@@ -5,6 +5,22 @@ 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).
 
+## [0.24.0] - 2023-10-15
+
+### Added
+
+- Added **Project** snippets section. The source of the snippets is from files with the *.code-snippets* extension found in the *.vscode* folder in your workspace.
+- Added `scope` field for snippets (*snippets.js*).
+- Added GitHub issue template for bugs. This was done on github.com but edited locally.
+
+### Changed
+
+- The `id` attribute generated for `h3` headings is in the form of the *<section-id>-<title>*. Now the `title` portion is slugified. This ensures that there are no unwanted characters that can break links for table of contents.
+- The `scope` field is shown in tables when there is at least one instance of the field in the **project**, **user** and **vs code** snippet files.
+- Updated animated image demonstrating UI to reflect that project snippets are there now also. I used WebP instead of GIF for better compression/quality.
+- Some refactoring to improve readability.
+- Updated tests to reflect changes.
+
 ## [0.23.0] - 2023-10-14
 
 ### Changed

README.md

@@ -22,16 +22,17 @@ alt="Extension file size in bytes">
 </p>
 
 <p align="center">
-<img src="img/screenshots/demo.gif" alt="demo"/>
+<img src="img/screenshots/demo.webp" width="556" height="482"
+alt="recording of  exploring view opened from the command 'Snippets Ranger: Show me that dur Range, Partner'. An entry of 'Markdown snippets' from the table of contents is selected and clicked, it takes the user down to the table with the snippets displayed for that extension."/>
 </p>
 
-**Snippets are grouped as: *User*, *Extension*, and *VS Code*.**
+**Snippets are grouped as: *Project*, *User*, *Extension*, and *VS Code*.**
 
 The table of contents facilitates quick navigation to a snippets set. Pressing the <kbd>Home</kbd> key will return you to the table of contents.
 
 There are sticky headings to ensure you can browse through long snippet lists without losing context. 🦎🔝
 
-You can go to the source snippet file directly with the *View Source File* button. The extension uses **the exact same source files as VS Code**.
+You can go to the source snippet file directly with the *View Source File* button. The extension uses **the exact same source files as VS Code does**.
 
 ![view source screenshot](img/screenshots/view-source.png)
 
@@ -71,7 +72,7 @@ You can show your appreciation by:
 1. Leaving a positive review in the [visual studio marketplace](https://marketplace.visualstudio.com/items?itemName=robole.snippets-ranger&ssr=false#review-details).
 1. Starring the repo 🌟.
 
-This will **help other people find the extension**. It will **offer me encouragement** to continue maintenance, and can provide **a path to dedicating more time to open-source** in the future.
+This will **help other people find the extension**. It will **encourage me to continue maintenance**, and may provide **a path to dedicating more time to open-source** in the future.
 
 ## Learn more about snippets
 

package.json

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

src/css/styles.css

@@ -18,7 +18,7 @@
   --code-color-light-mode: #7a5600;
   --code-color-dark-mode: #d7ba7d;
   --table-action-column-width: 80px;
-  --table-min-width: 600px;
+  --table-min-width: 800px;
 }
 
 *,
@@ -50,9 +50,7 @@ body.vscode-high-contrast {
   border-radius: 10px;
 }
 
-section#user h2,
-section#extension h2,
-section#app h2,
+section h2,
 h3,
 h4 {
   font-family: var(--vscode-font-family);
@@ -66,9 +64,7 @@ h4 {
   min-width: var(--table-min-width);
 }
 
-section#user h2,
-section#extension h2,
-section#app h2 {
+section h2 {
   top: 0;
   z-index: 1000;
   text-align: center;
@@ -130,6 +126,26 @@ button {
   border-radius: inherit;
 }
 
+@media (min-width: 1000px) {
+  body,
+  body.vscode-dark,
+  body.vscode-light,
+  body.vscode-high-contrast {
+    width: 90%;
+  }
+
+  #toTopLink {
+    --size: 30px;
+    right: 6%;
+  }
+}
+
+@media (min-width: 1600px) {
+  #toTopLink {
+    right: calc((100vw - 1592px) / 2);
+  }
+}
+
 table {
   table-layout: fixed;
   min-width: var(--table-min-width);
@@ -192,6 +208,50 @@ td:nth-child(5) {
   width: var(--table-action-column-width);
 }
 
+.scoped-table :is(th:nth-child(3), td:nth-child(3)) {
+  width: 25%;
+}
+
+/* using percentage value breaks down here, maybe because of long words */
+.scoped-table :is(th:nth-child(5),td:nth-child(5)) {
+  width: clamp(120px, 13vw ,240px);
+}
+
+.scoped-table :is(th:nth-child(6),td:nth-child(6)) {
+  width: var(--table-action-column-width);
+}
+
+@media (min-width: 1000px) {
+  th:nth-child(1),
+  td:nth-child(1) {
+    width: 15%;
+  }
+
+  th:nth-child(2),
+  td:nth-child(2) {
+    display: table-cell;
+  }
+
+  th:nth-child(3),
+  td:nth-child(3) {
+    width: 25%;
+  }
+
+  th:nth-child(4),
+  td:nth-child(4) {
+    width: calc(40% - var(--table-action-column-width));
+  }
+
+	.scoped-table :is(th:nth-child(2), td:nth-child(2)) {
+		width: 15%;
+	}
+
+	.scoped-table :is(th:nth-child(3), td:nth-child(3)) {
+		width: 20%;
+	}
+}
+
+
 body.vscode-dark td,
 body.vscode-high-contrast td {
   border-bottom: 1px solid var(--table-divider-color-dark-mode);
@@ -235,9 +295,7 @@ body.vscode-light {
   color: var(--body-color-light-mode);
 }
 
-body.vscode-light section#user h2,
-body.vscode-light section#extension h2,
-body.vscode-light section#app h2,
+body.vscode-light section h2,
 body.vscode-light h3,
 body.vscode-light h4 {
   background-color: var(--body-bg-color-light-mode);
@@ -263,9 +321,7 @@ body.vscode-dark {
   color: var(--body-color-dark-mode);
 }
 
-body.vscode-dark section#user h2,
-body.vscode-dark section#extension h2,
-body.vscode-dark section#app h2,
+body.vscode-dark section h2,
 body.vscode-dark h3,
 body.vscode-dark h4 {
   background-color: var(--body-bg-color-dark-mode);
@@ -295,9 +351,7 @@ body.vscode-high-contrast {
   color: var(--body-color-contrast-mode);
 }
 
-body.vscode-high-contrast section#user h2,
-body.vscode-high-contrast section#extension h2,
-body.vscode-high-contrast section#app h2,
+body.vscode-high-contrast section h2,
 body.vscode-high-contrast h3,
 body.vscode-high-contrast h4 {
   background-color: var(--body-bg-color-contrast-mode);
@@ -370,43 +424,3 @@ body.vscode-high-contrast button {
   display: block;
   margin: 0 auto;
 }
-
-@media (min-width: 1000px) {
-  body,
-  body.vscode-dark,
-  body.vscode-light,
-  body.vscode-high-contrast {
-    width: 90%;
-  }
-
-  #toTopLink {
-    --size: 30px;
-    right: 6%;
-  }
-
-  th:nth-child(1),
-  td:nth-child(1) {
-    width: 15%;
-  }
-
-  th:nth-child(2),
-  td:nth-child(2) {
-    display: table-cell;
-  }
-
-  th:nth-child(3),
-  td:nth-child(3) {
-    width: 25%;
-  }
-
-  th:nth-child(4),
-  td:nth-child(4) {
-    width: calc(40% - var(--table-action-column-width));
-  }
-}
-
-@media (min-width: 1600px) {
-  #toTopLink {
-    right: calc((100vw - 1592px) / 2);
-  }
-}

src/environment.js

@@ -3,7 +3,7 @@ const fs = require("fs");
 // eslint-disable-next-line import/no-unresolved
 const vscode = require("vscode");
 const glob = require("glob");
-const ExtensionSnippets = require("./extension-snippets");
+const ExtensionSnippets = require("./extension-snippets-collection");
 
 /**
  * Environment information.
@@ -65,7 +65,7 @@ class Environment {
    * Get the filepaths for all of the User Snippets files.
    * @returns {Promise} Promise with array of filepaths.
    */
-  async getUserSnippetsPaths() {
+  async getUserSnippetFilepaths() {
     let list = [];
 
     let filenames = await fs.promises
@@ -88,7 +88,7 @@ class Environment {
    * @return {Promise} Promise with array of filepaths.
    */
   // eslint-disable-next-line class-methods-use-this
-  async getAppSnippetsPaths() {
+  async getAppSnippetFilepaths() {
     let extensionRoot = resolve(vscode.env.appRoot, "extensions");
     return new Promise((fufil, reject) => {
       glob(`${extensionRoot}/**/snippets/*.code-snippets`, {}, (err, files) => {
@@ -101,13 +101,33 @@ class Environment {
     });
   }
 
+	/**
+   * Get the filepaths for all of the snippets files in the opened project.
+   * @return {Promise} Promise with array of filepaths.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  async getProjectSnippetFilepaths() {
+    let root = vscode.workspace.workspaceFolders[0].uri.fsPath
+
+    return new Promise((fufil, reject) => {
+      glob(`${root}/.vscode/*.code-snippets`, { dot : true}, (err, files) => {
+        if (err) {
+          reject(err);
+        } else {
+          fufil(files);
+        }
+      });
+    });
+  }
+
   /**
    * Get the filepaths for all of Extension Snippets file.
    * @return {Promise} Promise with array of filepaths.
    */
   // eslint-disable-next-line class-methods-use-this
   async getExtensionSnippets() {
     let array = [];
+
     vscode.extensions.all.forEach((extension) => {
       let { packageJSON } = extension;
       if (

src/extension-snippets.js → src/extension-snippets-collection.js

@@ -2,7 +2,7 @@
  * Snippets for a particular extension. An Extension can have snippets declared in
  * different files. One snippet file can be associated with 1 or more languages.
  */
-class ExtensionSnippets {
+class ExtensionSnippetsCollection {
   constructor(name, displayName, publisher) {
     this.name = name;
     this.displayName = displayName;
@@ -33,4 +33,4 @@ class ExtensionSnippets {
   }
 }
 
-module.exports = ExtensionSnippets;
+module.exports = ExtensionSnippetsCollection;

src/formatter.js

@@ -46,8 +46,8 @@ class Formatter {
   }
 
   /**
-   * Escapes all HTML content in the elements of an array and concatenates it into a string 
-	 * that can be consumed by a web page. Each value is appended with a HTML line break (BR tag).
+   * Escapes all th HTML content in the items of an array and concatenates it into a string 
+	 * that can be consumed by a web page. Each item is appended with a HTML line break (BR tag).
    * @param {Array} array Array of values
    */
   static escapeBody(array) {
@@ -67,6 +67,20 @@ class Formatter {
     let array = text.split(eolChar);
     return array;
   }
+
+	/**
+ * Produces an ID from the text provided that can be used as an URL fragment. Does it in the same style as GitHub.
+ * Based on source code: https://github.com/jch/html-pipeline/blob/master/lib/html/pipeline/toc_filter.rb
+ * @param {string} text - The text to slugify
+ * @returns {string} The slug.
+ */
+static slugify(text) {
+	const PUNCTUATION_REGEXP = /[^\p{L}\p{M}\p{N}\p{Pc}\- ]/gu;
+
+  let slug = text.trim().toLowerCase();
+  slug = slug.replace(PUNCTUATION_REGEXP, "").replace(/ /g, "-");
+  return slug;
+}
 }
 
 module.exports = Formatter;