Merge pull request #164 from estruyf/dev

Merge for 5.3.1

CHANGELOG.md

@@ -1,5 +1,44 @@
 # Change Log
 
+## [5.3.1] - 2021-10-29
+
+### 🐞 Fixes
+
+- [#163](https://github.com/estruyf/vscode-front-matter/issues/163): Setting workspace state instead of global state for the media view
+
+## [5.3.0] - 2021-10-28 - [Release Notes](https://beta.frontmatter.codes/updates/v5.3.0)
+
+### 🎨 Enhancements
+
+- [#158](https://github.com/estruyf/vscode-front-matter/issues/158): Add support for non-boolean draft/publish status fields
+- [#159](https://github.com/estruyf/vscode-front-matter/issues/159): Enhancements to SEO checks: Slug check, keyword details, more article information
+
+### 🐞 Fixes
+
+- Value check when generating slug from title
+- Fix for date time formatting with `DD` and `YYYY` tokens
+- Fix in tag space replacing when object is passed
+
+## [5.2.0] - 2021-10-19
+
+### 🎨 Enhancements
+
+- [#151](https://github.com/estruyf/vscode-front-matter/issues/151): Detect which site-generator or framework is used
+- [#152](https://github.com/estruyf/vscode-front-matter/issues/152): Automatically set setting based on the used site-generator or framework
+- [#154](https://github.com/estruyf/vscode-front-matter/issues/154): Bulk script support added
+- [#155](https://github.com/estruyf/vscode-front-matter/issues/155): Fallback image added for the images shown in the editor panel
+
+### 🐞 Fixes
+
+- [#153](https://github.com/estruyf/vscode-front-matter/issues/153): Support old date formatting for date-fns
+- [#156](https://github.com/estruyf/vscode-front-matter/issues/156): Fix for uploading media files into a new folder
+
+## [5.1.1] - 2021-10-14
+
+### 🐞 Fixes
+
+- [#149](https://github.com/estruyf/vscode-front-matter/issues/149): Fix panel rendering when incorrect type for keywords is provided
+
 ## [5.1.0] - 2021-10-13
 
 ### 🎨 Enhancements

README.beta.md

@@ -48,6 +48,10 @@ Our main extension features are:
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 5**
+
+The new media dashboard redesign got introduced + support for setting metadata on media files [v5.0.0 release notes](https://frontmatter.codes/updates/v5.0.0).
+
 **Version 4**
 
 Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).

README.md

@@ -46,6 +46,10 @@ Our main extension features are:
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 5**
+
+The new media dashboard redesign got introduced + support for setting metadata on media files [v5.0.0 release notes](https://frontmatter.codes/updates/v5.0.0).
+
 **Version 4**
 
 Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).

assets/media/styles.css

@@ -356,8 +356,18 @@
   text-transform: capitalize;
 }
 
+.table__cell__seo_details {
+  padding: 10px;
+}
+
 .table__cell__validation {
-  text-align: center;
+  text-align: left;
+}
+
+.table__cell__validation div {
+  display: flex;
+  align-items: center;
+  padding: 2px 0;
 }
 
 .table__cell__validation .valid {
@@ -368,6 +378,15 @@
   color: #E6AF2E;
 }
 
+.table__cell__validation div span + span {
+  margin-left: .5rem;
+}
+
+.seo__status__note {
+  font-size: 10px;
+  padding: 3px 0;
+}
+
 /* Fields */
 .field__toggle {
   position: relative;

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-front-matter-beta",
-	"version": "5.1.0",
+	"version": "5.3.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

@@ -3,7 +3,7 @@
   "displayName": "Front Matter",
   "description": "An essential Visual Studio Code extension when you want to manage the markdown pages of your static site like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "5.1.0",
+  "version": "5.3.1",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {
@@ -97,6 +97,43 @@
           "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.draftField": {
+          "type": "object",
+          "markdownDescription": "Define the draft field you want to use to manage your content. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.draftField)",
+          "default": {
+            "name": "draft",
+            "type": "boolean"
+          },
+          "properties": {
+            "type": {
+              "type": "string",
+              "enum": [
+                "boolean",
+                "choice"
+              ],
+              "description": ""
+            },
+            "name": {
+              "type": "string",
+              "description": "Name of the field to use"
+            },
+            "choices": {
+              "type": "array",
+              "description": "List of choices for the field",
+              "items": {
+                "type": [
+                  "string"
+                ]
+              }
+            }
+          },
+          "additionalProperties": false,
+          "required": [
+            "type",
+            "name"
+          ],
+          "scope": "Content"
+        },
         "frontMatter.content.fmHighlight": {
           "type": "boolean",
           "default": true,
@@ -151,6 +188,22 @@
               "nodeBin": {
                 "type": "string",
                 "description": "Path to the node executable. This is required when using NVM, so that there is no confusion of which node version to use."
+              },
+              "bulk": {
+                "type": "boolean",
+                "description": "Run the script for all content files"
+              },
+              "output": {
+                "type": "string",
+                "enum": [
+                  "editor",
+                  "notification"
+                ],
+                "description": "Define where you want to output your script output. Default is a notification, but you can specify to show it in an editor panel."
+              },
+              "outputType": {
+                "type": "string",
+                "description": "The type of output for the editor panel. Can be used to change it to 'markdown' for example"
               }
             },
             "additionalProperties": false,
@@ -180,6 +233,11 @@
           "markdownDescription": "Specify if you want to open the dashboard when you start VS Code.  [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.dashboard.openonstart)",
           "scope": "Dashboard"
         },
+        "frontMatter.framework.id": {
+          "type": "string",
+          "default": "",
+          "markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.framework.id)"
+        },
         "frontMatter.panel.freeform": {
           "type": "boolean",
           "default": true,
@@ -198,6 +256,12 @@
           "markdownDescription": "Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: `yyyy/MM`. The date will be generated based on the article its date field value. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.preview.pathname)",
           "scope": "Site preview"
         },
+        "frontMatter.site.baseURL": {
+          "type": "string",
+          "default": "",
+          "markdownDescription": "Specify the base URL of your site, this will be used for SEO checks. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.site.baseURL)",
+          "scope": "Site"
+        },
         "frontMatter.taxonomy.alignFilename": {
           "type": "boolean",
           "default": false,
@@ -252,7 +316,8 @@
                         "image",
                         "choice",
                         "tags",
-                        "categories"
+                        "categories",
+                        "draft"
                       ],
                       "description": "Define the type of field"
                     },
@@ -435,6 +500,12 @@
           "markdownDescription": "Specifies the optimal description length for SEO (set to `-1` to turn it off). [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.seodescriptionlength)",
           "scope": "Taxonomy"
         },
+        "frontMatter.taxonomy.seoSlugLength": {
+          "type": "number",
+          "default": 75,
+          "markdownDescription": "Specifies the optimal slug length for SEO (set to `-1` to turn it off). [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.seoSlugLength)",
+          "scope": "Taxonomy"
+        },
         "frontMatter.taxonomy.seoTitleLength": {
           "type": "number",
           "default": 60,

src/commands/Article.ts

@@ -9,6 +9,7 @@ import { extname, basename } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
 import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
+import { DateHelper } from '../helpers/DateHelper';
 
 
 export class Article {
@@ -171,7 +172,7 @@ export class Article {
 
           let newFileName = `${slugName}${ext}`;
           if (filePrefix && typeof filePrefix === "string") {
-            newFileName = `${format(new Date(), filePrefix)}-${newFileName}`;
+            newFileName = `${format(new Date(), DateHelper.formatUpdate(filePrefix) as string)}-${newFileName}`;
           }
 
           const newPath = editor.document.uri.fsPath.replace(fileName, newFileName);
@@ -243,7 +244,7 @@ export class Article {
     const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
 
     if (dateFormat && typeof dateFormat === "string") {
-      return format(dateValue, dateFormat);
+      return format(dateValue, DateHelper.formatUpdate(dateFormat) as string);
     } else {
       return typeof dateValue.toISOString === 'function' ? dateValue.toISOString() : dateValue?.toString();
     }

src/commands/Dashboard.ts

@@ -1,10 +1,10 @@
-import { SETTINGS_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTINGS_DASHBOARD_OPENONSTART, SETTINGS_DASHBOARD_MEDIA_SNIPPET, SETTING_TAXONOMY_CONTENT_TYPES, DefaultFields, HOME_PAGE_NAVIGATION_ID, ExtensionState, COMMAND_NAME } from '../constants';
+import { SETTINGS_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTINGS_DASHBOARD_OPENONSTART, SETTINGS_DASHBOARD_MEDIA_SNIPPET, SETTING_TAXONOMY_CONTENT_TYPES, DefaultFields, HOME_PAGE_NAVIGATION_ID, ExtensionState, COMMAND_NAME, SETTINGS_FRAMEWORK_ID, SETTINGS_CONTENT_DRAFT_FIELD } from '../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { basename, dirname, extname, join, parse } from "path";
 import { existsSync, readdirSync, statSync, unlinkSync, writeFileSync } from "fs";
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace, env, Position } from "vscode";
 import { Settings as SettingsHelper } from '../helpers';
-import { TaxonomyType } from '../models';
+import { DraftField, Framework, TaxonomyType } from '../models';
 import { Folders } from './Folders';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
@@ -24,6 +24,8 @@ import { MediaLibrary } from '../helpers/MediaLibrary';
 import imageSize from 'image-size';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { DateHelper } from '../helpers/DateHelper';
+import { FrameworkDetector } from '../helpers/FrameworkDetector';
+import { ContentType } from '../helpers/ContentType';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -160,7 +162,7 @@ export class Dashboard {
           }
           break;
         case DashboardMessage.setPageViewType:
-          Extension.getInstance().setState(ExtensionState.PagesView, msg.data);
+          Extension.getInstance().setState(ExtensionState.PagesView, msg.data, "workspace");
           break;
         case DashboardMessage.getMedia:
           Dashboard.getMedia(msg?.data?.page, msg?.data?.folder);
@@ -187,6 +189,9 @@ export class Dashboard {
         case DashboardMessage.createMediaFolder:
           await commands.executeCommand(COMMAND_NAME.createFolder, msg?.data);
           break;
+        case DashboardMessage.setFramework:
+          Dashboard.setFramework(msg?.data);
+          break;
       }
     });
   }
@@ -257,6 +262,7 @@ export class Dashboard {
   private static async getSettings() { 
     const ext = Extension.getInstance();
     const wsFolder = Folders.getWorkspaceFolder();
+    const isInitialized = await Template.isInitialized();
     
     Dashboard.postWebviewMessage({
       command: DashboardCommand.settings,
@@ -265,19 +271,40 @@ export class Dashboard {
         wsFolder: wsFolder ? wsFolder.fsPath : '',
         staticFolder: SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER),
         folders: Folders.get(),
-        initialized: await Template.isInitialized(),
+        initialized: isInitialized,
         tags: SettingsHelper.getTaxonomy(TaxonomyType.Tag),
         categories: SettingsHelper.getTaxonomy(TaxonomyType.Category),
         openOnStart: SettingsHelper.get(SETTINGS_DASHBOARD_OPENONSTART),
         versionInfo: ext.getVersion(),
-        pageViewType: await ext.getState<ViewType | undefined>(ExtensionState.PagesView),
+        pageViewType: await ext.getState<ViewType | undefined>(ExtensionState.PagesView, "workspace"),
         mediaSnippet: SettingsHelper.get<string[]>(SETTINGS_DASHBOARD_MEDIA_SNIPPET) || [],
         contentTypes: SettingsHelper.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
+        draftField: SettingsHelper.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
         contentFolders: Folders.get().map(f => f.path),
+        crntFramework: SettingsHelper.get<string>(SETTINGS_FRAMEWORK_ID),
+        framework: (!isInitialized && wsFolder) ? FrameworkDetector.get(wsFolder.fsPath) : null,
       } as Settings
     });
   }
 
+  /**
+   * Set the current site-generator or framework + related settings
+   * @param frameworkId 
+   */
+  private static setFramework(frameworkId: string | null) {
+    SettingsHelper.update(SETTINGS_FRAMEWORK_ID, frameworkId, true);
+
+    if (frameworkId) {
+      const allFrameworks = FrameworkDetector.getAll();
+      const framework = allFrameworks.find((f: Framework) => f.name === frameworkId);
+      if (framework) {
+        SettingsHelper.update(SETTINGS_CONTENT_STATIC_FOLDER, framework.static, true);
+      } else {
+        SettingsHelper.update(SETTINGS_CONTENT_STATIC_FOLDER, "", true);
+      }
+    }
+  }
+
   /**
    * Update a setting from the dashboard
    */
@@ -298,7 +325,7 @@ export class Dashboard {
 
     // If the static folder is not set, retreive the last opened location
     if (!selectedFolder) {
-      const stateValue = await Extension.getInstance().getState<string | undefined>(ExtensionState.SelectedFolder);
+      const stateValue = await Extension.getInstance().getState<string | undefined>(ExtensionState.SelectedFolder, "workspace");
 
       if (stateValue !== HOME_PAGE_NAVIGATION_ID) {
         // Support for page bundles
@@ -316,7 +343,15 @@ export class Dashboard {
       selectedFolder = '';
     }
 
-    const relSelectedFolderPath = selectedFolder ? selectedFolder.substring((parseWinPath(wsFolder?.fsPath || "")).length + 1) : '';
+    let relSelectedFolderPath = selectedFolder;
+    const parsedPath = parseWinPath(wsFolder?.fsPath || "");
+    if (selectedFolder && selectedFolder.startsWith(parsedPath)) {
+      relSelectedFolderPath = selectedFolder.replace(parsedPath, '');
+    }
+
+    if (relSelectedFolderPath.startsWith('/')) {
+      relSelectedFolderPath = relSelectedFolderPath.substring(1);
+    }
 
     let allMedia: MediaInfo[] = [];
 
@@ -405,7 +440,7 @@ export class Dashboard {
     }
 
     // Store the last opened folder
-    await Extension.getInstance().setState(ExtensionState.SelectedFolder, requestedFolder === HOME_PAGE_NAVIGATION_ID ? HOME_PAGE_NAVIGATION_ID : selectedFolder);
+    await Extension.getInstance().setState(ExtensionState.SelectedFolder, requestedFolder === HOME_PAGE_NAVIGATION_ID ? HOME_PAGE_NAVIGATION_ID : selectedFolder, "workspace");
 
     Dashboard.postWebviewMessage({
       command: DashboardCommand.media,
@@ -446,7 +481,7 @@ export class Dashboard {
                   fmModified: file.mtime,
                   fmFilePath: file.filePath,
                   fmFileName: file.fileName,
-                  fmDraft: article?.data.draft ? "Draft" : "Published",
+                  fmDraft: ContentType.getDraftStatus(article?.data),
                   fmYear: article?.data[dateField] ? DateHelper.tryParse(article?.data[dateField])?.getFullYear() : null,
                   // Make sure these are always set
                   title: article?.data.title,
@@ -549,9 +584,9 @@ export class Dashboard {
 
       if (imgData) {
         writeFileSync(staticPath, imgData.data);
-        Notifications.info(`File ${fileName} uploaded to: ${staticFolder}/${folder}`);
+        Notifications.info(`File ${fileName} uploaded to: ${folder}`);
         
-        const folderPath = `${staticFolder}/${folder}`;
+        const folderPath = `${folder}`;
         if (Dashboard.timers[folderPath]) {
           clearTimeout(Dashboard.timers[folderPath]);
           delete Dashboard.timers[folderPath];

src/commands/Preview.ts

@@ -5,6 +5,7 @@ import { commands, env, Uri, ViewColumn, window } from "vscode";
 import { Settings } from '../helpers';
 import { PreviewSettings } from '../models';
 import { format } from 'date-fns';
+import { DateHelper } from '../helpers/DateHelper';
 
 
 export class Preview {
@@ -34,7 +35,7 @@ export class Preview {
     if (settings.pathname) {
       const articleDate = ArticleHelper.getDate(article);
       try {
-        slug = join(format(articleDate || new Date(), settings.pathname), slug);
+        slug = join(format(articleDate || new Date(), DateHelper.formatUpdate(settings.pathname) as string), slug);
       } catch (error) {
         slug = join(settings.pathname, slug);
       }

src/commands/StatusListener.ts

@@ -3,6 +3,7 @@ import * as vscode from 'vscode';
 import { ArticleHelper, SeoHelper, Settings } from '../helpers';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { DefaultFields } from '../constants';
+import { ContentType } from '../helpers/ContentType';
 
 export class StatusListener {
   
@@ -15,6 +16,11 @@ export class StatusListener {
   public static async verify(frontMatterSB: vscode.StatusBarItem, collection: vscode.DiagnosticCollection) {
     const draftMsg = "in draft";
     const publishMsg = "to publish";
+
+    const draft = ContentType.getDraftField();
+    if (!draft || draft.type !== "boolean") {
+      frontMatterSB.hide();
+    }
     
     let editor = vscode.window.activeTextEditor;
     if (editor && ArticleHelper.isMarkdownFile()) {

src/constants/ContentType.ts

@@ -29,7 +29,7 @@ export const DEFAULT_CONTENT_TYPE: ContentType = {
     {
       "title": "Is in draft",
       "name": "draft",
-      "type": "boolean"
+      "type": "draft"
     },
     {
       "title": "Tags",

src/constants/FrameworkDetectors.ts

@@ -0,0 +1,21 @@
+export const FrameworkDetectors = [
+  {
+    "framework": {"name": "gatsby", "dist": "public", "static": "static", "build": "gatsby build"},
+    "requiredFiles": ["gatsby-config.js"],
+    "requiredDependencies": ["gatsby"]
+  },
+  {
+    "framework": {"name": "hugo", "dist": "public", "static": "static", "build": "hugo"},
+    "requiredFiles": ["config.toml", "config.yaml", "config.yml"]
+  },
+  {
+    "framework": {"name": "next", "dist": ".next", "static": "public", "build": "next build"},
+    "requiredFiles": ["next.config.js"],
+    "requiredDependencies": ["next"]
+  },
+  {
+    "framework": {"name": "nuxt", "dist": "dist", "static": "static", "build": "nuxt"},
+    "requiredFiles": ["nuxt.config.js"],
+    "requiredDependencies": ["nuxt"]
+  }
+];

src/constants/settings.ts

@@ -20,6 +20,7 @@ export const SETTING_REMOVE_QUOTES = "taxonomy.noPropertyValueQuotes";
 export const SETTING_FRONTMATTER_TYPE = "taxonomy.frontMatterType";
 
 export const SETTING_SEO_TITLE_LENGTH = "taxonomy.seoTitleLength";
+export const SETTING_SEO_SLUG_LENGTH = "taxonomy.seoSlugLength";
 export const SETTING_SEO_DESCRIPTION_LENGTH = "taxonomy.seoDescriptionLength";
 export const SETTING_SEO_CONTENT_MIN_LENGTH = "taxonomy.seoContentLengh";
 export const SETTING_SEO_DESCRIPTION_FIELD = "taxonomy.seoDescriptionField";
@@ -38,10 +39,15 @@ export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate";
 export const SETTINGS_CONTENT_PAGE_FOLDERS = "content.pageFolders";
 export const SETTINGS_CONTENT_STATIC_FOLDER = "content.publicFolder";
 export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight";
+export const SETTINGS_CONTENT_DRAFT_FIELD = "content.draftField";
 
 export const SETTINGS_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
 export const SETTINGS_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
 
+export const SETTINGS_FRAMEWORK_ID = "framework.id";
+
+export const SETTING_SITE_BASEURL = "site.baseURL";
+
 /**
  * @deprecated
  */

src/dashboardWebView/DashboardMessage.ts

@@ -17,5 +17,6 @@ export enum DashboardMessage {
   deleteMedia = 'deleteMedia',
   insertPreviewImage = 'insertPreviewImage',
   updateMediaMetadata = 'updateMediaMetadata',
-  createMediaFolder = 'createMediaFolder'
+  createMediaFolder = 'createMediaFolder',
+  setFramework = 'setFramework',
 }

src/dashboardWebView/components/Contents/Item.tsx

@@ -41,7 +41,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
 
           <div className="p-4 w-full">
             <div className={`flex justify-between items-center`}>
-              <Status draft={!!draft} />
+              <Status draft={draft} />
 
               <DateField value={date} />
             </div>
@@ -64,7 +64,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
             <DateField value={date} />
           </div>
           <div className="col-span-2">
-            <Status draft={!!draft} />
+            <Status draft={draft} />
           </div>
         </button>
       </li>

src/dashboardWebView/components/Navigation.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { Tab } from '../constants/Tab';
-import { TabAtom } from '../state';
+import { SettingsAtom, TabAtom } from '../state';
 
 export interface INavigationProps {
   totalPages: number;
@@ -15,19 +15,47 @@ export const tabs = [
 
 export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPages}: React.PropsWithChildren<INavigationProps>) => {
   const [ crntTab, setCrntTab ] = useRecoilState(TabAtom);
+  const settings = useRecoilValue(SettingsAtom);
 
   return (
     <nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
-      {tabs.map((tab) => (
-        <button
-          key={tab.name}
-          className={`${tab.id === crntTab ? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300` : `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
-          aria-current={tab.id === crntTab ? 'page' : undefined}
-          onClick={() => setCrntTab(tab.id)}
-        >
-          {tab.name}{(tab.id === crntTab && totalPages) ? ` (${totalPages})` : ''}
-        </button>
-      ))}
+      {
+        settings?.draftField?.type === "boolean" ? (
+          tabs.map((tab) => (
+            <button
+              key={tab.name}
+              className={`${tab.id === crntTab ? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300` : `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
+              aria-current={tab.id === crntTab ? 'page' : undefined}
+              onClick={() => setCrntTab(tab.id)}
+            >
+              {tab.name}{(tab.id === crntTab && totalPages) ? ` (${totalPages})` : ''}
+            </button>
+          ))
+        ) : (
+          <>
+            <button
+              className={`${tabs[0].id === crntTab ? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300` : `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
+              aria-current={tabs[0].id === crntTab ? 'page' : undefined}
+              onClick={() => setCrntTab(tabs[0].id)}
+            >
+              {tabs[0].name}{(tabs[0].id === crntTab && totalPages) ? ` (${totalPages})` : ''}
+            </button>
+
+            {
+              settings?.draftField?.choices?.map((value, idx) => (
+                <button
+                  key={`${value}-${idx}`}
+                  className={`${value === crntTab ? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300` : `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm first-letter:uppercase`}
+                  aria-current={value === crntTab ? 'page' : undefined}
+                  onClick={() => setCrntTab(value)}
+                >
+                  {value}{(value === crntTab && totalPages) ? ` (${totalPages})` : ''}
+                </button>
+              ))
+            }
+          </>
+        )
+      }
     </nav>
   );
 };

src/dashboardWebView/components/Status.tsx

@@ -1,10 +1,22 @@
 import * as React from 'react';
+import { useRecoilValue } from 'recoil';
+import { SettingsAtom } from '../state';
 
 export interface IStatusProps {
-  draft: boolean;
+  draft: boolean | string;
 }
 
 export const Status: React.FunctionComponent<IStatusProps> = ({draft}: React.PropsWithChildren<IStatusProps>) => {
+  const settings = useRecoilValue(SettingsAtom);
+
+  if (settings?.draftField && settings.draftField.type === "choice") {
+    if (draft) {
+      return <span className={`inline-block px-2 py-1 leading-none rounded-full font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 bg-teal-500`}>{draft}</span>;
+    } else {
+      return null;
+    }
+  }
+
   return (
     <span className={`inline-block px-2 py-1 leading-none rounded-full font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 ${draft ? "bg-red-500" : "bg-teal-500"}`}>{draft ? "Draft" : "Published"}</span>
   );

src/dashboardWebView/components/Steps/Step.tsx

@@ -4,22 +4,17 @@ import { Status } from '../../models/Status';
 
 export interface IStepProps {
   name: string;
-  description: string;
+  description: JSX.Element;
   status: Status;
   showLine: boolean;
-  onClick?: () => void;
+  onClick?: () => void | undefined;
 }
 
 export const Step: React.FunctionComponent<IStepProps> = ({name, description, status, showLine, onClick}: React.PropsWithChildren<IStepProps>) => {
-  return (
-    <>
-      {
-        showLine ? (
-          <div className={`-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full ${status === Status.Completed ? "bg-teal-600" : "bg-gray-300"}`} aria-hidden="true" />
-        ) : null
-      }
 
-      <button className={`relative flex items-start group text-left ${onClick ? "" : "cursor-default"}`} onClick={() => { if (onClick) { onClick(); } }} disabled={!onClick}>
+  const renderChildren = () => {
+    return (
+      <>
         {
           status === Status.NotStarted && (
             <span className="h-9 flex items-center" aria-hidden="true">
@@ -52,9 +47,31 @@ export const Step: React.FunctionComponent<IStepProps> = ({name, description, st
 
         <span className="ml-4 min-w-0 flex flex-col">
           <span className="text-xs font-semibold tracking-wide uppercase text-vulcan-500 dark:text-whisper-500">{name}</span>
-          <span className="text-sm text-vulcan-400 dark:text-whisper-600" dangerouslySetInnerHTML={{__html: description}} />
+          <div className="text-sm text-vulcan-400 dark:text-whisper-600">{description}</div>
         </span>
-      </button>
+      </>
+    );
+  };
+
+  return (
+    <>
+      {
+        showLine ? (
+          <div className={`-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full ${status === Status.Completed ? "bg-teal-600" : "bg-gray-300"}`} aria-hidden="true" />
+        ) : null
+      }
+
+      {
+        onClick ? (
+          <button className={`relative flex items-start group text-left`} onClick={() => { if (onClick) { onClick(); } }} disabled={!onClick}>
+            {renderChildren()}
+          </button>
+        ) : (
+          <div className="relative flex items-start group text-left">
+            {renderChildren()}
+          </div>
+        )
+      }
     </>
   );
 };

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -4,36 +4,99 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { Settings } from '../../models/Settings';
 import { Status } from '../../models/Status';
 import { Step } from './Step';
+import { useState } from 'react';
+import { Menu } from '@headlessui/react';
+import { MenuItem } from '../Menu';
+import { Framework } from '../../../models';
+import { ChevronDownIcon } from '@heroicons/react/outline';
+import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
 
 export interface IStepsToGetStartedProps {
   settings: Settings;
 }
 
 export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps> = ({settings}: React.PropsWithChildren<IStepsToGetStartedProps>) => {
+  const [framework, setFramework] = useState<string | null>(null);
+
+  const frameworks: Framework[] = FrameworkDetectors.map((detector: any) => detector.framework);
+
+  const setFrameworkAndSendMessage = (framework: string) => {
+    setFramework(framework);
+    Messenger.send(DashboardMessage.setFramework, framework);
+  }
 
   const steps = [
     { 
       name: 'Initialize project', 
-      description: 'Initialize the project with a template folder and sample markdown file. The template folder can be used to define your own templates. <b>Start by clicking on this action</b>.',
+      description: <>Initialize the project with a template folder and sample markdown file. The template folder can be used to define your own templates. <b>Start by clicking on this action</b>.</>,
       status: settings.initialized ? Status.Completed : Status.NotStarted,
       onClick: settings.initialized ? undefined : () => { Messenger.send(DashboardMessage.initializeProject); }  
     },
+    { 
+      name: 'Framework presets', 
+      description: (
+        <div>
+          <div>Select your site-generator or framework to prefill some of the recommended settings.</div>
+
+          <Menu as="div" className="relative inline-block text-left mt-4">
+            <div>
+              <Menu.Button className="group flex justify-center text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600 p-2 rounded-md border border-vulcan-400 dark:border-white">
+                {framework ? framework : 'Select your framework'}
+                <ChevronDownIcon
+                  className="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700"
+                  aria-hidden="true"
+                />
+              </Menu.Button>
+            </div>
+
+            <Menu.Items className={`w-40 origin-top-left absolute left-0 z-10 mt-2 rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
+              <div className="py-1">
+                <MenuItem 
+                  title={`other`}
+                  value={`other`}
+                  isCurrent={!framework}
+                  onClick={(value) => setFrameworkAndSendMessage(value)} />
+                
+                <hr />
+
+                {frameworks.map((f) => (
+                  <MenuItem 
+                    key={f.name}
+                    title={f.name}
+                    value={f.name}
+                    isCurrent={f.name === framework}
+                    onClick={(value) => setFrameworkAndSendMessage(value)} />
+                ))}
+              </div>
+            </Menu.Items>
+          </Menu>
+        </div>
+      ),
+      status: settings.crntFramework ? Status.Completed : Status.NotStarted,
+      onClick: undefined 
+    },
     {
       name: 'Register content folders (manual action)',
-      description: 'Register your content folder(s). You can perform this action by right-clicking on the folder in the explorer view, and selecting <b>register folder</b>. Once a folder is set, Front Matter can be used to list all contents and allow you to create content.',
+      description: <>Register your content folder(s). You can perform this action by right-clicking on the folder in the explorer view, and selecting <b>register folder</b>. Once a folder is set, Front Matter can be used to list all contents and allow you to create content.</>,
       status: settings.folders && settings.folders.length > 0 ? Status.Completed : Status.NotStarted
     },
     {
       name: 'Show the dashboard',
-      description: 'Once both actions are completed, click on this action to load the dashboard.',
+      description: <>Once both actions are completed, click on this action to load the dashboard.</>,
       status: (settings.initialized && settings.folders && settings.folders.length > 0) ? Status.Active : Status.NotStarted,
       onClick: (settings.initialized && settings.folders && settings.folders.length > 0) ? () => { Messenger.send(DashboardMessage.reload); } : undefined
     }
   ];
   
+  React.useEffect(() => {
+    if (settings.crntFramework) {
+      setFramework(settings.crntFramework);
+    }
+  }, [settings.crntFramework]);
+
   return (
     <nav aria-label="Progress">
-      <ol role="list" className="overflow-hidden">
+      <ol role="list">
         {steps.map((step, stepIdx) => (
           <li key={step.name} className={`${stepIdx !== steps.length - 1 ? 'pb-10' : ''} relative`}>
             <Step name={step.name} description={step.description} status={step.status} showLine={stepIdx !== steps.length - 1} onClick={step.onClick} />

src/dashboardWebView/components/WelcomeScreen.tsx

@@ -33,11 +33,11 @@ export const WelcomeScreen: React.FunctionComponent<IWelcomeScreenProps> = ({set
                 </h1>
 
                 <p className="mt-3 text-base text-vulcan-300 dark:text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-                  Thank you for taking the time to test out Front Matter!
+                  Thank you for using Front Matter!
                 </p>
 
                 <p className="mt-3 text-base text-vulcan-300 dark:text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-                  We try to aim to make Front Matter as easy to use as possible, but if you have any questions, please don't hesitate to reach out to us on GitHub.
+                  We try to aim to make Front Matter as easy to use as possible, but if you have any questions or suggestions. Please don't hesitate to reach out to us on GitHub.
                 </p>
 
                 <div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0">

src/dashboardWebView/hooks/usePages.tsx

@@ -4,7 +4,7 @@ import { Tab } from '../constants/Tab';
 import { Page } from '../models/Page';
 import Fuse from 'fuse.js';
 import { useRecoilValue } from 'recoil';
-import { CategorySelector, FolderSelector, SearchSelector, SortingSelector, TabSelector, TagSelector } from '../state';
+import { CategorySelector, FolderSelector, SearchSelector, SettingsSelector, SortingSelector, TabSelector, TagSelector } from '../state';
 
 const fuseOptions: Fuse.IFuseOptions<Page> = {
   keys: [
@@ -16,6 +16,7 @@ const fuseOptions: Fuse.IFuseOptions<Page> = {
 
 export default function usePages(pages: Page[]) {
   const [ pageItems, setPageItems ] = useState<Page[]>([]);
+  const settings = useRecoilValue(SettingsSelector);
   const tab = useRecoilValue(TabSelector);
   const sorting = useRecoilValue(SortingSelector);
   const folder = useRecoilValue(FolderSelector);
@@ -24,6 +25,8 @@ export default function usePages(pages: Page[]) {
   const category = useRecoilValue(CategorySelector);
 
   useEffect(() => {
+    const draftField = settings?.draftField;
+
     // Check if search needs to be performed
     let searchedPages = pages;
     if (search) {
@@ -34,12 +37,22 @@ export default function usePages(pages: Page[]) {
 
     // Filter the pages
     let pagesToShow: Page[] = Object.assign([], searchedPages);
-    if (tab === Tab.Published) {
-      pagesToShow = searchedPages.filter(page => !page.draft);
-    } else if (tab === Tab.Draft) {
-      pagesToShow = searchedPages.filter(page => !!page.draft);
+
+    if (draftField && draftField.type === 'choice') {
+      if (tab !== Tab.All) {
+        pagesToShow = pagesToShow.filter(page => page.fmDraft === tab);
+      } else {
+        pagesToShow = searchedPages;
+      }
     } else {
-      pagesToShow = searchedPages;
+      const draftFieldName = draftField?.name || "draft";
+      if (tab === Tab.Published) {
+        pagesToShow = searchedPages.filter(page => !page[draftFieldName]);
+      } else if (tab === Tab.Draft) {
+        pagesToShow = searchedPages.filter(page => !!page[draftFieldName]);
+      } else {
+        pagesToShow = searchedPages;
+      }
     }
 
     // Sort the pages
@@ -69,7 +82,7 @@ export default function usePages(pages: Page[]) {
     }
 
     setPageItems(pagesSorted);
-  }, [ pages, tab, sorting, folder, search, tag, category ]);
+  }, [ settings?.draftField, pages, tab, sorting, folder, search, tag, category ]);
 
   return {
     pageItems

src/dashboardWebView/models/Settings.ts

@@ -1,7 +1,7 @@
 import { VersionInfo } from '../../models/VersionInfo';
 import { ViewType } from '../state';
 import { ContentFolder } from '../../models/ContentFolder';
-import { ContentType } from '../../models';
+import { ContentType, DraftField, Framework } from '../../models';
 
 export interface Settings { 
   beta: boolean;
@@ -17,4 +17,7 @@ export interface Settings {
   mediaSnippet: string[];
   contentTypes: ContentType[];
   contentFolders: string[];
+  crntFramework: string;
+  framework: Framework | null | undefined;
+  draftField: DraftField | null | undefined;
 }

src/dashboardWebView/state/atom/TabAtom.ts

@@ -1,7 +1,7 @@
 import { atom } from 'recoil';
 import { Tab } from '../../constants/Tab';
 
-export const TabAtom = atom<Tab>({
+export const TabAtom = atom<Tab | string>({
   key: 'TabAtom',
   default: Tab.All
 });

src/explorerView/ExplorerView.ts

@@ -1,20 +1,18 @@
 import { DashboardData } from '../models/DashboardData';
 import { Template } from '../commands/Template';
-import { DefaultFields, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_PREVIEW_HOST, SETTING_DATE_FORMAT, SETTING_COMMA_SEPARATED_FIELDS, SETTINGS_CONTENT_STATIC_FOLDER, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_PANEL_FREEFORM, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_TAGS } from '../constants';
+import { DefaultFields, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_PREVIEW_HOST, SETTING_DATE_FORMAT, SETTING_COMMA_SEPARATED_FIELDS, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_PANEL_FREEFORM, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_TAGS, SETTINGS_CONTENT_DRAFT_FIELD, SETTING_SEO_SLUG_LENGTH, SETTING_SITE_BASEURL } from '../constants';
 import * as os from 'os';
-import { PanelSettings, CustomScript } from '../models/PanelSettings';
+import { PanelSettings, CustomScript as ICustomScript } from '../models/PanelSettings';
 import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window, workspace, commands, env as vscodeEnv } from "vscode";
 import { ArticleHelper, Settings } from "../helpers";
 import { Command } from "../panelWebView/Command";
 import { CommandToCode } from '../panelWebView/CommandToCode';
 import { Article } from '../commands';
 import { TagType } from '../panelWebView/TagType';
-import { TaxonomyType } from '../models';
+import { DraftField, TaxonomyType } from '../models';
 import { exec } from 'child_process';
-import * as path from 'path';
 import { fromMarkdown } from 'mdast-util-from-markdown';
 import { Content } from 'mdast';
-import { Notifications } from '../helpers/Notifications';
 import { COMMAND_NAME } from '../constants/Extension';
 import { Folders } from '../commands/Folders';
 import { Preview } from '../commands/Preview';
@@ -23,6 +21,8 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { Extension } from '../helpers/Extension';
 import { Dashboard } from '../commands/Dashboard';
 import { ImageHelper } from '../helpers/ImageHelper';
+import { CustomScript } from '../helpers/CustomScript';
+import { Link, Parent } from 'mdast-util-from-markdown/lib';
 
 const FILE_LIMIT = 10;
 
@@ -352,38 +352,12 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
    * @param msg 
    */
   private runCustomScript(msg: { command: string, data: any}) {
-    const scripts: CustomScript[] | undefined = Settings.get(SETTING_CUSTOM_SCRIPTS);
+    const scripts: ICustomScript[] | undefined = Settings.get(SETTING_CUSTOM_SCRIPTS);
 
     if (msg?.data?.title && msg?.data?.script && scripts) {
-      const customScript = scripts.find((s: CustomScript) => s.title === msg.data.title);
+      const customScript = scripts.find((s: ICustomScript) => s.title === msg.data.title);
       if (customScript?.script && customScript?.title) {
-        const editor = window.activeTextEditor;
-        if (!editor) return;
-
-        const article = ArticleHelper.getFrontMatter(editor);
-
-        const wsFolder = Folders.getWorkspaceFolder();
-        if (wsFolder) {
-          const wsPath = wsFolder.fsPath;
-
-          let articleData = `'${JSON.stringify(article?.data)}'`;
-          if (os.type() === "Windows_NT") {
-            articleData = `"${JSON.stringify(article?.data).replace(/"/g, `""`)}"`;
-          }
-
-          exec(`${customScript.nodeBin || "node"} ${path.join(wsPath, msg.data.script)} "${wsPath}" "${editor?.document.uri.fsPath}" ${articleData}`, (error, stdout) => {
-            if (error) {
-              Notifications.error(`${msg?.data?.title}: ${error.message}`);
-              return;
-            }
-
-            window.showInformationMessage(`${msg?.data?.title}: ${stdout || "Executed your custom script."}`, 'Copy output').then(value => {
-              if (value === 'Copy output') {
-                vscodeEnv.clipboard.writeText(stdout);
-              }
-            });
-          });
-        }
+        CustomScript.run(customScript);
       }
     }
   }
@@ -407,6 +381,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
       data: {
         seo: {
           title: Settings.get(SETTING_SEO_TITLE_LENGTH) as number || -1,
+          slug: Settings.get(SETTING_SEO_SLUG_LENGTH) as number || -1,
           description: Settings.get(SETTING_SEO_DESCRIPTION_LENGTH) as number || -1,
           content: Settings.get(SETTING_SEO_CONTENT_MIN_LENGTH) as number || -1,
           descriptionField: Settings.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description
@@ -430,7 +405,8 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         preview: Preview.getSettings(),
         commaSeparatedFields: Settings.get(SETTING_COMMA_SEPARATED_FIELDS) || [],
         contentTypes: Settings.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
-        dashboardViewData: Dashboard.viewData
+        dashboardViewData: Dashboard.viewData,
+        draftField: Settings.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD)
       } as PanelSettings
     });
   }
@@ -502,6 +478,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
    * Get article details
    */
   private getArticleDetails() {
+    const baseUrl = Settings.get<string>(SETTING_SITE_BASEURL);
     const editor = window.activeTextEditor;
     if (!editor) {
       return null;
@@ -518,13 +495,36 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
       content = content.replace(/({{(.*?)}})/g, ''); // remove hugo shortcodes
       
       const mdTree = fromMarkdown(content);
-      const headings = mdTree.children.filter(node => node.type === 'heading').length;
-      const paragraphs = mdTree.children.filter(node => node.type === 'paragraph').length;
+      const elms: Parent[] | Link[] = this.getAllElms(mdTree);
+
+      const headings = elms.filter(node => node.type === 'heading');
+      const paragraphs = elms.filter(node => node.type === 'paragraph').length;
+      const images = elms.filter(node => node.type === 'image').length;
+      const links: string[] = elms.filter(node => node.type === 'link').map(node => (node as Link).url);
+
+      const internalLinks = links.filter(link => !link.startsWith('http') || (baseUrl && link.toLowerCase().includes((baseUrl || "").toLowerCase()))).length;
+      let externalLinks = links.filter(link => link.startsWith('http'));
+      if (baseUrl) {
+        externalLinks = externalLinks.filter(link => !link.toLowerCase().includes(baseUrl.toLowerCase()));
+      }
+
+      const headers = [];
+      for (const header of headings) { 
+        const text = header?.children?.filter((node: any) => node.type === 'text').map((node: any) => node.value).join(" ");
+        if (text) {
+          headers.push(text);
+        }
+      }
+      
       const wordCount = this.wordCount(0, mdTree);
 
       return {
-        headings,
+        headings: headings.length,
+        headingsText: headers,
         paragraphs,
+        images,
+        internalLinks,
+        externalLinks: externalLinks.length,
         wordCount,
         content: article.content
       };
@@ -533,6 +533,21 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     return null;
   }
 
+  private getAllElms(node: Content | any, allElms?: any[]): any[] {
+    if (!allElms) {
+      allElms = [];
+    }
+
+    if (node.children?.length > 0) {
+      for (const child of node.children) {
+        allElms.push(Object.assign({}, child));
+        this.getAllElms(child, allElms);
+      }
+    }
+
+    return allElms;
+  }
+
   private counts(acc: any, node: any) {
     // add 1 to an initial or existing value
     acc[node.type] = (acc[node.type] || 0) + 1;

src/extension.ts

@@ -15,6 +15,7 @@ import { Extension } from './helpers/Extension';
 import { DashboardData } from './models/DashboardData';
 import { Settings as SettingsHelper } from './helpers';
 import { Content } from './commands/Content';
+import ContentProvider from './providers/ContentProvider';
 
 let frontMatterStatusBar: vscode.StatusBarItem;
 let statusDebouncer: { (fnc: any, time: number): void; };
@@ -125,7 +126,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	});
 
 	// Settings promotion command
-	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.promote, () => { console.log('promote'); SettingsHelper.promote(); }));
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.promote, SettingsHelper.promote ));
 
 	// Collapse all sections in the webview
 	const collapseAll = vscode.commands.registerCommand(COMMAND_NAME.collapseSections, () => {
@@ -175,6 +176,9 @@ export async function activate(context: vscode.ExtensionContext) {
 	// Inserting an image in Markdown
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.insertImage, Article.insertImage));
 
+	// Create the editor experience for bulk scripts
+	subscriptions.push(vscode.workspace.registerTextDocumentContentProvider(ContentProvider.scheme, new ContentProvider()));
+
 	// Subscribe all commands
 	subscriptions.push(
 		insertTags,

src/helpers/ArticleHelper.ts

@@ -14,6 +14,7 @@ import { EditorHelper } from '@estruyf/vscode';
 import sanitize from '../helpers/Sanitize';
 import { existsSync, mkdirSync } from 'fs';
 import { ContentType } from '../models';
+import { DateHelper } from './DateHelper';
 
 export class ArticleHelper {
   
@@ -31,9 +32,9 @@ export class ArticleHelper {
    * Retrieve the file's front matter by its path
    * @param filePath 
    */
-  public static getFrontMatterByPath(filePath: string) {   
+  public static getFrontMatterByPath(filePath: string, surpressNotification: boolean = false) {   
     const file = fs.readFileSync(filePath, { encoding: "utf-8" });
-    return ArticleHelper.parseFile(file, filePath);
+    return ArticleHelper.parseFile(file, filePath, surpressNotification);
   }
 
   /**
@@ -203,7 +204,7 @@ export class ArticleHelper {
       let newFileName = `${sanitizedName}.md`;
 
       if (prefix && typeof prefix === "string") {
-        newFileName = `${format(new Date(), prefix)}-${newFileName}`;
+        newFileName = `${format(new Date(), DateHelper.formatUpdate(prefix) as string)}-${newFileName}`;
       }
       
       newFilePath = join(folderPath, newFileName);
@@ -222,7 +223,7 @@ export class ArticleHelper {
    * @param fileContents 
    * @returns 
    */
-  private static parseFile(fileContents: string, fileName: string): matter.GrayMatterFile<string> | null {
+  private static parseFile(fileContents: string, fileName: string, surpressNotification: boolean = false): matter.GrayMatterFile<string> | null {
     try {
       const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
       
@@ -250,19 +251,20 @@ export class ArticleHelper {
       const items = [{ 
         title: "Check file", 
         action: async () => {
-          console.log(fileName);
           await EditorHelper.showFile(fileName)
         } 
       }];
-      
-      Notifications.error(`There seems to be an issue parsing the content its front matter. FileName: ${basename(fileName)}. ERROR: ${error.message || error}`, ...items).then((result: any) => {
-        if (result?.title) {
-          const item = items.find(i => i.title === result.title);
-          if (item) {
-            item.action();
+
+      if (!surpressNotification) {
+        Notifications.error(`There seems to be an issue parsing the content its front matter. FileName: ${basename(fileName)}. ERROR: ${error.message || error}`, ...items).then((result: any) => {
+          if (result?.title) {
+            const item = items.find(i => i.title === result.title);
+            if (item) {
+              item.action();
+            }
           }
-        }
-      });
+        });
+      }
     }
     return null;
   }

src/helpers/ContentType.ts

@@ -1,18 +1,59 @@
 import { ArticleHelper, Settings } from ".";
-import { SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from "../constants";
-import { ContentType as IContentType } from '../models';
+import { SETTINGS_CONTENT_DRAFT_FIELD, SETTING_TAXONOMY_CONTENT_TYPES } from "../constants";
+import { ContentType as IContentType, DraftField } from '../models';
 import { Uri, workspace, window } from 'vscode'; 
 import { Folders } from "../commands/Folders";
 import { Questions } from "./Questions";
-import { format } from "date-fns";
-import { join } from "path";
-import { existsSync, mkdirSync, writeFileSync } from "fs";
+import { writeFileSync } from "fs";
 import { Notifications } from "./Notifications";
 import { DEFAULT_CONTENT_TYPE_NAME } from "../constants/ContentType";
 
 
 export class ContentType {
 
+  /**
+   * Retrieve the draft field
+   * @returns 
+   */
+  public static getDraftField() {
+    const draftField = Settings.get<DraftField | null | undefined>(SETTINGS_CONTENT_DRAFT_FIELD);
+    if (draftField) {
+      return draftField;
+    }
+
+    return null;
+  }
+
+  /**
+   * Retrieve the field its status
+   * @param data 
+   * @returns 
+   */
+  public static getDraftStatus(data: { [field: string]: any }) {
+    const contentType = ArticleHelper.getContentType(data);
+    const draftSetting = ContentType.getDraftField();
+
+    const draftField = contentType.fields.find(f => f.type === "draft");
+
+    let fieldValue = null;
+
+    if (draftField) {
+      fieldValue = data[draftField.name];
+    } else if (draftSetting && data && data[draftSetting.name]) {
+      fieldValue = data[draftSetting.name];
+    }
+
+    if (draftSetting && fieldValue) {
+      if (draftSetting.type === "boolean") {
+        return fieldValue ? "Draft" : "Published";
+      } else {
+        return fieldValue;
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Create content based on content types
    * @returns 

src/helpers/CustomScript.ts

@@ -0,0 +1,119 @@
+import { CustomScript as ICustomScript } from '../models/PanelSettings';
+import { window, env as vscodeEnv, ProgressLocation } from 'vscode';
+import { ArticleHelper } from '.';
+import { Folders } from '../commands/Folders';
+import { exec } from 'child_process';
+import matter = require('gray-matter');
+import * as os from 'os';
+import { join } from 'path';
+import { Notifications } from './Notifications';
+import ContentProvider from '../providers/ContentProvider';
+
+export class CustomScript {
+
+  public static async run(script: ICustomScript): Promise<void> {
+    const wsFolder = Folders.getWorkspaceFolder();
+
+    if (wsFolder) {
+      const wsPath = wsFolder.fsPath;
+
+      if (script.bulk) {
+        // Run script on all files
+        CustomScript.bulkRun(wsPath, script);
+      } else {
+        // Run script on current file.
+        CustomScript.singleRun(wsPath, script);
+      }
+    }
+  }
+
+  private static async singleRun(wsPath: string, script: ICustomScript): Promise<void> {
+    const editor = window.activeTextEditor;
+    if (!editor) return;
+
+    const article = ArticleHelper.getFrontMatter(editor);
+
+    if (article) {
+      const output = await CustomScript.runScript(wsPath, article, editor.document.uri.fsPath, script);
+
+      CustomScript.showOutput(output, script);
+    } else {
+      Notifications.warning(`${script.title}: Current article couldn't be retrieved.`);
+    }
+  }
+
+  private static async bulkRun(wsPath: string, script: ICustomScript): Promise<void> {
+    const folders = await Folders.getInfo();
+
+    if (!folders || folders.length === 0) {
+      Notifications.warning(`${script.title}: No files found.`);
+      return;
+    }
+
+    let output: string[] = [];
+
+    window.withProgress({
+			location: ProgressLocation.Notification,
+			title: `Executing: ${script.title}`,
+			cancellable: false
+		}, async (progress, token) => {      
+      for await (const folder of folders) {
+        if (folder.lastModified.length > 0) {
+          for await (const file of folder.lastModified) {
+            try {
+              const article = ArticleHelper.getFrontMatterByPath(file.filePath, true);
+              if (article) {
+                const crntOutput = await CustomScript.runScript(wsPath, article, file.filePath, script);
+                if (crntOutput) {
+                  output.push(crntOutput);
+                }
+              }
+            } catch (error) {
+              // Skipping file
+            }
+          }
+        }
+      }
+  
+      CustomScript.showOutput(output.join(`\n`), script);
+    });
+  }
+
+  private static async runScript(wsPath: string, article: matter.GrayMatterFile<string> | null, contentPath: string, script: ICustomScript): Promise<string | null> {
+    return new Promise((resolve, reject) => {
+      let articleData = "";
+      if (os.type() === "Windows_NT") {
+        articleData = `"${JSON.stringify(article?.data).replace(/"/g, `""`)}"`;
+      } else {
+        articleData = JSON.stringify(article?.data).replace(/'/g, "%27");
+        articleData = `'${articleData}'`;
+      }
+
+      exec(`${script.nodeBin || "node"} ${join(wsPath, script.script)} "${wsPath}" "${contentPath}" ${articleData}`, (error, stdout) => {
+        if (error) {
+          Notifications.error(`${script.title}: ${error.message}`);
+          resolve(null);
+          return;
+        }
+
+        resolve(stdout);
+      });
+    });
+  }
+
+  private static showOutput(output: string | null, script: ICustomScript): void {
+    if (output) {
+      if (script.output === "editor") {
+        ContentProvider.show(output, script.title, script.outputType || "text");
+      } else {
+        window.showInformationMessage(`${script.title}: ${output}}`, 'Copy output').then(value => {
+          if (value === 'Copy output') {
+            vscodeEnv.clipboard.writeText(output);
+          }
+        });
+      }
+    } else {
+      Notifications.info(`${script.title}: Executed your custom script.`);
+    }
+  }
+}

src/helpers/DateHelper.ts

@@ -3,6 +3,16 @@ import { parse, parseISO, parseJSON } from "date-fns";
 
 export class DateHelper {
  
+  public static formatUpdate(value: string | null | undefined): string | null {
+    if (!value) {
+      return null;
+    }
+
+    value = value.replace(/YYYY/g, 'yyyy');
+    value = value.replace(/DD/g, 'dd');
+    return value;
+  }
+
   public static tryParse(date: any, format?: string): Date | null {
     if (!date) {
       return null;
@@ -35,7 +45,7 @@ export class DateHelper {
   }
 
   public static isValid(date: any): boolean {
-    return !isNaN(date.getTime());
+    return date instanceof Date && !isNaN(date?.getTime());
   }
 
   public static tryFormatParse(date: string, format: string): Date | null {

src/helpers/FrameworkDetector.ts

@@ -0,0 +1,43 @@
+import { existsSync } from "fs";
+import { resolve } from "path";
+import { FrameworkDetectors } from "../constants/FrameworkDetectors";
+import { Extension } from "./Extension";
+
+export class FrameworkDetector {
+
+  public static get(folder: string) {
+    return this.check(folder);
+  }
+
+  public static getAll() {
+    return FrameworkDetectors.map((detector: any) => detector.framework);
+  }
+
+  private static check(folder: string) {
+    const { dependencies, devDependencies } = Extension.getInstance().packageJson;
+
+    for (const detector of FrameworkDetectors) {
+      if (detector && folder) {
+
+        // Verify by dependencies
+        for (const dependency of detector.requiredDependencies ?? []) {
+          const inDependencies = dependencies && dependencies[dependency]
+          const inDevDependencies = devDependencies && devDependencies[dependency]
+          if (inDependencies || inDevDependencies) {
+            return detector.framework;
+          }
+        }
+
+        // Verify by files
+        for (const filename of detector.requiredFiles ?? []) {
+          const fileExists = existsSync(resolve(folder, filename));
+          if (fileExists) {
+            return detector.framework;
+          }
+        }
+      }
+    }
+
+    return undefined;
+  }
+}

src/helpers/SettingsHelper.ts

@@ -38,7 +38,7 @@ export class Settings {
    * Check if the setting is present in the workspace and ask to promote them to the global settings
    */
   public static async checkToPromote() {
-    const isPromoted = await Extension.getInstance().getState<boolean | undefined>(ExtensionState.SettingPromoted);
+    const isPromoted = await Extension.getInstance().getState<boolean | undefined>(ExtensionState.SettingPromoted, "workspace");
     if (!isPromoted) {
       if (Settings.hasSettings()) {
         window.showInformationMessage(`You have local settings. Would you like to promote them to the global settings ("frontmatter.json")?`, 'Yes', 'No').then(async (result) => {
@@ -47,7 +47,7 @@ export class Settings {
           }
 
           if (result === "No" || result === "Yes") {
-            Extension.getInstance().setState(ExtensionState.SettingPromoted, true);
+            Extension.getInstance().setState(ExtensionState.SettingPromoted, true, "workspace");
           }
         });
       }

src/helpers/SlugHelper.ts

@@ -14,14 +14,18 @@ export class SlugHelper {
 
     // Remove punctuation from input string, and split it into words.
     let cleanTitle = this.removePunctuation(articleTitle);
-    cleanTitle = cleanTitle.toLowerCase();
-    // Split into words
-    let words = cleanTitle.split(/\s/);
-    // Removing stop words
-    words = this.removeStopWords(words);
-    cleanTitle = words.join("-");
-    cleanTitle = this.replaceCharacters(cleanTitle);
-    return cleanTitle;
+    if (cleanTitle) {
+      cleanTitle = cleanTitle.toLowerCase();
+      // Split into words
+      let words = cleanTitle.split(/\s/);
+      // Removing stop words
+      words = this.removeStopWords(words);
+      cleanTitle = words.join("-");
+      cleanTitle = this.replaceCharacters(cleanTitle);
+      return cleanTitle;
+    }
+
+    return null;
   }
 
   /**
@@ -30,9 +34,13 @@ export class SlugHelper {
    * @param value 
    */
   private static removePunctuation(value: string): string {
-    const punctuationless = value.replace(/[\.,-\/#!$@%\^&\*;:{}=\-_`'"~()+\?<>]/g, " ");
+    if (typeof value !== "string") {
+      return "";
+    }
+
+    const punctuationless = value?.replace(/[\.,-\/#!$@%\^&\*;:{}=\-_`'"~()+\?<>]/g, " ");
     // Remove double spaces
-    return punctuationless.replace(/\s{2,}/g," ");
+    return punctuationless?.replace(/\s{2,}/g," ");
   }
 
   /**

src/models/DraftField.ts

@@ -0,0 +1,5 @@
+export interface DraftField {
+  name: string;
+  type: "boolean" | "choice";
+  choices?: string[];
+}

src/models/Framework.ts

@@ -0,0 +1,8 @@
+
+
+export interface Framework {
+  name: string;
+  dist: string;
+  static: string;
+  build: string;
+}

src/models/PanelSettings.ts

@@ -1,4 +1,5 @@
 import { FileType } from "vscode";
+import { DraftField } from ".";
 import { Choice } from "./Choice";
 import { DashboardData } from "./DashboardData";
 
@@ -17,6 +18,7 @@ export interface PanelSettings {
   preview: PreviewSettings;
   contentTypes: ContentType[];
   dashboardViewData: DashboardData | undefined;
+  draftField: DraftField;
 }
 
 export interface ContentType {
@@ -29,7 +31,7 @@ export interface ContentType {
 export interface Field {
   title?: string;
   name: string;
-  type: "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories";
+  type: "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft";
   choices?: string[] | Choice[];
   single?: boolean;
   multiple?: boolean;
@@ -43,6 +45,7 @@ export interface DateInfo {
 
 export interface SEO {
   title: number;
+  slug: number;
   description: number;
   content: number;
   descriptionField: string;
@@ -72,6 +75,9 @@ export interface CustomScript {
   title: string;
   script: string;
   nodeBin?: string;
+  bulk?: boolean;
+  output?: "notification" | "editor";
+  outputType?: string;
 }
 
 export interface PreviewSettings {

src/models/index.ts

@@ -1,4 +1,9 @@
+export * from './Choice';
 export * from './ContentFolder';
+export * from './DashboardData';
+export * from './DraftField';
+export * from './Framework';
+export * from './MediaPaths';
 export * from './PanelSettings';
 export * from './TaxonomyType';
 export * from './VersionInfo';

src/panelWebView/components/ActionButton.tsx

@@ -7,10 +7,13 @@ export interface IActionButtonProps {
   onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
 }
 
-export const ActionButton: React.FunctionComponent<IActionButtonProps> = ({className, onClick, disabled,title}: React.PropsWithChildren<IActionButtonProps>) => {
+const ActionButton: React.FunctionComponent<IActionButtonProps> = ({className, onClick, disabled,title}: React.PropsWithChildren<IActionButtonProps>) => {
   return (
     <div className={`article__action`}>
       <button onClick={onClick} className={className || ""} disabled={disabled}>{title}</button>
     </div>
   );
-};
+};
+
+ActionButton.displayName = 'ActionButton';
+export { ActionButton };

src/panelWebView/components/Actions.tsx

@@ -10,7 +10,7 @@ export interface IActionsProps {
   settings: PanelSettings;
 }
 
-export const Actions: React.FunctionComponent<IActionsProps> = (props: React.PropsWithChildren<IActionsProps>) => {
+const Actions: React.FunctionComponent<IActionsProps> = (props: React.PropsWithChildren<IActionsProps>) => {
   const { metadata, settings } = props;
 
   if (!metadata || Object.keys(metadata).length === 0 || !settings) {
@@ -27,12 +27,15 @@ export const Actions: React.FunctionComponent<IActionsProps> = (props: React.Pro
 
         {
           (settings && settings.scripts && settings.scripts.length > 0) && (
-            settings.scripts.map((value) => (
-              <CustomScript key={value.title.replace(/ /g, '')} {...value} />
+            settings.scripts.map((value, idx) => (
+              <CustomScript key={value?.title?.replace(/ /g, '') || idx} {...value} />
             ))
           )
         }
       </div>
     </Collapsible>
   );
-};
+};
+
+Actions.displayName = 'Actions';
+export { Actions };

src/panelWebView/components/ArticleDetails.tsx

@@ -6,10 +6,13 @@ export interface IArticleDetailsProps {
     headings: number;
     paragraphs: number;
     wordCount: number;
+    internalLinks: number;
+    externalLinks: number;
+    images: number;
   }
 }
 
-export const ArticleDetails: React.FunctionComponent<IArticleDetailsProps> = ({details}: React.PropsWithChildren<IArticleDetailsProps>) => {
+const ArticleDetails: React.FunctionComponent<IArticleDetailsProps> = ({details}: React.PropsWithChildren<IArticleDetailsProps>) => {
   
   if (!details || (details.headings === undefined && details.paragraphs === undefined)) {
     return null;
@@ -42,8 +45,38 @@ export const ArticleDetails: React.FunctionComponent<IArticleDetailsProps> = ({d
               </VsTableRow>
             )
           }
+
+          {
+            details?.internalLinks !== undefined && (
+              <VsTableRow>
+                <VsTableCell>Internal links</VsTableCell>
+                <VsTableCell>{details.internalLinks}</VsTableCell>
+              </VsTableRow>
+            )
+          }
+
+          {
+            details?.externalLinks !== undefined && (
+              <VsTableRow>
+                <VsTableCell>External links</VsTableCell>
+                <VsTableCell>{details.externalLinks}</VsTableCell>
+              </VsTableRow>
+            )
+          }
+
+          {
+            details?.images !== undefined && (
+              <VsTableRow>
+                <VsTableCell>Images</VsTableCell>
+                <VsTableCell>{details.images}</VsTableCell>
+              </VsTableRow>
+            )
+          }
         </VsTableBody>
       </VsTable>
     </div>
   );
-};
+};
+
+ArticleDetails.displayName = 'ArticleDetails';
+export { ArticleDetails };

src/panelWebView/components/BaseView.tsx

@@ -13,7 +13,7 @@ export interface IBaseViewProps {
   folderAndFiles: FolderInfo[] | undefined;
 }
 
-export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndFiles}: React.PropsWithChildren<IBaseViewProps>) => {
+const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndFiles}: React.PropsWithChildren<IBaseViewProps>) => {
   
   const openDashboard = () => {
     MessageHelper.sendMessage(CommandToCode.openDashboard);
@@ -48,4 +48,7 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, fol
       <SponsorMsg />
     </div>
   );
-};
+};
+
+BaseView.displayName = 'BaseView';
+export { BaseView };

src/panelWebView/components/Collapsible.tsx

@@ -10,10 +10,26 @@ export interface ICollapsibleProps {
   sendUpdate?: (open: boolean) => void;
 }
 
-export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
+const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
   const [ isOpen, setIsOpen ] = React.useState(false);
   const collapseKey = `collapse-${id}`;
 
+  useEffect(() => {
+    const collapsed = window.localStorage.getItem(collapseKey);
+    if (collapsed === null || collapsed === 'true') {
+      setIsOpen(true);
+      updateStorage(true);
+    }
+
+    window.addEventListener('message', event => {
+      const message = event.data;
+      if (message.command === Command.closeSections) {
+        setIsOpen(false);
+        updateStorage(false);
+      }
+    });
+  }, ['']);
+
   const updateStorage = (value: boolean) => {
     window.localStorage.setItem(collapseKey, value.toString());
   }
@@ -32,22 +48,6 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, chi
     }
   }
 
-  useEffect(() => {
-    const collapsed = window.localStorage.getItem(collapseKey);
-    if (collapsed === null || collapsed === 'true') {
-      setIsOpen(true);
-      updateStorage(true);
-    }
-
-    window.addEventListener('message', event => {
-      const message = event.data;
-      if (message.command === Command.closeSections) {
-        setIsOpen(false);
-        updateStorage(false);
-      }
-    });
-  }, ['']);
-
   return (
     <VsCollapsible title={title} onClick={triggerClick} open={isOpen}>
       <div className={`section collapsible__body ${className || ""}`} slot="body">
@@ -55,4 +55,7 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, chi
       </div>
     </VsCollapsible>
   );
-};
+};
+
+Collapsible.displayName = 'Collapsible';
+export { Collapsible };

src/panelWebView/components/CustomScript.tsx

@@ -8,7 +8,7 @@ export interface ICustomScriptProps {
   script: string;
 }
 
-export const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title, script}: React.PropsWithChildren<ICustomScriptProps>) => {
+const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title, script}: React.PropsWithChildren<ICustomScriptProps>) => {
 
   const runCustomScript = () => {
     MessageHelper.sendMessage(CommandToCode.runCustomScript, { title, script });
@@ -17,4 +17,7 @@ export const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title
   return (
     <ActionButton onClick={runCustomScript} title={title} />
   );
-};
+};
+
+CustomScript.displayName = 'CustomScript';
+export { CustomScript };

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -24,11 +24,6 @@ const CustomInput = forwardRef<HTMLInputElement, InputProps>(({ value, onClick }
 
 export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, date, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
   const [ dateValue, setDateValue ] = React.useState<Date | null>(null);
-  
-  const onDateChange = (date: Date) => {
-    setDateValue(date);
-    onChange(date);
-  };
 
   React.useEffect(() => {
     const crntValue = DateHelper.tryParse(date, format);
@@ -38,6 +33,11 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({lab
       setDateValue(date);
     }
   }, [ date ]);
+  
+  const onDateChange = (date: Date) => {
+    setDateValue(date);
+    onChange(date);
+  };
 
   return (
     <div className={`metadata_field`}>
@@ -52,7 +52,7 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({lab
           selected={dateValue as Date || new Date()}
           onChange={onDateChange}
           timeInputLabel="Time:"
-          dateFormat={format || "MM/dd/yyyy HH:mm"}
+          dateFormat={DateHelper.formatUpdate(format) || "MM/dd/yyyy HH:mm"}
           customInput={(<CustomInput />)}
           showTimeInput
           />

src/panelWebView/components/Fields/DraftField.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { RocketIcon } from '../Icons/RocketIcon';
+import { VsLabel } from '../VscodeComponents';
+import { ChoiceField } from './ChoiceField';
+import { Toggle } from './Toggle';
+
+export interface IDraftFieldProps {
+  label: string;
+  type: "boolean" | "choice";
+  value: boolean | string | null | undefined;
+
+  choices?: string[];
+
+  onChanged: (value: string | boolean) => void;
+}
+
+export const DraftField: React.FunctionComponent<IDraftFieldProps> = ({ label, type, value, choices, onChanged }: React.PropsWithChildren<IDraftFieldProps>) => {
+
+  if (type === "boolean") {
+    return (
+      <Toggle 
+        label={label}
+        checked={!!value} 
+        onChanged={(checked) => onChanged(checked)} />
+    );
+  }
+
+  if (type === "choice") {
+    return (
+      <ChoiceField
+        label={label}
+        selected={value as string}
+        choices={choices as string[]}
+        multiSelect={false}
+        onChange={value => onChanged(value as string)} />
+    );
+  }
+
+  return null;
+};

src/panelWebView/components/Fields/ImageFallback.tsx

@@ -0,0 +1,38 @@
+import { XCircleIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+
+export interface IImageFallbackProps {
+  src: string;
+}
+
+export const ImageFallback: React.FunctionComponent<IImageFallbackProps> = ({ src }: React.PropsWithChildren<IImageFallbackProps>) => {
+
+  if (!src) {
+    return (
+      <div style={{
+        width: '100%',
+        height: '120px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'var(--button-secondary-hover-background)'
+      }}>
+        <XCircleIcon style={{
+          height: '8rem',
+          width: '8rem',
+          color: 'var(--vscode-errorForeground)',
+        }} />
+
+        <p style={{
+          marginBottom: '1rem',
+          color: 'var(--button-secondary-foreground)',
+        }}>The image couldn't be loaded</p>
+      </div>
+    );
+  }
+
+  return (
+    <img src={src} />
+  );
+};

src/panelWebView/components/Fields/PreviewImage.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ImageFallback } from './ImageFallback';
 import { PreviewImageValue } from './PreviewImageField';
 
 export interface IPreviewImageProps {
@@ -7,9 +8,10 @@ export interface IPreviewImageProps {
 }
 
 export const PreviewImage: React.FunctionComponent<IPreviewImageProps> = ({ value, onRemove }: React.PropsWithChildren<IPreviewImageProps>) => {
+
   return (
     <div className={`metadata_field__preview_image__preview`}>
-      <img src={value.webviewUrl} />
+      <ImageFallback src={value.webviewUrl} />
 
       <button type="button" onClick={() => onRemove(value.original)} className={`metadata_field__preview_image__remove`}>Remove image</button>
     </div>

src/panelWebView/components/Fields/TextField.tsx

@@ -13,17 +13,17 @@ export interface ITextFieldProps {
 
 export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine, limit, label, value, rows, onChange}: React.PropsWithChildren<ITextFieldProps>) => {
   const [ text, setText ] = React.useState<string | null>(value);
-  
-  const onTextChange = (txtValue: string) => {
-    setText(txtValue);
-    onChange(txtValue);
-  };
 
   React.useEffect(() => {
     if (text !== value) {
       setText(value);
     }
   }, [ value ]);
+  
+  const onTextChange = (txtValue: string) => {
+    setText(txtValue);
+    onChange(txtValue);
+  };
 
   let isValid = true;
   if (limit && limit !== -1) {
@@ -59,8 +59,6 @@ export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine,
         )
       }
 
-      
-
       {
         limit && limit > 0 && (text || "").length > limit && (
           <div className={`metadata_field__limit`}>

src/panelWebView/components/FileItem.tsx

@@ -9,7 +9,7 @@ export interface IFileItemProps {
   path: string;
 }
 
-export const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React.PropsWithChildren<IFileItemProps>) => {
+const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React.PropsWithChildren<IFileItemProps>) => {
   
   const openFile = () => {
     MessageHelper.sendMessage(CommandToCode.openInEditor, path);
@@ -29,4 +29,7 @@ export const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }
       <span>{name}</span>
     </li>
   );
-};
+};
+
+FileItem.displayName = 'FileItem';
+export { FileItem };

src/panelWebView/components/FileList.tsx

@@ -9,7 +9,7 @@ export interface IFileListProps {
   totalFiles: number;
 }
 
-export const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, totalFiles}: React.PropsWithChildren<IFileListProps>) => {
+const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, totalFiles}: React.PropsWithChildren<IFileListProps>) => {
 
   if (!files || files.length === 0) {
     return null;
@@ -28,4 +28,7 @@ export const FileList: React.FunctionComponent<IFileListProps> = ({files, folder
       </ul>
     </div>
   );
-};
+};
+
+FileList.displayName = 'FileList';
+export { FileList };

src/panelWebView/components/FolderAndFiles.tsx

@@ -9,7 +9,7 @@ export interface IFolderAndFilesProps {
   isBase?: boolean;
 }
 
-export const FolderAndFiles: React.FunctionComponent<IFolderAndFilesProps> = ({data, isBase}: React.PropsWithChildren<IFolderAndFilesProps>) => {
+const FolderAndFiles: React.FunctionComponent<IFolderAndFilesProps> = ({data, isBase}: React.PropsWithChildren<IFolderAndFilesProps>) => {
 
   if (!data) {
     return null;
@@ -42,4 +42,7 @@ export const FolderAndFiles: React.FunctionComponent<IFolderAndFilesProps> = ({d
       }
     </>
   );
-};
+};
+
+FolderAndFiles.displayName = 'FolderAndFiles';
+export { FolderAndFiles };

src/panelWebView/components/GlobalSettings.tsx

@@ -11,7 +11,7 @@ export interface IGlobalSettingsProps {
   isBase?: boolean;
 }
 
-export const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings, isBase}: React.PropsWithChildren<IGlobalSettingsProps>) => {
+const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings, isBase}: React.PropsWithChildren<IGlobalSettingsProps>) => {
   const { modifiedDateUpdate, fmHighlighting } = settings || {};
   const [ previewUrl, setPreviewUrl ] = React.useState<string>("");
   const [ isDirty, setIsDirty ] = React.useState<boolean>(false);
@@ -65,4 +65,7 @@ export const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({s
       </Collapsible>
     </>
   );
-};
+};
+
+GlobalSettings.displayName = 'GlobalSettings';
+export { GlobalSettings };

src/panelWebView/components/Icon.tsx

@@ -4,7 +4,10 @@ export interface IIconProps {
   name: string;
 }
 
-export const Icon: React.FunctionComponent<IIconProps> = ({ name }: React.PropsWithChildren<IIconProps>) => {
+const Icon: React.FunctionComponent<IIconProps> = ({ name }: React.PropsWithChildren<IIconProps>) => {
   
   return (<i className={`codicon codicon-${name}`}></i>);
-};
+};
+
+Icon.displayName = 'Icon';
+export { Icon };

src/panelWebView/components/Metadata.tsx

@@ -18,6 +18,7 @@ import { ChoiceField } from './Fields/ChoiceField';
 import useContentType from '../../hooks/useContentType';
 import { DateHelper } from '../../helpers/DateHelper';
 import FieldBoundary from './ErrorBoundary/FieldBoundary';
+import { DraftField } from './Fields/DraftField';
 
 export interface IMetadataProps {
   settings: PanelSettings | undefined;
@@ -26,7 +27,7 @@ export interface IMetadataProps {
   unsetFocus: () => void;
 }
 
-export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata, focusElm, unsetFocus}: React.PropsWithChildren<IMetadataProps>) => {
+const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata, focusElm, unsetFocus}: React.PropsWithChildren<IMetadataProps>) => {
   const contentType = useContentType(settings, metadata);
 
   const sendUpdate = (field: string | undefined, value: any) => {
@@ -172,6 +173,20 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
               unsetFocus={unsetFocus} />
           </FieldBoundary>
         );
+      } else if (field.type === 'draft') {
+        const draftField = settings?.draftField;
+        const value = metadata[field.name];
+
+        return (
+          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+            <DraftField
+              label={field.title || field.name}
+              type={draftField.type}
+              choices={draftField.choices || []}
+              value={value as boolean | string | null | undefined}
+              onChanged={(value: boolean | string) => sendUpdate(field.name, value)} />
+          </FieldBoundary>
+        );
       } else {
         return null;
       }
@@ -186,15 +201,21 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
       }
 
       {
-        <TagPicker type={TagType.keywords} 
-                   icon={<SymbolKeywordIcon />}
-                   crntSelected={metadata.keywords as string[] || []} 
-                   options={[]} 
-                   freeform={true} 
-                   focussed={focusElm === TagType.keywords}
-                   unsetFocus={unsetFocus}
-                   disableConfigurable />
+        <FieldBoundary fieldName={`Keywords`}>
+          <TagPicker 
+            type={TagType.keywords} 
+            icon={<SymbolKeywordIcon />}
+            crntSelected={metadata.keywords as string[] || []} 
+            options={[]} 
+            freeform={true} 
+            focussed={focusElm === TagType.keywords}
+            unsetFocus={unsetFocus}
+            disableConfigurable />
+        </FieldBoundary>
       }
     </Collapsible>
   );
-};
+};
+
+Metadata.displayName = 'Metadata';
+export { Metadata };

src/panelWebView/components/OtherActionButton.tsx

@@ -6,10 +6,13 @@ export interface IOtherActionButtonProps {
   onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
 }
 
-export const OtherActionButton: React.FunctionComponent<IOtherActionButtonProps> = ({ className, disabled, onClick, children}: React.PropsWithChildren<IOtherActionButtonProps>) => {
+const OtherActionButton: React.FunctionComponent<IOtherActionButtonProps> = ({ className, disabled, onClick, children}: React.PropsWithChildren<IOtherActionButtonProps>) => {
   return (
     <div className={`ext_link_block`}>
       <button onClick={onClick} className={className || ""} disabled={disabled}>{children}</button>
     </div>
   );
-};
+};
+
+OtherActionButton.displayName = 'OtherActionButton';
+export { OtherActionButton };

src/panelWebView/components/OtherActions.tsx

@@ -19,7 +19,7 @@ export interface IOtherActionsProps {
   isBase?: boolean;
 }
 
-export const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, settings, isBase}: React.PropsWithChildren<IOtherActionsProps>) => {
+const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, settings, isBase}: React.PropsWithChildren<IOtherActionsProps>) => {
 
   const openSettings = () => {
     MessageHelper.sendMessage(CommandToCode.openSettings);
@@ -64,4 +64,7 @@ export const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFil
       </Collapsible>
     </>
   );
-};
+};
+
+OtherActions.displayName = 'OtherActions';
+export { OtherActions };

src/panelWebView/components/Preview.tsx

@@ -7,7 +7,7 @@ export interface IPreviewProps {
   slug: string;
 }
 
-export const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.PropsWithChildren<IPreviewProps>) => {
+const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.PropsWithChildren<IPreviewProps>) => {
 
   const open = () => {
     MessageHelper.sendMessage(CommandToCode.openPreview);
@@ -20,4 +20,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.Pr
   return (
     <ActionButton onClick={open} title={`Open preview`} />
   );
-};
+};
+
+Preview.displayName = 'Preview';
+export { Preview };

src/panelWebView/components/PublishAction.tsx

@@ -9,7 +9,7 @@ export interface IPublishActionProps {
   draft: boolean;
 }
 
-export const PublishAction: React.FunctionComponent<IPublishActionProps> = (props: React.PropsWithChildren<IPublishActionProps>) => {
+const PublishAction: React.FunctionComponent<IPublishActionProps> = (props: React.PropsWithChildren<IPublishActionProps>) => {
   const { draft } = props;
 
   const publish = () => {
@@ -19,4 +19,7 @@ export const PublishAction: React.FunctionComponent<IPublishActionProps> = (prop
   return (
     <ActionButton onClick={publish} className={`${draft ? "" : "secondary"}`} title={draft ? "Publish" : "Revert to draft"} />
   );
-};
+};
+
+PublishAction.displayName = 'PublishAction';
+export { PublishAction };

src/panelWebView/components/SeoDetails.tsx

@@ -9,7 +9,7 @@ export interface ISeoDetailsProps {
   noValidation?: boolean;
 }
 
-export const SeoDetails: React.FunctionComponent<ISeoDetailsProps> = (props: React.PropsWithChildren<ISeoDetailsProps>) => {
+const SeoDetails: React.FunctionComponent<ISeoDetailsProps> = (props: React.PropsWithChildren<ISeoDetailsProps>) => {
   const { allowedLength, title, value, valueTitle, noValidation } = props;
 
   const validate = () => {
@@ -38,4 +38,7 @@ export const SeoDetails: React.FunctionComponent<ISeoDetailsProps> = (props: Rea
       </VsTable>
     </div>
   );
-};
+};
+
+SeoDetails.displayName = 'SeoDetails';
+export { SeoDetails };

src/panelWebView/components/SeoFieldInfo.tsx

@@ -9,14 +9,17 @@ export interface ISeoFieldInfoProps {
   isValid?: boolean;
 }
 
-export const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ title, value, recommendation, isValid }: React.PropsWithChildren<ISeoFieldInfoProps>) => {
+const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ title, value, recommendation, isValid }: React.PropsWithChildren<ISeoFieldInfoProps>) => {
   return (
     <VsTableRow>
       <VsTableCell className={`table__cell table__title`}>{title}</VsTableCell>
       <VsTableCell className={`table__cell`}>{value}/{recommendation}</VsTableCell>
       <VsTableCell className={`table__cell table__cell__validation`}>
-        { isValid !== undefined ? <ValidInfo isValid={isValid} /> : <span>-</span> }
+        { isValid !== undefined ? <ValidInfo label={undefined} isValid={isValid} /> : <span>-</span> }
       </VsTableCell>
     </VsTableRow>
   );
-};
+};
+
+SeoFieldInfo.displayName = 'SeoFieldInfo';
+export { SeoFieldInfo };

src/panelWebView/components/SeoKeywordInfo.tsx

@@ -8,25 +8,78 @@ export interface ISeoKeywordInfoProps {
   description: string;
   slug: string;
   content: string;
+  wordCount?: number;
+  headings?: string[];
 }
 
-export const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({keyword, title, description, slug, content}: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
+const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({keyword, title, description, slug, content, wordCount, headings}: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
+
+  const density = () => {
+    if (!wordCount) {
+      return null;
+    }
+
+    const pattern = new RegExp('\\b' + keyword.toLowerCase() + '\\b', 'ig');
+    const count = (content.match(pattern) || []).length;
+    const density = (count / wordCount) * 100;
+    const densityTitle = `Keyword usage ${density.toFixed(2)}% *`;
+
+    if (density < 0.75) {
+      return <ValidInfo label={densityTitle} isValid={false} />
+    } else if (density >= 0.75 && density < 1.5) {
+      return <ValidInfo label={densityTitle} isValid={true} />
+    } else {
+      return <ValidInfo label={densityTitle} isValid={false} />
+    }
+  };
+
+  const checkHeadings = () => {    
+    if (!headings || headings.length === 0) {
+      return null;
+    }
+
+    const exists = headings.filter(heading => heading.split(' ').findIndex(word => word.toLowerCase() === keyword.toLowerCase()) !== -1);
+    return <ValidInfo label={`Used in heading(s)`} isValid={exists.length > 0} />;
+  }; 
+
+  if (!keyword) {
+    return null;
+  }
 
   return (
     <VsTableRow>
       <VsTableCell className={`table__cell`}>{keyword}</VsTableCell>
-      <VsTableCell className={`table__cell table__cell__validation`}>
-        <ValidInfo isValid={!!title && title.toLowerCase().includes(keyword.toLowerCase())} />
-      </VsTableCell>
-      <VsTableCell className={`table__cell table__cell__validation`}>
-        <ValidInfo isValid={!!description && description.toLowerCase().includes(keyword.toLowerCase())} />
-      </VsTableCell>
-      <VsTableCell className={`table__cell table__cell__validation`}>
-        <ValidInfo isValid={!!slug && (slug.toLowerCase().includes(keyword.toLowerCase()) || slug.toLowerCase().includes(keyword.replace(/ /g, '-').toLowerCase()))} />
-      </VsTableCell>
-      <VsTableCell className={`table__cell table__cell__validation`}>
-        <ValidInfo isValid={!!content && content.toLowerCase().includes(keyword.toLowerCase())} />
+      <VsTableCell className={`table__cell table__cell__validation table__cell__seo_details`}>
+        <div>
+          <ValidInfo label={`Title`} isValid={!!title && title.toLowerCase().includes(keyword.toLowerCase())} />
+        </div>
+        <div>
+          <ValidInfo label={`Description`} isValid={!!description && description.toLowerCase().includes(keyword.toLowerCase())} />
+        </div>
+        <div>
+          <ValidInfo label={`Slug`} isValid={!!slug && (slug.toLowerCase().includes(keyword.toLowerCase()) || slug.toLowerCase().includes(keyword.replace(/ /g, '-').toLowerCase()))} />
+        </div>
+        <div>
+          <ValidInfo label={`Content`} isValid={!!content && content.toLowerCase().includes(keyword.toLowerCase())} />
+        </div>
+        {
+          headings && headings.length > 0 && (
+            <div>
+              {checkHeadings()}
+            </div>
+          )
+        }
+        {
+          wordCount && (
+            <div>
+              {density()}
+            </div>
+          )
+        }
       </VsTableCell>
     </VsTableRow>
   );
-};
+};
+
+SeoKeywordInfo.displayName = 'SeoKeywordInfo';
+export { SeoKeywordInfo };

src/panelWebView/components/SeoKeywords.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SeoKeywordInfo } from './SeoKeywordInfo';
-import { VsTable, VsTableBody, VsTableCell, VsTableHeader, VsTableHeaderCell, VsTableRow } from './VscodeComponents';
+import { VsTable, VsTableBody, VsTableHeader, VsTableHeaderCell } from './VscodeComponents';
 
 export interface ISeoKeywordsProps {
   keywords: string[] | null;
@@ -9,9 +9,27 @@ export interface ISeoKeywordsProps {
   description: string;
   slug: string;
   content: string;
+  headings?: string[];
+  wordCount?: number;
 }
 
-export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keywords, ...data}: React.PropsWithChildren<ISeoKeywordsProps>) => {
+const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keywords, ...data}: React.PropsWithChildren<ISeoKeywordsProps>) => {
+
+  const validateKeywords = () => {
+    if (!keywords) {
+      return [];
+    }
+
+    if (typeof keywords === 'string') {
+      return [keywords];
+    }
+
+    if (Array.isArray(keywords)) {
+      return keywords;
+    }
+
+    return [];
+  }
 
   if (!keywords || keywords.length === 0) {
     return null;
@@ -21,17 +39,14 @@ export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keyword
     <div className={`seo__status__keywords`}>
       <h4>Keywords</h4>
 
-      <VsTable bordered>
+      <VsTable bordered columns={["30%", "auto"]}>
         <VsTableHeader slot="header">
           <VsTableHeaderCell className={`table__cell`}>Keyword</VsTableHeaderCell>
-          <VsTableHeaderCell className={`table__cell`}>Title</VsTableHeaderCell>
-          <VsTableHeaderCell className={`table__cell`}>Description</VsTableHeaderCell>
-          <VsTableHeaderCell className={`table__cell`}>Slug</VsTableHeaderCell>
-          <VsTableHeaderCell className={`table__cell`}>Content</VsTableHeaderCell>
+          <VsTableHeaderCell className={`table__cell`}>Details</VsTableHeaderCell>
         </VsTableHeader>
         <VsTableBody slot="body">
           {
-            keywords.map((keyword, index) => {
+            validateKeywords().map((keyword, index) => {
               return (
                 <SeoKeywordInfo key={index} keyword={keyword} {...data} />
               );
@@ -39,8 +54,17 @@ export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keyword
           }
         </VsTableBody>
       </VsTable>
-      
-      
+
+      {
+        data.wordCount && (
+          <div className={`seo__status__note`}>
+            * A keyword density of 1-1.5% is sufficient in most cases.
+          </div>
+        )
+      }
     </div>
   );
-};
+};
+
+SeoKeywords.displayName = 'SeoKeywords';
+export { SeoKeywords };

src/panelWebView/components/SeoStatus.tsx

@@ -11,14 +11,34 @@ export interface ISeoStatusProps {
   data: any;
 }
 
-export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React.PropsWithChildren<ISeoStatusProps>) => {
+const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React.PropsWithChildren<ISeoStatusProps>) => {
   const { data, seo } = props;
-  const { title } = data;
+  const { title, slug } = data;
   const [ isOpen, setIsOpen ] = React.useState(true);
   const tableRef = React.useRef<HTMLElement>();
+  const pushUpdate = React.useRef((value: boolean) => {
+    setTimeout(() => {
+      setIsOpen(value);
+    }, 10);
+  }).current;
 
   const { descriptionField } = seo;
 
+  // Workaround for lit components not updating render
+  React.useEffect(() => {
+    setTimeout(() => {
+      let height = 0;
+
+      tableRef.current?.childNodes.forEach((elm: any) => {
+        height += elm.clientHeight;
+      });
+
+      if (height > 0 && tableRef.current) {
+        tableRef.current.style.height = `${height}px`;
+      }
+    }, 10);
+  }, [title, data[descriptionField], data?.articleDetails?.wordCount]);
+
   if (!title && !data[descriptionField]) {
     return null;
   }
@@ -45,6 +65,11 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
                   <SeoFieldInfo title={`title`} value={title.length} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
                 )
               }
+              { 
+                (slug && seo.slug > 0) && (
+                  <SeoFieldInfo title={`slug`} value={slug.length} recommendation={`${seo.slug} chars`} isValid={slug.length <= seo.slug} />
+                )
+              }
 
               {
                 (data[descriptionField] && seo.description > 0) && (
@@ -65,6 +90,8 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
                      title={title} 
                      description={data[descriptionField]} 
                      slug={data.slug}
+                     headings={data?.articleDetails?.headingsText}
+                     wordCount={data?.articleDetails?.wordCount}
                      content={data?.articleDetails?.content} />
 
         <ArticleDetails details={data.articleDetails} />
@@ -72,24 +99,14 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
     );
   };
 
-  // Workaround for lit components not updating render
-  React.useEffect(() => {
-    setTimeout(() => {
-      let height = 0;
-
-      tableRef.current?.childNodes.forEach((elm: any) => {
-        height += elm.clientHeight;
-      });
-
-      if (height > 0 && tableRef.current) {
-        tableRef.current.style.height = `${height}px`;
-      }
-    }, 10);
-  }, [title, data[descriptionField], data?.articleDetails?.wordCount]);
+  
 
   return (
-    <Collapsible id={`seo`} title="SEO Status" sendUpdate={(value) => setIsOpen(value)}>
+    <Collapsible id={`seo`} title="SEO Status" sendUpdate={pushUpdate}>
       { renderContent() }
     </Collapsible>
   );
-};
+};
+
+SeoStatus.displayName = 'SeoStatus';
+export { SeoStatus };

src/panelWebView/components/SlugAction.tsx

@@ -11,7 +11,7 @@ export interface ISlugActionProps {
   slugOpts: Slug;
 }
 
-export const SlugAction: React.FunctionComponent<ISlugActionProps> = (props: React.PropsWithChildren<ISlugActionProps>) => {
+const SlugAction: React.FunctionComponent<ISlugActionProps> = (props: React.PropsWithChildren<ISlugActionProps>) => {
   const { value, crntValue, slugOpts } = props;
 
   let slug = SlugHelper.createSlug(value);
@@ -24,4 +24,7 @@ export const SlugAction: React.FunctionComponent<ISlugActionProps> = (props: Rea
   return (
     <ActionButton onClick={optimize} disabled={crntValue === slug} title={`Optimize slug`} />
   );
-};
+};
+
+SlugAction.displayName = 'SlugAction';
+export { SlugAction };

src/panelWebView/components/Spinner.tsx

@@ -2,8 +2,11 @@ import * as React from 'react';
 
 export interface ISpinnerProps {}
 
-export const Spinner: React.FunctionComponent<ISpinnerProps> = (props: React.PropsWithChildren<ISpinnerProps>) => {
+const Spinner: React.FunctionComponent<ISpinnerProps> = (props: React.PropsWithChildren<ISpinnerProps>) => {
   return (
     <div className="spinner">Loading...</div>
   );
-};
+};
+
+Spinner.displayName = 'Spinner';
+export { Spinner };

src/panelWebView/components/SponsorMsg.tsx

@@ -4,7 +4,7 @@ import { HeartIcon } from './Icons/HeartIcon';
 
 export interface ISponsorMsgProps {}
 
-export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = (props: React.PropsWithChildren<ISponsorMsgProps>) => {
+const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = (props: React.PropsWithChildren<ISponsorMsgProps>) => {
   return (
     <p className={`sponsor`}>
       <a href={SPONSOR_LINK} title="Sponsor Front Matter">
@@ -12,4 +12,7 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = (props: Rea
       </a>
     </p>
   );
-};
+};
+
+SponsorMsg.displayName = 'SponsorMsg';
+export { SponsorMsg };

src/panelWebView/components/Tag.tsx

@@ -13,7 +13,7 @@ export interface ITagProps {
   onRemove: (tags: string) => void;
 }
 
-export const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithChildren<ITagProps>) => {
+const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithChildren<ITagProps>) => {
   const { value, className, title, onRemove, onCreate, disableConfigurable } = props;
 
   return (
@@ -25,4 +25,7 @@ export const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithCh
       <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <span><ArchiveIcon /></span></button>
     </div>
   );
-};
+};
+
+Tag.displayName = 'Tag';
+export { Tag };

src/panelWebView/components/TagPicker.tsx

@@ -20,7 +20,7 @@ export interface ITagPickerProps {
   disableConfigurable?: boolean;
 }
 
-export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
+const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
   const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable } = props;
   const [ selected, setSelected ] = React.useState<string[]>([]);
   const [ inputValue, setInputValue ] = React.useState<string>("");
@@ -194,4 +194,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
         disableConfigurable={!!disableConfigurable} />
     </div>
   );
-};
+};
+
+TagPicker.displayName = 'TagPicker';
+export { TagPicker };

src/panelWebView/components/Tags.tsx

@@ -11,14 +11,14 @@ export interface ITagsProps {
   onRemove: (tags: string) => void;
 }
 
-export const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWithChildren<ITagsProps>) => {
+const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWithChildren<ITagsProps>) => {
   const { values, options, onCreate, onRemove, disableConfigurable } = props;
 
   const knownTags = values.filter(v => options.includes(v));
   const unknownTags = values.filter(v => !options.includes(v));
 
   const generateKey = (tag: string, idx: number) => {
-    if (tag) {
+    if (tag && typeof tag === 'string') {
       return `${tag.replace(/ /g, "_")}-${idx}`;
     }
     return `tag-${idx}`;
@@ -38,4 +38,7 @@ export const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWith
       }
     </div>
   );
-};
+};
+
+Tags.displayName = 'Tags';
+export { Tags };

src/panelWebView/components/ValidInfo.tsx

@@ -3,10 +3,11 @@ import { CheckIcon } from './Icons/CheckIcon';
 import { WarningIcon } from './Icons/WarningIcon';
 
 export interface IValidInfoProps {
+  label?: string;
   isValid: boolean;
 }
 
-export const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({isValid}: React.PropsWithChildren<IValidInfoProps>) => {
+const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({label, isValid}: React.PropsWithChildren<IValidInfoProps>) => {
   return (
     <>
       {
@@ -16,6 +17,10 @@ export const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({isValid}: R
           <span className="warning"><WarningIcon /></span>
         )
       }
+      { label && <span>{label}</span> }
     </>
   );
-};
+};
+
+ValidInfo.displayName = 'ValidInfo';
+export { ValidInfo };

src/providers/ContentProvider.ts

@@ -0,0 +1,27 @@
+import { window, Position, TextDocumentContentProvider, Uri, workspace, WorkspaceEdit, Range, languages, ViewColumn } from "vscode";
+
+
+export default class ContentProvider implements TextDocumentContentProvider {
+
+	public static get scheme() { return "frontmatter" };
+
+	provideTextDocumentContent(uri: Uri): string {
+		return uri.query;
+	}
+
+	public static async show(data: string, title: string, outputType?: string) {
+		const apiData = JSON.stringify(data, null, 2);
+
+    const uri = Uri.parse(`${ContentProvider.scheme}:${title} output`);
+
+		const doc = await workspace.openTextDocument(uri);
+
+    await window.showTextDocument(doc, { preview: true, viewColumn: ViewColumn.Beside, preserveFocus: true });
+
+    const workEdits = new WorkspaceEdit();
+    workEdits.replace(doc.uri, new Range(new Position(0, 0), new Position(doc.lineCount, 0)), data);
+    await workspace.applyEdit(workEdits);
+                
+    await languages.setTextDocumentLanguage(doc, outputType || "text");
+	}
+}