Merge pull request #184 from estruyf/dev

Merge for 5.3.1

.github/workflows/release-beta.yml

@@ -25,3 +25,6 @@ jobs:
       - name: Publish
         run: npx vsce publish -p ${{ secrets.VSCE_PAT }} --baseImagesUrl https://raw.githubusercontent.com/estruyf/vscode-front-matter/dev
 
+      - name: Publish to open-vsx.org
+        run: npx ovsx publish -p ${{ secrets.OPEN_VSX_PAT }}
+

.github/workflows/release.yml

@@ -26,3 +26,5 @@ jobs:
       - name: Publish
         run: npx vsce publish -p ${{ secrets.VSCE_PAT }}
 
+      - name: Publish to open-vsx.org
+        run: npx ovsx publish -p ${{ secrets.OPEN_VSX_PAT }}

.vscodeignore

@@ -17,4 +17,8 @@ postcss.config.js
 .templates
 .github
 scripts
-.all-contributorsrc
+.all-contributorsrc
+assets/v2.*
+assets/v3.*
+assets/v4.*
+assets/sponsors

CHANGELOG.md

@@ -1,5 +1,92 @@
 # Change Log
 
+## [5.6.0] - 2021-11-23
+
+### 🎨 Enhancements
+
+- Updated camera icon from VS Code to media icon
+- Updated the media card actions to show it within a menu. This will give a better experience with custom scripts.
+- [#97](https://github.com/estruyf/vscode-front-matter/issues/97): Custom Script support for media files and folders
+- [#178](https://github.com/estruyf/vscode-front-matter/issues/178): Sorting added to the media dashboard
+- [#179](https://github.com/estruyf/vscode-front-matter/issues/179): Updated the `open dashboard` icon to make it easier to spot it
+- [#180](https://github.com/estruyf/vscode-front-matter/issues/180): Added `{filename}` as placeholder for media snippets
+- [#181](https://github.com/estruyf/vscode-front-matter/issues/181): Support for custom taxonomy fields added
+
+### 🐞 Fixes
+
+- [#183](https://github.com/estruyf/vscode-front-matter/issues/183): Fix type error on the `frontMatter.content.sorting` setting
+
+## [5.5.0] - 2021-11-15
+
+As from this version onwards, the extension will be published to [open-vsx.org](https://open-vsx.org/).
+
+### 🎨 Enhancements
+
+- [#173](https://github.com/estruyf/vscode-front-matter/issues/173): Allow to specify your own sorting for the content dashboard
+- [#174](https://github.com/estruyf/vscode-front-matter/issues/174): Added option to exclude sub-directories from page/markdown content retrieval 
+
+## [5.4.0] - 2021-11-05
+
+### 🎨 Enhancements
+
+- [#166](https://github.com/estruyf/vscode-front-matter/issues/166): Added preview button to the panel base view
+- [#167](https://github.com/estruyf/vscode-front-matter/issues/167): Allow to set the preview path per content type
+
+## [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
+
+- [#141](https://github.com/estruyf/vscode-front-matter/issues/141): Allow content creation for page bundles or single files
+- [#145](https://github.com/estruyf/vscode-front-matter/issues/145): Moved folder registration settings to `frontmatter.json` file
+- [#147](https://github.com/estruyf/vscode-front-matter/issues/147): Error boundary added for metadata fields
+
+### 🐞 Fixes
+
+- Rendered more hooks than during the previous render in `FileList`
+- [#142](https://github.com/estruyf/vscode-front-matter/issues/142): Fix for unknown tags where it throws an error
+- [#143](https://github.com/estruyf/vscode-front-matter/issues/143): Fix for duplicate values in the file list
+- [#144](https://github.com/estruyf/vscode-front-matter/issues/144): Fix for `toISOString` does not exist on object
+- [#146](https://github.com/estruyf/vscode-front-matter/issues/146): Date parsing logic added with fallbacks
+
 ## [5.0.0] - 2021-10-07 - [Release Notes](https://beta.frontmatter.codes/updates/v5.0.0)
 
 ### ✨ New features

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/icons/frontmatter-short-dark.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve">
+<rect x="25" y="25" fill="none" stroke="#ffffff" stroke-width="50" stroke-miterlimit="10" width="1200" height="1200"/>
+<path fill="#ffffff" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#ffffff" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/frontmatter-short-light.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve">
+<rect x="25" y="25" fill="none" stroke="#424242" stroke-width="50" stroke-miterlimit="10" width="1200" height="1200"/>
+<path fill="#424242" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#424242" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/frontmatter-small-dark.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve" width="16" height="16">
+<path fill="#C5C5C5" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#C5C5C5" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/frontmatter-small-light.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve" width="16" height="16">
+<path fill="#424242" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#424242" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/frontmatter-small-teal.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve" width="16" height="16">
+<path fill="#02aeb7" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#02aeb7" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/media-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#C5C5C5" width="24" height="24">
+  <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+</svg>

assets/icons/media-light.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#424242" width="24" height="24">
+  <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+</svg>

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;
@@ -437,6 +456,25 @@ input:checked + .field__toggle__slider:before {
   margin-right: .5rem;
 }
 
+.metadata_field__error {
+  color: var(--vscode-errorForeground);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.metadata_field__error button {
+  color: var(--vscode-button-secondaryForeground);
+  background-color: var(--vscode-button-secondaryBackground);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: auto;
+}
+
+.metadata_field__error button:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
 .metadata_field__input, .metadata_field__input:focus,
 .metadata_field__textarea, .metadata_field__textarea:focus {
   outline: none;

package-lock.json

@@ -1,145 +1,9 @@
 {
 	"name": "vscode-front-matter-beta",
-	"version": "5.0.0",
+	"version": "5.6.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
-		"@algolia/autocomplete-core": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.2.2.tgz",
-			"integrity": "sha512-JOQaURze45qVa8OOFDh+ozj2a/ObSRsVyz6Zd0aiBeej+RSTqrr1hDVpGNbbXYLW26G5ujuc9QIdH+rBHn95nw==",
-			"requires": {
-				"@algolia/autocomplete-shared": "1.2.2"
-			}
-		},
-		"@algolia/autocomplete-preset-algolia": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.2.2.tgz",
-			"integrity": "sha512-AZkh+bAMaJDzMZTelFOXJTJqkp5VPGH8W3n0B+Ggce7DdozlMRsDLguKTCQAkZ0dJ1EbBPyFL5ztL/JImB137Q==",
-			"requires": {
-				"@algolia/autocomplete-shared": "1.2.2"
-			}
-		},
-		"@algolia/autocomplete-shared": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.2.2.tgz",
-			"integrity": "sha512-mLTl7d2C1xVVazHt/bqh9EE/u2lbp5YOxLDdcjILXmUqOs5HH1D4SuySblXaQG1uf28FhTqMGp35qE5wJQnqAw=="
-		},
-		"@algolia/cache-browser-local-storage": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.10.5.tgz",
-			"integrity": "sha512-cfX2rEKOtuuljcGI5DMDHClwZHdDqd2nT2Ohsc8aHtBiz6bUxKVyIqxr2gaC6tU8AgPtrTVBzcxCA+UavXpKww==",
-			"requires": {
-				"@algolia/cache-common": "4.10.5"
-			}
-		},
-		"@algolia/cache-common": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.10.5.tgz",
-			"integrity": "sha512-1mClwdmTHll+OnHkG+yeRoFM17kSxDs4qXkjf6rNZhoZGXDvfYLy3YcZ1FX4Kyz0DJv8aroq5RYGBDsWkHj6Tw=="
-		},
-		"@algolia/cache-in-memory": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.10.5.tgz",
-			"integrity": "sha512-+ciQnfIGi5wjMk02XhEY8fmy2pzy+oY1nIIfu8LBOglaSipCRAtjk6WhHc7/KIbXPiYzIwuDbM2K1+YOwSGjwA==",
-			"requires": {
-				"@algolia/cache-common": "4.10.5"
-			}
-		},
-		"@algolia/client-account": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.10.5.tgz",
-			"integrity": "sha512-I9UkSS2glXm7RBZYZIALjBMmXSQbw/fI/djPcBHxiwXIheNIlqIFl2SNPkvihpPF979BSkzjqdJNRPhE1vku3Q==",
-			"requires": {
-				"@algolia/client-common": "4.10.5",
-				"@algolia/client-search": "4.10.5",
-				"@algolia/transporter": "4.10.5"
-			}
-		},
-		"@algolia/client-analytics": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.10.5.tgz",
-			"integrity": "sha512-h2owwJSkovPxzc+xIsjY1pMl0gj+jdVwP9rcnGjlaTY2fqHbSLrR9yvGyyr6305LvTppxsQnfAbRdE/5Z3eFxw==",
-			"requires": {
-				"@algolia/client-common": "4.10.5",
-				"@algolia/client-search": "4.10.5",
-				"@algolia/requester-common": "4.10.5",
-				"@algolia/transporter": "4.10.5"
-			}
-		},
-		"@algolia/client-common": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.10.5.tgz",
-			"integrity": "sha512-21FAvIai5qm8DVmZHm2Gp4LssQ/a0nWwMchAx+1hIRj1TX7OcdW6oZDPyZ8asQdvTtK7rStQrRnD8a95SCUnzA==",
-			"requires": {
-				"@algolia/requester-common": "4.10.5",
-				"@algolia/transporter": "4.10.5"
-			}
-		},
-		"@algolia/client-personalization": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.10.5.tgz",
-			"integrity": "sha512-nH+IyFKBi8tCyzGOanJTbXC5t4dspSovX3+ABfmwKWUYllYzmiQNFUadpb3qo+MLA3jFx5IwBesjneN6dD5o3w==",
-			"requires": {
-				"@algolia/client-common": "4.10.5",
-				"@algolia/requester-common": "4.10.5",
-				"@algolia/transporter": "4.10.5"
-			}
-		},
-		"@algolia/client-search": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.10.5.tgz",
-			"integrity": "sha512-1eQFMz9uodrc5OM+9HeT+hHcfR1E1AsgFWXwyJ9Q3xejA2c1c4eObGgOgC9ZoshuHHdptaTN1m3rexqAxXRDBg==",
-			"requires": {
-				"@algolia/client-common": "4.10.5",
-				"@algolia/requester-common": "4.10.5",
-				"@algolia/transporter": "4.10.5"
-			}
-		},
-		"@algolia/logger-common": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.10.5.tgz",
-			"integrity": "sha512-gRJo9zt1UYP4k3woEmZm4iuEBIQd/FrArIsjzsL/b+ihNoOqIxZKTSuGFU4UUZOEhvmxDReiA4gzvQXG+TMTmA=="
-		},
-		"@algolia/logger-console": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.10.5.tgz",
-			"integrity": "sha512-4WfIbn4253EDU12u9UiYvz+QTvAXDv39mKNg9xSoMCjKE5szcQxfcSczw2byc6pYhahOJ9PmxPBfs1doqsdTKQ==",
-			"requires": {
-				"@algolia/logger-common": "4.10.5"
-			}
-		},
-		"@algolia/requester-browser-xhr": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.10.5.tgz",
-			"integrity": "sha512-53/MURQEqtK+bGdfq4ITSPwTh5hnADU99qzvpAINGQveUFNSFGERipJxHjTJjIrjFz3vxj5kKwjtxDnU6ygO9g==",
-			"requires": {
-				"@algolia/requester-common": "4.10.5"
-			}
-		},
-		"@algolia/requester-common": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.10.5.tgz",
-			"integrity": "sha512-UkVa1Oyuj6NPiAEt5ZvrbVopEv1m/mKqjs40KLB+dvfZnNcj+9Fry4Oxnt15HMy/HLORXsx4UwcthAvBuOXE9Q=="
-		},
-		"@algolia/requester-node-http": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.10.5.tgz",
-			"integrity": "sha512-aNEKVKXL4fiiC+bS7yJwAHdxln81ieBwY3tsMCtM4zF9f5KwCzY2OtN4WKEZa5AAADVcghSAUdyjs4AcGUlO5w==",
-			"requires": {
-				"@algolia/requester-common": "4.10.5"
-			}
-		},
-		"@algolia/transporter": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.10.5.tgz",
-			"integrity": "sha512-F8DLkmIlvCoMwSCZA3FKHtmdjH3o5clbt0pi2ktFStVNpC6ZDmY307HcK619bKP5xW6h8sVJhcvrLB775D2cyA==",
-			"requires": {
-				"@algolia/cache-common": "4.10.5",
-				"@algolia/logger-common": "4.10.5",
-				"@algolia/requester-common": "4.10.5"
-			}
-		},
 		"@babel/code-frame": {
 			"version": "7.10.4",
 			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -184,31 +48,6 @@
 				"lit-element": "^2.5.1"
 			}
 		},
-		"@docsearch/css": {
-			"version": "3.0.0-alpha.40",
-			"resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.0.0-alpha.40.tgz",
-			"integrity": "sha512-PrOTPgJMl+Iji1zOH0+J0PEDMriJ1teGxbgll7o4h8JrvJW6sJGqQw7/bLW7enWiFaxbJMK76w1yyPNLFHV7Qg=="
-		},
-		"@docsearch/js": {
-			"version": "3.0.0-alpha.40",
-			"resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.0.0-alpha.40.tgz",
-			"integrity": "sha512-0ysRM0jk1KAbw/QsHPHIKoa7OeCm2Mwz0JgcPnhWRvvA28dzP+f6OIsL6eGu3VJR043tH9OrvVf/FnvLtTtZtw==",
-			"requires": {
-				"@docsearch/react": "3.0.0-alpha.40",
-				"preact": "^10.0.0"
-			}
-		},
-		"@docsearch/react": {
-			"version": "3.0.0-alpha.40",
-			"resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.0.0-alpha.40.tgz",
-			"integrity": "sha512-aKxnu7sgpP1R7jtgOV/pZdJEHXx6Ts+jnS9U/ejSUS2BMUpwQI5SA3oLs1BA5TA9kIViJ5E+rrjh0VsbcsJ6sQ==",
-			"requires": {
-				"@algolia/autocomplete-core": "1.2.2",
-				"@algolia/autocomplete-preset-algolia": "1.2.2",
-				"@docsearch/css": "3.0.0-alpha.40",
-				"algoliasearch": "^4.0.0"
-			}
-		},
 		"@estruyf/vscode": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/@estruyf/vscode/-/vscode-0.0.2.tgz",
@@ -236,6 +75,60 @@
 			"integrity": "sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==",
 			"dev": true
 		},
+		"@microsoft/fast-element": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.6.0.tgz",
+			"integrity": "sha512-ePTcBuCA99n7He0BYLIzFr5YOHYPSiBLJeDbDsyyQ5JUs4oXaZD0v54Pq0GAtSZuagnCGTDqcxEcBPUhTqLmQw==",
+			"dev": true
+		},
+		"@microsoft/fast-foundation": {
+			"version": "1.24.8",
+			"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-1.24.8.tgz",
+			"integrity": "sha512-n4O9jPh8BBliF/Yl9FAVhrSoopsRCnva2L432s/fHwLelY9WUeswjO3DidVBFbzXD5u/gzC4LGWJScNe/ZGU4Q==",
+			"dev": true,
+			"requires": {
+				"@microsoft/fast-element": "^1.4.0",
+				"@microsoft/fast-web-utilities": "^4.8.0",
+				"@microsoft/tsdoc-config": "^0.13.4",
+				"tabbable": "^5.2.0",
+				"tslib": "^1.13.0"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "1.14.1",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+					"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+					"dev": true
+				}
+			}
+		},
+		"@microsoft/fast-web-utilities": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.1.tgz",
+			"integrity": "sha512-P3xeyUwQ9nPkFrgAdmkOzaXxIq8YqMU5K+LXcoHgJddJCBCKfGWW9OZQOTigLddItTyVyfO8qsJpDQb1TskKHA==",
+			"dev": true,
+			"requires": {
+				"exenv-es6": "^1.0.0"
+			}
+		},
+		"@microsoft/tsdoc": {
+			"version": "0.12.24",
+			"resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
+			"integrity": "sha512-Mfmij13RUTmHEMi9vRUhMXD7rnGR2VvxeNYtaGtaJ4redwwjT4UXYJ+nzmVJF7hhd4pn/Fx5sncDKxMVFJSWPg==",
+			"dev": true
+		},
+		"@microsoft/tsdoc-config": {
+			"version": "0.13.9",
+			"resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
+			"integrity": "sha512-VqqZn+rT9f6XujFPFR2aN9XKF/fuir/IzKVzoxI0vXIzxysp4ee6S2jCakmlGFHEasibifFTsJr7IYmRPxfzYw==",
+			"dev": true,
+			"requires": {
+				"@microsoft/tsdoc": "0.12.24",
+				"ajv": "~6.12.6",
+				"jju": "~1.4.0",
+				"resolve": "~1.19.0"
+			}
+		},
 		"@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -269,92 +162,92 @@
 			"dev": true
 		},
 		"@sentry/browser": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.13.2.tgz",
