Merge pull request #344 from estruyf/dev

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: 'Issue: '
-labels: ''
+labels: 'bug'
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,7 +2,7 @@
 name: Feature request
 about: Suggest an idea for this project
 title: 'Enhancement: '
-labels: ''
+labels: 'enhancement'
 assignees: ''
 
 ---

.github/workflows/project-labelling.yml

@@ -0,0 +1,27 @@
+name: Project labelling
+
+on:
+  project_card:
+    types: [created, moved, deleted]
+
+jobs:
+  automate-issues-labels:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Fetch project data
+        run: |
+          echo 'PROJECT_DATA<<EOF' >> $GITHUB_ENV
+          curl --request GET --url '${{ github.event.project_card.project_url }}' --header 'Authorization: token ${{ secrets.GITHUB_TOKEN }}' >> $GITHUB_ENV
+          echo 'EOF' >> $GITHUB_ENV
+
+      - name: Add the project label
+        uses: andymckay/labeler@master
+        if: ${{ contains(github.event.action, 'created') || contains(github.event.action, 'moved') }}
+        with:
+          add-labels: "Project: ${{ fromJSON(env.PROJECT_DATA).name }}"
+
+      - name: Remove the project label
+        uses: andymckay/labeler@master
+        if: ${{ contains(github.event.action, 'deleted') }}
+        with:
+          remove-labels: "Project: ${{ fromJSON(env.PROJECT_DATA).name }}"

.vscode/extensions.json

@@ -2,6 +2,7 @@
 	// See http://go.microsoft.com/fwlink/?LinkId=827846
 	// for the documentation about the extensions.json format
 	"recommendations": [
-		"ms-vscode.vscode-typescript-tslint-plugin"
+		"ms-vscode.vscode-typescript-tslint-plugin",
+		"eliostruyf.vscode-typescript-exportallmodules"
 	]
 }

CHANGELOG.md

@@ -1,5 +1,95 @@
 # Change Log
 
