#218 - Added MDX support for template and content creation

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [5.10.0] - 2022-01-xx
+
+- [#218](https://github.com/estruyf/vscode-front-matter/issues/218): Add support for creating `mdx` files from templates and content types. This introduced a new setting: `frontMatter.content.defaultFileType`.
+
 ## [5.9.0] - 2022-01-01 - 🎇🎆
 
 ### 🎨 Enhancements

package.json

@@ -97,6 +97,16 @@
           "markdownDescription": "Specify if you want to automatically update the modified date of your article/page. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.autoupdatedate)",
           "scope": "Content"
         },
+        "frontMatter.content.defaultFileType": {
+          "type": "string",
+          "default": "md",
+          "enum": [
+            "md",
+            "mdx"
+          ],
+          "markdownDescription": "Specify the default file type for the content to create. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.defaultfiletype)",
+          "scope": "Content"
+        },
         "frontMatter.content.defaultSorting": {
           "type": "string",
           "default": "",
@@ -428,6 +438,15 @@
                       "type": "string",
                       "description": "Title to show in the UI"
                     },
+                    "fileType": {
+                      "type": "string",
+                      "default": "md",
+                      "enum": [
+                        "md",
+                        "mdx"
+                      ],
+                      "description": "Specifies the type of content you want to create. Default: `md`"
+                    },
                     "choices": {
                       "type": "array",
                       "description": "Define your choices",

src/commands/Project.ts

@@ -5,6 +5,7 @@ import { Notifications } from "../helpers/Notifications";
 import { Template } from "./Template";
 import { Folders } from "./Folders";
 import { Settings } from "../helpers";
+import { SETTINGS_CONTENT_DEFAULT_FILETYPE } from "../constants";
 
 export class Project {
 
@@ -27,6 +28,7 @@ categories: []
   public static async init(sampleTemplate: boolean = true) {
     try {
       Settings.createTeamSettings();
+      const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
 
       const folder = Template.getSettings();
       const templatePath = Project.templatePath();
@@ -35,7 +37,7 @@ categories: []
         return;
       }
       
-      const article = Uri.file(join(templatePath.fsPath, "article.md"));
+      const article = Uri.file(join(templatePath.fsPath, `article.${fileType}`));
 
       if (!fs.existsSync(templatePath.fsPath)) {
         await workspace.fs.createDirectory(templatePath);

src/commands/Template.ts

@@ -2,7 +2,7 @@ import { Questions } from './../helpers/Questions';
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
-import { SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { ArticleHelper, Settings } from '../helpers';
 import { Article } from '.';
 import { Notifications } from '../helpers/Notifications';
@@ -12,6 +12,7 @@ import { Folders } from './Folders';
 import { ContentType } from '../helpers/ContentType';
 import { ContentType as IContentType } from '../models';
 import { PagesListener } from '../listeners';
+import { extname } from 'path';
 
 export class Template {
 
@@ -50,6 +51,7 @@ export class Template {
   public static async generate() {
     const folder = Template.getSettings();
     const editor = vscode.window.activeTextEditor;
+    const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
 
     if (folder && editor && ArticleHelper.isMarkdownFile()) {
       const article = ArticleHelper.getFrontMatter(editor);
@@ -83,7 +85,7 @@ export class Template {
       if (templatePath) {
         let fileContents = ArticleHelper.stringifyFrontMatter(keepContents === "no" ? "" : clonedArticle.content, clonedArticle.data);
 
-        const templateFile = path.join(templatePath.fsPath, `${titleValue}.md`);
+        const templateFile = path.join(templatePath.fsPath, `${titleValue}.${fileType}`);
         fs.writeFileSync(templateFile, fileContents, { encoding: "utf-8" });
 
         Notifications.info(`Template created and is now available in your ${folder} folder.`);
@@ -140,7 +142,8 @@ export class Template {
       contentType = contentTypes?.find(t => t.name === templateData.data.type);
     }
 
-    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue);
+    const fileExtension = extname(template.fsPath).replace(".", "");
+    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue, fileExtension);
     if (!newFilePath) {
       return;
     }

src/constants/settings.ts

@@ -50,6 +50,8 @@ export const SETTINGS_CONTENT_WYSIWYG = "content.wysiwyg";
 export const SETTINGS_CONTENT_SORTING_DEFAULT = "content.defaultSorting";
 export const SETTINGS_MEDIA_SORTING_DEFAULT = "content.defaultSorting";
 
+export const SETTINGS_CONTENT_DEFAULT_FILETYPE = "content.defaultFileType";
+
 export const SETTINGS_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
 export const SETTINGS_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
 

src/helpers/ArticleHelper.ts

@@ -3,7 +3,7 @@ import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/
 import * as vscode from 'vscode';
 import * as matter from "gray-matter";
 import * as fs from "fs";
-import { DefaultFields, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { DefaultFields, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { DumpOptions } from 'js-yaml';
 import { TomlEngine, getFmLanguage, getFormatOpts } from './TomlEngine';
 import { Extension, Settings } from '.';
@@ -188,8 +188,9 @@ export class ArticleHelper {
    * @param titleValue 
    * @returns The new file path
    */
-  public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string): string | undefined {
+  public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string, fileExtension?: string): string | undefined {
     const prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
+    const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
     
     // Name of the file or folder to create
     const sanitizedName = ArticleHelper.sanitize(titleValue);
@@ -203,10 +204,10 @@ export class ArticleHelper {
         return;
       } else {
         mkdirSync(newFolder);
-        newFilePath = join(newFolder, `index.md`);
+        newFilePath = join(newFolder, `index.${fileExtension || contentType.fileType || fileType}`);
       }
     } else {
-      let newFileName = `${sanitizedName}.md`;
+      let newFileName = `${sanitizedName}.${fileExtension || contentType?.fileType || fileType}`;
 
       if (prefix && typeof prefix === "string") {
         newFileName = `${format(new Date(), DateHelper.formatUpdate(prefix) as string)}-${newFileName}`;

src/helpers/ContentType.ts

@@ -91,6 +91,12 @@ export class ContentType {
     return Settings.get<IContentType[]>(SETTING_TAXONOMY_CONTENT_TYPES);
   }
 
+  /**
+   * Create a new file with the specified content type
+   * @param contentType 
+   * @param folderPath 
+   * @returns 
+   */
   private static async create(contentType: IContentType, folderPath: string) {
 
     const titleValue = await Questions.ContentTitle();

src/helpers/MediaHelpers.ts

@@ -38,7 +38,7 @@ export class MediaHelpers {
 
       if (stateValue !== HOME_PAGE_NAVIGATION_ID) {
         // Support for page bundles
-        if (viewData?.data?.filePath && viewData?.data?.filePath.endsWith('index.md')) {
+        if (viewData?.data?.filePath && (viewData?.data?.filePath.endsWith('index.md') || viewData?.data?.filePath.endsWith('index.mdx'))) {
           const folderPath = parse(viewData.data.filePath).dir;
           selectedFolder = folderPath;
         } else if (stateValue && existsSync(stateValue)) {

src/models/PanelSettings.ts

@@ -26,6 +26,7 @@ export interface ContentType {
   name: string;
   fields: Field[];
 
+  fileType?: "md" | "mdx";
   previewPath?: string | null;
   pageBundle?: boolean;
 }