-			"integrity": "sha512-bkFXK4vAp2UX/4rQY0pj2Iky55Gnwr79CtveoeeMshoLy5iDgZ8gvnLNAz7om4B9OQk1u7NzLEa4IXAmHTUyag==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.13.3.tgz",
+			"integrity": "sha512-jwlpsk2/u1cofvfYsjmqcnx50JJtf/T6HTgdW+ih8+rqWC5ABEZf4IiB/H+KAyjJ3wVzCOugMq5irL83XDCfqQ==",
 			"dev": true,
 			"requires": {
-				"@sentry/core": "6.13.2",
-				"@sentry/types": "6.13.2",
-				"@sentry/utils": "6.13.2",
+				"@sentry/core": "6.13.3",
+				"@sentry/types": "6.13.3",
+				"@sentry/utils": "6.13.3",
 				"tslib": "^1.9.3"
 			}
 		},
 		"@sentry/core": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.13.2.tgz",
-			"integrity": "sha512-snXNNFLwlS7yYxKTX4DBXebvJK+6ikBWN6noQ1CHowvM3ReFBlrdrs0Z0SsSFEzXm2S4q7f6HHbm66GSQZ/8FQ==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.13.3.tgz",
+			"integrity": "sha512-obm3SjgCk8A7nB37b2AU1eq1q7gMoJRrGMv9VRIyfcG0Wlz/5lJ9O3ohUk+YZaaVfZMxXn6hFtsBiOWmlv7IIA==",
 			"dev": true,
 			"requires": {
-				"@sentry/hub": "6.13.2",
-				"@sentry/minimal": "6.13.2",
-				"@sentry/types": "6.13.2",
-				"@sentry/utils": "6.13.2",
+				"@sentry/hub": "6.13.3",
+				"@sentry/minimal": "6.13.3",
+				"@sentry/types": "6.13.3",
+				"@sentry/utils": "6.13.3",
 				"tslib": "^1.9.3"
 			}
 		},
 		"@sentry/hub": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.13.2.tgz",
-			"integrity": "sha512-sppSuJdNMiMC/vFm/dQowCBh11uTrmvks00fc190YWgxHshodJwXMdpc+pN61VSOmy2QA4MbQ5aMAgHzPzel3A==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.13.3.tgz",
+			"integrity": "sha512-eYppBVqvhs5cvm33snW2sxfcw6G20/74RbBn+E4WDo15hozis89kU7ZCJDOPkXuag3v1h9igns/kM6PNBb41dw==",
 			"dev": true,
 			"requires": {
-				"@sentry/types": "6.13.2",
-				"@sentry/utils": "6.13.2",
+				"@sentry/types": "6.13.3",
+				"@sentry/utils": "6.13.3",
 				"tslib": "^1.9.3"
 			}
 		},
 		"@sentry/minimal": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.13.2.tgz",
-			"integrity": "sha512-6iJfEvHzzpGBHDfLxSHcGObh73XU1OSQKWjuhDOe7UQDyI4BQmTfcXAC+Fr8sm8C/tIsmpVi/XJhs8cubFdSMw==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.13.3.tgz",
+			"integrity": "sha512-63MlYYRni3fs5Bh8XBAfVZ+ctDdWg0fapSTP1ydIC37fKvbE+5zhyUqwrEKBIiclEApg1VKX7bkKxVdu/vsFdw==",
 			"dev": true,
 			"requires": {
-				"@sentry/hub": "6.13.2",
-				"@sentry/types": "6.13.2",
+				"@sentry/hub": "6.13.3",
+				"@sentry/types": "6.13.3",
 				"tslib": "^1.9.3"
 			}
 		},
 		"@sentry/react": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.13.2.tgz",
-			"integrity": "sha512-aLkWyn697LTcmK1PPnUg5UJcyBUPoI68motqgBY53SIYDAwOeYNUQt2aanDuOTY5aE2PdnJwU48klA8vuYkoRQ==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.13.3.tgz",
+			"integrity": "sha512-fdfmD9XNpGDwdkeLyd+iq+kqtNeghpH3wiez2rD81ZBvrn70uKaO2/yYDE71AXC6fUOwQuJmdfAuqBcNJkYIEw==",
 			"dev": true,
 			"requires": {
-				"@sentry/browser": "6.13.2",
-				"@sentry/minimal": "6.13.2",
-				"@sentry/types": "6.13.2",
-				"@sentry/utils": "6.13.2",
+				"@sentry/browser": "6.13.3",
+				"@sentry/minimal": "6.13.3",
+				"@sentry/types": "6.13.3",
+				"@sentry/utils": "6.13.3",
 				"hoist-non-react-statics": "^3.3.2",
 				"tslib": "^1.9.3"
 			}
 		},
 		"@sentry/tracing": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.13.2.tgz",
-			"integrity": "sha512-bHJz+C/nd6biWTNcYAu91JeRilsvVgaye4POkdzWSmD0XoLWHVMrpCQobGpXe7onkp2noU3YQjhqgtBqPHtnpw==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.13.3.tgz",
+			"integrity": "sha512-yyOFIhqlprPM0g4f35Icear3eZk2mwyYcGEzljJfY2iU6pJwj1lzia5PfSwiCW7jFGMmlBJNhOAIpfhlliZi8Q==",
 			"dev": true,
 			"requires": {
-				"@sentry/hub": "6.13.2",
-				"@sentry/minimal": "6.13.2",
-				"@sentry/types": "6.13.2",
-				"@sentry/utils": "6.13.2",
+				"@sentry/hub": "6.13.3",
+				"@sentry/minimal": "6.13.3",
+				"@sentry/types": "6.13.3",
+				"@sentry/utils": "6.13.3",
 				"tslib": "^1.9.3"
 			}
 		},
 		"@sentry/types": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.13.2.tgz",
-			"integrity": "sha512-6WjGj/VjjN8LZDtqJH5ikeB1o39rO1gYS6anBxiS3d0sXNBb3Ux0pNNDFoBxQpOhmdDHXYS57MEptX9EV82gmg==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.13.3.tgz",
+			"integrity": "sha512-Vrz5CdhaTRSvCQjSyIFIaV9PodjAVFkzJkTRxyY7P77RcegMsRSsG1yzlvCtA99zG9+e6MfoJOgbOCwuZids5A==",
 			"dev": true
 		},
 		"@sentry/utils": {
-			"version": "6.13.2",
-			"resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.13.2.tgz",
-			"integrity": "sha512-foF4PbxqPMWNbuqdXkdoOmKm3quu3PP7Q7j/0pXkri4DtCuvF/lKY92mbY0V9rHS/phCoj+3/Se5JvM2ymh2/w==",
+			"version": "6.13.3",
+			"resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.13.3.tgz",
+			"integrity": "sha512-zYFuFH3MaYtBZTeJ4Yajg7pDf0pM3MWs3+9k5my9Fd+eqNcl7dYQYJbT9gyC0HXK1QI4CAMNNlHNl4YXhF91ag==",
 			"dev": true,
 			"requires": {
-				"@sentry/types": "6.13.2",
+				"@sentry/types": "6.13.3",
 				"tslib": "^1.9.3"
 			}
 		},
@@ -586,6 +479,16 @@
 			"integrity": "sha512-LlO6K7nzrIWDCZN1Zi6J6ibxrpMibSAct+zNjAwpkNkwup6cJLx5diYvsOJODMPWOuQlBO21qkxtdkSRzW6+Jw==",
 			"dev": true
 		},
+		"@vscode/webview-ui-toolkit": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.8.1.tgz",
+			"integrity": "sha512-SOgeaZ+/6yFDXLsgH+JvKcs4E0ThvuohNhkr9mvnggjl+OfFxc+Yqkyf5B4B5kuu3EppOCzEMiUwPC8APuLEGQ==",
+			"dev": true,
+			"requires": {
+				"@microsoft/fast-element": "^1.2.0",
+				"@microsoft/fast-foundation": "^1.24.7"
+			}
+		},
 		"@webassemblyjs/ast": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -828,27 +731,6 @@
 			"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
 			"dev": true
 		},
-		"algoliasearch": {
-			"version": "4.10.5",
-			"resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.10.5.tgz",
-			"integrity": "sha512-KmH2XkiN+8FxhND4nWFbQDkIoU6g2OjfeU9kIv4Lb+EiOOs3Gpp7jvd+JnatsCisAZsnWQdjd7zVlW7I/85QvQ==",
-			"requires": {
-				"@algolia/cache-browser-local-storage": "4.10.5",
-				"@algolia/cache-common": "4.10.5",
-				"@algolia/cache-in-memory": "4.10.5",
-				"@algolia/client-account": "4.10.5",
-				"@algolia/client-analytics": "4.10.5",
-				"@algolia/client-common": "4.10.5",
-				"@algolia/client-personalization": "4.10.5",
-				"@algolia/client-search": "4.10.5",
-				"@algolia/logger-common": "4.10.5",
-				"@algolia/logger-console": "4.10.5",
-				"@algolia/requester-browser-xhr": "4.10.5",
-				"@algolia/requester-common": "4.10.5",
-				"@algolia/requester-node-http": "4.10.5",
-				"@algolia/transporter": "4.10.5"
-			}
-		},
 		"ansi-styles": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -2264,6 +2146,12 @@
 				"safe-buffer": "^5.1.1"
 			}
 		},
+		"exenv-es6": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.0.0.tgz",
+			"integrity": "sha512-fcG/TX8Ruv9Ma6PBaiNsUrHRJzVzuFMP6LtPn/9iqR+nr9mcLeEOGzXQGLC5CVQSXGE98HtzW2mTZkrCA3XrDg==",
+			"dev": true
+		},
 		"expand-brackets": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -3512,6 +3400,12 @@
 			"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
 			"dev": true
 		},
+		"jju": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+			"integrity": "sha1-o6vicYryQaKykE+EpiWXDzia4yo=",
+			"dev": true
+		},
 		"js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3645,6 +3539,12 @@
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
 			"dev": true
 		},
+		"lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+			"dev": true
+		},
 		"lodash.topath": {
 			"version": "4.5.2",
 			"resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
@@ -4767,11 +4667,6 @@
 			"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
 			"dev": true
 		},
-		"preact": {
-			"version": "10.5.14",
-			"resolved": "https://registry.npmjs.org/preact/-/preact-10.5.14.tgz",
-			"integrity": "sha512-KojoltCrshZ099ksUZ2OQKfbH66uquFoxHSbnwKbTJHeQNvx42EmC7wQVWNuDt6vC5s3nudRHFtKbpY4ijKlaQ=="
-		},
 		"pretty-error": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
@@ -5774,6 +5669,12 @@
 				}
 			}
 		},
+		"tabbable": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.2.1.tgz",
+			"integrity": "sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==",
+			"dev": true
+		},
 		"tailwindcss": {
 			"version": "2.2.7",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.7.tgz",
@@ -6298,6 +6199,12 @@
 				}
 			}
 		},
+		"url-join-ts": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/url-join-ts/-/url-join-ts-1.0.5.tgz",
+			"integrity": "sha512-u+5gi7JyOwhj58ZKwkmkzFGHuepTpmwjqfUDGVjsJJstsCz63CJAINixgJaDcMbmuyWPJIxbtBpIfaDgOQ9KMQ==",
+			"dev": true
+		},
 		"use": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

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.0.0",
+  "version": "5.6.0",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {
@@ -97,6 +97,62 @@
           "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.defaultSorting": {
+          "type": "string",
+          "default": "",
+          "oneOf": [
+            {
+              "enum": [
+                "LastModifiedAsc",
+                "LastModifiedDesc",
+                "FileNameAsc",
+                "FileNameDesc"
+              ]
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "markdownDescription": "Specify the default sorting option for the content dashboard. You can use one of the values from the enum or define your own ID. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.sorting.default)",
+          "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,
@@ -117,6 +173,11 @@
               "path": {
                 "type": "string",
                 "description": "Path of the folder"
+              },
+              "excludeSubdir": {
+                "type": "boolean",
+                "default": false,
+                "description": "Exclude sub-directories"
               }
             },
             "additionalProperties": false,
@@ -133,6 +194,52 @@
           "markdownDescription": "Specify the folder name where all your assets are located. For instance in Hugo this is the `static` folder. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.publicfolder)",
           "scope": "Content"
         },
+        "frontMatter.content.sorting": {
+          "type": "array",
+          "default": [],
+          "markdownDescription": "Define the sorting options for your dashboard content. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.sorting)",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "The ID of the sorting option. This will be used for the storing the last used sorting option or the default option."
+              },
+              "title": {
+                "type": "string",
+                "description": "Name of the sorting label"
+              },
+              "name": {
+                "type": "string",
+                "description": "Name of the metadata field to sort by"
+              },
+              "order": {
+                "type": "string",
+                "enum": [
+                  "asc",
+                  "desc"
+                ],
+                "description": "Order of the sorting"
+              },
+              "type": {
+                "type": "string",
+                "default": "string",
+                "enum": [
+                  "string",
+                  "date"
+                ],
+                "description": "Type of the field value"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "title",
+              "name",
+              "order"
+            ]
+          },
+          "scope": "Content"
+        },
         "frontMatter.custom.scripts": {
           "type": "array",
           "default": [],
@@ -151,6 +258,32 @@
               "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"
+              },
+              "type": {
+                "type": "string",
+                "default": "content",
+                "enum": [
+                  "content",
+                  "mediaFolder",
+                  "mediaFile"
+                ],
+                "description": "The type for which the script will be used."
               }
             },
             "additionalProperties": false,
@@ -180,6 +313,23 @@
           "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.media.defaultSorting": {
+          "type": "string",
+          "default": "",
+          "enum": [
+            "LastModifiedAsc",
+            "LastModifiedDesc",
+            "FileNameAsc",
+            "FileNameDesc"
+          ],
+          "markdownDescription": "Specify the default sorting option for the media dashboard. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.media.sorting.default)",
+          "scope": "Content"
+        },
         "frontMatter.panel.freeform": {
           "type": "boolean",
           "default": true,
@@ -198,6 +348,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,
@@ -251,8 +407,10 @@
                         "boolean",
                         "image",
                         "choice",
+                        "taxonomy",
                         "tags",
-                        "categories"
+                        "categories",
+                        "draft"
                       ],
                       "description": "Define the type of field"
                     },
@@ -306,14 +464,62 @@
                       "type": "boolean",
                       "default": false,
                       "description": "Do you want to hide the field from the metadata section?"
