From bb980b4afe00660fa0b93cce19952f87711aa5b5 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Tue, 4 Jan 2022 11:51:11 +0100 Subject: [PATCH] #218 - Added MDX support for template and content creation --- CHANGELOG.md | 4 ++++ package.json | 19 +++++++++++++++++++ src/commands/Project.ts | 4 +++- src/commands/Template.ts | 9 ++++++--- src/constants/settings.ts | 2 ++ src/helpers/ArticleHelper.ts | 9 +++++---- src/helpers/ContentType.ts | 6 ++++++ src/helpers/MediaHelpers.ts | 2 +- src/models/PanelSettings.ts | 1 + 9 files changed, 47 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a8e2c9d..c4749397 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 17bc03a0..564d2e4a 100644 --- a/package.json +++ b/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", diff --git a/src/commands/Project.ts b/src/commands/Project.ts index d71d3ebf..f11d7f90 100644 --- a/src/commands/Project.ts +++ b/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(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); diff --git a/src/commands/Template.ts b/src/commands/Template.ts index 1bd112bc..d3e4ddc8 100644 --- a/src/commands/Template.ts +++ b/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(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; } diff --git a/src/constants/settings.ts b/src/constants/settings.ts index 52909c0a..3826ec3d 100644 --- a/src/constants/settings.ts +++ b/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"; diff --git a/src/helpers/ArticleHelper.ts b/src/helpers/ArticleHelper.ts index 1304218f..74c8f7ac 100644 --- a/src/helpers/ArticleHelper.ts +++ b/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(SETTING_TEMPLATES_PREFIX); + const fileType = Settings.get(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}`; diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts index d942d818..a30d174c 100644 --- a/src/helpers/ContentType.ts +++ b/src/helpers/ContentType.ts @@ -91,6 +91,12 @@ export class ContentType { return Settings.get(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(); diff --git a/src/helpers/MediaHelpers.ts b/src/helpers/MediaHelpers.ts index a1d6815b..c0e69416 100644 --- a/src/helpers/MediaHelpers.ts +++ b/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)) { diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index f049d8fc..942ed702 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -26,6 +26,7 @@ export interface ContentType { name: string; fields: Field[]; + fileType?: "md" | "mdx"; previewPath?: string | null; pageBundle?: boolean; }