Merge pull request #477 from estruyf/dev

Thank you @albbus-stack!

.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/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Documentation
+    url: https://frontmatter.codes/docs
+    about: See our documentation.
+  - name: Changelog
+    url: https://frontmatter.codes/updates
+    about: See our changelog.
+  - name: Front Matter website
+    url: https://frontmatter.codes
+    about: Our website.
+  - name: Support Front Matter
+    url: https://github.com/sponsors/estruyf
+    about: Support Front Matter development.

.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/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+# PR Details
+
+<!--- Provide a general summary of your changes in the Title above -->
+
+## Description
+
+<!--- Describe your changes in detail -->
+
+## Related Issue
+
+<!--- This project only accepts pull requests related to open issues -->
+<!--- If suggesting a new feature or change, please discuss it in an issue first -->
+<!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->
+<!--- Please link to the issue here: -->
+
+## Motivation and Context
+
+<!--- Why is this change required? What problem does it solve? -->
+
+## How Has This Been Tested
+
+<!--- Please describe in detail how you tested your changes. -->
+<!--- Include details of your testing environment, and the tests you ran to -->
+<!--- see how your change affects other areas of the code, etc. -->
+
+## Types of changes
+
+<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+
+- [ ] Docs change / refactoring / dependency upgrade
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to change)

.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 }}"

.gitignore

@@ -4,4 +4,8 @@ node_modules
 *.vsix
 .DS_Store
 dist
-todo.md
+todo.md
+
+e2e/storage
+e2e/extensions
+e2e/sample

.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"
 	]
 }

.vscode/launch.json

@@ -29,20 +29,6 @@
 			"outFiles": [
 					"${workspaceFolder}/dist/**/*.js"
 			]
-		},
-		{
-			"name": "Extension Tests",
-			"type": "extensionHost",
-			"request": "launch",
-			"runtimeExecutable": "${execPath}",
-			"args": [
-					"--extensionDevelopmentPath=${workspaceFolder}",
-					"--extensionTestsPath=${workspaceFolder}/out/test"
-			],
-			"outFiles": [
-					"${workspaceFolder}/out/test/**/*.js"
-			],
-			"preLaunchTask": "npm: test-compile"
 		}
 	]
 }

.vscode/settings.json

@@ -10,8 +10,43 @@
     "typescript.tsc.autoDetect": "off",
     "eliostruyf.writingstyleguide.terms.isDisabled": true,
     "eliostruyf.writingstyleguide.biasFree.isDisabled": true,
-    "exportall.config.folderListener": [
-        "/src/pagesView/state/atom",
-        "/src/pagesView/state/selectors"
-    ]
+    "squarl.groups": [
+        {
+            "id": "dashboard",
+            "name": "Dashboard"
+        },
+        {
+            "id": "panel",
+            "name": "Panel"
+        }
+    ],
+    "squarl.bookmarks": [
+        {
+            "name": "App.tsx",
+            "path": "src/dashboardWebView/components/App.tsx",
+            "description": "Start of dashboard",
+            "type": "file",
+            "groupId": "dashboard"
+        },
+        {
+            "name": "ViewPanel.tsx",
+            "path": "src/panelWebView/ViewPanel.tsx",
+            "description": "Start of panel",
+            "type": "file",
+            "groupId": "panel"
+        },
+        {
+            "name": "styles.css",
+            "path": "src/panelWebView/styles.css",
+            "description": "Panel styles",
+            "type": "file",
+            "groupId": "panel"
+        },
+        {
+            "name": "settings.ts",
+            "path": "src/constants/settings.ts",
+            "description": "Settings names",
+            "type": "file"
+        }
+    ],
 }

.vscodeignore

@@ -26,4 +26,6 @@ dist/*.html
 frontmatter.json
 .frontmatter
 webpack
-README.beta.md
+README.beta.md
+e2e
+storage

CHANGELOG.md

@@ -1,5 +1,239 @@
 # Change Log
 
+## [8.2.0] - 2022-12-08 - [Release notes](https://beta.frontmatter.codes/updates/v8.2.0) 
+
+### ✨ New features
+
+- [#362](https://github.com/estruyf/vscode-front-matter/issues/362): Support for conditional metadata
+- [#412](https://github.com/estruyf/vscode-front-matter/issues/412): Allow `frontmatter.json` to be split in multiple files
+
+### 🎨 Enhancements
+
+- [#360](https://github.com/estruyf/vscode-front-matter/issues/360): Define which content types can be used on your page folders
+- [#406](https://github.com/estruyf/vscode-front-matter/issues/406): Added support for single data entries in the data dashboard
+- [#428](https://github.com/estruyf/vscode-front-matter/issues/428): Improved UX for inserting images to your content
+- [#430](https://github.com/estruyf/vscode-front-matter/issues/430): Support for HEXO its `post_asset_folder` setting (image location)
+- [#434](https://github.com/estruyf/vscode-front-matter/issues/434): Webview errors are logged in the extension output
+- [#440](https://github.com/estruyf/vscode-front-matter/issues/440): Type to search/filter in the snippets dashboard
+- [#447](https://github.com/estruyf/vscode-front-matter/issues/447): Allow to use placeholders on git commit messages
+- [#449](https://github.com/estruyf/vscode-front-matter/issues/449): Show `filename` if the `title` is not set
+- [#450](https://github.com/estruyf/vscode-front-matter/issues/450): Additional time placeholders added `{{hour12}}`, `{{hour24}}`, `{{ampm}}`, and `{{minute}}`
+- [#458](https://github.com/estruyf/vscode-front-matter/issues/458): Ability to configure the file prefix on folder level
+
+### ⚡️ Optimizations
+
+- [#431](https://github.com/estruyf/vscode-front-matter/issues/431): Performance improvements for the content dashboard
+- [#448](https://github.com/estruyf/vscode-front-matter/issues/448): Retrieving files fails when content folder name and workspace folder name are the same
+- [#455](https://github.com/estruyf/vscode-front-matter/issues/455): Show a description for the SEO section when title nor description is set
+
+### 🐞 Fixes
+
+- Fix field error message color
+- [#433](https://github.com/estruyf/vscode-front-matter/issues/433): Fix issue with rendering an incorrect title value on the content dashboard
+- [#462](https://github.com/estruyf/vscode-front-matter/issues/462): Fix issue in script error notification
+- [#465](https://github.com/estruyf/vscode-front-matter/issues/465): Deleted content does not get added in git when syncing
+- [#471](https://github.com/estruyf/vscode-front-matter/issues/471): Fix typo on data dashboard
+
+## [8.1.2] - 2022-10-06
+
+### 🐞 Fixes
+
+- [#435](https://github.com/estruyf/vscode-front-matter/issues/435): Fix required fields text color
+- [#436](https://github.com/estruyf/vscode-front-matter/issues/436): Fix inserting image/video snippets without defined fields
+
+## [8.1.1] - 2022-09-23
+
+### 🐞 Fixes
+
+- [#422](https://github.com/estruyf/vscode-front-matter/issues/422): Fix in panel initialization logic
+
+## [8.1.0] - 2022-09-22 - [Release notes](https://beta.frontmatter.codes/updates/v8.1.0) 
+
+### ✨ New features
+
+- [#369](https://github.com/estruyf/vscode-front-matter/issues/369): New `required` property to specify if a content-type field is required
+- [#376](https://github.com/estruyf/vscode-front-matter/issues/376): Ability to run scripts after content was created
+- [#377](https://github.com/estruyf/vscode-front-matter/issues/377): Git sync actions added on panel and content dashboard (pull and push your changes to remote)
+- [#379](https://github.com/estruyf/vscode-front-matter/issues/377): New `frontMatter.config.reload` command to reload the configuration file + reinitialize its listeners
+- [#391](https://github.com/estruyf/vscode-front-matter/issues/391): New `description` property to show a message underneath the input field
+- [#401](https://github.com/estruyf/vscode-front-matter/issues/401): Content dashboard now has pagination enabled and can be disabled via the `frontMatter.dashboard.content.pagination` setting
+
+### 🎨 Enhancements
+
+- [#352](https://github.com/estruyf/vscode-front-matter/issues/352): Custom placeholders now support scripting
+- [#370](https://github.com/estruyf/vscode-front-matter/issues/370): Define the tags and categories as reserved keywords for custom taxonomy
+- [#372](https://github.com/estruyf/vscode-front-matter/issues/372): Rename Taxonomy tab to Taxonomies
+- [#374](https://github.com/estruyf/vscode-front-matter/issues/374): Hide the front matter section to use the panel instead
+- [#383](https://github.com/estruyf/vscode-front-matter/issues/383): Add the item menu to the content list view
+- [#385](https://github.com/estruyf/vscode-front-matter/issues/385): If no default value for the draft field is defined, the field value will be set to `true`
+- [#388](https://github.com/estruyf/vscode-front-matter/issues/388): New stop server action has been added to the panel
+- [#390](https://github.com/estruyf/vscode-front-matter/issues/390): Implement another JSON parser in order to be able to parse the `frontmatter.json` file better
+- [#394](https://github.com/estruyf/vscode-front-matter/issues/394): Ordering of snippet fields is based on their field definition
+- [#395](https://github.com/estruyf/vscode-front-matter/issues/395): Added support for custom snippet fields on media snippets
+- [#402](https://github.com/estruyf/vscode-front-matter/issues/402): Custom sorting of content now supports `number` fields
+- [#417](https://github.com/estruyf/vscode-front-matter/issues/417): New `hyperlink` wysiwyg option
+- [#418](https://github.com/estruyf/vscode-front-matter/issues/418): New `heading` and `divider` fields for your content-type definition
+
+### ⚡️ Optimizations
+
+- Internal post message optimizations to the webviews
+- Preview tab now shows the title of the page/content if present
+
+### 🐞 Fixes
+
+- [#378](https://github.com/estruyf/vscode-front-matter/issues/378): Fix last modified update only to content in content folders
+- [#384](https://github.com/estruyf/vscode-front-matter/issues/384): Fix issue `title` field in sub-fields
+- [#393](https://github.com/estruyf/vscode-front-matter/issues/393): Fix Windows file path for retrieving the preview path
+- [#396](https://github.com/estruyf/vscode-front-matter/issues/396): Fix for `index` and `_index` page previews
+- [#398](https://github.com/estruyf/vscode-front-matter/issues/398): Fix Windows folder path parsing in data folder retrieval
+- [#400](https://github.com/estruyf/vscode-front-matter/issues/400): Fix for draft/published content grouping
+- [#403](https://github.com/estruyf/vscode-front-matter/issues/403): Fix for media files with spaces on importing in article content
+- [#404](https://github.com/estruyf/vscode-front-matter/issues/404): Fix for published sorting option in media dashboard
+- [#408](https://github.com/estruyf/vscode-front-matter/issues/408): Fix for missing `dashboard.taxonomy.view` view mode in the JSON schema
+
+## [8.0.1] - 2022-07-13
+
+### 🐞 Fixes
+
+- Fix `PSD` media card icon image
+- Fix missing clipboard icon for the media card action
+- Fix in tags rendering on content cards
+
+## [8.0.0] - 2022-07-11 - [Release notes](https://beta.frontmatter.codes/updates/v8.0.0) 
+
+### ✨ New Features
+
+- [#291](https://github.com/estruyf/vscode-front-matter/issues/291): New taxonomy dashboard for managing tags, categories, and custom taxonomies
+
+### 🎨 Enhancements
+
+- Ignore the SEO `keywords` field for missing content type field
+- [#307](https://github.com/estruyf/vscode-front-matter/issues/307): New `list` field which allows to create a list of items
+- [#345](https://github.com/estruyf/vscode-front-matter/issues/345): Media dashboard UI improvements to visualize the content and public folders
+- [#349](https://github.com/estruyf/vscode-front-matter/issues/349): New `slug` field which allows you to manage the slug of your post from the Front Matter panel
+- [#350](https://github.com/estruyf/vscode-front-matter/issues/350): New `previewPath` property for the `frontMatter.content.pageFolders` setting. This allows you to specify a section prefix for all content created in that directory.
+- [#351](https://github.com/estruyf/vscode-front-matter/issues/351): New `template` property for content types which allows you to combine templates and content types for content creation
+- [#353](https://github.com/estruyf/vscode-front-matter/issues/353): Add the default content type on project initialization
+- [#366](https://github.com/estruyf/vscode-front-matter/issues/366): Better support for using block fields in another block field
+
+### 🐞 Fixes
+
+- [#348](https://github.com/estruyf/vscode-front-matter/issues/348): Fix media dashboard breadcrumb when multiple page folders are in use
+- [#356](https://github.com/estruyf/vscode-front-matter/issues/356): Re-introduce the `labelField` to the `frontMatter.taxonomy.fieldGroups` setting
+- [#358](https://github.com/estruyf/vscode-front-matter/issues/358): Fix for relative path of the public folder
+- [#364](https://github.com/estruyf/vscode-front-matter/issues/364): Honour file ending rules in data files
+- [#365](https://github.com/estruyf/vscode-front-matter/issues/365): Show spinner on the initial load of the content dashboard
+
+## [7.3.4] - 2022-06-13
+
+### 🐞 Fixes
+
+- [#354](https://github.com/estruyf/vscode-front-matter/issues/354): Fix Windows file path parsing for inserting media files
+
+## [7.3.3] - 2022-06-11
+
+### 🐞 Fixes
+
+- Card render when taxonomy is not an array value
+- Double pages on contents dashboard
+
+## [7.3.2] - 2022-06-01
+
+### 🐞 Fixes
+
+- [#346](https://github.com/estruyf/vscode-front-matter/issues/346): Fix media dashboard refresh action
+
+
+## [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

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+elio@struyfconsulting.be.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -0,0 +1,59 @@
+# Contributing to Front Matter
+
+First of all, it is amazing you want to contribute to Front Matter 💚.
+
+There are various ways in how you can contribute to the project, it can be as simple from opening a bug report to implementing fixes or features.
+
+## How you can help us
+
+- Testing out the extension and providing feedback
+- Reporting issues and bugs
+- Suggesting new features
+- Fixing an issue
+- Updating documentation
+- UI improvements
+- Tutorials
+- etc.
+
+Eager to start contributing? Great 🤩, you can contribute to the following projects:
+
+- [Extension](https://github.com/estruyf/vscode-front-matter)
+- [Documentation](https://github.com/FrontMatter/web-documentation-nextjs)
+- [Sample Projects](https://github.com/FrontMatter/project-samples)
+
+## How to get started
+
+- Start by forking this project;
+- Clone your fork to your local machine;
+- Run `npm i`;
+- Open the project in VS Code;
+- To start developing, run `npm run dev:ext` and press `f5` to start the debugging session.
+
+### Tips
+
+- Ensure that the main branch on your fork is in sync with the original **vscode-front-matter** repository
+
+```bash
+# assuming you are in the folder of your locally cloned fork....
+git checkout main
+
+# assuming you have a remote named `upstream` pointing to the official **vscode-front-matter** repo
+git fetch upstream
+
+# update your local main to be a mirror of what's in the main repo
+git pull --rebase upstream main
+```
+
+- Create a feature branch in your fork. In case you get stuck, or have issues with merging your PR, this will allow you to have a clean main branch that you can use for contributing other changes.
+
+```bash
+git checkout -b issue/<id>
+```
+
+## Pull request
+
+Once you are done with implementing the fix or feature. Please create a PR to our `dev` branch.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under its MIT License.

README.beta.md

@@ -54,6 +54,12 @@ A couple of our extension highlights that hopefully get you interested in giving
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 8**
+
+The taxonomy dashboard got introduced on which you can manage your tags, categories, and custom taxonomy.
+
+![Taxonomy dashboard](https://beta.frontmatter.codes/assets/marketplace/v8.1.0/taxonomy-dashboard.png)
+
 **Version 7**
 
 Snippets support for Front Matter has been added!
@@ -166,24 +172,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 />
@@ -202,6 +191,6 @@ You can open showcase issues for the following things:
 
 <p align="center">
   <a href="https://visitorbadge.io">
-    <img src="https://estruyf-github.azurewebsites.net/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
-   </a>
+    <img src="https://api.visitorbadge.io/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
+  </a>
 </p>

README.md

@@ -52,6 +52,12 @@ A couple of our extension highlights that hopefully get you interested in giving
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 8**
+
+The taxonomy dashboard got introduced on which you can manage your tags, categories, and custom taxonomy.
+
+![Taxonomy dashboard](https://frontmatter.codes/assets/marketplace/v8.1.0/taxonomy-dashboard.png)
+
 **Version 7**
 
 Snippets support for Front Matter has been added!
@@ -164,24 +170,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 />
@@ -201,6 +190,6 @@ You can open showcase issues for the following things:
 
 <p align="center">
   <a href="https://visitorbadge.io">
-    <img src="https://estruyf-github.azurewebsites.net/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
+    <img src="https://api.visitorbadge.io/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
   </a>
 </p>

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; }
@@ -41,7 +41,9 @@
 }
 
 .collapsible__body,
-.ext_settings {
+.ext_settings,
+.git_actions,
+.initialize_actions {
 	padding: 1rem 1.25rem;
   box-sizing: border-box;
 }
@@ -143,12 +145,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;
@@ -162,35 +165,6 @@
   border: 1px solid rgba(0, 0, 0, .9);
 }
 
-.article__tags__input input {
-  border: 1px solid var(--vscode-inputValidation-infoBorder);
-}
-
-.article__tags__input input:disabled {
-  border-color: transparent;
-}
-
-.article__tags__input.freeform {
-  position: relative;
-}
-
-.article__tags__input.freeform input {
-  padding-right: 35px;
-}
-
-.article__tags__input button {
-  position: absolute;
-  bottom: 1px;
-  top: 1px;
-  right: 1px;
-  width: 30px;
-  padding-bottom: 2px; 
-  padding-top: 2px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .article__tags ul {
 	color: var(--vscode-dropdown-foreground);
   background-color: var(--vscode-dropdown-background);
@@ -219,60 +193,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 +273,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;
 }
@@ -447,162 +372,6 @@ input:checked + .field__toggle__slider:before {
 }
 
 /* Metadata */