+                    },
+                    "taxonomyId": {
+                      "type": "string",
+                      "default": "",
+                      "description": "The ID of your taxonomy field"
                     }
                   },
                   "additionalProperties": false,
                   "required": [
                     "type",
                     "name"
+                  ],
+                  "allOf": [
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "taxonomy"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "taxonomyId"
+                        ]
+                      }
+                    },
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "choice"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "choices"
+                        ]
+                      }
+                    }
                   ]
                 }
+              },
+              "pageBundle": {
+                "type": "boolean",
+                "default": false,
+                "description": "Specify if you want to create a folder when creating new content."
+              },
+              "previewPath": {
+                "type": [
+                  "null",
+                  "string"
+                ],
+                "default": null,
+                "description": "Defines a custom preview path for the content type."
               }
             },
             "additionalProperties": false,
@@ -325,6 +531,7 @@
           "default": [
             {
               "name": "default",
+              "pageBundle": false,
               "fields": [
                 {
                   "title": "Title",
@@ -366,6 +573,32 @@
           ],
           "scope": "Taxonomy"
         },
+        "frontMatter.taxonomy.customTaxonomy": {
+          "type": "array",
+          "markdownDescription": "Specify the custom taxonomy field data. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.tags)",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "ID for your taxonomy field"
+              },
+              "options": {
+                "type": "array",
+                "description": "Options from which you can pick",
+                "items": {
+                  "type": "string"
+                }
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "id",
+              "options"
+            ]
+          },
+          "scope": "Taxonomy"
+        },
         "frontMatter.taxonomy.dateField": {
           "type": "string",
           "default": "date",
@@ -429,6 +662,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,
@@ -528,7 +767,10 @@
         "command": "frontMatter.insertImage",
         "title": "Insert image into your content",
         "category": "Front matter",
-        "icon": "$(device-camera)"
+        "icon": {
+          "dark": "/assets/icons/media-dark.svg",
+          "light": "/assets/icons/media-light.svg"
+        }
       },
       {
         "command": "frontMatter.insertTags",
@@ -544,7 +786,19 @@
         "command": "frontMatter.dashboard",
         "title": "Open dashboard",
         "category": "Front matter",
-        "icon": "$(preview)"
+        "icon": {
+          "dark": "/assets/icons/frontmatter-small-dark.svg",
+          "light": "/assets/icons/frontmatter-small-light.svg"
+        }
+      },
+      {
+        "command": "frontMatter.dashboard.close",
+        "title": "Close dashboard",
+        "category": "Front matter",
+        "icon": {
+          "dark": "/assets/icons/frontmatter-small-teal.svg",
+          "light": "/assets/icons/frontmatter-small-teal.svg"
+        }
       },
       {
         "command": "frontMatter.preview",
@@ -577,7 +831,12 @@
         {
           "command": "frontMatter.dashboard",
           "group": "navigation@-98",
-          "when": "frontMatter:enabled == true"
+          "when": "frontMatter:enabled == true && frontMatter:dashboard:open == false"
+        },
+        {
+          "command": "frontMatter.dashboard.close",
+          "group": "navigation@-98",
+          "when": "frontMatter:enabled == true && frontMatter:dashboard:open == true"
         }
       ],
       "explorer/context": [
@@ -625,6 +884,10 @@
         {
           "command": "frontMatter.createFromTemplate",
           "when": "false"
+        },
+        {
+          "command": "frontMatter.dashboard.close",
+          "when": "false"
         }
       ],
       "view/title": [
@@ -658,8 +921,8 @@
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "1.0.4",
     "@iarna/toml": "2.2.3",
-    "@sentry/react": "^6.13.2",
-    "@sentry/tracing": "^6.13.2",
+    "@sentry/react": "^6.13.3",
+    "@sentry/tracing": "^6.13.3",
     "@tailwindcss/forms": "^0.3.3",
     "@types/glob": "7.1.3",
     "@types/js-yaml": "3.12.1",
@@ -671,6 +934,7 @@
     "@types/react-dom": "17.0.0",
     "@types/vscode": "1.51.0",
     "@vscode/codicons": "0.0.20",
+    "@vscode/webview-ui-toolkit": "^0.8.1",
     "autoprefixer": "^10.3.2",
     "css-loader": "5.2.7",
     "date-fns": "2.23.0",
@@ -681,6 +945,7 @@
     "html-loader": "1.3.2",
     "html-webpack-plugin": "4.5.0",
     "image-size": "^1.0.0",
+    "lodash-es": "^4.17.21",
     "lodash.uniqby": "4.7.0",
     "mdast-util-from-markdown": "1.0.0",
     "node-json-db": "^1.3.0",
@@ -697,11 +962,10 @@
     "ts-loader": "8.0.3",
     "tslint": "6.1.3",
     "typescript": "4.0.2",
+    "url-join-ts": "^1.0.5",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "4.44.2",
     "webpack-cli": "3.3.12"
   },
-  "dependencies": {
-    "@docsearch/js": "^3.0.0-alpha.40"
-  }
-}
+  "dependencies": {}
+}

src/commands/Article.ts

@@ -5,10 +5,12 @@ import { format } from "date-fns";
 import { ArticleHelper, Settings, SlugHelper } from '../helpers';
 import matter = require('gray-matter');
 import { Notifications } from '../helpers/Notifications';
-import { extname, basename } from 'path';
+import { extname, basename, parse, dirname } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
 import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
+import { DateHelper } from '../helpers/DateHelper';
+import { parseWinPath } from '../helpers/parseWinPath';
 
 
 export class Article {
@@ -171,7 +173,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);
@@ -182,7 +184,7 @@ export class Article {
             await vscode.workspace.fs.rename(editor.document.uri, vscode.Uri.file(newPath), {
               overwrite: false
             });
-          } catch (e) {
+          } catch (e: any) {
             Notifications.error(`Failed to rename file: ${e?.message || e}`);
           }
         }
@@ -190,6 +192,31 @@ export class Article {
     }
 	}
 
+  /**
+   * Retrieve the slug from the front matter
+   */
+  public static getSlug() {
+    const editor = vscode.window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    const file = parseWinPath(editor.document.fileName);
+
+    if (!file.endsWith(`.md`) && !file.endsWith(`.mdx`)) {
+      return;
+    }
+
+    const parsedFile = parse(file);
+
+    if (parsedFile.name.toLowerCase() !== "index") {
+      return parsedFile.name;
+    }
+
+    const folderName = basename(dirname(file));
+    return folderName;
+  }
+
   /**
    * Toggle the page its draft mode
    */
@@ -239,13 +266,13 @@ export class Article {
   /**
    * Format the date to the defined format
    */
-  public static formatDate(dateValue: Date) {
+  public static formatDate(dateValue: Date): string {
     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 dateValue.toISOString();
+      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, SETTINGS_CONTENT_SORTING, CONTEXT, SETTING_CUSTOM_SCRIPTS, SETTINGS_CONTENT_SORTING_DEFAULT, SETTINGS_MEDIA_SORTING_DEFAULT } from '../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
-import { basename, dirname, extname, join } from "path";
+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 { CustomScript as ICustomScript, DraftField, Framework, ScriptType, SortingSetting, SortOrder, SortType, TaxonomyType } from '../models';
 import { Folders } from './Folders';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
@@ -14,7 +14,6 @@ import { Template } from './Template';
 import { Notifications } from '../helpers/Notifications';
 import { Settings } from '../dashboardWebView/models/Settings';
 import { Extension } from '../helpers/Extension';
-import { parseJSON } from 'date-fns';
 import { ViewType } from '../dashboardWebView/state';
 import { EditorHelper, WebviewHelper } from '@estruyf/vscode';
 import { MediaInfo, MediaPaths } from './../models/MediaPaths';
@@ -22,8 +21,14 @@ import { decodeBase64Image } from '../helpers/decodeBase64Image';
 import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
 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';
+import { SortingOption } from '../dashboardWebView/models';
+import { Sorting } from '../helpers/Sorting';
+import imageSize from 'image-size';
+import { CustomScript } from '../helpers/CustomScript';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -37,7 +42,7 @@ export class Dashboard {
     return Dashboard._viewData;
   }
 
-  /** 
+  /**
    * Init the dashboard
    */
   public static async init() {
@@ -60,6 +65,8 @@ export class Dashboard {
 		} else {
 			Dashboard.create();
 		}
+
+    await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, true);
   }
 
   /**
@@ -77,6 +84,10 @@ export class Dashboard {
       Dashboard.webview.reveal();
     }
   }
+
+  public static close() {
+    Dashboard.webview?.dispose();
+  }
   
   /**
    * Create the dashboard webview
@@ -97,25 +108,28 @@ export class Dashboard {
     Dashboard.isDisposed = false;
 
     Dashboard.webview.iconPath = {
-      dark: Uri.file(join(extensionUri.fsPath, 'assets/frontmatter-dark.svg')),
-      light: Uri.file(join(extensionUri.fsPath, 'assets/frontmatter.svg'))
+      dark: Uri.file(join(extensionUri.fsPath, 'assets/icons/frontmatter-short-dark.svg')),
+      light: Uri.file(join(extensionUri.fsPath, 'assets/icons/frontmatter-short-light.svg'))
     };
 
     Dashboard.webview.webview.html = Dashboard.getWebviewContent(Dashboard.webview.webview, extensionUri);
 
-    Dashboard.webview.onDidChangeViewState(() => {
+    Dashboard.webview.onDidChangeViewState(async () => {
       if (!this.webview?.visible) {
         Dashboard._viewData = undefined;
         const panel = ExplorerView.getInstance(extensionUri);
         panel.getMediaSelection();
       }
+
+      await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, this.webview?.visible);
     });
 
-    Dashboard.webview.onDidDispose(() => {
+    Dashboard.webview.onDidDispose(async () => {
       Dashboard.isDisposed = true;
       Dashboard._viewData = undefined;
       const panel = ExplorerView.getInstance(extensionUri);
       panel.getMediaSelection();
+      await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, false);
     });
 
     SettingsHelper.onConfigChange((global?: any) => {
@@ -160,10 +174,10 @@ 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);
+          Dashboard.getMedia(msg?.data?.page, msg?.data?.folder, msg?.data?.sorting);
           break;
         case DashboardMessage.copyToClipboard:
           env.clipboard.writeText(msg.data);
@@ -187,6 +201,17 @@ export class Dashboard {
         case DashboardMessage.createMediaFolder:
           await commands.executeCommand(COMMAND_NAME.createFolder, msg?.data);
           break;
+        case DashboardMessage.setFramework:
+          Dashboard.setFramework(msg?.data);
+          break;
+        case DashboardMessage.runCustomScript:
+          CustomScript.run(msg?.data?.script, msg?.data?.path);
+          break;
+        case DashboardMessage.setState:
+          if (msg?.data?.key && msg?.data?.value) {
+            Extension.getInstance().setState(msg?.data?.key, msg?.data?.value, "workspace");
+          }
+          break;
       }
     });
   }
@@ -202,6 +227,20 @@ export class Dashboard {
     Dashboard.resetMedia();
     Dashboard.getMedia(0, folderPath);
   }
+
+  /**
+   * Post data to the dashboard
+   * @param msg 
+   */
+  public static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) {
+    if (Dashboard.isDisposed) {
+      return;
+    }
+
+    if (Dashboard.webview) {
+      Dashboard.webview?.webview.postMessage(msg);
+    }
+  }
   
   /**
    * Insert an image into the front matter or contents
@@ -220,11 +259,28 @@ export class Dashboard {
       const panel = ExplorerView.getInstance(extensionUri);
 
       if (data?.position) {
+        const wsFolder = Folders.getWorkspaceFolder();
         const editor = window.activeTextEditor;
         const line = data.position.line;
         const character = data.position.character;
         if (line) {
-          await editor?.edit(builder => builder.insert(new Position(line, character), data.snippet || `![${data.alt || data.caption || ""}](${data.image})`));
+          let imgPath = data.image;
+          const filePath = data.file;
+          const absImgPath = join(parseWinPath(wsFolder?.fsPath || ""), imgPath);
+
+          const imgDir = dirname(absImgPath);
+          const fileDir = dirname(filePath);
+
+          if (imgDir === fileDir) {
+            imgPath = join('/', basename(imgPath));
+
+            // Snippets are already parsed, so update the URL of the image
+            if (data.snippet) {
+              data.snippet = data.snippet.replace(data.image, imgPath);
+            }
+          }
+
+          await editor?.edit(builder => builder.insert(new Position(line, character), data.snippet || `![${data.alt || data.caption || ""}](${imgPath})`));
         }
         panel.getMediaSelection();
       } else {
@@ -240,6 +296,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,
@@ -248,19 +305,52 @@ 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) || [],
-        contentFolders: Folders.get().map(f => f.path),
+        draftField: SettingsHelper.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
+        customSorting: SettingsHelper.get<SortingSetting[]>(SETTINGS_CONTENT_SORTING),
+        contentFolders: Folders.get(),
+        crntFramework: SettingsHelper.get<string>(SETTINGS_FRAMEWORK_ID),
+        framework: (!isInitialized && wsFolder) ? FrameworkDetector.get(wsFolder.fsPath) : null,
+        scripts: (SettingsHelper.get<ICustomScript[]>(SETTING_CUSTOM_SCRIPTS) || []).filter(s => s.type && s.type !== ScriptType.Content),
+        dashboardState: {
+          contents: {
+            sorting: await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Contents.Sorting, "workspace"),
+            defaultSorting: SettingsHelper.get<string>(SETTINGS_CONTENT_SORTING_DEFAULT)
+          },
+          media: {
+            sorting: await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Media.Sorting, "workspace"),
+            defaultSorting: SettingsHelper.get<string>(SETTINGS_MEDIA_SORTING_DEFAULT)
+          }
+        }
       } 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
    */
@@ -272,16 +362,28 @@ export class Dashboard {
   /**
    * Retrieve all media files
    */
-  private static async getMedia(page: number = 0, selectedFolder: string = '') {
+  private static async getMedia(page: number = 0, requestedFolder: string = '', sort: SortingOption | null = null) {
     const wsFolder = Folders.getWorkspaceFolder();
     const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
     const contentFolders = Folders.get();
+    const viewData = Dashboard.viewData;
+    let selectedFolder = requestedFolder;
+
+    const ext = Extension.getInstance();
+    const crntSort = sort === null ? await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Media.Sorting, "workspace") : sort;
 
     // If the static folder is not set, retreive the last opened location
     if (!selectedFolder) {
-      const stateValue = await Extension.getInstance().getState<string | undefined>(ExtensionState.SelectedFolder);
-      if (stateValue && existsSync(stateValue)) {
-        selectedFolder = stateValue;
+      const stateValue = await ext.getState<string | undefined>(ExtensionState.SelectedFolder, "workspace");
+
+      if (stateValue !== HOME_PAGE_NAVIGATION_ID) {
+        // Support for page bundles
+        if (viewData?.data?.filePath && viewData?.data?.filePath.endsWith('index.md')) {
+          const folderPath = parse(viewData.data.filePath).dir;
+          selectedFolder = folderPath;
+        } else if (stateValue && existsSync(stateValue)) {
+          selectedFolder = stateValue;
+        }
       }
     }
 
@@ -290,19 +392,28 @@ 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[] = [];
 
     if (relSelectedFolderPath) {
       const files = await workspace.findFiles(join(relSelectedFolderPath, '/*'));
-      const media = Dashboard.filterMedia(files);
+      const media = await Dashboard.updateMediaData(Dashboard.filterMedia(files));
+
       allMedia = [...media];
     } else {
       if (staticFolder) {
         const folderSearch = join(staticFolder || "", '/*');
         const files = await workspace.findFiles(folderSearch);
-        const media = Dashboard.filterMedia(files);
+        const media = await Dashboard.updateMediaData(Dashboard.filterMedia(files));
 
         allMedia = [...media];
       }
@@ -313,22 +424,24 @@ export class Dashboard {
           const relFolderPath = contentFolder.path.substring(wsFolder.fsPath.length + 1);
           const folderSearch = relSelectedFolderPath ? join(relSelectedFolderPath, '/*') : join(relFolderPath, '/*');
           const files = await workspace.findFiles(folderSearch);
-          const media = Dashboard.filterMedia(files);
+          const media = await Dashboard.updateMediaData(Dashboard.filterMedia(files));
     
           allMedia = [...allMedia, ...media];
         }
       }
     }
 
-    allMedia = allMedia.sort((a, b) => {
-      if (b.fsPath < a.fsPath) {
-        return -1;
-      }
-      if (b.fsPath > a.fsPath) {
-        return 1;
-      }
-      return 0;
-    });
+    if (crntSort?.type === SortType.string) {
+      allMedia = allMedia.sort(Sorting.alphabetically("fsPath"));
+    } else if (crntSort?.type === SortType.date) {
+      allMedia = allMedia.sort(Sorting.date("mtime"));
+    } else {
+      allMedia = allMedia.sort(Sorting.alphabetically("fsPath"));
+    }
+
+    if (crntSort?.order === SortOrder.desc) {
+      allMedia = allMedia.reverse();
+    }
 
     Dashboard.media = Object.assign([], allMedia);
 
@@ -345,15 +458,14 @@ export class Dashboard {
 
         return {
           ...file,
-          stats: statSync(file.fsPath),
           dimensions: imageSize(file.fsPath),
           ...metadata
         };
       } catch (e) {
-        return {...file, stats: undefined};
+        return {...file};
       }
     });
