Merge pull request #184 from estruyf/dev

Merge branch 'dev' of github.com:estruyf/vscode-front-matter into dev
Updated changelog for new 5.6.0 release
2026-05-15 05:45:43 +02:00 · 2021-11-23 20:02:10 +01:00 · 2021-11-23 20:00:04 +01:00 · 2021-11-23 19:59:11 +01:00 · 2021-11-23 19:56:13 +01:00 · 2021-11-22 17:12:29 +01:00
167 changed files with 4979 additions and 1270 deletions
@@ -0,0 +1,7 @@
+---
+name: Feedback
+about: Tell more on what you think
+title: 'Feedback: '
+labels: ''
+assignees: ''
+---
@@ -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 }}
+
@@ -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 }}
@@ -17,4 +17,8 @@ postcss.config.js
 .templates
 .github
 scripts
-.all-contributorsrc
+.all-contributorsrc
+assets/v2.*
+assets/v3.*
+assets/v4.*
+assets/sponsors
@@ -1,5 +1,120 @@
 # 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
+
+- [#113](https://github.com/estruyf/vscode-front-matter/issues/113): Integrating a local DB for media metadata (caption, alt)
+- [#132](https://github.com/estruyf/vscode-front-matter/issues/132): Major changes to the media dashboard which allows you to navigate through all folders
+
+### 🎨 Enhancements
+
+- [#110](https://github.com/estruyf/vscode-front-matter/issues/110): Add support for workspaces with multiple folders
+- [#117](https://github.com/estruyf/vscode-front-matter/issues/117): Allow to specify a singleline of text in the metadata fields
+- [#119](https://github.com/estruyf/vscode-front-matter/issues/119): Multi-select support for choice fields
+- [#121](https://github.com/estruyf/vscode-front-matter/issues/121): Choice fields support ID/title objects as well as a regular string
+- [#122](https://github.com/estruyf/vscode-front-matter/issues/122): Update the filenames of your media
+- [#124](https://github.com/estruyf/vscode-front-matter/issues/124): Add new `isPreviewImage` property to the content type field to specify custom preview images
+- [#126](https://github.com/estruyf/vscode-front-matter/issues/126): Create new content from the available content types
+- [#127](https://github.com/estruyf/vscode-front-matter/issues/127): Title bar action added to open the dashboard
+- [#128](https://github.com/estruyf/vscode-front-matter/issues/128): Support for multi-select on image fields added
+- [#131](https://github.com/estruyf/vscode-front-matter/issues/131): Folder creation support added on media dashboard
+- [#134](https://github.com/estruyf/vscode-front-matter/issues/134): On startup, the extension checks if local settings can be promoted
+- [#135](https://github.com/estruyf/vscode-front-matter/issues/135): `Hidden` property added for field configuration
+- [#137](https://github.com/estruyf/vscode-front-matter/issues/137): Ask to move the `.templates` folder to the new `.frontmatter` folder
+
+### 🐞 Fixes
+
+- [#120](https://github.com/estruyf/vscode-front-matter/issues/120): Choice and number field not updating when set manually in front matter of the file
+- [#133](https://github.com/estruyf/vscode-front-matter/issues/133): Fix for overriding default content type settings
+
 ## [4.0.1] - 2021-09-24

 - [#114](https://github.com/estruyf/vscode-front-matter/issues/114): Fix for categories/tags provided as string in YAML
@@ -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).
@@ -96,18 +100,28 @@ If you have the courage to test out the beta features, we made available a beta

 ## 👉 Contributors 🤘

-<a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
-</a>
+<p align="center">
+  <a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
+    <img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
+  </a>
+</p>
+
+## 🖤 Sponsors 👇 🤘
+
+<p align="center">
+  <a href="https://github.com/timschps" title="Tim Schaeps">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
+   </a>
+  <a href="https://github.com/flikteoh" title="FlikTeoh">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
+  </a>
+</p>

 <br />
-<br />
-
-## 🖤 Sponsors

 <p align="center">
  <a href="https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss">
-      <img src="assets/sponsors/powered-by-vercel.png" />
+    <img src="assets/sponsors/powered-by-vercel.png" />
   </a>
 </p>

@@ -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).
@@ -94,18 +98,28 @@ If you have the courage to test out the beta features, we made available a beta

 ## 👉 Contributors 🤘

-<a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
-</a>
+<p align="center">
+  <a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
+    <img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
+  </a>
+</p>
+
+## 🖤 Sponsors 👇 🤘
+
+<p align="center">
+  <a href="https://github.com/timschps" title="Tim Schaeps">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
+   </a>
+  <a href="https://github.com/flikteoh" title="FlikTeoh">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
+  </a>
+</p>

 <br />
-<br />
-
-## 🖤 Sponsors

 <p align="center">
  <a href="https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss">
-      <img src="assets/sponsors/powered-by-vercel.png" />
+    <img src="assets/sponsors/powered-by-vercel.png" />
   </a>
 </p>

@@ -1,40 +1 @@
-<?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 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
-	.st3{fill:none;}
-</style>
-<g class="st0">
-	<path class="st1" d="M4,11.4H2.2V2.9h3.2v2H4v1.2h1.3V8H4V11.4z"/>
-	<path class="st1" d="M10.9,11.4H9l-0.9-3c0-0.1,0-0.1,0-0.2C8,8.1,8,8,7.9,7.8v0.6v3H6.1V2.9H8c0.8,0,1.4,0.2,1.9,0.6
-		c0.5,0.5,0.8,1.3,0.8,2.2c0,1-0.4,1.7-1.1,2.1L10.9,11.4z M8,6.8h0.1c0.2,0,0.4-0.1,0.5-0.3C8.7,6.3,8.8,6,8.8,5.7
-		c0-0.6-0.3-1-0.8-1l0,0V6.8z"/>
-	<path class="st1" d="M16.5,7.2c0,1.3-0.2,2.4-0.7,3.2c-0.5,0.8-1.1,1.2-1.8,1.2s-1.2-0.3-1.7-0.9c-0.6-0.8-0.9-2-0.9-3.5
-		s0.3-2.7,0.9-3.5c0.5-0.6,1-0.9,1.7-0.9c0.8,0,1.4,0.4,1.9,1.2C16.2,4.7,16.5,5.8,16.5,7.2z M14.6,7.2c0-1.5-0.2-2.3-0.7-2.3
-		c-0.2,0-0.4,0.2-0.5,0.6s-0.2,0.9-0.2,1.7c0,0.7,0.1,1.3,0.2,1.7c0.1,0.4,0.3,0.6,0.5,0.6s0.4-0.2,0.5-0.6
-		C14.5,8.4,14.6,7.9,14.6,7.2z"/>
-	<path class="st1" d="M17.2,11.4V2.9H19l0.9,3C20,6,20,6.2,20.1,6.5c0.1,0.2,0.1,0.5,0.2,0.8L20.5,8c-0.1-0.7-0.1-1.4-0.2-1.9
-		s-0.1-1-0.1-1.3V2.9H22v8.5h-1.7l-0.9-3.1c-0.1-0.3-0.2-0.6-0.3-0.9S19,6.8,18.9,6.6c0,0.6,0.1,1.1,0.1,1.6c0,0.4,0,0.8,0,1.2v2.2
-		h-1.8V11.4z"/>
-	<path class="st1" d="M25.3,11.4h-1.8V4.9h-1v-2h3.9v2h-1.1V11.4z"/>
-</g>
-<rect class="st2" width="28" height="28"/>
-<g class="st0">
-	<path class="st1" d="M2.9,17h0.9l0.6,3c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.8,0.2,1.2c0-0.1,0-0.1,0-0.1v-0.1L5,21.3l0.1-0.8
-		L5.2,20l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3s0-0.2,0-0.2v-1v-0.9l0,0c0,0,0,0,0-0.1v0.2c0,0.2,0,0.3-0.1,0.5
-		s0,0.2-0.1,0.3l-0.1,0.7v0.3l-0.6,3.3H4.5l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2l-0.3,5.2h-1L2.9,17z"/>
-	<path class="st1" d="M9.3,17h0.8l1.6,7.5h-1L10.4,23H8.9l-0.3,1.5h-1L9.3,17z M10.3,22.2L10,21c-0.1-0.8-0.3-1.7-0.4-2.6
-		c0,0.5-0.1,0.9-0.2,1.4c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1L10.3,22.2L10.3,22.2z"/>
-	<path class="st1" d="M11.5,17h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V17z"/>
-	<path class="st1" d="M14.8,17h3.3v0.9H17v6.7h-1v-6.7h-1.2V17z"/>
-	<path class="st1" d="M18.7,17h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V17z"/>
-	<path class="st1" d="M22.3,17h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6
-		l1.4,3.7h-1l-1.4-3.7v3.7h-1L22.3,17L22.3,17z M23.3,20.3c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6
-		s-0.1-0.3-0.2-0.4s-0.2-0.2-0.3-0.2c-0.1,0-0.3-0.1-0.4-0.1h-0.2v2.5H23.3z"/>
-</g>
-<rect x="-33.5" y="14" class="st3" width="8.6" height="14"/>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#ffffff;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#ffffff"/></svg>
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#01aeb7"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#01aeb7" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#01aeb7"/></svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#AD0670;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#AD0670"/></svg>
@@ -1,44 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.0, 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 28 28" style="color:#ad0670" xml:space="preserve">
-	<style type="text/css">
-		.st1 {
-			fill: none;
-			stroke: #ad0670;
-			stroke-width: 2;
-			stroke-miterlimit: 10;
-		}
-	</style>
-
-	<g class="st0">
-		<path fill="currentcolor" d="M4,11.4H2.2V2.9h3.2v2H4v1.2h1.3V8H4V11.4z" />
-		<path fill="currentcolor" d="M10.9,11.4H9l-0.9-3c0-0.1,0-0.1,0-0.2C8,8.1,8,8,7.9,7.8l0,0.6v3H6.1V2.9H8c0.8,0,1.4,0.2,1.9,0.6
-		c0.5,0.5,0.8,1.3,0.8,2.2c0,1-0.4,1.7-1.1,2.1L10.9,11.4z M8,6.8h0.1c0.2,0,0.4-0.1,0.5-0.3C8.7,6.3,8.8,6,8.8,5.7
-		c0-0.6-0.3-1-0.8-1H8V6.8z" />
-		<path fill="currentcolor" d="M16.5,7.2c0,1.3-0.2,2.4-0.7,3.2c-0.5,0.8-1.1,1.2-1.8,1.2c-0.7,0-1.2-0.3-1.7-0.9c-0.6-0.8-0.9-2-0.9-3.5
-		c0-1.5,0.3-2.7,0.9-3.5c0.5-0.6,1-0.9,1.7-0.9c0.8,0,1.4,0.4,1.9,1.2C16.2,4.7,16.5,5.8,16.5,7.2z M14.6,7.2c0-1.5-0.2-2.3-0.7-2.3
-		c-0.2,0-0.4,0.2-0.5,0.6c-0.1,0.4-0.2,0.9-0.2,1.7c0,0.7,0.1,1.3,0.2,1.7c0.1,0.4,0.3,0.6,0.5,0.6c0.2,0,0.4-0.2,0.5-0.6
-		C14.5,8.4,14.6,7.9,14.6,7.2z" />
-		<path fill="currentcolor" d="M17.2,11.4V2.9H19l0.9,3C20,6,20,6.2,20.1,6.5c0.1,0.2,0.1,0.5,0.2,0.8L20.5,8c-0.1-0.7-0.1-1.4-0.2-1.9s-0.1-1-0.1-1.3
-		V2.9H22v8.5h-1.7l-0.9-3.1c-0.1-0.3-0.2-0.6-0.3-0.9s-0.1-0.6-0.2-0.8c0,0.6,0.1,1.1,0.1,1.6c0,0.4,0,0.8,0,1.2v2.2H17.2z" />
-		<path fill="currentcolor" d="M25.3,11.4h-1.8V4.9h-1v-2h3.9v2h-1.1V11.4z" />
-	</g>
-
-	<rect class="st1" width="28" height="28" />
-
-	<g class="st0">
-		<path fill="currentcolor" d="M2.9,17h0.9L4.4,20c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.8,0.2,1.2c0-0.1,0-0.1,0-0.1c0,0,0-0.1,0-0.1L5,21.3l0.1-0.8
-		L5.2,20l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3s0-0.2,0-0.2l0-1l0-0.9c0,0,0,0,0,0c0,0,0,0,0-0.1l0,0.2
-		c0,0.2,0,0.3-0.1,0.5s0,0.2-0.1,0.3l-0.1,0.7l0,0.3l-0.6,3.3H4.5l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2
-		l-0.3,5.2h-1L2.9,17z" />
-		<path fill="currentcolor" d="M9.3,17h0.8l1.6,7.5h-1L10.4,23H8.9l-0.3,1.5h-1L9.3,17z M10.3,22.2L10,21c-0.1-0.8-0.3-1.7-0.4-2.6c0,0.5-0.1,0.9-0.2,1.4
-		c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1H10.3z" />
-		<path fill="currentcolor" d="M11.5,17h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V17z" />
-		<path fill="currentcolor" d="M14.8,17h3.3v0.9H17v6.7h-1v-6.7h-1.2V17z" />
-		<path fill="currentcolor" d="M18.7,17h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V17z" />
-		<path fill="currentcolor" d="M22.3,17h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6l1.4,3.7h-1
-		l-1.4-3.7v3.7h-1V17z M23.3,20.3c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6s-0.1-0.3-0.2-0.4
-		s-0.2-0.2-0.3-0.2c-0.1,0-0.3-0.1-0.4-0.1h-0.2V20.3z" />
-	</g>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#AD0670;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#AD0670"/></svg>
@@ -0,0 +1,16 @@
+<?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">
+<style type="text/css">
+	.st0{fill:none;stroke:#02AEB7;stroke-width:50;stroke-miterlimit:10;}
+	.st1{fill:#02AEB7;}
+</style>
+<rect x="25" y="25" class="st0" width="1200" height="1200"/>
+<path class="st1" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path class="st1" 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>
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#02aeb7;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#02aeb7"/></svg>
@@ -1,39 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.0, 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 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st2{fill:none;}
-</style>
-<g class="st0">
-	<path d="M4,11.4H2.2V2.9h3.2v2H4v1.2h1.3V8H4V11.4z"/>
-	<path d="M10.9,11.4H9l-0.9-3c0-0.1,0-0.1,0-0.2C8,8.1,8,8,7.9,7.8l0,0.6v3H6.1V2.9H8c0.8,0,1.4,0.2,1.9,0.6
-		c0.5,0.5,0.8,1.3,0.8,2.2c0,1-0.4,1.7-1.1,2.1L10.9,11.4z M8,6.8h0.1c0.2,0,0.4-0.1,0.5-0.3C8.7,6.3,8.8,6,8.8,5.7
-		c0-0.6-0.3-1-0.8-1H8V6.8z"/>
-	<path d="M16.5,7.2c0,1.3-0.2,2.4-0.7,3.2c-0.5,0.8-1.1,1.2-1.8,1.2c-0.7,0-1.2-0.3-1.7-0.9c-0.6-0.8-0.9-2-0.9-3.5
-		c0-1.5,0.3-2.7,0.9-3.5c0.5-0.6,1-0.9,1.7-0.9c0.8,0,1.4,0.4,1.9,1.2C16.2,4.7,16.5,5.8,16.5,7.2z M14.6,7.2c0-1.5-0.2-2.3-0.7-2.3
-		c-0.2,0-0.4,0.2-0.5,0.6c-0.1,0.4-0.2,0.9-0.2,1.7c0,0.7,0.1,1.3,0.2,1.7c0.1,0.4,0.3,0.6,0.5,0.6c0.2,0,0.4-0.2,0.5-0.6
-		C14.5,8.4,14.6,7.9,14.6,7.2z"/>
-	<path d="M17.2,11.4V2.9H19l0.9,3C20,6,20,6.2,20.1,6.5c0.1,0.2,0.1,0.5,0.2,0.8L20.5,8c-0.1-0.7-0.1-1.4-0.2-1.9s-0.1-1-0.1-1.3
-		V2.9H22v8.5h-1.7l-0.9-3.1c-0.1-0.3-0.2-0.6-0.3-0.9s-0.1-0.6-0.2-0.8c0,0.6,0.1,1.1,0.1,1.6c0,0.4,0,0.8,0,1.2v2.2H17.2z"/>
-	<path d="M25.3,11.4h-1.8V4.9h-1v-2h3.9v2h-1.1V11.4z"/>
-</g>
-<rect class="st1" width="28" height="28"/>
-<g class="st0">
-	<path d="M2.9,17h0.9L4.4,20c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.8,0.2,1.2c0-0.1,0-0.1,0-0.1c0,0,0-0.1,0-0.1L5,21.3l0.1-0.8
-		L5.2,20l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3s0-0.2,0-0.2l0-1l0-0.9c0,0,0,0,0,0c0,0,0,0,0-0.1l0,0.2
-		c0,0.2,0,0.3-0.1,0.5s0,0.2-0.1,0.3l-0.1,0.7l0,0.3l-0.6,3.3H4.5l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2
-		l-0.3,5.2h-1L2.9,17z"/>
-	<path d="M9.3,17h0.8l1.6,7.5h-1L10.4,23H8.9l-0.3,1.5h-1L9.3,17z M10.3,22.2L10,21c-0.1-0.8-0.3-1.7-0.4-2.6c0,0.5-0.1,0.9-0.2,1.4
-		c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1H10.3z"/>
-	<path d="M11.5,17h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V17z"/>
-	<path d="M14.8,17h3.3v0.9H17v6.7h-1v-6.7h-1.2V17z"/>
-	<path d="M18.7,17h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V17z"/>
-	<path d="M22.3,17h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6l1.4,3.7h-1
-		l-1.4-3.7v3.7h-1V17z M23.3,20.3c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6s-0.1-0.3-0.2-0.4
-		s-0.2-0.2-0.3-0.2c-0.1,0-0.3-0.1-0.4-0.1h-0.2V20.3z"/>
-</g>
-<rect x="-33.5" y="14" class="st2" width="8.6" height="14"/>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#000000"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#000000"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#000000"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#000000"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#000000"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#000000"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#000000"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#000000"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#000000"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#000000"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#000000"/></svg>
@@ -1,4 +1,4 @@
-<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#F3EFF5">
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#C5C5C5">
  <path d="M9 9H4v1h5V9z" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" />
 </svg>
@@ -1,4 +1,4 @@
-<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#424242">
  <path d="M9 9H4v1h5V9z" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" />
 </svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#C5C5C5"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#C5C5C5" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#C5C5C5"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="#424242"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#424242"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#424242"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#424242"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#424242"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#424242" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#424242"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#424242"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#424242"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#424242"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#424242"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#424242"/></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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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,26 @@ 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;
 }
@@ -451,17 +490,92 @@ input:checked + .field__toggle__slider:before {
  outline: none !important;
 }

-.metadata_field__choice {
+.metadata_field__choice__toggle {
+  color: var(--vscode-input-placeholderForeground);
  border: 1px solid var(--vscode-inputValidation-infoBorder) !important;
  outline: none !important;
  width: 100%;
  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
-  color: var(--vscode-input-foreground);
+  background-color: var(--vscode-input-background);
+
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.metadata_field__choice__toggle:hover,
+.metadata_field__choice__toggle:focus,
+.metadata_field__choice__toggle:active,
+.metadata_field__choice__toggle:disabled {
  background-color: var(--vscode-input-background);
 }

-.metadata_field__choice::placeholde {
-	color: var(--vscode-input-placeholderForeground);
+.metadata_field__choice__toggle span {
+  margin-right: 1rem;
+}
+
+.metadata_field__choice__toggle svg.icon {
+  height: 1rem;
+  width: 1rem;
+  margin-left: .25rem;
+
+  position: absolute;
+  right: .25rem;
+}
+
+.metadata_field__choice_list {
+  width: 90%;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  position: absolute;
+  list-style: none;
+  overflow: auto;
+  max-height: 200px;
+
+	color: var(--vscode-dropdown-foreground);
+  background-color: var(--vscode-dropdown-background);
+}
+
+.metadata_field__choice_list.open {
+  border: 1px solid rgba(0, 0, 0, .9);
+}
+
+.metadata_field__choice_list li {
+  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+  cursor: pointer;
+}
+
+.metadata_field__choice_list li:active {
+	color: var(--vscode-button-foreground);
+  background-color: var(--vscode-button-background);
+}
+
+.metadata_field__choice_list li[aria-selected="true"] {
+  color: var(--vscode-button-foreground);
+  background-color: var(--vscode-button-hoverBackground);
+}
+
+.metadata_field__choice_list li[aria-disabled="true"] {
+  display: none;
+}
+
+.metadata_field__choice_list__item {
+  opacity: 0.8;
+}
+
+.metadata_field__choice__button {
+  margin-top: .5rem;
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  margin-right: .5rem;
+}
+
+.metadata_field__choice__button_icon {
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-left: .5rem;
 }

 .metadata_field__datetime {
@@ -481,12 +595,56 @@ input:checked + .field__toggle__slider:before {
  width: auto;
 }

+.metadata_field__datetime > button:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
+.metadata_field__multiple_images {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
 .metadata_field__preview_image img {
  display: block;
  margin: 0 auto;
  max-height: 16rem;
 }

+.metadata_field__preview_image__button {
+  background-color: transparent;
+  border: 2px dashed var(--vscode-button-background);
+  padding: 1.5rem;
+  filter: brightness(85%);
+}
+
+.metadata_field__preview_image__button:hover {
+  background-color: rgba(255, 255, 255, .1);
+  filter: brightness(100%);
+}
+
+.metadata_field__preview_image__button svg {
+  color: var(--vscode-foreground);
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto;
+}
+
+.metadata_field__preview_image__button span {
+  color: var(--vscode-foreground);
+  display: inline-block;
+  margin: 0 auto;
+  margin-top: .5rem;
+}
+
+.metadata_field__preview_image__preview {
+  background-color: var(--vscode-button-secondaryBackground);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
 .metadata_field__preview_image__remove {
  background-color: var(--vscode-inputValidation-errorBackground);
  color: var(--vscode-inputValidation-errorForeground);
@@ -1,145 +1,9 @@
 {
 	"name": "vscode-front-matter-beta",
-	"version": "4.0.1",
+	"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",
@@ -268,6 +161,96 @@
 			"integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
 			"dev": true
 		},
+		"@sentry/browser": {
+			"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.3",
+				"@sentry/types": "6.13.3",
+				"@sentry/utils": "6.13.3",
+				"tslib": "^1.9.3"
+			}
+		},
+		"@sentry/core": {
+			"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.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.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.3",
+				"@sentry/utils": "6.13.3",
+				"tslib": "^1.9.3"
+			}
+		},
+		"@sentry/minimal": {
+			"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.3",
+				"@sentry/types": "6.13.3",
+				"tslib": "^1.9.3"
+			}
+		},
+		"@sentry/react": {
+			"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.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.3",
+			"resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.13.3.tgz",
+			"integrity": "sha512-yyOFIhqlprPM0g4f35Icear3eZk2mwyYcGEzljJfY2iU6pJwj1lzia5PfSwiCW7jFGMmlBJNhOAIpfhlliZi8Q==",
+			"dev": true,
+			"requires": {
+				"@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.3",
+			"resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.13.3.tgz",
+			"integrity": "sha512-Vrz5CdhaTRSvCQjSyIFIaV9PodjAVFkzJkTRxyY7P77RcegMsRSsG1yzlvCtA99zG9+e6MfoJOgbOCwuZids5A==",
+			"dev": true
+		},
+		"@sentry/utils": {
+			"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.3",
+				"tslib": "^1.9.3"
+			}
+		},
 		"@tailwindcss/forms": {
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.3.tgz",
@@ -496,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",
@@ -738,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",
@@ -2174,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",
@@ -2873,6 +2851,15 @@
 				"minimalistic-crypto-utils": "^1.0.1"
 			}
 		},
+		"hoist-non-react-statics": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+			"dev": true,
+			"requires": {
+				"react-is": "^16.7.0"
+			}
+		},
 		"homedir-polyfill": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -3085,6 +3072,15 @@
 			"integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
 			"dev": true
 		},
+		"image-size": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz",
+			"integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==",
+			"dev": true,
+			"requires": {
+				"queue": "6.0.2"
+			}
+		},
 		"import-cwd": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -3404,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",
@@ -3537,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",
@@ -4106,6 +4114,23 @@
 				"lodash": "^4.17.21"
 			}
 		},
+		"node-json-db": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/node-json-db/-/node-json-db-1.3.0.tgz",
+			"integrity": "sha512-3IK9KuqfKdK12zFKtzmnD6Y5J9qL0TY0gnnZ5XKpzdhCP019zOxPxGCaH6cmIqiho2ymFgcTMKQeJvYkbBFraQ==",
+			"dev": true,
+			"requires": {
+				"mkdirp": "~1.0.4"
+			},
+			"dependencies": {
+				"mkdirp": {
+					"version": "1.0.4",
+					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+					"dev": true
+				}
+			}
+		},
 		"node-libs-browser": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
@@ -4642,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",
@@ -4791,6 +4811,15 @@
 			"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
 			"dev": true
 		},
+		"queue": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+			"integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+			"dev": true,
+			"requires": {
+				"inherits": "~2.0.3"
+			}
+		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5640,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",
@@ -6164,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",
@@ -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": "4.0.1",
+  "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"
                    },
@@ -268,16 +426,100 @@
                      "type": "array",
                      "description": "Define your choices",
                      "items": {
-                        "type": "string"
+                        "type": [
+                          "object",
+                          "string"
+                        ],
+                        "properties": {
+                          "id": {
+                            "type": [
+                              "null",
+                              "string"
+                            ],
+                            "description": "The choice ID"
+                          },
+                          "title": {
+                            "type": "string",
+                            "description": "The choice title"
+                          }
+                        }
                      }
+                    },
+                    "single": {
+                      "type": "boolean",
+                      "default": false,
+                      "description": "Is a single line field"
+                    },
+                    "multiple": {
+                      "type": "boolean",
+                      "default": false,
+                      "description": "Do you allow to select multiple values?"
+                    },
+                    "isPreviewImage": {
+                      "type": "boolean",
+                      "default": false,
+                      "description": "Specify if the image field can be used as preview. Be aware, you can only have one preview image per content type."
+                    },
+                    "hidden": {
+                      "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,
@@ -289,6 +531,7 @@
          "default": [
            {
              "name": "default",
+              "pageBundle": false,
              "fields": [
                {
                  "title": "Title",
@@ -306,7 +549,7 @@
                  "type": "datetime"
                },
                {
-                  "title": "Article preview",
+                  "title": "Content preview",
                  "name": "preview",
                  "type": "image"
                },
@@ -330,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",
@@ -393,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,
@@ -419,7 +694,7 @@
        },
        "frontMatter.templates.folder": {
          "type": "string",
-          "default": ".templates",
+          "default": ".frontmatter/templates",
          "markdownDescription": "Specify the folder to use for your article templates. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.templates.folder)",
          "scope": "Templates"
        },
@@ -475,7 +750,7 @@
      },
      {
        "command": "frontMatter.generateSlug",
-        "title": "Generate slug based on article title",
+        "title": "Generate slug based on content title",
        "category": "Front matter"
      },
      {
@@ -490,9 +765,12 @@
      },
      {
        "command": "frontMatter.insertImage",
-        "title": "Insert image into article",
+        "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",
@@ -501,17 +779,30 @@
      },
      {
        "command": "frontMatter.createContent",
-        "title": "New article from template",
+        "title": "Create new content from defined content type or template",
        "category": "Front matter"
      },
      {
        "command": "frontMatter.dashboard",
        "title": "Open dashboard",
-        "category": "Front matter"
+        "category": "Front matter",
+        "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",
-        "title": "Preview article",
+        "title": "Preview content",
        "category": "Front matter"
      },
      {
@@ -533,9 +824,19 @@
    "menus": {
      "editor/title": [
        {
-          "when": "resourceLangId == markdown",
          "command": "frontMatter.insertImage",
-          "group": "navigation"
+          "group": "navigation@-99",
+          "when": "resourceLangId == markdown"
+        },
+        {
+          "command": "frontMatter.dashboard",
+          "group": "navigation@-98",
+          "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": [
@@ -583,6 +884,10 @@
        {
          "command": "frontMatter.createFromTemplate",
          "when": "false"
+        },
+        {
+          "command": "frontMatter.dashboard.close",
+          "when": "false"
        }
      ],
      "view/title": [
@@ -616,6 +921,8 @@
    "@headlessui/react": "^1.4.1",
    "@heroicons/react": "1.0.4",
    "@iarna/toml": "2.2.3",
+    "@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",
@@ -627,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",
@@ -636,8 +944,11 @@
    "gray-matter": "4.0.2",
    "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",
    "postcss": "^8.3.6",
    "postcss-loader": "4.3.0",
    "react": "17.0.1",
@@ -651,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": {}
+}
@@ -1,15 +1,16 @@
-import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX } from './../constants/settings';
+import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX, CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX } from './../constants';
 import * as vscode from 'vscode';
 import { TaxonomyType } from "../models";
-import { CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX } from "../constants/settings";
 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 {
@@ -172,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);
@@ -183,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}`);
          }
        }
@@ -191,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
   */
@@ -240,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();
    }
  }

@@ -0,0 +1,31 @@
+import { commands, QuickPickItem, window } from 'vscode'; 
+import { COMMAND_NAME } from '../constants';
+
+export class Content {
+
+  public static async create() {
+
+    const options: QuickPickItem[] = [{
+      label: "Create content by content type",
+      description: "Select if you want to create new content by the available content type(s)"
+    }, {
+      label: "Create content by template",
+      description: "Select if you want to create new content by the available template(s)"
+    } as QuickPickItem];
+
+    const selectedOption = await window.showQuickPick(options, {
+      placeHolder: `Select how you want to create your new content`,
+      canPickMany: false
+    });
+
+    if (selectedOption) {
+      if (selectedOption.label === options[0].label) {
+        commands.executeCommand(COMMAND_NAME.createByContentType);
+      } else {
+        commands.executeCommand(COMMAND_NAME.createByTemplate);
+      }
+    }
+
+    return;
+  }
+}
@@ -1,29 +1,34 @@
-import { SETTINGS_CONTENT_STATIC_FOLDERS, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTINGS_DASHBOARD_OPENONSTART, SETTINGS_DASHBOARD_MEDIA_SNIPPET } from './../constants/settings';
+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 { existsSync, statSync, unlinkSync, writeFileSync } from "fs";
+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';
 import { Page } from '../dashboardWebView/models/Page';
 import { openFileInEditor } from '../helpers/openFileInEditor';
-import { COMMAND_NAME, EXTENSION_STATE_PAGES_VIEW } from '../constants/Extension';
 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';
 import { decodeBase64Image } from '../helpers/decodeBase64Image';
-import { DefaultFields } from '../constants';
 import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
-
+import { MediaLibrary } from '../helpers/MediaLibrary';
+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;
@@ -31,12 +36,13 @@ export class Dashboard {
  private static media: MediaInfo[] = [];
  private static timers: { [folder: string]: any } = {};
  private static _viewData: DashboardData | undefined;
+  private static mediaLib: MediaLibrary;

  public static get viewData(): DashboardData | undefined {
    return Dashboard._viewData;
  }

-  /** 
+  /**
   * Init the dashboard
   */
  public static async init() {
@@ -50,6 +56,8 @@ export class Dashboard {
   * Open or reveal the dashboard
   */
  public static async open(data?: DashboardData) {
+    this.mediaLib = MediaLibrary.getInstance();
+    
    Dashboard._viewData = data;

    if (Dashboard.isOpen) {
@@ -57,6 +65,8 @@ export class Dashboard {
 		} else {
 			Dashboard.create();
 		}
+
+    await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, true);
  }

  /**
@@ -74,6 +84,10 @@ export class Dashboard {
      Dashboard.webview.reveal();
    }
  }
+
+  public static close() {
+    Dashboard.webview?.dispose();
+  }
  
  /**
   * Create the dashboard webview
@@ -94,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) => {
@@ -136,6 +153,12 @@ export class Dashboard {
        case DashboardMessage.createContent:
          await commands.executeCommand(COMMAND_NAME.createContent);
          break;
+        case DashboardMessage.createByContentType:
+          await commands.executeCommand(COMMAND_NAME.createByContentType);
+          break;
+        case DashboardMessage.createByTemplate:
+          await commands.executeCommand(COMMAND_NAME.createByTemplate);
+          break;
        case DashboardMessage.updateSetting:
          Dashboard.updateSetting(msg.data);
          break;
@@ -151,16 +174,16 @@ export class Dashboard {
          }
          break;
        case DashboardMessage.setPageViewType:
-          Extension.getInstance().setState(EXTENSION_STATE_PAGES_VIEW, 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);
          break;
        case DashboardMessage.refreshMedia:
-          Dashboard.media = [];
+          Dashboard.resetMedia();
          Dashboard.getMedia(0, msg?.data?.folder);
          break;
        case DashboardMessage.uploadMedia:
@@ -172,9 +195,52 @@ export class Dashboard {
        case DashboardMessage.insertPreviewImage:
          Dashboard.insertImage(msg?.data);
          break;
+        case DashboardMessage.updateMediaMetadata:
+          Dashboard.updateMediaMetadata(msg?.data);
+          break;
+        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;
      }
    });
  }
+
+  /**
+   * Reset media array
+   */
+  public static resetMedia() {
+    Dashboard.media = [];
+  }
+
+  public static switchFolder(folderPath: string) {
+    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
@@ -193,16 +259,33 @@ 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.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 {
        panel.getMediaSelection();
-        panel.updateMetadata({field: data.fieldName, value: data.image});
+        panel.updateMetadata({field: data.fieldName, value: data.image });
      }
    }
  }
@@ -213,25 +296,61 @@ 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,
      data: {
        beta: ext.isBetaVersion(),
        wsFolder: wsFolder ? wsFolder.fsPath : '',
-        staticFolder: SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDERS),
+        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>(EXTENSION_STATE_PAGES_VIEW),
+        pageViewType: await ext.getState<ViewType | undefined>(ExtensionState.PagesView, "workspace"),
        mediaSnippet: SettingsHelper.get<string[]>(SETTINGS_DASHBOARD_MEDIA_SNIPPET) || [],
+        contentTypes: SettingsHelper.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
+        draftField: SettingsHelper.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
+        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
   */
@@ -243,50 +362,90 @@ export class Dashboard {
  /**
   * Retrieve all media files
   */
-  private static async getMedia(page: number = 0, folder: 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_FOLDERS);
+    const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+    const contentFolders = Folders.get();
+    const viewData = Dashboard.viewData;
+    let selectedFolder = requestedFolder;

-    if (Dashboard.media.length === 0) {
-      const contentFolder = Folders.get();
-      let allMedia: MediaInfo[] = [];
+    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 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;
+        }
+      }
+    }
+
+    // Go to the home folder
+    if (selectedFolder === HOME_PAGE_NAVIGATION_ID) {
+      selectedFolder = '';
+    }
+
+    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 = await Dashboard.updateMediaData(Dashboard.filterMedia(files));
+
+      allMedia = [...media];
+    } else {
      if (staticFolder) {
-        const files = await workspace.findFiles(`${staticFolder || ""}/**/*`);
-        const media = Dashboard.filterMedia(files);
+        const folderSearch = join(staticFolder || "", '/*');
+        const files = await workspace.findFiles(folderSearch);
+        const media = await Dashboard.updateMediaData(Dashboard.filterMedia(files));

        allMedia = [...media];
      }

-      if (contentFolder && wsFolder) {
-        for (let i = 0; i < contentFolder.length; i++) {
-          const folder = contentFolder[i];
-          const relFolderPath = folder.path.substring(wsFolder.fsPath.length + 1);
-          const files = await workspace.findFiles(`${relFolderPath}/**/*`);
-          const media = Dashboard.filterMedia(files);
+      if (contentFolders && wsFolder) {
+        for (let i = 0; i < contentFolders.length; i++) {
+          const contentFolder = contentFolders[i];
+          const relFolderPath = contentFolder.path.substring(wsFolder.fsPath.length + 1);
+          const folderSearch = relSelectedFolderPath ? join(relSelectedFolderPath, '/*') : join(relFolderPath, '/*');
+          const files = await workspace.findFiles(folderSearch);
+          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;
-      });
-
-      Dashboard.media = Object.assign([], allMedia);
    }

-    // Filter the media
+    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);
+
    let files: MediaInfo[] = Dashboard.media;
-    if (folder) {
-      files = files.filter(f => f.fsPath.includes(folder));
-    }

    // Retrieve the total after filtering and before the slicing happens
    const total = files.length;
@@ -295,36 +454,84 @@ export class Dashboard {
    files = files.slice(page * 16, ((page + 1) * 16));
    files = files.map((file) => {
      try {
+        const metadata = Dashboard.mediaLib.get(file.fsPath);
+
        return {
          ...file,
-          stats: statSync(file.fsPath)
+          dimensions: imageSize(file.fsPath),
+          ...metadata
        };
      } catch (e) {
-        return {...file, stats: undefined};
+        return {...file};
      }
-    }).filter(f => f.stats !== undefined);
+    });
+    files = files.filter(f => f.mtime !== undefined);

-    const folders = [...new Set(Dashboard.media.map((file) => {
-      let relFolderPath = wsFolder ? file.fsPath.substring(wsFolder.fsPath.length + 1) : file.fsPath;
-      if (staticFolder && relFolderPath.startsWith(staticFolder)) {
-        relFolderPath = relFolderPath.substring(staticFolder.length);
+    // Retrieve all the folders
+    let allContentFolders: string[] = [];
+    let allFolders: string[] = [];
+
+    if (selectedFolder) {
+      if (existsSync(selectedFolder)) {
+        allFolders = readdirSync(selectedFolder, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(selectedFolder, dir.name)));
      }
-      if (relFolderPath?.startsWith('/')) {
-        relFolderPath = relFolderPath.substring(1);
+    } else {
+      for (const contentFolder of contentFolders) {
+        const contentPath = contentFolder.path;
+        if (contentPath && existsSync(contentPath)) {
+          const subFolders = readdirSync(contentPath, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(contentPath, dir.name)));
+          allContentFolders = [...allContentFolders, ...subFolders];
+        }
      }
-      return dirname(relFolderPath);
-    }))];
+  
+      const staticPath = join(parseWinPath(wsFolder?.fsPath || ""), staticFolder || "");
+      if (staticPath && existsSync(staticPath)) {
+        allFolders = readdirSync(staticPath, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(staticPath, dir.name)));
+      }
+    }
+
+    // Store the last opened folder
+    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
+        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
   */
@@ -333,7 +540,7 @@ export class Dashboard {

    const descriptionField = SettingsHelper.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description;
    const dateField = SettingsHelper.get(SETTING_DATE_FIELD) as string || DefaultFields.PublishingDate;
-    const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDERS);
+    const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);

    const folderInfo = await Folders.getInfo();
    const pages: Page[] = [];
@@ -353,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,
@@ -362,23 +569,38 @@ export class Dashboard {
                  draft: article?.data.draft,
                  description: article?.data[descriptionField] || "",
                };
-      
-                if (article?.data.preview && wsFolder) {
-                  const staticPath = join(wsFolder.fsPath, staticFolder || "", article?.data.preview);
-                  const contentFolderPath = join(dirname(file.filePath), article?.data.preview);

-                  let previewUri = null;
-                  if (existsSync(staticPath)) {
-                    previewUri = Uri.file(staticPath);
-                  } else if (existsSync(contentFolderPath)) {
-                    previewUri = Uri.file(contentFolderPath);
+                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)) {
+                    if (fieldValue.length > 0) {
+                      fieldValue = fieldValue[0];
+                    } else {
+                      fieldValue = undefined;
+                    }
                  }

-                  if (previewUri) {
-                    const preview = Dashboard.webview?.webview.asWebviewUri(previewUri);
-                    page.preview = preview?.toString() || "";
-                  } else {
-                    page.preview = "";
+                  // Revalidate as the array could have been empty
+                  if (fieldValue) {
+                    const staticPath = join(wsFolder.fsPath, staticFolder || "", fieldValue);
+                    const contentFolderPath = join(dirname(file.filePath), fieldValue);
+
+                    let previewUri = null;
+                    if (existsSync(staticPath)) {
+                      previewUri = Uri.file(staticPath);
+                    } else if (existsSync(contentFolderPath)) {
+                      previewUri = Uri.file(contentFolderPath);
+                    }
+
+                    if (previewUri) {
+                      const preview = Dashboard.webview?.webview.asWebviewUri(previewUri);
+                      page[previewField] = preview?.toString() || "";
+                    } else {
+                      page[previewField] = "";
+                    }
                  }
                }
      
@@ -419,9 +641,13 @@ export class Dashboard {
  private static async saveFile({fileName, contents, folder}: { fileName: string; contents: string; folder: string | null }) {
    if (fileName && contents) {
      const wsFolder = Folders.getWorkspaceFolder();
-      const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDERS);
+      const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
      const wsPath = wsFolder ? wsFolder.fsPath : "";
-      let absFolderPath = join(wsPath, staticFolder || "", folder || "");
+      let absFolderPath = join(wsPath, staticFolder || "");
+
+      if (folder) {
+        absFolderPath = folder;
+      }

      if (!existsSync(absFolderPath)) {
        absFolderPath = join(wsPath, folder || "");
@@ -437,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];
@@ -476,17 +702,15 @@ export class Dashboard {
  }

  /**
-   * Post data to the dashboard
-   * @param msg 
+   * Update the metadata of the selected file
   */
-  private static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) {
-    if (Dashboard.isDisposed) {
-      return;
-    }
+  private static async updateMediaMetadata({ file, filename, page, folder, ...metadata }: { file:string; filename:string; page: number; folder: string | null; metadata: any; }) {
+    Dashboard.mediaLib.set(file, metadata);

-    if (Dashboard.webview) {
-      Dashboard.webview?.webview.postMessage(msg);
-    }
+    // Check if filename needs to be updated
+    Dashboard.mediaLib.updateFilename(file, filename);
+
+    Dashboard.getMedia(page || 0, folder || "");
  }
  
  /**
@@ -498,19 +722,21 @@ 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>
      <html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
      <head>
-        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'; script-src 'nonce-${nonce}'; style-src ${webView.cspSource} 'self' 'unsafe-inline'; font-src ${webView.cspSource}">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'; script-src 'nonce-${nonce}'; style-src ${webView.cspSource} 'self' 'unsafe-inline'; font-src ${webView.cspSource}; connect-src https://o1022172.ingest.sentry.io">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <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" />

@@ -1,43 +1,82 @@
-import { SETTINGS_CONTENT_PAGE_FOLDERS } from './../constants/settings';
+import { Questions } from './../helpers/Questions';
+import { SETTINGS_CONTENT_PAGE_FOLDERS, SETTINGS_CONTENT_STATIC_FOLDER } from './../constants';
 import { commands, Uri, workspace, window } from "vscode";
 import { basename, join } from "path";
 import { ContentFolder, FileInfo, FolderInfo } from "../models";
 import uniqBy = require("lodash.uniqby");
 import { Template } from "./Template";
 import { Notifications } from "../helpers/Notifications";
-import { CONTEXT } from "../constants/context";
-import { Settings } from "../helpers";
+import { FilesHelper, Settings } from "../helpers";
+import { existsSync, mkdirSync } from 'fs';
+import { format } from 'date-fns';
+import { Dashboard } from './Dashboard';
+import { parseWinPath } from '../helpers/parseWinPath';

 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;

 export class Folders {

+  /**
+   * Add a media folder
+   * @returns 
+   */
+  public static async addMediaFolder(data?: {selectedFolder?: string}) {
+    let wsFolder = Folders.getWorkspaceFolder();
+    const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+
+    let startPath = "";
+
+    if (data?.selectedFolder) {
+      startPath = data.selectedFolder.replace(parseWinPath(wsFolder?.fsPath || ""), "");
+    } else if (staticFolder) {
+      startPath = `/${staticFolder}`;
+    }
+
+    if (startPath && !startPath.endsWith("/")) {
+      startPath += "/";
+    }
+
+    const folderName = await window.showInputBox({  
+      prompt: `Which name would you like to give to your folder (use "/" to create multi-level folders)?`,
+      value: startPath,
+      ignoreFocusOut: true,
+      placeHolder: `${format(new Date(), `yyyy/MM`)}`
+    });
+
+    if (!folderName) {
+      Notifications.warning(`No folder name was specified.`);
+      return;
+    }
+    
+    const folders = folderName.split("/").filter(f => f);
+    let parentFolders: string[] = [];
+
+    for (const folder of folders) {
+      const folderPath = join(parseWinPath(wsFolder?.fsPath || ""), parentFolders.join("/"), folder);
+
+      parentFolders.push(folder);
+      
+      if (!existsSync(folderPath)) {
+        mkdirSync(folderPath);
+      }
+    }
+
+    if (Dashboard.isOpen) {
+      Dashboard.switchFolder(folderName);
+    }
+  }
+
  /**
   * Create content in a registered folder
   * @returns 
   */
  public static async create() {
-    const folders = Folders.get();
-
-    if (!folders || folders.length === 0) {
-      Notifications.warning(`There are no known content locations defined in this project.`);
-      return;
-    }
-
-    let selectedFolder: string | undefined;
-    if (folders.length > 1) {
-      selectedFolder = await window.showQuickPick(folders.map(f => f.title), {
-        placeHolder: `Select where you want to create your content`
-      });
-    } else {
-      selectedFolder = folders[0].title;
-    }
-
+    const selectedFolder = await Questions.SelectContentFolder();
    if (!selectedFolder) {
-      Notifications.warning(`You didn't select a place where you wanted to create your content.`);
      return;
    }

+    const folders = Folders.get();
    const location = folders.find(f => f.title === selectedFolder);
    if (location) {
      const folderPath = Folders.getFolderPath(Uri.file(location.path));
@@ -115,9 +154,33 @@ export class Folders {
   */
  public static getWorkspaceFolder(): Uri | undefined {
    const folders = workspace.workspaceFolders;
-    if (folders && folders.length > 0) {
+    
+    if (folders && folders.length === 1) {
      return folders[0].uri;
+    } else if (folders && folders.length > 1) {
+      let projectFolder = undefined; 
+      
+      for (const folder of folders) {
+        if (!projectFolder && existsSync(join(folder.uri.fsPath, Settings.globalFile))) {
+          projectFolder = folder.uri;
+        }
+      }
+
+      if (!projectFolder) {
+        window.showWorkspaceFolderPick({
+          placeHolder: `Please select the main workspace folder for Front Matter to use.`
+        }).then(selectedFolder => {
+          if (selectedFolder) {
+            Settings.createGlobalFile(selectedFolder.uri);
+            // Full reload to make sure the whole extension is reloaded correctly
+            commands.executeCommand(`workbench.action.reloadWindow`);
+          }
+        });
+      }
+
+      return projectFolder;
    }
+    
    return undefined;
  }

@@ -127,7 +190,6 @@ export class Folders {
  public static getProjectFolderName(): string {
    const wsFolder = Folders.getWorkspaceFolder();
    if (wsFolder) {
-      // const projectFolder = wsFolder?.fsPath.split('\\').join('/').split('/').pop();
      return basename(wsFolder.fsPath);
    }
    return "";
@@ -148,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[] = [];
@@ -157,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,
@@ -201,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)
    }));
  }
@@ -212,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);
  }

  /**
@@ -223,7 +293,7 @@ export class Folders {
   */
  private static absWsFolder(folder: ContentFolder, wsFolder?: Uri) {
    const isWindows = process.platform === 'win32';
-    let absPath =  folder.path.replace(WORKSPACE_PLACEHOLDER, wsFolder?.fsPath || "");
+    let absPath =  folder.path.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
    absPath = isWindows ? absPath.split('/').join('\\') : absPath;
    return absPath;
  }
@@ -236,7 +306,7 @@ export class Folders {
   */
  private static relWsFolder(folder: ContentFolder, wsFolder?: Uri) {
    const isWindows = process.platform === 'win32';
-    let absPath =  folder.path.replace(wsFolder?.fsPath || "", WORKSPACE_PLACEHOLDER);
+    let absPath =  folder.path.replace(parseWinPath(wsFolder?.fsPath || ""), WORKSPACE_PLACEHOLDER);
    absPath = isWindows ? absPath.split('\\').join('/') : absPath;
    return absPath;
  }
@@ -1,11 +1,13 @@
-import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME } from './../constants/settings';
+import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join } from "path";
 import { commands, env, Uri, ViewColumn, window } from "vscode";
 import { Settings } from '../helpers';
 import { PreviewSettings } from '../models';
 import { format } from 'date-fns';
-import { CONTEXT } from '../constants/context';
+import { DateHelper } from '../helpers/DateHelper';
+import { Article } from '.';
+import { urlJoin } from 'url-join-ts';


 export class Preview {
@@ -32,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);
      }
    }

@@ -113,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>`;
  }
@@ -132,4 +147,4 @@ export class Preview {
      pathname
    };
  }
-}
+}
@@ -1,5 +1,4 @@
 import { workspace, Uri } from "vscode";
-import { CONFIG_KEY, SETTING_TEMPLATES_FOLDER } from "../constants";
 import { join } from "path";
 import * as fs from "fs";
 import { Notifications } from "../helpers/Notifications";
@@ -1,8 +1,9 @@
-import { SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants/settings';
+import { SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants';
 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()) {
@@ -1,15 +1,16 @@
+import { Questions } from './../helpers/Questions';
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
 import { SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
-import { 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/context';
+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 {

@@ -67,7 +68,7 @@ export class Template {
        ["yes", "no"], 
        { 
          canPickMany: false, 
-          placeHolder: `Do you want to keep the article its contents for the template?`,
+          placeHolder: `Do you want to keep the contents for the template?`,
        }
      );

@@ -94,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.`);
@@ -113,39 +114,33 @@ export class Template {
    }

    const selectedTemplate = await vscode.window.showQuickPick(templates.map(t => path.basename(t.fsPath)), {
-      placeHolder: `Select the article template to use`
+      placeHolder: `Select the content template to use`
    });
    if (!selectedTemplate) {
      Notifications.warning(`No template selected.`);
      return;
    }

-    const titleValue = await vscode.window.showInputBox({  
-      prompt: `What would you like to use as a title for the new article?`,
-      placeHolder: `Article title`
-    });
+    const titleValue = await Questions.ContentTitle();
    if (!titleValue) {
-      Notifications.warning(`You did not specify an article title.`);
      return;
    }

    // Start the template read
    const template = templates.find(t => t.fsPath.endsWith(selectedTemplate));
    if (!template) {
-      Notifications.warning(`Article template could not be found.`);
+      Notifications.warning(`Content template could not be found.`);
      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;
    }
    
@@ -165,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);
@@ -180,7 +175,7 @@ export class Template {
      vscode.window.showTextDocument(txtDoc);
    }

-    Notifications.info(`Your new article has been created.`);
+    Notifications.info(`Your new content has been created.`);
  }

  /**
@@ -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>
+  );
+};
@@ -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",
@@ -2,5 +2,6 @@
 export const DefaultFields = {
  PublishingDate: `date`,
  LastModified: `lastmod`,
-  Description: `description`
+  Description: `description`,
+  Slug: `slug`
 };
@@ -3,9 +3,6 @@ const extensionName = "frontMatter";
 export const EXTENSION_ID = 'eliostruyf.vscode-front-matter';
 export const EXTENSION_BETA_ID = 'eliostruyf.vscode-front-matter-beta';

-export const EXTENSION_STATE_VERSION = 'frontMatter:Version';
-export const EXTENSION_STATE_PAGES_VIEW = 'frontMatter:Pages:ViewType';
-
 export const getCommandName = (command: string) => {
  return `${extensionName}.${command}`;
 };
@@ -25,10 +22,14 @@ export const COMMAND_NAME = {
  registerFolder: getCommandName("registerFolder"),
  unregisterFolder: getCommandName("unregisterFolder"),
  createContent: getCommandName("createContent"),
+  createByContentType: getCommandName("createByContentType"),
+  createByTemplate: getCommandName("createByTemplate"),
  createTemplate: getCommandName("createTemplate"),
  collapseSections: getCommandName("collapseSections"),
  preview: getCommandName("preview"),
  dashboard: getCommandName("dashboard"),
+  dashboardClose: getCommandName("dashboard.close"),
  promote: getCommandName("promoteSettings"),
  insertImage: getCommandName("insertImage"),
+  createFolder: getCommandName("createFolder"),
 };
@@ -0,0 +1,17 @@
+
+export const ExtensionState = {
+  PagesView: `frontMatter:Pages:ViewType`,
+  SelectedFolder: `frontMatter:SelectedFolder`,
+  Version: `frontMatter:Version`,
+  SettingPromoted: `frontMatter:Settings:Promoted`,
+  MoveTemplatesFolder: `frontMatter:Templates:Move`,
+
+  Dashboard: {
+    Contents: {
+      Sorting: `frontMatter:Dashboard:Contents:Sorting`,
+    },
+    Media: {
+      Sorting: `frontMatter:Dashboard:Media:Sorting`,
+    }
+  }
+};
@@ -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"]
+  }
+];
@@ -1,4 +1,6 @@
 export const GITHUB_LINK = "https://github.com/estruyf/vscode-front-matter";
 export const ISSUE_LINK = "https://github.com/estruyf/vscode-front-matter/issues";
 export const SPONSOR_LINK = "https://github.com/sponsors/estruyf";
-export const REVIEW_LINK = "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details";
+export const REVIEW_LINK = "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details";
+
+export const SENTRY_LINK = "https://1ac45704bbe74264a7b4674bdc2abf48@o1022172.ingest.sentry.io/5988293";
@@ -0,0 +1,8 @@
+
+
+export const LocalStore = {
+  rootFolder: ".frontmatter",
+  contentFolder: "content",
+  templatesFolder: "templates",
+  mediaDatabaseFile: "mediaDb.json"
+}
@@ -0,0 +1 @@
+export const HOME_PAGE_NAVIGATION_ID = "FrontMatter:RootFolder";
@@ -1,5 +1,7 @@
 export const CONTEXT = {
  canInit: "frontMatterCanInit",
  canOpenPreview: "frontMatterCanOpenPreview",
-  canOpenDashboard: "frontMatterCanOpenDashboard"
+  canOpenDashboard: "frontMatterCanOpenDashboard",
+  isEnabled: "frontMatter:enabled",
+  isDashboardOpen: "frontMatter:dashboard:open",
 };
@@ -1,6 +1,10 @@
+export * from './ContentType';
 export * from './DefaultFields';
 export * from './Extension';
+export * from './ExtensionState';
 export * from './Links';
+export * from './LocalStore';
+export * from './Navigation';
 export * from './charMap';
 export * from './context';
 export * from './settings';
@@ -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";
@@ -36,12 +39,21 @@ export const SETTING_CUSTOM_SCRIPTS = "custom.scripts";

 export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate";
 export const SETTINGS_CONTENT_PAGE_FOLDERS = "content.pageFolders";
-export const SETTINGS_CONTENT_STATIC_FOLDERS = "content.publicFolder";
+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
 */
@@ -4,4 +4,5 @@ export enum DashboardCommand {
  settings = "settings",
  media = "media",
  viewData = "viewData",
+  mediaUpdate = "mediaUpdate"
 }
@@ -4,6 +4,8 @@ export enum DashboardMessage {
  openFile = 'openFile',
  getTheme = 'getTheme',
  createContent = 'createContent',
+  createByContentType = 'createByContentType',
+  createByTemplate = 'createByTemplate',
  updateSetting = 'updateSetting',
  initializeProject = 'initializeProject',
  reload = 'reload',
@@ -14,4 +16,9 @@ export enum DashboardMessage {
  uploadMedia = 'uploadMedia',
  deleteMedia = 'deleteMedia',
  insertPreviewImage = 'insertPreviewImage',
+  updateMediaMetadata = 'updateMediaMetadata',
+  createMediaFolder = 'createMediaFolder',
+  setFramework = 'setFramework',
+  setState = 'setState',
+  runCustomScript = 'runCustomScript',
 }
@@ -0,0 +1,52 @@
+import { Menu } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { MenuItem, MenuItems } from './Menu';
+
+export interface IChoiceButtonProps {
+  title: string;
+  choices: { 
+    title: string;
+    disabled?: boolean;
+    onClick: () => void;
+  }[];
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({onClick, disabled, choices, title}: React.PropsWithChildren<IChoiceButtonProps>) => {
+  return (
+    <span className="relative z-50 inline-flex shadow-sm rounded-md">
+      <button
+        type="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-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {title}
+      </button>
+
+      <Menu as="span" className="-ml-px relative block">
+        <Menu.Button 
+          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" />
+        </Menu.Button>
+
+        <MenuItems widthClass={`w-56`}>
+          <div className="py-1">
+            {choices.map((choice) => (
+              <MenuItem 
+                key={choice.title}
+                title={choice.title} 
+                value={null}
+                onClick={choice.onClick}
+                disabled={choice.disabled} />
+            ))}
+          </div>
+        </MenuItems>
+      </Menu>
+    </span>
+  );
+};
@@ -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} />
@@ -3,15 +3,20 @@ import { useRecoilValue } from 'recoil';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
-import { ViewSelector, ViewType } from '../../state';
+import { SettingsSelector, ViewSelector, ViewType } from '../../state';
 import { DateField } from '../DateField';
 import { Status } from '../Status';
 import { Messenger } from '@estruyf/vscode/dist/client';
+import useContentType from '../../../hooks/useContentType';

 export interface IItemProps extends Page {}

-export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, preview }: React.PropsWithChildren<IItemProps>) => {
+export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
  const view = useRecoilValue(ViewSelector);
+  const settings = useRecoilValue(SettingsSelector);
+  const contentType = useContentType(settings, { type });
+
+  const previewField = contentType.fields.find(field => field.isPreviewImage && field.type === "image")?.name || "preview";
  
  const openFile = () => {
    Messenger.send(DashboardMessage.openFile, fmFilePath);
@@ -24,8 +29,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
                onClick={openFile}>
          <div className="relative h-36 w-full overflow-hidden border-b border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200">
            {
-              preview ? (
-                <img src={`${preview}`} alt={title} className="absolute inset-0 h-full w-full object-cover" loading="lazy" />
+              previewField && pageData[previewField] ? (
+                <img src={`${pageData[previewField]}`} alt={title} className="absolute inset-0 h-full w-full object-cover" loading="lazy" />
              ) : (
                <div className={`flex items-center justify-center bg-whisper-500 dark:bg-vulcan-200 dark:group-hover:bg-vulcan-100`}>
                  <MarkdownIcon className={`h-32 text-vulcan-100 dark:text-whisper-100`} />
@@ -36,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>
@@ -59,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>
@@ -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, ViewDataAtom } from '../state';
+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} />;
 };
@@ -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
    }
@@ -0,0 +1,106 @@
+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 {}
+
+export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: React.PropsWithChildren<IBreadcrumbProps>) => {
+  const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
+  const settings = useRecoilValue(SettingsAtom);
+  const [ folders, setFolders ] = React.useState<string[]>([]);
+
+  if (!settings?.wsFolder) {
+    return null;
+  }
+
+  React.useEffect(() => {
+    const { wsFolder, staticFolder, contentFolders } = settings;
+
+    const isValid = (folderPath: string) => {      
+      if (staticFolder) {
+        const staticPath = parseWinPath(join(wsFolder, staticFolder)) as string;
+        const relPath = folderPath.replace(staticPath, '') as string;
+
+        if (relPath.length > 1 && folderPath.startsWith(staticPath)) {
+          return true;
+        } else if (relPath.length === 0) {
+          return false;
+        }
+      }
+1
+      for (let i = 0; i < contentFolders.length; i++) {
+        const folder = contentFolders[i];
+        const contentFolder = parseWinPath(folder.path) as string;
+        const relContentPath = folderPath.replace(contentFolder, '');
+        return relContentPath.length > 1 && folderPath.startsWith(contentFolder);
+      }
+
+      return false;
+    };
+
+    if (!selectedFolder) {
+      setFolders([]);
+    } else {
+      const relPath = parseWinPath(selectedFolder.replace(parseWinPath(settings.wsFolder) as string, '')) as string;
+      const folderParts = relPath.split('/').filter(f => f);
+      const allFolders: string[] = [];
+      let previousFolder = parseWinPath(settings.wsFolder) as string;
+
+      for (const part of folderParts) {
+        const folder = join(previousFolder, part);
+        if (isValid(folder)) {
+          allFolders.push(folder);
+        }
+        previousFolder = folder;
+      }
+  
+      setFolders(allFolders);
+    }
+  }, [selectedFolder]);
+
+  return (
+    <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">
+              <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+              <span className="sr-only">Home</span>
+            </button>
+          </div>
+        </li>
+        {folders.map((folder) => (
+          <li key={folder} className="flex">
+            <div className="flex items-center">
+              <svg
+                className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+              >
+                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+              </svg>
+              <button
+                onClick={() => setSelectedFolder(folder)}
+                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
+              >
+                {basename(folder)}
+              </button>
+            </div>
+          </li>
+        ))}
+      </ol>
+
+      <div className={`flex px-5`}>
+        <Sorting view={ViewType.Media} disableCustomSorting />
+      </div>
+    </nav>
+  );
+};
@@ -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>
  );
 };
@@ -1,19 +1,19 @@
-import { Menu, Transition } from '@headlessui/react';
+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>
@@ -3,20 +3,21 @@ 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 { Button } from '../Button';
 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';
 import { PhotographIcon } from '@heroicons/react/outline';
 import { Pagination } from '../Media/Pagination';
+import { ChoiceButton } from '../ChoiceButton';
+import { Breadcrumb } from './Breadcrumb';

 export interface IHeaderProps {
  settings: Settings | null;
@@ -32,27 +33,41 @@ 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);
  };

+  const createByContentType = () => {
+    Messenger.send(DashboardMessage.createByContentType);
+  };
+
+  const createByTemplate = () => {
+    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 />
@@ -60,7 +75,19 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
              <div className={`flex items-center space-x-4`}>
                <Startup settings={settings} />
                
-                <Button onClick={createContent} disabled={!settings?.initialized}>Create content</Button>
+                <ChoiceButton 
+                  title={`Create content`} 
+                  choices={[{
+                    title: `Create by content type`,
+                    onClick: createByContentType,
+                    disabled: !settings?.initialized
+                  }, {
+                    title: `Create by template`,
+                    onClick: createByTemplate,
+                    disabled: !settings?.initialized
+                  }]} 
+                  onClick={createContent} 
+                  disabled={!settings?.initialized} />
              </div>
            </div>

@@ -77,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)} />

