Update docs

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## [2.1.0] - 2020-08-04
+
+- [#44](https://github.com/estruyf/vscode-front-matter/issues/45): Added article creation command
+- [#45](https://github.com/estruyf/vscode-front-matter/issues/45): WSL support added
+- [#46](https://github.com/estruyf/vscode-front-matter/issues/46): Make the tag pickers render in full width
+
+## [2.0.1] - 2020-07-27
+
+- [#42](https://github.com/estruyf/vscode-front-matter/issues/42): Small enhancement to the table layout
+- [#43](https://github.com/estruyf/vscode-front-matter/issues/43): Fix for collapsible sections and taxonomy picker
+
 ## [2.0.0] - 2020-07-23
 
 - Redesigned sidebar panel

README.md

@@ -131,7 +131,25 @@ When adding files in the folder, you'll be able to run the `Front Matter: New ar
   <img src="./assets/syntax-highlighting.png" alt="Shortcode syntax highlighting" style="display: inline-block" />
 </p>
 
-## Available commands:
+## Available commands
+
+**Front Matter: Create content**
+
+With this command, you can easily create content in your project within the registered folders and provided templates.
+
+<p align="center">
+  <img src="./assets/v2.1.0/create-content.png" alt="Create content" style="display: inline-block" />
+</p>
+
+You can register and unregister folders by right-clicking on the folder in your VSCode explorer panel.
+
+<p align="center">
+  <img src="./assets/v2.1.0/register-folder.png" alt="Register/unregister a folder" style="display: inline-block" />
+</p>
+
+Once you registered a folder and a template has been defined ([how to create a template](#creating-articles-from-templates)), you can make use of this command. 
+
+> **Info**: The benefit of this command is that you do not need to search the folder in which you want to create a new article/page/... The extension will do it automatically for you.
 
 **Front Matter: Create <tag | category>**
 
@@ -311,6 +329,22 @@ Allows you to specify a title and script path (starting relative from the root o
 
 > **Important**: When the command execution would fail when it cannot find the `node` command. You are able to specify your path to the node app. This is for instance required when using `nvm`.
 
+### `frontMatter.content.folders`
+
+This array of folders defines where the extension can easily create new content by running the create article command.
+
+```json
+{
+  "frontMatter.content.folders": [{
+    "title": "Articles",
+    "fsPath": "<the path to the folder>",
+    "paths": ["<wsl-folder-path>"]
+  }]
+}
+```
+
+> **Important**: This setting can be configured by right-clicking on a folder in the VSCode file explorer view and clicking on the `Front Matter: Register folder` menu item.
+
 ## Feedback / issues / ideas
 
 Please submit them via creating an issue in the project repository: [issue list](https://github.com/estruyf/vscode-front-matter/issues).

assets/media/styles.css

@@ -21,6 +21,14 @@
   }
 }
 
+.absolute {
+  position: absolute !important;
+}
+
+.w-full {
+  width: 100% !important;
+}
+
 .collapsible__body,
 .ext_settings {
 	padding: 1rem 1.25rem;

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-front-matter",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -94,6 +94,21 @@
 			"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
 			"dev": true
 		},
+		"@types/lodash": {
+			"version": "4.14.172",
+			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz",
+			"integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
+			"dev": true
+		},
+		"@types/lodash.uniqby": {
+			"version": "4.7.6",
+			"resolved": "https://registry.npmjs.org/@types/lodash.uniqby/-/lodash.uniqby-4.7.6.tgz",
+			"integrity": "sha512-9wBhrm1y6asW50Joj6tsySCNUgzK2tCqL7vtKIej0E9RyeBFdcte7fxUosmFuMoOU0eHqOMK76kCCrK99jxHgg==",
+			"dev": true,
+			"requires": {
+				"@types/lodash": "*"
+			}
+		},
 		"@types/mdast": {
 			"version": "3.0.7",
 			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
@@ -2759,6 +2774,11 @@
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
 			"dev": true
 		},
+		"lodash.uniqby": {
+			"version": "4.7.0",
+			"resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+			"integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+		},
 		"loose-envify": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

package.json

@@ -3,7 +3,7 @@
 	"displayName": "Front Matter",
 	"description": "Simplifies working with front matter of your articles. Useful extension when you are using a static site generator like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
 	"icon": "assets/front-matter.png",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"preview": false,
 	"publisher": "eliostruyf",
 	"galleryBanner": {
@@ -53,6 +53,9 @@
 		"onCommand:frontMatter.setLastModifiedDate",
 		"onCommand:frontMatter.generateSlug",
 		"onCommand:frontMatter.createFromTemplate",
+		"onCommand:frontMatter.registerFolder",
+		"onCommand:frontMatter.unregisterFolder",
+		"onCommand:frontMatter.createContent",
 		"onView:frontMatter.explorer"
 	],
 	"main": "./dist/extension",
@@ -171,6 +174,11 @@
 					"type": "array",
 					"default": [],
 					"markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument."
+				},
+				"frontMatter.content.folders": {
+					"type": "array",
+					"default": [],
+					"markdownDescription": "This array of folders defines where the extension can easily create new content by running the create article command."
 				}
 			}
 		},
@@ -214,6 +222,18 @@
 			{
 				"command": "frontMatter.createFromTemplate",
 				"title": "Front Matter: New article from template"
+			},
+			{
+				"command": "frontMatter.registerFolder",
+				"title": "Front Matter: Register folder"
+			},
+			{
+				"command": "frontMatter.unregisterFolder",
+				"title": "Front Matter: Unregister folder"
+			},
+			{
+				"command": "frontMatter.createContent",
+				"title": "Front Matter: Create content"
 			}
 		],
 		"menus": {
@@ -222,6 +242,16 @@
 					"command": "frontMatter.createFromTemplate",
 					"when": "explorerResourceIsFolder",
 					"group": "Front Matter@1"
+				},
+				{
+					"command": "frontMatter.registerFolder",
+					"when": "explorerResourceIsFolder",
+					"group": "Front Matter@2"
+				},
+				{
+					"command": "frontMatter.unregisterFolder",
+					"when": "explorerResourceIsFolder && resourcePath in frontMatter.registeredFolders",
+					"group": "Front Matter@3"
 				}
 			]
 		},
@@ -247,6 +277,7 @@
 		"@iarna/toml": "2.2.3",
 		"@types/glob": "7.1.3",
 		"@types/js-yaml": "3.12.1",
+		"@types/lodash.uniqby": "4.7.6",
 		"@types/mocha": "^5.2.6",
 		"@types/node": "10.17.48",
 		"@types/react": "17.0.0",
@@ -269,5 +300,7 @@
 		"webpack": "4.44.2",
 		"webpack-cli": "3.3.12"
 	},