-    files = files.filter(f => f.stats !== undefined);
+    files = files.filter(f => f.mtime !== undefined);
 
     // Retrieve all the folders
     let allContentFolders: string[] = [];
@@ -379,19 +491,47 @@ export class Dashboard {
     }
 
     // Store the last opened folder
-    await Extension.getInstance().setState(ExtensionState.SelectedFolder, selectedFolder);
+    await Extension.getInstance().setState(ExtensionState.SelectedFolder, requestedFolder === HOME_PAGE_NAVIGATION_ID ? HOME_PAGE_NAVIGATION_ID : selectedFolder, "workspace");
+    
+    let sortedFolders = [...allContentFolders, ...allFolders];
+    sortedFolders = sortedFolders.sort((a, b) => {
+      if (a.toLowerCase() < b.toLowerCase()) {
+        return -1;
+      }
+      if (a.toLowerCase() > b.toLowerCase()) {
+        return 1;
+      }
+      return 0;
+    });
+
+    if (crntSort?.order === SortOrder.desc) {
+      sortedFolders = sortedFolders.reverse();
+    }
 
     Dashboard.postWebviewMessage({
       command: DashboardCommand.media,
       data: {
         media: files,
         total: total,
-        folders: [...allContentFolders, ...allFolders],
+        folders: sortedFolders,
         selectedFolder
       } as MediaPaths
     });
   }
 
+  /**
+   * Update the metadata of the retrieved files
+   * @param files 
+   */
+  private static async updateMediaData(files: MediaInfo[]) {
+    files = files.map((m: MediaInfo) => {
+      const stats = statSync(m.fsPath);
+      return Object.assign({}, m, stats);
+    });
+
+    return Object.assign([], files);
+  }
+
   /**
    * Retrieve all the markdown pages
    */