@@ -85,15 +112,18 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde

              <Grouping />

-              <Sorting />
+              <Sorting view={ViewType.Contents} />
            </div>
          </>
        )
      }

      {
-        view === "media" && (
-          <Pagination />
+        view === ViewType.Media && (
+          <>
+            <Pagination />
+            <Breadcrumb />
+          </>
        )
      }
    </div>
@@ -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>
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { FolderAddIcon } from '@heroicons/react/outline';
+import { useRecoilValue } from 'recoil';
+import { DashboardMessage } from '../../DashboardMessage';
+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, {
+      selectedFolder
+    });
+  };
+
+  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`}
+      title={`Create new folder`}
+      onClick={onFolderCreation}>
+      <FolderAddIcon className={`mr-2 h-6 w-6`} />
+      <span className={``}>Create new folder</span>
+    </button>
+  );
+};
@@ -0,0 +1,29 @@
+import { FolderIcon } from '@heroicons/react/solid';
+import { basename } from 'path';
+import * as React from 'react';
+import { useRecoilState } from 'recoil';
+import { SelectedMediaFolderAtom } from '../../state';
+
+export interface IFolderItemProps {
+  folder: string;
+  wsFolder?: string;
+  staticFolder?: string;
+}
+
+export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({ folder, wsFolder, staticFolder }: React.PropsWithChildren<IFolderItemProps>) => {
+  const [ , setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
+
+  const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
+  
+  return (
+    <li className={`group relative bg-gray-200 dark:bg-vulcan-300 hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
+      <button className={`w-full flex flex-col items-center`} onClick={() => setSelectedFolder(folder)}>
+        <FolderIcon className={`h-auto w-1/2`} />
+
+        <p className="text-sm font-bold pointer-events-none flex items-center">
+          {basename(relFolderPath)}
+        </p>
+      </button>
+    </li>
+  );
+};
@@ -1,77 +0,0 @@
-import { Menu } from '@headlessui/react';
-import { XIcon } from '@heroicons/react/outline';
-import Downshift from 'downshift';
-import * as React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { MediaFoldersSelector, SelectedMediaFolderAtom } from '../../state';
-
-export interface IFolderSelectionProps {}
-
-export const FolderSelection: React.FunctionComponent<IFolderSelectionProps> = (props: React.PropsWithChildren<IFolderSelectionProps>) => {
-  const folders = useRecoilValue(MediaFoldersSelector);
-  const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
-  const [ focus, setFocus ] = React.useState(false);
-
-  let allFolders: string[] = Object.assign([], folders);
-  allFolders = allFolders.sort((a: string, b: string) => {
-    if (a.toLowerCase() < b.toLowerCase()) return -1;
-    if (a.toLowerCase() > b.toLowerCase()) return 1;
-    return 0;
-  });
-
-  return (
-    <div>
-      <Downshift
-        isOpen={focus}
-        selectedItem={selectedFolder}
-        onOuterClick={() => setFocus(false)}
-        onSelect={(selFolder) => {
-          setSelectedFolder(selFolder);
-          setFocus(false);
-        }}>
-        {
-          ({ 
-            getInputProps,
-            getItemProps,
-            getMenuProps,
-            isOpen,
-            inputValue,
-            getRootProps 
-          }) => (
-            <div className={`relative flex items-center`}>
-              <label className={`text-sm text-gray-500 dark:text-whisper-900`}>Filter by: </label>
-
-              <div
-                className={`inline-flex items-center`}
-                {...getRootProps({} as any, {suppressRefError: true})}
-              >
-                <input disabled={!!selectedFolder} onFocus={() => setFocus(true)} className={`ml-2 py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none`} {...getInputProps()} />
-
-                {
-                  selectedFolder && (
-                    <button title={`Clear`} onClick={() => setSelectedFolder(null)}><XIcon className={`ml-2 h-6 w-6 text-red-500 hover:text-red-800`} /></button>
-                  )
-                }
-              </div>
-
-              <div className={`${focus ? `block` : `hidden`} top-8 absolute right-0 z-10 mt-2 w-min 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`} {...getMenuProps()}>
-                {isOpen
-                  ? allFolders
-                      .filter((item: string) => !inputValue || item.includes(inputValue))
-                      .map((item, index) => (
-                        <div
-                          className="cursor-pointer text-gray-500 dark:text-whisper-900 block px-4 py-2 text-sm font-medium w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100"
-                          {...getItemProps({ key: item, index, item })}
-                        >
-                          {item}
-                        </div>
-                      ))
-                  : null}
-              </div>
-            </div>
-          )
-        }
-      </Downshift>
-    </div>
-  );
-};
@@ -1,27 +1,36 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { CheckCircleIcon, ClipboardCopyIcon, CodeIcon, 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, SelectedMediaFolderSelector, SettingsSelector, ViewDataSelector } from '../../state';
+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;
 }

 export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWithChildren<IItemProps>) => {
-  const settings = useRecoilValue(SettingsSelector);
-  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
  const [ , setLightbox ] = useRecoilState(LightboxAtom);
  const [ showAlert, setShowAlert ] = React.useState(false);
+  const [ showForm, setShowForm ] = React.useState(false);
+  const [ caption, setCaption ] = React.useState(media.caption);
+  const [ alt, setAlt ] = React.useState(media.alt);
+  const [ filename, setFilename ] = React.useState<string | null>(null);
+  const settings = useRecoilValue(SettingsSelector);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
  const viewData = useRecoilValue(ViewDataSelector);
-
-  const parseWinPath = (path: string | undefined) => {
-    return path?.split(`\\`).join(`/`);
-  }
+  const page = useRecoilValue(PageSelector);

  const getFolder = () => {
    if (settings?.wsFolder && media.fsPath) {
@@ -48,29 +57,48 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
    return relPath;
  };

+  const getFileName = () => {
+    return basename(parseWinPath(media.fsPath) || "");
+  };
+
  const copyToClipboard = () => {
    const relPath = getRelPath();
    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, {
      image: parseWinPath(relPath) || "",
      file: viewData?.data?.filePath,
      fieldName: viewData?.data?.fieldName,
-      position: viewData?.data?.position || null
+      multiple: viewData?.data?.multiple,
+      value: viewData?.data?.value,
+      position: viewData?.data?.position || null,
+      alt: alt || "",
+      caption: caption || ""
    });
  };

  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) || "",
      file: viewData?.data?.filePath,
      fieldName: viewData?.data?.fieldName,
      position: viewData?.data?.position || null,