-.metadata_field {
-  margin-bottom: 1rem;
-}
-
-.vscode-dark .metadata_field__box {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px dashed rgba(255, 255, 255, 0.2);
-}
-
-.vscode-light .metadata_field__box {
-  background: rgba(0, 0, 0, 0.1);
-  border: 1px dashed rgba(0, 0, 0, 0.2);
-}
-
-.metadata_field__box {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px dashed rgba(255, 255, 255, 0.2);
-  margin-bottom: .5rem;
-  padding: .5rem 1rem;
-}
-
-.metadata_field__label {
-  display: flex;
-  align-items: center;
-  margin-bottom: .5rem;
-}
-
-.metadata_field__label.metadata_field__label_parent {
-  justify-content: center;
-}
-
-.metadata_field__label svg {
-  margin-right: .5rem;
-}
-
-.metadata_field__error {
-  color: var(--vscode-errorForeground);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.metadata_field__error button {
-  color: var(--vscode-button-secondaryForeground);
-  background-color: var(--vscode-button-secondaryBackground);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  width: auto;
-}
-
-.metadata_field__error button:hover {
-  background-color: var(--vscode-button-secondaryHoverBackground);
-}
-
-.metadata_field__input, .metadata_field__input:focus,
-.metadata_field__textarea, .metadata_field__textarea:focus {
-  outline: none;
-}
-
-.metadata_field__limit {
-  color: var(--vscode-inputValidation-warningBorder);
-  margin-top: .25rem;
-}
-
-.metadata_field__number {
-  border: 1px solid var(--vscode-inputValidation-infoBorder) !important;
-  outline: none !important;
-}
-
-.metadata_field__choice__toggle {
-  color: var(--vscode-input-placeholderForeground);
-  border: 1px solid var(--vscode-inputValidation-infoBorder) !important;
-  outline: none !important;
-  width: 100%;
-  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
-  background-color: var(--vscode-input-background);
-
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.metadata_field__choice__toggle:hover,
-.metadata_field__choice__toggle:focus,
-.metadata_field__choice__toggle:active,
-.metadata_field__choice__toggle:disabled {
-  background-color: var(--vscode-input-background);
-}
-
-.metadata_field__choice__toggle span {
-  margin-right: 1rem;
-}
-
-.metadata_field__choice__toggle svg.icon {
-  height: 1rem;
-  width: 1rem;
-  margin-left: .25rem;
-
-  position: absolute;
-  right: .25rem;
-}
-
-.metadata_field__choice_list {
-  width: 90%;
-  margin: 0;
-  padding: 0;
-  z-index: 1;
-  position: absolute;
-  list-style: none;
-  overflow: auto;
-  max-height: 200px;
-
-	color: var(--vscode-dropdown-foreground);
-  background-color: var(--vscode-dropdown-background);
-}
-
-.metadata_field__choice_list.open {
-  border: 1px solid rgba(0, 0, 0, .9);
-}
-
-.metadata_field__choice_list li {
-  padding: var(--input-padding-vertical) var(--input-padding-horizontal);
-  cursor: pointer;
-}
-
-.metadata_field__choice_list li:active {
-	color: var(--vscode-button-foreground);
-  background-color: var(--vscode-button-background);
-}
-
-.metadata_field__choice_list li[aria-selected="true"] {
-  color: var(--vscode-button-foreground);
-  background-color: var(--vscode-button-hoverBackground);
-}
-
-.metadata_field__choice_list li[aria-disabled="true"] {
-  display: none;
-}
-
-.metadata_field__choice_list__item {
-  opacity: 0.8;
-}
-
-.metadata_field__choice__button {
-  margin-top: .5rem;
-  display: inline-flex;
-  align-items: center;
-  width: auto;
-  margin-right: .5rem;
-}
-
-.metadata_field__choice__button_icon {
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-left: .5rem;
-}
 
 .metadata_field__datetime {
   display: flex;
@@ -625,71 +394,6 @@ input:checked + .field__toggle__slider:before {
   background-color: var(--vscode-button-secondaryHoverBackground);
 }
 
-.metadata_field__multiple_images {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
-}
-
-.metadata_field__preview_image img {
-  display: block;
-  margin: 0 auto;
-  max-height: 16rem;
-}
-
-.metadata_field__preview_image__button {
-  background-color: transparent;
-  border: 1px dashed var(--vscode-button-background);
-  padding: 1.5rem;
-  filter: brightness(85%);
-}
-
-.metadata_field__preview_image__button:hover {
-  background-color: rgba(255, 255, 255, .1);
-  filter: brightness(100%);
-}
-
-.metadata_field__preview_image__button svg {
-  color: var(--vscode-foreground);
-  display: block;
-  width: 3rem;
-  height: 3rem;
-  margin: 0 auto;
-}
-
-.metadata_field__preview_image__button span {
-  color: var(--vscode-foreground);
-  display: inline-block;
-  margin: 0 auto;
-  margin-top: .5rem;
-}
-
-.vscode-light .metadata_field__preview_image__preview {
-  background: rgba(0, 0, 0, 0.1);
-}
-
-.vscode-dark .metadata_field__preview_image__preview {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.metadata_field__preview_image__preview {
-  background-color: var(--vscode-button-secondaryBackground);
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.metadata_field__preview_image__remove {
-  background-color: var(--vscode-inputValidation-errorBackground);
-  color: var(--vscode-inputValidation-errorForeground);
-}
-
-.metadata_field__preview_image__remove:hover {
-  background-color: var(--vscode-inputValidation-errorBackground);
-  color: var(--vscode-inputValidation-errorForeground);
-  opacity: .9;
-}
-
 /* File list */
 .file_list vscode-label {
   border-bottom: 1px solid var(--vscode-foreground);
@@ -771,8 +475,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 {

e2e/src/command.test.ts

@@ -0,0 +1,78 @@
+import { By, VSBrowser, EditorView, WebView, Workbench, Notification, StatusBar, NotificationType } from "vscode-extension-tester";
+import { expect } from "chai";
+import { sleep } from "./utils";
+import { join } from "path";
+
+// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/index.ts
+// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/command.test.ts
+
+describe("Initialization testing", function() {
+  this.timeout(2 * 60 * 1000 /*ms*/);
+
+  let workbench: Workbench;
+  let view: WebView;
+
+  before(async function() {
+    await VSBrowser.instance.openResources(join(__dirname, '../sample'));
+    await sleep(3000);
+    workbench = new Workbench();
+
+    await workbench.executeCommand("frontMatter.dashboard");
+    await sleep(3000);
+
+    await new EditorView().openEditor(`FrontMatter Dashboard`);
+
+    view = new WebView();
+    await view.switchToFrame();
+  });
+
+  it("1. Open welcome dashboard", async function() {
+    const element = await view.findWebElement(By.css('h1'));
+
+    const title = await element.getText();
+
+    expect(title).has.string(`Front Matter`);
+  });
+
+  it("2. Initialize project", async function() {
+    const btn = await view.findWebElement(By.css('[data-test="welcome-init"] button'));
+    expect(btn).to.exist;
+
+    await btn.click();
+
+    await sleep(1000);
+
+    await VSBrowser.instance.driver.wait(() => { 
+      return notificationExists(workbench, 'Front Matter:'); 
+    }, 2000) as Notification;
+
+    const notifications = await workbench.getNotifications();
+
+    let notification!: Notification;
+    for (const not of notifications) {
+      console.log(not);
+
+      // const message = await not.get;
+      // console.log(message);
+      // if (message.includes('Front Matter:')) {
+      //   notification = not;
+      // }
+    }
+
+    expect(await notification.getMessage()).has.string(`Project initialized successfully.`);
+  });
+
+  it("3. Check if project file is created", async function() {});
+});
+
+
+async function notificationExists(workbench: Workbench, text: string): Promise<Notification | undefined> {
+  const notifications = await (await (new StatusBar()).openNotificationsCenter()).getNotifications(NotificationType.Info);
+
+  for (const notification of notifications) {
+    const message = await notification.getMessage();
+    if (message.indexOf(text) >= 0) {
+      return notification;
+    }
+  }
+}

e2e/src/runTests.ts

@@ -0,0 +1,33 @@
+import * as path from 'path';
+import * as semver from "semver";
+import { ExTester, ReleaseQuality } from "vscode-extension-tester";
+
+
+async function main(): Promise<void> {
+  const vsCodeVersion: semver.SemVer = new semver.SemVer(`1.66.0`);
+  const version = vsCodeVersion.version;
+
+  const storageFolder = path.join(__dirname, "..", "storage");
+  const extFolder = path.join(__dirname, "..", "extensions");
+
+  try {
+    const testPath = path.join(__dirname, "command.test.js");
+
+    const exTester = new ExTester(storageFolder, ReleaseQuality.Stable, extFolder);
+    await exTester.downloadCode(version);
+    await exTester.installVsix();
+    // await exTester.installFromMarketplace("eliostruyf.vscode-front-matter");
+    await exTester.downloadChromeDriver(version);
+    // await exTester.setupRequirements({vscodeVersion: version});
+    const result = await exTester.runTests(testPath, {
+      vscodeVersion: version
+    });
+
+    process.exit(result);
+  } catch (err) {
+    console.log(err);
+    process.exit(1);
+  }
+}
+
+main();

e2e/src/utils/index.ts

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

e2e/src/utils/sleep.ts

@@ -0,0 +1,3 @@
+export async function sleep(time: number) {
+  await new Promise((resolve) => setTimeout(resolve, time));
+}

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": "}}"
     }
   }
 }

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('.');
@@ -7,14 +8,31 @@ const version = packageJson.version.split('.');
 packageJson.version = `${version[0]}.${version[1]}.${process.argv[process.argv.length-1].substr(0, 7)}`;
 packageJson.preview = true;
 packageJson.name = "vscode-front-matter-beta";
-packageJson.displayName = `${packageJson.displayName} BETA`;
+packageJson.displayName = `${packageJson.displayName} (BETA)`;
 packageJson.description = `BETA Version of Front Matter. ${packageJson.description}`;
 packageJson.icon = "assets/frontmatter-beta.png";
 packageJson.homepage = "https://beta.frontmatter.codes";
 
 console.log(packageJson.version);
 
+core.summary.addHeading(`Version info`).addRaw(`Version: ${packageJson.version}`).write();
+
+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

@@ -1,8 +1,9 @@
+import { Folders } from './Folders';
 import { DEFAULT_CONTENT_TYPE } from './../constants/ContentType';
 import { isValidFile } from './../helpers/isValidFile';
 import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX, CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_CONTENT_PLACEHOLDERS, TelemetryEvent } from './../constants';
 import * as vscode from 'vscode';
-import { Field, TaxonomyType } from "../models";
+import { CustomPlaceholder, Field, TaxonomyType } from "../models";
 import { format } from "date-fns";
 import { ArticleHelper, Settings, SlugHelper } from '../helpers';
 import { Notifications } from '../helpers/Notifications';
@@ -30,7 +31,7 @@ export class Article {
       return;
     }
 
-    const article = Article.getCurrent();
+    const article = ArticleHelper.getCurrent();
 
     if (!article) {
       return;
@@ -69,7 +70,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) {
@@ -167,15 +169,36 @@ export class Article {
   }
 
   /**
-   * Generate the slug based on the article title
+   * Generate the new slug
    */
-	public static async generateSlug() {
-		Telemetry.send(TelemetryEvent.generateSlug);
-    
+  public static generateSlug(title: string) {
+    if (!title) {
+      return;
+    }
+
     const prefix = Settings.get(SETTING_SLUG_PREFIX) as string;
     const suffix = Settings.get(SETTING_SLUG_SUFFIX) as string;
+
+    const slug = SlugHelper.createSlug(title);
+
+    if (slug) {
+      return {
+        slug,
+        slugWithPrefixAndSuffix: `${prefix}${slug}${suffix}`
+      };
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Generate the slug based on the article title
+   */
+	public static async updateSlug() {
+		Telemetry.send(TelemetryEvent.generateSlug);
+    
     const updateFileName = Settings.get(SETTING_SLUG_UPDATE_FILE_NAME) as string;
-    const filePrefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
+    let filePrefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
     const editor = vscode.window.activeTextEditor;
 
     if (!editor) {
@@ -187,25 +210,30 @@ export class Article {
       return;
     }
 
+    // Retrieve the file prefix from the folder
+    const filePrefixOnFolder = Folders.getFilePrefixBeFilePath(editor.document.uri.fsPath);
+    if (typeof filePrefixOnFolder !== "undefined") {
+      filePrefix = filePrefixOnFolder;
+    }
+
     const contentType = ArticleHelper.getContentType(article.data);
     const titleField = "title";
     const articleTitle: string = article.data[titleField];
+    const slugInfo = Article.generateSlug(articleTitle);
     
-    const slug = SlugHelper.createSlug(articleTitle);
-    if (slug) {
-      let slugFieldValue = `${prefix}${slug}${suffix}`;
-      article.data["slug"] = slugFieldValue;
+    if (slugInfo && slugInfo.slug && slugInfo.slugWithPrefixAndSuffix) {
+      article.data["slug"] = slugInfo.slugWithPrefixAndSuffix;
 
       if (contentType) {
         // Update the fields containing the slug placeholder
         let fieldsToUpdate: Field[] = contentType.fields.filter(f => f.default === "{{slug}}");
         for (const field of fieldsToUpdate) {
-          article.data[field.name] = slug;
+          article.data[field.name] = slugInfo.slug;
         }
 
         // Update the fields containing a custom placeholder that depends on slug
-        const placeholders = Settings.get<{id: string, value: string}[]>(SETTING_CONTENT_PLACEHOLDERS);
-        const customPlaceholders = placeholders?.filter(p => p.value.includes("{{slug}}"));
+        const placeholders = Settings.get<CustomPlaceholder[]>(SETTING_CONTENT_PLACEHOLDERS);
+        const customPlaceholders = placeholders?.filter(p => p.value && p.value.includes("{{slug}}"));
         const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
         for (const customPlaceholder of (customPlaceholders || [])) {
           const customPlaceholderFields = contentType.fields.filter(f => f.default === `{{${customPlaceholder.id}}}`);
@@ -226,7 +254,7 @@ export class Article {
           const ext = extname(editor.document.fileName);
           const fileName = basename(editor.document.fileName);
           
-          let slugName = slug.startsWith("/") ? slug.substring(1) : slug;
+          let slugName = slugInfo.slug.startsWith("/") ? slugInfo.slug.substring(1) : slugInfo.slug;
           slugName = slugName.endsWith("/") ? slugName.substring(0, slugName.length - 1) : slugName;
 
           let newFileName = `${slugName}${ext}`;
@@ -302,6 +330,14 @@ export class Article {
     if (document && ArticleHelper.isSupportedFile(document)) {
       const autoUpdate = Settings.get(SETTING_AUTO_UPDATE_DATE);
 
+      // Is article located in one of the content folders
+      const folders = Folders.get();
+      const documentPath = parseWinPath(document.fileName);
+      const folder = folders.find(f => documentPath.startsWith(f.path));
+      if (!folder) {
+        return;
+      }
+
       if (autoUpdate) {
         event.waitUntil(Article.setLastModifiedDateOnSave(document));
       }
@@ -324,7 +360,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;
@@ -334,6 +370,7 @@ export class Article {
     const contentType = article && article.data ? ArticleHelper.getContentType(article.data) : DEFAULT_CONTENT_TYPE;
 
     const position = editor.selection.active;
+    const selectionText = editor.document.getText(editor.selection);
 
     await vscode.commands.executeCommand(COMMAND_NAME.dashboard, {
       type: "media",
@@ -341,7 +378,8 @@ export class Article {
         pageBundle: !!contentType.pageBundle,
         filePath: editor.document.uri.fsPath,
         fieldName: basename(editor.document.uri.fsPath),
-        position
+        position,
+        selection: selectionText
       }
     } as DashboardData);
 
@@ -375,23 +413,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/Backers.ts

@@ -1,5 +1,5 @@
 import { commands, ExtensionContext } from 'vscode';
-import { CONTEXT } from '../constants';
+import { COMMAND_NAME, CONTEXT } from '../constants';
 import { Extension } from '../helpers';
 import { Credentials } from "../services/Credentials";
 import fetch from "node-fetch";
@@ -17,7 +17,7 @@ export class Backers {
     Backers.tryUsernameCheck();
 
     context.subscriptions.push(
-      commands.registerCommand('frontMatter.authenticate', async () => {
+      commands.registerCommand(COMMAND_NAME.authenticate, async () => {
         Backers.tryUsernameCheck();
       })
     );

src/commands/Cache.ts

@@ -0,0 +1,24 @@
+import { commands } from "vscode";
+import { COMMAND_NAME, ExtensionState } from "../constants";
+import { Extension, Notifications } from "../helpers";
+
+export class Cache {
+
+  public static async registerCommands() {
+    const ext = Extension.getInstance();
+    const subscriptions = ext.subscriptions;
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.clearCache, Cache.clear)
+    );
+  }
+
+  private static async clear() {
+    const ext = Extension.getInstance();
+
+    await ext.setState(ExtensionState.Dashboard.Pages.Cache, undefined, "workspace");
+    await ext.setState(ExtensionState.Dashboard.Pages.Index, undefined, "workspace");
+
+    Notifications.info("Cache cleared");
+  }
+}

src/commands/Content.ts

@@ -1,9 +1,15 @@
 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);
+      return;
+    }
 
     const options: QuickPickItem[] = [{
       label: "Create content by content type",
@@ -14,8 +20,10 @@ export class Content {
     } as QuickPickItem];
 
     const selectedOption = await window.showQuickPick(options, {
+      title: "Create content",
       placeHolder: `Select how you want to create your new content`,
-      canPickMany: false
+      canPickMany: false,
+      ignoreFocusOut: true
     });
 
     if (selectedOption) {

src/commands/Dashboard.ts

@@ -1,4 +1,4 @@
-import { SETTING_DASHBOARD_OPENONSTART, CONTEXT } from '../constants';
+import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState } from '../constants';
 import { join } from "path";
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from "vscode";
 import { Logger, Settings as SettingsHelper } from '../helpers';
@@ -7,8 +7,9 @@ import { Extension } from '../helpers/Extension';
 import { WebviewHelper } from '@estruyf/vscode';
 import { DashboardData } from '../models/DashboardData';
 import { MediaLibrary } from '../helpers/MediaLibrary';
-import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener, SnippetListener } from '../listeners/dashboard';
+import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener, SnippetListener, TaxonomyListener, LogListener } from '../listeners/dashboard';
 import { MediaListener as PanelMediaListener } from '../listeners/panel'
+import { GitListener, ModeListener } from '../listeners/general';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -73,6 +74,7 @@ export class Dashboard {
   public static reload() {
     if (Dashboard.isOpen) {
       Dashboard.webview?.dispose();
+      Extension.getInstance().setState(ExtensionState.Dashboard.Pages.Cache, undefined, "workspace")
 
       setTimeout(() => {
         Dashboard.open();
@@ -128,8 +130,8 @@ export class Dashboard {
       await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, false);
     });
 
-    SettingsHelper.onConfigChange((global?: any) => {
-      SettingsListener.getSettings();
+    SettingsHelper.onConfigChange(() => {
+      SettingsListener.getSettings(true);
     });
 
     Dashboard.webview.webview.onDidReceiveMessage(async (msg) => {
@@ -143,6 +145,10 @@ export class Dashboard {
       DataListener.process(msg);
       TelemetryListener.process(msg);
       SnippetListener.process(msg);
+      ModeListener.process(msg);
+      GitListener.process(msg);
+      TaxonomyListener.process(msg);
+      LogListener.process(msg);
     });
   }
 

src/commands/Diagnostics.ts

@@ -3,6 +3,7 @@ import { ViewColumn, workspace } from "vscode";
 import ContentProvider from "../providers/ContentProvider";
 import { join } from "path";
 import { ContentFolder } from "../models";
+import { Settings } from "../helpers/SettingsHelper";
 
 
 export class Diagnostics {
@@ -38,6 +39,12 @@ ${all}
 # Folders to search files
 
 ${folderData.join("\n")}
+
+# Complete frontmatter.json config
+
+\`\`\`json
+${JSON.stringify(Settings.globalConfig, null, 2)}
+\`\`\`
     `;
 
     ContentProvider.show(logging, `${projectName} diagnostics`, "markdown", ViewColumn.One);
@@ -52,7 +59,7 @@ ${folderData.join("\n")}
     let projectStart = folder.path.split(projectName).pop();
     projectStart = projectStart || "";
     projectStart = projectStart?.replace(/\\/g, '/');
-    projectStart = projectStart?.startsWith('/') ? projectStart.substr(1) : projectStart;
+    projectStart = projectStart?.startsWith('/') ? projectStart.substring(1) : projectStart;
 
     const mdFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.md'));
     const mdxFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.mdx'));

src/commands/Folders.ts

@@ -1,20 +1,24 @@
+import { STATIC_FOLDER_PLACEHOLDER } from './../constants/StaticFolderPlaceholder';
 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 { existsSync, mkdirSync } from 'fs';
+import { Logger, Settings } from "../helpers";
+import { existsSync } 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';
+import { mkdirAsync } from '../utils/mkdirAsync';
+import { existsAsync } from '../utils';
 
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
@@ -26,7 +30,7 @@ export class Folders {
    */
   public static async addMediaFolder(data?: {selectedFolder?: string}) {
     let wsFolder = Folders.getWorkspaceFolder();
-    const staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
+    let staticFolder = Folders.getStaticFolderRelativePath();
 
     let startPath = "";
 
@@ -40,7 +44,12 @@ export class Folders {
       startPath += "/";
     }
 
+    if (startPath.includes(STATIC_FOLDER_PLACEHOLDER.hexo.placeholder)) {
+      startPath = startPath.replace(STATIC_FOLDER_PLACEHOLDER.hexo.placeholder, STATIC_FOLDER_PLACEHOLDER.hexo.postsFolder);
+    }
+
     const folderName = await window.showInputBox({  
+      title: `Add media folder`,
       prompt: `Which name would you like to give to your folder (use "/" to create multi-level folders)?`,
       value: startPath,
       ignoreFocusOut: true,
@@ -52,22 +61,17 @@ export class Folders {
       return;
     }
     
-    const folders = folderName.split("/").filter(f => f);
-    let parentFolders: string[] = [];
+    await Folders.createFolder(join(parseWinPath(wsFolder?.fsPath || ""), folderName));
+  }
 
-    for (const folder of folders) {
-      const folderPath = join(parseWinPath(wsFolder?.fsPath || ""), parentFolders.join("/"), folder);
-
-      parentFolders.push(folder);
-      
-      if (!existsSync(folderPath)) {
-        mkdirSync(folderPath);
-      }
+  public static async createFolder(folderPath: string) {
+    if (!(await existsAsync(folderPath))) {
+      await mkdirAsync(folderPath, { recursive: true });
     }
 
     if (Dashboard.isOpen) {
       MediaHelpers.resetMedia();
-      MediaListener.sendMediaFiles(0, folderName);
+      MediaListener.sendMediaFiles(0, folderPath);
     }
 
     Telemetry.send(TelemetryEvent.addMediaFolder);
@@ -77,7 +81,7 @@ export class Folders {
    * Create content in a registered folder
    * @returns 
    */
-  public static async create() {
+   public static async create() {
     const selectedFolder = await Questions.SelectContentFolder();
     if (!selectedFolder) {
       return;
@@ -95,9 +99,12 @@ export class Folders {
 
   /**
    * Register the new folder path
-   * @param folder 
+   * @param folderInfo 
    */
-  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 +117,15 @@ 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({
+          title: `Register folder`, 
+          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 +138,8 @@ export class Folders {
       Notifications.info(`Folder registered`);
 
 		  Telemetry.send(TelemetryEvent.registerFolder);
+
+      SettingsListener.getSettings(true);
     }
   }
 
@@ -144,6 +157,25 @@ export class Folders {
     }
   }
 
+  /**
+   * Get the static folder its relative path
+   * @returns 
+   */
+  public static getStaticFolderRelativePath(): string | undefined {
+    let staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
+
+    if (staticFolder && staticFolder.includes(WORKSPACE_PLACEHOLDER)) {
+      staticFolder = Folders.getAbsFilePath(staticFolder);
+      const wsFolder = Folders.getWorkspaceFolder();
+      if (wsFolder) {
+        const relativePath = relative(parseWinPath(wsFolder.fsPath), parseWinPath(staticFolder));
+        return relativePath;
+      }
+    }
+
+    return staticFolder;
+  }
+
   /**
    * Retrieve the folder path
    * @param folder 
@@ -180,9 +212,9 @@ export class Folders {
       if (!projectFolder) {
         window.showWorkspaceFolderPick({
           placeHolder: `Please select the main workspace folder for Front Matter to use.`
-        }).then(selectedFolder => {
+        }).then(async (selectedFolder) => {
           if (selectedFolder) {
-            Settings.createGlobalFile(selectedFolder.uri);
+            await Settings.createGlobalFile(selectedFolder.uri);
             // Full reload to make sure the whole extension is reloaded correctly
             commands.executeCommand(`workbench.action.reloadWindow`);
           }
@@ -212,17 +244,18 @@ export class Folders {
   public static async getInfo(limit?: number): Promise<FolderInfo[] | null> {
     const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
     const folders = Folders.get();
+    const wsFolder = parseWinPath(Folders.getWorkspaceFolder()?.fsPath || "");
+
     if (folders && folders.length > 0) {
       let folderInfo: FolderInfo[] = [];
       
       for (const folder of folders) {
         try {
-          const projectName = Folders.getProjectFolderName();
-          let projectStart = folder.path.split(projectName).pop();
+          let projectStart = parseWinPath(folder.path).replace(wsFolder, "");
           
           if (projectStart) {
             projectStart = projectStart.replace(/\\/g, '/');
-            projectStart = projectStart.startsWith('/') ? projectStart.substr(1) : projectStart;
+            projectStart = projectStart.startsWith('/') ? projectStart.substring(1) : projectStart;
 
             let files: Uri[] = [];
             
@@ -284,11 +317,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[];
   }
   
   /**
@@ -319,7 +371,7 @@ export class Folders {
     const isWindows = process.platform === 'win32';
     let absPath = filePath.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
     absPath = isWindows ? absPath.split('/').join('\\') : absPath;
-    return absPath;
+    return parseWinPath(absPath);
   }
 
   /**
@@ -332,7 +384,7 @@ export class Folders {
     const isWindows = process.platform === 'win32';
     let absPath = folder.path.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
     absPath = isWindows ? absPath.split('/').join('\\') : absPath;
-    return absPath;
+    return parseWinPath(absPath);
   }
 
   /**
@@ -347,4 +399,91 @@ 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));
+  }
+
+  /**
+   * Returns the file prefix for the given folder path
+   * @param folderPath 
+   * @returns 
+   */
+  public static getFilePrefixByFolderPath(folderPath: string) {
+    const folders = Folders.get();
+    const pageFolder = folders.find(f => parseWinPath(f.path) === parseWinPath(folderPath));
+
+    if (pageFolder && typeof pageFolder.filePrefix !== "undefined") {
+      return pageFolder.filePrefix;
+    }
+
+    return;
+  }
+
+
+  /**
+   * Returns the file prefix for the given file path
+   * @param filePath 
+   * @returns 
+   */
+  public static getFilePrefixBeFilePath(filePath: string) {
+    const folders = Folders.get();
+    if (folders.length > 0) {
+      filePath = parseWinPath(filePath);
+
+      let selectedFolder: ContentFolder | null = null;
+      for (const folder of folders) {
+        const folderPath = parseWinPath(folder.path);
+        if (filePath.startsWith(folderPath)) {
+          if (!selectedFolder || selectedFolder.path.length < folderPath.length) {
+            selectedFolder = folder;
+          }
+        }
+      }
+
+      if (selectedFolder && typeof selectedFolder.filePrefix !== "undefined") {
+        return selectedFolder.filePrefix;
+      }
+    }
+
+    return;
+  }
+
+  /**
+   * 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,19 +1,21 @@
 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 { PreviewSettings } from '../models';
+import { Extension, parseWinPath, Settings } from '../helpers';
+import { ContentFolder, 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';
+import { Folders } from './Folders';
 
 
 export class Preview {
 
-  /** 
+  /**
    * Init the preview
    */
   public static async init() {
@@ -36,6 +38,29 @@ export class Preview {
     let slug = article?.data ? article.data.slug : "";
 
     let pathname = settings.pathname;
+
+    // Check if there is a pathname defined on content folder level
+    const folders = Folders.get();
+    if (folders.length > 0) {
+      const foldersWithPath = folders.filter(folder => folder.previewPath);
+      const filePath = parseWinPath(editor?.document.uri.fsPath);
+
+      let selectedFolder: ContentFolder | null = null;
+      for (const folder of foldersWithPath) {
+        const folderPath = parseWinPath(folder.path);
+        if (filePath.startsWith(folderPath)) {
+          if (!selectedFolder || selectedFolder.path.length < folderPath.length) {
+            selectedFolder = folder;
+          }
+        }
+      }
+
+      if (selectedFolder) {
+        pathname = selectedFolder.previewPath;
+      }
+    }
+
+    // Check if there is a pathname defined on content type level
     if (article?.data) {
       const contentType = ArticleHelper.getContentType(article.data);
       if (contentType && contentType.previewPath) {
@@ -57,10 +82,18 @@ export class Preview {
       }
     }
 
+    // Make sure there are no backslashes in the slug
+    slug = parseWinPath(slug);
+
+    // Verify if the slug doesn't end with _index or index
+    if (slug.endsWith('_index') || slug.endsWith('index')) {
+      slug = slug.substring(0, slug.endsWith('_index') ? slug.length - 6 : slug.length - 5);
+    }
+
     // Create the preview webview
     const webView = window.createWebviewPanel(
       'frontMatterPreview',
-      'FrontMatter Preview',
+      article?.data?.title ? `Preview: ${article?.data?.title}` : 'FrontMatter Preview',
       {
         viewColumn: ViewColumn.Beside,
         preserveFocus: true
@@ -71,8 +104,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 +114,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

@@ -1,13 +1,14 @@
+import { DEFAULT_CONTENT_TYPE } from './../constants/ContentType';
 import { Telemetry } from './../helpers/Telemetry';
 import { workspace, Uri } from "vscode";
 import { join } from "path";
-import * as fs from "fs";
 import { Notifications } from "../helpers/Notifications";
 import { Template } from "./Template";
 import { Folders } from "./Folders";
-import { Logger, Settings } from "../helpers";
-import { SETTING_CONTENT_DEFAULT_FILETYPE, TelemetryEvent } from "../constants";
+import { FrameworkDetector, Logger, Settings } from "../helpers";
+import { SETTING_CONTENT_DEFAULT_FILETYPE, SETTING_TAXONOMY_CONTENT_TYPES, TelemetryEvent } from "../constants";
 import { SettingsListener } from '../listeners/dashboard';
+import { existsAsync, writeFileAsync } from '../utils';
 
 export class Project {
 
@@ -24,41 +25,70 @@ 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);
+      await Settings.createTeamSettings();
 
-      const folder = Template.getSettings();
-      const templatePath = Project.templatePath();
+      // Add the default content type
+      await Settings.update(SETTING_TAXONOMY_CONTENT_TYPES, [DEFAULT_CONTENT_TYPE], true);
 
-      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 = await FrameworkDetector.get(wsFolder?.fsPath || "");
 
-      SettingsListener.getSettings();
+      if (framework) {
+        await SettingsListener.setFramework(framework.name);
+      }
+
+      SettingsListener.getSettings(true);
     } catch (err: any) {
       Logger.error(`Project::init: ${err?.message || err}`);
       Notifications.error(`Sorry, something went wrong - ${err?.message || err}`);
     }
   }
 
+  /**
+   * 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 (!(await existsAsync(templatePath.fsPath))) {
+      await workspace.fs.createDirectory(templatePath);
+    }
+
+    if (sampleTemplate) {
+      await writeFileAsync(article.fsPath, Project.content, { encoding: "utf-8" });
+      Notifications.info("Sample template created.");
+    }
+  }
+
   /**
    * Get the template path for the current project
    */

src/commands/Settings.ts

@@ -1,10 +1,9 @@
+import { TaxonomyHelper } from './../helpers/TaxonomyHelper';
 import * as vscode from 'vscode';
-import * as fs from 'fs';
 import { TaxonomyType } from "../models";
 import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, EXTENSION_NAME } from '../constants';
 import { ArticleHelper, Settings as SettingsHelper, FilesHelper } from '../helpers';
 import { FrontMatterParser } from '../parsers';
-import { DumpOptions } from 'js-yaml';
 import { Notifications } from '../helpers/Notifications';
 
 export class Settings {
@@ -15,9 +14,10 @@ export class Settings {
    * @param type 
    */
   public static async create(type: TaxonomyType) {
-    const newOption = await vscode.window.showInputBox({  
+    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 +36,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;
@@ -71,7 +75,7 @@ export class Settings {
    */
   public static async export() {
     // Retrieve all the Markdown files
-    const allMdFiles = await FilesHelper.getMdFiles();
+    const allMdFiles = await FilesHelper.getAllFiles();
     if (!allMdFiles) {
       return;
     }
@@ -147,10 +151,13 @@ export class Settings {
     const taxType = await vscode.window.showQuickPick([
       "Tag",
       "Category"
-    ], { 
+    ], {
+      title: `Remap`,
       placeHolder: `What do you want to remap?`,
-      canPickMany: false 
+      canPickMany: false,
+      ignoreFocusOut: true
     });
+
     if (!taxType) {
       return;
     }
@@ -165,7 +172,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,86 +182,25 @@ 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;
       }
     }
 
-    // Retrieve all the markdown files
-    const allMdFiles = await FilesHelper.getMdFiles();
-    if (!allMdFiles) {
-      return;
+    if (newOptionValue) {
+      TaxonomyHelper.process("edit", type, selectedOption, newOptionValue);
+    } else {
+      TaxonomyHelper.process("delete", type, selectedOption, undefined);
     }
-
-    let progressText = `${EXTENSION_NAME}: Remapping "${selectedOption}" ${type === TaxonomyType.Tag ? "tag" : "category"} to "${newOptionValue}".`;
-    if (!newOptionValue) {
-      progressText = `${EXTENSION_NAME}: Deleting "${selectedOption}" ${type === TaxonomyType.Tag ? "tag" : "category"}.`;
-    }
-    vscode.window.withProgress({
-      location: vscode.ProgressLocation.Notification,
-      title: progressText,
-      cancellable: false
-    }, async (progress) => {
-      // Set the initial progress
-      const progressNr = allMdFiles.length/100;
-      progress.report({ increment: 0});
-
-      const matterProp: string = type === TaxonomyType.Tag ? "tags" : "categories";
-
-      let i = 0;
-      for (const file of allMdFiles) {
-        progress.report({ increment: (++i/progressNr) });
-        const mdFile = fs.readFileSync(file.path, { encoding: "utf8" });
-        if (mdFile) {
-          try {
-            const article = FrontMatterParser.fromFile(mdFile);
-            if (article && article.data) {
-              const { data } = article;
-              let taxonomies: string[] = data[matterProp];
-              if (taxonomies && taxonomies.length > 0) {
-                const idx = taxonomies.findIndex(o => o === selectedOption);
-                if (idx !== -1) {
-                  if (newOptionValue) {
-                    taxonomies[idx] = newOptionValue;
-                  } else {
-                    taxonomies = taxonomies.filter(o => o !== selectedOption);
-                  }
-                  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, {
-                    indent: spaces || 2
-                  } as DumpOptions as any), { encoding: "utf8" });
-                }
-              }
-            } 
-          } catch (e) {
-            // Continue with the next file
-          }
-        }
-      }
-      
-      // Update the settings
-      const idx = options.findIndex(o => o === selectedOption);
-      if (newOptionValue) {
-        // Add or update the new option
-        if (idx !== -1) {
-          options[idx] = newOptionValue;
-        } else {
-          options.push(newOptionValue);
-        }
-      } else {
-        // Remove the selected option
-        options = options.filter(o => o !== selectedOption);
-      }
-      await SettingsHelper.updateTaxonomy(type, options);
-
-      Notifications.info(`${newOptionValue ? "Remapping" : "Deleation"} of the ${selectedOption} ${type === TaxonomyType.Tag ? "tag" : "category"} completed.`);
-    });
   }
 }

src/commands/StatusListener.ts

@@ -1,11 +1,13 @@
-import { CONTEXT, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants';
+import { ParsedFrontMatter } from './../parsers/FrontMatterParser';
+import { CONTEXT, NOTIFICATION_TYPE, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants';
 import * as vscode from 'vscode';
-import { ArticleHelper, SeoHelper, Settings } from '../helpers';
+import { ArticleHelper, Notifications, SeoHelper, Settings } from '../helpers';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { DefaultFields } from '../constants';
 import { ContentType } from '../helpers/ContentType';
 import { DataListener } from '../listeners/panel';
 import { commands } from 'vscode';
+import { Field } from '../models';
 
 export class StatusListener {
   
@@ -42,7 +44,7 @@ export class StatusListener {
           }
         }
 
-        // Check SEO for title and description length
+        // Check SEO and required fields
         if (article && article.data) {
           collection.clear();
 
@@ -58,6 +60,9 @@ export class StatusListener {
           if (article.data[fieldName] && descLength > -1) {
             SeoHelper.checkLength(editor, collection, article, fieldName, descLength);
           }
+
+          // Check the required fields
+          StatusListener.verifyRequiredFields(editor, article, collection);
         }
         
         const panel = ExplorerView.getInstance();
@@ -80,4 +85,98 @@ export class StatusListener {
 
     frontMatterSB.hide();
   }
+
+  /**
+   * Verify the required fields
+   * @param article 
+   * @param collection 
+   */
+  private static verifyRequiredFields(editor: vscode.TextEditor, article: ParsedFrontMatter, collection: vscode.DiagnosticCollection) {
+    // Check for missing fields
+    const emptyFields = ContentType.findEmptyRequiredFields(article);
+    const fieldsToReport = [];
+
+    if (emptyFields && emptyFields.length > 0) {
+      const text = editor.document.getText();
+      const markdown = ArticleHelper.stringifyFrontMatter("", article.data);
+      const editorSpaces = vscode.window.activeTextEditor?.options?.tabSize;
+
+      const requiredDiagnostics: vscode.Diagnostic[] = [];
+
+      for (const fields of emptyFields) {
+        let txtIdx = -1;
+        let fieldName = "";
+        let level = 0;
+
+        for (const field of fields) {
+          const totalSpaces = level * (typeof editorSpaces === "string" ? parseInt(editorSpaces) : editorSpaces || 2);
+          const crntIdx = StatusListener.findFieldLine(text, txtIdx, totalSpaces, field);        
+
+          if (crntIdx && crntIdx > txtIdx) {
+            txtIdx = crntIdx;
+            fieldName = field.name;
+          }
+          
+          ++level;
+        }
+
+        if (txtIdx !== -1 && txtIdx < markdown.length) {
+          fieldsToReport.push(fields.map(f => f.title).join("/"));
+
+          const posStart = editor.document.positionAt(txtIdx);
+          const posEnd = editor.document.positionAt(txtIdx + 1 + fieldName.length);
+
+          const diagnostic: vscode.Diagnostic = {
+            code: '',
+            message: `This ${fields.map(f => f.name).join("/")} field is required to contain a value.`,
+            range: new vscode.Range(posStart, posEnd),
+            severity: vscode.DiagnosticSeverity.Error,
+            source: 'Front Matter'
+          };
+
+          requiredDiagnostics.push(diagnostic);
+        }
+      }
+        
+      if (collection.has(editor.document.uri)) {
+        const otherDiag = collection.get(editor.document.uri) || [];
+        collection.set(editor.document.uri, [...otherDiag, ...requiredDiagnostics]);
+      } else {
+        collection.set(editor.document.uri, [...requiredDiagnostics]);
+      }
+
+      if (fieldsToReport.length > 0) {
+        Notifications.showIfNotDisabled(NOTIFICATION_TYPE.requiredFieldValidation, "ERROR_ONCE", `The following fields are required to contain a value: ${fieldsToReport.join(", ")}`);
+      }
+    }
+  }
+
+  /**
+   * Find the line of the field
+   * @param text 
+   * @param startIdx 
+   * @param totalSpaces 
+   * @param field 
+   * @returns 
+   */
+  private static findFieldLine(text: string, startIdx: number, totalSpaces: number, field: Field): number | undefined {
+    const crntIdx = text.indexOf(field.name, startIdx === -1 ? 0 : startIdx);
+
+    if (crntIdx > -1) {
+      // Find the linebreak before the current index
+      const txtFromStart = text.substring(0, crntIdx);
+      const splitLineBreaks = txtFromStart.split(/\r?\n/);
+      const lastLine = splitLineBreaks[splitLineBreaks.length - 1];
+
+      if (lastLine.length === totalSpaces) {
+        if (crntIdx > startIdx) {
+          return crntIdx;
+        }
+      } else {
+        return StatusListener.findFieldLine(text, crntIdx + field.name.length, totalSpaces, field);
+      }
+    }
+
+    return;
+  }
 }

src/commands/Template.ts

@@ -1,55 +1,20 @@
 import { Questions } from './../helpers/Questions';
 import * as vscode from 'vscode';
 import * as path from 'path';
-import * as fs from 'fs';
 import { SETTING_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, TelemetryEvent } from '../constants';
 import { ArticleHelper, Settings } from '../helpers';
 import { Article } from '.';
 import { Notifications } from '../helpers/Notifications';
-import { CONTEXT } from '../constants';
 import { Project } from './Project';
-import { Folders } from './Folders';
 import { ContentType } from '../helpers/ContentType';
 import { ContentType as IContentType } from '../models';
 import { PagesListener } from '../listeners/dashboard';
 import { extname } from 'path';
 import { Telemetry } from '../helpers/Telemetry';
+import { writeFileAsync, copyFileAsync } from '../utils';
 
 export class Template {
 
-  /**
-   * Check if the template folder is available
-   */
-  public static async init() {
-    const isInitialized = await Template.isInitialized();
-    await vscode.commands.executeCommand('setContext', CONTEXT.canInit, !isInitialized);
-
-    if (isInitialized) {
-      await vscode.commands.executeCommand('setContext', CONTEXT.initialized, true);
-    }
-  }
-
-  /**
-   * Check if the project is already initialized
-   */
-  public static async isInitialized() {
-    const wsFolder = Folders.getWorkspaceFolder();
-    const folder = Template.getSettings();
-
-    if (!folder || !wsFolder) {
-      return false;
-    }
-
-    const templatePath = vscode.Uri.file(path.join(wsFolder.fsPath, folder));
-
-    try {
-      await vscode.workspace.fs.stat(templatePath);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
   /**
    * Generate a template
    */
@@ -62,9 +27,11 @@ export class Template {
       const article = ArticleHelper.getFrontMatter(editor);
       const clonedArticle = Object.assign({}, article);
 
-      const titleValue = await vscode.window.showInputBox({  
+      const titleValue = await vscode.window.showInputBox({
+        title: `Template title`,
         prompt: `What name would you like to give your template?`,
-        placeHolder: `article`
+        placeHolder: `article`,
+        ignoreFocusOut: true
       });
 
       if (!titleValue) {
@@ -75,8 +42,10 @@ export class Template {
       const keepContents = await vscode.window.showQuickPick(
         ["yes", "no"], 
         { 
+          title: `Keep contents`,
           canPickMany: false, 
           placeHolder: `Do you want to keep the contents for the template?`,
+          ignoreFocusOut: true
         }
       );
 
@@ -91,18 +60,31 @@ export class Template {
         let fileContents = ArticleHelper.stringifyFrontMatter(keepContents === "no" ? "" : clonedArticle.content, clonedArticle.data);
 
         const templateFile = path.join(templatePath.fsPath, `${titleValue}.${fileType}`);
-        fs.writeFileSync(templateFile, fileContents, { encoding: "utf-8" });
+        await writeFileAsync(templateFile, fileContents, { encoding: "utf-8" });
 
         Notifications.info(`Template created and is now available in your ${folder} folder.`);
       }
     }
   }
 
+  /**
+   * 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 +92,16 @@ 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`
+      title: `Select a template`,
+      placeHolder: `Select the content template to use`,
+      ignoreFocusOut: true
     });
     if (!selectedTemplate) {
       Notifications.warning(`No template selected.`);
@@ -141,34 +120,34 @@ export class Template {
       return;
     }
 
-    const templateData = ArticleHelper.getFrontMatterByPath(template.fsPath);
+    const templateData = await ArticleHelper.getFrontMatterByPath(template.fsPath);
     let contentType: IContentType | undefined;
     if (templateData && templateData.data && templateData.data.type) {
       contentType = contentTypes?.find(t => t.name === templateData.data.type);
     }
 
     const fileExtension = extname(template.fsPath).replace(".", "");
-    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue, fileExtension);
+    let newFilePath: string | undefined = await ArticleHelper.createContent(contentType, folderPath, titleValue, fileExtension);
     if (!newFilePath) {
       return;
     }
     
     // Start the new file creation
-    fs.copyFileSync(template.fsPath, newFilePath);
+    await copyFileAsync(template.fsPath, newFilePath);
 
     // Update the properties inside the template
-    let frontMatter = ArticleHelper.getFrontMatterByPath(newFilePath);
+    let frontMatter = await ArticleHelper.getFrontMatterByPath(newFilePath);
     if (!frontMatter) {
       Notifications.warning(`Something failed when retrieving the newly created file.`);
       return;
     }
 
     if (frontMatter.data) {
-      frontMatter.data = ArticleHelper.updatePlaceholders(frontMatter.data, titleValue);
+      frontMatter.data = await ArticleHelper.updatePlaceholders(frontMatter.data, titleValue, newFilePath);
 
       frontMatter = Article.updateDate(frontMatter);
 
-      fs.writeFileSync(newFilePath, ArticleHelper.stringifyFrontMatter(frontMatter.content, frontMatter.data), { encoding: "utf8" });
+      await writeFileAsync(newFilePath, ArticleHelper.stringifyFrontMatter(frontMatter.content, frontMatter.data), { encoding: "utf8" });
 
       await vscode.commands.executeCommand('vscode.open', vscode.Uri.file(newFilePath));
     }

src/commands/Wysiwyg.ts

@@ -1,4 +1,4 @@
-import { commands, window, Selection, QuickPickItem } from "vscode";
+import { commands, window, Selection, QuickPickItem, TextEditor } from "vscode";
 import { COMMAND_NAME, CONTEXT, SETTING_CONTENT_WYSIWYG } from "../constants";
 import { Settings } from "../helpers";
 
@@ -12,7 +12,8 @@ enum MarkupType {
   heading,
   unorderedList,
   orderedList,
-  taskList
+  taskList,
+  hyperlink,
 }
 
 export class Wysiwyg {
@@ -46,6 +47,9 @@ export class Wysiwyg {
     subscriptions.push(commands.registerCommand(COMMAND_NAME.orderedlist, () => this.addMarkup(MarkupType.orderedList)));
     subscriptions.push(commands.registerCommand(COMMAND_NAME.taskList, () => this.addMarkup(MarkupType.taskList)));
 
+    // Other markup
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.hyperlink, () => this.addMarkup(MarkupType.hyperlink)));
+
     // Options
     subscriptions.push(commands.registerCommand(COMMAND_NAME.options, async () => {
       const qpItems: QuickPickItem[] = [
@@ -55,12 +59,14 @@ export class Wysiwyg {
         { label: "$(code) Code", detail: "Add inline code snippet", alwaysShow: true },
         { label: "$(symbol-namespace) Code block", detail: "Add a code block", alwaysShow: true },
         { label: "$(quote) Blockquote", detail: "Add a blockquote", alwaysShow: true },
+        { label: "$(symbol-text) Strikethrough", detail: "Add a strikethrough", alwaysShow: true },
       ]
 
-      const option = await window.showQuickPick([ ...qpItems ], {  
+      const option = await window.showQuickPick([ ...qpItems ], {
+        title: "WYSIWYG Options", 
         placeHolder: "Which type of markup would you like to insert?", 
-        canPickMany: false, 
-        ignoreFocusOut: false,
+        canPickMany: false,
+        ignoreFocusOut: true
       });
 
       if (option) {
@@ -76,6 +82,8 @@ export class Wysiwyg {
           await this.addMarkup(MarkupType.codeblock);
         } else if (option.label === qpItems[5].label) {
           await this.addMarkup(MarkupType.blockquote);
+        } else if (option.label === qpItems[6].label) {
+          await this.addMarkup(MarkupType.strikethrough);
         }
       }
     }));
@@ -95,6 +103,10 @@ export class Wysiwyg {
     const selection = editor.selection;
     const hasTextSelection = !selection.isEmpty;
 
+    if (type === MarkupType.hyperlink) {
+      return this.addHyperlink(editor, selection);
+    }
+
     const markers = this.getMarkers(type);
     if (!markers) {
       return;
@@ -129,6 +141,51 @@ export class Wysiwyg {
     }
   }
 
+  /**
+   * Add a hyperlink to the content
+   * @returns void
+   */
+  private static async addHyperlink(editor: TextEditor, selection: Selection) {
+    const hasTextSelection = !selection.isEmpty;
+    const linkText = hasTextSelection ? editor.document.getText(selection) : "";
+
+    const link = await window.showInputBox({
+      title: "WYSIWYG Hyperlink", 
+      placeHolder: "Enter the URL", 
+      prompt: "Enter the URL",
+      value: linkText,
+      ignoreFocusOut: true
+    });
+
+    const text = await window.showInputBox({
+      title: "WYSIWYG Text",
+      prompt: "Enter the text for the hyperlink",
+      placeHolder: "Enter the text for the hyperlink",
+      value: linkText,
+      ignoreFocusOut: true
+    });
+
+    if (link) {
+      const txt = `[${text || link}](${link})`;
+
+      if (hasTextSelection) {
+        editor.edit(builder => {
+          builder.replace(selection, txt);
+        });
+      } else {
+        const crntSelection = selection.active;
+        const markerLength = txt.length;
+        const newPosition = crntSelection.with(crntSelection.line, crntSelection.character + markerLength);
+
+        await editor.edit(builder => {
+          builder.insert(newPosition, txt);
+        });
+
+        editor.selection = new Selection(newPosition, newPosition);
+      }
+    }
+  }
+
   /**
    * Check if the text will be wrapped
    * @param type 
@@ -159,10 +216,11 @@ export class Wysiwyg {
           "Heading 4", 
           "Heading 5", 
           "Heading 6"
-        ], {  
+        ], {
+          title: "Heading Level",
           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/commands/index.ts

@@ -1,3 +1,13 @@
 export * from './Article';
+export * from './Backers';
+export * from './Cache';
+export * from './Content';
+export * from './Dashboard';
+export * from './Diagnostics';
+export * from './Folders';
+export * from './Preview';
+export * from './Project';
 export * from './Settings';
 export * from './StatusListener';
+export * from './Template';
+export * from './Wysiwyg';

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/components/icons/MergeIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface IMergeIconProps {
+  className: string;
+}
+
+export const MergeIcon: React.FunctionComponent<IMergeIconProps> = ({className}: React.PropsWithChildren<IMergeIconProps>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" className={className}>
+      <path xmlns="http://www.w3.org/2000/svg" d="M7.586 8.00366L4 8.00366C3.44772 8.00366 3 7.55595 3 7.00366C3 6.45138 3.44772 6.00366 4 6.00366L8 6.00366C8.26509 6.00366 8.51933 6.10892 8.70685 6.2963L13.414 11H18.5845L15.2931 7.71103C14.9025 7.32065 14.9023 6.68748 15.2926 6.29681C15.683 5.90615 16.3162 5.90592 16.7068 6.2963L21.7068 11.2926C21.8945 11.4802 22 11.7346 22 11.9998C22 12.2651 21.8947 12.5195 21.7071 12.7071L16.7071 17.7071C16.3166 18.0976 15.6834 18.0976 15.2929 17.7071C14.9024 17.3166 14.9024 16.6834 15.2929 16.2929L18.5858 13H13.4142L8.70711 17.7071C8.51957 17.8947 8.26522 18 8 18H4C3.44772 18 3 17.5523 3 17C3 16.4477 3.44772 16 4 16H7.58579L11.5855 12.0003L7.586 8.00366Z" fill="currentcolor"/>
+    </svg>
+  );
+};

src/constants/DefaultFieldValues.ts

@@ -0,0 +1,5 @@
+
+
+export const DefaultFieldValues = {
+  faultyCustomPlaceholder: "<failed to process>"
+}

src/constants/Extension.ts

@@ -25,19 +25,24 @@ 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"),
   dashboardMedia: getCommandName("dashboard.media"),
   dashboardSnippets: getCommandName("dashboard.snippets"),
   dashboardData: getCommandName("dashboard.data"),
+  dashboardTaxonomy: getCommandName("dashboard.taxonomy"),
   dashboardClose: getCommandName("dashboard.close"),
   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
@@ -51,5 +56,23 @@ export const COMMAND_NAME = {
   unorderedlist: getCommandName("markup.unorderedlist"),
   orderedlist: getCommandName("markup.orderedlist"),
   taskList: getCommandName("markup.tasklist"),
+  hyperlink: getCommandName("markup.hyperlink"),
   options: getCommandName("markup.options"),
+
+  // Content types
+  generateContentType: getCommandName("contenttype.generate"),
+  addMissingFields: getCommandName("contenttype.addMissingFields"),
+  setContentType: getCommandName("contenttype.setContentType"),
+
+  // Git
+  gitSync: getCommandName("git.sync"),
+
+  // Authenticate
+  authenticate: getCommandName("authenticate"),
+
+  // Config
+  reloadConfig: getCommandName("config.reload"),
+
+  // Cache
+  clearCache: getCommandName("cache.clear"),
 };

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,25 @@
+
+
+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",
+    },
+    taxonomy: {
+      view: "dashboard.taxonomy.view"
+    }
+  }
+};

src/constants/FrameworkDetectors.ts

@@ -1,33 +1,101 @@
-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"
+    }
+  },
+  {
+    framework: {
+      name: "hexo",
+      dist: "public",
+      build: "npx hexo-cli generate"
+    },
+    requiredFiles: ["_config.js"],
+    requiredDependencies: ["hexo"],
+    commands: {
+      start: "npx hexo-cli server"
     }
   }
 ];

src/constants/GeneralCommands.ts

@@ -0,0 +1,13 @@
+
+
+export const GeneralCommands = {
+  toWebview: {
+    setMode: "setMode",
+    gitSyncingStart: "gitSyncingStart",
+    gitSyncingEnd: "gitSyncingEnd",
+  },
+  toVSCode: {
+    openLink: "openLink",
+    gitSync: "gitSync",
+  }
+};

src/constants/Links.ts

@@ -2,5 +2,7 @@ export const GITHUB_LINK = "https://github.com/estruyf/vscode-front-matter";
 export const ISSUE_LINK = "https://github.com/estruyf/vscode-front-matter/issues";
 export const SPONSOR_LINK = "https://github.com/sponsors/estruyf";
 export const REVIEW_LINK = "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details";
+export const DOCUMENTATION_LINK = "https://frontmatter.codes/docs";
+export const DOCUMENTATION_SETTINGS_LINK = "https://frontmatter.codes/docs/settings";
 
 export const SENTRY_LINK = "https://1ac45704bbe74264a7b4674bdc2abf48@o1022172.ingest.sentry.io/5988293";

src/constants/NotificationType.ts

@@ -0,0 +1,5 @@
+
+
+export const NOTIFICATION_TYPE = {
+  requiredFieldValidation: "requiredFieldValidation",
+}

src/constants/PreviewCommands.ts

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

src/constants/StaticFolderPlaceholder.ts

@@ -0,0 +1,8 @@
+
+
+export const STATIC_FOLDER_PLACEHOLDER = {
+  hexo: {
+    postsFolder: "source/_posts",
+    placeholder: "hexo:post_asset_folder",
+  }
+}

src/constants/TelemetryEvent.ts

@@ -10,6 +10,7 @@ export const TelemetryEvent = {
   openMediaDashboard: 'openMediaDashboard',
   openDataDashboard: 'openDataDashboard',
   openSnippetsDashboard: 'openSnippetsDashboard',
+  openTaxonomyDashboard: 'openTaxonomyDashboard',
   closeDashboard: 'closeDashboard',
 
   // Other actions
@@ -21,10 +22,17 @@ export const TelemetryEvent = {
   uploadMedia: 'uploadMedia',
   refreshMedia: 'refreshMedia',
   deleteMedia: 'deleteMedia',
+  insertContentSnippet: 'insertContentSnippet',
   insertMediaToContent: 'insertMediaToContent',
+  insertFileToContent: 'insertFileToContent',
   updateMediaMetadata: 'updateMediaMetadata',
   openExplorerView: 'openExplorerView',
 
+  // Content types
+  generateContentType: 'generateContentType',
+  addMissingFields: 'addMissingFields',
+  setContentType: 'setContentType',
+
   // Custom scripts
   runCustomScript: 'runCustomScript',
   runMediaScript: 'runMediaScript',
@@ -35,4 +43,8 @@ export const TelemetryEvent = {
   webviewDataView: 'webviewDataView',
   webviewContentsView: 'webviewContentsView',
   webviewSnippetsView: 'webviewSnippetsView',
+  webviewTaxonomyDashboard: 'webviewTaxonomyDashboard',
+
+  // Git
+  gitSync: 'gitSync',
 };

src/constants/context.ts

@@ -1,6 +1,4 @@
 export const CONTEXT = {
-  canInit: "frontMatter:CanInit",
-  initialized: "frontMatter:Initialized",
   canOpenPreview: "frontMatter:CanOpenPreview",
   canOpenDashboard: "frontMatter:CanOpenDashboard",
   isEnabled: "frontMatter:enabled",
@@ -8,4 +6,11 @@ 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",
+
+  isGitEnabled: "frontMatter:git:enabled",
 };

src/constants/index.ts

@@ -1,12 +1,18 @@
 export * from './ContentType';
+export * from './DefaultFieldValues';
 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 './NotificationType';
+export * from './PreviewCommands';
+export * from './StaticFolderPlaceholder';
 export * from './TelemetryEvent';
 export * from './charCode';
 export * from './charMap';

src/constants/settings.ts

@@ -3,6 +3,9 @@ export const EXTENSION_NAME = "Front Matter";
 export const CONFIG_KEY = "frontMatter";
 
 export const SETTING_GLOBAL_NOTIFICATIONS = "global.notifications";
+export const SETTING_GLOBAL_NOTIFICATIONS_DISABLED = "global.disabledNotifications";
+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 +33,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 +60,14 @@ 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_CONTENT_HIDE_FRONTMATTER = "content.hideFm";
+export const SETTING_CONTENT_HIDE_FRONTMATTER_MESSAGE = "content.hideFmMessage";
+
+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_DASHBOARD_CONTENT_PAGINATION = "dashboard.content.pagination";
 
 export const SETTING_DATA_FILES = "data.files";
 export const SETTING_DATA_FOLDERS = "data.folders";
@@ -70,6 +80,9 @@ export const SETTING_FRAMEWORK_START = "framework.startCommand";
 
 export const SETTING_SITE_BASEURL = "site.baseURL";
 
+export const SETTING_GIT_ENABLED = "git.enabled";
+export const SETTING_GIT_COMMIT_MSG = "git.commitMessage";
+
 /**
  * @deprecated
  */
@@ -84,3 +97,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,14 @@
 export enum DashboardCommand {
   loading = "loading",
   pages = "pages",
+  searchPages = "searchPages",
   settings = "settings",
   media = "media",
   viewData = "viewData",
   mediaUpdate = "mediaUpdate",
-  dataFileEntries = "dataFileEntries"
+  dataFileEntries = "dataFileEntries",
+  searchReady = "searchReady",
+
+  // Taxonomy dashboard
+  setTaxonomyData = "setTaxonomyData",
 }

src/dashboardWebView/DashboardMessage.ts

@@ -1,32 +1,62 @@
 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',
+  createHexoAssetFolder = 'createHexoAssetFolder',
+
+  // Data dashboard
   getDataEntries = 'getDataEntries',
   putDataEntries = 'putDataEntries',
-  sendTelemetry = 'sendTelemetry',
+
+  // Snippets dashboard
   insertSnippet = 'insertSnippet',
   addSnippet = 'addSnippet',
   updateSnippet = 'updateSnippet',
+
+  // Taxonomy dashboard
+  getTaxonomyData = 'getTaxonomyData',
+  editTaxonomy = "editTaxonomy",
+  mergeTaxonomy = "mergeTaxonomy",
+  deleteTaxonomy = "deleteTaxonomy",
+  addToTaxonomy = "addToTaxonomy",
+  createTaxonomy = "createTaxonomy",
+  importTaxonomy = "importTaxonomy",
+  moveTaxonomy = "moveTaxonomy",
+
+  // Other
+  getTheme = 'getTheme',
+  updateSetting = 'updateSetting',
+  setState = 'setState',
+  runCustomScript = 'runCustomScript',
+  sendTelemetry = 'sendTelemetry',
+  logError = 'logError',
 }

src/dashboardWebView/components/App.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Spinner } from './Spinner';
+import useMessages from '../hooks/useMessages';
+import useDarkMode from '../../hooks/useDarkMode';
+import { WelcomeScreen } from './WelcomeScreen';
+import { useRecoilValue } from 'recoil';
+import { DashboardViewSelector, ModeAtom } from '../state';
+import { Contents } from './Contents/Contents';
+import { Media } from './Media/Media';
+import { DataView } from './DataView';
+import { Snippets } from './SnippetsView/Snippets';
+import { FEATURE_FLAG } from '../../constants';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { TaxonomyView } from './TaxonomyView';
+import { Route, Routes, useNavigate } from 'react-router-dom';
+import { routePaths } from '..';
+import { useEffect, useMemo } from 'react';
+import { UnknownView } from './UnknownView';
+import { ErrorBoundary } from '@sentry/react';
+import { ErrorView } from './ErrorView';
+import { DashboardMessage } from '../DashboardMessage';
+
+export interface IAppProps {
+  showWelcome: boolean;
+}
+
+export const App: React.FunctionComponent<IAppProps> = ({showWelcome}: React.PropsWithChildren<IAppProps>) => {
+  const { loading, pages, settings } = useMessages();
+  const view = useRecoilValue(DashboardViewSelector);
+  const mode = useRecoilValue(ModeAtom);
+  const navigate = useNavigate();
+  useDarkMode();
+
+  const viewState: any = Messenger.getState() || {};
+
+  const isAllowed = (features: string[], flag: string) => {
+    if (!features ||( features.length > 0 && !features.includes(flag))) {
+      return false;
+    }
+
+    return true;
+  }
+
+  const allowDataView = useMemo(() => {
+    return isAllowed(mode?.features || [], FEATURE_FLAG.dashboard.data.view)
+  }, [mode?.features]);
+
+  const allowTaxonomyView = useMemo(() => {
+    return isAllowed(mode?.features || [], FEATURE_FLAG.dashboard.taxonomy.view)
+  }, [mode?.features]);
+
+  useEffect(() => {
+    if (view && routePaths[view]) {
+      navigate(routePaths[view]);
+      return;
+    }
+
+    navigate(routePaths[view]);
+  }, [view]);
+
+  if (!settings) {
+    return <Spinner />;
+  }
+
+  if (showWelcome || viewState.isWelcomeConfiguring) {
+    return <WelcomeScreen settings={settings} />;
+  }
+
+  if (!settings.initialized || settings.contentFolders?.length === 0) {
+    return <WelcomeScreen settings={settings} />;
+  }
+
+  return (
+    <ErrorBoundary
+      fallback={(<ErrorView />)}
+      onError={(error: Error, componentStack: string, eventId: string) => {
+        Messenger.send(DashboardMessage.logError, `Event ID: ${eventId}
+Message: ${error.message}
+
+Stack: ${componentStack}`);
+      }}>
+      <main className={`h-full w-full`}>
+        <Routes>
+          <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
+          <Route path={routePaths.contents} element={<Contents pages={pages} loading={loading} />} />
+          <Route path={routePaths.media} element={<Media />} />
+          <Route path={routePaths.snippets} element={<Snippets />} />
+          
+          {
+            allowDataView && <Route path={routePaths.data} element={<DataView />} />
+          }
+
+          {
+            allowTaxonomyView && <Route path={routePaths.taxonomy} element={<TaxonomyView pages={pages} />} />
+          }
+
+          <Route path={`*`} element={<UnknownView />} />
+        </Routes>
+      </main>
+    </ErrorBoundary>
+  );
+};

src/dashboardWebView/components/ChoiceButton.tsx

@@ -27,36 +27,40 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({onCli
         {title}
       </button>
 
-      <Menu as="span" className="-ml-px relative block">
-        <Menu.Button 
-          className="h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
-          disabled={disabled}>
-          <span className="sr-only">Open options</span>
-          <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
-        </Menu.Button>
+      {
+        choices.length > 0 && (
+          <Menu as="span" className="-ml-px relative block">
+            <Menu.Button 
+              className="h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
+              disabled={disabled}>
+              <span className="sr-only">Open options</span>
+              <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+            </Menu.Button>
 
-        <MenuItems widthClass={`w-56`}>
-          <div className="py-1">
-            {choices.map((choice, idx) => (
-              <MenuItem 
-                key={idx}
-                title={(
-                  choice.icon ? (
-                    <div className="flex items-center">
-                      {choice.icon}
-                      <span>{choice.title}</span>
-                    </div>
-                  ) : (
-                    choice.title
-                  )
-                )} 
-                value={null}
-                onClick={choice.onClick}
-                disabled={choice.disabled} />
-            ))}
-          </div>
-        </MenuItems>
-      </Menu>
+            <MenuItems widthClass={`w-56`} disablePopper>
+              <div className="py-1">
+                {choices.map((choice, idx) => (
+                  <MenuItem 
+                    key={idx}
+                    title={(
+                      choice.icon ? (
+                        <div className="flex items-center">
+                          {choice.icon}
+                          <span>{choice.title}</span>
+                        </div>
+                      ) : (
+                        choice.title
+                      )
+                    )} 
+                    value={null}
+                    onClick={choice.onClick}
+                    disabled={choice.disabled} />
+                ))}
+              </div>
+            </MenuItems>
+          </Menu>
+        )
+      }
     </span>
   );
 };

src/dashboardWebView/components/Contents/ContentActions.tsx

@@ -0,0 +1,120 @@
+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';
+import { usePopper } from 'react-popper';
+import { useState } from 'react';
+
+export interface IContentActionsProps {
+  title: string;
+  path: string;
+  scripts: CustomScript[] | undefined;
+  listView?: boolean;
+  onOpen: () => void;
+}
+
+export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({ title, path, scripts, onOpen, listView }: React.PropsWithChildren<IContentActionsProps>) => {
+  const [ showDeletionAlert, setShowDeletionAlert ] = React.useState(false);
+  
+  const [referenceElement, setReferenceElement] = useState<any>(null);
+  const [popperElement, setPopperElement] = useState<any>(null);
+  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
+    placement: listView ? 'right-start' : 'bottom-end',
+    strategy: 'fixed'
+  })
+  
+  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 && !script.hidden).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={`${listView ? '' : '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 ${listView ? '' : 'p-2 -mt-4'}`}>
+          
+          <Menu as="div" className={`relative flex text-left ${listView ? '' : 'z-10'}`}>
+            {
+              !listView && (
+                <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>
+              )
+            }
+
+            <div ref={setReferenceElement} className={`flex`}>
+              <ActionMenuButton title={`Menu`} />
+            </div>
+
+            <div className='menu_items__wrapper z-20' ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+              <MenuItems updatePopper={forceUpdate || undefined} widthClass='w-44' marginTopClass={listView ? '' : ''}>
+                <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>
+            </div>
+          </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,71 +3,151 @@ 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 escapedTitle = useMemo(() => {
+    if (title && typeof title !== 'string') {
+      return '<invalid title>';
+    }
+
+    return title;
+  }, [title]);
+
+  const escapedDescription = useMemo(() => {
+    if (description && typeof description !== 'string') {
+      return '<invalid description>';
+    }
+
+    return description;
+  }, [description]);
   
   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;
+    let tagsValue = [];
+
+    if (tagField === "tags") {
+      tagsValue = pageData.fmTags;
+    } else if (tagField === "categories") {
+      tagsValue = pageData.fmCategories;
+    } else {
+      tagsValue = pageData[tagField] || [];
+    }
+
+    if (typeof tagsValue === "string") {
+      return [tagsValue];
+    } else if (Array.isArray(tagsValue)) {
+      return tagsValue;
+    }
+    
+    return [];
+  }, [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`}
-                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">
+        <div className={`group 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`}>
+          
+          <button onClick={openFile} className="relative h-36 w-full overflow-hidden border-b border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200 cursor-pointer">
             {
               pageData[PREVIEW_IMAGE_FIELD] ? (
-                <img src={`${pageData[PREVIEW_IMAGE_FIELD]}`} alt={title} className="absolute inset-0 h-full w-full object-cover" loading="lazy" />
+                <img src={`${pageData[PREVIEW_IMAGE_FIELD]}`} alt={escapedTitle} className="absolute inset-0 h-full w-full object-cover" loading="lazy" />
               ) : (
                 <div className={`flex items-center justify-center bg-whisper-500 dark:bg-vulcan-200 dark:group-hover:bg-vulcan-100`}>
                   <MarkdownIcon className={`h-32 text-vulcan-100 dark:text-whisper-100`} />
                 </div>
               )
             }
-          </div>
+          </button>
 
-          <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>
+            <button onClick={openFile} className={`text-left block`}><h2 className="mt-2 mb-2 font-bold">{escapedTitle}</h2></button>
 
-            <p className="text-xs text-vulcan-200 dark:text-whisper-800">{description}</p>
+            <button onClick={openFile} className={`text-left block`}><p className="text-xs text-vulcan-200 dark:text-whisper-800">{escapedDescription}</p></button>
+
+            {
+              tags && tags.length > 0 && (
+                <div className="mt-2">
+                  {
+                    tags.map((tag, index) => (
+                      tag && (
+                        <span 
+                          key={index} 
+                          className="inline-block mr-1 mt-1 text-[#5D561D] dark:text-[#F0ECD0] text-xs">
+                          #{tag}
+                        </span>
+                      )
+                    ))
+                  }
+                </div>
+              )
+            }
           </div>
-        </button>
+        </div>
       </li>
     );
   } else if (view === DashboardViewType.List) {
     return (
       <li className="relative">
-        <button className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b border-gray-300 hover:bg-gray-200 dark:border-vulcan-50 dark:hover:bg-vulcan-50 hover:bg-opacity-70`} onClick={openFile}>
-          <div className="col-span-8 font-bold truncate">
-            {title}
+        <div className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b border-gray-300 hover:bg-gray-200 dark:border-vulcan-50 dark:hover:bg-vulcan-50 hover:bg-opacity-70`}>
+          <div className="col-span-8 font-bold truncate flex items-center space-x-4">
+            <button 
+              title={`Open: ${escapedTitle}`} 
+              onClick={openFile}>
+              {escapedTitle}
+            </button>
+
+            <ContentActions 
+              title={escapedTitle}
+              path={fmFilePath}
+              scripts={settings?.scripts}
+              onOpen={openFile}
+              listView />
           </div>
           <div className="col-span-2">
             <DateField value={date} />
           </div>
           <div className="col-span-2">
-            <Status draft={draft} />
+            { draftField && draftField.name && <Status draft={pageData[draftField.name]} /> }
           </div>
-        </button>
+        </div>
       </li>
     );
   }
 
   return null;
-};
+};

src/dashboardWebView/components/Contents/Overview.tsx

@@ -1,15 +1,17 @@
 import { Disclosure } from '@headlessui/react';
 import {ChevronRightIcon} from '@heroicons/react/solid';
 import * as React from 'react';
+import { useCallback, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { groupBy } from '../../../helpers/GroupBy';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { GroupOption } from '../../constants/GroupOption';
 import { Page } from '../../models/Page';
 import { Settings } from '../../models/Settings';
-import { GroupingSelector } from '../../state';
+import { GroupingSelector, PageAtom } from '../../state';
 import { Item } from './Item';
 import { List } from './List';
+import usePagination from '../../hooks/usePagination';
 
 export interface IOverviewProps {
   pages: Page[];  
@@ -18,6 +20,24 @@ export interface IOverviewProps {
 
 export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settings}: React.PropsWithChildren<IOverviewProps>) => {
   const grouping = useRecoilValue(GroupingSelector);
+  const page = useRecoilValue(PageAtom);
+  const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
+
+  const pagedPages = useMemo(() => {
+    if (pageSetNr) {
+      return pages.slice(page * pageSetNr, ((page + 1) * pageSetNr));
+    }
+
+    return pages;
+  }, [pages, page, pageSetNr]);
+
+  const groupName = useCallback((groupId, groupedPages) => {
+    if (grouping === GroupOption.Draft) {
+      return `${groupId} (${groupedPages[groupId].length})`;
+    }
+
+    return `${GroupOption[grouping]}: ${groupId} (${groupedPages[groupId].length})`;
+  }, [grouping])
 
   if (!pages || !pages.length) {
     return (
@@ -25,7 +45,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>
             ) : (
               <>
@@ -58,7 +78,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settin
                       <ChevronRightIcon
                         className={`w-8 h-8 mr-1 ${open ? "transform rotate-90" : ""}`}
                       />
-                      {GroupOption[grouping]}: {groupId} ({groupedPages[groupId].length})
+                      { groupName(groupId, groupedPages) }
                     </h2>
                   </Disclosure.Button>
                   
@@ -80,7 +100,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settin
 
   return (
     <List>
-      {pages.map((page, idx) => (
+      {pagedPages.map((page, idx) => (
         <Item key={`${page.slug}-${idx}`} {...page} />
       ))}
     </List>

src/dashboardWebView/components/Dashboard.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { Spinner } from './Spinner';
-import useMessages from '../hooks/useMessages';
-import useDarkMode from '../../hooks/useDarkMode';
-import { WelcomeScreen } from './WelcomeScreen';
-import { useRecoilValue } from 'recoil';
-import { DashboardViewSelector } 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';
-
-export interface IDashboardProps {
-  showWelcome: boolean;
-}
-
-export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome}: React.PropsWithChildren<IDashboardProps>) => {
-  const { loading, pages, settings } = useMessages();
-  const view = useRecoilValue(DashboardViewSelector);
-  useDarkMode();
-
-  if (!settings) {
-    return <Spinner />;
-  }
-
-  if (showWelcome) {
-    return <WelcomeScreen settings={settings} />;
-  }
-
-  if (!settings.initialized || settings.folders?.length === 0) {
-    return <WelcomeScreen settings={settings} />;
-  }
-
-  if (view === NavigationType.Snippets) {
-    return (
-      <main className={`h-full w-full`}>
-        <Snippets />
-      </main>
-    );
-  } 
-  
-  if (view === NavigationType.Media) {
-    return (
-      <main className={`h-full w-full`}>
-        <Media />
-      </main>
-    );
-  }
-
-  if (view === NavigationType.Data) {
-    return (
-      <main className={`h-full w-full`}>
-        <DataView />
-      </main>
-    );
-  }
-
-  return (
-    <main className={`h-full w-full`}>
-      <Contents pages={pages} loading={loading} />
-    </main>
-  );
-};

src/dashboardWebView/components/DataView/DataView.tsx

@@ -3,7 +3,7 @@ import { Header } from '../Header';
 import { useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
 import { DataForm } from './DataForm';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DataFile } from '../../../models/DataFile';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
@@ -20,13 +20,14 @@ import { ToastContainer, toast, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { DataType } from '../../../models/DataType';
 import { TelemetryEvent } from '../../../constants';
+import { NavigationItem } from '../Layout';
 
 export interface IDataViewProps {}
 
 export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.PropsWithChildren<IDataViewProps>) => {
   const [ selectedData, setSelectedData ] = useState<DataFile | null>(null);
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
-  const [ dataEntries, setDataEntries ] = useState<any[] | null>(null);
+  const [ dataEntries, setDataEntries ] = useState<any | any[] | null>(null);
   const settings = useRecoilValue(SettingsSelector);
 
   const setSchema = (dataFile: DataFile) => {
@@ -56,6 +57,12 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
 
   
   const onSubmit = useCallback((data: any) => {
+    if (selectedData?.singleEntry) {
+      // Needs to add a single entry
+      updateData(data);
+      return;
+    }
+
     const dataClone: any[] = Object.assign([], dataEntries);
     if (selectedIndex !== null && selectedIndex !== undefined) {
       dataClone[selectedIndex] = data;
@@ -101,6 +108,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
     });
   }, [selectedData]);
 
+  const dataEntry = useMemo(() => {
+    if (selectedData?.singleEntry) {
+      return dataEntries || {};
+    }
+
+    return (dataEntries && selectedIndex !== null && selectedIndex !== undefined) ? dataEntries[selectedIndex] : null;
+  }, [selectedData, , dataEntries, selectedIndex]);
+
   useEffect(() => {
     Messenger.listen(messageListener);
     
@@ -149,15 +164,14 @@ 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) => (
-                          <button
-                            key={dataFile.id}
-                            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'}`}
+                        dataFiles.map((dataFile, idx) => (
+                          <NavigationItem
+                            key={`${dataFile.id}-${idx}`}
+                            isSelected={selectedData?.id === dataFile.id}
                             onClick={() => setSchema(dataFile)}>
                             <ChevronRightIcon className='-ml-1 w-5 mr-2' />
                             <span>{dataFile.title}</span>
-                          </button>
+                          </NavigationItem>
                         )
                       ))
                     }
@@ -171,49 +185,53 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
               {
                 selectedData ? (
                   <>
-                    <div className={`w-1/3 py-6 px-4 flex-1 border-r border-gray-200 dark:border-vulcan-300 overflow-auto`}>
-                      <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Your {selectedData.title.toLowerCase()} data items</h2>
+                    {
+                      !selectedData.singleEntry && (
+                        <div className={`w-1/3 py-6 px-4 flex-1 border-r border-gray-200 dark:border-vulcan-300 overflow-auto`}>
+                          <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Your {selectedData?.title?.toLowerCase() || ""} data items</h2>
 
-                      <div className='py-4'>
-                        {
-                          (dataEntries && dataEntries.length > 0) ? (
-                            <>
-                              <Container onSortEnd={onSortEnd} useDragHandle>
-                                {
-                                  (dataEntries || []).map((dataEntry, idx) => (
-                                    <SortableItem 
-                                      key={dataEntry[selectedData.labelField] || `entry-${idx}`}
-                                      value={dataEntry[selectedData.labelField] || `Entry ${idx+1}`}
-                                      index={idx}
-                                      crntIndex={idx}
-                                      selectedIndex={selectedIndex}
-                                      onSelectedIndexChange={(index: number) => setSelectedIndex(index)}
-                                      onDeleteItem={deleteItem}
-                                      />
-                                  ))
-                                }
-                              </Container>
-                              <Button
-                                className='mt-4'
-                                onClick={() => setSelectedIndex(null)}>
-                                Add a new entry
-                              </Button>
-                            </>
-                          ) : (
-                            <div className={`flex flex-col items-center justify-center`}>
-                              <p className={`text-gray-500 dark:text-whisper-900`}>No {selectedData.title.toLowerCase()} data entries found</p>
-                            </div>
-                          )
-                        }
-                      </div>
-                    </div>
-                    <div className={`w-2/3 py-6 px-4 overflow-auto`}>
+                          <div className='py-4'>
+                            {
+                              (dataEntries && dataEntries.length > 0) ? (
+                                <>
+                                  <Container onSortEnd={onSortEnd} useDragHandle>
+                                    {
+                                      (dataEntries as any[] || []).map((dataEntry, idx) => (
+                                        <SortableItem 
+                                          key={dataEntry[selectedData.labelField] || `entry-${idx}`}
+                                          value={dataEntry[selectedData.labelField] || `Entry ${idx+1}`}
+                                          index={idx}
+                                          crntIndex={idx}
+                                          selectedIndex={selectedIndex}
+                                          onSelectedIndexChange={(index: number) => setSelectedIndex(index)}
+                                          onDeleteItem={deleteItem}
+                                          />
+                                      ))
+                                    }
+                                  </Container>
+                                  <Button
+                                    className='mt-4'
+                                    onClick={() => setSelectedIndex(null)}>
+                                    Add a new entry
+                                  </Button>
+                                </>
+                              ) : (
+                                <div className={`flex flex-col items-center justify-center`}>
+                                  <p className={`text-gray-500 dark:text-whisper-900`}>No {selectedData.title.toLowerCase()} data entries found</p>
+                                </div>
+                              )
+                            }
+                          </div>
+                        </div>
+                      )
+                    }
+                    <div className={`${selectedData.singleEntry ? "w-full" : "w-2/3"} py-6 px-4 overflow-auto`}>
                       <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>Create or modify your {selectedData.title.toLowerCase()} data</h2>
                       {
                         selectedData ? (
                           <DataForm 
                             schema={selectedData?.schema} 
-                            model={(dataEntries && selectedIndex !== null && selectedIndex !== undefined) ? dataEntries[selectedIndex] : null} 
+                            model={dataEntry} 
                             onSubmit={onSubmit}
                             onClear={() => setSelectedIndex(null)} />
                         ) : (
@@ -234,7 +252,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
               <DatabaseIcon className='w-32 h-32' />
               <p className='text-3xl mt-2'>No data files found</p>
               <p className='text-xl mt-4'>
-                <a className={`text-teal-700 hover:text-teal-900`} href={`https://frontmatter.codes/docs/dashboard#data-files-view`} title={`Read read more to get started using data files`}>Read read more to get started using data files</a></p>
+                <a className={`text-teal-700 hover:text-teal-900`} href={`https://frontmatter.codes/docs/dashboard#data-files-view`} title={`Read more to get started using data files`}>Read more to get started using data files</a></p>
             </div>
           </div>
         )
@@ -245,4 +263,4 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
       <ToastContainer />
     </div>
   );
-};
+};

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/ErrorView/index.tsx

@@ -0,0 +1,14 @@
+import { ExclamationIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+
+export interface IErrorViewProps {}
+
+export const ErrorView: React.FunctionComponent<IErrorViewProps> = (props: React.PropsWithChildren<IErrorViewProps>) => {
+  return (
+    <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
+      <ExclamationIcon className="w-24 h-24 text-red-500" />
+      <p className='text-xl'>Sorry, something went wrong.</p>
+      <p className='text-base'>Please close the dashboard and try again.</p>
+    </main>
+  );
+};

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -38,14 +38,18 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
         }
       }
 
+      let valid = false;
       for (let i = 0; i < contentFolders.length; i++) {
         const folder = contentFolders[i];
         const contentFolder = parseWinPath(folder.path) as string;
         const relContentPath = folderPath.replace(contentFolder, '');
-        return relContentPath.length > 1 && folderPath.startsWith(contentFolder);
+
+        if (!valid) {
+          valid = relContentPath.length > 1 && folderPath.startsWith(contentFolder);
+        }
       }
 
-      return false;
+      return valid;
     };
 
     if (!selectedFolder) {

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -4,6 +4,8 @@ import { useRecoilValue, useResetRecoilState } from 'recoil';
 import { FolderSelector, TagSelector, CategorySelector, SortingAtom, FolderAtom, DEFAULT_FOLDER_STATE, TagAtom, CategoryAtom, DEFAULT_TAG_STATE, DEFAULT_CATEGORY_STATE } from '../../state';
 
 import { DefaultValue } from 'recoil';
+import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
 
 export const guardRecoilDefaultValue = (
   candidate: any
@@ -34,7 +36,7 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (props:
     resetCategory();
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (folder !== DEFAULT_FOLDER_STATE || tag !== DEFAULT_TAG_STATE || category !== DEFAULT_CATEGORY_STATE) {
       setShow(true);
     } else {

src/dashboardWebView/components/Header/Filter.tsx

@@ -29,7 +29,7 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({label, activeItem
           )} 
           title={activeItem || DEFAULT_VALUE} />
 
-        <MenuItems>
+        <MenuItems disablePopper>
           <MenuItem 
               title={DEFAULT_VALUE}
               value={null}

src/dashboardWebView/components/Header/FilterInput.tsx

@@ -0,0 +1,45 @@
+import { SearchIcon, XCircleIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+
+export interface IFilterInputProps {
+  placeholder: string;
+  value: string;
+  isReady: boolean;
+  autoFocus: boolean;
+  onReset?: () => void;
+  onChange: (value: string) => void;
+}
+
+export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({ placeholder, value, isReady, autoFocus, onReset, onChange}: React.PropsWithChildren<IFilterInputProps>) => {
+  return (
+    <div className="flex space-x-4 flex-1">
+      <div className="min-w-0">
+        <label htmlFor="search" className="sr-only">Search</label>
+        <div className="relative flex justify-center">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+          </div>
+
+          <input
+            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 appearance-none disabled:opacity-50`}
+            placeholder={placeholder || "Search"}
+            value={value}
+            autoFocus={autoFocus}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
+            disabled={!isReady}
+          />
+
+          {
+            value && onReset && (
+              <button onClick={onReset} 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>
+    </div>
+  );
+};

src/dashboardWebView/components/Header/Folders.tsx

@@ -22,7 +22,7 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({}: React.PropsW
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
 
-        <MenuItems>
+        <MenuItems disablePopper>
           <MenuItem 
             title={DEFAULT_TYPE}
             value={null}

src/dashboardWebView/components/Header/Grouping.tsx

@@ -7,7 +7,7 @@ import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
 export interface IGroupingProps {}
 
-export const groupOptions = [
+export const GROUP_OPTIONS = [
   { name: "None", id: GroupOption.none },
   { name: "Year", id: GroupOption.Year },
   { name: "Draft/Published", id: GroupOption.Draft },
@@ -16,15 +16,15 @@ export const groupOptions = [
 export const Grouping: React.FunctionComponent<IGroupingProps> = ({}: React.PropsWithChildren<IGroupingProps>) => {
   const [ group, setGroup ] = useRecoilState(GroupingAtom);
 
-  const crntGroup = groupOptions.find(x => x.id === group);
+  const crntGroup = GROUP_OPTIONS.find(x => x.id === group);
 
   return (
     <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Group by`} title={crntGroup?.name || ""} />
 
-        <MenuItems>
-          {groupOptions.map((option) => (
+        <MenuItems disablePopper>
+          {GROUP_OPTIONS.map((option) => (
             <MenuItem 
               key={option.id}
               title={option.name}

src/dashboardWebView/components/Header/Header.tsx

@@ -9,8 +9,8 @@ import { Startup } from '../Startup';
 import { Navigation } from '../Navigation';
 import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
-import { useRecoilState, useResetRecoilState } from 'recoil';
-import { CategoryAtom, DashboardViewAtom, SortingAtom, TagAtom } from '../../state';
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
+import { CategoryAtom, GroupingSelector, SortingAtom, TagAtom } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
 import { MediaHeaderTop } from '../Media/MediaHeaderTop';
@@ -19,6 +19,14 @@ import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
 import { CustomScript } from '../../../models';
 import { LightningBoltIcon, PlusIcon } from '@heroicons/react/outline';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { routePaths } from '../..';
+import { useEffect, useMemo } from 'react';
+import { SyncButton } from './SyncButton';
+import { Pagination } from './Pagination';
+import { GroupOption } from '../../constants/GroupOption';
+import usePagination from '../../hooks/usePagination';
+import { PaginationStatus } from './PaginationStatus';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -31,11 +39,14 @@ export interface IHeaderProps {
   folders?: string[];
 }
 
-export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPages, folders, settings }: React.PropsWithChildren<IHeaderProps>) => {
+export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPages, settings }: React.PropsWithChildren<IHeaderProps>) => {
   const [ crntTag, setCrntTag ] = useRecoilState(TagAtom);
   const [ crntCategory, setCrntCategory ] = useRecoilState(CategoryAtom);
-  const [ view, setView ] = useRecoilState(DashboardViewAtom);
-  const resetSorting = useResetRecoilState(SortingAtom)
+  const grouping = useRecoilValue(GroupingSelector);
+  const resetSorting = useResetRecoilState(SortingAtom);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
 
   const createContent = () => {
     Messenger.send(DashboardMessage.createContent);
@@ -50,7 +61,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPage
   };
 
   const updateView = (view: NavigationType) => {
-    setView(view);
+    navigate(routePaths[view]);
     resetSorting();
   }
 
@@ -68,6 +79,59 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPage
     onClick: () => runBulkScript(s)
   }));
 
+  const choiceOptions = useMemo(() => {
+    const isEnabled = settings?.dashboardState?.contents?.templatesEnabled || false;
+    
+    if (isEnabled) {
+      return [
+        {
+          title: (
+            <div className='flex items-center'>
+              <PlusIcon className="w-4 h-4 mr-2" />
+              <span>Create by content type</span>
+            </div>
+          ),
+          onClick: createByContentType,
+          disabled: !settings?.initialized
+        }, {
+          title: (
+            <div className='flex items-center'>
+              <PlusIcon className="w-4 h-4 mr-2" />
+              <span>Create by template</span>
+            </div>
+          ),
+          onClick: createByTemplate,
+          disabled: !settings?.initialized
+        },
+        ...customActions
+      ];
+    }
+
+    return [];
+
+  }, [settings?.dashboardState?.contents?.templatesEnabled]);
+
+  useEffect(() => {
+    if (location.search) {
+      const searchParams = new URLSearchParams(location.search);
+      const taxonomy = searchParams.get("taxonomy");
+      const value = searchParams.get("value");
+
+      if (taxonomy && value) {
+        if (taxonomy === "tags") {
+          setCrntTag(value);
+        } else if (taxonomy === "categories") {
+          setCrntCategory(value);
+        }
+      }
+
+      return;
+    }
+
+    setCrntTag("");
+    setCrntCategory("");
+  }, [location.search]);
+
   return (
     <div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
 
@@ -76,39 +140,20 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPage
       </div>
 
       {
-        view === NavigationType.Contents && (
+        location.pathname === routePaths.contents && (
           <>
             <div className={`px-4 mt-3 mb-2 flex items-center justify-between`}>
               <Searchbox />
 
               <div className={`flex items-center justify-end space-x-4 flex-1`}>
                 <Startup settings={settings} />
+
+                <SyncButton />
                 
                 <ChoiceButton 
                   title={`Create content`} 
-                  choices={[
-                    {
-                      title: (
-                        <div className='flex items-center'>
-                          <PlusIcon className="w-4 h-4 mr-2" />
-                          <span>Create by content type</span>
-                        </div>
-                      ),
-                      onClick: createByContentType,
-                      disabled: !settings?.initialized
-                    }, {
-                      title: (
-                        <div className='flex items-center'>
-                          <PlusIcon className="w-4 h-4 mr-2" />
-                          <span>Create by template</span>
-                        </div>
-                      ),
-                      onClick: createByTemplate,
-                      disabled: !settings?.initialized
-                    },
-                    ...customActions
-                  ]} 
-                  onClick={createContent} 
+                  choices={choiceOptions} 
+                  onClick={createContent}
                   disabled={!settings?.initialized} />
               </div>
             </div>
@@ -136,12 +181,22 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPage
 
               <Sorting view={NavigationType.Contents} />
             </div>
+
+            {
+              (pageSetNr > 0) && (totalPages || 0) > pageSetNr && (!grouping || grouping === GroupOption.none) && (
+                <div className={`px-4 flex justify-between py-2 border-b border-gray-300 dark:border-vulcan-100`}>
+                  <PaginationStatus totalPages={totalPages || 0} />
+
+                  <Pagination totalPages={totalPages || 0} />
+                </div>
+              )
+            }
           </>
         )
       }
 
       {
-        view === NavigationType.Media && (
+        location.pathname === routePaths.media && (
           <>
             <MediaHeaderTop />
             

src/dashboardWebView/components/Header/Pagination.tsx

@@ -1,30 +1,41 @@
 import * as React from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { LIMIT } from '../../hooks/useMedia';
-import { MediaTotalSelector, PageAtom } from '../../state';
+import usePagination from '../../hooks/usePagination';
+import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 import { PaginationButton } from './PaginationButton';
 
-export interface IPaginationProps {}
+export interface IPaginationProps {
+  totalPages?: number;
+}
 
-export const Pagination: React.FunctionComponent<IPaginationProps> = (props: React.PropsWithChildren<IPaginationProps>) => {
+export const Pagination: React.FunctionComponent<IPaginationProps> = ({ totalPages }: React.PropsWithChildren<IPaginationProps>) => {
   const [ page, setPage ] = useRecoilState(PageAtom);
   const totalMedia = useRecoilValue(MediaTotalSelector);
+  const settings = useRecoilValue(SettingsAtom);
+  const { pageSetNr, totalPagesNr } = usePagination(settings?.dashboardState.contents.pagination, totalPages, totalMedia);
 
-  const totalPages = Math.ceil(totalMedia / LIMIT) - 1;
-
-  const getButtons = (): number[] => {
+  const getButtons = useCallback((): number[] => {
     const maxButtons = 5;
     const buttons: number[] = [];
     const start = page - maxButtons;
     const end = page + maxButtons;
 
     for (let i = start; i <= end; i++) {
-      if (i >= 0 && i <= totalPages) {
+      if (i >= 0 && i <= totalPagesNr) {
         buttons.push(i);
       }
     }
     return buttons;
-  };
+  }, [page, totalPagesNr]);
+
+  useEffect(() => {
+    setPage(0);
+  }, [pageSetNr]);
+
+  useEffect(() => {
+    setPage(0);
+  }, []);
   
   return (
     <div className="flex justify-between items-center sm:justify-end space-x-2 text-sm">
@@ -54,19 +65,19 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = (props: Rea
             setPage(button)
           }
           }
-          className={`${page === button ? 'bg-gray-200 px-2 text-vulcan-500' : 'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500'} max-h-8`}
+          className={`${page === button ? 'bg-gray-200 px-2 text-vulcan-500' : 'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500'} max-h-8 rounded-sm`}
         >{button + 1}</button>
       ))}
 
       <PaginationButton
         title="Next"
-        disabled={page >= totalPages}
+        disabled={page >= totalPagesNr}
         onClick={() => setPage(page + 1)} />
 
       <PaginationButton
         title="Last"
-        disabled={page >= totalPages}
-        onClick={() => setPage(totalPages)} />
+        disabled={page >= totalPagesNr}
+        onClick={() => setPage(totalPagesNr)} />
     </div>
   );
 };

src/dashboardWebView/components/Header/PaginationStatus.tsx

@@ -1,45 +1,32 @@
 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 { LIMIT } from '../../hooks/useMedia';
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+import usePagination from '../../hooks/usePagination';
+import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 
-export interface IPaginationStatusProps {}
+export interface IPaginationStatusProps {
+  totalPages?: number;
+}
 
-export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> = (props: React.PropsWithChildren<IPaginationStatusProps>) => {
+export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> = ({ totalPages }: 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 settings = useRecoilValue(SettingsAtom);
+  const { pageSetNr, totalItems } = usePagination(settings?.dashboardState.contents.pagination, totalPages || 0, totalMedia);
 
-  const getTotalPage = () => {
-    const mediaItems = ((page + 1) * LIMIT);
-    if (totalMedia < mediaItems) {
-      return totalMedia;
+  const totelItemsOnPage = useMemo(() => {
+    const items = ((page + 1) * pageSetNr);
+    if (totalItems < items) {
+      return totalItems;
     }
-    return mediaItems;
-  };
-
-  const refresh = () => {
-    setPage(0);
-    setSearch('');
-    Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
-  }
+    return totalItems;
+  }, [page, totalMedia, pageSetNr]);
 
   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
+        Showing <span className="font-medium">{(page * pageSetNr) + 1}</span> to <span className="font-medium">{totelItemsOnPage}</span> of{' '}
+        <span className="font-medium">{totalItems}</span> results
       </p>
     </div>
   );

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

@@ -18,14 +18,17 @@ export interface ISortingProps {
 }
 
 export const sortOptions: SortingOption[] = [
-  { name: "Published (asc)", id: SortOption.PublishedAsc, order: SortOrder.asc, type: SortType.date },
-  { name: "Published (desc)", id: SortOption.PublishedDesc, order: SortOrder.desc, type: SortType.date },
   { name: "Last modified (asc)", id: SortOption.LastModifiedAsc, order: SortOrder.asc, type: SortType.date },
   { name: "Last modified (desc)", id: SortOption.LastModifiedDesc, order: SortOrder.desc, type: SortType.date },
   { name: "By filename (asc)", id: SortOption.FileNameAsc, order: SortOrder.asc, type: SortType.string },
   { name: "By filename (desc)", id: SortOption.FileNameDesc, order: SortOrder.desc, type: SortType.string },
 ];
 
+const contentSortOptions: SortingOption[] = [
+  { name: "Published (asc)", id: SortOption.PublishedAsc, order: SortOrder.asc, type: SortType.date },
+  { name: "Published (desc)", id: SortOption.PublishedDesc, order: SortOrder.desc, type: SortType.date }
+];
+
 const mediaSortOptions: SortingOption[] = [
   { name: "Size (asc)", id: SortOption.SizeAsc, order: SortOrder.asc, type: SortType.number },
   { name: "Size (desc)", id: SortOption.SizeDesc, order: SortOrder.desc, type: SortType.number },
@@ -53,6 +56,8 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
 
   if (view === NavigationType.Media) {
     allOptions = [...allOptions, ...mediaSortOptions];
+  } else if (view === NavigationType.Contents) {
+    allOptions = [...contentSortOptions, ...allOptions];
   }
 
   allOptions = allOptions.sort(SortingHelpers.alphabetically("name"))
@@ -91,7 +96,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Sort by`} title={crntSort?.title || crntSort?.name || ""} disabled={!!searchValue} />
 
-        <MenuItems widthClass="w-48">
+        <MenuItems widthClass="w-48" disablePopper>
           {allOptions.map((option) => (
             <MenuItem 
               key={option.id}

src/dashboardWebView/components/Header/SyncButton.tsx

@@ -0,0 +1,55 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { EventData } from '@estruyf/vscode/dist/models';
+import { RefreshIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { GeneralCommands } from '../../../constants';
+import { SettingsSelector } from '../../state';
+
+export interface ISyncButtonProps {}
+
+export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (props: React.PropsWithChildren<ISyncButtonProps>) => {
+  const settings = useRecoilValue(SettingsSelector);
+  const [ isSyncing, setIsSyncing ] = useState(false);
+  
+  const pull = () => {
+    Messenger.send(GeneralCommands.toVSCode.gitSync);
+  };
+
+  const messageListener = (message: MessageEvent<EventData<any>>) => {
+    const { command, data } = message.data;
+
+    if (command === GeneralCommands.toWebview.gitSyncingStart) {
+      setIsSyncing(true);
+    } else if (command === GeneralCommands.toWebview.gitSyncingEnd) {
+      setIsSyncing(false);
+    }
+  };
+
+  useEffect(() => {
+    Messenger.listen(messageListener);
+
+    return () => {
+      Messenger.unlisten(messageListener);
+    }
+  }, []);
+
+  if (!settings?.git?.actions || !settings?.git.isGitRepo) {
+    return null;
+  }
+
+  return (
+    <div className='git_actions'>
+       <button
+        type="button"
+        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500"
+        onClick={pull}
+        disabled={isSyncing}
+      >
+        <RefreshIcon className={`w-4 h-4 mr-2 ${isSyncing ? 'animate-reverse-spin' : ''}`} aria-hidden="true" />
+        <span>Sync</span>
+      </button>
+    </div>
+  );
+};

src/dashboardWebView/components/Header/Tab.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { useRecoilValue } from 'recoil';
+import { useLocation } from 'react-router-dom';
 import { NavigationType } from '../../models';
-import { DashboardViewAtom } from '../../state';
 
 export interface ITabProps {
   navigationType: NavigationType;
@@ -9,11 +8,11 @@ export interface ITabProps {
 }
 
 export const Tab: React.FunctionComponent<ITabProps> = ({navigationType, onNavigate, children}: React.PropsWithChildren<ITabProps>) => {
-  const view = useRecoilValue(DashboardViewAtom);
+  const location = useLocation();
 
   return (
     <button 
-      className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 ${view === navigationType ? "border-vulcan-500 text-vulcan-500  dark:border-whisper-500 dark:text-whisper-500" : "text-gray-500 dark:text-gray-400"}`} 
+      className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 ${location.pathname === `/${navigationType}` ? "border-vulcan-500 text-vulcan-500  dark:border-whisper-500 dark:text-whisper-500" : "text-gray-500 dark:text-gray-400"}`} 
       type="button" 
       role="tab" 
       aria-controls="profile" 

src/dashboardWebView/components/Header/Tabs.tsx

@@ -1,9 +1,11 @@
-import { DatabaseIcon, PhotographIcon, ScissorsIcon } from '@heroicons/react/outline';
+import { DatabaseIcon, PhotographIcon, ScissorsIcon, TagIcon } 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,33 @@ 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>
+      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
+        <li className="mr-2" role="presentation">
+          <Tab
+            navigationType={NavigationType.Taxonomy} 
+            onNavigate={onNavigate}>
+            <TagIcon className={`h-6 w-auto mr-2`} /><span>Taxonomies</span>
+          </Tab>
+        </li>
+      </FeatureFlag>
     </ul>
   );
 };

src/dashboardWebView/components/Layout/NavigationBar.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export interface INavigationBarProps {
+  title?: string;
+  bottom?: JSX.Element;
+}
+
+export const NavigationBar: React.FunctionComponent<INavigationBarProps> = ({title, bottom, children}: React.PropsWithChildren<INavigationBarProps>) => {
+  return (
+    <aside className={`w-2/12 px-4 py-6 h-full flex flex-col flex-grow border-r border-gray-200 dark:border-vulcan-300`}>
+      {
+        title && <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>{title}</h2>
+      }
+
+      <nav className={`flex-1 py-4 -mx-4 h-full`}>
+        <div className={`divide-y divide-gray-200 dark:divide-vulcan-300 border-t border-b border-gray-200 dark:border-vulcan-300`}>
+          <div>
+            {children}
+          </div>
+        </div>
+      </nav>
+
+      {
+        bottom && bottom
+      }
+    </aside>
+  );
+};