feat: Add support for fmContentType metadata field #467.

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ### 🎨 Enhancements
 
+- [#467](https://github.com/estruyf/vscode-front-matter/issues/467): New `fmContentType` metadata field to link content type (fallback to the `type` field)
 - [#819](https://github.com/estruyf/vscode-front-matter/issues/819): Added new extensibility support for media scripts
 - [#822](https://github.com/estruyf/vscode-front-matter/issues/822): Added docs to the panel & dashboard views
 - [#829](https://github.com/estruyf/vscode-front-matter/issues/829): UI extensibility is now generally available

src/commands/Template.ts

@@ -3,6 +3,7 @@ import * as vscode from 'vscode';
 import * as path from 'path';
 import {
   COMMAND_NAME,
+  DefaultFields,
   SETTING_CONTENT_DEFAULT_FILETYPE,
   SETTING_TEMPLATES_FOLDER,
   TelemetryEvent
@@ -163,8 +164,14 @@ export class Template {
 
     const templateData = await ArticleHelper.getFrontMatterByPath(template.fsPath);
     let contentType: IContentType | undefined;
-    if (templateData && templateData.data && templateData.data.type) {
-      contentType = contentTypes?.find((t) => t.name === templateData.data.type);
+    if (templateData && templateData.data) {
+      if (templateData.data[DefaultFields.ContentType]) {
+        contentType = contentTypes?.find(
+          (t) => t.name === templateData.data[DefaultFields.ContentType]
+        );
+      } else if (templateData.data[DefaultFields.Type]) {
+        contentType = contentTypes?.find((t) => t.name === templateData.data[DefaultFields.Type]);
+      }
     }
 
     const fileExtension = extname(template.fsPath).replace('.', '');

src/constants/DefaultFields.ts

@@ -3,5 +3,7 @@ export const DefaultFields = {
   LastModified: `lastmod`,
   Description: `description`,
   Title: `title`,
-  Slug: `slug`
+  Slug: `slug`,
+  Type: `type`,
+  ContentType: `fmContentType`
 };

src/dashboardWebView/components/Contents/Item.tsx

@@ -38,7 +38,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     date: pageData.date,
     title: pageData.title,
     description: pageData.description,
-    type: pageData.type,
+    type: pageData.fmContentType,
     pageData
   });
 

src/helpers/ArticleHelper.ts

@@ -460,8 +460,10 @@ export class ArticleHelper {
     let contentType: IContentType | undefined = undefined;
 
     // Get content type by type name in the front matter
-    if (article.data.type) {
-      contentType = contentTypes.find((ct) => ct.name === article.data.type);
+    if (article.data[DefaultFields.ContentType]) {
+      contentType = contentTypes.find((ct) => ct.name === article.data[DefaultFields.ContentType]);
+    } else if (article.data[DefaultFields.Type]) {
+      contentType = contentTypes.find((ct) => ct.name === article.data[DefaultFields.Type]);
     } else if (!contentType && article.path) {
       const pageFolder = await Folders.getPageFolderByFilePath(article.path);
       if (pageFolder && pageFolder.contentTypes?.length === 1) {

src/helpers/ContentType.ts

@@ -285,7 +285,7 @@ export class ContentType {
 
     // Update the type field in the page
     if (!overrideBool && editor) {
-      content.data['type'] = contentTypeName;
+      content.data[DefaultFields.ContentType] = contentTypeName;
       ArticleHelper.update(editor, content);
     }
 
@@ -403,7 +403,7 @@ export class ContentType {
       return;
     }
 
-    content.data.type = ctAnswer;
+    content.data[DefaultFields.ContentType] = ctAnswer;
 
     const editor = window.activeTextEditor;
     ArticleHelper.update(editor!, content);
@@ -995,12 +995,8 @@ export class ContentType {
           contentType
         );
 
-        let isTypeSet = false;
-        if (data.type) {
-          isTypeSet = true;
-        } else {
-          data.type = contentType.name;
-        }
+        // Set the content type
+        data[DefaultFields.ContentType] = contentType.name;
 
         const article: ParsedFrontMatter = {
           content: '',
@@ -1010,12 +1006,11 @@ export class ContentType {
 
         data = await ArticleHelper.updateDates(article);
 
-        if (isTypeSet) {
-          delete data.type;
-        }
-
         if (contentType.name !== DEFAULT_CONTENT_TYPE_NAME) {
-          data['type'] = contentType.name;
+          data[DefaultFields.ContentType] = contentType.name;
+        } else {
+          // Default content type, remove the content type field
+          delete data[DefaultFields.ContentType];
         }
 
         const content = ArticleHelper.stringifyFrontMatter(templateData?.content || ``, data);

src/hooks/useContentType.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from '../constants/ContentType';
 import { Settings } from '../dashboardWebView/models';
 import { ContentType, PanelSettings } from '../models';
+import { DefaultFields } from '../constants';
 
 export default function useContentType(
   settings: PanelSettings | Settings | undefined | null,
@@ -13,8 +14,12 @@ export default function useContentType(
     if (settings && metadata) {
       let contentTypeName = DEFAULT_CONTENT_TYPE_NAME;
 
-      if (metadata?.type) {
-        contentTypeName = metadata.type;
+      if (metadata) {
+        if (metadata[DefaultFields.ContentType]) {
+          contentTypeName = metadata[DefaultFields.ContentType];
+        } else if (metadata[DefaultFields.Type]) {
+          contentTypeName = metadata[DefaultFields.Type];
+        }
       }
 
       // Get the content type by the folder name