-      snippet: settings?.mediaSnippet.join("\n").replace("{mediaUrl}", parseWinPath(relPath) || "")
+      snippet
    });
  };

@@ -86,20 +114,84 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
  };

  const calculateSize = () => {
-    if (media?.stats?.size) {
-      const size = media.stats.size / (1024*1024);
-      if (size > 1) {
-        return `${size.toFixed(2)} MB`;
-      } else {
-        return `${(size * 1024).toFixed(2)} KB`;
+    let sizeDetails = [];
+
+    if (media?.dimensions) {
+      if (media.dimensions.width && media.dimensions.height) {
+        sizeDetails.push(`${media.dimensions.width}x${media.dimensions.height}`);
      }
    }
+
+    if (media?.size) {
+      const size = media.size / (1024*1024);
+      if (size > 1) {
+        sizeDetails.push(`${size.toFixed(2)} MB`);
+      } else {
+        sizeDetails.push(`${(size * 1024).toFixed(2)} KB`);
+      }
+    }
+
+    return sizeDetails.join(" — ");
  };

  const openLightbox = () => {
    setLightbox(media.vsPath || "");
  };

+  const updateMetadata = () => {
+    setShowForm(true);
+  };
+
+  const submitMetadata = () => {
+    Messenger.send(DashboardMessage.updateMediaMetadata, {
+      file: media.fsPath,
+      filename,
+      caption,
+      alt,
+      folder: selectedFolder,
+      page
+    });
+    
+    setShowForm(false);
+
+    // Reset the values
+    setAlt(media.alt);
+    setCaption(media.caption);
+    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);
+    }
+  }, [media.alt]);
+  
+  useEffect(() => {
+    if (media.caption !== caption) {
+      setCaption(media.caption);
+    }
+  }, [media.caption]);
+  
+  useEffect(() => {
+    const name = basename(parseWinPath(media.fsPath) || "");
+    if (name !== filename) {
+      setFilename(getFileName());
+    }
+  }, [media.fsPath]);
+
+  const fileInfo = filename ? basename(filename).split('.') : null;
+  const extension = fileInfo?.pop();
+  const name = fileInfo?.join('.');
+
  return (
    <>
      <li className="group relative bg-gray-50 dark:bg-vulcan-200 hover:shadow-xl dark:hover:bg-vulcan-100">
@@ -111,64 +203,147 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
            <img src={media.vsPath} alt={basename(media.fsPath)} className="mx-auto object-cover" />
          </div>
        </button>
-        <div className={`relative py-4 pl-4 pr-10`}>
-          <div className={`absolute top-4 right-4 flex flex-col space-y-2`}>
-            {
-              viewData?.data?.filePath ? (
-                <>
-                  <button 
-                    title={`Insert into your article`} 
-                    className={`hover:text-teal-900 focus:outline-none`} 
-                    onClick={insertToArticle}>
-                    <CheckCircleIcon className={`h-5 w-5`} />
-                    <span className={`sr-only`}>Insert into your article</span>
-                  </button>
+        <div className={`relative py-4 pl-4 pr-12`}>
+          <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
+
+            <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) || "")}
          </p>