-	"dependencies": {}
+	"dependencies": {
+		"lodash.uniqby": "4.7.0"
+	}
 }

src/commands/Folders.ts

@@ -0,0 +1,134 @@
+import { commands, Uri, workspace, window } from "vscode";
+import { CONFIG_KEY, EXTENSION_NAME, SETTINGS_CONTENT_FOLDERS } from "../constants";
+import { basename } from "path";
+import { ContentFolder } from "../models";
+import uniqBy = require("lodash.uniqby");
+import { Template } from "./Template";
+
+export class Folders {
+
+  /**
+   * Create content in a registered folder
+   * @returns 
+   */
+  public static async create() {
+    const folders = Folders.get();
+
+    if (!folders || folders.length === 0) {
+      window.showWarningMessage(`${EXTENSION_NAME}: There are no known content locations defined in this project.`);
+      return;
+    }
+
+    const selectedFolder = await window.showQuickPick(folders.map(f => f.title), {
+      placeHolder: `Select where you want to create your content`
+    });
+
+    if (!selectedFolder) {
+      window.showWarningMessage(`${EXTENSION_NAME}: You didn't select a place where you wanted to create your content.`);
+      return;
+    }
+
+    const location = folders.find(f => f.title === selectedFolder);
+    if (location) {
+      const folderPath = Folders.getFolderPath(Uri.file(location.fsPath));
+      if (folderPath) {
+        Template.create(folderPath);
+      }
+    }
+  }
+
+  /**
+   * Register the new folder path
+   * @param folder 
+   */
+  public static async register(folder: Uri) {
+    if (folder && folder.fsPath) {
+      const wslPath = folder.fsPath.replace(/\//g, '\\');
+
+      let folders = Folders.get();
+
+      const exists = folders.find(f => f.paths.includes(folder.fsPath) || f.paths.includes(wslPath));
+
+      if (exists) {
+        return window.showInformationMessage(`Folder is already registered`);
+      }
+
+      const folderName = await window.showInputBox({  
+        prompt: `Which name would you like to specify for this folder?`,
+        placeHolder: `Folder name`,
+        value: basename(folder.fsPath)
+      });
+
+      folders.push({
+        title: folderName,
+        fsPath: folder.fsPath,
+        paths: folder.fsPath === wslPath ? [folder.fsPath] : [folder.fsPath, wslPath]
+      } as ContentFolder);
+
+      folders = uniqBy(folders, f => f.fsPath);
+      await Folders.update(folders);
+    }
+
+		Folders.updateVsCodeCtx();
+  }
+
+  /**
+   * Unregister a folder path
+   * @param folder 
+   */
+  public static async unregister(folder: Uri) {
+    if (folder && folder.path) {
+      let folders = Folders.get();
+      folders = folders.filter(f => f.fsPath !== folder.fsPath);
+      await Folders.update(folders);
+    }
+    
+    Folders.updateVsCodeCtx();
+  }
+
+  /**
+   * Update the registered folders context
+   */
+  public static updateVsCodeCtx() {
+    const folders = Folders.get();
+    let allFolders: string[] = [];
+    for (const folder of folders) {
+      allFolders = [...allFolders, ...folder.paths]
+    }
+    commands.executeCommand('setContext', 'frontMatter.registeredFolders', allFolders);
+  }
+
+  /**
+   * Retrieve the folder path
+   * @param folder 
+   * @returns 
+   */
+  public static getFolderPath(folder: Uri) {
+    let folderPath = "";
+		if (folder && folder.fsPath) {
+			folderPath = folder.fsPath;
+		} else if (workspace.workspaceFolders && workspace.workspaceFolders.length > 0) {
+			folderPath = workspace.workspaceFolders[0].uri.fsPath;
+		}
+    return folderPath;
+  }
+
+  /**
+   * Get the folder settings
+   * @returns 
+   */
+  private static get() {
+    const config = workspace.getConfiguration(CONFIG_KEY);
+    const folders: ContentFolder[] = config.get(SETTINGS_CONTENT_FOLDERS) as ContentFolder[];
+    return folders;
+  }
+  
+  /**
+   * Update the folder settings
+   * @param folders 
+   */
+  private static async update(folders: ContentFolder[]) {
+    const config = workspace.getConfiguration(CONFIG_KEY);
+    await config.update(SETTINGS_CONTENT_FOLDERS, folders);
+  }
+}

src/constants/settings.ts

@@ -26,4 +26,6 @@ export const SETTING_TEMPLATES_PREFIX = "templates.prefix";
 
 export const SETTING_PANEL_FREEFORM = "panel.freeform";
 
-export const SETTING_CUSTOM_SCRIPTS = "custom.scripts";
+export const SETTING_CUSTOM_SCRIPTS = "custom.scripts";
+
+export const SETTINGS_CONTENT_FOLDERS = "content.folders";

src/extension.ts

@@ -1,5 +1,6 @@
 import * as vscode from 'vscode';
 import { Article, Settings, StatusListener } from './commands';
+import { Folders } from './commands/Folders';
 import { Template } from './commands/Template';
 import { TaxonomyType } from './models';
 import { TagType } from './viewpanel/TagType';
@@ -9,7 +10,7 @@ let frontMatterStatusBar: vscode.StatusBarItem;
 let debouncer: { (fnc: any, time: number): void; };
 let collection: vscode.DiagnosticCollection;
 
-export function activate({ subscriptions, extensionUri }: vscode.ExtensionContext) {
+export async function activate({ subscriptions, extensionUri }: vscode.ExtensionContext) {
 	collection = vscode.languages.createDiagnosticCollection('frontMatter');
 
 	const explorerSidebar = ExplorerView.getInstance(extensionUri);
@@ -59,14 +60,11 @@ export function activate({ subscriptions, extensionUri }: vscode.ExtensionContex
 		Article.generateSlug();
 	});
 
-	let createFromTemplate = vscode.commands.registerCommand('frontMatter.createFromTemplate', (e: vscode.Uri) => {
-		let folderPath = "";
-		if (e && e.fsPath) {
-			folderPath = e.fsPath;
-		} else if (vscode.workspace.workspaceFolders && vscode.workspace.workspaceFolders.length > 0) {
-			folderPath = vscode.workspace.workspaceFolders[0].uri.fsPath;
-		}
-		Template.create(folderPath);
+	let createFromTemplate = vscode.commands.registerCommand('frontMatter.createFromTemplate', (folder: vscode.Uri) => {
+		const folderPath = Folders.getFolderPath(folder);
+    if (folderPath) {
+      Template.create(folderPath);
+    }
 	});
 
 	const toggleDraftCommand = 'frontMatter.toggleDraft';
@@ -75,6 +73,15 @@ export function activate({ subscriptions, extensionUri }: vscode.ExtensionContex
 		triggerShowDraftStatus();
 	});
 
+	// Register project folders
+	const registerFolder = vscode.commands.registerCommand(`frontMatter.registerFolder`, Folders.register);
+
+	const unregisterFolder = vscode.commands.registerCommand(`frontMatter.unregisterFolder`, Folders.unregister);
+
+	const createContent = vscode.commands.registerCommand(`frontMatter.createContent`, Folders.create);
+
+	Folders.updateVsCodeCtx();
+
 	// Create the status bar
  	frontMatterStatusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 100);
 	frontMatterStatusBar.command = toggleDraftCommand;
@@ -99,6 +106,9 @@ export function activate({ subscriptions, extensionUri }: vscode.ExtensionContex
 	subscriptions.push(generateSlug);
 	subscriptions.push(createFromTemplate);
 	subscriptions.push(toggleDraft);
+	subscriptions.push(registerFolder);
+	subscriptions.push(unregisterFolder);
+	subscriptions.push(createContent);
 }
 
 export function deactivate() {}
@@ -115,4 +125,4 @@ const debounceShowDraftTrigger = () => {
     clearTimeout(timeout);
     timeout = setTimeout(functionCall, time) as any;
   };
-};
+};