@@ -420,8 +560,8 @@ export class Dashboard {
                   fmModified: file.mtime,
                   fmFilePath: file.filePath,
                   fmFileName: file.fileName,
-                  fmDraft: article?.data.draft ? "Draft" : "Published",
-                  fmYear: article?.data[dateField] ? parseJSON(article?.data[dateField]).getFullYear() : null,
+                  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,
                   slug: article?.data.slug,
@@ -432,7 +572,7 @@ export class Dashboard {
 
                 const contentType = ArticleHelper.getContentType(article.data);
                 const previewField = contentType.fields.find(field => field.isPreviewImage && field.type === "image")?.name || "preview";
-      
+
                 if (article?.data[previewField] && wsFolder) {
                   let fieldValue = article?.data[previewField];
                   if (fieldValue && Array.isArray(fieldValue)) {
@@ -523,9 +663,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];
@@ -572,20 +712,6 @@ export class Dashboard {
 
     Dashboard.getMedia(page || 0, folder || "");
   }
-
-  /**
-   * Post data to the dashboard
-   * @param msg 
-   */
-  private static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) {
-    if (Dashboard.isDisposed) {
-      return;
-    }
-
-    if (Dashboard.webview) {
-      Dashboard.webview?.webview.postMessage(msg);
-    }
-  }
   
   /**
    * Retrieve the webview HTML contents
@@ -596,7 +722,9 @@ export class Dashboard {
 
     const nonce = WebviewHelper.getNonce();
 
-    const version = Extension.getInstance().getVersion();
+    const ext = Extension.getInstance();
+    const version = ext.getVersion();
+    const isBeta = ext.isBetaVersion();
 
     return `
       <!DOCTYPE html>
@@ -608,7 +736,7 @@ export class Dashboard {
         <title>Front Matter Dashboard</title>
       </head>
       <body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
-        <div id="app" style="width:100%;height:100%;margin:0;padding:0;" ${version.usedVersion ? "" : `data-showWelcome="true"`}></div>
+        <div id="app" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${version.usedVersion ? "" : `data-showWelcome="true"`}></div>
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
 

src/commands/Folders.ts

@@ -6,7 +6,7 @@ import { ContentFolder, FileInfo, FolderInfo } from "../models";
 import uniqBy = require("lodash.uniqby");
 import { Template } from "./Template";
 import { Notifications } from "../helpers/Notifications";
-import { Settings } from "../helpers";
+import { FilesHelper, Settings } from "../helpers";
 import { existsSync, mkdirSync } from 'fs';
 import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
@@ -210,8 +210,8 @@ export class Folders {
           if (projectStart) {
             projectStart = projectStart.replace(/\\/g, '/');
             projectStart = projectStart.startsWith('/') ? projectStart.substr(1) : projectStart;
-            const mdFiles = await workspace.findFiles(join(projectStart, '**/*.md'));
-            const mdxFiles = await workspace.findFiles(join(projectStart, '**/*.mdx'));
+            const mdFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.md'));
+            const mdxFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.mdx'));
             let files = [...mdFiles, ...mdxFiles];
             if (files) {
               let fileStats: FileInfo[] = [];
@@ -219,7 +219,9 @@ export class Folders {
               for (const file of files) {
                 try {
                   const fileName = basename(file.fsPath);
+                  
                   const stats = await workspace.fs.stat(file);
+
                   fileStats.push({
                     filePath: file.fsPath,
                     fileName,
@@ -263,7 +265,7 @@ export class Folders {
     const folders: ContentFolder[] = Settings.get(SETTINGS_CONTENT_PAGE_FOLDERS) as ContentFolder[];
     
     return folders.map(folder => ({
-      title: folder.title,
+      ...folder,
       path: Folders.absWsFolder(folder, wsFolder)
     }));
   }
@@ -274,7 +276,13 @@ export class Folders {
    */
   private static async update(folders: ContentFolder[]) {
     const wsFolder = Folders.getWorkspaceFolder();
-    await Settings.update(SETTINGS_CONTENT_PAGE_FOLDERS, folders.map(folder => ({ title: folder.title, path: Folders.relWsFolder(folder, wsFolder) })));
+
+    let folderDetails = folders.map(folder => ({ 
+      ...folder,
+      path: Folders.relWsFolder(folder, wsFolder) 
+    }));
+
+    await Settings.update(SETTINGS_CONTENT_PAGE_FOLDERS, folderDetails, true);
   }
 
   /**

src/commands/Preview.ts

@@ -5,6 +5,9 @@ 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';
+import { Article } from '.';
+import { urlJoin } from 'url-join-ts';
 
 
 export class Preview {
@@ -31,12 +34,25 @@ export class Preview {
     const article = editor ? ArticleHelper.getFrontMatter(editor) : null;
     let slug = article?.data ? article.data.slug : "";
 
-    if (settings.pathname) {
+    let pathname = settings.pathname;
+    if (article?.data) {
+      const contentType = ArticleHelper.getContentType(article.data);
+      if (contentType && contentType.previewPath) {
+        pathname = contentType.previewPath;
+      }
+    }
+
+    if (!slug) {
+      slug = Article.getSlug();
+    }
+
+    if (pathname) {
       const articleDate = ArticleHelper.getDate(article);
+
       try {
-        slug = join(format(articleDate || new Date(), settings.pathname), slug);
+        slug = join(format(articleDate || new Date(), DateHelper.formatUpdate(pathname) as string), slug);
       } catch (error) {
-        slug = join(settings.pathname, slug);
+        slug = join(pathname, slug);
       }
     }
 
@@ -112,9 +128,9 @@ export class Preview {
   </head>
   <body>
     <div class="slug">
-      <input type="text" value="${join(localhostUrl.toString(), slug)}" disabled />
+      <input type="text" value="${urlJoin(localhostUrl.toString(), slug || '')}" disabled />
     </div>
-    <iframe src="${join(localhostUrl.toString(), slug)}" >
+    <iframe src="${urlJoin(localhostUrl.toString(), slug || '')}" >
   </body>
 </html>`;
   }
@@ -131,4 +147,4 @@ export class Preview {
       pathname
     };
   }
-}
+}

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/commands/Template.ts

@@ -3,14 +3,14 @@ import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
 import { SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
-import { format } from 'date-fns';
-import sanitize from '../helpers/Sanitize';
 import { ArticleHelper, Settings } from '../helpers';
 import { Article } from '.';
 import { Notifications } from '../helpers/Notifications';
 import { CONTEXT } from '../constants';
 import { Project } from './Project';
 import { Folders } from './Folders';
+import { ContentType } from '../helpers/ContentType';
+import { ContentType as IContentType } from '../models';
 
 export class Template {
 
@@ -95,7 +95,7 @@ export class Template {
    */
   public static async create(folderPath: string) {
     const folder = Settings.get<string>(SETTING_TEMPLATES_FOLDER);
-    const prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
+    const contentTypes = ContentType.getAll();
 
     if (!folderPath) {
       Notifications.warning(`Incorrect project folder path retrieved.`);
@@ -133,16 +133,14 @@ export class Template {
       return;
     }
 
-    const fileExt = path.parse(selectedTemplate).ext;
-    const sanitizedName = sanitize(titleValue.toLowerCase().replace(/ /g, "-"));
-    let newFileName = `${sanitizedName}${fileExt}`;
-    if (prefix && typeof prefix === "string") {
-      newFileName = `${format(new Date(), prefix)}-${newFileName}`;
+    const templateData = ArticleHelper.getFrontMatterByPath(template.fsPath);
+    let contentType: IContentType | undefined;
+    if (templateData && templateData.data && templateData.data.type) {
+      contentType = contentTypes?.find(t => t.name === templateData.data.type);
     }
 
-    const newFilePath = path.join(folderPath, newFileName);
-    if (fs.existsSync(newFilePath)) {
-      Notifications.warning(`File already exists, please remove it before creating a new one with the same title.`);
+    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue);
+    if (!newFilePath) {
       return;
     }
     
@@ -162,7 +160,7 @@ export class Template {
         fmData.title = titleValue;
       }
       if (typeof fmData.slug !== "undefined") {
-        fmData.slug = sanitizedName;
+        fmData.slug = ArticleHelper.sanitize(titleValue);
       }
 
       frontMatter = Article.updateDate(frontMatter);

src/components/icons/CompressIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface ICompressIconProps {
+  className?: string;
+}
+
+export const CompressIcon: React.FunctionComponent<ICompressIconProps> = ({className}: React.PropsWithChildren<ICompressIconProps>) => {
+  return (
+    <svg className={className || ""} aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path fill="currentColor" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path>
+    </svg>
+  );
+};

src/constants/ContentType.ts

@@ -4,6 +4,8 @@ export const DEFAULT_CONTENT_TYPE_NAME = 'default';
 
 export const DEFAULT_CONTENT_TYPE: ContentType = {
   "name": "default",
+  "pageBundle": false,
+  "previewPath": null,
   "fields": [
     {
       "title": "Title",
@@ -21,14 +23,14 @@ export const DEFAULT_CONTENT_TYPE: ContentType = {
       "type": "datetime"
     },
     {
-      "title": "Article preview",
+      "title": "Content preview",
       "name": "preview",
       "type": "image"
     },
     {
       "title": "Is in draft",
       "name": "draft",
-      "type": "boolean"
+      "type": "draft"
     },
     {
       "title": "Tags",

src/constants/DefaultFields.ts

@@ -2,5 +2,6 @@
 export const DefaultFields = {
   PublishingDate: `date`,
   LastModified: `lastmod`,
-  Description: `description`
+  Description: `description`,
+  Slug: `slug`
 };

src/constants/Extension.ts

@@ -28,6 +28,7 @@ export const COMMAND_NAME = {
   collapseSections: getCommandName("collapseSections"),
   preview: getCommandName("preview"),
   dashboard: getCommandName("dashboard"),
+  dashboardClose: getCommandName("dashboard.close"),
   promote: getCommandName("promoteSettings"),
   insertImage: getCommandName("insertImage"),
   createFolder: getCommandName("createFolder"),

src/constants/ExtensionState.ts

@@ -5,4 +5,13 @@ export const ExtensionState = {
   Version: `frontMatter:Version`,
   SettingPromoted: `frontMatter:Settings:Promoted`,
   MoveTemplatesFolder: `frontMatter:Templates:Move`,
+
+  Dashboard: {
+    Contents: {
+      Sorting: `frontMatter:Dashboard:Contents:Sorting`,
+    },
+    Media: {
+      Sorting: `frontMatter:Dashboard:Media:Sorting`,
+    }
+  }
 };

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/context.ts

@@ -2,5 +2,6 @@ export const CONTEXT = {
   canInit: "frontMatterCanInit",
   canOpenPreview: "frontMatterCanOpenPreview",
   canOpenDashboard: "frontMatterCanOpenDashboard",
-  isEnabled: "frontMatter:enabled"
+  isEnabled: "frontMatter:enabled",
+  isDashboardOpen: "frontMatter:dashboard:open",
 };

src/constants/settings.ts

@@ -4,6 +4,8 @@ export const CONFIG_KEY = "frontMatter";
 
 export const SETTING_TAXONOMY_TAGS = "taxonomy.tags";
 export const SETTING_TAXONOMY_CATEGORIES = "taxonomy.categories";
+export const SETTING_TAXONOMY_CUSTOM = "taxonomy.customTaxonomy";
+
 export const SETTING_DATE_FORMAT = "taxonomy.dateFormat";
 export const SETTING_COMMA_SEPARATED_FIELDS = "taxonomy.commaSeparatedFields";
 export const SETTING_TAXONOMY_CONTENT_TYPES = "taxonomy.contentTypes";
@@ -20,6 +22,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 +41,19 @@ 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_CONTENT_SORTING = "content.sorting";
+
+export const SETTINGS_CONTENT_SORTING_DEFAULT = "content.defaultSorting";
+export const SETTINGS_MEDIA_SORTING_DEFAULT = "content.defaultSorting";
 
 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/DashboardCommand.ts

@@ -3,5 +3,6 @@ export enum DashboardCommand {
   pages = "pages",
   settings = "settings",
   media = "media",
-  viewData = "viewData"
+  viewData = "viewData",
+  mediaUpdate = "mediaUpdate"
 }

src/dashboardWebView/DashboardMessage.ts

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

src/dashboardWebView/components/ChoiceButton.tsx

@@ -28,7 +28,7 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({onCli
 
       <Menu as="span" className="-ml-px relative block">
         <Menu.Button 
-          className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
+          className="h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
           disabled={disabled}>
           <span className="sr-only">Open options</span>
           <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />

src/dashboardWebView/components/Contents/Contents.tsx

@@ -6,6 +6,7 @@ import { Header } from '../Header';
 import { Overview } from './Overview';
 import { Spinner } from '../Spinner';
 import { SponsorMsg } from '../SponsorMsg';
+import usePages from '../../hooks/usePages';
 
 export interface IContentsProps {
   pages: Page[];
@@ -14,19 +15,20 @@ export interface IContentsProps {
 
 export const Contents: React.FunctionComponent<IContentsProps> = ({pages, loading}: React.PropsWithChildren<IContentsProps>) => {
   const settings = useRecoilValue(SettingsSelector);
+  const { pageItems } = usePages(pages);
 
-  const pageFolders = [...new Set(pages.map(page => page.fmFolder))];
+  const pageFolders = [...new Set(pageItems.map(page => page.fmFolder))];
 
   return (
     <main className={`h-full w-full`}>
       <div className="flex flex-col h-full overflow-auto">
         <Header 
           folders={pageFolders}
-          totalPages={pages.length}
+          totalPages={pageItems.length}
           settings={settings} />
 
         <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
-          { loading ? <Spinner /> : <Overview pages={pages} settings={settings} /> }
+          { loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} /> }
         </div>
 
         <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />

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/Dashboard.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { Spinner } from './Spinner';
 import useMessages from '../hooks/useMessages';
 import useDarkMode from '../../hooks/useDarkMode';
-import usePages from '../hooks/usePages';
 import { WelcomeScreen } from './WelcomeScreen';
 import { useRecoilValue } from 'recoil';
 import { DashboardViewSelector } from '../state';
 import { Contents } from './Contents/Contents';
 import { Media } from './Media/Media';
+import { ViewType } from '../models';
 
 export interface IDashboardProps {
   showWelcome: boolean;
@@ -15,7 +15,6 @@ export interface IDashboardProps {
 
 export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome}: React.PropsWithChildren<IDashboardProps>) => {
   const { loading, pages, settings } = useMessages();
-  const { pageItems } = usePages(pages);
   const view = useRecoilValue(DashboardViewSelector);
   useDarkMode();
 
@@ -31,9 +30,9 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
     return <WelcomeScreen settings={settings} />;
   }
 
-  if (view === 'media') {
+  if (view === ViewType.Media) {
     return <Media />;
   }
 
-  return <Contents pages={pageItems} loading={loading} />;
+  return <Contents pages={pages} loading={loading} />;
 };

src/dashboardWebView/components/DateField.tsx

@@ -1,5 +1,6 @@
-import { format, parseJSON } from 'date-fns';
+import { format } from 'date-fns';
 import * as React from 'react';
+import { DateHelper } from '../../helpers/DateHelper';
 
 export interface IDateFieldProps {
   value: Date | string;
@@ -10,9 +11,9 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({value}: Rea
 
   React.useEffect(() => {
     try {
-      const parsedValue = typeof value === 'string' ? parseJSON(value) : value;
-      const dateString = format(parsedValue, 'yyyy-MM-dd');
-      setDateValue(dateString);
+      const parsedValue = typeof value === 'string' ? DateHelper.tryParse(value) : value;
+      const dateString = parsedValue ? format(parsedValue, 'yyyy-MM-dd') : parsedValue;
+      setDateValue(dateString || "");
     } catch (e) {
       // Date is invalid
     }

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -2,8 +2,10 @@ import { CollectionIcon } from '@heroicons/react/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { Sorting } from '.';
 import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
+import { ViewType } from '../../models';
 import { SelectedMediaFolderAtom, SettingsAtom } from '../../state';
 
 export interface IBreadcrumbProps {}
@@ -31,9 +33,10 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
           return false;
         }
       }
-
+1
       for (let i = 0; i < contentFolders.length; i++) {
-        const contentFolder = parseWinPath(contentFolders[i]) as string;
+        const folder = contentFolders[i];
+        const contentFolder = parseWinPath(folder.path) as string;
         const relContentPath = folderPath.replace(contentFolder, '');
         return relContentPath.length > 1 && folderPath.startsWith(contentFolder);
       }
@@ -62,8 +65,8 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
   }, [selectedFolder]);
 
   return (
-    <nav className="bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex py-2" aria-label="Breadcrumb">
-      <ol role="list" className="w-full mx-auto flex space-x-4 px-5">
+    <nav className="w-full bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex justify-between py-2" aria-label="Breadcrumb">
+      <ol role="list" className="flex space-x-4 px-5">
         <li className="flex">
           <div className="flex items-center">
             <button onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)} className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500">
@@ -94,6 +97,10 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
           </li>
         ))}
       </ol>
+
+      <div className={`flex px-5`}>
+        <Sorting view={ViewType.Media} disableCustomSorting />
+      </div>
     </nav>
   );
 };

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -1,7 +1,7 @@
 import { XCircleIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { useRecoilValue, useResetRecoilState } from 'recoil';
-import { SortingSelector, FolderSelector, TagSelector, CategorySelector, SortingAtom, DEFAULT_SORTING_OPTION, FolderAtom, DEFAULT_FOLDER_STATE, TagAtom, CategoryAtom, DEFAULT_TAG_STATE, DEFAULT_CATEGORY_STATE } from '../../state';
+import { FolderSelector, TagSelector, CategorySelector, SortingAtom, FolderAtom, DEFAULT_FOLDER_STATE, TagAtom, CategoryAtom, DEFAULT_TAG_STATE, DEFAULT_CATEGORY_STATE } from '../../state';
 
 import { DefaultValue } from 'recoil';
 
@@ -17,7 +17,6 @@ export interface IClearFiltersProps {}
 export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (props: React.PropsWithChildren<IClearFiltersProps>) => {
   const [ show, setShow ] = React.useState(false);
 
-  const sorting = useRecoilValue(SortingSelector);
   const folder = useRecoilValue(FolderSelector);
   const tag = useRecoilValue(TagSelector);
   const category = useRecoilValue(CategorySelector);
@@ -36,19 +35,19 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (props:
   };
 
   React.useEffect(() => {
-    if (sorting !== DEFAULT_SORTING_OPTION || folder !== DEFAULT_FOLDER_STATE || tag !== DEFAULT_TAG_STATE || category !== DEFAULT_CATEGORY_STATE) {
+    if (folder !== DEFAULT_FOLDER_STATE || tag !== DEFAULT_TAG_STATE || category !== DEFAULT_CATEGORY_STATE) {
       setShow(true);
     } else {
       setShow(false);
     }
-  }, [sorting, folder, tag, category]);
+  }, [folder, tag, category]);
 
   if (!show) return null;
   
   return (
     <button className="flex items-center hover:text-teal-600" onClick={reset} title={`Clear filters, grouping, and sorting`}>
       <XCircleIcon className={`inline-block w-5 h-5 mr-1`} /><span>Clear</span>
-      <span className={`sr-only`}> filters, grouping, and sorting</span>
+      <span className={`sr-only`}> filters and grouping</span>
     </button>
   );
 };

src/dashboardWebView/components/Header/Folders.tsx

@@ -1,19 +1,19 @@
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
-import { useRecoilState } from 'recoil';
-import { FolderAtom } from '../../state';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { FolderAtom, SettingsSelector } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
-export interface IFoldersProps {
-  folders: string[];
-}
+export interface IFoldersProps {}
 
 const DEFAULT_TYPE = "All types";
 
-export const Folders: React.FunctionComponent<IFoldersProps> = ({folders}: React.PropsWithChildren<IFoldersProps>) => {
+export const Folders: React.FunctionComponent<IFoldersProps> = ({}: React.PropsWithChildren<IFoldersProps>) => {
   const [ crntFolder, setCrntFolder ] = useRecoilState(FolderAtom);
+  const settings = useRecoilValue(SettingsSelector);
+  const contentFolders = settings?.contentFolders || [];
 
-  if (folders.length <= 1) {
+  if (contentFolders.length <= 1) {
     return null;
   }
   
@@ -29,12 +29,12 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({folders}: React
             isCurrent={!crntFolder}
             onClick={(value) => setCrntFolder(value)} />
 
-          {folders.map((option) => (
+          {contentFolders.map((option) => (
             <MenuItem 
-              key={option}
-              title={option}
-              value={option}
-              isCurrent={option === crntFolder}
+              key={option.title}
+              title={option.title}
+              value={option.title}
+              isCurrent={option.title === crntFolder}
               onClick={(value) => setCrntFolder(value)} />
           ))}
         </MenuItems>

src/dashboardWebView/components/Header/Header.tsx

@@ -3,14 +3,14 @@ import { Sorting } from './Sorting';
 import { Searchbox } from './Searchbox';
 import { Filter } from './Filter';
 import { Folders } from './Folders';
-import { Settings } from '../../models';
+import { Settings, ViewType } from '../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Startup } from '../Startup';
 import { Navigation } from '../Navigation';
 import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
-import { useRecoilState } from 'recoil';
-import { CategoryAtom, DashboardViewAtom, TagAtom } from '../../state';
+import { useRecoilState, useResetRecoilState } from 'recoil';
+import { CategoryAtom, DashboardViewAtom, SortingAtom, TagAtom } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
@@ -33,6 +33,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
   const [ crntTag, setCrntTag ] = useRecoilState(TagAtom);
   const [ crntCategory, setCrntCategory ] = useRecoilState(CategoryAtom);
   const [ view, setView ] = useRecoilState(DashboardViewAtom);
+  const resetSorting = useResetRecoilState(SortingAtom)
 
   const createContent = () => {
     Messenger.send(DashboardMessage.createContent);
@@ -46,22 +47,27 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
     Messenger.send(DashboardMessage.createByTemplate);
   };
 
+  const updateView = (view: ViewType) => {
+    setView(view);
+    resetSorting();
+  }
+
   return (
     <div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
       
       <div className={`px-4 bg-gray-50 dark:bg-vulcan-50 border-b-2 border-gray-200 dark:border-vulcan-200`}>
         <div className={`flex items-center justify-start`}>
-          <button className={`p-2 flex items-center ${view === "contents" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => setView("contents")}>
+          <button className={`p-2 flex items-center ${view === "contents" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => updateView(ViewType.Contents)}>
             <MarkdownIcon className={`h-6 w-auto mr-2`} /><span>Contents</span>
           </button>
-          <button className={`p-2 flex items-center ${view === "media" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => setView("media")}>
+          <button className={`p-2 flex items-center ${view === "media" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => updateView(ViewType.Media)}>
             <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
           </button>
         </div>
       </div>
 
       {
-        view === "contents" && (
+        view === ViewType.Contents && (
           <>
             <div className={`px-4 mt-3 mb-2 flex items-center justify-between`}>
               <Searchbox />
@@ -98,7 +104,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
             <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100`}>
               <ClearFilters />
 
-              <Folders folders={folders || []} />
+              <Folders />
 
               <Filter label={`Tag`} activeItem={crntTag} items={settings?.tags || []} onClick={(value) => setCrntTag(value)} />
 
@@ -106,14 +112,14 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
 
               <Grouping />
 
-              <Sorting />
+              <Sorting view={ViewType.Contents} />
             </div>
           </>
         )
       }
 
       {
-        view === "media" && (
+        view === ViewType.Media && (
           <>
             <Pagination />
             <Breadcrumb />

src/dashboardWebView/components/Header/Sorting.tsx

@@ -1,37 +1,85 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { ExtensionState } from '../../../constants';
+import { SortOrder, SortType } from '../../../models';
 import { SortOption } from '../../constants/SortOption';
-import { SearchSelector, SortingAtom } from '../../state';
+import { DashboardMessage } from '../../DashboardMessage';
+import { ViewType } from '../../models';
+import { SortingOption } from '../../models/SortingOption';
+import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
-export interface ISortingProps {}
+export interface ISortingProps {
+  disableCustomSorting?: boolean;
+  view: ViewType;
+}
 
-export const sortOptions = [
-  { name: "Last modified", id: SortOption.LastModified },
-  { name: "By filename (asc)", id: SortOption.FileNameAsc },
-  { name: "By filename (desc)", id: SortOption.FileNameDesc },
+export const sortOptions: SortingOption[] = [
+  { name: "Last modified (asc)", id: SortOption.LastModifiedAsc, order: SortOrder.asc, type: SortType.date },
+  { name: "Last modified (desc)", id: SortOption.LastModifiedDesc, order: SortOrder.desc, type: SortType.date },
+  { name: "By filename (asc)", id: SortOption.FileNameAsc, order: SortOrder.asc, type: SortType.string },
+  { name: "By filename (desc)", id: SortOption.FileNameDesc, order: SortOrder.desc, type: SortType.string },
 ];
 
-export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsWithChildren<ISortingProps>) => {
+export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSorting, view}: React.PropsWithChildren<ISortingProps>) => {
   const [ crntSorting, setCrntSorting ] = useRecoilState(SortingAtom);
   const searchValue = useRecoilValue(SearchSelector);
+  const settings = useRecoilValue(SettingsSelector);
 
-  const crntSort = sortOptions.find(x => x.id === crntSorting);
+  const updateSorting = (value: SortingOption) => {
+    Messenger.send(DashboardMessage.setState, {
+      key: `${view === ViewType.Contents ? ExtensionState.Dashboard.Contents.Sorting : ExtensionState.Dashboard.Media.Sorting}`,
+      value: value
+    });
+
+    setCrntSorting(value)
+  };
+
+  let allOptions = [...sortOptions];
+  if (settings?.customSorting && !disableCustomSorting) {
+    allOptions = [...allOptions, ...settings.customSorting.map((s) => ({ 
+      title: s.title || s.name, 
+      name: s.name, 
+      id: s.id || `${s.name}-${s.order}`, 
+      order: s.order, 
+      type: s.type 
+    }))];
+  }
+
+  let crntSortingOption = crntSorting;
+  if (!crntSortingOption) {
+    if (view === ViewType.Contents) {
+      crntSortingOption = settings?.dashboardState?.contents?.sorting || null;
+    } else if (view === ViewType.Media) {
+      crntSortingOption = settings?.dashboardState?.media?.sorting || null;
+    }
+
+    if (crntSortingOption === null) {
+      if (view === ViewType.Contents && settings?.dashboardState.contents.defaultSorting) {
+        crntSortingOption = allOptions.find(f => f.id === settings?.dashboardState.contents.defaultSorting) || null;
+      } else if (view === ViewType.Media && settings?.dashboardState.contents.defaultSorting) {
+        crntSortingOption = allOptions.find(f => f.id === settings?.dashboardState.contents.defaultSorting) || null;
+      }
+    }
+  }
+
+  let crntSort = allOptions.find(x => x.id === crntSortingOption?.id) || sortOptions[0];
 
   return (
     <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={`Sort by`} title={crntSort?.name || ""} disabled={!!searchValue} />
+        <MenuButton label={`Sort by`} title={crntSort?.title || crntSort?.name || ""} disabled={!!searchValue} />
 
         <MenuItems>
-          {sortOptions.map((option) => (
+          {allOptions.map((option) => (
             <MenuItem 
               key={option.id}
-              title={option.name}
-              value={option.id}
-              isCurrent={option.id === crntSorting}
-              onClick={(value) => setCrntSorting(value)} />
+              title={option.title || option.name}
+              value={option}
+              isCurrent={option.id === crntSorting?.id}
+              onClick={(value) => updateSorting(value)} />
           ))}
         </MenuItems>
       </Menu>

src/dashboardWebView/components/Media/FolderCreation.tsx

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { FolderAddIcon } from '@heroicons/react/outline';
 import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
-import { SelectedMediaFolderAtom } from '../../state';
+import { SelectedMediaFolderAtom, SettingsSelector } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
+import { ChoiceButton } from '../ChoiceButton';
+import { CustomScript, ScriptType } from '../../../models';
 
 export interface IFolderCreationProps {}
 
 export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (props: React.PropsWithChildren<IFolderCreationProps>) => {
   const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
+  const settings = useRecoilValue(SettingsSelector);
 
   const onFolderCreation = () => {
     Messenger.send(DashboardMessage.createMediaFolder, {
@@ -16,6 +19,24 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (pr
     });
   };
 
+  const runCustomScript = (script: CustomScript) => {
+    Messenger.send(DashboardMessage.runCustomScript, {script, path: selectedFolder});
+  };
+
+  const scripts = (settings?.scripts || []).filter(script => script.type === ScriptType.MediaFolder);
+  if (scripts.length > 0) {
+    return (
+      <ChoiceButton 
+        title={`Create new folder`} 
+        choices={scripts.map(s => ({
+          title: s.title,
+          onClick: () => runCustomScript(s)
+        }))} 
+        onClick={onFolderCreation} 
+        disabled={!settings?.initialized} />
+    )
+  }
+
   return (
     <button 
       className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}

src/dashboardWebView/components/Media/Item.tsx

@@ -1,15 +1,20 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { CheckCircleIcon, ClipboardCopyIcon, CodeIcon, PencilIcon, PhotographIcon, TrashIcon } from '@heroicons/react/outline';
+import { Menu } from '@headlessui/react';
+import { PhotographIcon } from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { CustomScript } from '../../../helpers/CustomScript';
 import { parseWinPath } from '../../../helpers/parseWinPath';
+import { ScriptType } from '../../../models';
 import { MediaInfo } from '../../../models/MediaPaths';
 import { DashboardMessage } from '../../DashboardMessage';
 import { LightboxAtom, PageSelector, SelectedMediaFolderSelector, SettingsSelector, ViewDataSelector } from '../../state';
+import { MenuItem, MenuItems } from '../Menu';
 import { Alert } from '../Modals/Alert';
 import { Metadata } from '../Modals/Metadata';
+import { MenuButton } from './MenuButton'
 
 export interface IItemProps {
   media: MediaInfo;
@@ -61,6 +66,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     Messenger.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || "");
   };
 
+  const runCustomScript = (script: CustomScript) => {
+    Messenger.send(DashboardMessage.runCustomScript, {script, path: media.fsPath});
+  };
+
   const insertToArticle = () => {
     const relPath = getRelPath();
     Messenger.send(DashboardMessage.insertPreviewImage, {
@@ -78,9 +87,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   const insertSnippet = () => {
     const relPath = getRelPath();
     let snippet = settings?.mediaSnippet.join("\n");
+
     snippet = snippet?.replace("{mediaUrl}", parseWinPath(relPath) || "");
     snippet = snippet?.replace("{alt}", alt || "");
     snippet = snippet?.replace("{caption}", caption || "");
+    snippet = snippet?.replace("{filename}", basename(relPath || ""));
 
     Messenger.send(DashboardMessage.insertPreviewImage, {
       image: parseWinPath(relPath) || "",
@@ -111,8 +122,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
       }
     }
 
-    if (media?.stats?.size) {
-      const size = media.stats.size / (1024*1024);
+    if (media?.size) {
+      const size = media.size / (1024*1024);
       if (size > 1) {
         sizeDetails.push(`${size.toFixed(2)} MB`);
       } else {
@@ -149,6 +160,15 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     setFilename(getFileName());
   };
 
+  const customScriptActions = () => {
+    return (settings?.scripts || []).filter(script => script.type === ScriptType.MediaFile).map(script => (
+      <MenuItem 
+        key={script.title}
+        title={script.title} 
+        onClick={() => runCustomScript(script)} />
+    ))
+  }
+
   useEffect(() => {
     if (media.alt !== alt) {
       setAlt(media.alt);
@@ -185,52 +205,52 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
         </button>
         <div className={`relative py-4 pl-4 pr-12`}>
           <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
-            <button title={`Edit metadata`} 
-                    className={`hover:text-teal-900 focus:outline-none`} 
-                    onClick={updateMetadata}>
-              <PencilIcon className={`h-5 w-5`} />
-              <span className={`sr-only`}>Edit metadata</span>
-            </button>
 
-            {
-              viewData?.data?.filePath ? (
-                <>
-                  <button 
-                    title={`Insert into your content`} 
-                    className={`hover:text-teal-900 focus:outline-none`} 
-                    onClick={insertToArticle}>
-                    <CheckCircleIcon className={`h-5 w-5`} />
-                    <span className={`sr-only`}>Insert into your content</span>
-                  </button>
+            <div className="flex items-center">
+              <Menu as="div" className="relative z-10 inline-block text-left">
+                <MenuButton title={`Menu`} />
+
+                <MenuItems>
+                  <MenuItem 
+                    title={`Edit metadata`}
+                    onClick={updateMetadata}
+                    />
+
                   {
-                    (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
-                      <button 
-                        title={`Insert your media snippet`} 
-                        className={`hover:text-teal-900 focus:outline-none`} 
-                        onClick={insertSnippet}>
-                        <CodeIcon className={`h-5 w-5`} />
-                        <span className={`sr-only`}>Insert your media snippet</span>
-                      </button>
+                    viewData?.data?.filePath ? (
+                      <>
+                        <MenuItem 
+                          title={`Insert image markdown`}
+                          onClick={insertToArticle} />
+
+                        {
+                          (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                            <MenuItem 
+                              title={`Insert snippet`}
+                              onClick={insertSnippet} />
+                          )
+                        }
+
+                        { customScriptActions() }
+                      </>
+                    ) : (
+                      <>
+                        <MenuItem 
+                          title={`Copy media path`}
+                          onClick={copyToClipboard} />
+
+                        { customScriptActions() }
+
+                        <MenuItem 
+                          title={`Delete`}
+                          onClick={deleteMedia} />
+                      </>
                     )
                   }
-                </>
-              ) : (
-                <>
-                  <button title={`Copy media path`} 
-                          className={`hover:text-teal-900 focus:outline-none`} 
-                          onClick={copyToClipboard}>
-                    <ClipboardCopyIcon className={`h-5 w-5`} />
-                    <span className={`sr-only`}>Copy media path</span>
-                  </button>
-                  <button title={`Delete media`} 
-                          className={`hover:text-teal-900 focus:outline-none`} 
-                          onClick={deleteMedia}>
-                    <TrashIcon className={`h-5 w-5`} />
-                    <span className={`sr-only`}>Delete media</span>
-                  </button>
-                </>
-              )
-            }
+                </MenuItems>
+              </Menu>
+            </div>
+
           </div>
           <p className="text-sm dark:text-whisper-900 font-bold pointer-events-none flex items-center">
             {basename(parseWinPath(media.fsPath) || "")}
@@ -256,7 +276,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
             <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{getFolder()}</span>
           </p>
           {
-            (media?.stats?.size || media?.dimensions) && (
+            (media?.size || media?.dimensions) && (
               <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
                 <b className={`mr-1`}>Size:</b>
                 <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{calculateSize()}</span>

src/dashboardWebView/components/Media/MenuButton.tsx

@@ -0,0 +1,20 @@
+import { Menu } from '@headlessui/react';
+import { DotsVerticalIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+
+export interface IMenuButtonProps {
+    title: string;
+    disabled?: boolean;
+}
+
+export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({ title, disabled }: React.PropsWithChildren<IMenuButtonProps>) => {
+  return (
+    <div className={`inline-flex items-center ${disabled ? 'opacity-50' : ''}`}>      
+      <Menu.Button disabled={disabled} className="group inline-flex justify-center text-sm font-medium text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600">
+        <span className="sr-only">{title}</span>
+        <DotsVerticalIcon className="h-5 w-5" aria-hidden="true" />
+      </Menu.Button>
+    </div>
+  );
+};
+

src/dashboardWebView/components/Media/Pagination.tsx

@@ -1,9 +1,11 @@
+import { EventData } from '@estruyf/vscode';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { RefreshIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { DashboardCommand } from '../../DashboardCommand';
 import { DashboardMessage } from '../../DashboardMessage';
-import { LoadingAtom, MediaTotalSelector, PageAtom, SelectedMediaFolderSelector } from '../../state';
+import { LoadingAtom, MediaTotalSelector, PageAtom, SelectedMediaFolderSelector, SortingSelector } from '../../state';
 import { FolderCreation } from './FolderCreation';
 import { LIMIT } from './Media';
 import { PaginationButton } from './PaginationButton';
@@ -12,6 +14,7 @@ export interface IPaginationProps {}
 
 export const Pagination: React.FunctionComponent<IPaginationProps> = ({}: React.PropsWithChildren<IPaginationProps>) => {
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const crntSorting = useRecoilValue(SortingSelector);
   const totalMedia = useRecoilValue(MediaTotalSelector);
   const [ , setLoading ] = useRecoilState(LoadingAtom);
   const [ page, setPage ] = useRecoilState(PageAtom);
@@ -46,11 +49,23 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({}: React.
     Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
   }
 
+  const mediaUpdate = (message: MessageEvent<EventData<{ key: string, value: any }>>) => {
+    if (message.data.command === DashboardCommand.mediaUpdate) {
+      setLoading(true);
+      Messenger.send(DashboardMessage.getMedia, {
+        page,
+        folder: selectedFolder || '',
+        sorting: crntSorting
+      });
+    }
+  }
+
   React.useEffect(() => {
     setLoading(true);
     Messenger.send(DashboardMessage.getMedia, {
       page,
-      folder: selectedFolder || ''
+      folder: selectedFolder || '',
+      sorting: crntSorting
     });
   }, [page]);
 
@@ -58,11 +73,25 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({}: React.
     setLoading(true);
     Messenger.send(DashboardMessage.getMedia, {
       page: 0,
-      folder: selectedFolder || ''
+      folder: selectedFolder || '',
+      sorting: crntSorting
     });
     setPage(0);
   }, [selectedFolder]);
 
+  React.useEffect(() => {
+    setLoading(true);
+    Messenger.send(DashboardMessage.getMedia, {
+      page,
+      folder: selectedFolder || '',
+      sorting: crntSorting
+    });
+  }, [crntSorting]);
+
+  React.useEffect(() => {
+    Messenger.listen(mediaUpdate);
+  }, []);
+
   return (
     <nav
       className="py-4 px-5 flex items-center justify-between bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100"

src/dashboardWebView/components/Menu/MenuItem.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 export interface IMenuItemProps {
   title: string;
-  value: any;
+  value?: any;
   isCurrent?: boolean;
   disabled?: boolean;
   onClick: (value: any) => void;

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/SponsorMsg.tsx

@@ -11,8 +11,8 @@ export interface ISponsorMsgProps {
 export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({beta, version}: React.PropsWithChildren<ISponsorMsgProps>) => {
   return (
     <p className={`w-full max-w-7xl mx-auto px-4 text-vulcan-50 dark:text-whisper-900 py-2 text-center space-x-8 flex items-center justify-between`}>
-      <a className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`} href={SPONSOR_LINK} title="Sponsor Front Matter">
-        <span>Sponsor</span> <HeartIcon className={`h-5 w-5 group-hover:fill-current`} /> 
+      <a className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`} href={SPONSOR_LINK} title="Support Front Matter">
+        <span>Support</span> <HeartIcon className={`h-5 w-5 group-hover:fill-current`} /> 
       </a>
       <span>Front Matter{version ? ` (v${version.installedVersion}${!!beta ? ` BETA` : ''})` : ''}</span>
       <a className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`} href={REVIEW_LINK} title="Review Front Matter">

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/constants/SortOption.ts

@@ -1,5 +1,6 @@
 export enum SortOption {
-  LastModified = 1,
-  FileNameAsc,
-  FileNameDesc
+  LastModifiedAsc = "LastModifiedAsc",
+  LastModifiedDesc = "LastModifiedDesc",
+  FileNameAsc = "FileNameAsc",
+  FileNameDesc = "FileNameDesc"
 }

src/dashboardWebView/hooks/useMessages.tsx

@@ -6,6 +6,7 @@ import { Page } from '../models/Page';
 import { DashboardViewAtom, SettingsAtom, ViewDataAtom } from '../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
+import { ViewType } from '../models';
 
 export default function useMessages() {
   const [loading, setLoading] = useState<boolean>(false);
@@ -21,8 +22,8 @@ export default function useMessages() {
         break;
       case DashboardCommand.viewData:
         setViewData(message.data.data);
-        if (message.data.data?.type === 'media') {
-          setView('media');
+        if (message.data.data?.type === ViewType.Media) {
+          setView(ViewType.Media);
         }
         break;
       case DashboardCommand.settings:

src/dashboardWebView/hooks/usePages.tsx

@@ -3,8 +3,10 @@ import { SortOption } from '../constants/SortOption';
 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 { useRecoilState, useRecoilValue } from 'recoil';
+import { CategorySelector, FolderSelector, SearchSelector, SettingsSelector, SortingAtom, TabSelector, TagSelector } from '../state';
+import { SortOrder, SortType } from '../../models';
+import { Sorting } from '../../helpers/Sorting';
 
 const fuseOptions: Fuse.IFuseOptions<Page> = {
   keys: [
@@ -16,14 +18,26 @@ const fuseOptions: Fuse.IFuseOptions<Page> = {
 
 export default function usePages(pages: Page[]) {
   const [ pageItems, setPageItems ] = useState<Page[]>([]);
+  const [ sorting, setSorting ] = useRecoilState(SortingAtom);
+  const settings = useRecoilValue(SettingsSelector);
   const tab = useRecoilValue(TabSelector);
-  const sorting = useRecoilValue(SortingSelector);
   const folder = useRecoilValue(FolderSelector);
   const search = useRecoilValue(SearchSelector);
   const tag = useRecoilValue(TagSelector);
   const category = useRecoilValue(CategorySelector);
 
   useEffect(() => {
+    const draftField = settings?.draftField;
+    let usedSorting = sorting;
+
+    if (!usedSorting) {
+      const lastSort = settings?.dashboardState.contents.sorting;      
+      if (lastSort) {
+        setSorting(lastSort);
+        return;
+      }
+    }
+
     // Check if search needs to be performed
     let searchedPages = pages;
     if (search) {
@@ -34,23 +48,49 @@ 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
     let pagesSorted: Page[] = Object.assign([], pagesToShow);
     if (!search) {
-      if (sorting === SortOption.FileNameAsc) {
-        pagesSorted = pagesToShow.sort((a, b) => a.fmFileName.toLowerCase().localeCompare(b.fmFileName.toLowerCase()));
-      } else if (sorting === SortOption.FileNameDesc) {
-        pagesSorted = pagesToShow.sort((a, b) => b.fmFileName.toLowerCase().localeCompare(a.fmFileName.toLowerCase()));
+      if (sorting && sorting.id === SortOption.FileNameAsc) {
+        pagesSorted = pagesSorted.sort(Sorting.alphabetically("fmFileName"));
+      } else if (sorting && sorting.id === SortOption.FileNameDesc) {
+        pagesSorted = pagesSorted.sort(Sorting.alphabetically("fmFileName")).reverse();
+      } else if (sorting && sorting.id === SortOption.LastModifiedAsc) {
+        pagesSorted = pagesSorted.sort(Sorting.number("fmModified"));
+      } else if (sorting && sorting.id === SortOption.LastModifiedDesc) {
+        pagesSorted = pagesSorted.sort(Sorting.number("fmModified")).reverse();
+      } else if (sorting && sorting.id && sorting.name) {
+        const { order, name, type } = sorting;
+
+        if (type === SortType.string) {
+          pagesSorted = pagesSorted.sort(Sorting.alphabetically(name));
+        } else if (type === SortType.date) {
+          pagesSorted = pagesSorted.sort(Sorting.date(name));
+        }
+
+        if (order === SortOrder.desc) {
+          pagesSorted = pagesSorted.reverse();
+        }
       } else {
-        pagesSorted = pagesToShow.sort((a, b) => b.fmModified - a.fmModified);
+        pagesSorted = pagesSorted.sort(Sorting.number("fmModified")).reverse();
       }
     }
 
@@ -69,7 +109,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/index.tsx

@@ -7,10 +7,17 @@ import { Integrations } from "@sentry/tracing";
 import { SENTRY_LINK } from "../constants";
 import './styles.css';
 
+const elm = document.querySelector("#app");
+const welcome = elm?.getAttribute("data-showWelcome");
+const version = elm?.getAttribute("data-version");
+const environment = elm?.getAttribute("data-environment");
+
 Sentry.init({
   dsn: SENTRY_LINK,
   integrations: [new Integrations.BrowserTracing()],
   tracesSampleRate: 0, // No performance tracing required
+  release: version || "",
+  environment: environment || ""
 });
 
 declare const acquireVsCodeApi: <T = unknown>() => {
@@ -18,7 +25,4 @@ declare const acquireVsCodeApi: <T = unknown>() => {
   setState: (data: T) => void;
   postMessage: (msg: unknown) => void;
 };
-
-const elm = document.querySelector("#app");
-const welcome = elm?.getAttribute("data-showWelcome");
 render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);

src/dashboardWebView/models/Page.ts

@@ -6,7 +6,7 @@ export interface Page {
   fmFileName: string;
   fmModified: number;
   fmDraft: "Draft" | "Published",
-  fmYear: number | null;
+  fmYear: number | null | undefined;
 
   title: string;
   slug: string;

src/dashboardWebView/models/Settings.ts

@@ -1,7 +1,8 @@
 import { VersionInfo } from '../../models/VersionInfo';
 import { ViewType } from '../state';
 import { ContentFolder } from '../../models/ContentFolder';
-import { ContentType } from '../../models';
+import { ContentType, CustomScript, DraftField, Framework, SortingSetting } from '../../models';
+import { SortingOption } from './SortingOption';
 
 export interface Settings { 
   beta: boolean;
@@ -16,5 +17,21 @@ export interface Settings {
   pageViewType: ViewType | undefined;
   mediaSnippet: string[];
   contentTypes: ContentType[];
-  contentFolders: string[];
+  contentFolders: ContentFolder[];
+  crntFramework: string;
+  framework: Framework | null | undefined;
+  draftField: DraftField | null | undefined;
+  customSorting: SortingSetting[] | undefined;
+  dashboardState: DashboardState;
+  scripts: CustomScript[];
+}
+
+export interface DashboardState {
+  contents: ViewState;
+  media: ViewState;
+}
+
+export interface ViewState {
+  sorting: SortingOption | null | undefined;
+  defaultSorting: string | null | undefined;
 }

src/dashboardWebView/models/SortingOption.ts

@@ -0,0 +1,10 @@
+import { SortOrder, SortType } from "../../models";
+import { SortOption } from "../constants/SortOption";
+
+export interface SortingOption { 
+  title?: string; 
+  name: string; 
+  id: SortOption | string; 
+  order: SortOrder, 
+  type: SortType;
+}

src/dashboardWebView/models/ViewType.ts

@@ -0,0 +1,4 @@
+export enum ViewType {
+  Contents = "contents",
+  Media = "media"
+}

src/dashboardWebView/models/index.ts

@@ -1,3 +1,5 @@
 export * from './Page';
 export * from './Settings';
+export * from './SortingOption';
 export * from './Status';
+export * from './ViewType';

src/dashboardWebView/state/atom/DashboardViewAtom.ts

@@ -1,6 +1,7 @@
 import { atom } from 'recoil';
+import { ViewType } from '../../models';
 
-export const DashboardViewAtom = atom<"contents" | "media">({
+export const DashboardViewAtom = atom<ViewType>({
   key: 'DashboardViewAtom',
-  default: "contents"
+  default: ViewType.Contents
 });

src/dashboardWebView/state/atom/SortingAtom.ts

@@ -1,9 +1,10 @@
 import { atom } from 'recoil';
 import { SortOption } from '../../constants/SortOption';
+import { SortingOption } from '../../models/SortingOption';
 
-export const DEFAULT_SORTING_OPTION = SortOption.LastModified;
+export const DEFAULT_SORTING_OPTION = SortOption.LastModifiedDesc;
 
-export const SortingAtom = atom<SortOption>({
+export const SortingAtom = atom<SortingOption | null>({
   key: 'SortingAtom',
-  default: DEFAULT_SORTING_OPTION
+  default: null
 });

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, SETTING_TAXONOMY_CUSTOM } 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 { CustomTaxonomyData, DraftField, ScriptType, 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;
 
@@ -109,12 +109,18 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         case CommandToCode.updateKeywords:
           this.updateTags(TagType.keywords, msg.data || []);
           break;
+        case CommandToCode.updateCustomTaxonomy:
+          this.updateCustomTaxonomy(msg.data);
+          break;
         case CommandToCode.addTagToSettings:
           this.addTags(TagType.tags, msg.data);
           break;
         case CommandToCode.addCategoryToSettings:
           this.addTags(TagType.categories, msg.data);
           break;
+        case CommandToCode.addToCustomTaxonomy:
+          this.addCustomTaxonomy(msg.data);
+          break;
         case CommandToCode.openSettings:
           commands.executeCommand('workbench.action.openSettings', '@ext:eliostruyf.vscode-front-matter');
           break;
@@ -270,6 +276,15 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         }
       }
     }
+
+    // Check slug
+    if (!updatedMetadata[DefaultFields.Slug]) {
+      const slug = Article.getSlug();
+
+      if (slug) {
+        updatedMetadata[DefaultFields.Slug] = slug;
+      }
+    }
     
     this.postWebviewMessage({ command: Command.metadata, data: {
       ...updatedMetadata
@@ -352,38 +367,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 +396,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
@@ -421,8 +411,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         },
         tags: Settings.get(SETTING_TAXONOMY_TAGS, true) || [],
         categories: Settings.get(SETTING_TAXONOMY_CATEGORIES, true) || [],
+        customTaxonomy: Settings.get(SETTING_TAXONOMY_CUSTOM, true) || [],
         freeform: Settings.get(SETTING_PANEL_FREEFORM),
-        scripts: Settings.get(SETTING_CUSTOM_SCRIPTS),
+        scripts: (Settings.get<ICustomScript[]>(SETTING_CUSTOM_SCRIPTS) || []).filter(s => s.type === ScriptType.Content || !s.type),
         isInitialized: await Template.isInitialized(),
         modifiedDateUpdate: Settings.get(SETTING_AUTO_UPDATE_DATE) || false,
         writingSettingsEnabled: this.isWritingSettingsEnabled() || false,
@@ -430,7 +421,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
     });
   }
@@ -479,6 +471,40 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     }
   }
 
+  /**
+   * Update the tags in the current document
+   * @param data 
+   */
+  private updateCustomTaxonomy(data: CustomTaxonomyData) {
+    if (!data?.id || !data?.name) {
+      return;
+    }
+
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return "";
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+    if (article && article.data) {
+      article.data[data.name] = data.options || [];
+      ArticleHelper.update(editor, article);
+      this.pushMetadata(article!.data);
+    }
+  }
+
+  /**
+   * Add tag to the settings
+   * @param data 
+   */
+  private async addCustomTaxonomy(data: CustomTaxonomyData) {
+    if (!data?.id || !data?.option) {
+      return;
+    }
+
+    await Settings.updateCustomTaxonomy(data.id, data.option);
+  }
+
   /**
    * Add tag to the settings
    * @param tagType 
@@ -502,6 +528,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 +545,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 +583,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;
@@ -633,7 +698,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
 
     const nonce = WebviewHelper.getNonce();
 
-    const version = Extension.getInstance().getVersion();
+    const ext = Extension.getInstance();
+    const version = ext.getVersion();
+    const isBeta = ext.isBetaVersion();
 
     return `
       <!DOCTYPE html>
@@ -648,7 +715,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         <title>Front Matter</title>
       </head>
       <body>
-        <div id="app"></div>
+        <div id="app" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" ></div>
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`panel-${version.installedVersion}`}" alt="Daily usage" />
 

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; };
@@ -44,6 +45,10 @@ export async function activate(context: vscode.ExtensionContext) {
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboard, (data?: DashboardData) => {
 		Dashboard.open(data);
 	}));
+	
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardClose, (data?: DashboardData) => {
+		Dashboard.close();
+	}));
 
 	if (!extension.getVersion().usedVersion) {
 		vscode.commands.executeCommand(COMMAND_NAME.dashboard);
@@ -125,7 +130,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 +180,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

@@ -1,17 +1,20 @@
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/ContentType';
-import { ContentType } from './../models/PanelSettings';
 import * as vscode from 'vscode';
 import * as matter from "gray-matter";
 import * as fs from "fs";
-import { DefaultFields, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES } from '../constants';
+import { DefaultFields, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { DumpOptions } from 'js-yaml';
 import { TomlEngine, getFmLanguage, getFormatOpts } from './TomlEngine';
 import { Settings } from '.';
-import { parse } from 'date-fns';
+import { format, parse } from 'date-fns';
 import { Notifications } from './Notifications';
 import { Article } from '../commands';
-import { basename } from 'path';
+import { basename, join } from 'path';
 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 {
   
@@ -29,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);
   }
 
   /**
@@ -88,11 +91,13 @@ export class ArticleHelper {
         }
       }
     }
-
+    
     return matter.stringify(content, data, ({
       ...TomlEngine,
       ...langOpts,
       noArrayIndent: !indentArray,
+      skipInvalid: true,
+      noCompatMode: true,
       lineWidth: 500,
       indent: spaces || 2
     } as DumpOptions as any));
@@ -164,12 +169,63 @@ export class ArticleHelper {
     return metadata;
   }
 
+  /**
+   * Sanitize the value
+   * @param value 
+   * @returns 
+   */
+  public static sanitize(value: string): string {
+    return sanitize(value.toLowerCase().replace(/ /g, "-"));
+  }
+
+  /**
+   * Create the file or folder for the new content
+   * @param contentType 
+   * @param folderPath 
+   * @param titleValue 
+   * @returns The new file path
+   */
+  public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string): string | undefined {
+    const prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
+    
+    // Name of the file or folder to create
+    const sanitizedName = ArticleHelper.sanitize(titleValue);
+    let newFilePath: string | undefined;
+
+    // Create a folder with the `index.md` file
+    if (contentType?.pageBundle) {
+      const newFolder = join(folderPath, sanitizedName);
+      if (existsSync(newFolder)) {
+        Notifications.error(`A page bundle with the name ${sanitizedName} already exists in ${folderPath}`);
+        return;
+      } else {
+        mkdirSync(newFolder);
+        newFilePath = join(newFolder, `index.md`);
+      }
+    } else {
+      let newFileName = `${sanitizedName}.md`;
+
+      if (prefix && typeof prefix === "string") {
+        newFileName = `${format(new Date(), DateHelper.formatUpdate(prefix) as string)}-${newFileName}`;
+      }
+      
+      newFilePath = join(folderPath, newFileName);
+
+      if (existsSync(newFilePath)) {
+        Notifications.warning(`Content with the title already exists. Please specify a new title.`);
+        return;
+      }
+    }
+
+    return newFilePath;
+  }
+
   /**
    * Parse a markdown file and its front matter
    * @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);
       
@@ -197,19 +253,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,19 +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 sanitize from '../helpers/Sanitize';
-import { format } from "date-fns";
-import { join } from "path";
-import { existsSync, 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 
@@ -51,27 +91,18 @@ export class ContentType {
   }
 
   private static async create(contentType: IContentType, folderPath: string) {
-    const prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
 
     const titleValue = await Questions.ContentTitle();
     if (!titleValue) {
       return;
     }
 
-    const sanitizedName = sanitize(titleValue.toLowerCase().replace(/ /g, "-"));
-    let newFileName = `${sanitizedName}.md`;
-
-    if (prefix && typeof prefix === "string") {
-      newFileName = `${format(new Date(), prefix)}-${newFileName}`;
-    }
-
-    const newFilePath = join(folderPath, newFileName);
-    if (existsSync(newFilePath)) {
-      Notifications.warning(`Content with the title already exists. Please specify a new title.`);
+    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue);
+    if (!newFilePath) {
       return;
     }
 
-    const data: any = {};
+    let data: any = {};
 
     for (const field of contentType.fields) {
       if (field.name === "title") {
@@ -81,6 +112,8 @@ export class ContentType {
       }
     }
 
+    data = ArticleHelper.updateDates(Object.assign({}, data));
+
     if (contentType.name !== DEFAULT_CONTENT_TYPE_NAME) {
       data['type'] = contentType.name;
     }

src/helpers/CustomScript.ts

@@ -0,0 +1,157 @@
+import { CustomScript as ICustomScript, ScriptType } 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';
+import { Dashboard } from '../commands/Dashboard';
+import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
+
+export class CustomScript {
+
+  public static async run(script: ICustomScript, path: string | null = null): Promise<void> {
+    const wsFolder = Folders.getWorkspaceFolder();
+
+    if (wsFolder) {
+      const wsPath = wsFolder.fsPath;
+
+      if (script.type === ScriptType.MediaFile || script.type === ScriptType.MediaFolder) {
+        CustomScript.runMediaScript(wsPath, path, script);
+      } else {
+        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 runMediaScript(wsPath: string, path: string | null, script: ICustomScript): Promise<void>  {
+    if (!path) {
+      Notifications.error(`${script.title}: There was no folder or media path specified.`);
+      return;
+    }
+
+    return new Promise((resolve, reject) => {
+      window.withProgress({
+        location: ProgressLocation.Notification,
+        title: `Executing: ${script.title}`,
+        cancellable: false
+      }, async () => {
+        exec(`${script.nodeBin || "node"} ${join(wsPath, script.script)} "${wsPath}" "${path}"`, (error, stdout) => {
+          if (error) {
+            Notifications.error(`${script.title}: ${error.message}`);
+            resolve();
+            return;
+          }
+  
+          CustomScript.showOutput(stdout, script);
+  
+          Dashboard.postWebviewMessage({ 
+            command: DashboardCommand.mediaUpdate
+          });
+  
+          resolve();
+          return;
+        });
+      });
+    });
+  }
+
+  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

@@ -0,0 +1,74 @@
+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;
+    }
+
+    if (date instanceof Date) {
+      return date;
+    }
+
+    if (typeof date === 'string') {
+      const jsonParsed = DateHelper.tryParseJson(date);
+      if (DateHelper.isValid(jsonParsed)) {
+        return jsonParsed;
+      }
+
+      const isoParsed = DateHelper.tryParseIso(date);
+      if (DateHelper.isValid(isoParsed)) {
+        return isoParsed;
+      }
+
+      if (format) {
+        const formatParsed = DateHelper.tryFormatParse(date, format);
+        if (DateHelper.isValid(formatParsed)) {
+          return formatParsed;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  public static isValid(date: any): boolean {
+    return date instanceof Date && !isNaN(date?.getTime());
+  }
+
+  public static tryFormatParse(date: string, format: string): Date | null {
+    try {
+      return parse(date, format, new Date());
+    } catch (err) {
+      return null;
+    }
+  }
+
+  public static tryParseJson(date: string): Date | null {
+    try {
+      return parseJSON(date);
+    } catch (err) {
+      return null;
+    }
+  }
+
+  public static tryParseIso(date: string): Date | null {
+    try {
+      return parseISO(date);
+    } catch (err) {
+      return null;
+    }
+  }
+}

src/helpers/Extension.ts

@@ -97,6 +97,10 @@ export class Extension {
       return;
     }
 
+    if (!versionInfo.usedVersion) {
+      return;
+    }
+
     // Split semantic version
     const version = versionInfo.usedVersion.split('.');
     const major = parseInt(version[0]);
@@ -111,7 +115,7 @@ export class Extension {
         const projectFolder = basename(workspace?.fsPath || "");
 
         const paths = folders.map((folder: any) => ({
-          title: folder.title,
+          ...folder,
           path: `${WORKSPACE_PLACEHOLDER}${folder.fsPath.split(projectFolder).slice(1).join('')}`.split('\\').join('/')
         }));
 

src/helpers/FilesHelper.ts

@@ -1,15 +1,15 @@
-import * as vscode from 'vscode';
 import { Notifications } from './Notifications';
+import { Uri, workspace } from 'vscode';
 
 export class FilesHelper {
 
   /**
    * Retrieve all markdown files from the current project
    */
-  public static async getMdFiles(): Promise<vscode.Uri[] | null> {
-    const mdFiles = await vscode.workspace.findFiles('**/*.md', "**/node_modules/**,**/archetypes/**");
-    const markdownFiles = await vscode.workspace.findFiles('**/*.markdown', "**/node_modules/**,**/archetypes/**");
-    const mdxFiles = await vscode.workspace.findFiles('**/*.mdx', "**/node_modules/**,**/archetypes/**");
+  public static async getMdFiles(): Promise<Uri[] | null> {
+    const mdFiles = await workspace.findFiles('**/*.md', "**/node_modules/**,**/archetypes/**");
+    const markdownFiles = await workspace.findFiles('**/*.markdown', "**/node_modules/**,**/archetypes/**");
+    const mdxFiles = await workspace.findFiles('**/*.mdx', "**/node_modules/**,**/archetypes/**");
     if (!mdFiles && !markdownFiles) {
       Notifications.info(`No MD files found.`);
       return 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/MediaLibrary.ts

@@ -1,3 +1,4 @@
+
 import { Dashboard } from '../commands/Dashboard';
 import { workspace } from 'vscode';
 import { JsonDB } from 'node-json-db/dist/JsonDB';
@@ -14,11 +15,15 @@ interface MediaRecord {
 }
 
 export class MediaLibrary {
-  private db: JsonDB;
+  private db: JsonDB | undefined;
   private static instance: MediaLibrary;
 
   private constructor() {
     const wsFolder = Folders.getWorkspaceFolder();
+    if (!wsFolder) {
+      return;
+    }
+
     this.db = new JsonDB(join(parseWinPath(wsFolder?.fsPath || ""), LocalStore.rootFolder, LocalStore.contentFolder, LocalStore.mediaDatabaseFile), true, false, '/');
 
     workspace.onDidRenameFiles(e => {
@@ -46,7 +51,7 @@ export class MediaLibrary {
   public get(id: string): MediaRecord | undefined {
     try {
       const fileId = this.parsePath(id);
-      if (this.db.exists(fileId)) {
+      if (this.db?.exists(fileId)) {
         return this.db.getData(fileId);
       } 
       return undefined;
@@ -57,16 +62,16 @@ export class MediaLibrary {
 
   public set(id: string, metadata: any): void {
     const fileId = this.parsePath(id);
-    this.db.push(fileId, metadata, true);
+    this.db?.push(fileId, metadata, true);
   }
 
   public rename(oldId: string, newId: string): void {
     const fileId = this.parsePath(oldId);
     const newFileId = this.parsePath(newId);
-    const data = this.db.getData(fileId);
+    const data = this.db?.getData(fileId);
     if (data) {
-      this.db.delete(fileId);
-      this.db.push(newFileId, data, true);
+      this.db?.delete(fileId);
+      this.db?.push(newFileId, data, true);
     }
   }
 

src/helpers/Questions.ts

@@ -5,6 +5,16 @@ import { Notifications } from './Notifications';
 
 export class Questions {
 
+  /**
+   * Yes/No question
+   * @param placeholder 
+   * @returns 
+   */
+  public static async yesOrNo(placeholder: string) {
+    const answer = await window.showQuickPick(["yes", "no"], {  canPickMany: false, placeHolder: placeholder, ignoreFocusOut: false });
+    return answer === "yes";
+  }
+
   /**
    * Specify the name of the content to create
    * @param showWarning 

src/helpers/SettingsHelper.ts

@@ -1,8 +1,8 @@
 import { Notifications } from './Notifications';
 import { commands, Uri, workspace, window } from 'vscode';
 import * as vscode from 'vscode';
-import { ContentType, TaxonomyType } from '../models';
-import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, CONFIG_KEY, CONTEXT, SETTINGS_CONTENT_STATIC_FOLDER, ExtensionState } from '../constants';
+import { ContentType, CustomTaxonomy, TaxonomyType } from '../models';
+import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, CONFIG_KEY, CONTEXT, ExtensionState, SETTING_TAXONOMY_CUSTOM } from '../constants';
 import { Folders } from '../commands/Folders';
 import { join, basename } from 'path';
 import { existsSync, readFileSync, watch, writeFileSync } from 'fs';
@@ -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");
           }
         });
       }
@@ -136,7 +136,7 @@ export class Settings {
         Settings.globalConfig = JSON.parse(localConfig);
         Settings.globalConfig[`${CONFIG_KEY}.${name}`] = value;
         writeFileSync(fmConfig, JSON.stringify(Settings.globalConfig, null, 2), 'utf8');
-
+        
         const workspaceSettingValue = Settings.hasWorkspaceSettings<ContentType[]>(name);
         if (workspaceSettingValue) {
           await Settings.update(name, undefined);
@@ -203,6 +203,32 @@ export class Settings {
     await Settings.update(configSetting, options, true);
   }
 
+  /**
+   * Update the custom taxonomy settings
+   * 
+   * @param config 
+   * @param type 
+   * @param options 
+   */
+  public static async updateCustomTaxonomy(id: string, option: string) {
+    const customTaxonomies = Settings.get<CustomTaxonomy[]>(SETTING_TAXONOMY_CUSTOM, true) || [];
+    let taxIdx = customTaxonomies?.findIndex(o => o.id === id);
+
+    if (taxIdx === -1) {
+      customTaxonomies.push({
+        id,
+        options: []
+      } as CustomTaxonomy);
+
+      taxIdx = customTaxonomies?.findIndex(o => o.id === id);
+    }
+
+    customTaxonomies[taxIdx].options.push(option);
+    customTaxonomies[taxIdx].options = [...new Set(customTaxonomies[taxIdx].options)];
+    customTaxonomies[taxIdx].options = customTaxonomies[taxIdx].options.sort().filter(o => !!o);
+    await Settings.update(SETTING_TAXONOMY_CUSTOM, customTaxonomies, true);
+  }
+
   /**
    * Promote settings from local to team level
    */

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/helpers/Sorting.ts

@@ -0,0 +1,47 @@
+import { DateHelper } from "./DateHelper";
+
+
+export class Sorting {
+  
+  /**
+   * Sort field value alphabetically
+   * @param property 
+   * @returns 
+   */
+  public static alphabetically = (property: string) => {
+    return (a: any, b: any) => {
+      if (a[property] < b[property]) {
+        return -1;
+      }
+      if (a[property] > b[property]) {
+        return 1;
+      }
+      return 0;
+    };
+  };
+
+  /**
+   * Sort by date
+   * @param property 
+   * @returns 
+   */
+  public static date = (property: string) => {
+    return (a: any, b: any) => {
+      const dateA = DateHelper.tryParse(a[property]);
+      const dateB = DateHelper.tryParse(b[property]);
+
+      return (dateA || new Date(0)).getTime() - (dateB || new Date(0)).getTime();
+    };
+  };
+
+  /**
+   * Sort by number
+   * @param property 
+   * @returns 
+   */
+  public static number = (property: string) => {
+    return (a: any, b: any) => {
+      return a[property] - b[property];
+    };
+  };
+}

src/models/ContentFolder.ts

@@ -1,4 +1,6 @@
 export interface ContentFolder {
   title: string;
   path: string;
+  
+  excludeSubdir?: boolean;
 }

src/models/CustomTaxonomyData.ts

@@ -0,0 +1,7 @@
+
+export interface CustomTaxonomyData {
+  id: string | undefined;
+  name: string | undefined;
+  options?: string[] | undefined;
+  option?: string | undefined;
+}

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/MediaPaths.ts

@@ -1,4 +1,3 @@
-import { Stats } from "fs";
 import { ISizeCalculationResult } from "image-size/dist/types/interface";
 
 export interface MediaPaths { 
@@ -11,8 +10,10 @@ export interface MediaPaths {
 export interface MediaInfo {
   fsPath: string; 
   vsPath: string | undefined;
-  stats: Stats | undefined;
-  dimensions: ISizeCalculationResult | undefined;
+  dimensions?: ISizeCalculationResult | undefined;
   caption?: string | undefined;
   alt?: string | undefined;
+  mtime?: Date;
+  ctime?: Date;
+  size?: number;
 }

src/models/PanelSettings.ts

@@ -1,4 +1,5 @@
-import { FileType } from "vscode";
+import { FileStat } from "vscode";
+import { DraftField } from ".";
 import { Choice } from "./Choice";
 import { DashboardData } from "./DashboardData";
 
@@ -8,6 +9,7 @@ export interface PanelSettings {
   tags: string[];
   date: DateInfo;
   categories: string[];
+  customTaxonomy: CustomTaxonomy[];
   freeform: boolean;
   scripts: CustomScript[];
   isInitialized: boolean;
@@ -17,22 +19,27 @@ export interface PanelSettings {
   preview: PreviewSettings;
   contentTypes: ContentType[];
   dashboardViewData: DashboardData | undefined;
+  draftField: DraftField;
 }
 
 export interface ContentType {
   name: string;
   fields: Field[];
+
+  previewPath?: string | null;
+  pageBundle?: boolean;
 }
 
 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" | "taxonomy";
   choices?: string[] | Choice[];
   single?: boolean;
   multiple?: boolean;
   isPreviewImage?: boolean;
   hidden?: boolean;
+  taxonomyId?: string;
 }
 
 export interface DateInfo {
@@ -41,6 +48,7 @@ export interface DateInfo {
 
 export interface SEO {
   title: number;
+  slug: number;
   description: number;
   content: number;
   descriptionField: string;
@@ -57,11 +65,7 @@ export interface FolderInfo {
   lastModified: FileInfo[];
 }
 
-export interface FileInfo {
-  type: FileType;
-  ctime: number;
-  mtime: number;
-  size: number;
+export interface FileInfo extends FileStat {
   filePath: string;
   fileName: string;
 };
@@ -70,9 +74,24 @@ export interface CustomScript {
   title: string;
   script: string;
   nodeBin?: string;
+  bulk?: boolean;
+  output?: "notification" | "editor";
+  outputType?: string;
+  type?: ScriptType;
 }
 
 export interface PreviewSettings {
   host: string | undefined;
   pathname: string | undefined;
+}
+
+export interface CustomTaxonomy {
+  id: string;
+  options: string[];
+}
+
+export enum ScriptType {
+  Content = "content",
+  MediaFolder = "mediaFolder",
+  MediaFile = "mediaFile"
 }

src/models/SortOrder.ts

@@ -0,0 +1,4 @@
+export enum SortOrder {
+  asc = 'asc',
+  desc = 'desc'
+}

src/models/SortType.ts

@@ -0,0 +1,4 @@
+export enum SortType {
+  string = 'string',
+  date = 'date'
+}

src/models/SortingSetting.ts

@@ -0,0 +1,9 @@
+import { SortOrder, SortType } from ".";
+
+export interface SortingSetting {
+  title: string;
+  name: string;
+  order: SortOrder;
+  type: SortType;
+  id?: string;
+}

src/models/index.ts

@@ -1,4 +1,13 @@
+export * from './Choice';
 export * from './ContentFolder';
+export * from './CustomTaxonomyData';
+export * from './DashboardData';
+export * from './DraftField';
+export * from './Framework';
+export * from './MediaPaths';
 export * from './PanelSettings';
+export * from './SortOrder';
+export * from './SortType';
+export * from './SortingSetting';
 export * from './TaxonomyType';
 export * from './VersionInfo';

src/panelWebView/CommandToCode.ts

@@ -26,4 +26,6 @@ export enum CommandToCode {
   updateMetadata = "update-metadata",
   openDashboard = "open-dashboard",
   selectImage = "select-image",
+  updateCustomTaxonomy = "updateCustomTaxonomy",
+  addToCustomTaxonomy = "addToCustomTaxonomy",
 }

src/panelWebView/TagType.ts

@@ -1,5 +1,6 @@
 export enum TagType {
   tags = "Tags",
   categories = "Categories",
-  keywords = "Keywords"
+  keywords = "Keywords",
+  custom = "Custom"
 }

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);
@@ -27,6 +27,10 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, fol
     MessageHelper.sendMessage(CommandToCode.createContent);
   };
 
+  const openPreview = () => {
+    MessageHelper.sendMessage(CommandToCode.openPreview);
+  };
+
   return (
     <div className="frontmatter">
       <div className={`ext_actions`}>
@@ -37,6 +41,7 @@ export const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, fol
             <button onClick={openDashboard}>Open dashboard</button>
             <button onClick={initProject} disabled={settings?.isInitialized}>Initialize project</button>
             <button onClick={createContent} disabled={!settings?.isInitialized}>Create new content</button>
+            <button onClick={openPreview} disabled={!settings?.preview?.host}>Open site preview</button>
           </div>
         </Collapsible>
         
@@ -48,4 +53,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/ErrorBoundary/FieldBoundary.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import * as Sentry from "@sentry/react";
+import { VsLabel } from '../VscodeComponents';
+
+export interface IFieldBoundaryProps {
+  fieldName: string;
+}
+
+export interface IFieldBoundaryState {
+  hasError: boolean;
+}
+
+export default class FieldBoundary extends React.Component<IFieldBoundaryProps, IFieldBoundaryState> {
+
+  constructor(props: IFieldBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  public static getDerivedStateFromError(error: any) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: any, errorInfo: any) {
+    Sentry.captureMessage(`Field boundary: ${error?.message || error}`);
+  }
+
+  public render(): React.ReactElement<IFieldBoundaryProps> {
+    if (this.state.hasError) {
+      return (
+        <div className={`metadata_field`}>
+          <VsLabel>
+            <div className={`metadata_field__label`}>
+              <span style={{ lineHeight: "16px"}}>{this.props.fieldName}</span>
+            </div>
+          </VsLabel>
+          <div className={`metadata_field__error`}>
+            <span>Error loading field</span>
+
+            <button onClick={() => this.setState({ hasError: false })}>Retry</button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children as any; 
+  }
+}

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -3,6 +3,7 @@ import { VsLabel } from '../VscodeComponents';
 import { ClockIcon } from '@heroicons/react/outline';
 import DatePicker from 'react-datepicker';
 import { forwardRef } from 'react';
+import { DateHelper } from '../../../helpers/DateHelper';
 
 export interface IDateTimeFieldProps {
   label: string;
@@ -22,19 +23,22 @@ 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>(date);
+  const [ dateValue, setDateValue ] = React.useState<Date | null>(null);
+
+  React.useEffect(() => {
+    const crntValue = DateHelper.tryParse(date, format);
+    const stateValue = DateHelper.tryParse(dateValue, format);
+
+    if (crntValue?.toISOString() !== stateValue?.toISOString()) {
+      setDateValue(date);
+    }
+  }, [ date ]);
   
   const onDateChange = (date: Date) => {
     setDateValue(date);
     onChange(date);
   };
 
-  React.useEffect(() => {
-    if (dateValue?.toISOString() !== date?.toISOString()) {
-      setDateValue(date);
-    }
-  }, [ date ]);
-
   return (
     <div className={`metadata_field`}>
       <VsLabel>
@@ -45,10 +49,10 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({lab
       
       <div className={`metadata_field__datetime`}>
         <DatePicker
-          selected={dateValue as Date}
+          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;
+};