+## [7.3.1] - 2022-05-26
+
+### 🐞 Fixes
+
+- [#343](https://github.com/estruyf/vscode-front-matter/issues/343): Fix in the schema for the `frontMatter.taxonomy.fieldGroups` setting
+
+## [7.3.0] - 2022-05-25 - [Release notes](https://beta.frontmatter.codes/updates/v7.3.0)
+
+### 🎨 Enhancements
+
+- JSON schema enhancements for working with data files
+- [#330](https://github.com/estruyf/vscode-front-matter/issues/330): Allow custom scripts to easily update front matter
+- [#331](https://github.com/estruyf/vscode-front-matter/issues/331): Added functionality to run other type of scripts
+- [#332](https://github.com/estruyf/vscode-front-matter/issues/332): New `dataFile` field which allows you to create data file references
+- [#333](https://github.com/estruyf/vscode-front-matter/issues/333): Automatically mark Jekyll posts in `_drafts` folder as draft
+- [#335](https://github.com/estruyf/vscode-front-matter/issues/335): Merge media snippets with content snippets to allow you to define multiple media snippets and use these in your content
+- [#336](https://github.com/estruyf/vscode-front-matter/issues/336): Support added for inverting the draft field so that SSGs/authors can use a published field instead
+- [#337](https://github.com/estruyf/vscode-front-matter/issues/337): Allow multiple front matter types to be used
+- [#338](https://github.com/estruyf/vscode-front-matter/issues/338): Ability to disable the templates functionality (default is disabled)
+- [#340](https://github.com/estruyf/vscode-front-matter/issues/340): Show an error message when there is a content folder registered that does not exist in the project
+
+### 🐞 Fixes
+
+- [#334](https://github.com/estruyf/vscode-front-matter/issues/334): Fix for locked content folders retrieval
+- [#339](https://github.com/estruyf/vscode-front-matter/issues/339): Fix for content folders without a title
+
+
+## [7.2.0] - 2022-05-02 - [Release notes](https://beta.frontmatter.codes/updates/v7.2.0)
+
+### 🎨 Enhancements
+
+- New tag design for the tags, category, and taxonomy fields
+- [#263](https://github.com/estruyf/vscode-front-matter/issues/263): WYSIWYG string field option
+- [#308](https://github.com/estruyf/vscode-front-matter/issues/308): New `File` field
+- [#314](https://github.com/estruyf/vscode-front-matter/issues/314): New preview actions to open the page in the browser and refresh the preview
+- [#322](https://github.com/estruyf/vscode-front-matter/issues/322): Show parent folder name when file is an index page (`index.md` / `_index.md`)
+- [#323](https://github.com/estruyf/vscode-front-matter/issues/323): Added 11ty, jekyll, and docusaurus to the framework selection list
+- [#325](https://github.com/estruyf/vscode-front-matter/issues/325): Better welcome experience that allows you to add content folders straight from the welcome view
+- [#326](https://github.com/estruyf/vscode-front-matter/issues/326): Content type actions to create, update, or set according to the current file
+
+### ⚡️ Optimizations
+
+- [#316](https://github.com/estruyf/vscode-front-matter/issues/316): Suppress file parsing errors when closing the dashboard
+
+### 🐞 Fixes
+
+- Updated JSON schema link to supported version by VS Code (draft-07)
+- Hide the view mode action from the Front Matter panel if no custom modes are defined
+- Fix in decode base64 uploaded video files
+- Fix for a lightbox on other types of documents (pdf, etc.)
+- Fix for hiding the image preview on slide-over for none image documents
+- [#324](https://github.com/estruyf/vscode-front-matter/issues/324): Fix for the framework selection on the welcome screen
+
+## [7.1.2] - 2022-04-11
+
+### 🐞 Fixes
+
+- [#315](https://github.com/estruyf/vscode-front-matter/issues/315): Fix draft tab navigation
+
+## [7.1.1] - 2022-04-08
+
+### 🐞 Fixes
+
+- Fix in menu item with `stopPropagation` not defined.
+
+## [7.1.0] - 2022-04-07 - [Release notes](https://beta.frontmatter.codes/updates/v7.1.0)
+
+### 🎨 Enhancements
+ 
+- [#240](https://github.com/estruyf/vscode-front-matter/issues/240): Capability added to define display modes
+- [#246](https://github.com/estruyf/vscode-front-matter/issues/246): Support to add multiple tags/keywords/taxonomy via comma separated values
+- [#293](https://github.com/estruyf/vscode-front-matter/issues/293): Support added for setting preview images in block fields
+- [#294](https://github.com/estruyf/vscode-front-matter/issues/294): Full-text search allows you to search through all your page content
+- [#297](https://github.com/estruyf/vscode-front-matter/issues/297): SEO Keywords input got moved to the SEO section
+- [#301](https://github.com/estruyf/vscode-front-matter/issues/301): Show tags on the content cards
+- [#303](https://github.com/estruyf/vscode-front-matter/issues/303): Content card actions to quickly view, delete, or run custom scripts
+- [#310](https://github.com/estruyf/vscode-front-matter/issues/310): Supported mime types for media dashboard
+
+### ⚡️ Optimizations
+
+- [#296](https://github.com/estruyf/vscode-front-matter/issues/296): Loading optimization of the content dashboard
+
+### 🐞 Fixes
+
+- [#302](https://github.com/estruyf/vscode-front-matter/issues/302): Fix for spinner when navigating between tabs
+- [#304](https://github.com/estruyf/vscode-front-matter/issues/304): Fix yaml stringify which caused additional fields to be added
+- [#305](https://github.com/estruyf/vscode-front-matter/issues/305): Fix for overflow issue in taxonomy picker
+- [#306](https://github.com/estruyf/vscode-front-matter/issues/306): Fix for default value of content type fields
+- [#311](https://github.com/estruyf/vscode-front-matter/issues/311): Fix for updating snippets 
+
 ## [7.0.0] - 2022-03-21 - [Release notes](https://beta.frontmatter.codes/updates/v7.0.0)
 
 ### ✨ New Features

README.beta.md

@@ -166,24 +166,7 @@ You can open showcase issues for the following things:
 ## 🖤 Backers & Sponsors 👇 🤘
 
 <p align="center">
-  <a href="https://github.com/jmatthewpryor" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/850570" />
-  </a>
-  <a href="https://github.com/apowell656" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1969515" />
-  </a>
-  <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/grahampcharles" title="Graham Charles">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/3606679?v=4" />
-  </a>
-  <a href="https://github.com/zivbk1" title="Bryan Klein">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/6154767" />
-  </a>
-  <a href="https://github.com/flikteoh" title="FlikTeoh">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
-  </a>
+  <img src="https://frontmatter.codes/api/img-sponsors" />
 </p>
 
 <br />

README.md

@@ -164,24 +164,7 @@ You can open showcase issues for the following things:
 ## 🖤 Backers & Sponsors 👇 🤘
 
 <p align="center">
-  <a href="https://github.com/jmatthewpryor" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/850570" />
-  </a>
-  <a href="https://github.com/apowell656" title="Andre Powell">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1969515" />
-  </a>
-  <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/grahampcharles" title="Graham Charles">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/3606679?v=4" />
-  </a>
-  <a href="https://github.com/zivbk1" title="Bryan Klein">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/6154767" />
-  </a>
-  <a href="https://github.com/flikteoh" title="FlikTeoh">
-    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
-  </a>
+  <img src="https://frontmatter.codes/api/img-sponsors" />
 </p>
 
 <br />

assets/frontmatter-mag-min.svg

@@ -1 +0,0 @@
-<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>

assets/frontmatter-mag.svg

@@ -1 +0,0 @@
-<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>

assets/frontmatter-short-min.svg

@@ -1,16 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 26.1.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 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
+<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.6s15,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"/>
+	s-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.8s-14.2-97.6-20.3-149.9
+	l-34.3,641.6H529.6L602.2,151.2z"/>
+<rect x="119.4" y="0.1" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="395.7" y="0.1" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="675.3" y="0.1" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="119.4" y="1184.7" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="395.7" y="1184.7" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="675.3" y="1184.7" fill="#C5C5C5" width="184" height="64.7"/>
 </svg>

assets/frontmatter-teal-min.svg

@@ -1 +0,0 @@
-<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>

assets/frontmatter.svg

@@ -1 +0,0 @@
-<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>

assets/icons/frontmatter-dark.svg

@@ -1 +0,0 @@
-<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>

assets/icons/frontmatter-light.svg

@@ -1 +0,0 @@
-<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>

assets/icons/frontmatter-short-dark.svg

@@ -1,12 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 26.1.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 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
+<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.6s15,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"/>
+	s-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.8s-14.2-97.6-20.3-149.9
+	l-34.3,641.6H529.6L602.2,151.2z"/>
+<rect x="119.4" y="0.1" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="395.7" y="0.1" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="675.3" y="0.1" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="119.4" y="1184.7" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="395.7" y="1184.7" fill="#C5C5C5" width="184" height="64.7"/>
+<rect x="675.3" y="1184.7" fill="#C5C5C5" width="184" height="64.7"/>
 </svg>

assets/icons/frontmatter-short-light.svg

@@ -1,12 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 26.1.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 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
+<path fill="#424242" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6s15,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"/>
+	s-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.8s-14.2-97.6-20.3-149.9
+	l-34.3,641.6H529.6L602.2,151.2z"/>
+<rect x="119.4" y="0.1" fill="#424242" width="184" height="64.7"/>
+<rect x="395.7" y="0.1" fill="#424242" width="184" height="64.7"/>
+<rect x="675.3" y="0.1" fill="#424242" width="184" height="64.7"/>
+<rect x="119.4" y="1184.7" fill="#424242" width="184" height="64.7"/>
+<rect x="395.7" y="1184.7" fill="#424242" width="184" height="64.7"/>
+<rect x="675.3" y="1184.7" fill="#424242" width="184" height="64.7"/>
 </svg>

assets/icons/frontmatter-small-dark.svg

@@ -8,4 +8,4 @@
 	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>
+</svg>

assets/media/styles.css

@@ -30,7 +30,7 @@
 }
 
 .inherit {
-  position: relative !important;
+  position: inherit !important;
 }
 
 .z-10 { z-index: 10 !important; }
@@ -143,12 +143,13 @@
 }
 
 .article__tags {
-  position: relative;
+  /* position: relative; */
   margin-bottom: 1rem;
 }
 
 .article__tags__dropbox {
-  width: 90%;
+  /* Minus the twice the padding */
+  width: calc(100% - 2.5rem);
   margin: 0;
   padding: 0;
   z-index: 1;
@@ -172,20 +173,21 @@
 
 .article__tags__input.freeform {
   position: relative;
+  outline: 1px solid var(--vscode-inputValidation-infoBorder);
+  outline-offset: -1px;
 }
 
 .article__tags__input.freeform input {
   padding-right: 35px;
+  border: 0;
 }
 
 .article__tags__input button {
   position: absolute;
-  bottom: 1px;
-  top: 1px;
-  right: 1px;
+  bottom: 0;
+  top: 0;
+  right: 0;
   width: 30px;
-  padding-bottom: 2px; 
-  padding-top: 2px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -219,60 +221,6 @@
   margin-top: 1rem;
 }
 
-.article__tags__items__item {
-  display: inline-flex;
-  margin-bottom: .5rem;
-  margin-right: .5rem;
-}
-
-.article__tags__items__item {
-  display: inline-block;
-  margin-bottom: .5rem;
-  margin-right: .5rem;
-}
-
-.article__tags__items__item_add,
-.article__tags__items__item_delete {
-  display: inline-block;
-  width: auto;
-}
-
-.article__tags__items__item svg {
-  display: inline;
-  vertical-align: bottom;
-}
-
-.article__tags__items__item_delete span {
-  margin-left: .5rem;
-}
-
-.article__tags__items__pill_notexists {
-  color: var(--vscode-inputValidation-errorForeground);
-  background-color: var(--vscode-inputValidation-errorBackground);
-  padding-left: .5rem;
-}
-
-.article__tags__items__pill_notexists:hover {
-  color: var(--vscode-inputValidation-errorForeground);
-  background-color: var(--vscode-inputValidation-errorBackground);
-
-  filter: contrast(60%);
-}
-
-.article__tags__items__item_add {
-  color: var(--vscode-inputValidation-infoForeground);
-  background-color: var(--vscode-inputValidation-infoBackground);
-  border-right: 1px solid var(--vscode-inputValidation-infoBorder);
-}
-
-.article__tags__items__item_add:hover {
-  color: var(--vscode-inputValidation-infoForeground);
-  background-color: var(--vscode-inputValidation-infoBackground);
-  border-right: 1px solid var(--vscode-inputValidation-infoBorder);
-
-  filter: contrast(60%);
-}
-
 .article__actions > * + *,
 .other_actions > * + *,
 .base__actions > * + *,
@@ -353,6 +301,11 @@
   color: var(--vscode-button-secondaryForeground);
 }
 
+.ext_link_block a:hover,
+.ext_link_block button:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
 .table__cell {
   overflow: hidden;
 }
@@ -637,6 +590,7 @@ input:checked + .field__toggle__slider:before {
   max-height: 16rem;
 }
 
+.metadata_field__file__button,
 .metadata_field__preview_image__button {
   background-color: transparent;
   border: 1px dashed var(--vscode-button-background);
@@ -644,11 +598,13 @@ input:checked + .field__toggle__slider:before {
   filter: brightness(85%);
 }
 
+.metadata_field__file__button:hover,
 .metadata_field__preview_image__button:hover {
   background-color: rgba(255, 255, 255, .1);
   filter: brightness(100%);
 }
 
+.metadata_field__file__button svg,
 .metadata_field__preview_image__button svg {
   color: var(--vscode-foreground);
   display: block;
@@ -657,6 +613,7 @@ input:checked + .field__toggle__slider:before {
   margin: 0 auto;
 }
 
+.metadata_field__file__button span,
 .metadata_field__preview_image__button span {
   color: var(--vscode-foreground);
   display: inline-block;
@@ -771,8 +728,12 @@ input:checked + .field__toggle__slider:before {
 }
 
 /* Timepicker */
+.react-datepicker button {
+  outline: 0;
+}
+
 .react-datepicker button:hover {
-  background-color: none !important;
+  background: none !important;
 }
 
 .react-datepicker__triangle {

frontmatter.json

@@ -50,6 +50,28 @@
       ],
       "openingTags": "{{",
       "closingTags": "}}"
+    },
+    "Issue link": {
+      "description": "Link to a GitHub issue",
+      "body": "- [#{{id}}](https://github.com/estruyf/vscode-front-matter/issues/{{id}}): {{title}}",
+      "fields": [
+        {
+          "name": "id",
+          "title": "Issue ID",
+          "type": "string",
+          "single": true,
+          "default": ""
+        },
+        {
+          "name": "title",
+          "title": "Title",
+          "type": "string",
+          "single": true,
+          "default": ""
+        }
+      ],
+      "openingTags": "{{",
+      "closingTags": "}}"
     }
   }
 }

package-lock.json

@@ -1,9 +1,27 @@
 {
   "name": "vscode-front-matter-beta",
-  "version": "7.0.0",
+  "version": "7.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@actions/core": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@actions/core/-/core-1.8.2.tgz",
+      "integrity": "sha512-FXcBL7nyik8K5ODeCKlxi+vts7torOkoDAKfeh61EAkAy1HAvwn9uVzZBY0f15YcQTcZZ2/iSGBFHEuioZWfDA==",
+      "dev": true,
+      "requires": {
+        "@actions/http-client": "^2.0.1"
+      }
+    },
+    "@actions/http-client": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.0.1.tgz",
+      "integrity": "sha512-PIXiMVtz6VvyaRsGY268qvj57hXQEpsYogYOu2nrQhlf+XCGmZstmuZBbAybUl1nQGnvS1k1eEsQ69ZoD7xlSw==",
+      "dev": true,
+      "requires": {
+        "tunnel": "^0.0.6"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -55,9 +73,9 @@
       "dev": true
     },
     "@estruyf/vscode": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/@estruyf/vscode/-/vscode-0.0.2.tgz",
-      "integrity": "sha512-Qb2UGiARR0Pxeknjzwq925kxyxWMsASIcCOfwOJGZed7EPhDLc6Zd1v6AReYpkQFyxSUjBVg38dT7dn5bh19fQ==",
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@estruyf/vscode/-/vscode-0.0.3.tgz",
+      "integrity": "sha512-Mak13ZHj/TcyL0snPHsrqELlhpvV1JszZFScCcm1G2dp6UdP4dSk32MlNH5FusGhTIEOI6APE8krldMcZjS/3w==",
       "dev": true,
       "requires": {
         "@types/vscode-webview": "1.57.0"
@@ -584,6 +602,12 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
       "dev": true
     },
+    "@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -636,6 +660,15 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "dev": true,
+      "requires": {
+        "parchment": "^1.1.2"
+      }
+    },
     "@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -1426,6 +1459,12 @@
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
       "dev": true
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true
+    },
     "clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -2280,6 +2319,12 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -2295,6 +2340,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
@@ -2568,12 +2619,12 @@
       "dev": true
     },
     "gray-matter": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.2.tgz",
-      "integrity": "sha512-7hB/+LxrOjq/dd8APlK0r24uL/67w7SkYnfwhNFwg/VDIGWGmduTDYf3WNstLW2fbbmRwrDGCVSJ2isuf2+4Hw==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
       "dev": true,
       "requires": {
-        "js-yaml": "^3.11.0",
+        "js-yaml": "^3.13.1",
         "kind-of": "^6.0.2",
         "section-matter": "^1.0.0",
         "strip-bom-string": "^1.0.0"
@@ -3806,12 +3857,20 @@
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.34",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
-      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
       "requires": {
-        "mime-db": "1.51.0"
+        "mime-db": "1.52.0"
+      },
+      "dependencies": {
+        "mime-db": {
+          "version": "1.52.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+          "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+          "dev": true
+        }
       }
     },
     "mimic-fn": {
@@ -4210,6 +4269,12 @@
         "tslib": "^1.10.0"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "dev": true
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4592,6 +4657,39 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=",
+          "dev": true
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -4693,6 +4791,17 @@
         "warning": "^4.0.2"
       }
     },
+    "react-quill": {
+      "version": "2.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0-beta.4.tgz",
+      "integrity": "sha512-KyAHvAlPjP4xLElKZJefMth91Z6FbbXRvq9OSu6xN3KBaoasLP9p+3dcxg4Ywr4tBlpMGXcPszYSAgd5CpJ45Q==",
+      "dev": true,
+      "requires": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      }
+    },
     "react-sortable-hoc": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz",
@@ -5554,6 +5663,15 @@
         }
       }
     },
+    "tailwindcss-nested-groups": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss-nested-groups/-/tailwindcss-nested-groups-1.2.4.tgz",
+      "integrity": "sha512-SrW9VTgH5/PmW/E0q1+TC7TckhVfonDpiYiLKsRYX57FEcM3LemiH7JYcsTlubM+eAVkd9Jjj03pTiyfnDBibQ==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -5711,6 +5829,12 @@
         "tslib": "^1.8.1"
       }
     },
+    "tunnel": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+      "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
+      "dev": true
+    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

package.json

@@ -3,7 +3,7 @@
   "displayName": "Front Matter",
   "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "7.0.0",
+  "version": "7.3.1",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {
@@ -137,6 +137,10 @@
               "type": "string",
               "description": "Name of the field to use"
             },
+            "invert": {
+              "type": "boolean",
+              "description": "By default the draft field is set to true when the content is a draft. Set this to true to set it to false."
+            },
             "choices": {
               "type": "array",
               "description": "List of choices for the field",
@@ -225,8 +229,7 @@
           "additionalProperties": {
             "type": "object",
             "required": [
-              "body",
-              "fields"
+              "body"
             ],
             "properties": {
               "body": {
@@ -255,6 +258,11 @@
                 "description": "The snippet closing tags.",
                 "type": "string",
                 "default": "]]"
+              },
+              "isMediaSnippet": {
+                "description": "Specify if the snippet is to be used for media files.",
+                "type": "boolean",
+                "default": false
               }
             },
             "additionalProperties": false
@@ -342,7 +350,7 @@
               },
               "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."
+                "description": "Path to the node executable. This is required when using NVM, so that there is no confusion of which node version to use. (deprecated: use the command property instead)"
               },
               "bulk": {
                 "type": "boolean",
@@ -369,6 +377,25 @@
                   "mediaFile"
                 ],
                 "description": "The type for which the script will be used."
+              },
+              "command": {
+                "type": "string",
+                "oneOf": [
+                  {
+                    "enum": [
+                      "node",
+                      "bash",
+                      "powershell",
+                      "python",
+                      "python3"
+                    ]
+                  },
+                  {
+                    "type": "string"
+                  }
+                ],
+                "description": "The type of script you want to execute.",
+                "default": "node"
               }
             },
             "additionalProperties": false,
@@ -379,10 +406,17 @@
           },
           "scope": "Custom scripts"
         },
+        "frontMatter.dashboard.content.cardTags": {
+          "type": "string",
+          "default": "tags",
+          "markdownDescription": "Specify the name of the metadata field that will be used to show the tags on the content card. When empty or null, it will hide the tags from the card. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.dashboard.content.cardTags)",
+          "scope": "Dashboard"
+        },
         "frontMatter.dashboard.mediaSnippet": {
           "type": "array",
           "default": [],
           "markdownDescription": "Specify the a snippet for your custom media insert markup. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.dashboard.mediasnippet)",
+          "deprecationMessage": "This setting is deprecated and will be removed in the next major version. Please define your media snippet in the `frontMatter.content.snippet` setting.",
           "items": {
             "type": "string",
             "description": "Use the `{mediaUrl}`, `{caption}`, `{alt}`, `{filename}`, `{mediaHeight}`, and `{mediaWidth}` placeholders in your snippet to automatically insert the media information."
@@ -420,7 +454,8 @@
               },
               "file": {
                 "type": "string",
-                "description": "Path to the file to load. Only JSON or YAML files are supported."
+                "description": "Path to the file to load. Only JSON or YAML files are supported.",
+                "default": "[[workspace]]/"
               },
               "fileType": {
                 "type": "string",
@@ -432,10 +467,38 @@
                 "description": "Defines how you want to parse the file. JSON is the default."
               },
               "schema": {
+                "$id": "#dataFileSchema",
                 "type": "object",
                 "default": {},
                 "description": "The JSON schema for your data which will be used to render the data form.",
-                "additionalProperties": true
+                "additionalProperties": true,
+                "required": [
+                  "type",
+                  "properties"
+                ],
+                "properties": {
+                  "title": {
+                    "type": "string",
+                    "description": "Title of the form."
+                  },
+                  "type": {
+                    "type": "string",
+                    "description": "Defines the type of the form. Default is 'object'.",
+                    "default": "object"
+                  },
+                  "required": {
+                    "type": "array",
+                    "description": "Defines the required fields for the form.",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "properties": {
+                    "type": "object",
+                    "description": "Defines the fields of the form.",
+                    "additionalProperties": true
+                  }
+                }
               },
               "type": {
                 "type": "string",
@@ -482,13 +545,11 @@
               },
               "path": {
                 "type": "string",
-                "description": "Path to the folder to load files."
+                "description": "Path to the folder to load files.",
+                "default": "[[workspace]]/"
               },
               "schema": {
-                "type": "object",
-                "default": {},
-                "description": "The JSON schema for your data which will be used to render the data form.",
-                "additionalProperties": true
+                "$ref": "#dataFileSchema"
               },
               "type": {
                 "type": "string",
@@ -529,10 +590,7 @@
                 "description": "Your unique ID you want to use for your data type."
               },
               "schema": {
-                "type": "object",
-                "default": {},
-                "description": "The JSON schema for your data which will be used to render the data form.",
-                "additionalProperties": true
+                "$ref": "#dataFileSchema"
               }
             },
             "required": [
@@ -561,6 +619,55 @@
           "default": null,
           "markdownDescription": "Specify the command you want to use to start your static site generator or framework. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.framework.startcommand)"
         },
+        "frontMatter.global.activeMode": {
+          "type": [
+            "string",
+            "null"
+          ],
+          "default": "",
+          "markdownDescription": "Specify the activated mode of Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.global.activemode)",
+          "scope": "Global"
+        },
+        "frontMatter.global.modes": {
+          "type": "array",
+          "default": [],
+          "markdownDescription": "Specify the modes you want to use for Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.global.modes)",
+          "items": {
+            "type": "object",
+            "default": {},
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "The ID of your mode."
+              },
+              "features": {
+                "type": "array",
+                "default": [],
+                "description": "The features you want to use for your mode.",
+                "items": {
+                  "type": "string",
+                  "enum": [
+                    "panel.globalSettings",
+                    "panel.seo",
+                    "panel.actions",
+                    "panel.contentType",
+                    "panel.metadata",
+                    "panel.recentlyModified",
+                    "panel.otherActions",
+                    "dashboard.snippets.view",
+                    "dashboard.snippets.manage",
+                    "dashboard.data.view"
+                  ]
+                }
+              }
+            },
+            "required": [
+              "id",
+              "features"
+            ]
+          },
+          "scope": "Global"
+        },
         "frontMatter.global.notifications": {
           "type": "array",
           "items": {
@@ -591,6 +698,19 @@
           "markdownDescription": "Specify the default sorting option for the media dashboard. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.media.defaultsorting)",
           "scope": "Content"
         },
+        "frontMatter.media.supportedMimeTypes": {
+          "type": "array",
+          "default": [
+            "image/*",
+            "video/*",
+            "audio/*"
+          ],
+          "markdownDescription": "Specify the mime types to support for the media files. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.media.supportedMimeTypes)",
+          "items": {
+            "type": "string"
+          },
+          "scope": "Media"
+        },
         "frontMatter.panel.freeform": {
           "type": "boolean",
           "default": true,
@@ -677,6 +797,7 @@
                         "datetime",
                         "boolean",
                         "image",
+                        "file",
                         "choice",
                         "taxonomy",
                         "tags",
@@ -684,7 +805,8 @@
                         "draft",
                         "fields",
                         "json",
-                        "block"
+                        "block",
+                        "dataFile"
                       ],
                       "description": "Define the type of field"
                     },
@@ -697,7 +819,14 @@
                       "description": "Title to show in the UI"
                     },
                     "default": {
-                      "type": "string",
+                      "type": [
+                        "string",
+                        "number",
+                        "boolean",
+                        "array",
+                        "object",
+                        "null"
+                      ],
                       "description": "Default value"
                     },
                     "choices": {
@@ -728,6 +857,11 @@
                       "default": false,
                       "description": "Is a single line field"
                     },
+                    "wysiwyg": {
+                      "type": "boolean",
+                      "default": false,
+                      "description": "Is a WYSIWYG field (HTML output)"
+                    },
                     "multiple": {
                       "type": "boolean",
                       "default": false,
@@ -748,6 +882,13 @@
                       "default": "",
                       "description": "The ID of your taxonomy field"
                     },
+                    "fileExtensions": {
+                      "type": "array",
+                      "description": "Specify the file extensions to allow for the file picker",
+                      "items": {
+                        "type": "string"
+                      }
+                    },
                     "fields": {
                       "$ref": "#contenttypefield"
                     },
@@ -787,6 +928,21 @@
                       "type": "boolean",
                       "default": false,
                       "description": "Specify if the field is the modified date field"
+                    },
+                    "dataFileId": {
+                      "type": "string",
+                      "default": "",
+                      "description": "Specify the ID of the data file to use for this field"
+                    },
+                    "dataFileKey": {
+                      "type": "string",
+                      "default": "",
+                      "description": "Specify the key of the data file to use for this field"
+                    },
+                    "dataFileValue": {
+                      "type": "string",
+                      "default": "",
+                      "description": "Specify the property name that will be used to show the value for the field"
                     }
                   },
                   "additionalProperties": false,
@@ -795,6 +951,35 @@
                     "name"
                   ],
                   "allOf": [
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "dataFile"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "dataFileId",
+                          "dataFileKey"
+                        ]
+                      }
+                    },
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "file"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "fileExtensions"
+                        ]
+                      }
+                    },
                     {
                       "if": {
                         "properties": {
@@ -989,7 +1174,7 @@
             },
             "additionalProperties": false,
             "required": [
-              "name",
+              "id",
               "fields"
             ]
           }
@@ -1096,6 +1281,12 @@
           "default": "yyyy-MM-dd",
           "markdownDescription": "Specify the prefix you want to add for your new article filenames. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.templates.prefix)",
           "scope": "Templates"
+        },
+        "frontMatter.templates.enabled": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Specify if you want to use templates. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.templates.enabled)",
+          "scope": "Templates"
         }
       }
     },
@@ -1105,6 +1296,30 @@
         "title": "Authenticate",
         "category": "Front matter"
       },
+      {
+        "command": "frontMatter.contenttype.generate",
+        "title": "Generate content type from current file",
+        "category": "Front matter"
+      },
+      {
+        "command": "frontMatter.contenttype.addMissingFields",
+        "title": "Add missing fields from front matter to content type",
+        "category": "Front matter"
+      },
+      {
+        "command": "frontMatter.contenttype.setContentType",
+        "title": "Set the content type to use for the current file",
+        "category": "Front matter"
+      },
+      {
+        "command": "frontMatter.markup.blockquote",
+        "title": "Blockquote",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/blockquote-light.svg",
+          "dark": "assets/icons/blockquote-dark.svg"
+        }
+      },
       {
         "command": "frontMatter.markup.bold",
         "title": "Bold",
@@ -1141,15 +1356,6 @@
           "dark": "assets/icons/codeblock-dark.svg"
         }
       },
-      {
-        "command": "frontMatter.markup.blockquote",
-        "title": "Blockquote",
-        "category": "Front matter",
-        "icon": {
-          "light": "assets/icons/blockquote-light.svg",
-          "dark": "assets/icons/blockquote-dark.svg"
-        }
-      },
       {
         "command": "frontMatter.collapseSections",
         "title": "Collapse sections",
@@ -1159,9 +1365,14 @@
           "dark": "assets/icons/close-dark.svg"
         }
       },
+      {
+        "command": "frontMatter.initTemplate",
+        "title": "Initialize the template folder",
+        "category": "Front matter"
+      },
       {
         "command": "frontMatter.createTemplate",
-        "title": "Create a template from current file",
+        "title": "Create template from current file",
         "category": "Front matter"
       },
       {
@@ -1226,8 +1437,8 @@
         "category": "Front matter"
       },
       {
-        "command": "frontMatter.insertImage",
-        "title": "Insert image into your content",
+        "command": "frontMatter.insertMedia",
+        "title": "Insert media into your content",
         "category": "Front matter",
         "icon": {
           "dark": "/assets/icons/media-dark.svg",
@@ -1276,8 +1487,8 @@
         }
       },
       {
-        "command": "frontMatter.dashboard.snippets",
-        "title": "Open snippets dashboard",
+        "command": "frontMatter.dashboard.media",
+        "title": "Open media dashboard",
         "category": "Front matter",
         "icon": {
           "dark": "/assets/icons/frontmatter-small-dark.svg",
@@ -1285,8 +1496,8 @@
         }
       },
       {
-        "command": "frontMatter.dashboard.media",
-        "title": "Open media dashboard",
+        "command": "frontMatter.dashboard.snippets",
+        "title": "Open snippets dashboard",
         "category": "Front matter",
         "icon": {
           "dark": "/assets/icons/frontmatter-small-dark.svg",
@@ -1340,6 +1551,12 @@
           "dark": "assets/icons/strikethrough-dark.svg"
         }
       },
+      {
+        "command": "frontMatter.mode.switch",
+        "title": "Switch mode",
+        "category": "Front matter",
+        "icon": "$(preview)"
+      },
       {
         "command": "frontMatter.markup.tasklist",
         "title": "Task list",
@@ -1380,10 +1597,10 @@
         {
           "command": "frontMatter.insertSnippet",
           "group": "navigation@-129",
-          "when": "frontMatter:file:isValid == true"
+          "when": "frontMatter:file:isValid == true && frontMatter:dashboard:snippets:enabled"
         },
         {
-          "command": "frontMatter.insertImage",
+          "command": "frontMatter.insertMedia",
           "group": "navigation@-128",
           "when": "frontMatter:file:isValid == true"
         },
@@ -1463,6 +1680,14 @@
           "command": "frontMatter.preview",
           "when": "frontMatterCanOpenPreview"
         },
+        {
+          "command": "frontMatter.dashboard.data",
+          "when": "frontMatter:dashboard:data:enabled"
+        },
+        {
+          "command": "frontMatter.dashboard.snippets",
+          "when": "frontMatter:dashboard:snippets:enabled"
+        },
         {
           "command": "frontMatter.collapseSections",
           "when": "false"
@@ -1529,10 +1754,10 @@
         },
         {
           "command": "frontMatter.insertSnippet",
-          "when": "frontMatter:file:isValid == true"
+          "when": "frontMatter:file:isValid == true && frontMatter:dashboard:snippets:enabled"
         },
         {
-          "command": "frontMatter.insertImage",
+          "command": "frontMatter.insertMedia",
           "when": "frontMatter:file:isValid == true"
         },
         {
@@ -1566,6 +1791,18 @@
         {
           "command": "frontMatter.generateSlug",
           "when": "frontMatter:file:isValid == true"
+        },
+        {
+          "command": "frontMatter.contenttype.generate",
+          "when": "frontMatter:file:isValid == true"
+        },
+        {
+          "command": "frontMatter.contenttype.addMissingFields",
+          "when": "frontMatter:file:isValid == true"
+        },
+        {
+          "command": "frontMatter.contenttype.setContentType",
+          "when": "frontMatter:file:isValid == true"
         }
       ],
       "view/title": [
@@ -1575,8 +1812,13 @@
           "when": "view == frontMatter.explorer"
         },
         {
-          "command": "frontMatter.dashboard",
+          "command": "frontMatter.mode.switch",
           "group": "navigation@1",
+          "when": "view == frontMatter.explorer && frontMatter:has:modes == true"
+        },
+        {
+          "command": "frontMatter.dashboard",
+          "group": "navigation@2",
           "when": "view == frontMatter.explorer"
         }
       ]
@@ -1651,9 +1893,10 @@
     "start:site": "cd ./docs && npm run dev"
   },
   "devDependencies": {
+    "@actions/core": "^1.8.2",
     "@bendera/vscode-webview-elements": "0.6.2",
-    "@estruyf/vscode": "0.0.2",
-    "@headlessui/react": "^1.5.0",
+    "@estruyf/vscode": "0.0.3",
+    "@headlessui/react": "1.5.0",
     "@heroicons/react": "1.0.4",
     "@iarna/toml": "2.2.3",
     "@octokit/rest": "^18.12.0",
@@ -1666,6 +1909,7 @@
     "@types/lodash.omit": "^4.5.6",
     "@types/lodash.uniqby": "4.7.6",
     "@types/lodash.xor": "^4.5.6",
+    "@types/mime-types": "^2.1.1",
     "@types/mocha": "^5.2.6",
     "@types/mustache": "^4.1.2",
     "@types/node": "10.17.48",
@@ -1686,7 +1930,7 @@
     "downshift": "6.0.6",
     "fuse.js": "6.5.3",
     "glob": "7.1.6",
-    "gray-matter": "4.0.2",
+    "gray-matter": "4.0.3",
     "html-loader": "1.3.2",
     "html-webpack-plugin": "4.5.0",
     "image-size": "^1.0.0",
@@ -1696,6 +1940,7 @@
     "lodash.uniqby": "4.7.0",
     "lodash.xor": "^4.5.0",
     "mdast-util-from-markdown": "1.0.0",
+    "mime-types": "^2.1.35",
     "mustache": "^4.2.0",
     "node-json-db": "^1.3.0",
     "npm-run-all": "^4.1.5",
@@ -1707,12 +1952,14 @@
     "react-datepicker": "4.2.1",
     "react-dom": "17.0.1",
     "react-dropzone": "^11.3.4",
+    "react-quill": "^2.0.0-beta.4",
     "react-sortable-hoc": "^2.0.0",
     "react-toastify": "^8.1.0",
     "recoil": "^0.4.1",
     "rimraf": "^3.0.2",
     "style-loader": "2.0.0",
     "tailwindcss": "^2.2.7",
+    "tailwindcss-nested-groups": "^1.2.4",
     "ts-loader": "8.0.3",
     "tslint": "6.1.3",
     "typescript": "^4.5.4",

scripts/beta-release.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const core = require('@actions/core');
 
 const packageJson = require('../package.json');
 const version = packageJson.version.split('.');
@@ -14,7 +15,24 @@ packageJson.homepage = "https://beta.frontmatter.codes";
 
 console.log(packageJson.version);
 
+core.summary.addHeading(`Version info`).addDetails(`${packageJson.version}`);
+
+const scripts = packageJson.scripts;
+for (const key in scripts) {
+  if (key.startsWith(`prod:`)) {
+    scripts[key] = scripts[key].replace("production", "development");
+  }
+}
+
+console.log(JSON.stringify(packageJson.scripts, null, 2));
+
 fs.writeFileSync(path.join(path.resolve('.'), 'package.json'), JSON.stringify(packageJson, null, 2));
 
 let readme = fs.readFileSync(path.join(__dirname, '../README.beta.md'), 'utf8');
-fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
+fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
+
+// Update the .vscodeignore file
+const ignoreFilePath = path.join(path.resolve('.'), '.vscodeignore');
+let vscodeignore = fs.readFileSync(ignoreFilePath, 'utf8');
+vscodeignore = vscodeignore.replace(`**/*.map`, '');
+fs.writeFileSync(ignoreFilePath, vscodeignore);

src/commands/Article.ts

@@ -30,7 +30,7 @@ export class Article {
       return;
     }
 
-    const article = Article.getCurrent();
+    const article = ArticleHelper.getCurrent();
 
     if (!article) {
       return;
@@ -69,7 +69,8 @@ export class Article {
 
     const selectedOptions = await vscode.window.showQuickPick(options, {
       placeHolder: `Select your ${type === TaxonomyType.Tag ? "tags" : "categories"} to insert`,
-      canPickMany: true
+      canPickMany: true,
+      ignoreFocusOut: true
     });
 
     if (selectedOptions) {
@@ -324,7 +325,7 @@ export class Article {
   /**
    * Insert an image from the media dashboard into the article
    */
-  public static async insertImage() {
+  public static async insertMedia() {
 		let editor = vscode.window.activeTextEditor;
     if (!editor) {
       return;
@@ -375,23 +376,6 @@ export class Article {
     } as DashboardData);
 	}
 
-  /**
-   * Get the current article
-   */
-  private static getCurrent(): ParsedFrontMatter | undefined {
-    const editor = vscode.window.activeTextEditor;
-    if (!editor) {
-      return;
-    }
-
-    const article = ArticleHelper.getFrontMatter(editor);
-    if (!article) {
-      return;
-    }
-
-    return article;
-  }
-
   /**
    * Update the article date and return it
    * @param article 

src/commands/Content.ts

@@ -1,9 +1,14 @@
 import { commands, QuickPickItem, window } from 'vscode'; 
-import { COMMAND_NAME } from '../constants';
+import { COMMAND_NAME, SETTING_TEMPLATES_ENABLED } from '../constants';
+import { Settings } from '../helpers';
 
 export class Content {
 
   public static async create() {
+    const templatesEnabled = await Settings.get(SETTING_TEMPLATES_ENABLED);
+    if (!templatesEnabled) {
+      commands.executeCommand(COMMAND_NAME.createByContentType);
+    }
 
     const options: QuickPickItem[] = [{
       label: "Create content by content type",
@@ -15,7 +20,8 @@ export class Content {
 
     const selectedOption = await window.showQuickPick(options, {
       placeHolder: `Select how you want to create your new content`,
-      canPickMany: false
+      canPickMany: false,
+      ignoreFocusOut: true
     });
 
     if (selectedOption) {

src/commands/Dashboard.ts

@@ -9,6 +9,7 @@ import { DashboardData } from '../models/DashboardData';
 import { MediaLibrary } from '../helpers/MediaLibrary';
 import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener, SnippetListener } from '../listeners/dashboard';
 import { MediaListener as PanelMediaListener } from '../listeners/panel'
+import { ModeListener } from '../listeners/general';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -143,6 +144,7 @@ export class Dashboard {
       DataListener.process(msg);
       TelemetryListener.process(msg);
       SnippetListener.process(msg);
+      ModeListener.process(msg);
     });
   }
 

src/commands/Folders.ts

@@ -1,20 +1,21 @@
 import { Questions } from './../helpers/Questions';
 import { SETTING_CONTENT_PAGE_FOLDERS, SETTING_CONTENT_STATIC_FOLDER, SETTING_CONTENT_SUPPORTED_FILETYPES, TelemetryEvent } from './../constants';
 import { commands, Uri, workspace, window } from "vscode";
-import { basename, dirname, join, sep } from "path";
+import { basename, dirname, join, relative, sep } from "path";
 import { ContentFolder, FileInfo, FolderInfo } from "../models";
 import uniqBy = require("lodash.uniqby");
 import { Template } from "./Template";
 import { Notifications } from "../helpers/Notifications";
-import { Settings } from "../helpers";
+import { Logger, Settings } from "../helpers";
 import { existsSync, mkdirSync } from 'fs';
 import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { MediaHelpers } from '../helpers/MediaHelpers';
-import { MediaListener, PagesListener } from '../listeners/dashboard';
+import { MediaListener, PagesListener, SettingsListener } from '../listeners/dashboard';
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
 import { Telemetry } from '../helpers/Telemetry';
+import { glob } from 'glob';
 
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
@@ -97,7 +98,10 @@ export class Folders {
    * Register the new folder path
    * @param folder 
    */
-  public static async register(folder: Uri) {
+  public static async register(folderInfo: { title: string, path: Uri } | Uri) {
+    let folderName = folderInfo instanceof Uri ? undefined : folderInfo.title;
+    const folder = folderInfo instanceof Uri ? folderInfo : folderInfo.path;
+
     if (folder && folder.fsPath) {
       const wslPath = folder.fsPath.replace(/\//g, '\\');
 
@@ -110,11 +114,14 @@ export class Folders {
         return;
       }
 
-      const folderName = await window.showInputBox({  
-        prompt: `Which name would you like to specify for this folder?`,
-        placeHolder: `Folder name`,
-        value: basename(folder.fsPath)
-      });
+      if (!folderName) {
+        folderName = await window.showInputBox({  
+          prompt: `Which name would you like to specify for this folder?`,
+          placeHolder: `Folder name`,
+          value: basename(folder.fsPath),
+          ignoreFocusOut: true
+        });
+      }
 
       folders.push({
         title: folderName,
@@ -127,6 +134,8 @@ export class Folders {
       Notifications.info(`Folder registered`);
 
 		  Telemetry.send(TelemetryEvent.registerFolder);
+
+      SettingsListener.getSettings();
     }
   }
 
@@ -284,11 +293,30 @@ export class Folders {
   public static get(): ContentFolder[] {
     const wsFolder = Folders.getWorkspaceFolder();
     const folders: ContentFolder[] = Settings.get(SETTING_CONTENT_PAGE_FOLDERS) as ContentFolder[];
+
+    const contentFolders = folders.map(folder => {
+      if (!folder.title) {
+        folder.title = basename(folder.path);
+      }
+
+      let folderPath = Folders.absWsFolder(folder, wsFolder);
+      if (!existsSync(folderPath)) {
+        Notifications.errorShowOnce(`Folder "${folder.title} (${folder.path})" does not exist. Please remove it from the settings.`, "Remove folder").then(answer => {
+          if (answer === "Remove folder") {
+            let folders = Folders.get();
+            Folders.update(folders.filter(f => f.path !== folder.path));
+          }
+        });
+        return null;
+      }
+
+      return {
+        ...folder,
+        path: folderPath
+      }
+    })
     
-    return folders.map(folder => ({
-      ...folder,
-      path: Folders.absWsFolder(folder, wsFolder)
-    }));
+    return contentFolders.filter(folder => folder !== null) as ContentFolder[];
   }
   
   /**
@@ -347,4 +375,46 @@ export class Folders {
     absPath = isWindows ? absPath.split('\\').join('/') : absPath;
     return absPath;
   }
+
+  /**
+   * Find the content folders
+   */
+  public static async getContentFolders() {
+    // Find folders that contain files
+    const wsFolder = Folders.getWorkspaceFolder();
+    const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES) || DEFAULT_FILE_TYPES;
+    const patterns = supportedFiles.map(fileType => `${join(parseWinPath(wsFolder?.fsPath || ""), "**", `*${fileType.startsWith('.') ? '' : '.'}${fileType}`)}`);
+    let folders: string[] = [];
+
+    for (const pattern of patterns) {
+      try {
+        folders = [...folders, ...(await this.findFolders(pattern))];
+      } catch (e) {
+        Logger.error(`Something went wrong while searching for folders with pattern "${pattern}": ${(e as Error).message}`);
+      }
+    }
+    
+    // Filter out the workspace folder
+    if (wsFolder) {
+      folders = folders.filter(folder => folder !== wsFolder.fsPath);
+    }
+
+    const uniqueFolders = [...new Set(folders)];
+    return uniqueFolders.map(folder => relative(wsFolder?.path || "", folder));
+  }
+
+  /**
+   * Retrieve all content folders
+   * @param pattern 
+   * @returns 
+   */
+  private static findFolders(pattern: string): Promise<string[]> {
+    return new Promise(resolve => {
+      glob(pattern, { ignore: "**/node_modules/**" }, (err, files) => {
+        const allFolders = files.map(file => dirname(file));
+        const uniqueFolders = [...new Set(allFolders)];
+        resolve(uniqueFolders);
+      });
+    });
+  }
 }

src/commands/Preview.ts

@@ -1,14 +1,15 @@
 import { Telemetry } from './../helpers/Telemetry';
-import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT, TelemetryEvent } from './../constants';
+import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT, TelemetryEvent, PreviewCommands } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join } from "path";
 import { commands, env, Uri, ViewColumn, window } from "vscode";
-import { Settings } from '../helpers';
+import { Extension, Settings } from '../helpers';
 import { PreviewSettings } from '../models';
 import { format } from 'date-fns';
 import { DateHelper } from '../helpers/DateHelper';
 import { Article } from '.';
 import { urlJoin } from 'url-join-ts';
+import { WebviewHelper } from '@estruyf/vscode';
 
 
 export class Preview {
@@ -71,8 +72,8 @@ export class Preview {
     );
 
     webView.iconPath = {
-      dark: Uri.file(join(extensionPath, 'assets/frontmatter-dark.svg')),
-      light: Uri.file(join(extensionPath, 'assets/frontmatter.svg'))
+      dark: Uri.file(join(extensionPath, 'assets/icons/frontmatter-short-dark.svg')),
+      light: Uri.file(join(extensionPath, 'assets/icons/frontmatter-short-light.svg'))
     }
 
     const localhostUrl = await env.asExternalUri(
@@ -81,59 +82,62 @@ export class Preview {
 
     const cspSource = webView.webview.cspSource;
 
-    webView.webview.html = `<!DOCTYPE html>
-  <head>
-    <meta
-        http-equiv="Content-Security-Policy"
-        content="default-src 'none'; frame-src ${localhostUrl} ${cspSource} http: https:; img-src ${localhostUrl} ${cspSource} http: https:; script-src ${localhostUrl} ${cspSource} 'unsafe-inline'; style-src ${localhostUrl} ${cspSource} 'self' 'unsafe-inline' http: https:;"
-    />
-    <style>
-      html,body { 
-        margin: 0;
-        padding: 0;
-        background: white;
-        height: 100%;
-        width: 100%;
-      }
-      
-      body {
-        margin: 0;
-        padding: 0;
+    webView.webview.onDidReceiveMessage(message => {
+      switch (message.command) {
+        case PreviewCommands.toVSCode.open:
+          if (message.data) {
+            commands.executeCommand('vscode.open', message.data);
+          }
+          return;
       }
+    });
 
-      iframe {
-        width: 100%;
-        height: calc(100% - 30px);
-        border: 0;
-        margin-top: 30px;
-      }
 
-      .slug {
-        width: 100%;
-        position: fixed;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        background-color: var(--vscode-editor-background);
-        border-bottom: 1px solid var(--vscode-focusBorder);
-      }
+    const dashboardFile = "dashboardWebView.js";
+    const localPort = `9000`;
+    const localServerUrl = `localhost:${localPort}`;
 
-      input {
-        color: var(--vscode-editor-foreground);
-        padding: 0.25rem 0.5rem;
-        background: none;
-        border: 0;
-        width: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="slug">
-      <input type="text" value="${urlJoin(localhostUrl.toString(), slug || '')}" disabled />
-    </div>
-    <iframe src="${urlJoin(localhostUrl.toString(), slug || '')}" >
-  </body>
-</html>`;
+    const nonce = WebviewHelper.getNonce();
+
+    const ext = Extension.getInstance();
+    const isProd = ext.isProductionMode;
+    const version = ext.getVersion();
+    const isBeta = ext.isBetaVersion();
+    const extensionUri = ext.extensionPath;
+    
+    const csp = [
+      `default-src 'none';`,
+      `img-src ${localhostUrl} ${cspSource} http: https:;`,
+      `script-src ${isProd ? `'nonce-${nonce}'` : `http://${localServerUrl} http://0.0.0.0:${localPort}`} 'unsafe-eval'`,
+      `style-src ${cspSource} 'self' 'unsafe-inline' http: https:`,
+      `connect-src https://o1022172.ingest.sentry.io ${isProd ? `` : `ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`}`,
+      `frame-src ${localhostUrl} ${cspSource} http: https:;`,
+    ];
+
+    let scriptUri = "";
+    if (isProd) {
+      scriptUri = webView.webview.asWebviewUri(Uri.joinPath(extensionUri, 'dist', dashboardFile)).toString();
+    } else {
+      scriptUri = `http://${localServerUrl}/${dashboardFile}`; 
+    }
+
+    webView.webview.html = `
+      <!DOCTYPE html>
+      <html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
+        <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="Content-Security-Policy" content="${csp.join('; ')}">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+          <title>Front Matter Preview</title>
+        </head>
+        <body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden">
+          <div id="app" data-type="preview" data-url="${urlJoin(localhostUrl.toString(), slug || '')}" data-isProd="${isProd}" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;"></div>
+
+          <script ${isProd ? `nonce="${nonce}"` : ""} src="${scriptUri}"></script>
+        </body>
+      </html>
+    `;
 
     Telemetry.send(TelemetryEvent.openPreview);
   }

src/commands/Project.ts

@@ -5,7 +5,7 @@ import * as fs from "fs";
 import { Notifications } from "../helpers/Notifications";
 import { Template } from "./Template";
 import { Folders } from "./Folders";
-import { Logger, Settings } from "../helpers";
+import { FrameworkDetector, Logger, Settings } from "../helpers";
 import { SETTING_CONTENT_DEFAULT_FILETYPE, TelemetryEvent } from "../constants";
 import { SettingsListener } from '../listeners/dashboard';
 
@@ -24,33 +24,32 @@ categories: []
 ---
 `;
 
+  public static isInitialized() {
+    return Settings.hasProjectFile();
+  }
+
   /**
    * Initialize a new "Project" instance.
    */
-  public static async init(sampleTemplate: boolean = true) {
+  public static async init(sampleTemplate?: boolean) {
     try {
       Settings.createTeamSettings();
-      const fileType = Settings.get<string>(SETTING_CONTENT_DEFAULT_FILETYPE);
 
-      const folder = Template.getSettings();
-      const templatePath = Project.templatePath();
-
-      if (!folder || !templatePath) {
-        return;
-      }
-      
-      const article = Uri.file(join(templatePath.fsPath, `article.${fileType}`));
-
-      if (!fs.existsSync(templatePath.fsPath)) {
-        await workspace.fs.createDirectory(templatePath);
-      }
-
-      if (sampleTemplate) {
-        fs.writeFileSync(article.fsPath, Project.content, { encoding: "utf-8" });
+      if (sampleTemplate !== undefined) {
+        await Project.createSampleTemplate();
+      } else {
         Notifications.info("Project initialized successfully.");
       }
+      
+      Telemetry.send(TelemetryEvent.initialization);
 
-      Telemetry.send(TelemetryEvent.initialization)
+      // Check if you can find the framework
+      const wsFolder = Folders.getWorkspaceFolder();
+      const framework = FrameworkDetector.get(wsFolder?.fsPath || "");
+
+      if (framework) {
+        SettingsListener.setFramework(framework.name);
+      }
 
       SettingsListener.getSettings();
     } catch (err: any) {
@@ -59,6 +58,33 @@ categories: []
     }
   }
 
+  /**
+   * Creates the templates folder + sample if needed
+   * @param sampleTemplate 
+   * @returns 
+   */
+  public static async createSampleTemplate(sampleTemplate?: boolean) {
+    const fileType = Settings.get<string>(SETTING_CONTENT_DEFAULT_FILETYPE);
+
+    const folder = Template.getSettings();
+    const templatePath = Project.templatePath();
+
+    if (!folder || !templatePath) {
+      return;
+    }
+    
+    const article = Uri.file(join(templatePath.fsPath, `article.${fileType}`));
+
+    if (!fs.existsSync(templatePath.fsPath)) {
+      await workspace.fs.createDirectory(templatePath);
+    }
+
+    if (sampleTemplate) {
+      fs.writeFileSync(article.fsPath, Project.content, { encoding: "utf-8" });
+      Notifications.info("Sample template created.");
+    }
+  }
+
   /**
    * Get the template path for the current project
    */

src/commands/Settings.ts

@@ -17,7 +17,8 @@ export class Settings {
   public static async create(type: TaxonomyType) {
     const newOption = await vscode.window.showInputBox({  
       prompt: `Insert the value of the ${type === TaxonomyType.Tag ? "tag" : "category"} that you want to add to your configuration.`,
-      placeHolder: `Name of the ${type === TaxonomyType.Tag ? "tag" : "category"}`
+      placeHolder: `Name of the ${type === TaxonomyType.Tag ? "tag" : "category"}`,
+      ignoreFocusOut: true
     });
     
     if (newOption) {
@@ -36,7 +37,11 @@ export class Settings {
       await SettingsHelper.updateTaxonomy(type, options);
 
       // Ask if the new term needs to be added to the page
-      const addToPage = await vscode.window.showQuickPick(["yes", "no"], { canPickMany: false, placeHolder: `Do you want to add the new ${type === TaxonomyType.Tag ? "tag" : "category"} to the page?` });
+      const addToPage = await vscode.window.showQuickPick(["yes", "no"], { 
+        canPickMany: false, 
+        placeHolder: `Do you want to add the new ${type === TaxonomyType.Tag ? "tag" : "category"} to the page?`,
+        ignoreFocusOut: true
+      });
 
       if (addToPage && addToPage === "yes") {
         const editor = vscode.window.activeTextEditor;
@@ -149,7 +154,8 @@ export class Settings {
       "Category"
     ], { 
       placeHolder: `What do you want to remap?`,
-      canPickMany: false 
+      canPickMany: false,
+      ignoreFocusOut: true
     });
     if (!taxType) {
       return;
@@ -165,7 +171,8 @@ export class Settings {
 
     const selectedOption = await vscode.window.showQuickPick(options, { 
       placeHolder: `Select your ${type === TaxonomyType.Tag ? "tags" : "categories"} to insert`,
-      canPickMany: false 
+      canPickMany: false,
+      ignoreFocusOut: true
     });
 
     if (!selectedOption) {
@@ -174,11 +181,16 @@ export class Settings {
 
     const newOptionValue = await vscode.window.showInputBox({  
       prompt: `Specify the value of the ${type === TaxonomyType.Tag ? "tag" : "category"} with which you want to remap "${selectedOption}". Leave the input <blank> if you want to remove the ${type === TaxonomyType.Tag ? "tag" : "category"} from all articles.`,
-      placeHolder: `Name of the ${type === TaxonomyType.Tag ? "tag" : "category"}`
+      placeHolder: `Name of the ${type === TaxonomyType.Tag ? "tag" : "category"}`,
+      ignoreFocusOut: true
     });
 
     if (!newOptionValue) {
-      const deleteAnswer = await vscode.window.showQuickPick(["yes", "no"], { canPickMany: false, placeHolder: `Delete ${selectedOption} ${type === TaxonomyType.Tag ? "tag" : "category"}?` });
+      const deleteAnswer = await vscode.window.showQuickPick(["yes", "no"], { 
+        canPickMany: false, 
+        placeHolder: `Delete ${selectedOption} ${type === TaxonomyType.Tag ? "tag" : "category"}?`,
+        ignoreFocusOut: true
+      });
       if (deleteAnswer === "no") {
         return;
       }
@@ -226,7 +238,7 @@ export class Settings {
                   data[matterProp] = [...new Set(taxonomies)].sort();
                   const spaces = vscode.window.activeTextEditor?.options?.tabSize;
                   // Update the file
-                  fs.writeFileSync(file.path, FrontMatterParser.toFile(article.content, article.data, {
+                  fs.writeFileSync(file.path, FrontMatterParser.toFile(article.content, article.data, mdFile, {
                     indent: spaces || 2
                   } as DumpOptions as any), { encoding: "utf8" });
                 }

src/commands/Template.ts

@@ -64,7 +64,8 @@ export class Template {
 
       const titleValue = await vscode.window.showInputBox({  
         prompt: `What name would you like to give your template?`,
-        placeHolder: `article`
+        placeHolder: `article`,
+        ignoreFocusOut: true
       });
 
       if (!titleValue) {
@@ -77,6 +78,7 @@ export class Template {
         { 
           canPickMany: false, 
           placeHolder: `Do you want to keep the contents for the template?`,
+          ignoreFocusOut: true
         }
       );
 
@@ -98,11 +100,24 @@ export class Template {
     }
   }
 
+  /**
+   * Retrieve all templates
+   */
+  public static async getTemplates() {
+    const folder = Settings.get<string>(SETTING_TEMPLATES_FOLDER);
+
+    if (!folder) {
+      Notifications.warning(`No templates found.`);
+      return;
+    }
+
+    return await vscode.workspace.findFiles(`${folder}/**/*`, "**/node_modules/**,**/archetypes/**");
+  }
+
   /**
    * Create from a template
    */
   public static async create(folderPath: string) {
-    const folder = Settings.get<string>(SETTING_TEMPLATES_FOLDER);
     const contentTypes = ContentType.getAll();
 
     if (!folderPath) {
@@ -110,19 +125,15 @@ export class Template {
       return;
     }
 
-    if (!folder) {
-      Notifications.warning(`No templates found.`);
-      return;
-    }
-
-    const templates = await vscode.workspace.findFiles(`${folder}/**/*`, "**/node_modules/**,**/archetypes/**");
+    const templates = await Template.getTemplates();
     if (!templates || templates.length === 0) {
       Notifications.warning(`No templates found.`);
       return;
     }
 
     const selectedTemplate = await vscode.window.showQuickPick(templates.map(t => path.basename(t.fsPath)), {
-      placeHolder: `Select the content template to use`
+      placeHolder: `Select the content template to use`,
+      ignoreFocusOut: true
     });
     if (!selectedTemplate) {
       Notifications.warning(`No template selected.`);

src/commands/Wysiwyg.ts

@@ -59,8 +59,8 @@ export class Wysiwyg {
 
       const option = await window.showQuickPick([ ...qpItems ], {  
         placeHolder: "Which type of markup would you like to insert?", 
-        canPickMany: false, 
-        ignoreFocusOut: false,
+        canPickMany: false,
+        ignoreFocusOut: true
       });
 
       if (option) {
@@ -161,8 +161,8 @@ export class Wysiwyg {
           "Heading 6"
         ], {  
           canPickMany: false, 
-          placeHolder: "Which heading level do you want to insert?", 
-          ignoreFocusOut: false 
+          placeHolder: "Which heading level do you want to insert?",
+          ignoreFocusOut: true
         });
 
         if (headingLvl) {

src/components/features/FeatureFlag.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export interface IFeatureFlagProps {
+  flag: string;
+  features: string[] | null;
+  alternative?: JSX.Element;
+}
+
+export const FeatureFlag: React.FunctionComponent<IFeatureFlagProps> = ({ flag, features, alternative, children }: React.PropsWithChildren<IFeatureFlagProps>) => {
+  
+  if (!features ||( features.length > 0 && !features.includes(flag))) {
+    if (alternative) {
+      return alternative;
+    }
+
+    return null;
+  }
+
+  
+  
+  return (
+    <>
+      {children}
+    </>
+  );
+};

src/constants/Extension.ts

@@ -25,6 +25,7 @@ export const COMMAND_NAME = {
   createByContentType: getCommandName("createByContentType"),
   createByTemplate: getCommandName("createByTemplate"),
   createTemplate: getCommandName("createTemplate"),
+  initTemplate: getCommandName("initTemplate"),
   collapseSections: getCommandName("collapseSections"),
   preview: getCommandName("preview"),
   dashboard: getCommandName("dashboard"),
@@ -35,9 +36,12 @@ export const COMMAND_NAME = {
   promote: getCommandName("promoteSettings"),
   createFolder: getCommandName("createFolder"),
   diagnostics: getCommandName("diagnostics"),
+  modeSwitch: getCommandName("mode.switch"),
+
+  showOutputChannel: getCommandName("showOutputChannel"),
 
   // Insert dashboards
-  insertImage: getCommandName("insertImage"),
+  insertMedia: getCommandName("insertMedia"),
   insertSnippet: getCommandName("insertSnippet"),
 
   // WYSIWYG
@@ -52,4 +56,9 @@ export const COMMAND_NAME = {
   orderedlist: getCommandName("markup.orderedlist"),
   taskList: getCommandName("markup.tasklist"),
   options: getCommandName("markup.options"),
+
+  // Content types
+  generateContentType: getCommandName("contenttype.generate"),
+  addMissingFields: getCommandName("contenttype.addMissingFields"),
+  setContentType: getCommandName("contenttype.setContentType"),
 };

src/constants/ExtensionState.ts

@@ -12,6 +12,10 @@ export const ExtensionState = {
     },
     Media: {
       Sorting: `frontMatter:Dashboard:Media:Sorting`,
+    },
+    Pages: {
+      Cache: `frontMatter:Dashboard:Pages:Cache`,
+      Index: `frontMatter:Dashboard:Pages:Index`,
     }
   },
 

src/constants/Features.ts

@@ -0,0 +1,22 @@
+
+
+export const FEATURE_FLAG = {
+  panel: {
+    globalSettings: "panel.globalSettings",
+    seo: "panel.seo",
+    actions: "panel.actions",
+    metadata: "panel.metadata",
+    recentlyModified: "panel.recentlyModified",
+    otherActions: "panel.otherActions",
+    contentType: "panel.contentType",
+  },
+  dashboard: {
+    snippets: {
+      view: "dashboard.snippets.view",
+      manage: "dashboard.snippets.manage",
+    },
+    data: {
+      view: "dashboard.data.view",
+    }
+  }
+};

src/constants/FrameworkDetectors.ts

@@ -1,33 +1,89 @@
-export const FrameworkDetectors = [
-  {
-    "framework": {"name": "gatsby", "dist": "public", "static": "static", "build": "gatsby build"},
-    "requiredFiles": ["gatsby-config.js"],
-    "requiredDependencies": ["gatsby"],
-    "commands": {
-      "start": "npx gatsby develop"
+export const FrameworkDetectors = [{
+    framework: {
+      name: "gatsby",
+      dist: "public",
+      static: "static",
+      build: "gatsby build"
+    },
+    requiredFiles: ["gatsby-config.js"],
+    requiredDependencies: ["gatsby"],
+    commands: {
+      start: "npx gatsby develop"
     }
   },
   {
-    "framework": {"name": "hugo", "dist": "public", "static": "static", "build": "hugo"},
-    "requiredFiles": ["config.toml", "config.yaml", "config.yml"],
-    "commands": {
-      "start": "hugo server -D"
+    framework: {
+      name: "hugo",
+      dist: "public",
+      static: "static",
+      build: "hugo"
+    },
+    requiredFiles: ["config.toml", "config.yaml", "config.yml"],
+    commands: {
+      start: "hugo server -D"
     }
   },
   {
-    "framework": {"name": "next", "dist": ".next", "static": "public", "build": "next build"},
-    "requiredFiles": ["next.config.js"],
-    "requiredDependencies": ["next"],
-    "commands": {
-      "start": "npx next dev"
+    framework: {
+      name: "next",
+      dist: ".next",
+      static: "public",
+      build: "next build"
+    },
+    requiredFiles: ["next.config.js"],
+    requiredDependencies: ["next"],
+    commands: {
+      start: "npx next dev"
     }
   },
   {
-    "framework": {"name": "nuxt", "dist": "dist", "static": "static", "build": "nuxt"},
-    "requiredFiles": ["nuxt.config.js"],
-    "requiredDependencies": ["nuxt"],
-    "commands": {
-      "start": "npx nuxt"
+    framework: {
+      name: "nuxt",
+      dist: "dist",
+      static: "static",
+      build: "nuxt"
+    },
+    requiredFiles: ["nuxt.config.js"],
+    requiredDependencies: ["nuxt"],
+    commands: {
+      start: "npx nuxt"
+    }
+  },
+  {
+    framework: {
+      name: "jekyll",
+      dist: "_site",
+      static: "assets",
+      build: "bundle exec jekyll build"
+    },
+    requiredFiles: ["Gemfile"],
+    requiredDependencies: ["jekyll"],
+    commands: {
+      start: "bundle exec jekyll serve --livereload"
+    }
+  },
+  {
+    framework: {
+      name: "docusaurus",
+      dist: "build",
+      static: "static",
+      build: "npx docusaurus build"
+    },
+    requiredFiles: ["docusaurus.config.js"],
+    requiredDependencies: ["@docusaurus/core"],
+    commands: {
+      start: "npx docusaurus start"
+    }
+  },
+  {
+    framework: {
+      name: "11ty",
+      dist: "_site",
+      build: "npx @11ty/eleventy"
+    },
+    requiredDependencies: ["@11ty/eleventy"],
+    commands: {
+      start: "npx @11ty/eleventy --serve"
     }
   }
 ];

src/constants/GeneralCommands.ts

@@ -0,0 +1,10 @@
+
+
+export const GeneralCommands = {
+  toWebview: {
+    setMode: "setMode",
+  },
+  toVSCode: {
+    openLink: "openLink",
+  }
+};

src/constants/PreviewCommands.ts

@@ -0,0 +1,8 @@
+
+
+export const PreviewCommands = {
+  toVSCode: {
+    open: `preview.open`
+  },
+  fromVSCode: {}
+};

src/constants/TelemetryEvent.ts

@@ -22,9 +22,15 @@ export const TelemetryEvent = {
   refreshMedia: 'refreshMedia',
   deleteMedia: 'deleteMedia',
   insertMediaToContent: 'insertMediaToContent',
+  insertFileToContent: 'insertFileToContent',
   updateMediaMetadata: 'updateMediaMetadata',
   openExplorerView: 'openExplorerView',
 
+  // Content types
+  generateContentType: 'generateContentType',
+  addMissingFields: 'addMissingFields',
+  setContentType: 'setContentType',
+
   // Custom scripts
   runCustomScript: 'runCustomScript',
   runMediaScript: 'runMediaScript',

src/constants/context.ts

@@ -8,4 +8,9 @@ export const CONTEXT = {
   wysiwyg: "frontMatter:markdown:wysiwyg",
   backer: "frontMatter:backers:supporter",
   isValidFile: "frontMatter:file:isValid",
+
+  hasViewModes: "frontMatter:has:modes",
+
+  isSnippetsDashboardEnabled: "frontMatter:dashboard:snippets:enabled",
+  isDataDashboardEnabled: "frontMatter:dashboard:data:enabled",
 };

src/constants/index.ts

@@ -3,10 +3,13 @@ export * from './DefaultFields';
 export * from './DefaultFileTypes';
 export * from './Extension';
 export * from './ExtensionState';
+export * from './Features';
 export * from './FrameworkDetectors';
+export * from './GeneralCommands';
 export * from './Links';
 export * from './LocalStore';
 export * from './Navigation';
+export * from './PreviewCommands';
 export * from './TelemetryEvent';
 export * from './charCode';
 export * from './charMap';

src/constants/settings.ts

@@ -3,6 +3,8 @@ export const EXTENSION_NAME = "Front Matter";
 export const CONFIG_KEY = "frontMatter";
 
 export const SETTING_GLOBAL_NOTIFICATIONS = "global.notifications";
+export const SETTING_GLOBAL_MODES = "global.modes";
+export const SETTING_GLOBAL_ACTIVE_MODE = "global.activeMode";
 
 export const SETTING_TAXONOMY_TAGS = "taxonomy.tags";
 export const SETTING_TAXONOMY_CATEGORIES = "taxonomy.categories";
@@ -30,6 +32,7 @@ export const SETTING_SEO_DESCRIPTION_FIELD = "taxonomy.seoDescriptionField";
 
 export const SETTING_TEMPLATES_FOLDER = "templates.folder";
 export const SETTING_TEMPLATES_PREFIX = "templates.prefix";
+export const SETTING_TEMPLATES_ENABLED = "templates.enabled";
 
 export const SETTING_TELEMETRY_DISABLE = "telemetry.disable";
 
@@ -56,8 +59,10 @@ export const SETTING_MEDIA_SORTING_DEFAULT = "content.defaultSorting";
 export const SETTING_CONTENT_DEFAULT_FILETYPE = "content.defaultFileType";
 export const SETTING_CONTENT_SUPPORTED_FILETYPES = "content.supportedFileTypes";
 
+export const SETTING_MEDIA_SUPPORTED_MIMETYPES = "media.supportedMimeTypes";
+
 export const SETTING_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
-export const SETTING_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
+export const SETTING_DASHBOARD_CONTENT_TAGS = "dashboard.content.cardTags";
 
 export const SETTING_DATA_FILES = "data.files";
 export const SETTING_DATA_FOLDERS = "data.folders";
@@ -84,3 +89,8 @@ export const SETTING_DATE_FIELD = "taxonomy.dateField";
  * Use the `isModifiedDate` property on the content type datetime field instead
  */
 export const SETTING_MODIFIED_FIELD = "taxonomy.modifiedField";
+/**
+ * @deprecated
+ * Use the `frontMatter.content.snippets` setting instead
+ */
+export const SETTING_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";

src/dashboardWebView/DashboardCommand.ts

@@ -1,9 +1,11 @@
 export enum DashboardCommand {
   loading = "loading",
   pages = "pages",
+  searchPages = "searchPages",
   settings = "settings",
   media = "media",
   viewData = "viewData",
   mediaUpdate = "mediaUpdate",
-  dataFileEntries = "dataFileEntries"
+  dataFileEntries = "dataFileEntries",
+  searchReady = "searchReady",
 }

src/dashboardWebView/DashboardMessage.ts

@@ -1,32 +1,50 @@
 export enum DashboardMessage {
   getViewType = 'getViewType',
+  reload = 'reload',
+  setPageViewType = 'setPageViewType',
+  getMode = 'getMode',
+  showWarning = 'showWarning',
+
+  // Welcome view
+  initializeProject = 'initializeProject',
+  setFramework = 'setFramework',
+  addFolder = 'addFolder',
+
+  // Content dashboard
   getData = 'getData',
-  openFile = 'openFile',
-  getTheme = 'getTheme',
   createContent = 'createContent',
   createByContentType = 'createByContentType',
   createByTemplate = 'createByTemplate',
-  updateSetting = 'updateSetting',
-  initializeProject = 'initializeProject',
-  reload = 'reload',
-  setPageViewType = 'setPageViewType',
+  refreshPages = 'refreshPages',
+  searchPages = 'searchPages',
+  openFile = 'openFile',
+  deleteFile = 'deleteFile',
+
+  // Media Dashboard
   getMedia = 'getMedia',
   copyToClipboard = 'copyToClipboard',
   refreshMedia = 'refreshMedia',
-  refreshPages = 'refreshPages',
   uploadMedia = 'uploadMedia',
   deleteMedia = 'deleteMedia',
   revealMedia = 'revealMedia',
-  insertPreviewImage = 'insertPreviewImage',
+  insertMedia = 'insertMedia',
   updateMediaMetadata = 'updateMediaMetadata',
   createMediaFolder = 'createMediaFolder',
-  setFramework = 'setFramework',
-  setState = 'setState',
-  runCustomScript = 'runCustomScript',
+  insertFile = 'insertFile',
+
+  // Data dashboard
   getDataEntries = 'getDataEntries',
   putDataEntries = 'putDataEntries',
-  sendTelemetry = 'sendTelemetry',
+
+  // Snippets dashboard
   insertSnippet = 'insertSnippet',
   addSnippet = 'addSnippet',
   updateSnippet = 'updateSnippet',
+
+  // Other
+  getTheme = 'getTheme',
+  updateSetting = 'updateSetting',
+  setState = 'setState',
+  runCustomScript = 'runCustomScript',
+  sendTelemetry = 'sendTelemetry',
 }

src/dashboardWebView/components/Contents/ContentActions.tsx

@@ -0,0 +1,102 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { Menu } from '@headlessui/react';
+import { EyeIcon, TerminalIcon, TrashIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { CustomScript, ScriptType } from '../../../models';
+import { DashboardMessage } from '../../DashboardMessage';
+import { MenuItem, MenuItems, ActionMenuButton, QuickAction } from '../Menu';
+import { Alert } from '../Modals/Alert';
+
+export interface IContentActionsProps {
+  title: string;
+  path: string;
+  scripts: CustomScript[] | undefined;
+  onOpen: () => void;
+}
+
+export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({ title, path, scripts, onOpen }: React.PropsWithChildren<IContentActionsProps>) => {
+  const [ showDeletionAlert, setShowDeletionAlert ] = React.useState(false);
+  
+  const onView = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onOpen();
+  };
+  
+  const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setShowDeletionAlert(true);
+  };
+
+  const onDeleteConfirm = () => {
+    if (path) {
+      Messenger.send(DashboardMessage.deleteFile, path);
+    }
+    setShowDeletionAlert(false);
+  }
+
+  const runCustomScript = React.useCallback((e: React.MouseEvent<HTMLButtonElement>, script: CustomScript) => {
+    e.stopPropagation();
+    Messenger.send(DashboardMessage.runCustomScript, {script, path});
+  }, [path]);
+
+  const customScriptActions = React.useMemo(() => {
+    return (scripts || []).filter(script => (script.type === undefined || script.type === ScriptType.Content) && !script.bulk).map(script => (
+      <MenuItem 
+        key={script.title}
+        title={<div className='flex items-center'><TerminalIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>{script.title}</span></div>} 
+        onClick={(value, e) => runCustomScript(e, script)} />
+    ))
+  }, [scripts]);
+  
+  return (
+    <>
+      <div className={`group-scope absolute top-6 right-0 flex flex-col space-y-4`}>       
+        <div className="flex items-center border border-transparent group-scope-hover:bg-gray-200 dark:group-scope-hover:bg-vulcan-200 group-scope-hover:border-gray-100 dark:group-scope-hover:border-vulcan-50 rounded-full p-2 -mt-4">
+          
+          <Menu as="div" className="relative z-10 flex text-left">
+            <div className='hidden group-scope-hover:flex'>
+              <QuickAction 
+                title={`View content`}
+                onClick={onView}>
+                <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
+              </QuickAction>
+              
+              <QuickAction 
+                title={`Delete content`}
+                onClick={onDelete}>
+                <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
+              </QuickAction>
+            </div>
+
+            <ActionMenuButton title={`Menu`} />
+
+            <MenuItems widthClass='w-44' marginTopClass='mt-6'>
+              <MenuItem 
+                title={<div className='flex items-center'><EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>View</span></div>}
+                onClick={(value, e) => onView(e)} />
+
+              { customScriptActions }
+
+              <MenuItem 
+                title={<div className='flex items-center'><TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>Delete</span></div>}
+                onClick={(value, e) => onDelete(e)} />
+            </MenuItems>
+          </Menu>
+        </div>
+      </div>
+
+
+      {
+        showDeletionAlert && (
+          <Alert 
+            title={`Delete: ${title}`}
+            description={`Are you sure you want to delete the "${title}" content?`}
+            okBtnText={`Delete`}
+            cancelBtnText={`Cancel`}
+            dismiss={() => setShowDeletionAlert(false)}
+            trigger={onDeleteConfirm} />
+        )
+      }
+    </>
+  );
+};

src/dashboardWebView/components/Contents/Contents.tsx

@@ -33,7 +33,7 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({pages, loadin
     <PageLayout
       folders={pageFolders}
       totalPages={pageItems.length}>
-      <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
+      <div className="w-full flex-grow max-w-7xl mx-auto pb-6 px-4">
         { loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} /> }
       </div>
 

src/dashboardWebView/components/Contents/Item.tsx

@@ -3,28 +3,42 @@ import { useRecoilValue } from 'recoil';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
-import { ViewSelector } from '../../state';
+import { SettingsSelector, ViewSelector } from '../../state';
 import { DateField } from '../DateField';
 import { Status } from '../Status';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardViewType } from '../../models';
+import { ContentActions } from './ContentActions';
+import { useMemo } from 'react';
 
 export interface IItemProps extends Page {}
 
 const PREVIEW_IMAGE_FIELD = 'fmPreviewImage';
 
-export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
+export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
   const view = useRecoilValue(ViewSelector);
+  const settings = useRecoilValue(SettingsSelector);
+  const draftField = useMemo(() => settings?.draftField, [settings]);
   
   const openFile = () => {
     Messenger.send(DashboardMessage.openFile, fmFilePath);
   };
 
+  const tags: string[] | undefined = React.useMemo(() => {
+    if (!settings?.dashboardState?.contents?.tags) {
+      return undefined;
+    }
+
+    const tagField = settings.dashboardState.contents.tags;
+    return pageData[tagField] || [];
+  }, [settings, pageData]);
+
   if (view === DashboardViewType.Grid) {
     return (
       <li className="relative">
-        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left overflow-hidden shadow-md dark:shadow-none hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50`}
+        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left shadow-md dark:shadow-none hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50`}
                 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">
             {
               pageData[PREVIEW_IMAGE_FIELD] ? (
@@ -37,16 +51,38 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
             }
           </div>
 
-          <div className="p-4 w-full">
+          <div className="relative p-4 w-full">
             <div className={`flex justify-between items-center`}>
-              <Status draft={draft} />
+              {  draftField && draftField.name && <Status draft={pageData[draftField.name]} /> }
 
-              <DateField value={date} />
+              <DateField className={`mr-4`} value={date} />
+
+              <ContentActions 
+                title={title}
+                path={fmFilePath}
+                scripts={settings?.scripts}
+                onOpen={openFile} />
             </div>
 
             <h2 className="mt-2 mb-2 font-bold">{title}</h2>
 
             <p className="text-xs text-vulcan-200 dark:text-whisper-800">{description}</p>
+
+            {
+              tags && tags.length > 0 && (
+                <div className="mt-2">
+                  {
+                    tags.map((tag, index) => (
+                      <span 
+                        key={index} 
+                        className="inline-block mr-1 mt-1 text-[#5D561D] dark:text-[#F0ECD0] text-xs">
+                        #{tag}
+                      </span>
+                    ))
+                  }
+                </div>
+              )
+            }
           </div>
         </button>
       </li>
@@ -62,7 +98,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
             <DateField value={date} />
           </div>
           <div className="col-span-2">
-            <Status draft={draft} />
+            { draftField && draftField.name && <Status draft={pageData[draftField.name]} /> }
           </div>
         </button>
       </li>

src/dashboardWebView/components/Contents/Overview.tsx

@@ -25,7 +25,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settin
         <div className={`max-w-xl text-center`}>
           <FrontMatterIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`} />
           {
-            settings && settings?.folders?.length > 0 ? (
+            settings && settings?.contentFolders?.length > 0 ? (
               <p className={`text-xl font-medium`}>No Markdown to show</p>
             ) : (
               <>

src/dashboardWebView/components/Dashboard.tsx

@@ -4,12 +4,15 @@ import useMessages from '../hooks/useMessages';
 import useDarkMode from '../../hooks/useDarkMode';
 import { WelcomeScreen } from './WelcomeScreen';
 import { useRecoilValue } from 'recoil';
-import { DashboardViewSelector } from '../state';
+import { DashboardViewSelector, ModeAtom } from '../state';
 import { Contents } from './Contents/Contents';
 import { Media } from './Media/Media';
 import { NavigationType } from '../models';
 import { DataView } from './DataView';
 import { Snippets } from './SnippetsView/Snippets';
+import { FeatureFlag } from '../../components/features/FeatureFlag';
+import { FEATURE_FLAG } from '../../constants';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface IDashboardProps {
   showWelcome: boolean;
@@ -18,17 +21,20 @@ export interface IDashboardProps {
 export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome}: React.PropsWithChildren<IDashboardProps>) => {
   const { loading, pages, settings } = useMessages();
   const view = useRecoilValue(DashboardViewSelector);
+  const mode = useRecoilValue(ModeAtom);
   useDarkMode();
 
+  const viewState: any = Messenger.getState() || {};
+
   if (!settings) {
     return <Spinner />;
   }
 
-  if (showWelcome) {
+  if (showWelcome || viewState.isWelcomeConfiguring) {
     return <WelcomeScreen settings={settings} />;
   }
 
-  if (!settings.initialized || settings.folders?.length === 0) {
+  if (!settings.initialized || settings.contentFolders?.length === 0) {
     return <WelcomeScreen settings={settings} />;
   }
 
@@ -50,9 +56,11 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
 
   if (view === NavigationType.Data) {
     return (
-      <main className={`h-full w-full`}>
-        <DataView />
-      </main>
+      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
+        <main className={`h-full w-full`}>
+          <DataView />
+        </main>
+      </FeatureFlag>
     );
   }
 

src/dashboardWebView/components/DataView/DataView.tsx

@@ -149,9 +149,9 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
                   <div className={`divide-y divide-gray-200 dark:divide-vulcan-300 border-t border-b border-gray-200 dark:border-vulcan-300`}>
                     {
                       (dataFiles && dataFiles.length > 0) && (
-                        dataFiles.map((dataFile) => (
+                        dataFiles.map((dataFile, idx) => (
                           <button
-                            key={dataFile.id}
+                            key={`${dataFile.id}-${idx}`}
                             type='button'
                             className={`px-4 py-2 flex items-center text-sm font-medium w-full text-left hover:bg-gray-200 dark:hover:bg-vulcan-400 hover:text-vulcan-500 dark:hover:text-whisper-500 ${selectedData?.id === dataFile.id ? 'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500' : 'text-gray-500 dark:text-whisper-900'}`}
                             onClick={() => setSchema(dataFile)}>

src/dashboardWebView/components/DateField.tsx

@@ -3,10 +3,11 @@ import * as React from 'react';
 import { DateHelper } from '../../helpers/DateHelper';
 
 export interface IDateFieldProps {
+  className?: string;
   value: Date | string;
 }
 
-export const DateField: React.FunctionComponent<IDateFieldProps> = ({value}: React.PropsWithChildren<IDateFieldProps>) => {
+export const DateField: React.FunctionComponent<IDateFieldProps> = ({className, value}: React.PropsWithChildren<IDateFieldProps>) => {
   const [ dateValue, setDateValue ] = React.useState<string>("");
 
   React.useEffect(() => {
@@ -24,6 +25,6 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({value}: Rea
   }
 
   return (
-    <span className={`text-vulcan-100 dark:text-whisper-900 text-xs`}>{dateValue}</span>
+    <span className={`${className || ""} text-vulcan-100 dark:text-whisper-900 text-xs`}>{dateValue}</span>
   );
 };

src/dashboardWebView/components/Header/PaginationStatus.tsx

@@ -1,18 +1,13 @@
 import * as React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { MediaTotalSelector, PageAtom, SearchAtom, SelectedMediaFolderSelector } from '../../state';
-import { Messenger } from '@estruyf/vscode/dist/client';
-import { DashboardMessage } from '../../DashboardMessage';
-import { RefreshIcon } from '@heroicons/react/outline';
+import { useRecoilValue } from 'recoil';
+import { MediaTotalSelector, PageAtom } from '../../state';
 import { LIMIT } from '../../hooks/useMedia';
 
 export interface IPaginationStatusProps {}
 
 export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> = (props: React.PropsWithChildren<IPaginationStatusProps>) => {
   const totalMedia = useRecoilValue(MediaTotalSelector);
-  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
-  const [ page, setPage ] = useRecoilState(PageAtom);
-  const [ , setSearch ] = useRecoilState(SearchAtom);
+  const page = useRecoilValue(PageAtom);
 
   const getTotalPage = () => {
     const mediaItems = ((page + 1) * LIMIT);
@@ -22,21 +17,8 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
     return mediaItems;
   };
 
-  const refresh = () => {
-    setPage(0);
-    setSearch('');
-    Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
-  }
-
   return (
-    <div className="hidden sm:flex">
-      <button className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
-              title="Refresh media"
-              onClick={refresh}>
-        <RefreshIcon className={`h-5 w-5`} />
-        <span className="sr-only">Refresh media</span>
-      </button>
-      
+    <div className="hidden sm:flex">      
       <p className="text-sm text-gray-500 dark:text-whisper-900">
         Showing <span className="font-medium">{(page * LIMIT) + 1}</span> to <span className="font-medium">{getTotalPage()}</span> of{' '}
         <span className="font-medium">{totalMedia}</span> results

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -0,0 +1,57 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { RefreshIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
+import { DashboardMessage } from '../../DashboardMessage';
+import { NavigationType } from '../../models';
+import { CategoryAtom, DashboardViewAtom, FolderAtom, LoadingAtom, PageAtom, SearchAtom, SelectedMediaFolderSelector, SortingAtom, TagAtom } from '../../state';
+
+export interface IRefreshDashboardDataProps {}
+
+export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardDataProps> = (props: React.PropsWithChildren<IRefreshDashboardDataProps>) => {
+  const view = useRecoilValue(DashboardViewAtom);
+  const [, setLoading] = useRecoilState(LoadingAtom);
+  const resetSearch = useResetRecoilState(SearchAtom);
+  const resetSorting = useResetRecoilState(SortingAtom);
+  const resetFolder = useResetRecoilState(FolderAtom);
+  const resetTag = useResetRecoilState(TagAtom);
+  const resetCategory = useResetRecoilState(CategoryAtom);
+  // Media
+  const resetPage = useResetRecoilState(PageAtom);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  
+  const refreshPages = () => {
+    setLoading(true);
+    resetSearch();
+    resetSorting();
+    resetFolder();
+    resetTag();
+    resetCategory();
+    Messenger.send(DashboardMessage.refreshPages);
+  };
+
+  const refreshMedia = () => {
+    setLoading(true);
+    resetPage();
+    resetSearch();
+    Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
+  };
+
+  const refresh = useCallback(() => {
+    if (view === NavigationType.Contents) {
+      refreshPages();
+    } else if (view === NavigationType.Media) {
+      refreshMedia();
+    }
+  }, [view]);
+  
+  return (
+    <button className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
+              title="Refresh dashboard"
+              onClick={refresh}>
+      <RefreshIcon className={`h-5 w-5`} />
+      <span className="sr-only">Refresh dashboard</span>
+    </button>
+  );
+};

src/dashboardWebView/components/Header/RefreshPages.tsx

@@ -1,36 +0,0 @@
-import { Messenger } from '@estruyf/vscode/dist/client';
-import { RefreshIcon } from '@heroicons/react/outline';
-import * as React from 'react';
-import { useRecoilState, useResetRecoilState } from 'recoil';
-import { DashboardMessage } from '../../DashboardMessage';
-import { CategoryAtom, FolderAtom, LoadingAtom, SearchAtom, SortingAtom, TagAtom } from '../../state';
-
-export interface IRefreshPagesProps {}
-
-export const RefreshPages: React.FunctionComponent<IRefreshPagesProps> = (props: React.PropsWithChildren<IRefreshPagesProps>) => {
-  const [, setLoading] = useRecoilState(LoadingAtom);
-  const resetSearch = useResetRecoilState(SearchAtom);
-  const resetSorting = useResetRecoilState(SortingAtom);
-  const resetFolder = useResetRecoilState(FolderAtom);
-  const resetTag = useResetRecoilState(TagAtom);
-  const resetCategory = useResetRecoilState(CategoryAtom);
-  
-  const refresh = () => {
-    setLoading(true);
-    resetSearch();
-    resetSorting();
-    resetFolder();
-    resetTag();
-    resetCategory();
-    Messenger.send(DashboardMessage.refreshPages);
-  }
-  
-  return (
-    <button className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
-              title="Refresh dashboard"
-              onClick={refresh}>
-      <RefreshIcon className={`h-5 w-5`} />
-      <span className="sr-only">Refresh dashboard</span>
-    </button>
-  );
-};

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -1,9 +1,9 @@
-import {SearchIcon} from '@heroicons/react/solid';
+import {SearchIcon, XCircleIcon} from '@heroicons/react/solid';
 import * as React from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { useDebounce } from '../../../hooks/useDebounce';
-import { SearchAtom } from '../../state';
-import { RefreshPages } from './RefreshPages';
+import { SearchAtom, SearchReadyAtom } from '../../state';
+import { RefreshDashboardData } from './RefreshDashboardData';
 
 export interface ISearchboxProps {
   placeholder?: string;
@@ -12,12 +12,18 @@ export interface ISearchboxProps {
 export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({placeholder}: React.PropsWithChildren<ISearchboxProps>) => {
   const [ value, setValue ] = React.useState('');
   const [ debounceSearchValue, setDebounceValue ] = useRecoilState(SearchAtom);
+  const searchReady = useRecoilValue(SearchReadyAtom);
   const debounceSearch = useDebounce<string>(value, 500);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
   };
 
+  const reset = React.useCallback(() => {
+    setValue('');
+    setDebounceValue('');
+  }, [setValue, setDebounceValue]);
+
   React.useEffect(() => {    
     if (!debounceSearchValue && value) {
       setValue('');
@@ -38,17 +44,26 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({placeholder
           </div>
 
           <input
-            type="search"
+            type="text"
             name="search"
-            className={`block w-full py-2 pl-10 pr-3 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`}
+            className={`block w-full py-2 pl-10 pr-3 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 appearance-none disabled:opacity-50`}
             placeholder={placeholder || "Search"}
             value={value}
             onChange={handleChange}
+            disabled={!searchReady}
           />
+
+          {
+            value && (
+              <button onClick={reset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
+                <XCircleIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </button>
+            )
+          }
         </div>
       </div>
 
-      <RefreshPages />
+      <RefreshDashboardData />
     </div>
   );
 };

src/dashboardWebView/components/Header/Tabs.tsx

@@ -1,9 +1,11 @@
 import { DatabaseIcon, PhotographIcon, ScissorsIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlag } from '../../../components/features/FeatureFlag';
+import { FEATURE_FLAG } from '../../../constants';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { NavigationType } from '../../models';
-import { SettingsSelector } from '../../state';
+import { ModeAtom } from '../../state';
 import { Tab } from './Tab';
 
 export interface ITabsProps {
@@ -11,7 +13,7 @@ export interface ITabsProps {
 }
 
 export const Tabs: React.FunctionComponent<ITabsProps> = ({ onNavigate }: React.PropsWithChildren<ITabsProps>) => {
-  const settings = useRecoilValue(SettingsSelector);
+  const mode = useRecoilValue(ModeAtom);
 
   return (
     <ul className="flex items-center justify-start h-full" data-tabs-toggle="#myTabContent" role="tablist">
@@ -29,20 +31,24 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({ onNavigate }: React.
           <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
         </Tab>
       </li>
-      <li className="mr-2" role="presentation">
-        <Tab
-          navigationType={NavigationType.Snippets} 
-          onNavigate={onNavigate}>
-          <ScissorsIcon className={`h-6 w-auto mr-2`} /><span>Snippets</span>
-        </Tab>
-      </li>
-      <li className="mr-2" role="presentation">
-        <Tab
-          navigationType={NavigationType.Data} 
-          onNavigate={onNavigate}>
-          <DatabaseIcon className={`h-6 w-auto mr-2`} /><span>Data</span>
-        </Tab>
-      </li>
+      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.view}>
+        <li className="mr-2" role="presentation">
+          <Tab
+            navigationType={NavigationType.Snippets} 
+            onNavigate={onNavigate}>
+            <ScissorsIcon className={`h-6 w-auto mr-2`} /><span>Snippets</span>
+          </Tab>
+        </li>
+      </FeatureFlag>
+      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
+        <li className="mr-2" role="presentation">
+          <Tab
+            navigationType={NavigationType.Data} 
+            onNavigate={onNavigate}>
+            <DatabaseIcon className={`h-6 w-auto mr-2`} /><span>Data</span>
+          </Tab>
+        </li>
+      </FeatureFlag>
     </ul>
   );
 };

src/dashboardWebView/components/Media/DetailsSlideOver.tsx

@@ -3,7 +3,7 @@ import { PencilAltIcon, XIcon } from '@heroicons/react/outline';
 import { format } from 'date-fns';
 import { basename } from 'path';
 import * as React from 'react';
-import { Fragment, useMemo } from 'react';
+import { Fragment, useCallback, useMemo } from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
 import { MediaInfo } from '../../../models';
 import { Messenger } from '@estruyf/vscode/dist/client';
@@ -18,14 +18,16 @@ export interface IDetailsSlideOverProps {
   folder: string;
   media: MediaInfo;
   showForm: boolean;
+  isImageFile: boolean;
   onEdit: () => void;
   onEditClose: () => void;
   onDismiss: () => void;
 }
 
-export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> = ({ imgSrc, size, dimensions, media, folder, showForm, onEdit, onEditClose, onDismiss }: React.PropsWithChildren<IDetailsSlideOverProps>) => {
+export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> = ({ imgSrc, size, dimensions, media, folder, showForm, onEdit, onEditClose, onDismiss, isImageFile }: React.PropsWithChildren<IDetailsSlideOverProps>) => {
   const [ filename, setFilename ] = React.useState<string>(media.filename);
   const [ caption, setCaption ] = React.useState<string | undefined>(media.caption);
+  const [ title, setTitle ] = React.useState<string | undefined>(media.title);
   const [ alt, setAlt ] = React.useState(media.alt);
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const page = useRecoilValue(PageSelector);
@@ -37,20 +39,22 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
   const extension = fileInfo?.pop();
   const name = fileInfo?.join('.');
 
-  const onSubmitMetadata = () => {
+  const onSubmitMetadata = useCallback(() => {
     Messenger.send(DashboardMessage.updateMediaMetadata, {
       file: media.fsPath,
       filename,
       caption,
       alt,
+      title,
       folder: selectedFolder,
       page
     });
     
     onEditClose();
-  };
+  }, [media, filename, caption, alt, title, selectedFolder, page])
 
   React.useEffect(() => {
+    setTitle(media.title);
     setAlt(media.alt);
     setCaption(media.caption);
     setFilename(media.filename);
@@ -93,9 +97,13 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                   <div className="relative mt-6 flex-1 px-4 sm:px-6">
                     <div className="absolute inset-0 px-4 sm:px-6 space-y-8">
                       <div>
-                        <div className="block w-full aspect-w-10 aspect-h-7 overflow-hidden border-gray-200 dark:border-vulcan-200 border">
-                          <img src={imgSrc} alt={media.filename} className="object-cover" />
-                        </div>
+                        {
+                          isImageFile && (
+                            <div className="block w-full aspect-w-10 aspect-h-7 overflow-hidden border-gray-200 dark:border-vulcan-200 border">
+                              <img src={imgSrc} alt={media.filename} className="object-cover" />
+                            </div>
+                          )
+                        }
                         <div className="mt-4 flex items-start justify-between">
                           <div>
                             <h2 className="text-lg font-medium text-vulcan-300 dark:text-whisper-500"><span className="sr-only">Details for </span>{media.filename}</h2>
@@ -128,31 +136,51 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                     </div>
                                   </div>
                                 </div>
+
                                 <div>
                                   <label 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 className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
-                                    Alt tag value
+                                    Title
                                   </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)}
+                                      value={title || ''}
+                                      onChange={(e) => setTitle(e.target.value)}
                                     />
                                   </div>
                                 </div>
+
+                                {
+                                  isImageFile && (
+                                    <>
+                                      <div>
+                                        <label 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 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>
 
                               <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
@@ -192,16 +220,27 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   <dt className="text-vulcan-100 dark:text-whisper-900">Filename</dt>
                                   <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.filename}</dd>
                                 </div>
-                                
+
                                 <div className="py-3 flex justify-between text-sm font-medium">
-                                  <dt className="text-vulcan-100 dark:text-whisper-900">Caption</dt>
-                                  <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.caption || ""}</dd>
+                                  <dt className="text-vulcan-100 dark:text-whisper-900">Title</dt>
+                                  <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.title}</dd>
                                 </div>
                                 
-                                <div className="py-3 flex justify-between text-sm font-medium">
-                                  <dt className="text-vulcan-100 dark:text-whisper-900">Alternate text</dt>
-                                  <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.alt || ""}</dd>
-                                </div>
+                                {
+                                  isImageFile && (
+                                    <>
+                                      <div className="py-3 flex justify-between text-sm font-medium">
+                                        <dt className="text-vulcan-100 dark:text-whisper-900">Caption</dt>
+                                        <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.caption || ""}</dd>
+                                      </div>
+                                      
+                                      <div className="py-3 flex justify-between text-sm font-medium">
+                                        <dt className="text-vulcan-100 dark:text-whisper-900">Alternate text</dt>
+                                        <dd className="text-vulcan-300 dark:text-whisper-500 text-right">{media.alt || ""}</dd>
+                                      </div>
+                                    </>
+                                  )
+                                }
                               </dl>
                             </>
                           )

src/dashboardWebView/components/Media/Item.tsx

@@ -1,21 +1,23 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import { ClipboardIcon, CodeIcon, EyeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
+import { ClipboardIcon, CodeIcon, DocumentIcon, EyeIcon, MusicNoteIcon, PencilIcon, PhotographIcon, PlusIcon, TerminalIcon, TrashIcon, VideoCameraIcon } from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { CustomScript } from '../../../helpers/CustomScript';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import { ScriptType } from '../../../models';
+import { SnippetParser } from '../../../helpers/SnippetParser';
+import { ScriptType, Snippet } from '../../../models';
 import { MediaInfo } from '../../../models/MediaPaths';
 import { DashboardMessage } from '../../DashboardMessage';
 import { LightboxAtom, SelectedMediaFolderSelector, SettingsSelector, ViewDataSelector } from '../../state';
 import { MenuItem, MenuItems } from '../Menu';
+import { ActionMenuButton } from '../Menu/ActionMenuButton';
+import { QuickAction } from '../Menu/QuickAction';
 import { Alert } from '../Modals/Alert';
+import { InfoDialog } from '../Modals/InfoDialog';
 import { DetailsSlideOver } from './DetailsSlideOver';
-import { MenuButton } from './MenuButton'
-import { QuickAction } from './QuickAction';
  
 export interface IItemProps {
   media: MediaInfo;
@@ -25,6 +27,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   const [ , setLightbox ] = useRecoilState(LightboxAtom);
   const [ showAlert, setShowAlert ] = React.useState(false);
   const [ showForm, setShowForm ] = React.useState(false);
+  const [ showSnippetSelection, setShowSnippetSelection ] = React.useState(false);
   const [ showDetails, setShowDetails ] = React.useState(false);
   const [ caption, setCaption ] = React.useState(media.caption);
   const [ alt, setAlt ] = React.useState(media.alt);
@@ -33,6 +36,15 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const viewData = useRecoilValue(ViewDataSelector);
 
+  const mediaSnippets = useMemo(() => {
+    if (!settings?.snippets) {
+      return [];
+    }
+
+    const keys = Object.keys(settings.snippets);
+    return keys.filter(key => (settings.snippets || {})[key].isMediaSnippet).map(key => ({ title: key, ...(settings.snippets || {})[key]}));
+  }, [settings]);
+
   const getFolder = () => {
     if (settings?.wsFolder && media.fsPath) {
       let relPath = media.fsPath.split(settings.wsFolder).pop();
@@ -73,39 +85,70 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
 
   const insertToArticle = () => {
     const relPath = getRelPath();
-    Messenger.send(DashboardMessage.insertPreviewImage, {
-      image: parseWinPath(relPath) || "",
-      file: viewData?.data?.filePath,
-      fieldName: viewData?.data?.fieldName,
-      parents: viewData?.data?.parents,
-      multiple: viewData?.data?.multiple,
-      value: viewData?.data?.value,
-      position: viewData?.data?.position || null,
-      blockData: typeof viewData?.data?.blockData !== "undefined" ? viewData?.data?.blockData : undefined,
-      alt: alt || "",
-      caption: caption || ""
-    });
+
+    if (viewData?.data?.type === "file") {
+      Messenger.send(DashboardMessage.insertFile, {
+        relPath: parseWinPath(relPath) || "",
+        file: viewData?.data?.filePath,
+        fieldName: viewData?.data?.fieldName,
+        parents: viewData?.data?.parents,
+        multiple: viewData?.data?.multiple,
+        value: viewData?.data?.value,
+        position: viewData?.data?.position || null,
+        blockData: typeof viewData?.data?.blockData !== "undefined" ? viewData?.data?.blockData : undefined,
+        title: media.title
+      });
+    } else {
+      Messenger.send(DashboardMessage.insertMedia, {
+        relPath: parseWinPath(relPath) || "",
+        file: viewData?.data?.filePath,
+        fieldName: viewData?.data?.fieldName,
+        parents: viewData?.data?.parents,
+        multiple: viewData?.data?.multiple,
+        value: viewData?.data?.value,
+        position: viewData?.data?.position || null,
+        blockData: typeof viewData?.data?.blockData !== "undefined" ? viewData?.data?.blockData : undefined,
+        alt: alt || "",
+        caption: caption || "",
+        title: media.title || ""
+      });
+    }
   };
 
-  const insertSnippet = () => {
+  const insertSnippet = useCallback(() => {
+    if (mediaSnippets.length === 1) {
+      processSnippet(mediaSnippets[0]);
+    } else {
+      // Show dialog to select
+      setShowSnippetSelection(true);
+    }
+  }, [mediaSnippets]);
+
+  const processSnippet = useCallback((snippet: Snippet) => {
+    setShowSnippetSelection(false);
+
     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 || ""));
-    snippet = snippet?.replace("{mediaWidth}", media?.dimensions?.width?.toString() || "");
-    snippet = snippet?.replace("{mediaHeight}", media?.dimensions?.height?.toString() || "");
+    const fieldData = {
+      mediaUrl: parseWinPath(relPath) || "",
+      alt: alt || "",
+      caption: caption || "",
+      title: media.title || "",
+      filename: basename(relPath || ""),
+      mediaWidth: media?.dimensions?.width?.toString() || "",
+      mediaHeight: media?.dimensions?.height?.toString() || "",
+    };
 
-    Messenger.send(DashboardMessage.insertPreviewImage, {
-      image: parseWinPath(relPath) || "",
+    const output = SnippetParser.render(snippet.body, fieldData, snippet?.openingTags, snippet?.closingTags);
+
+    Messenger.send(DashboardMessage.insertMedia, {
+      relPath: parseWinPath(relPath) || "",
       file: viewData?.data?.filePath,
       fieldName: viewData?.data?.fieldName,
       position: viewData?.data?.position || null,
-      snippet
+      snippet: output
     });
-  };
+  }, [alt, caption, media, settings, viewData, mediaSnippets]);
 
   const deleteMedia = () => {
     setShowAlert(true);
@@ -166,9 +209,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     setShowDetails(true);
   };
 
-  const openLightbox = () => {
-    setLightbox(media.vsPath || "");
-  };
+  const openLightbox = useCallback(() => {
+    if (isImageFile) {
+      setLightbox(media.vsPath || "");
+    }
+  }, [media.vsPath]);
 
   const updateMetadata = () => {
     setShowForm(true);
@@ -179,11 +224,70 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     return (settings?.scripts || []).filter(script => script.type === ScriptType.MediaFile).map(script => (
       <MenuItem 
         key={script.title}
-        title={script.title} 
+        title={<div className='flex items-center'><TerminalIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>{script.title}</span></div>} 
         onClick={() => runCustomScript(script)} />
     ))
   }
 
+  const isVideoFile = useMemo(() => {
+    if (media.mimeType?.startsWith("video/")) {
+      return true;
+    }
+    return false;
+  }, [media]);
+
+  const isAudioFile = useMemo(() => {
+    if (media.mimeType?.startsWith("audio/")) {
+      return true;
+    }
+    return false;
+  }, [media]);
+
+  const isImageFile = useMemo(() => {
+    if (media.mimeType?.startsWith("image/")) {
+      return true;
+    }
+    return false;
+  }, [media]);
+
+  const renderMediaIcon = useMemo(() => {
+    const path = media.fsPath;
+    const extension = path.split('.').pop();
+
+    if (isImageFile) {
+      return <PhotographIcon className={`h-1/2 text-gray-300 dark:text-vulcan-200`} />;
+    }
+
+    let icon = <DocumentIcon className={`h-4/6 text-gray-300 dark:text-vulcan-200`} />;
+
+    if (isVideoFile) {
+      icon = <VideoCameraIcon className={`h-4/6 text-gray-300 dark:text-vulcan-200`} />;
+    }
+    
+    if (isAudioFile) {
+      icon = <MusicNoteIcon className={`h-4/6 text-gray-300 dark:text-vulcan-200`} />;
+    }
+
+    return (
+      <div className='w-full h-full flex justify-center items-center'>
+        {icon}
+        <span className='text-2xl font-bold absolute top-0 right-0 bottom-0 left-0 flex justify-center items-center'>{extension}</span>
+      </div>
+    );
+  }, [media, isImageFile, isVideoFile, isAudioFile]);
+  
+  const renderMedia = useMemo(() => {
+    if (isVideoFile || isAudioFile) {
+      return null;
+    }
+
+    if (isImageFile) {
+      return <img src={media.vsPath} alt={basename(media.fsPath)} className="mx-auto object-cover" />;
+    }
+
+    return null;
+  }, [media]);
+
   useEffect(() => {
     if (media.alt !== alt) {
       setAlt(media.alt);
@@ -206,75 +310,77 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   return (
     <>
       <li className="group relative bg-gray-50 dark:bg-vulcan-200 shadow-md hover:shadow-xl dark:shadow-none dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50">
-        <button className="relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden cursor-pointer h-48" onClick={openLightbox}>
+        <button className={`relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden  h-48 ${isImageFile ? "cursor-pointer" : "cursor-default"}`} onClick={openLightbox}>
           <div className={`absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center`}>
-            <PhotographIcon className={`h-1/2 text-gray-300 dark:text-vulcan-200`} />
+            {
+              renderMediaIcon
+            }
           </div>
           <div className={`absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center`}>
-            <img src={media.vsPath} alt={basename(media.fsPath)} className="mx-auto object-cover" />
+            { renderMedia }
           </div>
         </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={`group-scope absolute top-4 right-4 flex flex-col space-y-4`}>
 
-            <div className="flex items-center border border-transparent group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+            <div className="flex items-center border border-transparent group-scope-hover:bg-gray-200 dark:group-scope-hover:bg-vulcan-200 group-scope-hover:border-gray-100 dark:group-scope-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
 
-              <div className='hidden group-hover:inline-block h-5'>
-                <QuickAction 
-                  title='View media details'
-                  onClick={viewMediaDetails}>
-                  <EyeIcon className={`h-5 w-5`} aria-hidden="true" />
-                </QuickAction>
+              <Menu as="div" className="relative z-10 flex text-left">
+                <div className='hidden group-scope-hover:flex'>
+                  <QuickAction 
+                    title='View media details'
+                    onClick={viewMediaDetails}>
+                    <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
+                  </QuickAction>
 
-                <QuickAction 
-                  title='Edit metadata'
-                  onClick={updateMetadata}>
-                  <PencilIcon className={`h-5 w-5`} aria-hidden="true" />
-                </QuickAction>
+                  <QuickAction 
+                    title='Edit metadata'
+                    onClick={updateMetadata}>
+                    <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
+                  </QuickAction>
 
-                {
-                  viewData?.data?.filePath ? (
-                    <>
-                      <QuickAction 
-                        title={(viewData.data.metadataInsert && viewData.data.fieldName) ? `Insert image for your "${viewData.data.fieldName}" field` : `Insert image with markdown markup`}
-                        onClick={insertToArticle}>
-                        <PlusIcon className={`h-5 w-5`} aria-hidden="true" />
-                      </QuickAction>
+                  {
+                    viewData?.data?.filePath ? (
+                      <>
+                        <QuickAction 
+                          title={(viewData.data.metadataInsert && viewData.data.fieldName) ? `Insert image for your "${viewData.data.fieldName}" field` : `Insert image with markdown markup`}
+                          onClick={insertToArticle}>
+                          <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
+                        </QuickAction>
 
-                      {
-                        (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
-                          <QuickAction 
-                            title='Insert snippet'
-                            onClick={insertSnippet}>
-                            <CodeIcon className={`h-5 w-5`} aria-hidden="true" />
-                          </QuickAction>
-                        )
-                      }
-                    </>
-                  ) : (
-                    <>
-                      <QuickAction 
-                        title='Copy media path'
-                        onClick={copyToClipboard}>
-                        <ClipboardIcon className={`h-5 w-5`} aria-hidden="true" />
-                      </QuickAction>
-                    </>
-                  )
-                }
+                        {
+                          (viewData?.data?.position && mediaSnippets.length > 0) && (
+                            <QuickAction 
+                              title='Insert snippet'
+                              onClick={insertSnippet}>
+                              <CodeIcon className={`w-4 h-4`} aria-hidden="true" />
+                            </QuickAction>
+                          )
+                        }
+                      </>
+                    ) : (
+                      <>
+                        <QuickAction 
+                          title='Copy media path'
+                          onClick={copyToClipboard}>
+                          <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
+                        </QuickAction>
+                      </>
+                    )
+                  }
 
-                <QuickAction 
-                  title='Delete media file'
-                  onClick={deleteMedia}>
-                  <TrashIcon className={`h-5 w-5`} aria-hidden="true" />
-                </QuickAction>
-              </div>
+                  <QuickAction 
+                    title='Delete media file'
+                    onClick={deleteMedia}>
+                    <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
+                  </QuickAction>
+                </div>
 
-              <Menu as="div" className="relative z-10 inline-block text-left  h-5">
-                <MenuButton title={`Menu`} />
+                <ActionMenuButton title={`Menu`} />
 
                 <MenuItems widthClass='w-40'>
                   <MenuItem 
-                    title={`Edit metadata`}
+                    title={<div className='flex items-center'><PencilIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>Edit metadata</span></div>}
                     onClick={updateMetadata}
                     />
 
@@ -282,15 +388,16 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
                     viewData?.data?.filePath ? (
                       <>
                         <MenuItem 
-                          title={`Insert image markdown`}
+                          title={<div className='flex items-center'><PlusIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>Insert image markdown</span></div>}
                           onClick={insertToArticle} />
 
                         {
-                          (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                          (viewData?.data?.position && mediaSnippets.length > 0) && mediaSnippets.map((snippet, idx) => (
                             <MenuItem 
-                              title={`Insert snippet`}
-                              onClick={insertSnippet} />
-                          )
+                              key={idx}
+                              title={<div className='flex items-center'><CodeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>{snippet.title}</span></div>}
+                              onClick={() => processSnippet(snippet)} />
+                          ))
                         }
 
                         { customScriptActions() }
@@ -307,11 +414,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
                   }
 
                   <MenuItem 
-                    title={`Reveal media`}
+                    title={<div className='flex items-center'><EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>Reveal media</span></div>}
                     onClick={revealMedia} />
 
                   <MenuItem 
-                    title={`Delete`}
+                    title={<div className='flex items-center'><TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} /> <span>Delete</span></div>}
                     onClick={deleteMedia} />
                 </MenuItems>
               </Menu>
@@ -321,6 +428,14 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
           <p className="text-sm dark:text-whisper-900 font-bold pointer-events-none flex items-center break-all">
             {basename(parseWinPath(media.fsPath) || "")}
           </p>
+          {
+            !isImageFile && media.title && (
+              <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
+                <b className={`mr-2`}>Title:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.title}</span>
+              </p>
+            )
+          }
           {
             media.caption && (
               <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
@@ -348,6 +463,32 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
         </div>
       </li>
 
+      {
+        showSnippetSelection && (
+          <InfoDialog 
+            icon={<CodeIcon className="h-6 w-6" aria-hidden="true" />}
+            title='Insert snippet'
+            description='Select the media snippet to use for the current media file.'
+            dismiss={() => setShowSnippetSelection(false)}>
+            
+            <ul className='flex justify-center'>
+              {
+                mediaSnippets.map((snippet, idx) => (
+                  <li key={idx} className="inline-flex items-center pb-2 mr-2">
+                    <button
+                      className="w-full inline-flex justify-center 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 sm:w-auto sm:text-sm disabled:opacity-30"
+                      onClick={() => processSnippet(snippet)}>
+                      {snippet.title}
+                    </button>
+                  </li>
+                ))
+              }
+            </ul>
+
+          </InfoDialog>
+        )
+      }
+
       {
         showDetails && (
           <DetailsSlideOver
@@ -357,6 +498,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
             folder={getFolder()}
             media={media}
             showForm={showForm}
+            isImageFile={isImageFile}
             onEdit={() => setShowForm(true)}
             onEditClose={() => setShowForm(false)}
             onDismiss={() => { setShowDetails(false); setShowForm(false); }} />

src/dashboardWebView/components/Media/Media.tsx

@@ -17,7 +17,7 @@ import useMedia from '../../hooks/useMedia';
 import { TelemetryEvent } from '../../../constants';
 import { PageLayout } from '../Layout/PageLayout';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import { join } from 'path';
+import { extname, join } from 'path';
 
 export interface IMediaProps {}
 
@@ -40,12 +40,23 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
   }, [folders, viewData, settings?.staticFolder]);
 
   const allMedia = React.useMemo(() => {
+    let mediaFiles = media;
     // Check if content allows page bundle
     if (viewData && viewData.data && typeof viewData.data.pageBundle !== "undefined" && !viewData.data.pageBundle) {
-      return media.filter(m => parseWinPath(m.fsPath).includes(join('/', settings?.staticFolder || '', '/')));
+      mediaFiles = media.filter(m => parseWinPath(m.fsPath).includes(join('/', settings?.staticFolder || '', '/')));
     }
 
-    return media;
+    if (viewData && viewData.data && viewData.data.type === "file" && viewData.data.fileExtensions && viewData.data.fileExtensions.length > 0) {
+      const supportedExtensions = viewData.data.fileExtensions;
+      mediaFiles = mediaFiles.filter(m => {
+        const ext = extname(m.fsPath);
+        // Remove the dot from the extension
+        const extWithoutDot = ext.substring(1);
+        return supportedExtensions.includes(extWithoutDot);
+      });
+    }
+
+    return mediaFiles;
   }, [media, viewData, settings?.staticFolder]); 
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
@@ -73,12 +84,15 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
 
   const {getRootProps, isDragActive} = useDropzone({
     onDrop,
-    accept: 'image/*'
+    accept: settings?.dashboardState.media.mimeTypes || ['image/*', 'video/*', 'audio/*'],
+    onDropRejected: () => {
+      Messenger.send(DashboardMessage.showWarning, 'Unsupported file type');
+    }
   });
   
   return (
     <PageLayout>
-      <div className="w-full h-full" {...getRootProps()}>
+      <div className="w-full h-full pb-6" {...getRootProps()}>
         {
           viewData?.data?.filePath && (
             <div className={`text-lg text-center mb-6`}>

src/dashboardWebView/components/Media/MenuButton.tsx

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

src/dashboardWebView/components/Menu/ActionMenuButton.tsx

@@ -0,0 +1,18 @@
+import { Menu } from '@headlessui/react';
+import {DotsVerticalIcon} from '@heroicons/react/outline';
+import * as React from 'react';
+
+export interface IActionMenuButtonProps {
+  title: string;
+  disabled?: boolean;
+}
+
+export const ActionMenuButton: React.FunctionComponent<IActionMenuButtonProps> = ({ title, disabled }: React.PropsWithChildren<IActionMenuButtonProps>) => {
+  return (
+    <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 ${disabled ? 'opacity-50' : ''}`}>
+      <span className="sr-only">{title}</span>
+      <DotsVerticalIcon className="w-4 h-4" aria-hidden="true" />
+    </Menu.Button>
+  );
+};
+

src/dashboardWebView/components/Menu/MenuItem.tsx

@@ -6,7 +6,7 @@ export interface IMenuItemProps {
   value?: any;
   isCurrent?: boolean;
   disabled?: boolean;
-  onClick: (value: any) => void;
+  onClick: (value: any, e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({title, value, isCurrent, disabled, onClick}: React.PropsWithChildren<IMenuItemProps>) => {
@@ -14,7 +14,7 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({title, value,
     <Menu.Item>
       <button
         disabled={disabled}
-        onClick={() => onClick(value)}
+        onClick={(e) => onClick(value, e)}
         className={`${!isCurrent ? `font-normal` : `font-bold`} text-gray-500 dark:text-whisper-900 block px-4 py-2 text-sm 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}

src/dashboardWebView/components/Menu/MenuItems.tsx

@@ -4,9 +4,10 @@ import { Fragment } from 'react';
 
 export interface IMenuItemsProps {
   widthClass?: string;
+  marginTopClass?: string;
 }
 
-export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass, children}: React.PropsWithChildren<IMenuItemsProps>) => {
+export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass, marginTopClass, children}: React.PropsWithChildren<IMenuItemsProps>) => {
   return (
     <Transition
       as={Fragment}
@@ -17,7 +18,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass,
       leaveFrom="transform opacity-100 scale-100"
       leaveTo="transform opacity-0 scale-95"
     >
-      <Menu.Items className={`${widthClass || ""} 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`}>
+      <Menu.Items className={`${widthClass || ""} ${marginTopClass || "mt-2"} origin-top-right absolute right-0 z-20 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>

src/dashboardWebView/components/Menu/QuickAction.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export interface IQuickActionProps {
   title: string;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const QuickAction: React.FunctionComponent<IQuickActionProps> = ({title, onClick, children}: React.PropsWithChildren<IQuickActionProps>) => {

src/dashboardWebView/components/Menu/index.ts

@@ -1,3 +1,5 @@
+export * from './ActionMenuButton';
 export * from './MenuButton';
 export * from './MenuItem';
 export * from './MenuItems';
+export * from './QuickAction';

src/dashboardWebView/components/Modals/InfoDialog.tsx

@@ -0,0 +1,72 @@
+import { Dialog, Transition } from '@headlessui/react';
+import * as React from 'react';
+import { Fragment } from 'react';
+
+export interface IInfoDialogProps {
+  icon?: JSX.Element;
+  title: string;
+  description: string;
+  dismiss: () => void;
+}
+
+export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({dismiss, icon, title, description, children}: React.PropsWithChildren<IInfoDialogProps>) => {
+  return (
+    <Transition.Root show={true} as={Fragment}>
+      <Dialog className="fixed z-10 inset-0 overflow-y-auto" 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 className="sm:flex sm:items-start">
+                {
+                  icon && (
+                    <div className="mt-3 sm:mr-4 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 bg-gray-50 dark:bg-vulcan-400">
+                      {icon}
+                    </div>
+                  )
+                }
+                <div className="mt-3 text-center sm:mt-0 sm:text-left">
+                  <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>
+              </div>
+              <div className="mt-5 sm:mt-4">
+                {children}
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

src/dashboardWebView/components/Navigation.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Tab } from '../constants/Tab';
-import { SettingsAtom, TabAtom } from '../state';
+import { SettingsAtom, TabAtom, TabInfoAtom } from '../state';
 
 export interface INavigationProps {
   totalPages: number;
@@ -15,8 +15,9 @@ export const tabs = [
 
 export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPages}: React.PropsWithChildren<INavigationProps>) => {
   const [ crntTab, setCrntTab ] = useRecoilState(TabAtom);
+  const tabInfo = useRecoilValue(TabInfoAtom);
   const settings = useRecoilValue(SettingsAtom);
-
+  
   return (
     <nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
       {
@@ -28,7 +29,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPage
               aria-current={tab.id === crntTab ? 'page' : undefined}
               onClick={() => setCrntTab(tab.id)}
             >
-              {tab.name}{(tab.id === crntTab && totalPages) ? ` (${totalPages})` : ''}
+              {tab.name}{(tabInfo && tabInfo[tab.id]) ? ` (${tabInfo[tab.id]})` : ''}
             </button>
           ))
         ) : (
@@ -38,7 +39,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPage
               aria-current={tabs[0].id === crntTab ? 'page' : undefined}
               onClick={() => setCrntTab(tabs[0].id)}
             >
-              {tabs[0].name}{(tabs[0].id === crntTab && totalPages) ? ` (${totalPages})` : ''}
+              {tabs[0].name}{(tabInfo && tabInfo[tabs[0].id]) ? ` (${tabInfo[tabs[0].id]})` : ''}
             </button>
 
             {
@@ -49,7 +50,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({totalPage
                   aria-current={value === crntTab ? 'page' : undefined}
                   onClick={() => setCrntTab(value)}
                 >
-                  {value}{(value === crntTab && totalPages) ? ` (${totalPages})` : ''}
+                  {value}{(tabInfo && tabInfo[value]) ? ` (${tabInfo[value]})` : ''}
                 </button>
               ))
             }

src/dashboardWebView/components/Preview/Preview.tsx

@@ -0,0 +1,69 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { useRef } from 'react';
+import { PreviewCommands } from '../../../constants';
+
+export interface IPreviewProps {
+  url: string | null;
+}
+
+export const Preview: React.FunctionComponent<IPreviewProps> = ({url}: React.PropsWithChildren<IPreviewProps>) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const onRefresh = () => {
+    if (iframeRef.current?.src) {
+      iframeRef.current.src = iframeRef.current.src;
+    }
+  };
+
+  const openInBrowser = () => {
+    Messenger.send(PreviewCommands.toVSCode.open, url);
+  };
+
+  return (
+    <div className='w-full h-full bg-white'>
+      <div 
+        className="slug fixed w-full top-0 flex items-center" 
+        style={{ 
+          height: "30px", 
+          background: "var(--vscode-editor-background)", 
+          borderBottom: "1px solid var(--vscode-focusBorder)" 
+        }}
+      >
+        <input 
+          type="text" 
+          value={url || ""} 
+          className="w-full h-full border-0 bg-transparent text-xs py-1 px-2"
+          style={{
+            color: "var(--vscode-editor-foreground)"
+          }}
+          disabled />
+
+        <div 
+          className="actions absolute right-0 top-0 bottom-0 flex items-center space-x-2 px-2"
+          style={{
+            background: "var(--vscode-editor-background)", 
+          }}
+        >
+          <button title="Refresh" onClick={onRefresh}>
+            <RefreshIcon className='w-4 h-4' aria-hidden="true" />
+          </button>
+
+          <button title="Open" onClick={openInBrowser} className="mr-2">
+            <ExternalLinkIcon className='w-4 h-4' aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <iframe 
+        ref={iframeRef} 
+        src={url || ""} 
+        className={`w-full border-0`} 
+        style={{ 
+          height: "calc(100% - 30px)", 
+          marginTop: "30px" 
+      }}></iframe>
+    </div>
+  );
+};

src/dashboardWebView/components/Preview/index.ts

@@ -0,0 +1 @@
+export * from './Preview';

src/dashboardWebView/components/SnippetsView/Item.tsx

@@ -1,12 +1,16 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { CodeIcon, DotsHorizontalIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
+import { CodeIcon, DocumentTextIcon, DotsHorizontalIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlag } from '../../../components/features/FeatureFlag';
+import { FEATURE_FLAG } from '../../../constants';
 import { SnippetParser } from '../../../helpers/SnippetParser';
-import { Snippet, SnippetField, Snippets } from '../../../models';
+import { Snippet, Snippets } from '../../../models';
+import { FileIcon } from '../../../panelWebView/components/Icons/FileIcon';
 import { DashboardMessage } from '../../DashboardMessage';
-import { SettingsSelector, ViewDataSelector } from '../../state';
+import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
+import { QuickAction } from '../Menu';
 import { Alert } from '../Modals/Alert';
 import { FormDialog } from '../Modals/FormDialog';
 import { NewForm } from './NewForm';
@@ -20,6 +24,7 @@ export interface IItemProps {
 export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: React.PropsWithChildren<IItemProps>) => {
   const viewData = useRecoilValue(ViewDataSelector);
   const settings = useRecoilValue(SettingsSelector);
+  const mode = useRecoilValue(ModeAtom);
   const [ showInsertDialog, setShowInsertDialog ] = useState(false);
   const [ showEditDialog, setShowEditDialog ] = useState(false);
   const [ showAlert, setShowAlert ] = React.useState(false);
@@ -27,9 +32,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
   const [ snippetTitle, setSnippetTitle ] = useState<string>('');
   const [ snippetDescription, setSnippetDescription ] = useState<string>('');
   const [ snippetOriginalBody, setSnippetOriginalBody ] = useState<string>('');
+  const [ mediaSnippet, setMediaSnippet ] = useState<boolean>(false);
 
   const formRef = useRef<SnippetFormHandle>(null);
 
+  const insertToContent = useMemo(() => viewData?.data?.filePath, [ viewData ]);
+
   const insertToArticle = () => {
     formRef.current?.onSave();
     setShowInsertDialog(false);
@@ -40,6 +48,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
     setSnippetTitle('');
     setSnippetDescription('');
     setSnippetOriginalBody('');
+    setMediaSnippet(false);
   };
 
   const onOpenEdit = useCallback(() => {
@@ -47,6 +56,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
     setSnippetDescription(snippet.description);
     setSnippetOriginalBody(typeof snippet.body === "string" ? snippet.body : snippet.body.join(`\n`));
     setShowEditDialog(true);
+    setMediaSnippet(!!snippet.isMediaSnippet);
   }, [snippet]);
   
   const onSnippetUpdate = useCallback(() => {
@@ -64,11 +74,16 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
 
     const snippetContents: Snippet = {
       ...crntSnippet,
-      fields,
       description: snippetDescription || '',
       body: snippetLines.length === 1 ? snippetLines[0] : snippetLines
     };
 
+    if (!mediaSnippet) {
+      snippetContents.fields = fields;
+    } else {
+      snippetContents.isMediaSnippet = true;
+    }
+
     // Check if new or update
     if (title === snippetTitle) {
       snippets[title] = snippetContents;
@@ -80,7 +95,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
     Messenger.send(DashboardMessage.updateSnippet, { snippets });
 
     reset();
-  }, [settings?.snippets, title, snippetTitle, snippetDescription, snippetOriginalBody]);
+  }, [settings?.snippets, title, snippetTitle, snippetDescription, snippetOriginalBody, mediaSnippet]);
 
   const onDelete = useCallback(() => {
     const snippets = Object.assign({}, settings?.snippets || {});
@@ -98,38 +113,69 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
           <CodeIcon className='w-64 h-64 opacity-5 text-vulcan-200 dark:text-gray-400' />
         </div>
 
-        <h2 className="mt-2 mb-2 font-bold">{title}</h2>
+        <h2 className="mt-2 mb-2 font-bold flex items-center" title={snippet.isMediaSnippet ? "Media snippet" : "Content snippet"}>
+          { snippet.isMediaSnippet ? <PhotographIcon className='w-5 h-5 mr-1' aria-hidden={true} /> : <DocumentTextIcon className='w-5 h-5 mr-1' aria-hidden={true} /> }
+          
+          {title}
+        </h2>
 
-        <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
-          <div className="flex items-center border border-transparent group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
-            <div className='group-hover:hidden'>
-              <DotsHorizontalIcon className="w-4 h-4" />
-            </div>
+        <FeatureFlag 
+          features={mode?.features || []} 
+          flag={FEATURE_FLAG.dashboard.snippets.manage}
+          alternative={(
+            insertToContent ? (
+              <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
+                <div className="flex items-center border border-transparent group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+                  <div className='group-hover:hidden'>
+                    <DotsHorizontalIcon className="w-4 h-4" />
+                  </div>
 
-            <div className='hidden group-hover:flex space-x-2'>
-              {
-                viewData?.data?.filePath && (
-                  <>
-                    <button onClick={() => setShowInsertDialog(true)}>
-                      <PlusIcon className='w-4 h-4' />
-                      <span className='sr-only'>Insert snippet</span>
-                    </button>
-                  </>
-                )
-              }
+                  <div className='hidden group-hover:flex'>
+                    <QuickAction 
+                      title={`Insert snippet`}
+                      onClick={() => setShowInsertDialog(true)}>
+                      <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
+                    </QuickAction>
+                  </div>
+                </div>
+              </div>
+            ) : undefined
+          )}
+        >
+          <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
+            <div className="flex items-center border border-transparent group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+              <div className='group-hover:hidden'>
+                <DotsHorizontalIcon className="w-4 h-4" />
+              </div>
 
-              <button onClick={onOpenEdit}>
-                <PencilIcon className='w-4 h-4' />
-                <span className='sr-only'>Edit snippet</span>
-              </button>
+              <div className='hidden group-hover:flex'>
+                {
+                  insertToContent && !snippet.isMediaSnippet && (
+                    <>
+                      <QuickAction 
+                        title={`Insert snippet`}
+                        onClick={() => setShowInsertDialog(true)}>
+                        <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
+                      </QuickAction>
+                    </>
+                  )
+                }
 
-              <button onClick={() => setShowAlert(true)}>
-                <TrashIcon className='w-4 h-4' />
-                <span className='sr-only'>Delete snippet</span>
-              </button>
+                <QuickAction 
+                  title={`Edit snippet`}
+                  onClick={onOpenEdit}>
+                  <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
+                </QuickAction>
+
+                <QuickAction 
+                  title={`Delete snippet`}
+                  onClick={() => setShowAlert(true)}>
+                  <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
+                </QuickAction>
+              </div>
             </div>
           </div>
-        </div>
+        </FeatureFlag>
 
         <p className="text-xs text-vulcan-200 dark:text-whisper-800">{snippet.description}</p>
       </li>
@@ -139,7 +185,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
           <FormDialog 
             title={`Insert snippet: ${title}`}
             description={`Insert the ${title.toLowerCase()} snippet into the current article`}
-            isSaveDisabled={!viewData?.data?.filePath}
+            isSaveDisabled={!insertToContent}
             trigger={insertToArticle}
             dismiss={() => setShowInsertDialog(false)}
             okBtnText='Insert'
@@ -169,6 +215,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({ title, snippet }: Re
               title={snippetTitle}
               description={snippetDescription}
               body={snippetOriginalBody}
+              isMediaSnippet={mediaSnippet}
+              onMediaSnippetUpdate={(value: boolean) => setMediaSnippet(value)}
               onTitleUpdate={(value: string) => setSnippetTitle(value)}
               onDescriptionUpdate={(value: string) => setSnippetDescription(value)}
               onBodyUpdate={(value: string) => setSnippetOriginalBody(value)} />

src/dashboardWebView/components/SnippetsView/NewForm.tsx

@@ -1,16 +1,24 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
+import { GeneralCommands } from '../../../constants';
 
 export interface INewFormProps {
   title: string;
   description: string;
   body: string;
+  isMediaSnippet: boolean;
 
+  onMediaSnippetUpdate: (value: boolean) => void;
   onTitleUpdate: (value: string) => void;
   onDescriptionUpdate: (value: string) => void;
   onBodyUpdate: (value: string) => void;
 }
 
-export const NewForm: React.FunctionComponent<INewFormProps> = ({ title, description, body, onTitleUpdate, onDescriptionUpdate, onBodyUpdate }: React.PropsWithChildren<INewFormProps>) => {
+export const NewForm: React.FunctionComponent<INewFormProps> = ({ title, description, body, isMediaSnippet, onMediaSnippetUpdate, onTitleUpdate, onDescriptionUpdate, onBodyUpdate }: React.PropsWithChildren<INewFormProps>) => {
+
+  const openLink = () => {
+    Messenger.send(GeneralCommands.toVSCode.openLink, "https://frontmatter.codes/docs/markdown#placeholders");
+  }
 
   return (
     <div className='space-y-4'>
@@ -60,6 +68,36 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({ title, descrip
           />
         </div>
       </div>
+
+      <div>
+        <label htmlFor={`snippet`} className="block text-sm font-medium">
+          Is a media snippet?
+        </label>
+        <div className="mt-1 relative flex items-start">
+          <div className="flex items-center h-5">
+            <input
+              id="isMediaSnippet"
+              aria-describedby="isMediaSnippet-description"
+              name="isMediaSnippet"
+              type="checkbox"
+              checked={isMediaSnippet}
+              onChange={(e) => onMediaSnippetUpdate(e.currentTarget.checked)}
+              className="focus:ring-teal-500 h-4 w-4 text-teal-600 border-gray-300 rounded"
+            />
+          </div>
+          <div className="ml-3 text-sm">
+            <label htmlFor="isMediaSnippet" className="font-medium text-vulcan-100 dark:text-whisper-900">
+              Media snippet
+            </label>
+            <p id="isMediaSnippet-description" className="text-vulcan-300 dark:text-whisper-500">
+              Use the current snippet for inserting media files into your content.
+            </p>
+            <p>
+              Check our <button className='text-teal-700 hover:text-teal-500' onClick={openLink} title='media snippet placeholders'>media snippet placeholders</button> documentation to know which placeholders you can use.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/dashboardWebView/components/SnippetsView/SnippetForm.tsx

@@ -103,7 +103,7 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
 
   return (
     <div>
-      <pre className='border border-opacity-40 p-2 whitespace-pre-wrap break-words'>
+      <pre className='border border-opacity-40 p-2 whitespace-pre-wrap break-words max-h-64 overflow-auto'>
         {snippetBody}
       </pre>
 

src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx

@@ -36,8 +36,9 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
       <textarea
         name={field.name}
         value={field.value || ""}
-        className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500"
+        className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500 h-auto"
         onChange={(e) => onValueChange(field, e.currentTarget.value)}
+        rows={4}
       />
     )
   }

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -3,10 +3,12 @@ import { CodeIcon, PlusSmIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlag } from '../../../components/features/FeatureFlag';
+import { FEATURE_FLAG } from '../../../constants';
 import { TelemetryEvent } from '../../../constants/TelemetryEvent';
 import { SnippetParser } from '../../../helpers/SnippetParser';
 import { DashboardMessage } from '../../DashboardMessage';
-import { SettingsSelector, ViewDataSelector } from '../../state';
+import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { PageLayout } from '../Layout/PageLayout';
 import { FormDialog } from '../Modals/FormDialog';
 import { SponsorMsg } from '../SponsorMsg';
@@ -18,10 +20,12 @@ export interface ISnippetsProps {}
 export const Snippets: React.FunctionComponent<ISnippetsProps> = (props: React.PropsWithChildren<ISnippetsProps>) => {
   const settings = useRecoilValue(SettingsSelector);
   const viewData = useRecoilValue(ViewDataSelector);
+  const mode = useRecoilValue(ModeAtom);
   const [ snippetTitle, setSnippetTitle ] = useState<string>('');
   const [ snippetDescription, setSnippetDescription ] = useState<string>('');
   const [ snippetBody, setSnippetBody ] = useState<string>('');
   const [ showCreateDialog, setShowCreateDialog ] = useState(false);
+  const [ mediaSnippet, setMediaSnippet ] = useState(false);
 
   const snippets = settings?.snippets || {};
   const snippetKeys = useMemo(() => Object.keys(snippets) || [], [settings?.snippets]);
@@ -38,11 +42,12 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (props: React.P
       title: snippetTitle,
       description: snippetDescription || '',
       body: snippetBody,
-      fields
+      fields,
+      isMediaSnippet: mediaSnippet
     });
 
     reset();
-  }, [snippetTitle, snippetDescription, snippetBody]);
+  }, [snippetTitle, snippetDescription, snippetBody, mediaSnippet]);
 
   const reset = () => {
     setShowCreateDialog(false);
@@ -60,74 +65,80 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (props: React.P
   return (
     <PageLayout
       header={(
-        <div
-          className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
-          aria-label="Pagination"
-        >
-          <div className="flex flex-1 justify-end">
-            <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 snippet`}
-              onClick={() => setShowCreateDialog(true)}>
-              <PlusSmIcon className={`mr-2 h-6 w-6`} />
-              <span className={`text-sm`}>Create new snippet</span>
-            </button>
-          </div>
-        </div>
-      )}>      
-
-      {
-        viewData?.data?.filePath && (
-          <div className={`text-xl text-center mb-6`}>
-            <p>Select the snippet to add to your content.</p>
-          </div>
-        )
-      }
-
-      {
-        snippetKeys && snippetKeys.length > 0 ? (
-          <ul role="list" className={`grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`}>
-            {
-              snippetKeys.map((snippetKey: any, index: number) => (
-                <Item 
-                  key={index}
-                  title={snippetKey}
-                  snippet={snippets[snippetKey]} />
-              ))
-            }
-          </ul>
-        ) : (
-          <div className='w-full h-full flex items-center justify-center'>
-            <div className='flex flex-col items-center text-gray-500 dark:text-whisper-900'>
-              <CodeIcon className='w-32 h-32' />
-              <p className='text-3xl'>No snippets found</p>
+        <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.manage}>
+          <div
+            className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
+            aria-label="snippets header"
+          >
+            <div className="flex flex-1 justify-end">
+              <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 snippet`}
+                onClick={() => setShowCreateDialog(true)}>
+                <PlusSmIcon className={`mr-2 h-6 w-6`} />
+                <span className={`text-sm`}>Create new snippet</span>
+              </button>
             </div>
           </div>
-        )
-      }
+        </FeatureFlag>
+      )}>      
 
-      {
-        showCreateDialog && (
-          <FormDialog 
-            title={`Create a snippet`}
-            description={``}
-            isSaveDisabled={!snippetTitle || !snippetBody}
-            trigger={onSnippetAdd}
-            dismiss={reset}
-            okBtnText='Save'
-            cancelBtnText='Cancel'>
+      <div className="flex flex-col">
+        {
+          viewData?.data?.filePath && (
+            <div className={`text-xl text-center mb-6`}>
+              <p>Select the snippet to add to your content.</p>
+            </div>
+          )
+        }
 
-            <NewForm 
-              title={snippetTitle}
-              description={snippetDescription}
-              body={snippetBody}
-              onTitleUpdate={(value: string) => setSnippetTitle(value)}
-              onDescriptionUpdate={(value: string) => setSnippetDescription(value)}
-              onBodyUpdate={(value: string) => setSnippetBody(value)} />
-            
-          </FormDialog>
-        )
-      }
+        {
+          snippetKeys && snippetKeys.length > 0 ? (
+            <ul role="list" className={`grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`}>
+              {
+                snippetKeys.map((snippetKey: any, index: number) => (
+                  <Item 
+                    key={index}
+                    title={snippetKey}
+                    snippet={snippets[snippetKey]} />
+                ))
+              }
+            </ul>
+          ) : (
+            <div className='w-full h-full flex items-center justify-center'>
+              <div className='flex flex-col items-center text-gray-500 dark:text-whisper-900'>
+                <CodeIcon className='w-32 h-32' />
+                <p className='text-3xl'>No snippets found</p>
+              </div>
+            </div>
+          )
+        }
+
+        {
+          showCreateDialog && (
+            <FormDialog 
+              title={`Create a snippet`}
+              description={``}
+              isSaveDisabled={!snippetTitle || !snippetBody}
+              trigger={onSnippetAdd}
+              dismiss={reset}
+              okBtnText='Save'
+              cancelBtnText='Cancel'>
+
+              <NewForm 
+                title={snippetTitle}
+                description={snippetDescription}
+                body={snippetBody}
+                isMediaSnippet={mediaSnippet}
+                onMediaSnippetUpdate={(value: boolean) => setMediaSnippet(value)}
+                onTitleUpdate={(value: string) => setSnippetTitle(value)}
+                onDescriptionUpdate={(value: string) => setSnippetDescription(value)}
+                onBodyUpdate={(value: string) => setSnippetBody(value)} />
+              
+            </FormDialog>
+          )
+        }
+      </div>
 
       <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} isBacker={settings?.isBacker} />
     </PageLayout>

src/dashboardWebView/components/Spinner.tsx

@@ -4,7 +4,7 @@ export interface ISpinnerProps {}
 
 export const Spinner: React.FunctionComponent<ISpinnerProps> = (props: React.PropsWithChildren<ISpinnerProps>) => {
   return (
-    <div className={`fixed top-12 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-10 z-50`}>
+    <div className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-10 z-50`}>
       <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-50 h-32 w-32" />
     </div>
   );

src/dashboardWebView/components/Status.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { SettingsAtom } from '../state';
 
@@ -9,15 +10,29 @@ export interface IStatusProps {
 export const Status: React.FunctionComponent<IStatusProps> = ({draft}: React.PropsWithChildren<IStatusProps>) => {
   const settings = useRecoilValue(SettingsAtom);
 
+  const draftField = useMemo(() => settings?.draftField, [settings]);
+
+  const draftValue = useMemo(() => {
+    if (draftField && draftField.type === 'choice') {
+      return draft;
+    } else if (draftField && typeof draftField.invert !== 'undefined' && draftField.invert) {
+      return !draft;
+    } else {
+      return draft;
+    }
+  }, [draftField, draft]);
+
   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>;
+    if (draftValue) {
+      return <span className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 bg-teal-500`}>{draftValue}</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>
+    <span className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 ${draftValue ? "bg-red-500" : "bg-teal-500"}`}>
+      {draftValue ? "Draft" : "Published"}
+    </span>
   );
 };

src/dashboardWebView/components/Steps/Step.tsx

@@ -47,7 +47,7 @@ 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>
-          <div className="text-sm text-vulcan-400 dark:text-whisper-600">{description}</div>
+          <div className="mt-1 text-sm text-vulcan-400 dark:text-whisper-600">{description}</div>
         </span>
       </>
     );

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -4,17 +4,33 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { Settings } from '../../models/Settings';
 import { Status } from '../../models/Status';
 import { Step } from './Step';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Menu } from '@headlessui/react';
 import { MenuItem } from '../Menu';
-import { Framework } from '../../../models';
-import {ChevronDownIcon} from '@heroicons/react/outline';
+import { ContentFolder, Framework } from '../../../models';
+import {CheckCircleIcon, ChevronDownIcon} from '@heroicons/react/outline';
+import {CheckCircleIcon as CheckCircleIconSolid} from '@heroicons/react/solid';
 import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
+import { join } from 'path';
 
 export interface IStepsToGetStartedProps {
   settings: Settings;
 }
 
+const Folder = ({ wsFolder, folder, folders, addFolder }: { wsFolder: string, folder: string, folders: ContentFolder[], addFolder: (folder: string) => void}) => {
+
+  const isAdded = useMemo(() => folders.find(f => f.path.toLowerCase() === join(wsFolder, folder).toLowerCase()), [folder, folders, wsFolder]);
+
+  return (
+    <div className={`text-sm flex items-center ${isAdded ? "text-teal-800" : "text-vulcan-300 dark:text-whisper-800" }`}>
+      <button onClick={() => addFolder(folder)} className='mr-2 hover:text-teal-500' title={`Add as a content folder to Front Matter`}>
+        { isAdded ? <CheckCircleIconSolid className={`h-4 w-4`} /> : <CheckCircleIcon className={`h-4 w-4`} /> }
+      </button>
+      <span>{folder}</span>
+    </div>
+  )
+}
+
 export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps> = ({settings}: React.PropsWithChildren<IStepsToGetStartedProps>) => {
   const [framework, setFramework] = useState<string | null>(null);
 
@@ -23,7 +39,21 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
   const setFrameworkAndSendMessage = (framework: string) => {
     setFramework(framework);
     Messenger.send(DashboardMessage.setFramework, framework);
-  }
+  };
+
+  const addFolder = (folder: string) => {
+    Messenger.send(DashboardMessage.addFolder, folder);
+  };
+
+  const reload = () => {
+    const crntState: any = Messenger.getState() || {};
+    Messenger.setState({
+      ...crntState,
+      isWelcomeConfiguring: false
+    });
+
+    Messenger.send(DashboardMessage.reload);
+  };
 
   const steps = [
     { 
@@ -76,15 +106,41 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
       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.</>,
-      status: settings.folders && settings.folders.length > 0 ? Status.Completed : Status.NotStarted
+      name: 'Register content folder(s)',
+      description: (
+        <>          
+          <p>Add one of the folders we found in your project as a content folder. Once a folder is set, Front Matter can be used to list all contents and allow you to create content.</p>
+
+          {
+            settings?.dashboardState?.welcome?.contentFolders?.length > 0 && (
+              <div className="mt-4">
+                <div className="text-sm">
+                  Folders containing content:
+                </div>
+                <div className="mt-1 space-y-1">
+                  {settings?.dashboardState?.welcome?.contentFolders?.map((folder) => (
+                    <Folder 
+                      key={folder}
+                      folder={folder}
+                      addFolder={addFolder}
+                      wsFolder={settings.wsFolder}
+                      folders={settings.contentFolders} />
+                  ))}
+                </div>
+              </div>
+            )
+          }
+
+          <p className='mt-4 text-vulcan-300 dark:text-gray-400'><b>IMPORTANT</b>: You can perform this action by <b>right-clicking on the folder in the explorer view</b>, and selecting <b>register folder</b>.</p>
+        </>
+      ),
+      status: settings.contentFolders && settings.contentFolders.length > 0 ? Status.Completed : Status.NotStarted
     },
     {
       name: 'Show 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
+      description: <>Once all actions are completed, the dashboard can be loaded.</>,
+      status: (settings.initialized && settings.contentFolders && settings.contentFolders.length > 0) ? Status.Active : Status.NotStarted,
+      onClick: (settings.initialized && settings.contentFolders && settings.contentFolders.length > 0) ? reload : undefined
     }
   ];
   

src/dashboardWebView/components/WelcomeScreen.tsx

@@ -15,18 +15,23 @@ export interface IWelcomeScreenProps {
 export const WelcomeScreen: React.FunctionComponent<IWelcomeScreenProps> = ({settings}: React.PropsWithChildren<IWelcomeScreenProps>) => {
 
   React.useEffect(() => {
-
     Messenger.send(DashboardMessage.sendTelemetry, {
       event: TelemetryEvent.webviewWelcomeScreen
     });
 
+    const crntState: any = Messenger.getState() || {};
+    Messenger.setState({
+      ...crntState,
+      isWelcomeConfiguring: true
+    });
+
     return () => {
       Messenger.send(DashboardMessage.reload)
     };
   }, []);
   
   return (
-    <div className={`h-full overflow-auto py-24`}>
+    <div className={`h-full overflow-auto py-8`}>
       <main>
         <div className="mx-auto max-w-7xl">
           <div className="grid grid-cols-12 gap-8">
@@ -82,7 +87,7 @@ export const WelcomeScreen: React.FunctionComponent<IWelcomeScreenProps> = ({set
               <StepsToGetStarted settings={settings} />
 
               <p className="mt-5 text-sm text-vulcan-300 dark:text-whisper-700">
-                Once you completed both actions, the dashboard will show its full potential. You can also use the extension from the <b>Front Matter</b> side panel. There you will find the actions you can perform specifically for your pages.
+                You can also use the extension from the <b>Front Matter</b> side panel. There you will find the actions you can perform specifically for your pages.
               </p>
             </div>
           </div>

src/dashboardWebView/hooks/useMessages.tsx

@@ -3,42 +3,53 @@ import { useRecoilState } from 'recoil';
 import { DashboardCommand } from '../DashboardCommand';
 import { DashboardMessage } from '../DashboardMessage';
 import { Page } from '../models/Page';
-import { DashboardViewAtom, LoadingAtom, SettingsAtom, ViewDataAtom } from '../state';
+import { DashboardViewAtom, LoadingAtom, SettingsAtom, ViewDataAtom, SearchReadyAtom, ModeAtom } from '../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
 import { NavigationType } from '../models';
+import { GeneralCommands } from '../../constants';
 
 export default function useMessages() {
   const [loading, setLoading] = useRecoilState(LoadingAtom);
   const [pages, setPages] = useState<Page[]>([]);
   const [settings, setSettings] = useRecoilState(SettingsAtom);
   const [viewData, setViewData] = useRecoilState(ViewDataAtom);
+  const [, setMode] = useRecoilState(ModeAtom);
   const [, setView] = useRecoilState(DashboardViewAtom);
+  const [, setSearchReady] = useRecoilState(SearchReadyAtom);
 
-  Messenger.listen((message: MessageEvent<EventData<any>>) => {
-    switch (message.data.command) {
+  Messenger.listen((event: MessageEvent<EventData<any>>) => {
+    const message = event.data;
+
+    switch (message.command) {
       case DashboardCommand.loading:
-        setLoading(message.data.data);
+        setLoading(message.data);
         break;
       case DashboardCommand.viewData:
-        setViewData(message.data.data);
-        if (message.data.data?.type === NavigationType.Media) {
+        setViewData(message.data);
+        if (message.data?.type === NavigationType.Media) {
           setView(NavigationType.Media);
-        } else if (message.data.data?.type === NavigationType.Contents) {
+        } else if (message.data?.type === NavigationType.Contents) {
           setView(NavigationType.Contents);
-        } else if (message.data.data?.type === NavigationType.Data) {
+        } else if (message.data?.type === NavigationType.Data) {
           setView(NavigationType.Data);
-        } else if (message.data.data?.type === NavigationType.Snippets) {
+        } else if (message.data?.type === NavigationType.Snippets) {
           setView(NavigationType.Snippets);
         }
         break;
       case DashboardCommand.settings:
-        setSettings(message.data.data);
+        setSettings(message.data);
         break;
       case DashboardCommand.pages:
-        setPages(message.data.data);
+        setPages(message.data);
         setLoading(false);
         break;
+      case DashboardCommand.searchReady:
+        setSearchReady(true);
+        break;
+      case GeneralCommands.toWebview.setMode:
+        setMode(message.data);
+        break;
     }
   });
 
@@ -47,6 +58,7 @@ export default function useMessages() {
     Messenger.send(DashboardMessage.getViewType);
     Messenger.send(DashboardMessage.getTheme);
     Messenger.send(DashboardMessage.getData);
+    Messenger.send(DashboardMessage.getMode);
   }, ['']);
 
   return {

src/dashboardWebView/hooks/usePages.tsx

@@ -1,26 +1,21 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { SortOption } from '../constants/SortOption';
 import { Tab } from '../constants/Tab';
 import { Page } from '../models/Page';
 import Fuse from 'fuse.js';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { CategorySelector, FolderSelector, SearchSelector, SettingsSelector, SortingAtom, TabSelector, TagSelector } from '../state';
+import { CategorySelector, FolderSelector, SearchSelector, SettingsSelector, SortingAtom, TabInfoAtom, TabSelector, TagSelector } from '../state';
 import { SortOrder, SortType } from '../../models';
 import { Sorting } from '../../helpers/Sorting';
-
-const fuseOptions: Fuse.IFuseOptions<Page> = {
-  keys: [
-    { name: 'title', weight: 0.8 },
-    { name: 'slug', weight: 0.8 },
-    { name: 'description', weight: 0.5 }
-  ],
-  includeScore: true,
-  threshold: 0.1
-};
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../DashboardMessage';
+import { EventData } from '@estruyf/vscode/dist/models';
+import { parseWinPath } from '../../helpers/parseWinPath';
 
 export default function usePages(pages: Page[]) {
   const [ pageItems, setPageItems ] = useState<Page[]>([]);
   const [ sorting, setSorting ] = useRecoilState(SortingAtom);
+  const [ tabInfo , setTabInfo ] = useRecoilState(TabInfoAtom);
   const settings = useRecoilValue(SettingsSelector);
   const tab = useRecoilValue(TabSelector);
   const folder = useRecoilValue(FolderSelector);
@@ -28,46 +23,68 @@ export default function usePages(pages: Page[]) {
   const tag = useRecoilValue(TagSelector);
   const category = useRecoilValue(CategorySelector);
 
-  useEffect(() => {
+  const processPages = useCallback((searchedPages: Page[]) => {
     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) {
-      const fuse = new Fuse(pages, fuseOptions);
-      const results = fuse.search(search);
-      searchedPages = results.map(page => page.item);
-    }
+    const framework = settings?.crntFramework;
 
     // Filter the pages
     let pagesToShow: Page[] = Object.assign([], searchedPages);
 
+    // Framework specific actions
+    if (framework?.toLowerCase() === "jekyll") {
+      pagesToShow = pagesToShow.map(page => {
+        // https://jekyllrb.com/docs/posts/#drafts
+        const filePath = parseWinPath(page.fmFilePath);
+        page.draft = filePath.indexOf(`/_drafts/`) > -1;
+
+        // Published field: https://jekyllrb.com/docs/front-matter/#predefined-global-variables
+        if (typeof page.published !== "undefined") {
+          page.draft = !page.published;
+        }
+
+        return page;
+      });
+    }
+
+    const draftTypes = Object.assign({}, tabInfo);
+    draftTypes[Tab.All] = pagesToShow.length;
+
+    // Filter by draft status
     if (draftField && draftField.type === 'choice') {
+      const draftChoices = settings?.draftField?.choices;
+      for (const choice of (draftChoices || [])) {
+        if (choice) {
+          draftTypes[choice] = pagesToShow.filter(page => page.fmDraft === choice).length;
+        }
+      }
+
       if (tab !== Tab.All) {
         pagesToShow = pagesToShow.filter(page => page.fmDraft === tab);
       } else {
         pagesToShow = searchedPages;
       }
     } else {
+      // Draft field is a boolean field
       const draftFieldName = draftField?.name || "draft";
+
+      const drafts = pagesToShow.filter(page => page[draftFieldName] == true || page[draftFieldName] === "true");
+      const published = pagesToShow.filter(page => page[draftFieldName] == false || page[draftFieldName] === "false" || typeof page[draftFieldName] === "undefined");
+      
+      draftTypes[Tab.Draft] = draftField?.invert ? published.length : drafts.length;
+      draftTypes[Tab.Published] = draftField?.invert ? drafts.length : published.length;
+
       if (tab === Tab.Published) {
-        pagesToShow = searchedPages.filter(page => !page[draftFieldName]);
+        pagesToShow = draftField?.invert ? drafts : published;
       } else if (tab === Tab.Draft) {
-        pagesToShow = searchedPages.filter(page => !!page[draftFieldName]);
+        pagesToShow = draftField?.invert ? published : drafts;
       } else {
         pagesToShow = searchedPages;
       }
     }
 
+    // Set the tab information
+    setTabInfo(draftTypes);
+
     // Sort the pages
     let pagesSorted: Page[] = Object.assign([], pagesToShow);
     if (!search) {
@@ -115,7 +132,48 @@ export default function usePages(pages: Page[]) {
     }
 
     setPageItems(pagesSorted);
-  }, [ settings?.draftField, pages, tab, sorting, folder, search, tag, category ]);
+  }, [ settings, tab, folder, search, tag, category, sorting, tabInfo ]);
+
+
+  const searchListener = (message: MessageEvent<EventData<any>>) => {
+    switch (message.data.command) {
+      case DashboardMessage.searchPages:
+        processPages(message.data.data);
+        break;
+    }
+  };
+
+  useEffect(() => {
+    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) {
+      // const fuse = new Fuse(pages, fuseOptions);
+      // const results = fuse.search(search);
+      // searchedPages = results.map(page => page.item);
+      
+      Messenger.send(DashboardMessage.searchPages, { query: search });
+    } else {
+      processPages(searchedPages);
+    }
+  }, [ settings?.draftField, pages, sorting, search, tab ]);
+
+  useEffect(() => {
+    Messenger.listen(searchListener);
+
+    return () => {
+      Messenger.unlisten(searchListener);
+    }
+  }, []);
 
   return {
     pageItems

src/dashboardWebView/index.tsx

@@ -6,6 +6,7 @@ import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import { SENTRY_LINK } from "../constants";
 import './styles.css';
+import { Preview } from "./components/Preview";
 
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;
@@ -19,6 +20,8 @@ if (elm) {
   const version = elm?.getAttribute("data-version");
   const environment = elm?.getAttribute("data-environment");
   const isProd = elm?.getAttribute("data-isProd");
+  const type = elm?.getAttribute("data-type");
+  const url = elm?.getAttribute("data-url");
 
   if (isProd === "true") {
     Sentry.init({
@@ -31,7 +34,11 @@ if (elm) {
     });
   }
   
-  render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);
+  if (type === "preview") {
+    render(<Preview url={url} />, elm);
+  } else {
+    render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);
+  }
 }
 
 // Webpack HMR

src/dashboardWebView/models/Page.ts

@@ -15,7 +15,7 @@ export interface Page {
   title: string;
   slug: string;
   date: string | Date;
-  draft: string;
+  draft: boolean | string;
   description: string;
 
   preview?: string;

src/dashboardWebView/models/Settings.ts

@@ -10,14 +10,12 @@ export interface Settings {
   beta: boolean;
   initialized: boolean;
   wsFolder: string; 
-  staticFolder: string; 
-  folders: ContentFolder[]; 
+  staticFolder: string;
   tags: string[];
   categories: string[];
   openOnStart: boolean | null;
   versionInfo: VersionInfo;
   pageViewType: DashboardViewType | undefined;
-  mediaSnippet: string[];
   contentTypes: ContentType[];
   contentFolders: ContentFolder[];
   crntFramework: string;
@@ -34,15 +32,22 @@ export interface Settings {
 }
 
 export interface DashboardState {
-  contents: ViewState;
+  contents: ContentsViewState;
   media: MediaViewState;
+  welcome: WelcomeViewState;
 }
 
-export interface ViewState {
+export interface ContentsViewState {
   sorting: SortingOption | null | undefined;
   defaultSorting: string | null | undefined;
+  tags: string | null | undefined;
 }
 
-export interface MediaViewState extends ViewState {
+export interface MediaViewState extends ContentsViewState {
   selectedFolder: string | null | undefined;
+  mimeTypes: string[] | null | undefined;
+}
+
+export interface WelcomeViewState {
+  contentFolders: string[];
 }

src/dashboardWebView/state/atom/ModeAtom.ts

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { Mode } from '../../../models';
+
+export const ModeAtom = atom<Mode | undefined>({
+  key: 'ModeAtom',
+  default: undefined
+});

src/dashboardWebView/state/atom/SearchReadyAtom.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const SearchReadyAtom = atom<boolean>({
+  key: 'SearchReadyAtom',
+  default: false
+});

src/dashboardWebView/state/atom/TabInfoAtom.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const TabInfoAtom = atom<{ [tab: string]: number } | null>({
+  key: 'TabInfoAtom',
+  default: {}
+});

src/dashboardWebView/state/atom/index.ts

@@ -6,12 +6,15 @@ export * from './LightboxAtom';
 export * from './LoadingAtom';
 export * from './MediaFoldersAtom';
 export * from './MediaTotalAtom';
+export * from './ModeAtom';
 export * from './PageAtom';
 export * from './SearchAtom';
+export * from './SearchReadyAtom';
 export * from './SelectedMediaFolderAtom';
 export * from './SettingsAtom';
 export * from './SortingAtom';
 export * from './TabAtom';
+export * from './TabInfoAtom';
 export * from './TagAtom';
 export * from './ViewAtom';
 export * from './ViewDataAtom';

src/explorerView/ExplorerView.ts

@@ -7,6 +7,7 @@ import { TagType } from '../panelWebView/TagType';
 import { WebviewHelper } from '@estruyf/vscode';
 import { Extension } from '../helpers/Extension';
 import { Telemetry } from '../helpers/Telemetry';
+import { ModeListener } from '../listeners/general';
 
 export class ExplorerView implements WebviewViewProvider, Disposable {
   public static readonly viewType = "frontMatter.explorer";
@@ -80,6 +81,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
       ScriptListener.process(msg);
       SettingsListener.process(msg);
       TaxonomyListener.process(msg);
+      ModeListener.process(msg);
     });
 
     webviewView.onDidChangeVisibility(() => {

src/extension.ts

@@ -23,6 +23,7 @@ import { PagesListener } from './listeners/dashboard';
 import { Backers } from './commands/Backers';
 import { DataListener, SettingsListener } from './listeners/panel';
 import { NavigationType } from './dashboardWebView/models';
+import { ModeSwitch } from './services/ModeSwitch';
 
 let frontMatterStatusBar: vscode.StatusBarItem;
 let statusDebouncer: { (fnc: any, time: number): void; };
@@ -135,6 +136,10 @@ export async function activate(context: vscode.ExtensionContext) {
 	}); 
 
 	let createTemplate = vscode.commands.registerCommand(COMMAND_NAME.createTemplate, Template.generate);
+	
+	subscriptions.push(
+		vscode.commands.registerCommand(COMMAND_NAME.initTemplate, () => Project.createSampleTemplate(true))
+	);
 
 	const toggleDraftCommand = COMMAND_NAME.toggleDraft;
 	const toggleDraft = vscode.commands.registerCommand(toggleDraftCommand, async () => {
@@ -153,6 +158,18 @@ export async function activate(context: vscode.ExtensionContext) {
 	const createByTemplate = vscode.commands.registerCommand(COMMAND_NAME.createByTemplate, Folders.create);
 	const createContent = vscode.commands.registerCommand(COMMAND_NAME.createContent, Content.create);
 
+	subscriptions.push(
+		vscode.commands.registerCommand(COMMAND_NAME.generateContentType, ContentType.generate)
+	);
+
+	subscriptions.push(
+		vscode.commands.registerCommand(COMMAND_NAME.addMissingFields, ContentType.addMissingFields)
+	);
+
+	subscriptions.push(
+		vscode.commands.registerCommand(COMMAND_NAME.setContentType, ContentType.setContentType)
+	);
+
 	// Initialize command
 	Template.init();
 	const projectInit = vscode.commands.registerCommand(COMMAND_NAME.init, async (cb: Function) => {
@@ -179,6 +196,7 @@ export async function activate(context: vscode.ExtensionContext) {
 		SettingsListener.getSettings();
 		DataListener.getFoldersAndFiles();	
 		MarkdownFoldingProvider.triggerHighlighting();
+		ModeSwitch.register();
 	});
 
 	// Create the status bar
@@ -191,7 +209,14 @@ export async function activate(context: vscode.ExtensionContext) {
 	subscriptions.push(vscode.window.onDidChangeActiveTextEditor(() => triggerShowDraftStatus(`onDidChangeActiveTextEditor`)));
 	subscriptions.push(vscode.window.onDidChangeTextEditorSelection((e) => {
 		if (e.kind === vscode.TextEditorSelectionChangeKind.Mouse) {
-			triggerShowDraftStatus(`onDidChangeTextEditorSelection`);
+			statusDebouncer(() => triggerShowDraftStatus(`onDidChangeTextEditorSelection`), 200);
+		}
+	}));
+	subscriptions.push(vscode.workspace.onDidChangeTextDocument((TextDocumentChangeEvent) => {
+		const filePath = TextDocumentChangeEvent.document.uri.fsPath;
+		if (filePath && !filePath.toLowerCase().startsWith(`extension-output`)) {
+			MarkdownFoldingProvider.triggerHighlighting();
+			statusDebouncer(() => triggerShowDraftStatus(`onDidChangeTextEditorSelection`), 200);
 		}
 	}));
 	
@@ -209,7 +234,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.preview, () => Preview.open(extensionPath) ));
 
 	// Inserting an image in Markdown
-	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.insertImage, Article.insertImage));
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.insertMedia, Article.insertMedia));
 
 	// Inserting a snippet in Markdown
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.insertSnippet, Article.insertSnippet));
@@ -220,6 +245,9 @@ export async function activate(context: vscode.ExtensionContext) {
 	// What you see, is what you get
 	Wysiwyg.registerCommands(subscriptions);
 	
+	// Mode switching
+	ModeSwitch.register();
+
 	// Diagnostics
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.diagnostics, Diagnostics.show));
 

src/helpers/ArticleHelper.ts

@@ -1,3 +1,4 @@
+import { Uri, workspace } from 'vscode';
 import { MarkdownFoldingProvider } from './../providers/MarkdownFoldingProvider';
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/ContentType';
 import * as vscode from 'vscode';
@@ -44,6 +45,23 @@ export class ArticleHelper {
     return ArticleHelper.parseFile(fileContents, document.fileName);
   }
 
+  /**
+   * Get the current article
+   */
+   public static getCurrent(): ParsedFrontMatter | undefined {
+    const editor = vscode.window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+    if (!article) {
+      return;
+    }
+
+    return article;
+  }
+
   /**
    * Retrieve the file's front matter by its path
    * @param filePath 
@@ -65,6 +83,23 @@ export class ArticleHelper {
     await editor.edit(builder => builder.replace(update.range, update.newText));
   }
 
+  /**
+   * Store the new information for the article path
+   * 
+   * @param path 
+   * @param article 
+   */
+  public static async updateByPath(path: string, article: ParsedFrontMatter) {
+    const file = await workspace.openTextDocument(Uri.parse(path));
+    const editor = await window.showTextDocument(file);
+
+    if (file && editor) {
+      const update = this.generateUpdate(file, article);
+      
+      await editor.edit(builder => builder.replace(update.range, update.newText));
+    }
+  }
+
   /**
    * Generate the update to be applied to the article.
    * @param article 
@@ -80,7 +115,7 @@ export class ArticleHelper {
     const lastLine = lines.pop();
     const endsWithNewLine = lastLine !== undefined && lastLine.trim() === "";
     
-    let newMarkdown = this.stringifyFrontMatter(article.content, Object.assign({}, article.data));
+    let newMarkdown = this.stringifyFrontMatter(article.content, Object.assign({}, article.data), document?.getText());
 
     // Logic to not include a new line at the end of the file
     if (!endsWithNewLine) {
@@ -115,8 +150,9 @@ export class ArticleHelper {
    * 
    * @param content 
    * @param data 
+   * @param originalContent 
    */
-  public static stringifyFrontMatter(content: string, data: any) {
+  public static stringifyFrontMatter(content: string, data: any, originalContent?: string) {
     const indentArray = Settings.get(SETTING_INDENT_ARRAY) as boolean;
     const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
 
@@ -130,7 +166,7 @@ export class ArticleHelper {
       }
     }
     
-    return FrontMatterParser.toFile(content, data, ({
+    return FrontMatterParser.toFile(content, data, originalContent, ({
       noArrayIndent: !indentArray,
       skipInvalid: true,
       noCompatMode: true,
@@ -289,6 +325,8 @@ export class ArticleHelper {
    * @returns The new file path
    */
   public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string, fileExtension?: string): string | undefined {
+    FrontMatterParser.currentContent = null;
+    
     const prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
     const fileType = Settings.get<string>(SETTING_CONTENT_DEFAULT_FILETYPE);
     

src/helpers/ContentType.ts

@@ -1,16 +1,17 @@
+import { ModeListener } from './../listeners/general/ModeListener';
 import { PagesListener } from './../listeners/dashboard';
 import { ArticleHelper, Settings } from ".";
-import { SETTING_CONTENT_DRAFT_FIELD, SETTING_DATE_FORMAT, SETTING_TAXONOMY_CONTENT_TYPES, TelemetryEvent } from "../constants";
+import { FEATURE_FLAG, SETTING_CONTENT_DRAFT_FIELD, SETTING_DATE_FORMAT, SETTING_FRAMEWORK_ID, SETTING_TAXONOMY_CONTENT_TYPES, TelemetryEvent } from "../constants";
 import { ContentType as IContentType, DraftField, Field } from '../models';
-import { Uri, commands } from 'vscode'; 
+import { Uri, commands, window } from 'vscode'; 
 import { Folders } from "../commands/Folders";
 import { Questions } from "./Questions";
-import { writeFileSync } from "fs";
+import { existsSync, writeFileSync } from "fs";
 import { Notifications } from "./Notifications";
 import { DEFAULT_CONTENT_TYPE_NAME } from "../constants/ContentType";
 import { Telemetry } from './Telemetry';
 import { processKnownPlaceholders } from './PlaceholderHelper';
-
+import { basename } from 'path';
 
 export class ContentType {
 
@@ -93,6 +94,262 @@ export class ContentType {
     return Settings.get<IContentType[]>(SETTING_TAXONOMY_CONTENT_TYPES);
   }
 
+  /**
+   * Generate a content type
+   */
+  public static async generate() {
+    if (!(await ContentType.verify())) {
+      return;
+    }
+
+    Telemetry.send(TelemetryEvent.generateContentType);
+
+    const content = ArticleHelper.getCurrent();
+
+    const editor = window.activeTextEditor;
+    const filePath = editor?.document.uri.fsPath;
+
+    if (!content || !content.data) {
+      Notifications.warning(`No front matter data found to generate a content type.`);
+      return;
+    }
+
+    const override = await window.showQuickPick(["Yes", "No"], {
+      placeHolder: "Do you want to override the default content type?",
+      ignoreFocusOut: true,
+      title: "Override default content type"
+    });
+    const overrideBool = override === "Yes";
+
+    let contentTypeName: string | undefined = `default`;
+
+    // Ask for the new content type name
+    if (!overrideBool) {
+      contentTypeName = await window.showInputBox({
+        ignoreFocusOut: true,
+        placeHolder: "Enter the name of the content type to generate",
+        prompt: "Enter the name of the content type to generate",
+        title: "Generate Content Type",
+        validateInput: (value: string) => {
+          if (!value) {
+            return "Please enter a name for the content type";
+          }
+  
+          const contentTypes = ContentType.getAll();
+          if (contentTypes && contentTypes.find(ct => ct.name.toLowerCase() === value.toLowerCase())) {
+            return "A content type with this name already exists";
+          }
+  
+          return null;
+        }
+      });
+  
+      if (!contentTypeName) {
+        Notifications.warning(`You didn't specify a name for the content type.`);
+        return;
+      }
+    }
+
+    // Ask if the content type needs to be used as a page bundle
+    let pageBundle = false;
+    const fileName = filePath ? basename(filePath) : undefined;
+    if (fileName?.startsWith(`index.`)) {
+      const pageBundleAnswer = await window.showQuickPick(["Yes", "No"], {
+        placeHolder: "Do you want to use this content type as a page bundle?",
+        ignoreFocusOut: true,
+        title: "Use as page bundle"
+      });
+      pageBundle = pageBundleAnswer === "Yes";
+    }
+
+    const fields = ContentType.generateFields(content.data);
+    if (!overrideBool && !fields.some(f => f.name === "type")) {
+      fields.push({
+        name: "type",
+        type: "string",
+        default: contentTypeName,
+        hidden: true
+      } as Field);
+    }
+
+    // Update the type field in the page
+    if (!overrideBool && editor) {
+      content.data["type"] = contentTypeName;
+      ArticleHelper.update(editor, content);
+    }
+    
+    const newContentType: IContentType = {
+      name: contentTypeName,
+      pageBundle,
+      fields
+    };
+
+    const contentTypes = ContentType.getAll() || [];
+    
+    if (overrideBool) {
+      const index = contentTypes.findIndex(ct => ct.name === contentTypeName);
+      contentTypes[index].fields = fields;
+    } else {
+      contentTypes.push(newContentType);
+    }
+
+    Settings.update(SETTING_TAXONOMY_CONTENT_TYPES, contentTypes, true);
+
+    const configPath = Settings.projectConfigPath;
+    const notificationAction = await Notifications.info(`Content type ${contentTypeName} has been ${overrideBool ? `updated` : `generated`}.`, configPath && existsSync(configPath) ?  `Open settings` : undefined);
+
+    if (notificationAction === "Open settings" && configPath && existsSync(configPath)) {
+      commands.executeCommand('vscode.open', Uri.file(configPath));
+    }
+  }
+
+  /**
+   * Add missing fields to the content type
+   */
+  public static async addMissingFields() {
+    if (!(await ContentType.verify())) {
+      return;
+    }
+
+    Telemetry.send(TelemetryEvent.addMissingFields);
+
+    const content = ArticleHelper.getCurrent();
+
+    if (!content || !content.data) {
+      Notifications.warning(`No front matter data found to add missing fields.`);
+      return;
+    }
+
+    const contentType = ArticleHelper.getContentType(content?.data);
+    const updatedFields = ContentType.generateFields(content.data, contentType.fields);
+
+    const contentTypes = ContentType.getAll() || [];
+    const index = contentTypes.findIndex(ct => ct.name === contentType.name);
+    contentTypes[index].fields = updatedFields;
+
+    Settings.update(SETTING_TAXONOMY_CONTENT_TYPES, contentTypes, true);
+
+    const configPath = Settings.projectConfigPath;
+    const notificationAction = await Notifications.info(`Content type ${contentType.name} has been updated.`, configPath && existsSync(configPath) ?  `Open settings` : undefined);
+
+    if (notificationAction === "Open settings" && configPath && existsSync(configPath)) {
+      commands.executeCommand('vscode.open', Uri.file(configPath));
+    }
+  }
+
+  /**
+   * Set the content type to be used for the current file
+   */
+  public static async setContentType() {
+    if (!(await ContentType.verify())) {
+      return;
+    }
+
+    Telemetry.send(TelemetryEvent.setContentType);
+
+    const content = ArticleHelper.getCurrent();
+    const contentTypes = ContentType.getAll() || [];
+
+    if (!content || !content.data) {
+      Notifications.warning(`No front matter data found to set the content type.`);
+      return;
+    }
+    
+    const ctAnswer = await window.showQuickPick(contentTypes.map(ct => ct.name), {
+      title: "Select the content type",
+      ignoreFocusOut: true,
+      placeHolder: "Which content type would you like to use?"
+    });
+
+    if (!ctAnswer) {
+      return;
+    }
+    
+    content.data.type = ctAnswer;
+
+    const editor = window.activeTextEditor;
+    ArticleHelper.update(editor!, content);
+  }
+
+  /**
+   * Generate the fields from the data
+   * @param data 
+   * @param fields 
+   * @returns 
+   */
+  private static generateFields(data: any, fields: any[] = []) {
+    for (const field in data) {
+      const fieldData = data[field];
+
+      if (fields.some(f => f.name === field)) {
+        continue;
+      }
+
+      if (fieldData && fieldData instanceof Array && fieldData.length > 0 && typeof fieldData[0] === "string") {
+        if (field.toLowerCase() === "tag" || field.toLowerCase() === "tags") {
+          fields.push({
+            title: field,
+            name: field,
+            type: "tags",
+          } as Field);
+        } else if (field.toLowerCase() === "category" || field.toLowerCase() === "categories") {
+          fields.push({
+            title: field,
+            name: field,
+            type: "categories",
+          } as Field);
+        } else {
+          fields.push({
+            title: field,
+            name: field,
+            type: "choice",
+            choices: fieldData
+          } as Field);
+        }
+      } else if (fieldData && fieldData instanceof Array && fieldData.length > 0 && typeof fieldData[0] === "object") {
+        const newFields = ContentType.generateFields(fieldData);
+        fields.push({
+          title: field,
+          name: field,
+          type: "block",
+          fields: newFields
+        } as Field);
+      } else if (fieldData && fieldData instanceof Object) {
+        const newFields = ContentType.generateFields(fieldData);
+        fields.push({
+          title: field,
+          name: field,
+          type: "fields",
+          fields: newFields
+        } as Field);
+      } else {
+        if (!isNaN(new Date(fieldData).getDate())) {
+          fields.push({
+            title: field,
+            name: field,
+            type: "datetime"
+          } as Field);
+        } else if (field.toLowerCase() === "draft") {
+          fields.push({
+            title: field,
+            name: field,
+            type: "draft"
+          } as Field);
+        } else if (field.toLowerCase() === "slug") {
+          // Do nothing
+        } else {
+          fields.push({
+            title: field,
+            name: field,
+            type: typeof fieldData
+          } as Field);
+        }
+      }
+    }
+
+    return fields;
+  }
+
   /**
    * Create a new file with the specified content type
    * @param contentType 
@@ -100,7 +357,6 @@ export class ContentType {
    * @returns 
    */
   private static async create(contentType: IContentType, folderPath: string) {
-
     const titleValue = await Questions.ContentTitle();
     if (!titleValue) {
       return;
@@ -111,6 +367,16 @@ export class ContentType {
       return;
     }
 
+    if (contentType.name === "default") {
+      const crntFramework = Settings.get<string>(SETTING_FRAMEWORK_ID);
+      if (crntFramework?.toLowerCase() === "jekyll") {
+        const idx = contentType.fields.findIndex(f => f.name === "draft");
+        if (idx > -1) {
+          contentType.fields.splice(idx, 1);
+        }
+      }
+    }
+
     let data: any = this.processFields(contentType, titleValue, {});
 
     data = ArticleHelper.updateDates(Object.assign({}, data));
@@ -154,8 +420,14 @@ export class ContentType {
           if (field.type === "fields") {
             data[field.name] = this.processFields(field, titleValue, {});
           } else {
-            data[field.name] = field.default ? processKnownPlaceholders(field.default, titleValue, dateFormat) : "";
-            data[field.name] = field.default ? ArticleHelper.processCustomPlaceholders(data[field.name], titleValue) : "";
+            const defaultValue = field.default;
+
+            if (typeof defaultValue === "string") {
+              data[field.name] = processKnownPlaceholders(defaultValue, titleValue, dateFormat);
+              data[field.name] = ArticleHelper.processCustomPlaceholders(data[field.name], titleValue);
+            } else {
+              data[field.name] = typeof defaultValue !== "undefined" ? defaultValue : "";
+            }
           }
         }
       }
@@ -163,4 +435,18 @@ export class ContentType {
 
     return data;
   }
+
+  /**
+   * Verify if the content type feature is enabled
+   * @returns 
+   */
+  private static async verify() {
+    const hasFeature = await ModeListener.hasFeature(FEATURE_FLAG.panel.contentType);
+    if (!hasFeature) {
+      Notifications.warning(`The content type actions are not available in this mode.`);
+      return false;
+    }
+
+    return true;
+  }
 }

src/helpers/CustomScript.ts

@@ -1,6 +1,7 @@
+import { CommandType } from './../models/PanelSettings';
 import { CustomScript as ICustomScript, ScriptType } from '../models/PanelSettings';
 import { window, env as vscodeEnv, ProgressLocation } from 'vscode';
-import { ArticleHelper, Telemetry } from '.';
+import { ArticleHelper, Logger, Telemetry } from '.';
 import { Folders } from '../commands/Folders';
 import { exec } from 'child_process';
 import * as os from 'os';
@@ -30,6 +31,9 @@ export class CustomScript {
         if (script.bulk) {
           // Run script on all files
           CustomScript.bulkRun(wsPath, script);
+        } else if (path) {
+          // Run script for provided path
+          CustomScript.singleRun(wsPath, script, path);
         } else {
           // Run script on current file.
           CustomScript.singleRun(wsPath, script);
@@ -38,21 +42,47 @@ export class CustomScript {
     }
   }
 
-  private static async singleRun(wsPath: string, script: ICustomScript): Promise<void> {
-    const editor = window.activeTextEditor;
-    if (!editor) return;
+  /**
+   * Run the script on the current file
+   * @param wsPath 
+   * @param script 
+   * @param path 
+   * @returns 
+   */
+  private static async singleRun(wsPath: string, script: ICustomScript, path: string | null = null): Promise<void> {
+    let articlePath: string | null = path;
+    let article: ParsedFrontMatter | null = null;
 
-    const article = ArticleHelper.getFrontMatter(editor);
+    if (!path) {
+      const editor = window.activeTextEditor;
+      if (!editor) return;
 
-    if (article) {
-      const output = await CustomScript.runScript(wsPath, article, editor.document.uri.fsPath, script);
-
-      CustomScript.showOutput(output, script);
+      articlePath = editor.document.uri.fsPath;
+      article = ArticleHelper.getFrontMatter(editor);
     } else {
-      Notifications.warning(`${script.title}: Current article couldn't be retrieved.`);
+      article = ArticleHelper.getFrontMatterByPath(path);
+    }
+
+    if (articlePath && article) {
+      window.withProgress({
+        location: ProgressLocation.Notification,
+        title: `Executing: ${script.title}`,
+        cancellable: false
+      }, async () => {
+        const output = await CustomScript.runScript(wsPath, article, articlePath as string, script);
+        CustomScript.showOutput(output, script, articlePath);
+      });
+    } else {
+      Notifications.warning(`${script.title}: Article couldn't be retrieved.`);
     }
   }
 
+  /**
+   * Run the script on multiple files
+   * @param wsPath 
+   * @param script 
+   * @returns 
+   */
   private static async bulkRun(wsPath: string, script: ICustomScript): Promise<void> {
     const folders = await Folders.getInfo();
 
@@ -90,6 +120,13 @@ export class CustomScript {
     });
   }
 
+  /**
+   * Run a script for a media file
+   * @param wsPath 
+   * @param path 
+   * @param script 
+   * @returns 
+   */
   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.`);
@@ -102,28 +139,34 @@ export class CustomScript {
         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);
+        try {
+          const output = await CustomScript.executeScript(script, wsPath, `"${wsPath}" "${path}"`);
+
+          CustomScript.showOutput(output, script);
   
           Dashboard.postWebviewMessage({ 
             command: DashboardCommand.mediaUpdate
           });
-  
-          resolve();
+
           return;
-        });
+        } catch (e) {
+          Notifications.error(`${script.title}: ${(e as Error).message}`);
+          return;
+        }
       });
     });
   }
 
+  /**
+   * Script runner
+   * @param wsPath 
+   * @param article 
+   * @param contentPath 
+   * @param script 
+   * @returns 
+   */
   private static async runScript(wsPath: string, article: ParsedFrontMatter | null, contentPath: string, script: ICustomScript): Promise<string | null> {
-    return new Promise((resolve, reject) => {
+    try {
       let articleData = "";
       if (os.type() === "Windows_NT") {
         articleData = `"${JSON.stringify(article?.data).replace(/"/g, `""`)}"`;
@@ -132,31 +175,97 @@ export class CustomScript {
         articleData = `'${articleData}'`;
       }
 
-      exec(`${script.nodeBin || "node"} ${join(wsPath, script.script)} "${wsPath}" "${contentPath}" ${articleData}`, (error, stdout) => {
+      const output = await CustomScript.executeScript(script, wsPath, `"${wsPath}" "${contentPath}" ${articleData}`);
+      return output;
+    } catch (e) {
+      Notifications.error(`${script.title}: ${(e as Error).message}`);
+      return null;
+    }
+  }
+
+  /**
+   * Show/process the output of the script
+   * @param output 
+   * @param script 
+   */
+  private static showOutput(output: string | null, script: ICustomScript, articlePath?: string | null): void {
+    if (output) {
+      try {
+        const data = JSON.parse(output);
+
+        if (data.frontmatter) {
+          let article = null;
+          const editor = window.activeTextEditor;
+
+          if (!articlePath) {
+            if (!editor) return;
+      
+            articlePath = editor.document.uri.fsPath;
+            article = ArticleHelper.getFrontMatter(editor);
+          } else {
+            article = ArticleHelper.getFrontMatterByPath(articlePath);
+          }
+
+          if (article && article.data) {
+            for (const key in data.frontmatter) {
+              article.data[key] = data.frontmatter[key];
+            }
+
+            if (articlePath) {
+              ArticleHelper.updateByPath(articlePath, article);
+            } else if (editor) {
+              ArticleHelper.update(editor, article);
+            } else {
+              throw new Error(`Couldn't update article.`);
+            }
+            Notifications.info(`${script.title}: front matter updated.`);
+          }
+        } else {
+          throw new Error(`No frontmatter found.`);
+        }
+      } catch (error) {
+        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.`);
+    }
+  }
+
+  /**
+   * Execute script
+   * @param script 
+   * @param wsPath 
+   * @param args 
+   * @returns 
+   */
+  private static async executeScript(script: ICustomScript, wsPath: string, args: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      
+      // Check the command to use
+      let command = script.nodeBin || "node";
+      if (script.command && script.command !== CommandType.Node) {
+        command = script.command;
+      }
+
+      const scriptPath = join(wsPath, script.script);
+      const fullScript = `${command} ${scriptPath} ${args}`;
+      Logger.info(`Executing: ${fullScript}`);
+
+      exec(fullScript, (error, stdout) => {
         if (error) {
-          Notifications.error(`${script.title}: ${error.message}`);
-          resolve(null);
-          return;
+          reject(error.message);
         }
 
         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.`);
-    }
-  }
 }