src/models/ContentFolder.ts

@@ -0,0 +1,5 @@
+export interface ContentFolder {
+  title: string;
+  fsPath: string;
+  paths: string[];
+}

src/models/index.ts

@@ -1 +1,3 @@
+export * from './ContentFolder';
+export * from './PanelSettings';
 export * from './TaxonomyType';

src/viewpanel/ViewPanel.tsx

@@ -58,7 +58,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           settings && metadata && <Actions metadata={metadata} settings={settings} />
         }
 
-        <Collapsible title="Metadata">
+        <Collapsible title="Metadata" className={`absolute w-full`}>
           {
             <TagPicker type={TagType.keywords} 
                        icon={<SymbolKeywordIcon />}

src/viewpanel/components/Collapsible.tsx

@@ -3,10 +3,11 @@ import { VsCollapsible } from './VscodeComponents';
 
 export interface ICollapsibleProps {
   title: string;
+  className?: string;
   sendUpdate?: (open: boolean) => void;
 }
 
-export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({children, title, sendUpdate}: React.PropsWithChildren<ICollapsibleProps>) => {
+export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
   const [ isOpen, setIsOpen ] = React.useState(true);
 
   // This is a work around for a lit-element issue of duplicate slot names
@@ -23,7 +24,7 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({childre
 
   return (
     <VsCollapsible title={title} onClick={triggerClick} open={isOpen}>
-      <div className={`section collapsible__body`} slot="body">
+      <div className={`section collapsible__body ${className || ""}`} slot="body">
         {children}
       </div>
     </VsCollapsible>

src/viewpanel/components/SeoFieldInfo.tsx

@@ -13,8 +13,7 @@ export const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ titl
   return (
     <VsTableRow>
       <VsTableCell className={`table__cell table__title`}>{title}</VsTableCell>
-      <VsTableCell className={`table__cell`}>{value}</VsTableCell>
-      <VsTableCell className={`table__cell`}>{recommendation}</VsTableCell>
+      <VsTableCell className={`table__cell`}>{value}/{recommendation}</VsTableCell>
       <VsTableCell className={`table__cell table__cell__validation`}>
         { isValid !== undefined ? <ValidInfo isValid={isValid} /> : <span>-</span> }
       </VsTableCell>

src/viewpanel/components/SeoStatus.tsx

@@ -38,25 +38,24 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
             <VsTableHeader slot="header">
               <VsTableHeaderCell className={`table__cell`}>Property</VsTableHeaderCell>
               <VsTableHeaderCell className={`table__cell`}>Length</VsTableHeaderCell>
-              <VsTableHeaderCell className={`table__cell`}>Recommended</VsTableHeaderCell>
               <VsTableHeaderCell className={`table__cell`}>Valid</VsTableHeaderCell>
             </VsTableHeader>
             <VsTableBody slot="body">
               { 
                 (title && seo.title > 0) && (
-                  <SeoFieldInfo title={`title`} value={`${title.length} chars`} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
+                  <SeoFieldInfo title={`title`} value={title.length} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
                 )
               }
 
               {
                 (data[descriptionField] && seo.description > 0) && (
-                  <SeoFieldInfo title={descriptionField} value={`${data[descriptionField].length} chars`} recommendation={`${seo.description} chars`} isValid={data[descriptionField].length <= seo.description} />
+                  <SeoFieldInfo title={descriptionField} value={data[descriptionField].length} recommendation={`${seo.description} chars`} isValid={data[descriptionField].length <= seo.description} />
                 )
               }
 
               {
                 (seo.content > 0 && data?.articleDetails?.wordCount) && (
-                  <SeoFieldInfo title={`Article length`} value={`${data?.articleDetails?.wordCount} words`} recommendation={`${seo.content} words`} />
+                  <SeoFieldInfo title={`Article length`} value={data?.articleDetails?.wordCount} recommendation={`${seo.content} words`} />
                 )
               }
             </VsTableBody>

src/viewpanel/components/TagPicker.tsx

@@ -143,12 +143,6 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                             ref: inputRef, 
                             onFocus: openMenu as any, 
                             onClick: openMenu as any,
-                            onKeyDown: (e) => {
-                              if (e.key === 'Enter') {
-                                e.preventDefault();
-                                insertUnkownTag(closeMenu);
-                              }
-                            },
                             onBlur: () => { 
                               closeMenu(); 
                               unsetFocus(); 
@@ -175,7 +169,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
               <ul className={`article__tags__dropbox ${isOpen ? "open" : "closed" }`} {...getMenuProps()}>
                 { 
                   isOpen ? options.filter((option) => filterList(option, inputValue)).map((item, index) => (
-                    <li {...getItemProps({ key: item, index, item })} >
+                    <li {...getItemProps({ key: item, index, item })}>
                       { item }
                     </li>
                   )) : null

src/webview/ExplorerView.ts

@@ -111,7 +111,11 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
           commands.executeCommand('workbench.action.openSettings', '@ext:eliostruyf.vscode-front-matter');
           break;
         case CommandToCode.openFile:
-          commands.executeCommand('revealFileInOS');
+          if (os.type() === "Linux" && vscodeEnv.remoteName?.toLowerCase() === "wsl") {
+            commands.executeCommand('remote-wsl.revealInExplorer');
+          } else {
+            commands.executeCommand('revealFileInOS');
+          }
           break;
         case CommandToCode.runCustomScript:
           this.runCustomScript(msg);
@@ -124,6 +128,8 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
               exec(`open ${wsPath}`);
             } else if (os.type() === "Windows_NT") {
               exec(`explorer ${wsPath}`);
+            } else if (os.type() === "Linux" && vscodeEnv.remoteName?.toLowerCase() === "wsl") {
+              exec('explorer.exe `wslpath -w "$PWD"`');
             } else {
               exec(`xdg-open ${wsPath}`);
             }