#28 - Align filename with the slug

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [2.2.0] - 2020-08-xx
 
+- [#28](https://github.com/estruyf/vscode-front-matter/issues/28): Align the file its name with the article slug
 - [#47](https://github.com/estruyf/vscode-front-matter/issues/47): Fix when table shows only value `0`
 - [#48](https://github.com/estruyf/vscode-front-matter/issues/48): Added new folder registration message + notification helper
 - [#49](https://github.com/estruyf/vscode-front-matter/issues/49): New initialize project command

README.md

@@ -202,7 +202,7 @@ title: Just a sample page with a title
 slug: sample-page-title
 ```
 
-You can also specify a prefix and suffix, which can be added to the slug if you want. Use the following settings to do this: `frontMatter.taxonomy.slugPrefix` and `frontMatter.taxonomy.slugSuffix`. By default, both options are not provided and will not add anything to the slug.
+You can also specify a prefix and suffix, which can be added to the slug if you want. Use the following settings to do this: `frontMatter.taxonomy.slugPrefix` and `frontMatter.taxonomy.slugSuffix`. By default, both options are not provided and will not add anything to the slug. Another setting is to allow you to sync the filename with the generated slug. The setting you need to turn on enable for this is `frontMatter.taxonomy.alignFilename`.
 
 > **Info**: At the moment, the extension only supports English stopwords.
 

package.json

@@ -114,6 +114,11 @@
 					"type": "string",
 					"markdownDescription": "Specify a suffix for the slug"
 				},
+				"frontMatter.taxonomy.alignFilename": {
+					"type": "boolean",
+					"default": false,
+					"markdownDescription": "Align the filename with the new slug when it gets generated."
+				},
 				"frontMatter.taxonomy.indentArrays": {
 					"type": "boolean",
 					"default": true,

src/commands/Article.ts

@@ -1,11 +1,12 @@
-import { SETTING_MODIFIED_FIELD } from './../constants/settings';
+import { SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX } from './../constants/settings';
 import * as vscode from 'vscode';
 import { TaxonomyType } from "../models";
-import { CONFIG_KEY, SETTING_DATE_FORMAT, EXTENSION_NAME, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_DATE_FIELD } from "../constants/settings";
+import { CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_DATE_FIELD } from "../constants/settings";
 import { format } from "date-fns";
 import { ArticleHelper, SettingsHelper, SlugHelper } from '../helpers';
 import matter = require('gray-matter');
 import { Notifications } from '../helpers/Notifications';
+import { extname, basename } from 'path';
 
 
 export class Article {
@@ -144,11 +145,14 @@ export class Article {
   /**
    * Generate the slug based on the article title
    */
-	public static generateSlug() {
+	public static async generateSlug() {
     const config = vscode.workspace.getConfiguration(CONFIG_KEY);
     const prefix = config.get(SETTING_SLUG_PREFIX) as string;
     const suffix = config.get(SETTING_SLUG_SUFFIX) as string;
+    const updateFileName = config.get(SETTING_SLUG_UPDATE_FILE_NAME) as string;
+    const filePrefix = config.get<string>(SETTING_TEMPLATES_PREFIX);
     const editor = vscode.window.activeTextEditor;
+
     if (!editor) {
       return;
     }
@@ -159,10 +163,42 @@ export class Article {
     }
 
     const articleTitle: string = article.data["title"];
-    const slug = SlugHelper.createSlug(articleTitle);
+    let slug = SlugHelper.createSlug(articleTitle);
     if (slug) {
-      article.data["slug"] = `${prefix}${slug}${suffix}`;
+      slug = `${prefix}${slug}${suffix}`;
+      article.data["slug"] = slug;
       ArticleHelper.update(editor, article);
+
+      // Check if the file name should be updated by the slug
+      // This is required for systems like Jekyll
+      if (updateFileName) {
+        const editor = vscode.window.activeTextEditor;
+        if (editor) {
+          const ext = extname(editor.document.fileName);
+          const fileName = basename(editor.document.fileName);
+
+          let slugName = slug.startsWith("/") ? slug.substring(1) : slug;
+          slugName = slugName.endsWith("/") ? slugName.substring(0, slugName.length - 1) : slugName;
+
+          let newFileName = `${slugName}${ext}`;
+          if (filePrefix && typeof filePrefix === "string") {
+            newFileName = `${format(new Date(), filePrefix)}-${newFileName}`;
+          }
+
+          const newPath = editor.document.uri.fsPath.replace(fileName, newFileName);
+
+          try {
+            await editor.document.save();
+
+            await vscode.workspace.fs.rename(editor.document.uri, vscode.Uri.file(newPath), {
+              overwrite: false
+            });
+          } catch (e) {
+            Notifications.error(`Failed to rename file.`);
+            console.log(e?.message || e);
+          }
+        }
+      }
     }
 	}
 

src/constants/settings.ts

@@ -10,6 +10,7 @@ export const SETTING_MODIFIED_FIELD = "taxonomy.modifiedField";
 
 export const SETTING_SLUG_PREFIX = "taxonomy.slugPrefix";
 export const SETTING_SLUG_SUFFIX = "taxonomy.slugSuffix";
+export const SETTING_SLUG_UPDATE_FILE_NAME = "taxonomy.alignFilename";
 
 export const SETTING_INDENT_ARRAY = "taxonomy.indentArrays";
 export const SETTING_REMOVE_QUOTES = "taxonomy.noPropertyValueQuotes";

src/webview/ExplorerView.ts

@@ -1,4 +1,4 @@
-import { SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD } from './../constants/settings';
+import { SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME } from './../constants/settings';
 import * as os from 'os';
 import { PanelSettings, CustomScript } from './../models/PanelSettings';
 import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window, workspace, commands, env as vscodeEnv } from "vscode";
@@ -239,7 +239,8 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         },
         slug: {
           prefix: config.get(SETTING_SLUG_PREFIX) || "",
-          suffix: config.get(SETTING_SLUG_SUFFIX) || ""
+          suffix: config.get(SETTING_SLUG_SUFFIX) || "",
+          updateFileName: !!config.get<boolean>(SETTING_SLUG_UPDATE_FILE_NAME),
         },
         tags: config.get(SETTING_TAXONOMY_TAGS) || [],
         categories: config.get(SETTING_TAXONOMY_CATEGORIES) || [],