-          <p className="mt-2 text-sm dark:text-whisper-900 font-medium pointer-events-none flex items-center">
-            <b className={`mr-2`}>Folder:</b> {getFolder()}
+          {
+            media.caption && (
+              <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
+                <b className={`mr-2`}>Caption:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.caption}</span>
+              </p>
+            )
+          }
+          {
+            media.alt && (
+              <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none  flex flex-col items-start">
+                <b className={`mr-2`}>Alt:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.alt}</span>
+              </p>
+            )
+          }
+          <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
+            <b className={`mr-2`}>Folder:</b> 
+            <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{getFolder()}</span>
          </p>
          {
-            media?.stats?.size && (
-              <p className="mt-2 text-sm dark:text-whisper-900 font-medium pointer-events-none flex items-center">
-                <b className={`mr-1`}>Size:</b> {calculateSize()}
+            (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>
              </p>
            )
          }
        </div>
      </li>

+      {
+        showForm && (
+          <Metadata 
+            title={`Set metadata for: ${basename(parseWinPath(media.fsPath) || "")}`}
+            description={`Please specify the metadata you want to set for the file.`}
+            okBtnText={`Save`}
+            cancelBtnText={`Cancel`}
+            dismiss={() => setShowForm(false)}
+            trigger={submitMetadata}
+            isSaveDisabled={!filename}>
+            <div className="flex flex-col space-y-2">
+              <div>
+                <label htmlFor="about" className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                  Filename
+                </label>
+                <div className="relative mt-1">
+                  <input
+                    className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                    value={name}
+                    onChange={(e) => setFilename(`${e.target.value}.${extension}`)} />
+
+                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                    <span className="text-gray-500 sm:text-sm">
+                      .{extension}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label htmlFor="about" className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                  Caption
+                </label>
+                <div className="mt-1">
+                  <textarea
+                    rows={3}
+                    className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                    value={caption || ''}
+                    onChange={(e) => setCaption(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div>
+                <label htmlFor="about" className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                  Alt tag value
+                </label>
+                <div className="mt-1">
+                  <input
+                    className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                    value={alt || ''}
+                    onChange={(e) => setAlt(e.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+          </Metadata>
+        )
+      }
+
      {
        showAlert && (
          <Alert 
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { MediaInfo, MediaPaths } from '../../../models/MediaPaths';
 import { DashboardCommand } from '../../DashboardCommand';
-import { LoadingAtom, MediaFoldersAtom, MediaTotalAtom, SelectedMediaFolderSelector, SettingsSelector, ViewDataSelector } from '../../state';
+import { LoadingAtom, MediaFoldersAtom, MediaTotalAtom, SelectedMediaFolderAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { Header } from '../Header';
 import { Spinner } from '../Spinner';
 import { SponsorMsg } from '../SponsorMsg';
@@ -15,6 +15,8 @@ import { List } from './List';
 import { useDropzone } from 'react-dropzone'
 import { useCallback } from 'react';
 import { DashboardMessage } from '../../DashboardMessage';
+import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
+import { FolderItem } from './FolderItem';

 export interface IMediaProps {}

@@ -22,10 +24,10 @@ export const LIMIT = 16;

 export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWithChildren<IMediaProps>) => {
  const settings = useRecoilValue(SettingsSelector);
-  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
  const [ media, setMedia ] = React.useState<MediaInfo[]>([]);
  const [ , setTotal ] = useRecoilState(MediaTotalAtom);
-  const [ , setFolders ] = useRecoilState(MediaFoldersAtom);
+  const [ folders, setFolders ] = useRecoilState(MediaFoldersAtom);
  const [ loading, setLoading ] = useRecoilState(LoadingAtom);
  const viewData = useRecoilValue(ViewDataSelector);

@@ -51,12 +53,14 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
    accept: 'image/*'
  });

-  const messageListener = (message: MessageEvent<EventData<MediaPaths>>) => {
+  const messageListener = (message: MessageEvent<EventData<MediaPaths | { key: string, value: any }>>) => {
    if (message.data.command === DashboardCommand.media) {
+      const data: MediaPaths = message.data.data as MediaPaths;
      setLoading(false);
-      setMedia(message.data.data.media);
-      setTotal(message.data.data.total);
-      setFolders(message.data.data.folders);
+      setMedia(data.media);
+      setTotal(data.total);
+      setFolders(data.folders);
+      setSelectedFolder(data.selectedFolder);
    }
  };

@@ -95,6 +99,32 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
            )
          }

+          {
+            (media.length === 0 && folders.length === 0 && !loading) && (
+              <div className={`flex items-center justify-center h-full`}>
+                <div className={`max-w-xl text-center`}>
+                  <FrontMatterIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`} />
+                  
+                  <p className={`text-xl font-medium`}>No media files to show. You can drag &amp; drop new files.</p>
+                </div>
+              </div>
+            )
+          }
+
+          {
+            folders && folders.length > 0 && (
+              <div className={`mb-8`}>
+                <List>
+                  {
+                    folders && folders.map((folder) => (
+                      <FolderItem key={folder} folder={folder} staticFolder={settings?.staticFolder} wsFolder={settings?.wsFolder} />
+                    ))
+                  }
+                </List>
+              </div>
+            )
+          }
+
          <List>
            {
              media.map((file) => (
@@ -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>
+  );
+};
+
@@ -1,10 +1,12 @@
+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, SelectedMediaFolderSelector } from '../../state';
-import { FolderSelection } from './FolderSelection';
+import { LoadingAtom, MediaTotalSelector, PageAtom, SelectedMediaFolderSelector, SortingSelector } from '../../state';
+import { FolderCreation } from './FolderCreation';
 import { LIMIT } from './Media';
 import { PaginationButton } from './PaginationButton';

@@ -12,9 +14,10 @@ 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 ] = React.useState<number>(0);
+  const [ page, setPage ] = useRecoilState(PageAtom);
  
  const totalPages = Math.ceil(totalMedia / LIMIT) - 1;

@@ -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"
@@ -82,7 +111,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({}: React.
        </p>
      </div>

-      <FolderSelection />
+      <FolderCreation />

      <div className="flex justify-between sm:justify-end space-x-2 text-sm">
        <PaginationButton
@@ -3,17 +3,19 @@ import * as React from 'react';

 export interface IMenuItemProps {
  title: string;
-  value: any;
-  isCurrent: boolean;
+  value?: any;
+  isCurrent?: boolean;
+  disabled?: boolean;
  onClick: (value: any) => void;
 }

-export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({title, value, isCurrent, onClick}: React.PropsWithChildren<IMenuItemProps>) => {
+export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({title, value, isCurrent, disabled, onClick}: React.PropsWithChildren<IMenuItemProps>) => {
  return (
    <Menu.Item>
      <button
+        disabled={disabled}
        onClick={() => onClick(value)}
-        className={`${!isCurrent ? `text-vulcan-500 dark:text-whisper-500` : `text-gray-500 dark:text-whisper-900`} block px-4 py-2 text-sm font-medium w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100`}
+        className={`${!isCurrent ? `text-vulcan-500 dark:text-whisper-500` : `text-gray-500 dark:text-whisper-900`} block px-4 py-2 text-sm font-medium w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
      >
        {title}
      </button>
@@ -2,9 +2,11 @@ import { Menu, Transition } from '@headlessui/react';
 import * as React from 'react';
 import { Fragment } from 'react';

-export interface IMenuItemsProps {}
+export interface IMenuItemsProps {
+  widthClass?: string;
+}

-export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({children}: React.PropsWithChildren<IMenuItemsProps>) => {
+export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass, children}: React.PropsWithChildren<IMenuItemsProps>) => {
  return (
    <Transition
      as={Fragment}
@@ -15,7 +17,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({children}:
      leaveFrom="transform opacity-100 scale-100"
      leaveTo="transform opacity-0 scale-95"
    >
-      <Menu.Items className="origin-top-right absolute right-0 z-10 mt-2 w-40 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">
+      <Menu.Items className={`${widthClass || "w-40"} origin-top-right absolute right-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">
          {children}
        </div>
@@ -0,0 +1,92 @@
+import { Dialog, Transition } from '@headlessui/react';
+import * as React from 'react';
+import { Fragment, useRef } from 'react';
+
+export interface IMetadataProps {
+  title: string;
+  description: string;
+  okBtnText: string;
+  cancelBtnText: string;
+  isSaveDisabled: boolean;
+
+  dismiss: () => void;
+  trigger: () => void;
+}
+
+export const Metadata: React.FunctionComponent<IMetadataProps> = ({title, description, cancelBtnText, okBtnText, dismiss, isSaveDisabled, trigger, children}: React.PropsWithChildren<IMetadataProps>) => {
+
+  const cancelButtonRef = useRef(null);
+  
+  
+  return (
+    <Transition.Root show={true} as={Fragment}>
+      <Dialog className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={() => dismiss()}>
+        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-vulcan-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+            &#8203;
+          </span>
+
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom bg-white dark:bg-vulcan-500 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 border-whisper-900">
+              <div>
+                <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-vulcan-300 dark:text-whisper-900">
+                  {title}
+                </Dialog.Title>
+
+                <div className="mt-2">
+                  <p className="text-sm text-vulcan-500 dark:text-whisper-500">
+                    {description}
+                  </p>
+                </div>
+
+                <div className="mt-4">
+                  {children}
+                </div>
+
+                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                  <button
+                    type="button"
+                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-600 text-base font-medium text-white hover:bg-teal-700 dark:hover:bg-teal-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-30"
+                    onClick={() => trigger()}
+                    disabled={isSaveDisabled}
+                  >
+                    {okBtnText}
+                  </button>
+                  <button
+                    type="button"
+                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
+                    onClick={() => dismiss()}
+                    ref={cancelButtonRef}
+                  >
+                    {cancelBtnText}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
@@ -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>
  );
 };
@@ -1,6 +1,6 @@
 import { HeartIcon, StarIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import { REVIEW_LINK, SPONSOR_LINK } from '../../constants/Links';
+import { REVIEW_LINK, SPONSOR_LINK } from '../../constants';
 import { VersionInfo } from '../../models';

 export interface ISponsorMsgProps {
@@ -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">
@@ -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>
  );
@@ -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>
+        )
+      }
    </>
  );
 };
@@ -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} />
@@ -1,6 +1,6 @@
 import { HeartIcon, StarIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants/Links';
+import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { FrontMatterIcon } from '../../panelWebView/components/Icons/FrontMatterIcon';
 import { GitHubIcon } from '../../panelWebView/components/Icons/GitHubIcon';
@@ -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">
@@ -1,5 +1,6 @@
 export enum SortOption {
-  LastModified = 1,
-  FileNameAsc,
-  FileNameDesc
+  LastModifiedAsc = "LastModifiedAsc",
+  LastModifiedDesc = "LastModifiedDesc",
+  FileNameAsc = "FileNameAsc",
+  FileNameDesc = "FileNameDesc"
 }
@@ -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:
@@ -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
@@ -2,15 +2,27 @@ import * as React from "react";
 import { render } from "react-dom";
 import { RecoilRoot } from "recoil";
 import { Dashboard } from "./components/Dashboard";
-
+import * as Sentry from "@sentry/react";
+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>() => {
  getState: () => T;
  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);
@@ -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;
@@ -1,6 +1,8 @@
 import { VersionInfo } from '../../models/VersionInfo';
 import { ViewType } from '../state';
 import { ContentFolder } from '../../models/ContentFolder';
+import { ContentType, CustomScript, DraftField, Framework, SortingSetting } from '../../models';
+import { SortingOption } from './SortingOption';

 export interface Settings { 
  beta: boolean;
@@ -14,4 +16,22 @@ export interface Settings {
  versionInfo: VersionInfo;
  pageViewType: ViewType | undefined;
  mediaSnippet: string[];
+  contentTypes: ContentType[];
+  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;
 }
@@ -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;
+}
@@ -0,0 +1,4 @@
+export enum ViewType {
+  Contents = "contents",
+  Media = "media"
+}
@@ -1,3 +1,5 @@
 export * from './Page';
 export * from './Settings';
+export * from './SortingOption';
 export * from './Status';
+export * from './ViewType';
@@ -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
 });
@@ -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
 });
@@ -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
 });
@@ -0,0 +1,9 @@
+import { selector } from 'recoil';
+import { PageAtom } from '..';
+
+export const PageSelector = selector({
+  key: 'PageSelector',
+  get: ({get}) => {
+    return get(PageAtom);
+  }
+});
@@ -5,6 +5,7 @@ export * from './GroupingSelector';
 export * from './LoadingSelector';
 export * from './MediaFoldersSelector';
 export * from './MediaTotalSelector';
+export * from './PageSelector';
 export * from './SearchSelector';
 export * from './SelectedMediaFolderSelector';
 export * from './SettingsSelector';
@@ -1,29 +1,28 @@
 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_FOLDERS, 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';
 import { openFileInEditor } from '../helpers/openFileInEditor';
 import { WebviewHelper } from '@estruyf/vscode';
 import { Extension } from '../helpers/Extension';
-import { dirname, join } from 'path';
-import { existsSync } from 'fs';
 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;

@@ -110,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;
@@ -217,7 +222,6 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
    const wsFolder = Folders.getWorkspaceFolder();
    const filePath = window.activeTextEditor?.document.uri.fsPath;
    const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
-    const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDERS);
    const contentTypes = Settings.get<string>(SETTING_TAXONOMY_CONTENT_TYPES);
    
    const articleDetails = this.getArticleDetails();
@@ -245,28 +249,42 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
      const contentType = ArticleHelper.getContentType(updatedMetadata);
      if (contentType) {
        const imageFields = contentType.fields.filter((field) => field.type === "image");
+
        for (const field of imageFields) {
          if (updatedMetadata[field.name]) {
-            const staticPath = join(wsFolder.fsPath, staticFolder || "", updatedMetadata[field.name]);
-            const contentFolderPath = filePath ? join(dirname(filePath), updatedMetadata[field.name]) : null;
+            const imageData = ImageHelper.allRelToAbs(field, updatedMetadata[field.name])

-            let previewUri = null;
-            if (existsSync(staticPath)) {
-              previewUri = Uri.file(staticPath);
-            } else if (contentFolderPath && existsSync(contentFolderPath)) {
-              previewUri = Uri.file(contentFolderPath);
-            }
+            if (imageData) {
+              if (field.multiple && imageData instanceof Array) {
+                const preview = imageData.map(preview => preview && preview.absPath ? ({ 
+                  ...preview,
+                  webviewUrl: this.panel?.webview.asWebviewUri(preview.absPath).toString()
+                }) : null);

-            if (previewUri) {
-              const preview = this.panel?.webview.asWebviewUri(previewUri);
-              updatedMetadata[field.name]= preview?.toString() || "";
+                updatedMetadata[field.name] = preview || [];
+              } else if (!field.multiple && !Array.isArray(imageData) && imageData.absPath) {
+                const preview = this.panel?.webview.asWebviewUri(imageData.absPath);
+                updatedMetadata[field.name] = {
+                  ...imageData,
+                  webviewUrl: preview ? preview.toString() : null
+                };
+              }
            } else {
-              updatedMetadata[field.name] = "";
+              updatedMetadata[field.name] = field.multiple ? [] : "";
            }
          }          
        }
      }
    }
+
+    // Check slug
+    if (!updatedMetadata[DefaultFields.Slug]) {
+      const slug = Article.getSlug();
+
+      if (slug) {
+        updatedMetadata[DefaultFields.Slug] = slug;
+      }
+    }
    
    this.postWebviewMessage({ command: Command.metadata, data: {
      ...updatedMetadata
@@ -295,7 +313,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
  /**
   * Update the metadata of the article
   */
-  public async updateMetadata({field, value}: { field: string, value: string }) {
+  public async updateMetadata({field, value }: { field: string, value: any, fieldData?: { multiple: boolean, value: string[] } }) {
    if (!field) {
      return;
    }
@@ -312,14 +330,33 @@ export class ExplorerView implements WebviewViewProvider, Disposable {

    const contentType = ArticleHelper.getContentType(article.data);
    const dateFields = contentType.fields.filter((field) => field.type === "datetime");
+    const imageFields = contentType.fields.filter((field) => field.type === "image" && field.multiple);

    for (const dateField of dateFields) {
      if ((field === dateField.name) && value) {
        article.data[field] = Article.formatDate(new Date(value));
-      } else {
+      } else if (!imageFields.find(f => f.name === field)) {
+        // Only override the field data if it is not an multiselect image field
        article.data[field] = value;
      }
    }
+
+    for (const imageField of imageFields) {
+      if (field === imageField.name) {
+        // If value is an array, it means it comes from the explorer view itself (deletion)
+        if (Array.isArray(value)) {
+          article.data[field] = value || [];
+        } else { // Otherwise it is coming from the media dashboard (addition)
+          let fieldValue = article.data[field];
+          if (fieldValue && !Array.isArray(fieldValue)) {
+            fieldValue = [fieldValue];
+          }
+          const crntData = Object.assign([], fieldValue);
+          const allRelPaths = [...(crntData || []), value];
+          article.data[field] = [...new Set(allRelPaths)].filter(f => f);
+        }
+      }
+    }
    
    ArticleHelper.update(editor, article);
    this.pushMetadata(article.data);
@@ -330,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);
      }
    }
  }
@@ -385,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
@@ -399,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,
@@ -408,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
    });
  }
@@ -457,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 
@@ -480,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;
@@ -496,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
      };
@@ -511,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;
@@ -611,13 +698,15 @@ 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>
      <html lang="en">
      <head>
-        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'; script-src 'nonce-${nonce}'; style-src ${webView.cspSource} 'self' 'unsafe-inline'; font-src ${webView.cspSource}">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'; script-src 'nonce-${nonce}'; style-src ${webView.cspSource} 'self' 'unsafe-inline'; font-src ${webView.cspSource}; connect-src https://o1022172.ingest.sentry.io">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="${styleResetUri}" rel="stylesheet">
        <link href="${styleVSCodeUri}" rel="stylesheet">
@@ -626,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" />

@@ -1,3 +1,4 @@
+import { ContentType } from './helpers/ContentType';
 import { Dashboard } from './commands/Dashboard';
 import * as vscode from 'vscode';
 import { Article, Settings, StatusListener } from './commands';
@@ -5,7 +6,7 @@ import { Folders } from './commands/Folders';
 import { Preview } from './commands/Preview';
 import { Project } from './commands/Project';
 import { Template } from './commands/Template';
-import { COMMAND_NAME } from './constants/Extension';
+import { COMMAND_NAME } from './constants';
 import { TaxonomyType } from './models';
 import { MarkdownFoldingProvider } from './providers/MarkdownFoldingProvider';
 import { TagType } from './panelWebView/TagType';
@@ -13,6 +14,8 @@ import { ExplorerView } from './explorerView/ExplorerView';
 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; };
@@ -32,6 +35,8 @@ export async function activate(context: vscode.ExtensionContext) {
 	
 	SettingsHelper.init();
 	extension.migrateSettings();
+	
+	SettingsHelper.checkToPromote();

 	collection = vscode.languages.createDiagnosticCollection('frontMatter');

@@ -40,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);
@@ -104,7 +113,11 @@ export async function activate(context: vscode.ExtensionContext) {

 	const unregisterFolder = vscode.commands.registerCommand(COMMAND_NAME.unregisterFolder, Folders.unregister);

-	const createContent = vscode.commands.registerCommand(COMMAND_NAME.createContent, Folders.create);
+	const createFolder = vscode.commands.registerCommand(COMMAND_NAME.createFolder, Folders.addMediaFolder);
+
+	const createByContentType = vscode.commands.registerCommand(COMMAND_NAME.createByContentType, ContentType.createContent);
+	const createByTemplate = vscode.commands.registerCommand(COMMAND_NAME.createByTemplate, Folders.create);
+	const createContent = vscode.commands.registerCommand(COMMAND_NAME.createContent, Content.create);

 	// Initialize command
 	Template.init();
@@ -117,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, () => {
@@ -167,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,
@@ -184,8 +200,11 @@ export async function activate(context: vscode.ExtensionContext) {
 		registerFolder,
 		unregisterFolder,
 		createContent,
+		createByContentType,
+		createByTemplate,
 		projectInit,
-		collapseAll
+		collapseAll,
+		createFolder
 	);
 }

@@ -1,15 +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, 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 {
  
@@ -20,16 +25,16 @@ export class ArticleHelper {
   */
  public static getFrontMatter(editor: vscode.TextEditor) {
    const fileContents = editor.document.getText();  
-    return ArticleHelper.parseFile(fileContents);
+    return ArticleHelper.parseFile(fileContents, editor.document.fileName);
  }

  /**
   * 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);
+    return ArticleHelper.parseFile(file, filePath, surpressNotification);
  }

  /**
@@ -86,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));
@@ -162,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): 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);
      
@@ -192,7 +250,23 @@ export class ArticleHelper {
        }
      }
    } catch (error: any) {
-      Notifications.error(`There seems to be an issue parsing your Front Matter. ERROR: ${error.message || error}`);
+      const items = [{ 
+        title: "Check file", 
+        action: async () => {
+          await EditorHelper.showFile(fileName)
+        } 
+      }];
+
+      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;
  }
@@ -0,0 +1,132 @@
+import { ArticleHelper, Settings } from ".";
+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 { 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 
+   */
+  public static async createContent() {
+    const selectedContentType = await Questions.SelectContentType();
+    if (!selectedContentType) {
+      return;
+    }
+
+    const selectedFolder = await Questions.SelectContentFolder();
+    if (!selectedFolder) {
+      return;
+    }
+
+    const contentTypes = ContentType.getAll();
+    const folders = Folders.get();
+
+    const location = folders.find(f => f.title === selectedFolder);
+    if (contentTypes && location) {
+      const folderPath = Folders.getFolderPath(Uri.file(location.path));
+      const contentType = contentTypes.find(ct => ct.name === selectedContentType);
+      if (folderPath && contentType) {
+        ContentType.create(contentType, folderPath);
+      }
+    }
+  }
+
+  /**
+   * Retrieve all content types
+   * @returns 
+   */
+  public static getAll() {
+    return Settings.get<IContentType[]>(SETTING_TAXONOMY_CONTENT_TYPES);
+  }
+
+  private static async create(contentType: IContentType, folderPath: string) {
+
+    const titleValue = await Questions.ContentTitle();
+    if (!titleValue) {
+      return;
+    }
+
+    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue);
+    if (!newFilePath) {
+      return;
+    }
+
+    let data: any = {};
+
+    for (const field of contentType.fields) {
+      if (field.name === "title") {
+        data[field.name] = titleValue;
+      } else {
+        data[field.name] = null;
+      }
+    }
+
+    data = ArticleHelper.updateDates(Object.assign({}, data));
+
+    if (contentType.name !== DEFAULT_CONTENT_TYPE_NAME) {
+      data['type'] = contentType.name;
+    }
+
+    const content = ArticleHelper.stringifyFrontMatter(``, data);
+
+    writeFileSync(newFilePath, content, { encoding: "utf8" });
+
+    const txtDoc = await workspace.openTextDocument(Uri.parse(newFilePath));
+    if (txtDoc) {
+      window.showTextDocument(txtDoc);
+    }
+
+    Notifications.info(`Your new content has been created.`);
+  }
+}
@@ -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.`);
+    }
+  }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Elio Struyf	35b3813022	Merge pull request #184 from estruyf/dev	2021-11-23 20:02:10 +01:00
Elio Struyf	f0472fe89b	Merge branch 'dev' of github.com:estruyf/vscode-front-matter into dev	2021-11-23 20:00:04 +01:00
Elio Struyf	7bdb2fa025	Updated changelog for new 5.6.0 release	2021-11-23 19:59:11 +01:00
Elio Struyf	5ba7ad449a	Updated changelog	2021-11-23 19:56:13 +01:00
Elio Struyf	145441d55e	Updated package sorting	2021-11-22 17:12:29 +01:00
Elio Struyf	62ff3419c1	#181 - Support for custom taxonomy fields added	2021-11-22 16:43:30 +01:00
Elio Struyf	34aee134d6	#183 - Updated changelog	2021-11-22 08:09:20 +01:00
Elio Struyf	5899120d87	Updated sort setting	2021-11-21 18:58:39 +01:00
Elio Struyf	816a2fefe7	#182 - Support default sort option	2021-11-21 17:56:49 +01:00
Elio Struyf	1f64e59917	Fix sorting object	2021-11-21 17:28:02 +01:00
Elio Struyf	5e54334fb9	#97 - Support for folder scripts added	2021-11-21 12:07:24 +01:00
Elio Struyf	d354af306f	Update changelog	2021-11-21 11:35:16 +01:00
Elio Struyf	045cece0ce	#97 - Custom scripts to support media management	2021-11-21 11:32:56 +01:00
Elio Struyf	506012200f	First steps to allow custom scripts for media files	2021-11-20 16:59:41 +01:00
Elio Struyf	4ad2f0d495	Remove image compress icon	2021-11-19 16:36:32 +01:00
Elio Struyf	b00e3cfd4b	Image compression icon test	2021-11-19 16:02:56 +01:00
Elio Struyf	bb05489872	Fix postinstall	2021-11-19 15:49:12 +01:00
Elio Struyf	ede4d417bd	Various updates	2021-11-19 15:45:08 +01:00
Elio Struyf	928072fa27	#178 - Type fixes	2021-11-18 19:55:56 +01:00
Elio Struyf	6a313fcc8a	#178 - Making it faster	2021-11-18 19:53:37 +01:00
Elio Struyf	725f7f4915	#178 - Revert sorting implementation	2021-11-18 17:23:05 +01:00
Elio Struyf	b9cb0ea16d	#180 - Filename placeholder added	2021-11-18 16:42:34 +01:00
Elio	61b80795a4	#178 - Windows support with PowerShell added	2021-11-18 16:24:45 +01:00
Elio Struyf	8daaa23774	#178 - macOS and Linux support for date retrieval	2021-11-18 12:56:23 +01:00
Elio Struyf	8a0d308ceb	#178 - Sorting for media files	2021-11-17 14:18:04 +01:00
Elio Struyf	e6a7a9aae7	#179 - New open dashboard icon	2021-11-17 10:03:19 +01:00
Elio Struyf	f3943bd846	5.6.0	2021-11-17 09:07:47 +01:00
Elio Struyf	d2ae94df34	Merge pull request #177 from estruyf/dev	2021-11-15 10:42:15 +01:00
Elio Struyf	f799613b1a	Update changelog	2021-11-15 10:38:46 +01:00
Elio Struyf	3f057a01d8	Removed char	2021-11-12 15:36:51 +01:00
Elio Struyf	3ad5136735	#173 - Persistent sorting	2021-11-12 12:11:46 +01:00
Elio Struyf	e201ce6f83	updated changelog	2021-11-12 10:55:26 +01:00
Elio Struyf	383a3a7d4c	Updated changelog	2021-11-10 15:19:12 +01:00
Elio Struyf	8261f1de1b	#173 - Allow to specify your own sorting	2021-11-10 15:18:35 +01:00
Elio Struyf	5b38e6fa56	Updated changelog	2021-11-10 11:55:33 +01:00
Elio Struyf	717f34bc85	#174 - Enhancement for excluding sub-directories	2021-11-10 11:54:39 +01:00
Elio Struyf	47fb2a90a9	5.5.0	2021-11-10 11:16:24 +01:00
Elio Struyf	85a7221895	Updated flows	2021-11-09 10:02:38 +01:00
Elio Struyf	9618a89528	Merge pull request #169 from estruyf/dev	2021-11-05 09:25:09 +01:00
Elio Struyf	14f0af2754	Updated changelog	2021-11-05 09:24:26 +01:00
Elio Struyf	ebe248670d	5.4.0	2021-11-03 12:00:56 +01:00
Elio Struyf	511960c4a9	#167 - Allow to set a preview path per content type	2021-11-03 12:00:49 +01:00
Elio Struyf	31fd1f93ce	Url joining	2021-11-02 16:32:36 +01:00
Elio Struyf	6625b69170	#166 - Filename and folder logic for slug	2021-11-02 13:48:52 +01:00
Elio Struyf	9e8533fbb8	Updated changelog	2021-11-02 11:58:43 +01:00
Elio Struyf	9c9cbb7dcb	#166 - Add preview button to panel when no markdown file is opened	2021-11-02 11:56:40 +01:00
Elio Struyf	079a13e161	Merge pull request #164 from estruyf/dev Merge for 5.3.1	2021-10-29 10:25:17 +02:00
Elio Struyf	69c1e587d0	5.3.1	2021-10-29 10:18:31 +02:00
Elio Struyf	3996252531	#163 - Set workspace state instead of global	2021-10-29 10:18:20 +02:00
Elio Struyf	4fddda65e6	Merge pull request #162 from estruyf/dev 5.3.0 merge	2021-10-28 15:33:06 +02:00
Elio Struyf	5916344092	added release notes	2021-10-28 12:00:24 +02:00
Elio Struyf	b96722dd69	#158 - Update boolean field check	2021-10-27 11:42:57 +02:00
Elio Struyf	263ccab311	5.3.0	2021-10-26 15:59:45 +02:00
Elio Struyf	3571af82c7	Updated readme	2021-10-26 15:59:31 +02:00
Elio Struyf	c60520c0ff	Fix replace in action button	2021-10-26 15:28:01 +02:00
Elio Struyf	b473431eae	#159 - SEO enhancements	2021-10-26 14:42:01 +02:00
Elio Struyf	cbf434f741	Updated changelog	2021-10-25 12:54:19 +02:00
Elio Struyf	04c401207f	#158 - New draft field setting + choice implementation	2021-10-25 12:53:04 +02:00
Elio Struyf	7291e6aac6	Fix tag replacement	2021-10-25 10:24:08 +02:00
Elio Struyf	a7aab96f0e	Fix time formatting	2021-10-25 10:11:31 +02:00
Elio Struyf	f500749644	Fix slug punctuation	2021-10-20 15:21:27 +02:00
Elio Struyf	47e59bc54c	Merge pull request #157 from estruyf/dev Merge for v5.2.0 release	2021-10-19 15:41:12 +02:00
Elio Struyf	8902e25021	Release 5.2.0	2021-10-19 15:40:17 +02:00
Elio Struyf	33093e1eb4	Change useEffect order	2021-10-19 14:56:49 +02:00
Elio Struyf	d36178c44f	Added component display names for better error reporting	2021-10-19 14:46:47 +02:00
Elio Struyf	15b09ccc75	#156 - Fix for media files in new folder	2021-10-19 11:04:05 +02:00
Elio Struyf	dffa6c87a0	Fix for rendering less hooks	2021-10-19 08:45:32 +02:00
Elio Struyf	c4a1caee09	Remove console	2021-10-18 14:33:32 +02:00
Elio Struyf	1d9f07b86d	#155 - Fallback image	2021-10-18 14:29:54 +02:00
Elio Struyf	a794a95bb8	#154 - Implementation of the bulk script execution	2021-10-18 10:13:34 +02:00
Elio Struyf	40a56f6057	Fix SEO keyword check	2021-10-17 19:51:41 +02:00
Elio Struyf	82353f7b64	validate date	2021-10-17 15:31:19 +02:00
Elio Struyf	82a22da90a	check the value of remove puntuation	2021-10-17 15:28:05 +02:00
Elio Struyf	380e40ea05	update changelog	2021-10-17 15:25:22 +02:00
Elio Struyf	2bedb23341	#153 - Support old date-fns format	2021-10-17 15:24:26 +02:00
Elio Struyf	1110b76364	Update changelog	2021-10-15 16:14:42 +02:00
Elio Struyf	d19e632f80	#151 #152 - Framework detection + preset public folder	2021-10-15 16:11:59 +02:00
Elio Struyf	4e040b5f7a	5.2.0	2021-10-15 14:02:08 +02:00
Elio Struyf	7a2a0934c2	Merge pull request #150 from estruyf/dev Merge for 5.1.1	2021-10-14 16:24:29 +02:00
Elio Struyf	d3eb7b223c	5.1.1	2021-10-14 16:23:51 +02:00
Elio Struyf	f74eec954f	#149 - Fix keywords	2021-10-14 16:23:28 +02:00
Elio Struyf	864c4e7aa6	Merge pull request #148 from estruyf/dev Merge for v5.1.0	2021-10-13 11:34:29 +02:00
Elio Struyf	5667906caf	Update changelog for release	2021-10-13 10:46:06 +02:00
Elio Struyf	2fe7c524e7	#147 - Error boundary added for metadata fields	2021-10-13 09:05:32 +02:00
Elio Struyf	5cc83526ad	Merge branch 'dev' of github.com:estruyf/vscode-front-matter into dev	2021-10-13 08:27:48 +02:00
Elio Struyf	76b5e99a08	File check	2021-10-13 08:27:18 +02:00
Elio Struyf	7d5505d421	Updated changelog	2021-10-12 20:34:15 +02:00
Elio Struyf	d97a11f8b5	#146 - Date parsing logic added with fallbacks	2021-10-12 20:34:06 +02:00
Elio Struyf	0590cec684	Add version and environment details	2021-10-12 19:49:34 +02:00
Elio Struyf	b4cdc4feb9	Version fixes	2021-10-12 15:52:54 +02:00
Elio Struyf	986fd95524	#145 - Moved folder registration settings	2021-10-12 15:22:43 +02:00
Elio Struyf	f51fec5fb9	Fix issue in sorting of taxonomy picker	2021-10-12 10:50:42 +02:00
Elio Struyf	8198ce2af3	Added VSCode webcomponents	2021-10-12 10:23:55 +02:00
Elio Struyf	defffc4c8e	Remove unused settings	2021-10-12 09:12:18 +02:00
Elio Struyf	8f47cbfb0b	#141 - Merge content creation logic to ArticleHelper	2021-10-12 09:11:47 +02:00
Elio Struyf	0be91c17d0	#141 - Added support for page bundles with templates	2021-10-11 21:40:05 +02:00
Elio Struyf	fae7ab8417	Date to string fix	2021-10-11 17:49:45 +02:00
Elio Struyf	df239f2cc0	#144 - Pass a default value when null	2021-10-11 11:10:47 +02:00
Elio Struyf	70099dc97f	#144 - Fix date value issue	2021-10-11 11:08:45 +02:00
Elio Struyf	c11be0e3ec	#143 - Fix for recent files unique values	2021-10-11 10:55:58 +02:00
Elio Struyf	f8b7870180	Updated changlog	2021-10-11 10:50:28 +02:00
Elio Struyf	c58a5c62d9	#142 - Fix for unknown tags	2021-10-11 10:49:46 +02:00
Elio Struyf	ce92444bf2	Updated dashboard icon	2021-10-11 10:39:50 +02:00
Elio Struyf	b2709ebffd	#141 - Support opening of the page bundle folder	2021-10-11 10:21:40 +02:00
Elio Struyf	2b20cf9d24	Updated changelog	2021-10-11 09:21:56 +02:00
Elio Struyf	f4a499ad0f	5.1.0	2021-10-11 09:20:48 +02:00
Elio Struyf	4494b158c0	#141 - Page bundle functionality	2021-10-11 09:20:42 +02:00
Elio Struyf	3416e55264	Fix rending more hooks	2021-10-08 15:30:56 +02:00
Elio Struyf	9b53e31cd5	Merge pull request #138 from estruyf/dev Merge for v5.0.0 release	2021-10-07 14:11:47 +02:00
Elio Struyf	f49b93b042	Added release date	2021-10-07 14:06:01 +02:00
Elio Struyf	a005930c14	Added small icon	2021-10-07 14:05:12 +02:00
Elio Struyf	9dea1ee6ed	Update logo	2021-10-07 08:46:05 +02:00
Elio Struyf	1ea0999d17	#137 - Ask to move the templates foler into frontmatter	2021-10-06 21:03:17 +02:00
Elio Struyf	2e6a466ba5	New sponsor added	2021-10-06 13:51:33 +02:00
Elio Struyf	fbcd430dc6	Style fix for preview images	2021-10-06 11:42:57 +02:00
Elio Struyf	2bd910db47	Update changelog	2021-10-06 11:35:04 +02:00
Elio Struyf	8158c9a483	#135 - Hidden property added for fields	2021-10-06 11:34:34 +02:00
Elio Struyf	4622fbe757	Version check when migration is running	2021-10-06 09:00:08 +02:00
Elio	97a635c2de	Making sure paths are parsed for Windows	2021-10-05 20:20:31 +02:00
Elio	e8c67c75fd	Fix file path issues for windows + open file with parsing error	2021-10-05 19:58:25 +02:00
Elio Struyf	6151ecb4c1	#132 - Open only an existing folder	2021-10-05 13:45:42 +02:00
Elio Struyf	1d8c192c07	#134 - Promote settings question	2021-10-05 13:26:11 +02:00
Elio Struyf	014911b7a9	#133 - Fix for overriding default content type settings	2021-10-05 13:23:58 +02:00
Elio Struyf	7b2d7b8aa5	#132 - Drag and drop fix	2021-10-05 09:12:03 +02:00
Elio Struyf	caceed2d4c	Updated changelog	2021-10-05 08:46:54 +02:00
Elio Struyf	476ec6c2fd	#132 - Persist the last opened folder location	2021-10-05 08:44:30 +02:00
Elio Struyf	5374edfa01	5.0.0	2021-10-05 08:11:35 +02:00
Elio Struyf	6a0cac9dfb	Updated version	2021-10-05 08:11:32 +02:00
Elio Struyf	b525a6a211	#131 #132 - Changes to media dashboard	2021-10-04 20:57:54 +02:00
Elio Struyf	c295761560	#128 - support multi image selection with isPreviewImage property	2021-10-04 11:46:07 +02:00
Elio Struyf	6154164b4b	#128 - 🚀 multi image selection support	2021-10-04 11:32:52 +02:00
Elio Struyf	05ce2d3537	#126 - Create new content from conent type	2021-10-03 12:55:58 +02:00
Elio Struyf	544f24bcba	#127 - Dashboard action	2021-10-02 17:36:14 +02:00
Elio Struyf	1c354ed976	Link positioning issue	2021-10-01 17:04:29 +02:00
Elio Struyf	9b9bf1bfbe	Include error tracing	2021-10-01 15:28:00 +02:00
Elio Struyf	29d5f02d10	#124 - Update preview image	2021-10-01 14:50:57 +02:00
Elio Struyf	9bc2fbc141	Remove unused references	2021-10-01 13:15:10 +02:00
Elio Struyf	cac009b773	#110 - Support for workspaces with multiple folders	2021-10-01 10:18:48 +02:00
Elio Struyf	bf1639cac7	Update changelog	2021-09-30 16:27:17 +02:00
Elio Struyf	5f28e145c4	#124 - Add support to specify preview image	2021-09-30 16:26:21 +02:00
Elio Struyf	8199ab964e	Placeholder styling	2021-09-30 15:52:54 +02:00
Elio Struyf	14c050e34b	#122 - Check if file already exists	2021-09-30 15:52:41 +02:00
Elio Struyf	b96411d1f9	#122 - Update media filename	2021-09-30 12:26:58 +02:00
Elio Struyf	87c469a6c7	Remove log	2021-09-30 10:12:00 +02:00
Elio Struyf	c29aef03f0	Changed img description to caption	2021-09-30 10:05:06 +02:00
Elio Struyf	9eaf94de7a	#119 #121 - Choice field enhancements	2021-09-30 09:34:00 +02:00
Elio Struyf	f5e7526fae	#120 - Fix for choice and number field	2021-09-30 08:41:35 +02:00
Elio Struyf	579e4925c8	Updated readme	2021-09-29 09:52:33 +02:00
Elio Struyf	4a4c558d9d	Fix field type	2021-09-28 15:57:37 +02:00
Elio Struyf	9bb34850e2	Updated changelog	2021-09-28 09:01:44 +02:00
Elio Struyf	c6e37532bc	#113 - Move the database init code	2021-09-27 18:23:36 +02:00
Elio Struyf	221f962beb	updated changelog	2021-09-27 16:25:38 +02:00
Elio Struyf	17566279e2	Updated dependencies	2021-09-27 16:23:35 +02:00
Elio Struyf	4e7488414d	#113 - Implemented local database for media	2021-09-27 16:22:23 +02:00
Elio Struyf	c206817431	#117 - Added single line support	2021-09-27 09:23:09 +02:00
				`@@ -0,0 +1 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#02aeb7;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#02aeb7"/></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#C5C5C5"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#C5C5C5" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#C5C5C5"/></svg>
				`@@ -0,0 +1 @@`
				`export const HOME_PAGE_NAVIGATION_ID = "FrontMatter:RootFolder";`