Merge pull request #157 from estruyf/dev

Merge for v5.2.0 release
Release 5.2.0
2026-03-28 17:42:40 +01:00 · 2021-10-19 15:41:12 +02:00 · 2021-10-19 15:40:17 +02:00 · 2021-10-19 14:56:49 +02:00 · 2021-10-19 14:46:47 +02:00 · 2021-10-19 11:04:05 +02:00
272 changed files with 10862 additions and 1601 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "imageSize": 100,
+  "contributorsPerLine": 7,
+  "contributorsSortAlphabetically": false,
+  "badgeTemplate": "",
+  "contributorTemplate": "",
+  "types": {},
+  "skipCi": "true",
+  "contributors": []
+}
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: 'Issue: '
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: 'Enhancement: '
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
--- a/.github/ISSUE_TEMPLATE/feedback_request.md
+++ b/.github/ISSUE_TEMPLATE/feedback_request.md
@@ -0,0 +1,7 @@
+---
+name: Feedback
+about: Tell more on what you think
+title: 'Feedback: '
+labels: ''
+assignees: ''
+---
--- a/.github/ISSUE_TEMPLATE/showcase.md
+++ b/.github/ISSUE_TEMPLATE/showcase.md
@@ -0,0 +1,20 @@
+---
+name: Showcase
+about: Let us know that you are using Front Matter and we'll add you on our showcase page
+title: 'Showcase: '
+labels: 'showcase'
+assignees: ''
+---
+
+**Title you want to give your site**
+
+Define a clear title that will be used on the showcase page. Example: `Front Matter`.
+
+**Link to the site**
+
+A URL to the site to add.
+
+**A nice and clean description**
+
+Keep it simple. Just let us know which static-site generator you used, and other frameworks.
+
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '24 14 * * 5'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1
--- a/.github/workflows/release-beta.yml
+++ b/.github/workflows/release-beta.yml
@@ -0,0 +1,27 @@
+name: BETA Release
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  build:
+    name: "Build and release"
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install the dependencies
+        run: npm i
+      
+      - name: Prepare BETA
+        run: node scripts/beta-release.js $GITHUB_RUN_ID
+
+      - name: Publish
+        run: npx vsce publish -p ${{ secrets.VSCE_PAT }} --baseImagesUrl https://raw.githubusercontent.com/estruyf/vscode-front-matter/dev
+
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -19,10 +19,10 @@ jobs:

      - name: Install the dependencies
        run: npm i
-
-      - name: Install vsce
-        run: npm i -g vsce
+      
+      - name: Prepare MAIN release
+        run: node scripts/main-release.js

      - name: Publish
-        run: vsce publish -p ${{ secrets.VSCE_PAT }}
+        run: npx vsce publish -p ${{ secrets.VSCE_PAT }}

--- a/.templates/documentation.md
+++ b/.templates/documentation.md
@@ -0,0 +1,9 @@
+---
+title: 
+slug: 
+description: 
+date: 2019-08-22T15:20:28.000Z
+lastmod: 2019-08-22T15:20:28.000Z
+weight: 1
+type: documentation
+---
--- a/.vscode/recoil.code-snippets
+++ b/.vscode/recoil.code-snippets
@@ -0,0 +1,66 @@
+{
+	"Recoil Atom": {
+		"prefix": "sq-atom",
+		"body": [
+      "import { atom } from 'recoil';",
+      "",
+      "export const ${1:CollectionId}Atom = atom({",
+      "  key: '${1:CollectionId}Atom',",
+      "  default: 1",
+      "});"
+    ],
+    "description": "Creates a new atom",
+    "scope": "typescript"
+  },
+	"Recoil Selector (sync)": {
+		"prefix": "sq-selector-sync",
+		"body": [
+      "import { selector } from 'recoil';",
+      "",
+      "export const ${1:CollectionData}Selector = selector({",
+      "  key: '${1:CollectionData}Selector',",
+      "  get: ({get}) => {",
+      "    return get(${1:CollectionData}Atom);",
+      "  }",
+      "});"
+    ],
+    "description": "Creates a new synchronous selector",
+    "scope": "typescript"
+  },
+	"Recoil Selector (async)": {
+		"prefix": "sq-selector-async",
+		"body": [
+      "import { selector } from 'recoil';",
+      "",
+      "export const ${1:CollectionData}Selector = selector({",
+      "  key: '${1:CollectionData}Selector',",
+      "  get: async ({get}) => {",
+      "    return await dataFetch(get(${2:CollectionIdState}));",
+      "  }",
+      "});"
+    ],
+    "description": "Creates a new asynchronous selector",
+    "scope": "typescript"
+  },
+	"Recoil selectorFamily": {
+		"prefix": "sq-selector-fam",
+		"body": [
+      "import { selectorFamily } from 'recoil';",
+      "",
+      "export const ${1:CollectionData}Selector = selectorFamily({",
+      "  key: '${1:CollectionData}Selector',",
+      "  get: id => async () => {",
+      "    return await dataFetch({id});",
+      "  }",
+      "});"
+    ],
+    "description": "Creates a selectorFamily (same as selector, but used to provide parameters)",
+    "scope": "typescript"
+  },
+  "useTranslation": {
+    "prefix": ["sq-translation", "useTranslation"],
+    "body": "const { t: strings } = useTranslation();",
+    "description": "Include the translations",
+    "scope": "typescriptreact"
+  }
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,11 @@
        "out": true // set this to false to include "out" folder in search results
    },
    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
+    "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"
+    ]
 }
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -10,3 +10,11 @@ vsc-extension-quickstart.md
 **/*.ts
 webpack.config.js
 node_modules
+docs
+tailwind.config.js
+sample
+postcss.config.js
+.templates
+.github
+scripts
+.all-contributorsrc
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,124 @@
 # Change Log

+## [5.2.0] - 2021-10-19
+
+### 🎨 Enhancements
+
+- [#151](https://github.com/estruyf/vscode-front-matter/issues/151): Detect which site-generator or framework is used
+- [#152](https://github.com/estruyf/vscode-front-matter/issues/152): Automatically set setting based on the used site-generator or framework
+- [#154](https://github.com/estruyf/vscode-front-matter/issues/154): Bulk script support added
+- [#155](https://github.com/estruyf/vscode-front-matter/issues/155): Fallback image added for the images shown in the editor panel
+
+### 🐞 Fixes
+
+- [#153](https://github.com/estruyf/vscode-front-matter/issues/153): Support old date formatting for date-fns
+- [#156](https://github.com/estruyf/vscode-front-matter/issues/156): Fix for uploading media files into a new folder
+
+## [5.1.1] - 2021-10-14
+
+### 🐞 Fixes
+
+- [#149](https://github.com/estruyf/vscode-front-matter/issues/149): Fix panel rendering when incorrect type for keywords is provided
+
+## [5.1.0] - 2021-10-13
+
+### 🎨 Enhancements
+
+- [#141](https://github.com/estruyf/vscode-front-matter/issues/141): Allow content creation for page bundles or single files
+- [#145](https://github.com/estruyf/vscode-front-matter/issues/145): Moved folder registration settings to `frontmatter.json` file
+- [#147](https://github.com/estruyf/vscode-front-matter/issues/147): Error boundary added for metadata fields
+
+### 🐞 Fixes
+
+- Rendered more hooks than during the previous render in `FileList`
+- [#142](https://github.com/estruyf/vscode-front-matter/issues/142): Fix for unknown tags where it throws an error
+- [#143](https://github.com/estruyf/vscode-front-matter/issues/143): Fix for duplicate values in the file list
+- [#144](https://github.com/estruyf/vscode-front-matter/issues/144): Fix for `toISOString` does not exist on object
+- [#146](https://github.com/estruyf/vscode-front-matter/issues/146): Date parsing logic added with fallbacks
+
+## [5.0.0] - 2021-10-07 - [Release Notes](https://beta.frontmatter.codes/updates/v5.0.0)
+
+### ✨ New features
+
+- [#113](https://github.com/estruyf/vscode-front-matter/issues/113): Integrating a local DB for media metadata (caption, alt)
+- [#132](https://github.com/estruyf/vscode-front-matter/issues/132): Major changes to the media dashboard which allows you to navigate through all folders
+
+### 🎨 Enhancements
+
+- [#110](https://github.com/estruyf/vscode-front-matter/issues/110): Add support for workspaces with multiple folders
+- [#117](https://github.com/estruyf/vscode-front-matter/issues/117): Allow to specify a singleline of text in the metadata fields
+- [#119](https://github.com/estruyf/vscode-front-matter/issues/119): Multi-select support for choice fields
+- [#121](https://github.com/estruyf/vscode-front-matter/issues/121): Choice fields support ID/title objects as well as a regular string
+- [#122](https://github.com/estruyf/vscode-front-matter/issues/122): Update the filenames of your media
+- [#124](https://github.com/estruyf/vscode-front-matter/issues/124): Add new `isPreviewImage` property to the content type field to specify custom preview images
+- [#126](https://github.com/estruyf/vscode-front-matter/issues/126): Create new content from the available content types
+- [#127](https://github.com/estruyf/vscode-front-matter/issues/127): Title bar action added to open the dashboard
+- [#128](https://github.com/estruyf/vscode-front-matter/issues/128): Support for multi-select on image fields added
+- [#131](https://github.com/estruyf/vscode-front-matter/issues/131): Folder creation support added on media dashboard
+- [#134](https://github.com/estruyf/vscode-front-matter/issues/134): On startup, the extension checks if local settings can be promoted
+- [#135](https://github.com/estruyf/vscode-front-matter/issues/135): `Hidden` property added for field configuration
+- [#137](https://github.com/estruyf/vscode-front-matter/issues/137): Ask to move the `.templates` folder to the new `.frontmatter` folder
+
+### 🐞 Fixes
+
+- [#120](https://github.com/estruyf/vscode-front-matter/issues/120): Choice and number field not updating when set manually in front matter of the file
+- [#133](https://github.com/estruyf/vscode-front-matter/issues/133): Fix for overriding default content type settings
+
+## [4.0.1] - 2021-09-24
+
+- [#114](https://github.com/estruyf/vscode-front-matter/issues/114): Fix for categories/tags provided as string in YAML
+- [#115](https://github.com/estruyf/vscode-front-matter/issues/115): Fix for updating added categories/tags
+- [#116](https://github.com/estruyf/vscode-front-matter/issues/116): Fix for not showing the `-1` limit on inputs
+
+## [4.0.0] - 2021-09-22 - [Release Notes](https://beta.frontmatter.codes/updates/v4_0_0)
+
+- [#101](https://github.com/estruyf/vscode-front-matter/issues/101): Date picker available on the metadata section
+- [#102](https://github.com/estruyf/vscode-front-matter/issues/102): Support comma separated arrays in front matter
+- [#103](https://github.com/estruyf/vscode-front-matter/issues/103): Added title and description field to the metadata section
+- [#104](https://github.com/estruyf/vscode-front-matter/issues/104): Allow to set images in front matter from the metadata panel section
+- [#105](https://github.com/estruyf/vscode-front-matter/issues/105): Content Type support with backwards compatibility
+- [#106](https://github.com/estruyf/vscode-front-matter/issues/106): Introduction of team level settings for Front Matter
+- [#107](https://github.com/estruyf/vscode-front-matter/issues/107): Number field support added in content type fields
+- [#108](https://github.com/estruyf/vscode-front-matter/issues/108): Choice field support added in content type fields
+- [#109](https://github.com/estruyf/vscode-front-matter/issues/109): JSON Config script added to automate the JSON schema
+- [#111](https://github.com/estruyf/vscode-front-matter/issues/111): Insert media into the markdown contents
+- [#112](https://github.com/estruyf/vscode-front-matter/issues/112): Add snippet support for media insertion
+
+## [3.1.0] - 2021-09-10
+
+- BETA version available at: [beta.frontmatter.codes](https://beta.frontmatter.codes)
+- [#72](https://github.com/estruyf/vscode-front-matter/issues/72): Media view on the dashboard
+- [#73](https://github.com/estruyf/vscode-front-matter/issues/73): List view option for the dashboard
+- [#77](https://github.com/estruyf/vscode-front-matter/issues/77): Dashboard grouping pages functionality integrated
+- [#81](https://github.com/estruyf/vscode-front-matter/issues/81): Optimizing the content folders to use a new setting to simplify configuration
+- [#87](https://github.com/estruyf/vscode-front-matter/issues/87): Fix issue with autofocus and command palette
+- [#88](https://github.com/estruyf/vscode-front-matter/issues/88): Fix issue with search sorting
+- [#89](https://github.com/estruyf/vscode-front-matter/issues/89): Clear filter, sorting, and grouping button added
+- [#90](https://github.com/estruyf/vscode-front-matter/issues/90): Refactoring to use Recoil state management
+- [#91](https://github.com/estruyf/vscode-front-matter/issues/91): Support image previews from content folders
+- [#98](https://github.com/estruyf/vscode-front-matter/issues/98): Add drag and drop support for media upload in a folder
+
+## [3.0.2] - 2021-08-31
+
+- [#82](https://github.com/estruyf/vscode-front-matter/issues/82): Hide the register and unregister commands from the command palette
+
+## [3.0.1] - 2021-08-30
+
+- [#79](https://github.com/estruyf/vscode-front-matter/issues/79): Fix scrollbar not visible on the welcome screen
+
+## [3.0.0] - 2021-08-27
+
+- [#61](https://github.com/estruyf/vscode-front-matter/issues/61): List of recently modified files
+- [#64](https://github.com/estruyf/vscode-front-matter/issues/64): Publish toggle for easier publishing an article
+- [#65](https://github.com/estruyf/vscode-front-matter/issues/65): Aggregate articles in draft
+- [#66](https://github.com/estruyf/vscode-front-matter/issues/66): New dashboard webview on which you can manage all your content
+- [#69](https://github.com/estruyf/vscode-front-matter/issues/69): Welcome screen for getting started
+
 ## [2.5.1] - 2020-08-23

 - Fix typo in the `package.json` file for the preview command

-## [2.5.0] - 2020-08-19
+## [2.5.0] - 2020-08-19  

 - Moved the center layout button to the other actions section
 - [#60](https://github.com/estruyf/vscode-front-matter/issues/60): Added the ability to open a site preview in VS Code 
--- a/README.beta.md
+++ b/README.beta.md
@@ -0,0 +1,131 @@
+<h1 align="center">
+  <a href="https://frontmatter.codes">
+    <img alt="Front Matter" src="https://frontmatter.codes/assets/frontmatter-social.png">
+  </a>
+</h1>
+
+<h2 align="center">Front Matter a CMS running straight in Visual Studio Code</h2>
+
+<h2 align="center">This is the BETA version of Front Matter. If you were looking for the main version, check it out at <a href="https://frontmatter.codes">frontmatter.codes</a></h2>
+
+<p align="center">
+  <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
+    <img src="https://vsmarketplacebadge.apphb.com/version/eliostruyf.vscode-front-matter.svg" alt="Visual Studio Marketplace" style="display: inline-block" />
+  </a>
+
+  <img src="https://vsmarketplacebadge.apphb.com/installs/eliostruyf.vscode-front-matter.svg" alt="Number of installs"  style="display: inline-block;margin-left:10px" />
+  
+  <img src="https://vsmarketplacebadge.apphb.com/rating/eliostruyf.vscode-front-matter.svg" alt="Ratings" style="display: inline-block;margin-left:10px" />
+
+  <a href="https://www.buymeacoffee.com/zMeFRy9" title="Buy me a coffee" style="margin-left:10px">
+    <img src="https://img.shields.io/badge/Buy%20me%20a%20coffee-€%203-blue?logo=buy-me-a-coffee&style=flat" alt="Buy me a coffee" style="display: inline-block" />
+  </a>
+</p>
+
+<h2 align="center">
+  <a href="https://beta.frontmatter.codes" title="Documentation @ beta.frontmatter.codes">
+    Check out the extension documentation at beta.frontmatter.codes
+  </a>
+</h2>
+
+## What is Front Matter?
+
+Front Matter BETA is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more. 
+
+The extension brings Content Management System (CMS) capabilities straight within Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.
+
+Our main extension features are:
+
+- Page dashboard where you can get an overview of all your markdown pages. You can use it to search, filter, sort your contents.
+- Site preview within Visual Studio Code
+- SEO checks for title, description, and keywords
+- Support for custom actions/scripts
+- and many more
+
+<p align="center">
+  <img src="./assets/v4.0.0/preview.png" alt="Site preview" style="display: inline-block" />
+</p>
+
+> If you see something missing in your article creation flow, please feel free to reach out.
+
+**Version 4**
+
+Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).
+
+**Version 3**
+
+In version v3 we introduced the welcome and dashboard webview. The welcome view allows to get you started using the extension, and the dashboard allows you to manage all your markdown pages in one place. This makes it easy to search, filter, sort, and more.
+
+**Version 2**
+
+In version v2 we released the re-designed sidebar panel with improved SEO support. This extension makes it the only extension to manage your Markdown pages for your static sites in Visual Studio Code.
+
+<p align="center" style="margin-top: 2rem;">
+  <a href="https://www.producthunt.com/posts/front-matter?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-front-matter" target="_blank">
+    <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.png?post_id=309033&theme=dark" alt="Front Matter BETA - Managing your static sites straight from within VS Code | Product Hunt" style="width: 250px; height: 40px;" />
+  </a>
+</p>
+
+## Installation
+
+You can get the extension via:
+
+- The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
+- The extension CLI: `ext install eliostruyf.vscode-front-matter`
+- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>
+
+> **Info**: The docs can be found on [frontmatter.codes](https://frontmatter.codes).
+
+### Beta version
+
+If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:
+
+- The VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
+- The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
+- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
+
+> **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).
+
+## Documentation
+
+<h2 align="center">
+  <a href="https://beta.frontmatter.codes" title="Documentation @ beta.frontmatter.codes">
+    Check out the extension documentation at beta.frontmatter.codes
+  </a>
+</h2>
+
+## 👉 Contributors 🤘
+
+<p align="center">
+  <a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
+    <img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
+  </a>
+</p>
+
+## 🖤 Sponsors 👇 🤘
+
+<p align="center">
+  <a href="https://github.com/timschps" title="Tim Schaeps">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
+   </a>
+  <a href="https://github.com/flikteoh" title="FlikTeoh">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
+  </a>
+</p>
+
+<br />
+
+<p align="center">
+  <a href="https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss">
+    <img src="assets/sponsors/powered-by-vercel.png" />
+   </a>
+</p>
+
+<br />
+<br />
+
+<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>
+</p>
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 <h1 align="center">
-  <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter">
-    <img alt="Front Matter" src="./assets/frontmatter-128x128.png">
+  <a href="https://frontmatter.codes">
+    <img alt="Front Matter" src="https://frontmatter.codes/assets/frontmatter-social.png">
  </a>
 </h1>

-<h2 align="center">Front Matter is an essential Visual Studio Code extension when you want to manage the markdown pages of your static sites.</h2>
+<h2 align="center">Front Matter a CMS running straight in Visual Studio Code</h2>

 <p align="center">
  <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
@@ -20,19 +20,43 @@
  </a>
 </p>

-This VSCode extension simplifies working with your markdown articles' front matter when using a static site generator like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more... For example, you can keep a list of used tags, categories and add/remove them from your article with the extension.
+<h2 align="center">
+  <a href="https://frontmatter.codes" title="Documentation @ frontmatter.codes">
+    Check out the extension documentation at frontmatter.codes
+  </a>
+</h2>

-The extension will automatically verify if your title and description are SEO compliant. If this would not be the case, it will give you a warning.
+## What is Front Matter?
+
+Front Matter is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more. 
+
+The extension brings Content Management System (CMS) capabilities straight within Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.
+
+Our main extension features are:
+
+- Page dashboard where you can get an overview of all your markdown pages. You can use it to search, filter, sort your contents.
+- Site preview within Visual Studio Code
+- SEO checks for title, description, and keywords
+- Support for custom actions/scripts
+- and many more

 <p align="center">
-  <img src="./assets/v2.5.0/site-preview.png" alt="Site preview" style="display: inline-block" />
+  <img src="./assets/v4.0.0/preview.png" alt="Site preview" style="display: inline-block" />
 </p>

 > If you see something missing in your article creation flow, please feel free to reach out.

+**Version 4**
+
+Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).
+
+**Version 3**
+
+In version v3 we introduced the welcome and dashboard webview. The welcome view allows to get you started using the extension, and the dashboard allows you to manage all your markdown pages in one place. This makes it easy to search, filter, sort, and more.
+
 **Version 2**

-In version v2.0.0 we released the newly redesigned sidebar panel with improved SEO support. This extension makes it the only extension to manage your Markdown pages for your static sites in Visual Studio Code.
+In version v2 we released the re-designed sidebar panel with improved SEO support. This extension makes it the only extension to manage your Markdown pages for your static sites in Visual Studio Code.

 <p align="center" style="margin-top: 2rem;">
  <a href="https://www.producthunt.com/posts/front-matter?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-front-matter" target="_blank">
@@ -40,424 +64,63 @@ In version v2.0.0 we released the newly redesigned sidebar panel with improved S
  </a>
 </p>

-<h2 id="table-of-contents">Table of Contents</h2>
+## Installation

-<details open="open">
-  <summary>Table of Contents</summary>
-  <ol>
-    <li><a href="#markdown-features">Markdown features</a></li>
-    <li><a href="#the-panel">The panel</a></li>
-    <li><a href="#site-preview">Site preview</a></li>
-    <li><a href="#custom-actions">Custom actions/scripts</a></li>
-    <li><a href="#creating-articles-from-templates">Create articles from templates</a></li>
-    <li><a href="#syntax-highlighting-for-hugo-shortcodes">Syntax highlighting for Hugo Shortcodes</a></li>
-    <li><a href="#available-commands">Available commands</a></li>
-    <li><a href="#extension-settings">Extension settings</a></li>
-    <li><a href="#feedback--issues--ideas">Feedback / issues / ideas</a></li>
-  </ol>
-</details>
+You can get the extension via:

-## Markdown features
+- The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
+- The extension CLI: `ext install eliostruyf.vscode-front-matter`
+- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>

-The Front Matter extension tries to make it easy to manage your Markdown pages/content. Within a Markdown page, we allow you to fold the file's Front Matter to be less distracting when writing. Also, do we highlight the Front Matter content to create a visual difference between content and metadata.
+> **Info**: The docs can be found on [frontmatter.codes](https://frontmatter.codes).

-### Front Matter folding
+### Beta version
+
+If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:
+
+- The VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
+- The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
+- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
+
+> **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).
+
+## Documentation
+
+<h2 align="center">
+  <a href="https://frontmatter.codes" title="Documentation @ frontmatter.codes">
+    Check out the extension documentation at frontmatter.codes
+  </a>
+</h2>
+
+## 👉 Contributors 🤘

 <p align="center">
-  <img src="./assets/v2.4.0/folding.png" alt="Front Matter folding" style="display: inline-block" />
+  <a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
+    <img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
+  </a>
 </p>

-### Front Matter highlighting
+## 🖤 Sponsors 👇 🤘

 <p align="center">
-  <img src="./assets/v2.4.0/fm-highlight.png" alt="Front Matter highlighting" style="display: inline-block" />
+  <a href="https://github.com/timschps" title="Tim Schaeps">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
+   </a>
+  <a href="https://github.com/flikteoh" title="FlikTeoh">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
+  </a>
 </p>

-> **Info**: If you do not want this feature, you can disable it in the extension settings -> `Highlight Front Matter` or by setting the `frontMatter.content.fmHighlight` setting to `false`.
-
-## The panel
-
-The Front Matter panel allows you to perform most of the extension actions by just a click on the button and it shows the SEO statuses of your title, description, and more.
-
-Initially, this panel has been created to make it easier to add tags and categories to your articles as the current VSCode multi-select is not optimal to use.
-
-To leverage most of the capabilities of the extension. SEO information and everyday actions like slug optimization, updating the date, and publish/drafting the article.
-
-When you open the panel and the current file is not a Markdown file, it will contain the following sections:
+<br />

 <p align="center">
-  <img src="./assets/v2.5.0/baseview.png" alt="Base view" style="display: inline-block" />
+  <a href="https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss">
+    <img src="assets/sponsors/powered-by-vercel.png" />
+   </a>
 </p>

-> **Info**: both **Global Settings** and **Other Actions** sections are shown for the base view as when a Markdown file is openend.
-
-When you open the Front Matter panel on a Markdown file, you get to see the following sections:
-
-**Global Settings**
-
-<p align="center">
-  <img src="./assets/v2.5.0/global-settings.png" alt="Global settings" style="display: inline-block" />
-</p>
-
-**SEO Status**
-
-<p align="center">
-  <img src="./assets/v2.0.0/seo.png" alt="SEO article status" style="display: inline-block" />
-</p>
-
-**Actions**
-
-<p align="center">
-  <img src="./assets/v2.5.0/actions.png" alt="Actions" style="display: inline-block" />
-</p>
-
-> **Info**: To gain the `open preview` button to show up, you will need to first set the `local preview URL`. You can do this within the `Global Settings` section or by updating the `frontMatter.preview.host` setting.
-
-**Metadata: Keywords, Tags, Categories**
-
-<p align="center">
-  <img src="./assets/v2.0.0/metadata.png" alt="Article metadata" style="display: inline-block" />
-</p>
-
-> **Info**: By default, the tags/categories picker allows you to insert existing and none tags/categories. When you enter a none existing tag/category, the panel shows an add `+` icon in front of that button. This functionality allows you to store this tag/category in your settings. If you want to disable this feature, you can do that by setting the `frontMatter.panel.freeform` setting to `false`.
-
-**Other actions**
-
-<p align="center">
-  <img src="./assets/v2.5.0/other-actions.png" alt="Other actions" style="display: inline-block" />
-</p>
-
-**Info**: The `Enable write settings` action allow you to make Markdown specific changes to optimize the writing of your articles. It will change settings like the `fontSize`, `lineHeight`, `wordWrap`, `lineNumbers` and more.
-
-## Site preview
-
-The Markdown preview is not consistently delivering the same result as the one you will see on your site. The Front Matter extension provides you a way to show the site result. For this, you will first have to set the `frontMatter.preview.host` setting. You can perform it from the `Global Settings` section in the panel or in your `settings.json` file to set the setting.
-
-For example, with Hugo, the local server spins up on `http://localhost:1313`. When you set this URL as the value of the `frontMatter.preview.host` setting. You can click on the `open preview` button and the site preview will be shown.
-
-<p align="center">
-  <img src="./assets/v2.5.0/site-preview.png" alt="Site preview" style="display: inline-block" />
-</p>
-
-> **Important**: Be sure to spin up your local server. This is an action the extension currently doesn't do for you. If you want, you create yourself a custom action in order to start it.
-
-## Custom actions
-
-Since version `1.15.0`, the extension allows you to create your own custom actions, by running Node.js scripts from your project. In order to use this functionality, you will need to configure the [`frontMatter.custom.scripts`](#frontmattercustomscripts) setting for your project.
-
-Once a custom action has been configured, it will appear on the Front Matter panel.
-
-<p align="center">
-  <img src="./assets/v2.0.0/custom-action.png" alt="Custom action" style="display: inline-block" />
-</p>
-
-The current workspace-, file-path, and front matter data will be passed as an argument. In your script fetch these arguments as follows:
-
-```javascript
-const arguments = process.argv;
-
-if (arguments && arguments.length > 0) {
-  const workspaceArg = arguments[2]; // The workspace path
-  const fileArg = arguments[3]; // The file path
-  const frontMatterArg = arguments[4]; // Front matter data
-
-  console.log(`The content returned for your notification.`);
-}
-```
-
-> A sample file can be found here: [script-sample.js](./sample/script-sample.js)
-
-The output of the script will be passed as a notification, and it allows you to copy the output.
-
-<p align="center">
-  <img src="./assets/custom-action-notification.png" alt="Custom action notification" style="display: inline-block" />
-</p>
-
-## Creating articles from templates
-
-By default, the extension looks for files stored in a `.templates` folder that should be located in your website project's root.
-
-> **Info**: You can overwrite the path by specifying it with the `frontMatter.templates.folder` setting.
-
-When adding files in the folder, you'll be able to run the `Front Matter: New article from template` from a command or explorer menu. It will present you with the article template options once you pick one and specify the title. It creates the file and updates its front matter.
-
-> **Info**: By default, the extension will create articles with a `yyyy-MM-dd` prefix. If you do not want that or change the date format, you can update the `frontMatter.templates.prefix` setting.
-
-## Syntax highlighting for Hugo Shortcodes
-
-<p align="center">
-  <img src="./assets/syntax-highlighting.png" alt="Shortcode syntax highlighting" style="display: inline-block" />
-</p>
-
-## Available commands
-
-**Front Matter: Initialize project**
-
-This command will initialize the project with a template folder and an article template. It makes it easier to get you started with the extension and creating your content.
-
-**Front Matter: Create a template from current file**
-
-This command allows you to create a new template from the current open Markdown file. It will ask you for the name of the template and if you want to keep the current file its content in the template.
-
-> **Info**: The create as template action is also available from the `other actions` section in the Front Matter panel.
-
-**Front Matter: New article from template**
-
-With this command, you can easily create content in your project within the registered folders and provided templates.
-
-You can register and unregister folders by right-clicking on the folder in your VSCode explorer panel.
-
-<p align="center">
-  <img src="./assets/v2.1.0/register-folder.png" alt="Register/unregister a folder" style="display: inline-block" />
-</p>
-
-Once you registered a folder and a template has been defined ([how to create a template](#creating-articles-from-templates)), you can make use of this command. 
-
-> **Info**: The benefit of this command is that you do not need to search the folder in which you want to create a new article/page/... The extension will do it automatically for you.
-
-**Front Matter: Create <tag | category>**
-
-Creates a new <tag | category> and allows you to include it into your post automatically
-
-<p align="center">
-  <img src="./assets/create-tag-category.gif" alt="Create tag or category" style="display: inline-block" />
-</p>
-  
-**Front Matter: Insert <tags | categories>**
-
-Inserts a selected <tags | categories> into the front matter of your article/post/... - When using this command, the Front Matter panel opens and focuses on the specified type.
-
-> **Info**: This experience changed in version `1.11.0`.
-
-**Front Matter: Export all tags & categories to your settings**
-
-Export all the already used tags & categories in your articles/posts/... to your user settings.
-
-**Front Matter: Remap or remove tag/category in all articles**
-
-This command helps you quickly update/remap or delete a tag or category in your markdown files. The extension will ask you to select the taxonomy type (*tag* or *category*), the old taxonomy value, and the new one (leave the input field *blank* to remove the tag/category). 
-
-> **Info**: Once the remapping/deleting process completes. Your VSCode settings update with all new taxonomy tags/categories.
-
-**Front Matter: Set current date**
-
-Update the `date` property of the current article/post/... to the current date & time.
-
-**Optional**: if you want, you can specify the date property format by adding your settings' preference. Settings key: `frontMatter.taxonomy.dateFormat`. Check [date-fns formatting](https://date-fns.org/v2.0.1/docs/format) for more information on which patterns you can use.
-
-**Front Matter: Set lastmod date**
-
-Update the `lastmod` (last modified) property of the current article/post/... to the current date & time. By setting the `frontMatter.content.autoUpdateDate` setting, it can be done automatically when performing changes to your markdown files.
-
-> **note**: Uses the same date format settings key as current date: `frontMatter.taxonomy.dateFormat`.
-
-**Front Matter: Generate slug based on article title**
-
-This command generates a clean slug for your article. It removes known stop words, punctuations, and special characters. 
-
-Example:
-
-```
-title: Just a sample page with a title
-slug: sample-page-title
-```
-
-You can also specify a prefix and suffix, which can be added to the slug if you want. Use the following settings to do this: `frontMatter.taxonomy.slugPrefix` and `frontMatter.taxonomy.slugSuffix`. By default, both options are not provided and will not add anything to the slug. Another setting is to allow you to sync the filename with the generated slug. The setting you need to turn on enable for this is `frontMatter.taxonomy.alignFilename`.
-
-> **Info**: At the moment, the extension only supports English stopwords.
-
-**Front Matter: Preview article**
-
-Opens the site preview for the current article. More information about it can be found in the [site preview](#site-preview) section.
-
-### Usage
-
- Start by opening the command prompt:
-  - Windows: ⇧+ctrl+P
-  - Mac: ⇧+⌘+P
- Use one of the commands from above
-
-## Where is the data stored?
-
-The tags and categories are stored in the project VSCode user settings. You can find them back under: `.vscode/settings.json`.
-
-```json
-{
-  "frontMatter.taxonomy.tags": [],
-  "frontMatter.taxonomy.categories": []
-}
-```
-
-## Extension settings
-
-The extension has more settings that allow you to configure it to your needs further. Here is a list of settings that you can set:
-
-### `frontMatter.taxonomy.seoTitleLength`
-
-Specifies the optimal title length for SEO (set to `-1` to turn it off). Default value: `60`.
-
-```json
-{
-  "frontMatter.taxonomy.seoTitleLength": 60
-}
-```
-### `frontMatter.taxonomy.seoDescriptionLength`
-
-Specifies the optimal description length for SEO (set to `-1` to turn it off). Default value: `160`.
-
-```json
-{
-  "frontMatter.taxonomy.seoDescriptionLength": 160
-}
-```
-
-### `frontMatter.taxonomy.seoContentLength`
-
-Specifies the optimal minimum length for your articles. Between 1,760 words – 2,400 is the absolute ideal article length for SEO in 2021. (set to `-1` to turn it off).
-
-```json
-{
-  "frontMatter.taxonomy.seoContentLength": 1760
-}
-```
-
-### `frontMatter.taxonomy.seoDescriptionLength`
-
-Specifies the name of the SEO description field for your page. Default is `description`.
-
-```json
-{
-  "frontMatter.taxonomy.seoDescriptionField": "description"
-}
-```
-
-### `frontMatter.taxonomy.frontMatterType`
-
-Specify which Front Matter language you want to use. The extension supports `YAML` (default) and `TOML`.
-
-```json
-{
-  "frontMatter.taxonomy.frontMatterType": "YAML"
-}
-```
-
-### `frontMatter.taxonomy.indentArrays`
-
-Specify if arrays in the front matter are indented. Default: `true`. If you do not want to indent the array values, you can update it with the following setting change:
-
-```json
-{
-  "frontMatter.taxonomy.indentArrays": false
-}
-```
-
-### `frontMatter.taxonomy.noPropertyValueQuotes`
-
-Specify the property names of which you want to remove the quotes in the output value. **Warning**: only use this when you know what you are doing. If you're going to, for instance, remove the quotes from the date property, you can add the following:
-
-```json
-{
-  "frontMatter.taxonomy.noPropertyValueQuotes": ["date"]
-}
-```
-
-### `frontMatter.taxonomy.dateField`
-
-Specifies the date field name to use in your Front Matter. Default value: `date`.
-
-```json
-{
-  "frontMatter.taxonomy.dateField": "date"
-}
-```
-
-### `frontMatter.taxonomy.modifiedField`
-
-Specifies the modified date field name to use in your Front Matter. Default value: `lastmod`.
-
-```json
-{
-  "frontMatter.taxonomy.modifiedField": "lastmod"
-}
-```
-
-### `frontMatter.custom.scripts`
-
-Allows you to specify a title and script path (starting relative from the root of your project). These values will be used to create custom actions on the Front Matter panel. Default value: `[]`.
-
-```json
-{
-  "frontMatter.custom.scripts": [{
-    "title": "Generate social image",
-    "script": "./scripts/social-img.js",
-    "nodeBin": "~/.nvm/versions/node/v14.15.5/bin/node"
-  }]
-}
-```
-
-> **Important**: When the command execution would fail when it cannot find the `node` command. You are able to specify your path to the node app. This is for instance required when using `nvm`.
-
-### `frontMatter.content.folders`
-
-This array of folders defines where the extension can easily create new content by running the create article command.
-
-```json
-{
-  "frontMatter.content.folders": [{
-    "title": "Articles",
-    "fsPath": "<the path to the folder>",
-    "paths": ["<wsl-folder-path>"]
-  }]
-}
-```
-
-> **Important**: This setting can be configured by right-clicking on a folder in the VSCode file explorer view and clicking on the `Front Matter: Register folder` menu item.
-
-### `frontMatter.content.autoUpdateDate`
-
-Specify if you want to automatically update the modification date of your markdown page when doing changes to it. Default: `false`.
-
-```json
-{
-  "frontMatter.content.autoUpdateDate": false
-}
-```
-
-### `frontMatter.content.fmHighlight`
-
-Specify if you want to highlight the Front Matter in the Markdown file. Default: `true`.
-
-```json
-{
-  "frontMatter.content.fmHighlight": true
-}
-```
-
-### `frontMatter.preview.host`
-
-Specify the host URL (example: http://localhost:1313) to be used when opening the preview.
-
-```json
-{
-  "frontMatter.preview.host": ""
-}
-```
-
-### `frontMatter.preview.pathName`
-
-Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: `yyyy/MM` (if not set via the slug). The date will be generated based on the article its date field value.
-
-```json
-{
-  "frontMatter.preview.pathName": ""
-}
-```
-
-> **Important**: As the value will be formatted with the article's date, it will try to convert all characters you enter. In case you wan to skip some characters or all of them, you need to wrap that part between two single quotes. Example: `"'blog/'yyyy/MM"` will result in: `blog/2021/08`.
-
-## Feedback / issues / ideas
-
-Please submit them via creating an issue in the project repository: [issue list](https://github.com/estruyf/vscode-front-matter/issues).
+<br />
+<br />

 <p align="center">
  <a href="https://visitorbadge.io">
--- a/assets/front-matter.png
+++ b/assets/front-matter.png
--- a/assets/frontmatter-128x128.png
+++ b/assets/frontmatter-128x128.png
--- a/assets/frontmatter-beta.png
+++ b/assets/frontmatter-beta.png
--- a/assets/frontmatter-beta.svg
+++ b/assets/frontmatter-beta.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFE45E;}
+	.st1{fill:none;stroke:#FFE45E;stroke-width:2;stroke-miterlimit:10;}
+	.st2{font-family:'MyriadPro-Bold';}
+	.st3{font-size:8px;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M4.1,10.2H2.4V2.1h3.1V4H4.1v1.2h1.2V7H4.1V10.2z"/>
+		<path class="st0" d="M10.7,10.2H8.9L8,7.3c0-0.1,0-0.1,0-0.2C7.9,7.1,7.9,7,7.8,6.8v0.6v2.9H6.1V2.1h1.8c0.8,0,1.3,0.2,1.8,0.6
+			c0.5,0.5,0.8,1.2,0.8,2.1c0,1-0.4,1.6-1.1,2L10.7,10.2z M7.9,5.8L7.9,5.8c0.3,0,0.5-0.1,0.6-0.3S8.7,5,8.7,4.8c0-0.6-0.3-1-0.8-1
+			l0,0V5.8z"/>
+		<path class="st0" d="M16.1,6.2c0,1.2-0.2,2.3-0.7,3.1s-1.1,1.2-1.7,1.2s-1.2-0.3-1.6-0.9c-0.6-0.8-0.9-1.9-0.9-3.4
+			s0.3-2.6,0.9-3.4C12.6,2.3,13,2,13.7,2c0.8,0,1.3,0.4,1.8,1.2C15.8,3.8,16.1,4.8,16.1,6.2z M14.3,6.2c0-1.4-0.2-2.2-0.7-2.2
+			c-0.2,0-0.4,0.2-0.5,0.6c-0.1,0.4-0.2,0.9-0.2,1.6c0,0.7,0.1,1.2,0.2,1.6c0.1,0.4,0.3,0.6,0.5,0.6c0.2,0,0.4-0.2,0.5-0.6
+			C14.2,7.3,14.3,6.9,14.3,6.2z"/>
+		<path class="st0" d="M16.8,10.2V2.1h1.7l0.9,2.9c0.1,0.1,0.1,0.3,0.2,0.6c0.1,0.2,0.1,0.5,0.2,0.8L20,7c-0.1-0.7-0.1-1.3-0.2-1.8
+			s-0.1-1-0.1-1.2V2.1h1.7v8.2h-1.6l-0.9-3c-0.1-0.3-0.2-0.6-0.3-0.9c-0.1-0.3-0.1-0.6-0.2-0.8c0,0.6,0.1,1.1,0.1,1.5
+			c0,0.4,0,0.8,0,1.2v2.1h-1.7V10.2z"/>
+		<path class="st0" d="M24.6,10.2h-1.7V4h-1V2.1h3.7V4h-1.1V10.2z"/>
+	</g>
+</g>
+<rect class="st1" width="28" height="28"/>
+<g>
+	<g>
+		<path class="st0" d="M3.1,11.6H4l0.6,3c0.1,0.4,0.2,0.8,0.2,1.2C4.9,16.2,4.9,16.6,5,17c0-0.1,0-0.1,0-0.1v-0.1l0.2-0.9l0.1-0.8
+			l0.1-0.5l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.2v-1v-0.9l0,0c0,0,0,0,0-0.1v0.2c0,0.2,0,0.3-0.1,0.5
+			c-0.1,0.2,0,0.2-0.1,0.3L6,15.7V16l-0.6,3.3H4.7l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2l-0.3,5.2h-1
+			L3.1,11.6z"/>
+		<path class="st0" d="M9.4,11.6h0.8l1.6,7.5h-1l-0.3-1.5H9l-0.3,1.5h-1L9.4,11.6z M10.4,16.8l-0.3-1.2C10,14.8,9.8,13.9,9.7,13
+			c0,0.5-0.1,0.9-0.2,1.4c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1L10.4,16.8L10.4,16.8z"/>
+		<path class="st0" d="M11.6,11.6h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V11.6z"/>
+		<path class="st0" d="M14.9,11.6h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V11.6z"/>
+		<path class="st0" d="M18.8,11.6h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V11.6z"/>
+		<path class="st0" d="M22.3,11.6h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6
+			l1.4,3.7h-1l-1.4-3.7v3.7h-1L22.3,11.6L22.3,11.6z M23.3,14.9c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6
+			c-0.1-0.2-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.3-0.2s-0.3-0.1-0.4-0.1h-0.2v2.5H23.3z"/>
+	</g>
+</g>
+<text transform="matrix(1 0 0 1 5.4457 25.9479)" class="st0 st2 st3">BETA</text>
+</svg>
--- a/assets/frontmatter-dark.svg
+++ b/assets/frontmatter-dark.svg
@@ -1,40 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
-	.st3{fill:none;}
-</style>
-<g class="st0">
-	<path class="st1" d="M4,11.4H2.2V2.9h3.2v2H4v1.2h1.3V8H4V11.4z"/>
-	<path class="st1" d="M10.9,11.4H9l-0.9-3c0-0.1,0-0.1,0-0.2C8,8.1,8,8,7.9,7.8v0.6v3H6.1V2.9H8c0.8,0,1.4,0.2,1.9,0.6
-		c0.5,0.5,0.8,1.3,0.8,2.2c0,1-0.4,1.7-1.1,2.1L10.9,11.4z M8,6.8h0.1c0.2,0,0.4-0.1,0.5-0.3C8.7,6.3,8.8,6,8.8,5.7
-		c0-0.6-0.3-1-0.8-1l0,0V6.8z"/>
-	<path class="st1" d="M16.5,7.2c0,1.3-0.2,2.4-0.7,3.2c-0.5,0.8-1.1,1.2-1.8,1.2s-1.2-0.3-1.7-0.9c-0.6-0.8-0.9-2-0.9-3.5
-		s0.3-2.7,0.9-3.5c0.5-0.6,1-0.9,1.7-0.9c0.8,0,1.4,0.4,1.9,1.2C16.2,4.7,16.5,5.8,16.5,7.2z M14.6,7.2c0-1.5-0.2-2.3-0.7-2.3
-		c-0.2,0-0.4,0.2-0.5,0.6s-0.2,0.9-0.2,1.7c0,0.7,0.1,1.3,0.2,1.7c0.1,0.4,0.3,0.6,0.5,0.6s0.4-0.2,0.5-0.6
-		C14.5,8.4,14.6,7.9,14.6,7.2z"/>
-	<path class="st1" d="M17.2,11.4V2.9H19l0.9,3C20,6,20,6.2,20.1,6.5c0.1,0.2,0.1,0.5,0.2,0.8L20.5,8c-0.1-0.7-0.1-1.4-0.2-1.9
-		s-0.1-1-0.1-1.3V2.9H22v8.5h-1.7l-0.9-3.1c-0.1-0.3-0.2-0.6-0.3-0.9S19,6.8,18.9,6.6c0,0.6,0.1,1.1,0.1,1.6c0,0.4,0,0.8,0,1.2v2.2
-		h-1.8V11.4z"/>
-	<path class="st1" d="M25.3,11.4h-1.8V4.9h-1v-2h3.9v2h-1.1V11.4z"/>
-</g>
-<rect class="st2" width="28" height="28"/>
-<g class="st0">
-	<path class="st1" d="M2.9,17h0.9l0.6,3c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.8,0.2,1.2c0-0.1,0-0.1,0-0.1v-0.1L5,21.3l0.1-0.8
-		L5.2,20l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3s0-0.2,0-0.2v-1v-0.9l0,0c0,0,0,0,0-0.1v0.2c0,0.2,0,0.3-0.1,0.5
-		s0,0.2-0.1,0.3l-0.1,0.7v0.3l-0.6,3.3H4.5l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2l-0.3,5.2h-1L2.9,17z"/>
-	<path class="st1" d="M9.3,17h0.8l1.6,7.5h-1L10.4,23H8.9l-0.3,1.5h-1L9.3,17z M10.3,22.2L10,21c-0.1-0.8-0.3-1.7-0.4-2.6
-		c0,0.5-0.1,0.9-0.2,1.4c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1L10.3,22.2L10.3,22.2z"/>
-	<path class="st1" d="M11.5,17h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V17z"/>
-	<path class="st1" d="M14.8,17h3.3v0.9H17v6.7h-1v-6.7h-1.2V17z"/>
-	<path class="st1" d="M18.7,17h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V17z"/>
-	<path class="st1" d="M22.3,17h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6
-		l1.4,3.7h-1l-1.4-3.7v3.7h-1L22.3,17L22.3,17z M23.3,20.3c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6
-		s-0.1-0.3-0.2-0.4s-0.2-0.2-0.3-0.2c-0.1,0-0.3-0.1-0.4-0.1h-0.2v2.5H23.3z"/>
-</g>
-<rect x="-33.5" y="14" class="st3" width="8.6" height="14"/>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#ffffff;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#ffffff"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#ffffff"/></svg>
--- a/assets/frontmatter-mag-min.png
+++ b/assets/frontmatter-mag-min.png
--- a/assets/frontmatter-mag-min.svg
+++ b/assets/frontmatter-mag-min.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#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>
--- a/assets/frontmatter-mag.svg
+++ b/assets/frontmatter-mag.svg
@@ -1,44 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-	y="0px" viewBox="0 0 28 28" style="color:#ad0670" xml:space="preserve">
-	<style type="text/css">
-		.st1 {
-			fill: none;
-			stroke: #ad0670;
-			stroke-width: 2;
-			stroke-miterlimit: 10;
-		}
-	</style>
-
-	<g class="st0">
-		<path fill="currentcolor" d="M4,11.4H2.2V2.9h3.2v2H4v1.2h1.3V8H4V11.4z" />
-		<path fill="currentcolor" d="M10.9,11.4H9l-0.9-3c0-0.1,0-0.1,0-0.2C8,8.1,8,8,7.9,7.8l0,0.6v3H6.1V2.9H8c0.8,0,1.4,0.2,1.9,0.6
-		c0.5,0.5,0.8,1.3,0.8,2.2c0,1-0.4,1.7-1.1,2.1L10.9,11.4z M8,6.8h0.1c0.2,0,0.4-0.1,0.5-0.3C8.7,6.3,8.8,6,8.8,5.7
-		c0-0.6-0.3-1-0.8-1H8V6.8z" />
-		<path fill="currentcolor" d="M16.5,7.2c0,1.3-0.2,2.4-0.7,3.2c-0.5,0.8-1.1,1.2-1.8,1.2c-0.7,0-1.2-0.3-1.7-0.9c-0.6-0.8-0.9-2-0.9-3.5
-		c0-1.5,0.3-2.7,0.9-3.5c0.5-0.6,1-0.9,1.7-0.9c0.8,0,1.4,0.4,1.9,1.2C16.2,4.7,16.5,5.8,16.5,7.2z M14.6,7.2c0-1.5-0.2-2.3-0.7-2.3
-		c-0.2,0-0.4,0.2-0.5,0.6c-0.1,0.4-0.2,0.9-0.2,1.7c0,0.7,0.1,1.3,0.2,1.7c0.1,0.4,0.3,0.6,0.5,0.6c0.2,0,0.4-0.2,0.5-0.6
-		C14.5,8.4,14.6,7.9,14.6,7.2z" />
-		<path fill="currentcolor" d="M17.2,11.4V2.9H19l0.9,3C20,6,20,6.2,20.1,6.5c0.1,0.2,0.1,0.5,0.2,0.8L20.5,8c-0.1-0.7-0.1-1.4-0.2-1.9s-0.1-1-0.1-1.3
-		V2.9H22v8.5h-1.7l-0.9-3.1c-0.1-0.3-0.2-0.6-0.3-0.9s-0.1-0.6-0.2-0.8c0,0.6,0.1,1.1,0.1,1.6c0,0.4,0,0.8,0,1.2v2.2H17.2z" />
-		<path fill="currentcolor" d="M25.3,11.4h-1.8V4.9h-1v-2h3.9v2h-1.1V11.4z" />
-	</g>
-
-	<rect class="st1" width="28" height="28" />
-
-	<g class="st0">
-		<path fill="currentcolor" d="M2.9,17h0.9L4.4,20c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.8,0.2,1.2c0-0.1,0-0.1,0-0.1c0,0,0-0.1,0-0.1L5,21.3l0.1-0.8
-		L5.2,20l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3s0-0.2,0-0.2l0-1l0-0.9c0,0,0,0,0,0c0,0,0,0,0-0.1l0,0.2
-		c0,0.2,0,0.3-0.1,0.5s0,0.2-0.1,0.3l-0.1,0.7l0,0.3l-0.6,3.3H4.5l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2
-		l-0.3,5.2h-1L2.9,17z" />
-		<path fill="currentcolor" d="M9.3,17h0.8l1.6,7.5h-1L10.4,23H8.9l-0.3,1.5h-1L9.3,17z M10.3,22.2L10,21c-0.1-0.8-0.3-1.7-0.4-2.6c0,0.5-0.1,0.9-0.2,1.4
-		c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1H10.3z" />
-		<path fill="currentcolor" d="M11.5,17h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V17z" />
-		<path fill="currentcolor" d="M14.8,17h3.3v0.9H17v6.7h-1v-6.7h-1.2V17z" />
-		<path fill="currentcolor" d="M18.7,17h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V17z" />
-		<path fill="currentcolor" d="M22.3,17h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6l1.4,3.7h-1
-		l-1.4-3.7v3.7h-1V17z M23.3,20.3c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6s-0.1-0.3-0.2-0.4
-		s-0.2-0.2-0.3-0.2c-0.1,0-0.3-0.1-0.4-0.1h-0.2V20.3z" />
-	</g>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#AD0670;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#AD0670"/></svg>
--- a/assets/frontmatter-short-min.png
+++ b/assets/frontmatter-short-min.png
--- a/assets/frontmatter-short-min.svg
+++ b/assets/frontmatter-short-min.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#02AEB7;stroke-width:50;stroke-miterlimit:10;}
+	.st1{fill:#02AEB7;}
+</style>
+<rect x="25" y="25" class="st0" width="1200" height="1200"/>
+<path class="st1" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path class="st1" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>
--- a/assets/frontmatter-teal-128x128.png
+++ b/assets/frontmatter-teal-128x128.png
--- a/assets/frontmatter-teal-min.svg
+++ b/assets/frontmatter-teal-min.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#02aeb7;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#02aeb7"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#02aeb7"/></svg>
--- a/assets/frontmatter.png
+++ b/assets/frontmatter.png
--- a/assets/frontmatter.svg
+++ b/assets/frontmatter.svg
@@ -1,39 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st2{fill:none;}
-</style>
-<g class="st0">
-	<path d="M4,11.4H2.2V2.9h3.2v2H4v1.2h1.3V8H4V11.4z"/>
-	<path d="M10.9,11.4H9l-0.9-3c0-0.1,0-0.1,0-0.2C8,8.1,8,8,7.9,7.8l0,0.6v3H6.1V2.9H8c0.8,0,1.4,0.2,1.9,0.6
-		c0.5,0.5,0.8,1.3,0.8,2.2c0,1-0.4,1.7-1.1,2.1L10.9,11.4z M8,6.8h0.1c0.2,0,0.4-0.1,0.5-0.3C8.7,6.3,8.8,6,8.8,5.7
-		c0-0.6-0.3-1-0.8-1H8V6.8z"/>
-	<path d="M16.5,7.2c0,1.3-0.2,2.4-0.7,3.2c-0.5,0.8-1.1,1.2-1.8,1.2c-0.7,0-1.2-0.3-1.7-0.9c-0.6-0.8-0.9-2-0.9-3.5
-		c0-1.5,0.3-2.7,0.9-3.5c0.5-0.6,1-0.9,1.7-0.9c0.8,0,1.4,0.4,1.9,1.2C16.2,4.7,16.5,5.8,16.5,7.2z M14.6,7.2c0-1.5-0.2-2.3-0.7-2.3
-		c-0.2,0-0.4,0.2-0.5,0.6c-0.1,0.4-0.2,0.9-0.2,1.7c0,0.7,0.1,1.3,0.2,1.7c0.1,0.4,0.3,0.6,0.5,0.6c0.2,0,0.4-0.2,0.5-0.6
-		C14.5,8.4,14.6,7.9,14.6,7.2z"/>
-	<path d="M17.2,11.4V2.9H19l0.9,3C20,6,20,6.2,20.1,6.5c0.1,0.2,0.1,0.5,0.2,0.8L20.5,8c-0.1-0.7-0.1-1.4-0.2-1.9s-0.1-1-0.1-1.3
-		V2.9H22v8.5h-1.7l-0.9-3.1c-0.1-0.3-0.2-0.6-0.3-0.9s-0.1-0.6-0.2-0.8c0,0.6,0.1,1.1,0.1,1.6c0,0.4,0,0.8,0,1.2v2.2H17.2z"/>
-	<path d="M25.3,11.4h-1.8V4.9h-1v-2h3.9v2h-1.1V11.4z"/>
-</g>
-<rect class="st1" width="28" height="28"/>
-<g class="st0">
-	<path d="M2.9,17h0.9L4.4,20c0.1,0.4,0.2,0.8,0.2,1.2c0.1,0.4,0.1,0.8,0.2,1.2c0-0.1,0-0.1,0-0.1c0,0,0-0.1,0-0.1L5,21.3l0.1-0.8
-		L5.2,20l0.6-3h0.9l0.7,7.5h-1l-0.2-2.6c0-0.1,0-0.2,0-0.3s0-0.2,0-0.2l0-1l0-0.9c0,0,0,0,0,0c0,0,0,0,0-0.1l0,0.2
-		c0,0.2,0,0.3-0.1,0.5s0,0.2-0.1,0.3l-0.1,0.7l0,0.3l-0.6,3.3H4.5l-0.6-2.8c-0.1-0.4-0.2-0.8-0.2-1.1c-0.1-0.4-0.1-0.8-0.2-1.2
-		l-0.3,5.2h-1L2.9,17z"/>
-	<path d="M9.3,17h0.8l1.6,7.5h-1L10.4,23H8.9l-0.3,1.5h-1L9.3,17z M10.3,22.2L10,21c-0.1-0.8-0.3-1.7-0.4-2.6c0,0.5-0.1,0.9-0.2,1.4
-		c-0.1,0.5-0.2,1-0.3,1.5l-0.2,1H10.3z"/>
-	<path d="M11.5,17h3.3v0.9h-1.1v6.7h-1v-6.7h-1.2V17z"/>
-	<path d="M14.8,17h3.3v0.9H17v6.7h-1v-6.7h-1.2V17z"/>
-	<path d="M18.7,17h2.7v0.9h-1.7v2.4h1.5v0.9h-1.5v2.6h1.7v0.9h-2.7V17z"/>
-	<path d="M22.3,17h1.3c0.6,0,1,0.1,1.2,0.4c0.3,0.3,0.5,0.9,0.5,1.6c0,0.5-0.1,1-0.3,1.3c-0.2,0.3-0.4,0.5-0.8,0.6l1.4,3.7h-1
-		l-1.4-3.7v3.7h-1V17z M23.3,20.3c0.4,0,0.7-0.1,0.8-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.2,0-0.4-0.1-0.6s-0.1-0.3-0.2-0.4
-		s-0.2-0.2-0.3-0.2c-0.1,0-0.3-0.1-0.4-0.1h-0.2V20.3z"/>
-</g>
-<rect x="-33.5" y="14" class="st2" width="8.6" height="14"/>
-</svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#000000"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#000000"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#000000"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#000000"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#000000"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#000000"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#000000"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#000000"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#000000"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#000000"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#000000"/></svg>
--- a/assets/icons/close-dark.svg
+++ b/assets/icons/close-dark.svg
@@ -1,4 +1,4 @@
-<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#F3EFF5">
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#C5C5C5">
  <path d="M9 9H4v1h5V9z" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" />
 </svg>
--- a/assets/icons/close-light.svg
+++ b/assets/icons/close-light.svg
@@ -1,4 +1,4 @@
-<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#424242">
  <path d="M9 9H4v1h5V9z" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" />
 </svg>
--- a/assets/icons/frontmatter-dark.svg
+++ b/assets/icons/frontmatter-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#C5C5C5"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#C5C5C5" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#C5C5C5"/></svg>
--- a/assets/icons/frontmatter-light.svg
+++ b/assets/icons/frontmatter-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="#424242"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#424242"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#424242"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#424242"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#424242"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#424242" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#424242"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#424242"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#424242"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#424242"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#424242"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#424242"/></svg>
--- a/assets/icons/frontmatter-short-dark.svg
+++ b/assets/icons/frontmatter-short-dark.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve">
+<rect x="25" y="25" fill="none" stroke="#ffffff" stroke-width="50" stroke-miterlimit="10" width="1200" height="1200"/>
+<path fill="#ffffff" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#ffffff" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>
--- a/assets/icons/frontmatter-short-light.svg
+++ b/assets/icons/frontmatter-short-light.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve">
+<rect x="25" y="25" fill="none" stroke="#424242" stroke-width="50" stroke-miterlimit="10" width="1200" height="1200"/>
+<path fill="#424242" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#424242" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -50,6 +50,15 @@
  height: 100%;
 }

+.frontmatter.media_selection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.8;
+  text-align: center;
+	padding: 1rem 1.25rem;
+}
+
 .spinner,
 .spinner:before,
 .spinner:after {
@@ -357,4 +366,371 @@

 .table__cell__validation .warning {
  color: #E6AF2E;
+}
+
+/* Fields */
+.field__toggle {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.field__toggle input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.field__toggle__slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--vscode-button-secondaryBackground);
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.field__toggle__slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .field__toggle__slider {
+  background-color: var(--vscode-button-background);
+}
+
+input:focus + .field__toggle__slider {
+  box-shadow: 0 0 1px var(--vscode-button-background);
+}
+
+input:checked + .field__toggle__slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Metadata */
+.metadata_field {
+  margin-bottom: 1rem;
+}
+
+.metadata_field__label {
+  display: flex;
+  align-items: center;
+  margin-bottom: .5rem;
+}
+
+.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;
+  justify-content: space-between;
+}
+
+.metadata_field__datetime > .react-datepicker-wrapper {
+  margin-right: 1rem;
+}
+
+.metadata_field__datetime > button {
+  color: var(--vscode-button-secondaryForeground);
+  background-color: var(--vscode-button-secondaryBackground);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: auto;
+}
+
+.metadata_field__datetime > button:hover {
+  background-color: var(--vscode-button-secondaryHoverBackground);
+}
+
+.metadata_field__multiple_images {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.metadata_field__preview_image img {
+  display: block;
+  margin: 0 auto;
+  max-height: 16rem;
+}
+
+.metadata_field__preview_image__button {
+  background-color: transparent;
+  border: 2px dashed var(--vscode-button-background);
+  padding: 1.5rem;
+  filter: brightness(85%);
+}
+
+.metadata_field__preview_image__button:hover {
+  background-color: rgba(255, 255, 255, .1);
+  filter: brightness(100%);
+}
+
+.metadata_field__preview_image__button svg {
+  color: var(--vscode-foreground);
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto;
+}
+
+.metadata_field__preview_image__button span {
+  color: var(--vscode-foreground);
+  display: inline-block;
+  margin: 0 auto;
+  margin-top: .5rem;
+}
+
+.metadata_field__preview_image__preview {
+  background-color: var(--vscode-button-secondaryBackground);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.metadata_field__preview_image__remove {
+  background-color: var(--vscode-inputValidation-errorBackground);
+  color: var(--vscode-inputValidation-errorForeground);
+}
+
+.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);
+}
+
+.file_list__items {
+  padding: 0;
+  list-style: none;
+}
+
+.file_list__items__item {
+	color: var(--vscode-foreground);
+  font-size: var(--vscode-font-size);
+  font-weight: var(--vscode-font-weight);
+  cursor: pointer;
+  height: 22px;
+  line-height: 22px;
+  margin: 0 -1rem;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.file_list__items__item:hover {
+	background-color: var(--vscode-list-hoverBackground);
+  color: var(--vscode-list-hoverForeground);
+  cursor: pointer;
+}
+
+.file_list__items__item svg {
+  display: block;
+  flex-shrink: 0;
+  height: 20px;
+  width: 20px;
+  margin-right: .25rem;
+}
+
+.file_list__items__item span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Sponsor */
+.sponsor {
+  opacity: 0.5;
+}
+
+.sponsor:hover {
+  opacity: 1;
+}
+
+.sponsor:hover svg {
+  fill: currentcolor;
+}
+
+.sponsor svg {
+  height: 20px;
+  width: 20px;
+  margin-right: .25rem;
+}
+
+.sponsor a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-foreground);
+  text-decoration: none;
+}
+
+.sponsor a:hover {
+  color: var(--vscode-foreground);
+  text-decoration: none;
+}
+
+.sponsor a > span {
+  margin-right: .25rem;
+}
+
+/* Timepicker */
+.react-datepicker button:hover {
+  background-color: none !important;
+}
+
+.react-datepicker__triangle {
+  transform: translate3d(15px, 0px, 0px) !important;
+}
+
+.react-datepicker-time__input {
+  background: transparent !important;
+  color: #000 !important;
+}
+
+.react-datepicker-time__input input {
+  border: 1px solid #aeaeae !important;
 }
--- a/assets/powered-by-vercel.svg
+++ b/assets/powered-by-vercel.svg
--- a/assets/sponsors/powered-by-vercel.png
+++ b/assets/sponsors/powered-by-vercel.png
--- a/assets/sponsors/powered-by-vercel.svg
+++ b/assets/sponsors/powered-by-vercel.svg
--- a/assets/v3.0.0/baseview.png
+++ b/assets/v3.0.0/baseview.png
--- a/assets/v3.0.0/dashboard.png
+++ b/assets/v3.0.0/dashboard.png
--- a/assets/v3.0.0/metadata.png
+++ b/assets/v3.0.0/metadata.png
--- a/assets/v3.0.0/recent-files.png
+++ b/assets/v3.0.0/recent-files.png
--- a/assets/v3.0.0/welcome-light.png
+++ b/assets/v3.0.0/welcome-light.png
--- a/assets/v3.0.0/welcome-progress.png
+++ b/assets/v3.0.0/welcome-progress.png
--- a/assets/v3.0.0/welcome.png
+++ b/assets/v3.0.0/welcome.png
--- a/assets/v3.1.0/media.png
+++ b/assets/v3.1.0/media.png
--- a/assets/v4.0.0/banner-v2.png
+++ b/assets/v4.0.0/banner-v2.png
--- a/assets/v4.0.0/preview.png
+++ b/assets/v4.0.0/preview.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,8 @@
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+    plugins: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer'),
+    ],
+};
--- a/scripts/beta-release.js
+++ b/scripts/beta-release.js
@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+const packageJson = require('../package.json');
+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.description = `BETA Version of Front Matter. ${packageJson.description}`;
+packageJson.icon = "assets/frontmatter-beta.png";
+packageJson.homepage = "https://beta.frontmatter.codes";
+
+console.log(packageJson.version);
+
+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);
--- a/scripts/main-release.js
+++ b/scripts/main-release.js
@@ -0,0 +1,7 @@
+const fs = require('fs');
+const path = require('path');
+
+const packageJson = require('../package.json');
+packageJson.name = "vscode-front-matter";
+
+fs.writeFileSync(path.join(path.resolve('.'), 'package.json'), JSON.stringify(packageJson, null, 2));
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -1,15 +1,19 @@
-import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX } from './../constants/settings';
+import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX, CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX } from './../constants';
 import * as vscode from 'vscode';
 import { TaxonomyType } from "../models";
-import { CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_DATE_FIELD } from "../constants/settings";
 import { format } from "date-fns";
-import { ArticleHelper, SettingsHelper, SlugHelper } from '../helpers';
+import { ArticleHelper, Settings, SlugHelper } from '../helpers';
 import matter = require('gray-matter');
 import { Notifications } from '../helpers/Notifications';
 import { extname, basename } from 'path';
+import { COMMAND_NAME, DefaultFields } from '../constants';
+import { DashboardData } from '../models/DashboardData';
+import { ExplorerView } from '../explorerView/ExplorerView';
+import { DateHelper } from '../helpers/DateHelper';


 export class Article {
+	
  private static prevContent = "";

  /**
@@ -44,7 +48,7 @@ export class Article {
    }

    // Add all the known options to the selection list
-    const crntOptions = SettingsHelper.getTaxonomy(type);
+    const crntOptions = Settings.getTaxonomy(type);
    if (crntOptions && crntOptions.length > 0) {
      for (const crntOpt of crntOptions) {
        if (!options.find(o => o.label === crntOpt)) {
@@ -92,7 +96,6 @@ export class Article {
      ArticleHelper.update(editor, article);
    } catch (e) {
      Notifications.error(`Something failed while parsing the date format. Check your "${CONFIG_KEY}${SETTING_DATE_FORMAT}" setting.`);
-      console.log(e.message);
    }
  }

@@ -101,14 +104,7 @@ export class Article {
   * @param article 
   */
  public static updateDate(article: matter.GrayMatterFile<string>, forceCreate: boolean = false) {
-    const config = SettingsHelper.getConfig();
-    const dateFormat = config.get(SETTING_DATE_FORMAT) as string;
-    const dateField = config.get(SETTING_DATE_FIELD) as string || "date";
-    const modField = config.get(SETTING_MODIFIED_FIELD) as string || "date";
-
-    article = this.articleDate(article, dateFormat, dateField, forceCreate);
-    article = this.articleDate(article, dateFormat, modField, false);   
-
+    article.data = ArticleHelper.updateDates(article.data);   
    return article;
  }

@@ -116,7 +112,6 @@ export class Article {
   * Sets the article lastmod date
   */
  public static async setLastModifiedDate() {
-    const config = SettingsHelper.getConfig();
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
      return;
@@ -128,19 +123,13 @@ export class Article {
    }

    const cloneArticle = Object.assign({}, article);
-    const dateFormat = config.get(SETTING_DATE_FORMAT) as string;
-    const dateField = config.get(SETTING_MODIFIED_FIELD) as string || "lastmod";
+    const dateField = Settings.get(SETTING_MODIFIED_FIELD) as string || DefaultFields.LastModified;
    try {
-      if (dateFormat && typeof dateFormat === "string") {
-        cloneArticle.data[dateField] = format(new Date(), dateFormat);
-      } else {
-        cloneArticle.data[dateField] = new Date().toISOString();
-      }
+      cloneArticle.data[dateField] = Article.formatDate(new Date());

      ArticleHelper.update(editor, cloneArticle);
-    } catch (e) {
+    } catch (e: any) {
      Notifications.error(`Something failed while parsing the date format. Check your "${CONFIG_KEY}${SETTING_DATE_FORMAT}" setting.`);
-      console.log(e.message);
    }
  }

@@ -148,11 +137,10 @@ export class Article {
   * Generate the slug based on the article title
   */
 	public static async generateSlug() {
-    const config = SettingsHelper.getConfig();
-    const prefix = config.get(SETTING_SLUG_PREFIX) as string;
-    const suffix = config.get(SETTING_SLUG_SUFFIX) as string;
-    const updateFileName = config.get(SETTING_SLUG_UPDATE_FILE_NAME) as string;
-    const filePrefix = config.get<string>(SETTING_TEMPLATES_PREFIX);
+    const prefix = Settings.get(SETTING_SLUG_PREFIX) as string;
+    const suffix = Settings.get(SETTING_SLUG_SUFFIX) as string;
+    const updateFileName = Settings.get(SETTING_SLUG_UPDATE_FILE_NAME) as string;
+    const filePrefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
    const editor = vscode.window.activeTextEditor;

    if (!editor) {
@@ -184,7 +172,7 @@ export class Article {

          let newFileName = `${slugName}${ext}`;
          if (filePrefix && typeof filePrefix === "string") {
-            newFileName = `${format(new Date(), filePrefix)}-${newFileName}`;
+            newFileName = `${format(new Date(), DateHelper.formatUpdate(filePrefix))}-${newFileName}`;
          }

          const newPath = editor.document.uri.fsPath.replace(fileName, newFileName);
@@ -196,8 +184,7 @@ export class Article {
              overwrite: false
            });
          } catch (e) {
-            Notifications.error(`Failed to rename file.`);
-            console.log(e?.message || e);
+            Notifications.error(`Failed to rename file: ${e?.message || e}`);
          }
        }
      }
@@ -231,8 +218,7 @@ export class Article {
    const editor = vscode.window.activeTextEditor;

 		if (txtChanges.length > 0 && editor && ArticleHelper.isMarkdownFile()) {
-      const config = SettingsHelper.getConfig();
-			const autoUpdate = config.get(SETTING_AUTO_UPDATE_DATE);
+			const autoUpdate = Settings.get(SETTING_AUTO_UPDATE_DATE);

 			if (autoUpdate) {  
        const article = ArticleHelper.getFrontMatter(editor);
@@ -251,6 +237,43 @@ export class Article {
 		}
  }

+  /**
+   * Format the date to the defined format
+   */
+  public static formatDate(dateValue: Date): string {
+    const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
+
+    if (dateFormat && typeof dateFormat === "string") {
+      return format(dateValue, DateHelper.formatUpdate(dateFormat));
+    } else {
+      return typeof dateValue.toISOString === 'function' ? dateValue.toISOString() : dateValue?.toString();
+    }
+  }
+
+  /**
+   * Insert an image from the media dashboard into the article
+   */
+  public static async insertImage() {
+		let editor = vscode.window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    const position = editor.selection.active;
+
+    await vscode.commands.executeCommand(COMMAND_NAME.dashboard, {
+      type: "media",
+      data: {
+        filePath: editor.document.uri.fsPath,
+        fieldName: basename(editor.document.uri.fsPath),
+        position
+      }
+    } as DashboardData);
+
+    // Let the editor panel know you are selecting an image
+    ExplorerView.getInstance().getMediaSelection();
+	}
+
  /**
   * Get the current article
   */
@@ -275,13 +298,9 @@ export class Article {
   * @param field 
   * @param forceCreate 
   */
-  private static articleDate(article: matter.GrayMatterFile<string>, dateFormat: string, field: string, forceCreate: boolean) {
+  private static articleDate(article: matter.GrayMatterFile<string>, field: string, forceCreate: boolean) {
    if (typeof article.data[field] !== "undefined" || forceCreate) {
-      if (dateFormat && typeof dateFormat === "string") {
-        article.data[field] = format(new Date(), dateFormat);
-      } else {
-        article.data[field] = new Date().toISOString();
-      }
+      article.data[field] = Article.formatDate(new Date());
    }
    return article;
  }
--- a/src/commands/Content.ts
+++ b/src/commands/Content.ts
@@ -0,0 +1,31 @@
+import { commands, QuickPickItem, window } from 'vscode'; 
+import { COMMAND_NAME } from '../constants';
+
+export class Content {
+
+  public static async create() {
+
+    const options: QuickPickItem[] = [{
+      label: "Create content by content type",
+      description: "Select if you want to create new content by the available content type(s)"
+    }, {
+      label: "Create content by template",
+      description: "Select if you want to create new content by the available template(s)"
+    } as QuickPickItem];
+
+    const selectedOption = await window.showQuickPick(options, {
+      placeHolder: `Select how you want to create your new content`,
+      canPickMany: false
+    });
+
+    if (selectedOption) {
+      if (selectedOption.label === options[0].label) {
+        commands.executeCommand(COMMAND_NAME.createByContentType);
+      } else {
+        commands.executeCommand(COMMAND_NAME.createByTemplate);
+      }
+    }
+
+    return;
+  }
+}
--- a/src/commands/Dashboard.ts
+++ b/src/commands/Dashboard.ts
@@ -0,0 +1,681 @@
+import { SETTINGS_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTINGS_DASHBOARD_OPENONSTART, SETTINGS_DASHBOARD_MEDIA_SNIPPET, SETTING_TAXONOMY_CONTENT_TYPES, DefaultFields, HOME_PAGE_NAVIGATION_ID, ExtensionState, COMMAND_NAME, SETTINGS_FRAMEWORK_ID } from '../constants';
+import { ArticleHelper } from './../helpers/ArticleHelper';
+import { basename, dirname, extname, join, parse } from "path";
+import { existsSync, readdirSync, statSync, unlinkSync, writeFileSync } from "fs";
+import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace, env, Position } from "vscode";
+import { Settings as SettingsHelper } from '../helpers';
+import { Framework, TaxonomyType } from '../models';
+import { Folders } from './Folders';
+import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
+import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
+import { Page } from '../dashboardWebView/models/Page';
+import { openFileInEditor } from '../helpers/openFileInEditor';
+import { Template } from './Template';
+import { Notifications } from '../helpers/Notifications';
+import { Settings } from '../dashboardWebView/models/Settings';
+import { Extension } from '../helpers/Extension';
+import { ViewType } from '../dashboardWebView/state';
+import { EditorHelper, WebviewHelper } from '@estruyf/vscode';
+import { MediaInfo, MediaPaths } from './../models/MediaPaths';
+import { decodeBase64Image } from '../helpers/decodeBase64Image';
+import { DashboardData } from '../models/DashboardData';
+import { ExplorerView } from '../explorerView/ExplorerView';
+import { MediaLibrary } from '../helpers/MediaLibrary';
+import imageSize from 'image-size';
+import { parseWinPath } from '../helpers/parseWinPath';
+import { DateHelper } from '../helpers/DateHelper';
+import { FrameworkDetector } from '../helpers/FrameworkDetector';
+
+export class Dashboard {
+  private static webview: WebviewPanel | null = null;
+  private static isDisposed: boolean = true;
+  private static media: MediaInfo[] = [];
+  private static timers: { [folder: string]: any } = {};
+  private static _viewData: DashboardData | undefined;
+  private static mediaLib: MediaLibrary;
+
+  public static get viewData(): DashboardData | undefined {
+    return Dashboard._viewData;
+  }
+
+  /** 
+   * Init the dashboard
+   */
+  public static async init() {
+    const openOnStartup = SettingsHelper.get(SETTINGS_DASHBOARD_OPENONSTART);
+    if (openOnStartup) {
+      Dashboard.open();
+    }
+  }
+
+  /**
+   * Open or reveal the dashboard
+   */
+  public static async open(data?: DashboardData) {
+    this.mediaLib = MediaLibrary.getInstance();
+    
+    Dashboard._viewData = data;
+
+    if (Dashboard.isOpen) {
+			Dashboard.reveal();
+		} else {
+			Dashboard.create();
+		}
+  }
+
+  /**
+   * Check if the dashboard is still open
+   */
+  public static get isOpen(): boolean {
+    return !Dashboard.isDisposed;
+  }
+
+  /**
+   * Reveal the dashboard if it is open
+   */
+  public static reveal() {
+    if (Dashboard.webview) {
+      Dashboard.webview.reveal();
+    }
+  }
+  
+  /**
+   * Create the dashboard webview
+   */
+  public static async create() {
+    const extensionUri = Extension.getInstance().extensionPath;
+
+    // Create the preview webview
+    Dashboard.webview = window.createWebviewPanel(
+      'frontMatterDashboard',
+      'FrontMatter Dashboard',
+      ViewColumn.One,
+      {
+        enableScripts: true
+      }
+    );
+
+    Dashboard.isDisposed = false;
+
+    Dashboard.webview.iconPath = {
+      dark: Uri.file(join(extensionUri.fsPath, 'assets/icons/frontmatter-short-dark.svg')),
+      light: Uri.file(join(extensionUri.fsPath, 'assets/icons/frontmatter-short-light.svg'))
+    };
+
+    Dashboard.webview.webview.html = Dashboard.getWebviewContent(Dashboard.webview.webview, extensionUri);
+
+    Dashboard.webview.onDidChangeViewState(() => {
+      if (!this.webview?.visible) {
+        Dashboard._viewData = undefined;
+        const panel = ExplorerView.getInstance(extensionUri);
+        panel.getMediaSelection();
+      }
+    });
+
+    Dashboard.webview.onDidDispose(() => {
+      Dashboard.isDisposed = true;
+      Dashboard._viewData = undefined;
+      const panel = ExplorerView.getInstance(extensionUri);
+      panel.getMediaSelection();
+    });
+
+    SettingsHelper.onConfigChange((global?: any) => {
+      Dashboard.getSettings();
+    });
+
+    Dashboard.webview.webview.onDidReceiveMessage(async (msg) => {
+      switch(msg.command) {
+        case DashboardMessage.getViewType:
+          if (Dashboard._viewData) {
+            Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, data: Dashboard._viewData });
+          }
+          break;
+        case DashboardMessage.getData:
+          Dashboard.getSettings();
+          Dashboard.getPages();
+          break;
+        case DashboardMessage.openFile:
+          openFileInEditor(msg.data);
+          break;
+        case DashboardMessage.createContent:
+          await commands.executeCommand(COMMAND_NAME.createContent);
+          break;
+        case DashboardMessage.createByContentType:
+          await commands.executeCommand(COMMAND_NAME.createByContentType);
+          break;
+        case DashboardMessage.createByTemplate:
+          await commands.executeCommand(COMMAND_NAME.createByTemplate);
+          break;
+        case DashboardMessage.updateSetting:
+          Dashboard.updateSetting(msg.data);
+          break;
+        case DashboardMessage.initializeProject:
+          await commands.executeCommand(COMMAND_NAME.init, Dashboard.getSettings);
+          break;
+        case DashboardMessage.reload:
+          if (!Dashboard.isDisposed) {
+            Dashboard.webview?.dispose();
+            setTimeout(() => {
+              Dashboard.open();
+            }, 100);
+          }
+          break;
+        case DashboardMessage.setPageViewType:
+          Extension.getInstance().setState(ExtensionState.PagesView, msg.data);
+          break;
+        case DashboardMessage.getMedia:
+          Dashboard.getMedia(msg?.data?.page, msg?.data?.folder);
+          break;
+        case DashboardMessage.copyToClipboard:
+          env.clipboard.writeText(msg.data);
+          break;
+        case DashboardMessage.refreshMedia:
+          Dashboard.resetMedia();
+          Dashboard.getMedia(0, msg?.data?.folder);
+          break;
+        case DashboardMessage.uploadMedia:
+          Dashboard.saveFile(msg?.data);
+          break;
+        case DashboardMessage.deleteMedia:
+          Dashboard.deleteFile(msg?.data);
+          break;
+        case DashboardMessage.insertPreviewImage:
+          Dashboard.insertImage(msg?.data);
+          break;
+        case DashboardMessage.updateMediaMetadata:
+          Dashboard.updateMediaMetadata(msg?.data);
+          break;
+        case DashboardMessage.createMediaFolder:
+          await commands.executeCommand(COMMAND_NAME.createFolder, msg?.data);
+          break;
+        case DashboardMessage.setFramework:
+          Dashboard.setFramework(msg?.data);
+          break;
+      }
+    });
+  }
+
+  /**
+   * Reset media array
+   */
+  public static resetMedia() {
+    Dashboard.media = [];
+  }
+
+  public static switchFolder(folderPath: string) {
+    Dashboard.resetMedia();
+    Dashboard.getMedia(0, folderPath);
+  }
+  
+  /**
+   * Insert an image into the front matter or contents
+   * @param data 
+   */
+  private static async insertImage(data: any) {
+    if (data?.file && data?.image) {
+      if (!data?.position) {
+        await commands.executeCommand(`workbench.view.extension.frontmatter-explorer`);
+      }
+
+      await EditorHelper.showFile(data.file);
+      Dashboard._viewData = undefined;
+      
+      const extensionUri = Extension.getInstance().extensionPath;
+      const panel = ExplorerView.getInstance(extensionUri);
+
+      if (data?.position) {
+        const wsFolder = Folders.getWorkspaceFolder();
+        const editor = window.activeTextEditor;
+        const line = data.position.line;
+        const character = data.position.character;
+        if (line) {
+          let imgPath = data.image;
+          const filePath = data.file;
+          const absImgPath = join(parseWinPath(wsFolder?.fsPath || ""), imgPath);
+
+          const imgDir = dirname(absImgPath);
+          const fileDir = dirname(filePath);
+
+          if (imgDir === fileDir) {
+            imgPath = join('/', basename(imgPath));
+
+            // Snippets are already parsed, so update the URL of the image
+            if (data.snippet) {
+              data.snippet = data.snippet.replace(data.image, imgPath);
+            }
+          }
+
+          await editor?.edit(builder => builder.insert(new Position(line, character), data.snippet || `![${data.alt || data.caption || ""}](${imgPath})`));
+        }
+        panel.getMediaSelection();
+      } else {
+        panel.getMediaSelection();
+        panel.updateMetadata({field: data.fieldName, value: data.image });
+      }
+    }
+  }
+
+  /**
+   * Retrieve the settings for the dashboard
+   */
+  private static async getSettings() { 
+    const ext = Extension.getInstance();
+    const wsFolder = Folders.getWorkspaceFolder();
+    const isInitialized = await Template.isInitialized();
+    
+    Dashboard.postWebviewMessage({
+      command: DashboardCommand.settings,
+      data: {
+        beta: ext.isBetaVersion(),
+        wsFolder: wsFolder ? wsFolder.fsPath : '',
+        staticFolder: SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER),
+        folders: Folders.get(),
+        initialized: isInitialized,
+        tags: SettingsHelper.getTaxonomy(TaxonomyType.Tag),
+        categories: SettingsHelper.getTaxonomy(TaxonomyType.Category),
+        openOnStart: SettingsHelper.get(SETTINGS_DASHBOARD_OPENONSTART),
+        versionInfo: ext.getVersion(),
+        pageViewType: await ext.getState<ViewType | undefined>(ExtensionState.PagesView),
+        mediaSnippet: SettingsHelper.get<string[]>(SETTINGS_DASHBOARD_MEDIA_SNIPPET) || [],
+        contentTypes: SettingsHelper.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
+        contentFolders: Folders.get().map(f => f.path),
+        crntFramework: SettingsHelper.get<string>(SETTINGS_FRAMEWORK_ID),
+        framework: (!isInitialized && wsFolder) ? FrameworkDetector.get(wsFolder.fsPath) : null,
+      } as Settings
+    });
+  }
+
+  /**
+   * Set the current site-generator or framework + related settings
+   * @param frameworkId 
+   */
+  private static setFramework(frameworkId: string | null) {
+    SettingsHelper.update(SETTINGS_FRAMEWORK_ID, frameworkId, true);
+
+    if (frameworkId) {
+      const allFrameworks = FrameworkDetector.getAll();
+      const framework = allFrameworks.find((f: Framework) => f.name === frameworkId);
+      if (framework) {
+        SettingsHelper.update(SETTINGS_CONTENT_STATIC_FOLDER, framework.static, true);
+      } else {
+        SettingsHelper.update(SETTINGS_CONTENT_STATIC_FOLDER, "", true);
+      }
+    }
+  }
+
+  /**
+   * Update a setting from the dashboard
+   */
+  private static async updateSetting(data: { name: string, value: any }) {
+    await SettingsHelper.update(data.name, data.value);
+    Dashboard.getSettings();
+  }
+
+  /**
+   * Retrieve all media files
+   */
+  private static async getMedia(page: number = 0, requestedFolder: string = '') {
+    const wsFolder = Folders.getWorkspaceFolder();
+    const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+    const contentFolders = Folders.get();
+    const viewData = Dashboard.viewData;
+    let selectedFolder = requestedFolder;
+
+    // If the static folder is not set, retreive the last opened location
+    if (!selectedFolder) {
+      const stateValue = await Extension.getInstance().getState<string | undefined>(ExtensionState.SelectedFolder);
+
+      if (stateValue !== HOME_PAGE_NAVIGATION_ID) {
+        // Support for page bundles
+        if (viewData?.data?.filePath && viewData?.data?.filePath.endsWith('index.md')) {
+          const folderPath = parse(viewData.data.filePath).dir;
+          selectedFolder = folderPath;
+        } else if (stateValue && existsSync(stateValue)) {
+          selectedFolder = stateValue;
+        }
+      }
+    }
+
+    // Go to the home folder
+    if (selectedFolder === HOME_PAGE_NAVIGATION_ID) {
+      selectedFolder = '';
+    }
+
+    let relSelectedFolderPath = selectedFolder;
+    const parsedPath = parseWinPath(wsFolder?.fsPath || "");
+    if (selectedFolder && selectedFolder.startsWith(parsedPath)) {
+      relSelectedFolderPath = selectedFolder.replace(parsedPath, '');
+    }
+
+    if (relSelectedFolderPath.startsWith('/')) {
+      relSelectedFolderPath = relSelectedFolderPath.substring(1);
+    }
+
+    let allMedia: MediaInfo[] = [];
+
+    if (relSelectedFolderPath) {
+      const files = await workspace.findFiles(join(relSelectedFolderPath, '/*'));
+      const media = Dashboard.filterMedia(files);
+      allMedia = [...media];
+    } else {
+      if (staticFolder) {
+        const folderSearch = join(staticFolder || "", '/*');
+        const files = await workspace.findFiles(folderSearch);
+        const media = Dashboard.filterMedia(files);
+
+        allMedia = [...media];
+      }
+
+      if (contentFolders && wsFolder) {
+        for (let i = 0; i < contentFolders.length; i++) {
+          const contentFolder = contentFolders[i];
+          const relFolderPath = contentFolder.path.substring(wsFolder.fsPath.length + 1);
+          const folderSearch = relSelectedFolderPath ? join(relSelectedFolderPath, '/*') : join(relFolderPath, '/*');
+          const files = await workspace.findFiles(folderSearch);
+          const media = Dashboard.filterMedia(files);
+    
+          allMedia = [...allMedia, ...media];
+        }
+      }
+    }
+
+    allMedia = allMedia.sort((a, b) => {
+      if (b.fsPath < a.fsPath) {
+        return -1;
+      }
+      if (b.fsPath > a.fsPath) {
+        return 1;
+      }
+      return 0;
+    });
+
+    Dashboard.media = Object.assign([], allMedia);
+
+    let files: MediaInfo[] = Dashboard.media;
+
+    // Retrieve the total after filtering and before the slicing happens
+    const total = files.length;
+
+    // Get media set
+    files = files.slice(page * 16, ((page + 1) * 16));
+    files = files.map((file) => {
+      try {
+        const metadata = Dashboard.mediaLib.get(file.fsPath);
+
+        return {
+          ...file,
+          stats: statSync(file.fsPath),
+          dimensions: imageSize(file.fsPath),
+          ...metadata
+        };
+      } catch (e) {
+        return {...file, stats: undefined};
+      }
+    });
+    files = files.filter(f => f.stats !== undefined);
+
+    // Retrieve all the folders
+    let allContentFolders: string[] = [];
+    let allFolders: string[] = [];
+
+    if (selectedFolder) {
+      if (existsSync(selectedFolder)) {
+        allFolders = readdirSync(selectedFolder, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(selectedFolder, dir.name)));
+      }
+    } else {
+      for (const contentFolder of contentFolders) {
+        const contentPath = contentFolder.path;
+        if (contentPath && existsSync(contentPath)) {
+          const subFolders = readdirSync(contentPath, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(contentPath, dir.name)));
+          allContentFolders = [...allContentFolders, ...subFolders];
+        }
+      }
+  
+      const staticPath = join(parseWinPath(wsFolder?.fsPath || ""), staticFolder || "");
+      if (staticPath && existsSync(staticPath)) {
+        allFolders = readdirSync(staticPath, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(staticPath, dir.name)));
+      }
+    }
+
+    // Store the last opened folder
+    await Extension.getInstance().setState(ExtensionState.SelectedFolder, requestedFolder === HOME_PAGE_NAVIGATION_ID ? HOME_PAGE_NAVIGATION_ID : selectedFolder);
+
+    Dashboard.postWebviewMessage({
+      command: DashboardCommand.media,
+      data: {
+        media: files,
+        total: total,
+        folders: [...allContentFolders, ...allFolders],
+        selectedFolder
+      } as MediaPaths
+    });
+  }
+
+  /**
+   * Retrieve all the markdown pages
+   */
+  private static async getPages() {
+    const wsFolder = Folders.getWorkspaceFolder();
+
+    const descriptionField = SettingsHelper.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description;
+    const dateField = SettingsHelper.get(SETTING_DATE_FIELD) as string || DefaultFields.PublishingDate;
+    const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+
+    const folderInfo = await Folders.getInfo();
+    const pages: Page[] = [];
+
+    if (folderInfo) {
+      for (const folder of folderInfo) {
+        for (const file of folder.lastModified) {
+          if (file.fileName.endsWith(`.md`) || file.fileName.endsWith(`.mdx`)) {
+            try {
+              const article = ArticleHelper.getFrontMatterByPath(file.filePath);
+
+              if (article?.data.title) {
+                const page: Page = {
+                  ...article.data,
+                  // FrontMatter properties
+                  fmFolder: folder.title,
+                  fmModified: file.mtime,
+                  fmFilePath: file.filePath,
+                  fmFileName: file.fileName,
+                  fmDraft: article?.data.draft ? "Draft" : "Published",
+                  fmYear: article?.data[dateField] ? DateHelper.tryParse(article?.data[dateField])?.getFullYear() : null,
+                  // Make sure these are always set
+                  title: article?.data.title,
+                  slug: article?.data.slug,
+                  date: article?.data[dateField] || "",
+                  draft: article?.data.draft,
+                  description: article?.data[descriptionField] || "",
+                };
+
+                const contentType = ArticleHelper.getContentType(article.data);
+                const previewField = contentType.fields.find(field => field.isPreviewImage && field.type === "image")?.name || "preview";
+
+                if (article?.data[previewField] && wsFolder) {
+                  let fieldValue = article?.data[previewField];
+                  if (fieldValue && Array.isArray(fieldValue)) {
+                    if (fieldValue.length > 0) {
+                      fieldValue = fieldValue[0];
+                    } else {
+                      fieldValue = undefined;
+                    }
+                  }
+
+                  // Revalidate as the array could have been empty
+                  if (fieldValue) {
+                    const staticPath = join(wsFolder.fsPath, staticFolder || "", fieldValue);
+                    const contentFolderPath = join(dirname(file.filePath), fieldValue);
+
+                    let previewUri = null;
+                    if (existsSync(staticPath)) {
+                      previewUri = Uri.file(staticPath);
+                    } else if (existsSync(contentFolderPath)) {
+                      previewUri = Uri.file(contentFolderPath);
+                    }
+
+                    if (previewUri) {
+                      const preview = Dashboard.webview?.webview.asWebviewUri(previewUri);
+                      page[previewField] = preview?.toString() || "";
+                    } else {
+                      page[previewField] = "";
+                    }
+                  }
+                }
+      
+                pages.push(page);
+              }
+            } catch (error: any) {
+              Notifications.error(`File error: ${file.filePath} - ${error?.message || error}`);
+            }
+          }
+        }
+      }
+    }
+
+    Dashboard.postWebviewMessage({
+      command: DashboardCommand.pages,
+      data: pages
+    });
+  }
+
+  /**
+   * Filter the media files
+   */
+  private static filterMedia(files: Uri[]) {
+    return files.filter(file => {
+      const ext = extname(file.fsPath);
+      return ['.jpg', '.jpeg', '.png', '.gif', '.svg'].includes(ext);
+    }).map((file) => ({
+      fsPath: file.fsPath,
+      vsPath: Dashboard.webview?.webview.asWebviewUri(file).toString(),
+      stats: undefined
+    } as MediaInfo));
+  }
+
+  /**
+   * Save the dropped file in the current folder
+   * @param fileData 
+   */
+  private static async saveFile({fileName, contents, folder}: { fileName: string; contents: string; folder: string | null }) {
+    if (fileName && contents) {
+      const wsFolder = Folders.getWorkspaceFolder();
+      const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+      const wsPath = wsFolder ? wsFolder.fsPath : "";
+      let absFolderPath = join(wsPath, staticFolder || "");
+
+      if (folder) {
+        absFolderPath = folder;
+      }
+
+      if (!existsSync(absFolderPath)) {
+        absFolderPath = join(wsPath, folder || "");
+      }
+
+      if (!existsSync(absFolderPath)) {
+        Notifications.error(`We couldn't find your selected folder.`);
+        return;
+      }
+
+      const staticPath = join(absFolderPath, fileName);
+      const imgData = decodeBase64Image(contents);
+
+      if (imgData) {
+        writeFileSync(staticPath, imgData.data);
+        Notifications.info(`File ${fileName} uploaded to: ${folder}`);
+        
+        const folderPath = `${folder}`;
+        if (Dashboard.timers[folderPath]) {
+          clearTimeout(Dashboard.timers[folderPath]);
+          delete Dashboard.timers[folderPath];
+        }
+        
+        Dashboard.timers[folderPath] = setTimeout(() => {
+          Dashboard.media = [];
+          Dashboard.getMedia(0, folder || "");
+          delete Dashboard.timers[folderPath];
+        }, 500);
+      } else {
+        Notifications.error(`Something went wrong uploading ${fileName}`);
+      }
+    }
+  }
+
+  /**
+   * Delete the selected file
+   * @param fileData 
+   */
+  private static async deleteFile({ file, page, folder }: { file: string; page: number; folder: string | null; }) {
+    if (!file) {
+      return;
+    }
+
+    try {
+      unlinkSync(file);
+
+      Dashboard.media = [];
+      Dashboard.getMedia(page || 0, folder || "");
+    } catch(err) {
+      Notifications.error(`Something went wrong deleting ${basename(file)}`);
+    }
+  }
+
+  /**
+   * Update the metadata of the selected file
+   */
+  private static async updateMediaMetadata({ file, filename, page, folder, ...metadata }: { file:string; filename:string; page: number; folder: string | null; metadata: any; }) {
+    Dashboard.mediaLib.set(file, metadata);
+
+    // Check if filename needs to be updated
+    Dashboard.mediaLib.updateFilename(file, filename);
+
+    Dashboard.getMedia(page || 0, folder || "");
+  }
+
+  /**
+   * Post data to the dashboard
+   * @param msg 
+   */
+  private static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) {
+    if (Dashboard.isDisposed) {
+      return;
+    }
+
+    if (Dashboard.webview) {
+      Dashboard.webview?.webview.postMessage(msg);
+    }
+  }
+  
+  /**
+   * Retrieve the webview HTML contents
+   * @param webView 
+   */
+  private static getWebviewContent(webView: Webview, extensionPath: Uri): string {
+    const scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', 'pages.js'));
+
+    const nonce = WebviewHelper.getNonce();
+
+    const ext = Extension.getInstance();
+    const version = ext.getVersion();
+    const isBeta = ext.isBetaVersion();
+
+    return `
+      <!DOCTYPE html>
+      <html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
+      <head>
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'; script-src 'nonce-${nonce}'; style-src ${webView.cspSource} 'self' 'unsafe-inline'; font-src ${webView.cspSource}; connect-src https://o1022172.ingest.sentry.io">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>Front Matter Dashboard</title>
+      </head>
+      <body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
+        <div id="app" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${version.usedVersion ? "" : `data-showWelcome="true"`}></div>
+
+        <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
+
+        <script nonce="${nonce}" src="${scriptUri}"></script>
+      </body>
+      </html>
+    `;
+  }
+}
--- a/src/commands/Folders.ts
+++ b/src/commands/Folders.ts
@@ -1,39 +1,85 @@
+import { Questions } from './../helpers/Questions';
+import { SETTINGS_CONTENT_PAGE_FOLDERS, SETTINGS_CONTENT_STATIC_FOLDER } from './../constants';
 import { commands, Uri, workspace, window } from "vscode";
-import { CONFIG_KEY, SETTINGS_CONTENT_FOLDERS } from "../constants";
-import { basename } from "path";
-import { ContentFolder, FolderInfo } from "../models";
+import { basename, join } from "path";
+import { ContentFolder, FileInfo, FolderInfo } from "../models";
 import uniqBy = require("lodash.uniqby");
 import { Template } from "./Template";
 import { Notifications } from "../helpers/Notifications";
-import { CONTEXT } from "../constants/context";
-import { SettingsHelper } from "../helpers";
+import { Settings } from "../helpers";
+import { existsSync, mkdirSync } from 'fs';
+import { format } from 'date-fns';
+import { Dashboard } from './Dashboard';
+import { parseWinPath } from '../helpers/parseWinPath';
+
+export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;

 export class Folders {

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

+    const folders = Folders.get();
    const location = folders.find(f => f.title === selectedFolder);
    if (location) {
-      const folderPath = Folders.getFolderPath(Uri.file(location.fsPath));
+      const folderPath = Folders.getFolderPath(Uri.file(location.path));
      if (folderPath) {
        Template.create(folderPath);
      }
@@ -50,7 +96,7 @@ export class Folders {

      let folders = Folders.get();

-      const exists = folders.find(f => f.paths.includes(folder.fsPath) || f.paths.includes(wslPath));
+      const exists = folders.find(f => f.path.includes(folder.fsPath) || f.path.includes(wslPath));

      if (exists) {
        Notifications.warning(`Folder is already registered`);
@@ -65,17 +111,14 @@ export class Folders {

      folders.push({
        title: folderName,
-        fsPath: folder.fsPath,
-        paths: folder.fsPath === wslPath ? [folder.fsPath] : [folder.fsPath, wslPath]
+        path: folder.fsPath
      } as ContentFolder);

-      folders = uniqBy(folders, f => f.fsPath);
+      folders = uniqBy(folders, f => f.path);
      await Folders.update(folders);

      Notifications.info(`Folder registered`);
    }
-
-		Folders.updateVsCodeCtx();
  }

  /**
@@ -85,23 +128,9 @@ export class Folders {
  public static async unregister(folder: Uri) {
    if (folder && folder.path) {
      let folders = Folders.get();
-      folders = folders.filter(f => f.fsPath !== folder.fsPath);
+      folders = folders.filter(f => f.path !== folder.fsPath);
      await Folders.update(folders);
    }
-    
-    Folders.updateVsCodeCtx();
-  }
-
-  /**
-   * Update the registered folders context
-   */
-  public static updateVsCodeCtx() {
-    const folders = Folders.get();
-    let allFolders: string[] = [];
-    for (const folder of folders) {
-      allFolders = [...allFolders, ...folder.paths]
-    }
-    commands.executeCommand('setContext', CONTEXT.registeredFolders, allFolders);
  }

  /**
@@ -111,30 +140,108 @@ export class Folders {
   */
  public static getFolderPath(folder: Uri) {
    let folderPath = "";
+    const wsFolder = Folders.getWorkspaceFolder();
 		if (folder && folder.fsPath) {
 			folderPath = folder.fsPath;
-		} else if (workspace.workspaceFolders && workspace.workspaceFolders.length > 0) {
-			folderPath = workspace.workspaceFolders[0].uri.fsPath;
+		} else if (wsFolder) {
+			folderPath = wsFolder.fsPath;
 		}
    return folderPath;
  }

+  /**
+   * Retrieve the workspace folder
+   */
+  public static getWorkspaceFolder(): Uri | undefined {
+    const folders = workspace.workspaceFolders;
+    
+    if (folders && folders.length === 1) {
+      return folders[0].uri;
+    } else if (folders && folders.length > 1) {
+      let projectFolder = undefined; 
+      
+      for (const folder of folders) {
+        if (!projectFolder && existsSync(join(folder.uri.fsPath, Settings.globalFile))) {
+          projectFolder = folder.uri;
+        }
+      }
+
+      if (!projectFolder) {
+        window.showWorkspaceFolderPick({
+          placeHolder: `Please select the main workspace folder for Front Matter to use.`
+        }).then(selectedFolder => {
+          if (selectedFolder) {
+            Settings.createGlobalFile(selectedFolder.uri);
+            // Full reload to make sure the whole extension is reloaded correctly
+            commands.executeCommand(`workbench.action.reloadWindow`);
+          }
+        });
+      }
+
+      return projectFolder;
+    }
+    
+    return undefined;
+  }
+
+  /**
+   * Get the name of the project
+   */
+  public static getProjectFolderName(): string {
+    const wsFolder = Folders.getWorkspaceFolder();
+    if (wsFolder) {
+      return basename(wsFolder.fsPath);
+    }
+    return "";
+  }
+
  /**
   * Get the registered folders information
   */
-  public static async getInfo(): Promise<FolderInfo[] | null> {
+  public static async getInfo(limit?: number): Promise<FolderInfo[] | null> {
    const folders = Folders.get();
    if (folders && folders.length > 0) {
      let folderInfo: FolderInfo[] = [];
      
      for (const folder of folders) {
        try {
-          const files = await workspace.fs.readDirectory(Uri.file(folder.fsPath));
-          if (files) {
-            folderInfo.push({
-              title: folder.title,
-              files: files.length
-            });
+          const projectName = Folders.getProjectFolderName();
+          let projectStart = folder.path.split(projectName).pop();
+          if (projectStart) {
+            projectStart = projectStart.replace(/\\/g, '/');
+            projectStart = projectStart.startsWith('/') ? projectStart.substr(1) : projectStart;
+            const mdFiles = await workspace.findFiles(join(projectStart, '**/*.md'));
+            const mdxFiles = await workspace.findFiles(join(projectStart, '**/*.mdx'));
+            let files = [...mdFiles, ...mdxFiles];
+            if (files) {
+              let fileStats: FileInfo[] = [];
+
+              for (const file of files) {
+                try {
+                  const fileName = basename(file.fsPath);
+                  const stats = await workspace.fs.stat(file);
+                  fileStats.push({
+                    filePath: file.fsPath,
+                    fileName,
+                    ...stats
+                  });
+                } catch (error) {
+                  // Skip the file
+                }
+              }
+
+              fileStats = fileStats.sort((a, b) => b.mtime - a.mtime);
+              
+              if (limit) {
+                fileStats = fileStats.slice(0, limit);
+              }
+
+              folderInfo.push({
+                title: folder.title,
+                files: files.length,
+                lastModified: fileStats
+              });
+            }
          }
        } catch (e) {
          // Skip the current folder
@@ -151,10 +258,14 @@ export class Folders {
   * Get the folder settings
   * @returns 
   */
-  private static get() {
-    const config = SettingsHelper.getConfig();
-    const folders: ContentFolder[] = config.get(SETTINGS_CONTENT_FOLDERS) as ContentFolder[];
-    return folders;
+  public static get(): ContentFolder[] {
+    const wsFolder = Folders.getWorkspaceFolder();
+    const folders: ContentFolder[] = Settings.get(SETTINGS_CONTENT_PAGE_FOLDERS) as ContentFolder[];
+    
+    return folders.map(folder => ({
+      title: folder.title,
+      path: Folders.absWsFolder(folder, wsFolder)
+    }));
  }
  
  /**
@@ -162,7 +273,37 @@ export class Folders {
   * @param folders 
   */
  private static async update(folders: ContentFolder[]) {
-    const config = SettingsHelper.getConfig();
-    await config.update(SETTINGS_CONTENT_FOLDERS, folders);
+    const wsFolder = Folders.getWorkspaceFolder();
+    let folderDetails = folders.map(folder => ({ 
+      title: folder.title, 
+      path: Folders.relWsFolder(folder, wsFolder) 
+    }));
+    await Settings.update(SETTINGS_CONTENT_PAGE_FOLDERS, folderDetails, true);
+  }
+
+  /**
+   * Generate the absolute URL for the workspace
+   * @param folder 
+   * @param wsFolder 
+   * @returns 
+   */
+  private static absWsFolder(folder: ContentFolder, wsFolder?: Uri) {
+    const isWindows = process.platform === 'win32';
+    let absPath =  folder.path.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
+    absPath = isWindows ? absPath.split('/').join('\\') : absPath;
+    return absPath;
+  }
+
+  /**
+   * Generate relative folder path
+   * @param folder 
+   * @param wsFolder 
+   * @returns 
+   */
+  private static relWsFolder(folder: ContentFolder, wsFolder?: Uri) {
+    const isWindows = process.platform === 'win32';
+    let absPath =  folder.path.replace(parseWinPath(wsFolder?.fsPath || ""), WORKSPACE_PLACEHOLDER);
+    absPath = isWindows ? absPath.split('\\').join('/') : absPath;
+    return absPath;
  }
 }
--- a/src/commands/Preview.ts
+++ b/src/commands/Preview.ts
@@ -1,11 +1,11 @@
-import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME } from './../constants/settings';
+import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join } from "path";
 import { commands, env, Uri, ViewColumn, window } from "vscode";
-import { SettingsHelper } from '../helpers';
+import { Settings } from '../helpers';
 import { PreviewSettings } from '../models';
 import { format } from 'date-fns';
-import { CONTEXT } from '../constants/context';
+import { DateHelper } from '../helpers/DateHelper';


 export class Preview {
@@ -35,7 +35,7 @@ export class Preview {
    if (settings.pathname) {
      const articleDate = ArticleHelper.getDate(article);
      try {
-        slug = join(format(articleDate || new Date(), settings.pathname), slug);
+        slug = join(format(articleDate || new Date(), DateHelper.formatUpdate(settings.pathname)), slug);
      } catch (error) {
        slug = join(settings.pathname, slug);
      }
@@ -124,10 +124,8 @@ export class Preview {
   * Retrieve all settings related to the preview command
   */
  public static getSettings(): PreviewSettings {
-
-    const config = SettingsHelper.getConfig();
-    const host = config.get<string>(SETTING_PREVIEW_HOST);
-    const pathname = config.get<string>(SETTING_PREVIEW_PATHNAME);
+    const host = Settings.get<string>(SETTING_PREVIEW_HOST);
+    const pathname = Settings.get<string>(SETTING_PREVIEW_PATHNAME);

    return {
      host,
--- a/src/commands/Project.ts
+++ b/src/commands/Project.ts
@@ -1,9 +1,10 @@
 import { workspace, Uri } from "vscode";
-import { CONFIG_KEY, SETTING_TEMPLATES_FOLDER } from "../constants";
 import { join } from "path";
 import * as fs from "fs";
 import { Notifications } from "../helpers/Notifications";
 import { Template } from "./Template";
+import { Folders } from "./Folders";
+import { Settings } from "../helpers";

 export class Project {

@@ -25,6 +26,8 @@ categories: []
   */
  public static async init(sampleTemplate: boolean = true) {
    try {
+      Settings.createTeamSettings();
+
      const folder = Template.getSettings();
      const templatePath = Project.templatePath();

@@ -42,7 +45,7 @@ categories: []
        fs.writeFileSync(article.fsPath, Project.content, { encoding: "utf-8" });
        Notifications.info("Project initialized successfully.");
      }
-    } catch (err) {
+    } catch (err: any) {
      Notifications.error(`Sorry, something went wrong - ${err?.message || err}`);
    }
  }
@@ -52,14 +55,13 @@ categories: []
   */
  public static templatePath() {
    const folder = Template.getSettings();
-    const workspaceFolders = workspace.workspaceFolders;
+    const wsFolder = Folders.getWorkspaceFolder();

-    if (!folder || !workspaceFolders || workspaceFolders.length === 0) {
+    if (!folder || !wsFolder) {
      return null;
    }

-    const workspaceFolder = workspaceFolders[0];
-    const templatePath = Uri.file(join(workspaceFolder.uri.fsPath, folder));
+    const templatePath = Uri.file(join(wsFolder.fsPath, folder));
    return templatePath;
  }
 }
--- a/src/commands/Settings.ts
+++ b/src/commands/Settings.ts
@@ -2,8 +2,8 @@ import * as vscode from 'vscode';
 import * as matter from 'gray-matter';
 import * as fs from 'fs';
 import { TaxonomyType } from "../models";
-import { CONFIG_KEY, SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, EXTENSION_NAME } from '../constants';
-import { ArticleHelper, SettingsHelper, FilesHelper } from '../helpers';
+import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, EXTENSION_NAME } from '../constants';
+import { ArticleHelper, Settings as SettingsHelper, FilesHelper } from '../helpers';
 import { TomlEngine, getFmLanguage, getFormatOpts } from '../helpers/TomlEngine';
 import { DumpOptions } from 'js-yaml';
 import { Notifications } from '../helpers/Notifications';
@@ -22,9 +22,8 @@ export class Settings {
    });
    
    if (newOption) {
-      const config = SettingsHelper.getConfig();
      const configSetting = type === TaxonomyType.Tag ? SETTING_TAXONOMY_TAGS : SETTING_TAXONOMY_CATEGORIES;
-      let options = config.get(configSetting) as string[];
+      let options = SettingsHelper.get(configSetting, true) as string[];
      if (!options) {
        options = [];
      }
@@ -35,7 +34,7 @@ export class Settings {
      }

      options.push(newOption);
-      await SettingsHelper.update(type, options);
+      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?` });
@@ -72,8 +71,6 @@ export class Settings {
   * Export the tags/categories front matter to the user settings
   */
  public static async export() {
-    const config = SettingsHelper.getConfig();
-
    // Retrieve all the Markdown files
    const allMdFiles = await FilesHelper.getMdFiles();
    if (!allMdFiles) {
@@ -128,22 +125,22 @@ export class Settings {
      }

      // Retrieve the currently known tags, and add the new ones
-      let crntTags: string[] = config.get(SETTING_TAXONOMY_TAGS) as string[];
+      let crntTags: string[] = SettingsHelper.get(SETTING_TAXONOMY_TAGS, true) as string[];
      if (!crntTags) { crntTags = []; }
      crntTags = [...crntTags, ...tags];
      // Update the tags and filter out the duplicates
      crntTags = [...new Set(crntTags)];
      crntTags = crntTags.sort().filter(t => !!t);
-      await config.update(SETTING_TAXONOMY_TAGS, crntTags);
+      await SettingsHelper.update(SETTING_TAXONOMY_TAGS, crntTags, true);

      // Retrieve the currently known tags, and add the new ones
-      let crntCategories: string[] = config.get(SETTING_TAXONOMY_CATEGORIES) as string[];
+      let crntCategories: string[] = SettingsHelper.get(SETTING_TAXONOMY_CATEGORIES, true) as string[];
      if (!crntCategories) { crntCategories = []; }
      crntCategories = [...crntCategories, ...categories];
      // Update the categories and filter out the duplicates
      crntCategories = [...new Set(crntCategories)];
      crntCategories = crntCategories.sort().filter(c => !!c);
-      await config.update(SETTING_TAXONOMY_CATEGORIES, crntCategories);
+      await SettingsHelper.update(SETTING_TAXONOMY_CATEGORIES, crntCategories, true);

      // Done
      Notifications.info(`Export completed. Tags: ${crntTags.length} - Categories: ${crntCategories.length}.`);
@@ -251,7 +248,6 @@ export class Settings {
              }
            } 
          } catch (e) {
-            console.log(file.path);
            // Continue with the next file
          }
        }
@@ -270,7 +266,7 @@ export class Settings {
        // Remove the selected option
        options = options.filter(o => o !== selectedOption);
      }
-      await SettingsHelper.update(type, options);
+      await SettingsHelper.updateTaxonomy(type, options);

      Notifications.info(`${newOptionValue ? "Remapping" : "Deleation"} of the ${selectedOption} ${type === TaxonomyType.Tag ? "tag" : "category"} completed.`);
    });
--- a/src/commands/StatusListener.ts
+++ b/src/commands/StatusListener.ts
@@ -1,7 +1,8 @@
-import { SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants/settings';
+import { SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants';
 import * as vscode from 'vscode';
-import { ArticleHelper, SeoHelper, SettingsHelper } from '../helpers';
-import { ExplorerView } from '../webview/ExplorerView';
+import { ArticleHelper, SeoHelper, Settings } from '../helpers';
+import { ExplorerView } from '../explorerView/ExplorerView';
+import { DefaultFields } from '../constants';

 export class StatusListener {
  
@@ -22,7 +23,6 @@ export class StatusListener {

        // Update the StatusBar based on the article draft state
        if (article && typeof article.data["draft"] !== "undefined") {
-          // console.log(`Draft status: ${article.data["draft"]}`);
          if (article.data["draft"] === true) {
            frontMatterSB.text = `$(book) ${draftMsg}`;
            frontMatterSB.show();
@@ -37,10 +37,9 @@ export class StatusListener {
          collection.clear();

          // Retrieve the SEO config properties
-          const config = SettingsHelper.getConfig();
-          const titleLength = config.get(SETTING_SEO_TITLE_LENGTH) as number || -1;
-          const descLength = config.get(SETTING_SEO_DESCRIPTION_LENGTH) as number || -1;
-          const fieldName = config.get(SETTING_SEO_DESCRIPTION_FIELD) as string || "description";
+          const titleLength = Settings.get(SETTING_SEO_TITLE_LENGTH) as number || -1;
+          const descLength = Settings.get(SETTING_SEO_DESCRIPTION_LENGTH) as number || -1;
+          const fieldName = Settings.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description;
          
          if (article.data.title && titleLength > -1) {
            SeoHelper.checkLength(editor, collection, article, "title", titleLength);
--- a/src/commands/Template.ts
+++ b/src/commands/Template.ts
@@ -1,14 +1,16 @@
+import { Questions } from './../helpers/Questions';
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
-import { CONFIG_KEY, SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
-import { format } from 'date-fns';
-import sanitize from '../helpers/Sanitize';
-import { ArticleHelper, SettingsHelper } from '../helpers';
+import { SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { ArticleHelper, Settings } from '../helpers';
 import { Article } from '.';
 import { Notifications } from '../helpers/Notifications';
-import { CONTEXT } from '../constants/context';
+import { CONTEXT } from '../constants';
 import { Project } from './Project';
+import { Folders } from './Folders';
+import { ContentType } from '../helpers/ContentType';
+import { ContentType as IContentType } from '../models';

 export class Template {

@@ -24,15 +26,14 @@ export class Template {
   * Check if the project is already initialized
   */
  public static async isInitialized() {
-    const workspaceFolders = vscode.workspace.workspaceFolders;
+    const wsFolder = Folders.getWorkspaceFolder();
    const folder = Template.getSettings();

-    if (!folder || !workspaceFolders || workspaceFolders.length === 0) {
+    if (!folder || !wsFolder) {
      return false;
    }

-    const workspaceFolder = workspaceFolders[0];
-    const templatePath = vscode.Uri.file(path.join(workspaceFolder.uri.fsPath, folder));
+    const templatePath = vscode.Uri.file(path.join(wsFolder.fsPath, folder));

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

@@ -93,9 +94,8 @@ export class Template {
   * Create from a template
   */
  public static async create(folderPath: string) {
-    const config = SettingsHelper.getConfig();
-    const folder = config.get<string>(SETTING_TEMPLATES_FOLDER);
-    const prefix = config.get<string>(SETTING_TEMPLATES_PREFIX);
+    const folder = Settings.get<string>(SETTING_TEMPLATES_FOLDER);
+    const contentTypes = ContentType.getAll();

    if (!folderPath) {
      Notifications.warning(`Incorrect project folder path retrieved.`);
@@ -114,39 +114,33 @@ export class Template {
    }

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

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

    // Start the template read
    const template = templates.find(t => t.fsPath.endsWith(selectedTemplate));
    if (!template) {
-      Notifications.warning(`Article template could not be found.`);
+      Notifications.warning(`Content template could not be found.`);
      return;
    }

-    const fileExt = path.parse(selectedTemplate).ext;
-    const sanitizedName = sanitize(titleValue.toLowerCase().replace(/ /g, "-"));
-    let newFileName = `${sanitizedName}${fileExt}`;
-    if (prefix && typeof prefix === "string") {
-      newFileName = `${format(new Date(), prefix)}-${newFileName}`;
+    const templateData = ArticleHelper.getFrontMatterByPath(template.fsPath);
+    let contentType: IContentType | undefined;
+    if (templateData && templateData.data && templateData.data.type) {
+      contentType = contentTypes?.find(t => t.name === templateData.data.type);
    }

-    const newFilePath = path.join(folderPath, newFileName);
-    if (fs.existsSync(newFilePath)) {
-      Notifications.warning(`File already exists, please remove it before creating a new one with the same title.`);
+    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue);
+    if (!newFilePath) {
      return;
    }
    
@@ -166,7 +160,7 @@ export class Template {
        fmData.title = titleValue;
      }
      if (typeof fmData.slug !== "undefined") {
-        fmData.slug = sanitizedName;
+        fmData.slug = ArticleHelper.sanitize(titleValue);
      }

      frontMatter = Article.updateDate(frontMatter);
@@ -181,15 +175,14 @@ export class Template {
      vscode.window.showTextDocument(txtDoc);
    }

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

  /**
   * Get the folder settings
   */
  public static getSettings() {
-    const config = SettingsHelper.getConfig();
-    const folder = config.get<string>(SETTING_TEMPLATES_FOLDER);
+    const folder = Settings.get<string>(SETTING_TEMPLATES_FOLDER);
    return folder;
  }
 }
--- a/src/constants/ContentType.ts
+++ b/src/constants/ContentType.ts
@@ -0,0 +1,45 @@
+import { ContentType } from './../models/PanelSettings';
+
+export const DEFAULT_CONTENT_TYPE_NAME = 'default';
+
+export const DEFAULT_CONTENT_TYPE: ContentType = {
+  "name": "default",
+  "pageBundle": false,
+  "fields": [
+    {
+      "title": "Title",
+      "name": "title",
+      "type": "string"
+    },
+    {
+      "title": "Description",
+      "name": "description",
+      "type": "string"
+    },
+    {
+      "title": "Publishing date",
+      "name": "date",
+      "type": "datetime"
+    },
+    {
+      "title": "Article preview",
+      "name": "preview",
+      "type": "image"
+    },
+    {
+      "title": "Is in draft",
+      "name": "draft",
+      "type": "boolean"
+    },
+    {
+      "title": "Tags",
+      "name": "tags",
+      "type": "tags"
+    },
+    {
+      "title": "Categories",
+      "name": "categories",
+      "type": "categories"
+    }
+  ]
+};
--- a/src/constants/DefaultFields.ts
+++ b/src/constants/DefaultFields.ts
@@ -0,0 +1,6 @@
+
+export const DefaultFields = {
+  PublishingDate: `date`,
+  LastModified: `lastmod`,
+  Description: `description`
+};
--- a/src/constants/Extension.ts
+++ b/src/constants/Extension.ts
@@ -1,5 +1,8 @@
 const extensionName = "frontMatter";

+export const EXTENSION_ID = 'eliostruyf.vscode-front-matter';
+export const EXTENSION_BETA_ID = 'eliostruyf.vscode-front-matter-beta';
+
 export const getCommandName = (command: string) => {
  return `${extensionName}.${command}`;
 };
@@ -12,7 +15,6 @@ export const COMMAND_NAME = {
  createCategory: getCommandName("createCategory"),
  exportTaxonomy: getCommandName("exportTaxonomy"),
  remap: getCommandName("remap"),
-  setDate: getCommandName("setDate"),
  setLastModifiedDate: getCommandName("setLastModifiedDate"),
  generateSlug: getCommandName("generateSlug"),
  createFromTemplate: getCommandName("createFromTemplate"),
@@ -20,7 +22,13 @@ export const COMMAND_NAME = {
  registerFolder: getCommandName("registerFolder"),
  unregisterFolder: getCommandName("unregisterFolder"),
  createContent: getCommandName("createContent"),
+  createByContentType: getCommandName("createByContentType"),
+  createByTemplate: getCommandName("createByTemplate"),
  createTemplate: getCommandName("createTemplate"),
  collapseSections: getCommandName("collapseSections"),
  preview: getCommandName("preview"),
+  dashboard: getCommandName("dashboard"),
+  promote: getCommandName("promoteSettings"),
+  insertImage: getCommandName("insertImage"),
+  createFolder: getCommandName("createFolder"),
 };
--- a/src/constants/ExtensionState.ts
+++ b/src/constants/ExtensionState.ts
@@ -0,0 +1,8 @@
+
+export const ExtensionState = {
+  PagesView: `frontMatter:Pages:ViewType`,
+  SelectedFolder: `frontMatter:SelectedFolder`,
+  Version: `frontMatter:Version`,
+  SettingPromoted: `frontMatter:Settings:Promoted`,
+  MoveTemplatesFolder: `frontMatter:Templates:Move`,
+};
--- a/src/constants/FrameworkDetectors.ts
+++ b/src/constants/FrameworkDetectors.ts
@@ -0,0 +1,21 @@
+export const FrameworkDetectors = [
+  {
+    "framework": {"name": "gatsby", "dist": "public", "static": "static", "build": "gatsby build"},
+    "requiredFiles": ["gatsby-config.js"],
+    "requiredDependencies": ["gatsby"]
+  },
+  {
+    "framework": {"name": "hugo", "dist": "public", "static": "static", "build": "hugo"},
+    "requiredFiles": ["config.toml", "config.yaml", "config.yml"]
+  },
+  {
+    "framework": {"name": "next", "dist": ".next", "static": "public", "build": "next build"},
+    "requiredFiles": ["next.config.js"],
+    "requiredDependencies": ["next"]
+  },
+  {
+    "framework": {"name": "nuxt", "dist": "dist", "static": "static", "build": "nuxt"},
+    "requiredFiles": ["nuxt.config.js"],
+    "requiredDependencies": ["nuxt"]
+  }
+];
--- a/src/constants/Links.ts
+++ b/src/constants/Links.ts
@@ -0,0 +1,6 @@
+export const GITHUB_LINK = "https://github.com/estruyf/vscode-front-matter";
+export const ISSUE_LINK = "https://github.com/estruyf/vscode-front-matter/issues";
+export const SPONSOR_LINK = "https://github.com/sponsors/estruyf";
+export const REVIEW_LINK = "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details";
+
+export const SENTRY_LINK = "https://1ac45704bbe74264a7b4674bdc2abf48@o1022172.ingest.sentry.io/5988293";
--- a/src/constants/LocalStore.ts
+++ b/src/constants/LocalStore.ts
@@ -0,0 +1,8 @@
+
+
+export const LocalStore = {
+  rootFolder: ".frontmatter",
+  contentFolder: "content",
+  templatesFolder: "templates",
+  mediaDatabaseFile: "mediaDb.json"
+}
--- a/src/constants/Navigation.ts
+++ b/src/constants/Navigation.ts
@@ -0,0 +1 @@
+export const HOME_PAGE_NAVIGATION_ID = "FrontMatter:RootFolder";
--- a/src/constants/context.ts
+++ b/src/constants/context.ts
@@ -1,7 +1,6 @@
-
-
 export const CONTEXT = {
  canInit: "frontMatterCanInit",
  canOpenPreview: "frontMatterCanOpenPreview",
-  registeredFolders: 'frontMatter.registeredFolders'
+  canOpenDashboard: "frontMatterCanOpenDashboard",
+  isEnabled: "frontMatter:enabled"
 };
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1 +1,11 @@
+export * from './ContentType';
+export * from './DefaultFields';
+export * from './Extension';
+export * from './ExtensionState';
+export * from './Links';
+export * from './LocalStore';
+export * from './Navigation';
+export * from './charMap';
+export * from './context';
 export * from './settings';
+export * from './stopwords-en';
--- a/src/constants/settings.ts
+++ b/src/constants/settings.ts
@@ -5,6 +5,8 @@ export const CONFIG_KEY = "frontMatter";
 export const SETTING_TAXONOMY_TAGS = "taxonomy.tags";
 export const SETTING_TAXONOMY_CATEGORIES = "taxonomy.categories";
 export const SETTING_DATE_FORMAT = "taxonomy.dateFormat";
+export const SETTING_COMMA_SEPARATED_FIELDS = "taxonomy.commaSeparatedFields";
+export const SETTING_TAXONOMY_CONTENT_TYPES = "taxonomy.contentTypes";
 export const SETTING_DATE_FIELD = "taxonomy.dateField";
 export const SETTING_MODIFIED_FIELD = "taxonomy.modifiedField";

@@ -33,5 +35,16 @@ export const SETTING_PREVIEW_PATHNAME = "preview.pathName";
 export const SETTING_CUSTOM_SCRIPTS = "custom.scripts";

 export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate";
+export const SETTINGS_CONTENT_PAGE_FOLDERS = "content.pageFolders";
+export const SETTINGS_CONTENT_STATIC_FOLDER = "content.publicFolder";
+export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight";
+
+export const SETTINGS_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
+export const SETTINGS_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
+
+export const SETTINGS_FRAMEWORK_ID = "framework.id";
+
+/**
+ * @deprecated
+ */
 export const SETTINGS_CONTENT_FOLDERS = "content.folders";
-export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight";
--- a/src/dashboardWebView/DashboardCommand.ts
+++ b/src/dashboardWebView/DashboardCommand.ts
@@ -0,0 +1,7 @@
+export enum DashboardCommand {
+  loading = "loading",
+  pages = "pages",
+  settings = "settings",
+  media = "media",
+  viewData = "viewData"
+}
--- a/src/dashboardWebView/DashboardMessage.ts
+++ b/src/dashboardWebView/DashboardMessage.ts
@@ -0,0 +1,22 @@
+export enum DashboardMessage {
+  getViewType = 'getViewType',
+  getData = 'getData',
+  openFile = 'openFile',
+  getTheme = 'getTheme',
+  createContent = 'createContent',
+  createByContentType = 'createByContentType',
+  createByTemplate = 'createByTemplate',
+  updateSetting = 'updateSetting',
+  initializeProject = 'initializeProject',
+  reload = 'reload',
+  setPageViewType = 'setPageViewType',
+  getMedia = 'getMedia',
+  copyToClipboard = 'copyToClipboard',
+  refreshMedia = 'refreshMedia',
+  uploadMedia = 'uploadMedia',
+  deleteMedia = 'deleteMedia',
+  insertPreviewImage = 'insertPreviewImage',
+  updateMediaMetadata = 'updateMediaMetadata',
+  createMediaFolder = 'createMediaFolder',
+  setFramework = 'setFramework',
+}
--- a/src/dashboardWebView/components/Button.tsx
+++ b/src/dashboardWebView/components/Button.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface IButtonProps {
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export const Button: React.FunctionComponent<IButtonProps> = ({onClick, disabled, children}: React.PropsWithChildren<IButtonProps>) => {
+  return (
+    <button
+      type="button"
+      className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};
--- a/src/dashboardWebView/components/ChoiceButton.tsx
+++ b/src/dashboardWebView/components/ChoiceButton.tsx
@@ -0,0 +1,52 @@
+import { Menu } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { MenuItem, MenuItems } from './Menu';
+
+export interface IChoiceButtonProps {
+  title: string;
+  choices: { 
+    title: string;
+    disabled?: boolean;
+    onClick: () => void;
+  }[];
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({onClick, disabled, choices, title}: React.PropsWithChildren<IChoiceButtonProps>) => {
+  return (
+    <span className="relative z-50 inline-flex shadow-sm rounded-md">
+      <button
+        type="button"
+        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {title}
+      </button>
+
+      <Menu as="span" className="-ml-px relative block">
+        <Menu.Button 
+          className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
+          disabled={disabled}>
+          <span className="sr-only">Open options</span>
+          <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+        </Menu.Button>
+
+        <MenuItems widthClass={`w-56`}>
+          <div className="py-1">
+            {choices.map((choice) => (
+              <MenuItem 
+                key={choice.title}
+                title={choice.title} 
+                value={null}
+                onClick={choice.onClick}
+                disabled={choice.disabled} />
+            ))}
+          </div>
+        </MenuItems>
+      </Menu>
+    </span>
+  );
+};
--- a/src/dashboardWebView/components/Contents/Contents.tsx
+++ b/src/dashboardWebView/components/Contents/Contents.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useRecoilValue } from 'recoil';
+import { Page } from '../../models';
+import { SettingsSelector } from '../../state';
+import { Header } from '../Header';
+import { Overview } from './Overview';
+import { Spinner } from '../Spinner';
+import { SponsorMsg } from '../SponsorMsg';
+
+export interface IContentsProps {
+  pages: Page[];
+  loading: boolean;
+}
+
+export const Contents: React.FunctionComponent<IContentsProps> = ({pages, loading}: React.PropsWithChildren<IContentsProps>) => {
+  const settings = useRecoilValue(SettingsSelector);
+
+  const pageFolders = [...new Set(pages.map(page => page.fmFolder))];
+
+  return (
+    <main className={`h-full w-full`}>
+      <div className="flex flex-col h-full overflow-auto">
+        <Header 
+          folders={pageFolders}
+          totalPages={pages.length}
+          settings={settings} />
+
+        <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
+          { loading ? <Spinner /> : <Overview pages={pages} settings={settings} /> }
+        </div>
+
+        <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />
+      </div>
+    </main>
+  );
+};
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useRecoilValue } from 'recoil';
+import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
+import { DashboardMessage } from '../../DashboardMessage';
+import { Page } from '../../models/Page';
+import { SettingsSelector, ViewSelector, ViewType } from '../../state';
+import { DateField } from '../DateField';
+import { Status } from '../Status';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import useContentType from '../../../hooks/useContentType';
+
+export interface IItemProps extends Page {}
+
+export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
+  const view = useRecoilValue(ViewSelector);
+  const settings = useRecoilValue(SettingsSelector);
+  const contentType = useContentType(settings, { type });
+
+  const previewField = contentType.fields.find(field => field.isPreviewImage && field.type === "image")?.name || "preview";
+  
+  const openFile = () => {
+    Messenger.send(DashboardMessage.openFile, fmFilePath);
+  };
+
+  if (view === ViewType.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 hover:shadow-xl dark:hover:bg-vulcan-100`}
+                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">
+            {
+              previewField && pageData[previewField] ? (
+                <img src={`${pageData[previewField]}`} alt={title} className="absolute inset-0 h-full w-full object-cover" loading="lazy" />
+              ) : (
+                <div className={`flex items-center justify-center bg-whisper-500 dark:bg-vulcan-200 dark:group-hover:bg-vulcan-100`}>
+                  <MarkdownIcon className={`h-32 text-vulcan-100 dark:text-whisper-100`} />
+                </div>
+              )
+            }
+          </div>
+
+          <div className="p-4 w-full">
+            <div className={`flex justify-between items-center`}>
+              <Status draft={!!draft} />
+
+              <DateField value={date} />
+            </div>
+
+            <h2 className="mt-2 mb-2 font-bold">{title}</h2>
+
+            <p className="text-xs text-vulcan-200 dark:text-whisper-800">{description}</p>
+          </div>
+        </button>
+      </li>
+    );
+  } else if (view === ViewType.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>
+          <div className="col-span-2">
+            <DateField value={date} />
+          </div>
+          <div className="col-span-2">
+            <Status draft={!!draft} />
+          </div>
+        </button>
+      </li>
+    );
+  }
+
+  return null;
+};
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/src/dashboardWebView/components/Contents/List.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useRecoilValue } from 'recoil';
+import { ViewSelector, ViewType } from '../../state';
+
+export interface IListProps {}
+
+export const List: React.FunctionComponent<IListProps> = ({children}: React.PropsWithChildren<IListProps>) => {
+  const view = useRecoilValue(ViewSelector);
+
+  let className = '';
+  if (view === ViewType.Grid) {
+    className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
+  } else if (view === ViewType.List) {
+    className = `-mx-4`;
+  }
+
+  return (
+    <ul role="list" className={className}>
+      {view === ViewType.List && (
+        <li className="px-5 relative uppercase text-vulcan-100 dark:text-whisper-900 py-2 border-b border-vulcan-50">
+          <div className={`grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8`}>
+            <div className="col-span-8">
+              Title
+            </div>
+            <div className="col-span-2">
+              Date
+            </div>
+            <div className="col-span-2">
+              Status
+            </div>
+          </div>
+        </li>
+      )}
+      {children}
+    </ul>
+  );
+};
--- a/src/dashboardWebView/components/Contents/Overview.tsx
+++ b/src/dashboardWebView/components/Contents/Overview.tsx
@@ -0,0 +1,88 @@
+import { Disclosure } from '@headlessui/react';
+import { ChevronRightIcon } from '@heroicons/react/solid';
+import * as React 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 { Item } from './Item';
+import { List } from './List';
+
+export interface IOverviewProps {
+  pages: Page[];  
+  settings: Settings | null;
+}
+
+export const Overview: React.FunctionComponent<IOverviewProps> = ({pages, settings}: React.PropsWithChildren<IOverviewProps>) => {
+  const grouping = useRecoilValue(GroupingSelector);
+
+  if (!pages || !pages.length) {
+    return (
+      <div className={`flex items-center justify-center h-full`}>
+        <div className={`max-w-xl text-center`}>
+          <FrontMatterIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`} />
+          {
+            settings && settings?.folders?.length > 0 ? (
+              <p className={`text-xl font-medium`}>No Markdown to show</p>
+            ) : (
+              <>
+                <p className={`text-lg font-medium`}>Make sure you registered a content folder in your project to let Front Matter find the contents.</p>
+              </>
+            )
+          }
+        </div>
+      </div>
+    );
+  }
+
+  if (grouping !== GroupOption.none) {
+    const groupedPages = groupBy(pages, grouping === GroupOption.Year ? 'fmYear' : 'fmDraft');
+    let groupKeys = Object.keys(groupedPages);
+
+    if (grouping === GroupOption.Year) {
+      groupKeys = groupKeys.sort((a, b) => { return parseInt(b) - parseInt(a) });
+    }
+
+    return (
+      <>
+        {
+          groupKeys.map((groupId, idx) => (
+            <Disclosure key={groupId} as={`div`} className={`w-full`} defaultOpen>
+              {({ open }) => (
+                <>
+                  <Disclosure.Button className={`mb-4 ${idx !== 0 ? "mt-8" : ""}`}>
+                    <h2 className={`text-2xl font-bold flex items-center`}>
+                      <ChevronRightIcon
+                        className={`w-8 h-8 mr-1 ${open ? "transform rotate-90" : ""}`}
+                      />
+                      {GroupOption[grouping]}: {groupId} ({groupedPages[groupId].length})
+                    </h2>
+                  </Disclosure.Button>
+                  
+                  <Disclosure.Panel>
+                    <List>
+                      {groupedPages[groupId].map((page: Page) => (
+                        <Item key={`${page.slug}-${idx}`} {...page} />
+                      ))}
+                    </List>
+                  </Disclosure.Panel>
+                </>
+              )}
+            </Disclosure>
+          ))
+        }
+      </>
+    );
+  }
+
+  return (
+    <List>
+      {pages.map((page, idx) => (
+        <Item key={`${page.slug}-${idx}`} {...page} />
+      ))}
+    </List>
+  );
+};
--- a/src/dashboardWebView/components/Dashboard.tsx
+++ b/src/dashboardWebView/components/Dashboard.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Spinner } from './Spinner';
+import useMessages from '../hooks/useMessages';
+import useDarkMode from '../../hooks/useDarkMode';
+import usePages from '../hooks/usePages';
+import { WelcomeScreen } from './WelcomeScreen';
+import { useRecoilValue } from 'recoil';
+import { DashboardViewSelector } from '../state';
+import { Contents } from './Contents/Contents';
+import { Media } from './Media/Media';
+
+export interface IDashboardProps {
+  showWelcome: boolean;
+}
+
+export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome}: React.PropsWithChildren<IDashboardProps>) => {
+  const { loading, pages, settings } = useMessages();
+  const { pageItems } = usePages(pages);
+  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 === 'media') {
+    return <Media />;
+  }
+
+  return <Contents pages={pageItems} loading={loading} />;
+};
--- a/src/dashboardWebView/components/DateField.tsx
+++ b/src/dashboardWebView/components/DateField.tsx
@@ -0,0 +1,29 @@
+import { format } from 'date-fns';
+import * as React from 'react';
+import { DateHelper } from '../../helpers/DateHelper';
+
+export interface IDateFieldProps {
+  value: Date | string;
+}
+
+export const DateField: React.FunctionComponent<IDateFieldProps> = ({value}: React.PropsWithChildren<IDateFieldProps>) => {
+  const [ dateValue, setDateValue ] = React.useState<string>("");
+
+  React.useEffect(() => {
+    try {
+      const parsedValue = typeof value === 'string' ? DateHelper.tryParse(value) : value;
+      const dateString = parsedValue ? format(parsedValue, 'yyyy-MM-dd') : parsedValue;
+      setDateValue(dateString || "");
+    } catch (e) {
+      // Date is invalid
+    }
+  }, [value]);
+
+  if (!dateValue) {
+    return null;
+  }
+
+  return (
+    <span className={`text-vulcan-100 dark:text-whisper-900 text-xs`}>{dateValue}</span>
+  );
+};
--- a/src/dashboardWebView/components/Header/Breadcrumb.tsx
+++ b/src/dashboardWebView/components/Header/Breadcrumb.tsx
@@ -0,0 +1,99 @@
+import { CollectionIcon } from '@heroicons/react/outline';
+import { basename, join } from 'path';
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
+import { parseWinPath } from '../../../helpers/parseWinPath';
+import { SelectedMediaFolderAtom, SettingsAtom } from '../../state';
+
+export interface IBreadcrumbProps {}
+
+export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: React.PropsWithChildren<IBreadcrumbProps>) => {
+  const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
+  const settings = useRecoilValue(SettingsAtom);
+  const [ folders, setFolders ] = React.useState<string[]>([]);
+
+  if (!settings?.wsFolder) {
+    return null;
+  }
+
+  React.useEffect(() => {
+    const { wsFolder, staticFolder, contentFolders } = settings;
+
+    const isValid = (folderPath: string) => {      
+      if (staticFolder) {
+        const staticPath = parseWinPath(join(wsFolder, staticFolder)) as string;
+        const relPath = folderPath.replace(staticPath, '') as string;
+
+        if (relPath.length > 1 && folderPath.startsWith(staticPath)) {
+          return true;
+        } else if (relPath.length === 0) {
+          return false;
+        }
+      }
+
+      for (let i = 0; i < contentFolders.length; i++) {
+        const contentFolder = parseWinPath(contentFolders[i]) as string;
+        const relContentPath = folderPath.replace(contentFolder, '');
+        return relContentPath.length > 1 && folderPath.startsWith(contentFolder);
+      }
+
+      return false;
+    };
+
+    if (!selectedFolder) {
+      setFolders([]);
+    } else {
+      const relPath = parseWinPath(selectedFolder.replace(parseWinPath(settings.wsFolder) as string, '')) as string;
+      const folderParts = relPath.split('/').filter(f => f);
+      const allFolders: string[] = [];
+      let previousFolder = parseWinPath(settings.wsFolder) as string;
+
+      for (const part of folderParts) {
+        const folder = join(previousFolder, part);
+        if (isValid(folder)) {
+          allFolders.push(folder);
+        }
+        previousFolder = folder;
+      }
+  
+      setFolders(allFolders);
+    }
+  }, [selectedFolder]);
+
+  return (
+    <nav className="bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex py-2" aria-label="Breadcrumb">
+      <ol role="list" className="w-full mx-auto flex space-x-4 px-5">
+        <li className="flex">
+          <div className="flex items-center">
+            <button onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)} className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500">
+              <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+              <span className="sr-only">Home</span>
+            </button>
+          </div>
+        </li>
+        {folders.map((folder) => (
+          <li key={folder} className="flex">
+            <div className="flex items-center">
+              <svg
+                className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+              >
+                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+              </svg>
+              <button
+                onClick={() => setSelectedFolder(folder)}
+                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
+              >
+                {basename(folder)}
+              </button>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
--- a/src/dashboardWebView/components/Header/ClearFilters.tsx
+++ b/src/dashboardWebView/components/Header/ClearFilters.tsx
@@ -0,0 +1,54 @@
+import { XCircleIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { SortingSelector, FolderSelector, TagSelector, CategorySelector, SortingAtom, DEFAULT_SORTING_OPTION, FolderAtom, DEFAULT_FOLDER_STATE, TagAtom, CategoryAtom, DEFAULT_TAG_STATE, DEFAULT_CATEGORY_STATE } from '../../state';
+
+import { DefaultValue } from 'recoil';
+
+export const guardRecoilDefaultValue = (
+  candidate: any
+): candidate is DefaultValue => {
+  if (candidate instanceof DefaultValue) return true;
+  return false;
+};
+
+export interface IClearFiltersProps {}
+
+export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (props: React.PropsWithChildren<IClearFiltersProps>) => {
+  const [ show, setShow ] = React.useState(false);
+
+  const sorting = useRecoilValue(SortingSelector);
+  const folder = useRecoilValue(FolderSelector);
+  const tag = useRecoilValue(TagSelector);
+  const category = useRecoilValue(CategorySelector);
+  
+  const resetSorting = useResetRecoilState(SortingAtom);
+  const resetFolder = useResetRecoilState(FolderAtom);
+  const resetTag = useResetRecoilState(TagAtom);
+  const resetCategory = useResetRecoilState(CategoryAtom);
+
+  const reset = () => {
+    setShow(false);
+    resetSorting();
+    resetFolder();
+    resetTag();
+    resetCategory();
+  };
+
+  React.useEffect(() => {
+    if (sorting !== DEFAULT_SORTING_OPTION || folder !== DEFAULT_FOLDER_STATE || tag !== DEFAULT_TAG_STATE || category !== DEFAULT_CATEGORY_STATE) {
+      setShow(true);
+    } else {
+      setShow(false);
+    }
+  }, [sorting, folder, tag, category]);
+
+  if (!show) return null;
+  
+  return (
+    <button className="flex items-center hover:text-teal-600" onClick={reset} title={`Clear filters, grouping, and sorting`}>
+      <XCircleIcon className={`inline-block w-5 h-5 mr-1`} /><span>Clear</span>
+      <span className={`sr-only`}> filters, grouping, and sorting</span>
+    </button>
+  );
+};
--- a/src/dashboardWebView/components/Header/Filter.tsx
+++ b/src/dashboardWebView/components/Header/Filter.tsx
@@ -0,0 +1,51 @@
+import { Menu } from '@headlessui/react';
+import { FilterIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+import { MenuButton, MenuItem, MenuItems } from '../Menu';
+
+export interface IFilterProps {
+  label: string;
+  items: string[];
+  activeItem: string | null;
+  onClick: (item: string | null) => void;
+}
+
+const DEFAULT_VALUE = "No filter";
+
+export const Filter: React.FunctionComponent<IFilterProps> = ({label, activeItem, items, onClick}: React.PropsWithChildren<IFilterProps>) => {
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center">
+      <Menu as="div" className="relative z-10 inline-block text-left">
+        <MenuButton 
+          label={(
+            <>
+              <FilterIcon className={`inline-block w-5 h-5 mr-1`} /><span>{label}</span>
+            </>
+          )} 
+          title={activeItem || DEFAULT_VALUE} />
+
+        <MenuItems>
+          <MenuItem 
+              title={DEFAULT_VALUE}
+              value={null}
+              isCurrent={!!activeItem}
+              onClick={() => onClick(null)} />
+
+          {items.map((option) => (
+            <MenuItem 
+              key={option}
+              title={option}
+              value={option}
+              isCurrent={option === activeItem}
+              onClick={() => onClick(option)} />
+          ))}
+        </MenuItems>
+      </Menu>
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Header/Folders.tsx
+++ b/src/dashboardWebView/components/Header/Folders.tsx
@@ -0,0 +1,44 @@
+import { Menu } from '@headlessui/react';
+import * as React from 'react';
+import { useRecoilState } from 'recoil';
+import { FolderAtom } from '../../state';
+import { MenuButton, MenuItem, MenuItems } from '../Menu';
+
+export interface IFoldersProps {
+  folders: string[];
+}
+
+const DEFAULT_TYPE = "All types";
+
+export const Folders: React.FunctionComponent<IFoldersProps> = ({folders}: React.PropsWithChildren<IFoldersProps>) => {
+  const [ crntFolder, setCrntFolder ] = useRecoilState(FolderAtom);
+
+  if (folders.length <= 1) {
+    return null;
+  }
+  
+  return (
+    <div className="flex items-center">
+      <Menu as="div" className="relative z-10 inline-block text-left">
+        <MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
+
+        <MenuItems>
+          <MenuItem 
+            title={DEFAULT_TYPE}
+            value={null}
+            isCurrent={!crntFolder}
+            onClick={(value) => setCrntFolder(value)} />
+
+          {folders.map((option) => (
+            <MenuItem 
+              key={option}
+              title={option}
+              value={option}
+              isCurrent={option === crntFolder}
+              onClick={(value) => setCrntFolder(value)} />
+          ))}
+        </MenuItems>
+      </Menu>
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Header/Grouping.tsx
+++ b/src/dashboardWebView/components/Header/Grouping.tsx
@@ -0,0 +1,39 @@
+import { Menu } from '@headlessui/react';
+import * as React from 'react';
+import { useRecoilState } from 'recoil';
+import { GroupOption } from '../../constants/GroupOption';
+import { GroupingAtom } from '../../state';
+import { MenuButton, MenuItem, MenuItems } from '../Menu';
+
+export interface IGroupingProps {}
+
+export const groupOptions = [
+  { name: "None", id: GroupOption.none },
+  { name: "Year", id: GroupOption.Year },
+  { name: "Draft/Published", id: GroupOption.Draft },
+];
+
+export const Grouping: React.FunctionComponent<IGroupingProps> = ({}: React.PropsWithChildren<IGroupingProps>) => {
+  const [ group, setGroup ] = useRecoilState(GroupingAtom);
+
+  const crntGroup = groupOptions.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) => (
+            <MenuItem 
+              key={option.id}
+              title={option.name}
+              value={option.id}
+              isCurrent={option.id === crntGroup?.id}
+              onClick={(value) => setGroup(value)} />
+          ))}
+        </MenuItems>
+      </Menu>
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Sorting } from './Sorting';
+import { Searchbox } from './Searchbox';
+import { Filter } from './Filter';
+import { Folders } from './Folders';
+import { Settings } from '../../models';
+import { DashboardMessage } from '../../DashboardMessage';
+import { Startup } from '../Startup';
+import { Navigation } from '../Navigation';
+import { Grouping } from '.';
+import { ViewSwitch } from './ViewSwitch';
+import { useRecoilState } from 'recoil';
+import { CategoryAtom, DashboardViewAtom, TagAtom } from '../../state';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { ClearFilters } from './ClearFilters';
+import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
+import { PhotographIcon } from '@heroicons/react/outline';
+import { Pagination } from '../Media/Pagination';
+import { ChoiceButton } from '../ChoiceButton';
+import { Breadcrumb } from './Breadcrumb';
+
+export interface IHeaderProps {
+  settings: Settings | null;
+  
+  // Navigation
+  totalPages?: number;
+
+  // Page folders
+  folders?: string[];
+}
+
+export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folders, settings }: React.PropsWithChildren<IHeaderProps>) => {
+  const [ crntTag, setCrntTag ] = useRecoilState(TagAtom);
+  const [ crntCategory, setCrntCategory ] = useRecoilState(CategoryAtom);
+  const [ view, setView ] = useRecoilState(DashboardViewAtom);
+
+  const createContent = () => {
+    Messenger.send(DashboardMessage.createContent);
+  };
+
+  const createByContentType = () => {
+    Messenger.send(DashboardMessage.createByContentType);
+  };
+
+  const createByTemplate = () => {
+    Messenger.send(DashboardMessage.createByTemplate);
+  };
+
+  return (
+    <div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
+      
+      <div className={`px-4 bg-gray-50 dark:bg-vulcan-50 border-b-2 border-gray-200 dark:border-vulcan-200`}>
+        <div className={`flex items-center justify-start`}>
+          <button className={`p-2 flex items-center ${view === "contents" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => setView("contents")}>
+            <MarkdownIcon className={`h-6 w-auto mr-2`} /><span>Contents</span>
+          </button>
+          <button className={`p-2 flex items-center ${view === "media" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => setView("media")}>
+            <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
+          </button>
+        </div>
+      </div>
+
+      {
+        view === "contents" && (
+          <>
+            <div className={`px-4 mt-3 mb-2 flex items-center justify-between`}>
+              <Searchbox />
+
+              <div className={`flex items-center space-x-4`}>
+                <Startup settings={settings} />
+                
+                <ChoiceButton 
+                  title={`Create content`} 
+                  choices={[{
+                    title: `Create by content type`,
+                    onClick: createByContentType,
+                    disabled: !settings?.initialized
+                  }, {
+                    title: `Create by template`,
+                    onClick: createByTemplate,
+                    disabled: !settings?.initialized
+                  }]} 
+                  onClick={createContent} 
+                  disabled={!settings?.initialized} />
+              </div>
+            </div>
+
+            <div className="px-4 flex flex-row items-center border-b border-gray-200  dark:border-vulcan-100 justify-between">
+              <div>
+                <Navigation totalPages={totalPages || 0} />
+              </div>
+
+              <div>
+                <ViewSwitch />
+              </div>
+            </div>
+
+            <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100`}>
+              <ClearFilters />
+
+              <Folders folders={folders || []} />
+
+              <Filter label={`Tag`} activeItem={crntTag} items={settings?.tags || []} onClick={(value) => setCrntTag(value)} />
+
+              <Filter label={`Category`} activeItem={crntCategory} items={settings?.categories || []} onClick={(value) => setCrntCategory(value)} />
+
+              <Grouping />
+
+              <Sorting />
+            </div>
+          </>
+        )
+      }
+
+      {
+        view === "media" && (
+          <>
+            <Pagination />
+            <Breadcrumb />
+          </>
+        )
+      }
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Header/Searchbox.tsx
+++ b/src/dashboardWebView/components/Header/Searchbox.tsx
@@ -0,0 +1,42 @@
+import { FilterIcon, SearchIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+import { useRecoilState } from 'recoil';
+import { useDebounce } from '../../../hooks/useDebounce';
+import { SearchAtom } from '../../state';
+
+export interface ISearchboxProps {}
+
+export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({}: React.PropsWithChildren<ISearchboxProps>) => {
+  const [ value, setValue ] = React.useState('');
+  const [ , setDebounceValue ] = useRecoilState(SearchAtom);
+  const debounceSearch = useDebounce<string>(value, 500);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  React.useEffect(() => {
+    setDebounceValue(debounceSearch);
+  }, [debounceSearch]);
+
+  return (
+    <div className="flex space-x-4">
+      <div className="flex-1 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="search"
+            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`}
+            placeholder="Search"
+            value={value}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Header/Sorting.tsx
+++ b/src/dashboardWebView/components/Header/Sorting.tsx
@@ -0,0 +1,40 @@
+import { Menu } from '@headlessui/react';
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { SortOption } from '../../constants/SortOption';
+import { SearchSelector, SortingAtom } from '../../state';
+import { MenuButton, MenuItem, MenuItems } from '../Menu';
+
+export interface ISortingProps {}
+
+export const sortOptions = [
+  { name: "Last modified", id: SortOption.LastModified },
+  { name: "By filename (asc)", id: SortOption.FileNameAsc },
+  { name: "By filename (desc)", id: SortOption.FileNameDesc },
+];
+
+export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsWithChildren<ISortingProps>) => {
+  const [ crntSorting, setCrntSorting ] = useRecoilState(SortingAtom);
+  const searchValue = useRecoilValue(SearchSelector);
+
+  const crntSort = sortOptions.find(x => x.id === crntSorting);
+
+  return (
+    <div className="flex items-center">
+      <Menu as="div" className="relative z-10 inline-block text-left">
+        <MenuButton label={`Sort by`} title={crntSort?.name || ""} disabled={!!searchValue} />
+
+        <MenuItems>
+          {sortOptions.map((option) => (
+            <MenuItem 
+              key={option.id}
+              title={option.name}
+              value={option.id}
+              isCurrent={option.id === crntSorting}
+              onClick={(value) => setCrntSorting(value)} />
+          ))}
+        </MenuItems>
+      </Menu>
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Header/ViewSwitch.tsx
+++ b/src/dashboardWebView/components/Header/ViewSwitch.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { ViewAtom, ViewType, SettingsSelector } from '../../state';
+import { ViewGridIcon, ViewListIcon } from '@heroicons/react/solid';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+
+export interface IViewSwitchProps {}
+
+export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (props: React.PropsWithChildren<IViewSwitchProps>) => {
+  const [ view, setView ] = useRecoilState(ViewAtom);
+  const settings = useRecoilValue(SettingsSelector);
+  
+  const toggleView = () => {
+    const newView = view === ViewType.Grid ? ViewType.List : ViewType.Grid;
+    setView(newView);
+    Messenger.send(DashboardMessage.setPageViewType, newView);
+  };
+
+  React.useEffect(() => {
+    if (settings?.pageViewType) {
+      setView(settings?.pageViewType);
+    }
+  }, [settings?.pageViewType]);
+
+  return (
+    <div className={`flex rounded-sm bg-vulcan-50 lg:mb-1`}>
+      <button className={`flex items-center px-2 py-1 rounded-l-sm ${view === ViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
+        <ViewGridIcon className={`w-4 h-4`} />
+        <span className={`sr-only`}>Change to grid</span>
+      </button>
+      <button className={`flex items-center px-2 py-1 rounded-r-sm ${view === ViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
+        <ViewListIcon className={`w-4 h-4`} />
+        <span className={`sr-only`}>Change to list</span>
+      </button>
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Header/index.ts
+++ b/src/dashboardWebView/components/Header/index.ts
@@ -0,0 +1,6 @@
+export * from './Filter';
+export * from './Folders';
+export * from './Grouping';
+export * from './Header';
+export * from './Searchbox';
+export * from './Sorting';
--- a/src/dashboardWebView/components/Media/FolderCreation.tsx
+++ b/src/dashboardWebView/components/Media/FolderCreation.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { FolderAddIcon } from '@heroicons/react/outline';
+import { useRecoilValue } from 'recoil';
+import { DashboardMessage } from '../../DashboardMessage';
+import { SelectedMediaFolderAtom } from '../../state';
+import { Messenger } from '@estruyf/vscode/dist/client';
+
+export interface IFolderCreationProps {}
+
+export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (props: React.PropsWithChildren<IFolderCreationProps>) => {
+  const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
+
+  const onFolderCreation = () => {
+    Messenger.send(DashboardMessage.createMediaFolder, {
+      selectedFolder
+    });
+  };
+
+  return (
+    <button 
+      className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
+      title={`Create new folder`}
+      onClick={onFolderCreation}>
+      <FolderAddIcon className={`mr-2 h-6 w-6`} />
+      <span className={``}>Create new folder</span>
+    </button>
+  );
+};
--- a/src/dashboardWebView/components/Media/FolderItem.tsx
+++ b/src/dashboardWebView/components/Media/FolderItem.tsx
@@ -0,0 +1,29 @@
+import { FolderIcon } from '@heroicons/react/solid';
+import { basename } from 'path';
+import * as React from 'react';
+import { useRecoilState } from 'recoil';
+import { SelectedMediaFolderAtom } from '../../state';
+
+export interface IFolderItemProps {
+  folder: string;
+  wsFolder?: string;
+  staticFolder?: string;
+}
+
+export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({ folder, wsFolder, staticFolder }: React.PropsWithChildren<IFolderItemProps>) => {
+  const [ , setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
+
+  const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
+  
+  return (
+    <li className={`group relative bg-gray-200 dark:bg-vulcan-300 hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
+      <button className={`w-full flex flex-col items-center`} onClick={() => setSelectedFolder(folder)}>
+        <FolderIcon className={`h-auto w-1/2`} />
+
+        <p className="text-sm font-bold pointer-events-none flex items-center">
+          {basename(relFolderPath)}
+        </p>
+      </button>
+    </li>
+  );
+};
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -0,0 +1,340 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { CheckCircleIcon, ClipboardCopyIcon, CodeIcon, PencilIcon, PhotographIcon, TrashIcon } from '@heroicons/react/outline';
+import { basename, dirname } from 'path';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { parseWinPath } from '../../../helpers/parseWinPath';
+import { MediaInfo } from '../../../models/MediaPaths';
+import { DashboardMessage } from '../../DashboardMessage';
+import { LightboxAtom, PageSelector, SelectedMediaFolderSelector, SettingsSelector, ViewDataSelector } from '../../state';
+import { Alert } from '../Modals/Alert';
+import { Metadata } from '../Modals/Metadata';
+
+export interface IItemProps {
+  media: MediaInfo;
+}
+
+export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWithChildren<IItemProps>) => {
+  const [ , setLightbox ] = useRecoilState(LightboxAtom);
+  const [ showAlert, setShowAlert ] = React.useState(false);
+  const [ showForm, setShowForm ] = React.useState(false);
+  const [ caption, setCaption ] = React.useState(media.caption);
+  const [ alt, setAlt ] = React.useState(media.alt);
+  const [ filename, setFilename ] = React.useState<string | null>(null);
+  const settings = useRecoilValue(SettingsSelector);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const viewData = useRecoilValue(ViewDataSelector);
+  const page = useRecoilValue(PageSelector);
+
+  const getFolder = () => {
+    if (settings?.wsFolder && media.fsPath) {
+      let relPath = media.fsPath.split(settings.wsFolder).pop();
+
+      if (settings.staticFolder && relPath) {
+        relPath = relPath.split(settings.staticFolder).pop();
+      }
+
+      return dirname(parseWinPath(relPath) || "");
+    }
+    return "";
+  };
+
+  const getRelPath = () => {
+    let relPath: string | undefined = "";
+    if (settings?.wsFolder && media.fsPath) {
+      relPath = media.fsPath.split(settings.wsFolder).pop();
+
+      if (settings.staticFolder && relPath) {
+        relPath = relPath.split(settings.staticFolder).pop();
+      }
+    }
+    return relPath;
+  };
+
+  const getFileName = () => {
+    return basename(parseWinPath(media.fsPath) || "");
+  };
+
+  const copyToClipboard = () => {
+    const relPath = getRelPath();
+    Messenger.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || "");
+  };
+
+  const insertToArticle = () => {
+    const relPath = getRelPath();
+    Messenger.send(DashboardMessage.insertPreviewImage, {
+      image: parseWinPath(relPath) || "",
+      file: viewData?.data?.filePath,
+      fieldName: viewData?.data?.fieldName,
+      multiple: viewData?.data?.multiple,
+      value: viewData?.data?.value,
+      position: viewData?.data?.position || null,
+      alt: alt || "",
+      caption: caption || ""
+    });
+  };
+
+  const insertSnippet = () => {
+    const relPath = getRelPath();
+    let snippet = settings?.mediaSnippet.join("\n");
+    snippet = snippet?.replace("{mediaUrl}", parseWinPath(relPath) || "");
+    snippet = snippet?.replace("{alt}", alt || "");
+    snippet = snippet?.replace("{caption}", caption || "");
+
+    Messenger.send(DashboardMessage.insertPreviewImage, {
+      image: parseWinPath(relPath) || "",
+      file: viewData?.data?.filePath,
+      fieldName: viewData?.data?.fieldName,
+      position: viewData?.data?.position || null,
+      snippet
+    });
+  };
+
+  const deleteMedia = () => {
+    setShowAlert(true);
+  };
+
+  const confirmDeletion = () => {
+    Messenger.send(DashboardMessage.deleteMedia, {
+      file: media.fsPath,
+      folder: selectedFolder
+    });
+  };
+
+  const calculateSize = () => {
+    let sizeDetails = [];
+
+    if (media?.dimensions) {
+      if (media.dimensions.width && media.dimensions.height) {
+        sizeDetails.push(`${media.dimensions.width}x${media.dimensions.height}`);
+      }
+    }
+
+    if (media?.stats?.size) {
+      const size = media.stats.size / (1024*1024);
+      if (size > 1) {
+        sizeDetails.push(`${size.toFixed(2)} MB`);
+      } else {
+        sizeDetails.push(`${(size * 1024).toFixed(2)} KB`);
+      }
+    }
+
+    return sizeDetails.join(" — ");
+  };
+
+  const openLightbox = () => {
+    setLightbox(media.vsPath || "");
+  };
+
+  const updateMetadata = () => {
+    setShowForm(true);
+  };
+
+  const submitMetadata = () => {
+    Messenger.send(DashboardMessage.updateMediaMetadata, {
+      file: media.fsPath,
+      filename,
+      caption,
+      alt,
+      folder: selectedFolder,
+      page
+    });
+    
+    setShowForm(false);
+
+    // Reset the values
+    setAlt(media.alt);
+    setCaption(media.caption);
+    setFilename(getFileName());
+  };
+
+  useEffect(() => {
+    if (media.alt !== alt) {
+      setAlt(media.alt);
+    }
+  }, [media.alt]);
+  
+  useEffect(() => {
+    if (media.caption !== caption) {
+      setCaption(media.caption);
+    }
+  }, [media.caption]);
+  
+  useEffect(() => {
+    const name = basename(parseWinPath(media.fsPath) || "");
+    if (name !== filename) {
+      setFilename(getFileName());
+    }
+  }, [media.fsPath]);
+
+  const fileInfo = filename ? basename(filename).split('.') : null;
+  const extension = fileInfo?.pop();
+  const name = fileInfo?.join('.');
+
+  return (
+    <>
+      <li className="group relative bg-gray-50 dark:bg-vulcan-200 hover:shadow-xl dark:hover:bg-vulcan-100">
+        <button className="relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden cursor-pointer h-48" onClick={openLightbox}>
+          <div className={`absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center`}>
+            <PhotographIcon className={`h-1/2 text-gray-300 dark:text-vulcan-200`} />
+          </div>
+          <div className={`absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center`}>
+            <img src={media.vsPath} alt={basename(media.fsPath)} className="mx-auto object-cover" />
+          </div>
+        </button>
+        <div className={`relative py-4 pl-4 pr-12`}>
+          <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
+            <button title={`Edit metadata`} 
+                    className={`hover:text-teal-900 focus:outline-none`} 
+                    onClick={updateMetadata}>
+              <PencilIcon className={`h-5 w-5`} />
+              <span className={`sr-only`}>Edit metadata</span>
+            </button>
+
+            {
+              viewData?.data?.filePath ? (
+                <>
+                  <button 
+                    title={`Insert into your content`} 
+                    className={`hover:text-teal-900 focus:outline-none`} 
+                    onClick={insertToArticle}>
+                    <CheckCircleIcon className={`h-5 w-5`} />
+                    <span className={`sr-only`}>Insert into your content</span>
+                  </button>
+                  {
+                    (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                      <button 
+                        title={`Insert your media snippet`} 
+                        className={`hover:text-teal-900 focus:outline-none`} 
+                        onClick={insertSnippet}>
+                        <CodeIcon className={`h-5 w-5`} />
+                        <span className={`sr-only`}>Insert your media snippet</span>
+                      </button>
+                    )
+                  }
+                </>
+              ) : (
+                <>
+                  <button title={`Copy media path`} 
+                          className={`hover:text-teal-900 focus:outline-none`} 
+                          onClick={copyToClipboard}>
+                    <ClipboardCopyIcon className={`h-5 w-5`} />
+                    <span className={`sr-only`}>Copy media path</span>
+                  </button>
+                  <button title={`Delete media`} 
+                          className={`hover:text-teal-900 focus:outline-none`} 
+                          onClick={deleteMedia}>
+                    <TrashIcon className={`h-5 w-5`} />
+                    <span className={`sr-only`}>Delete media</span>
+                  </button>
+                </>
+              )
+            }
+          </div>
+          <p className="text-sm dark:text-whisper-900 font-bold pointer-events-none flex items-center">
+            {basename(parseWinPath(media.fsPath) || "")}
+          </p>
+          {
+            media.caption && (
+              <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
+                <b className={`mr-2`}>Caption:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.caption}</span>
+              </p>
+            )
+          }
+          {
+            media.alt && (
+              <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none  flex flex-col items-start">
+                <b className={`mr-2`}>Alt:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.alt}</span>
+              </p>
+            )
+          }
+          <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
+            <b className={`mr-2`}>Folder:</b> 
+            <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{getFolder()}</span>
+          </p>
+          {
+            (media?.stats?.size || media?.dimensions) && (
+              <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
+                <b className={`mr-1`}>Size:</b>
+                <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{calculateSize()}</span>
+              </p>
+            )
+          }
+        </div>
+      </li>
+
+      {
+        showForm && (
+          <Metadata 
+            title={`Set metadata for: ${basename(parseWinPath(media.fsPath) || "")}`}
+            description={`Please specify the metadata you want to set for the file.`}
+            okBtnText={`Save`}
+            cancelBtnText={`Cancel`}
+            dismiss={() => setShowForm(false)}
+            trigger={submitMetadata}
+            isSaveDisabled={!filename}>
+            <div className="flex flex-col space-y-2">
+              <div>
+                <label htmlFor="about" className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                  Filename
+                </label>
+                <div className="relative mt-1">
+                  <input
+                    className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                    value={name}
+                    onChange={(e) => setFilename(`${e.target.value}.${extension}`)} />
+
+                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                    <span className="text-gray-500 sm:text-sm">
+                      .{extension}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label htmlFor="about" className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                  Caption
+                </label>
+                <div className="mt-1">
+                  <textarea
+                    rows={3}
+                    className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                    value={caption || ''}
+                    onChange={(e) => setCaption(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div>
+                <label htmlFor="about" className="block text-sm font-medium text-gray-700 dark:text-whisper-900">
+                  Alt tag value
+                </label>
+                <div className="mt-1">
+                  <input
+                    className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
+                    value={alt || ''}
+                    onChange={(e) => setAlt(e.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+          </Metadata>
+        )
+      }
+
+      {
+        showAlert && (
+          <Alert 
+            title={`Delete: ${basename(parseWinPath(media.fsPath) || "")}`}
+            description={`Are you sure you want to delete the file from the ${getFolder()} folder?`}
+            okBtnText={`Delete`}
+            cancelBtnText={`Cancel`}
+            dismiss={() => setShowAlert(false)}
+            trigger={confirmDeletion} />
+        )
+      }
+    </>
+  );
+};
--- a/src/dashboardWebView/components/Media/Lightbox.tsx
+++ b/src/dashboardWebView/components/Media/Lightbox.tsx
@@ -0,0 +1,26 @@
+import { basename } from 'path';
+import * as React from 'react';
+import { useRecoilState } from 'recoil';
+import { LightboxAtom } from '../../state';
+
+export interface ILightboxProps {}
+
+export const Lightbox: React.FunctionComponent<ILightboxProps> = (props: React.PropsWithChildren<ILightboxProps>) => {
+  const [ lightbox, setLightbox ] = useRecoilState(LightboxAtom);
+  
+  if (!lightbox) {
+    return null;
+  }
+
+  const hideLightbox = () => {
+    setLightbox(null);
+  };
+
+  return (
+    <div onClick={hideLightbox} className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-50 z-50`}>
+      <div className={`w-full h-full flex flex-wrap items-center justify-center`}>
+        <img src={lightbox} alt={basename(lightbox)} className={`w-1/2 h-auto rounded-lg border border-vulcan-500 shadow-2xl`} />
+      </div>
+    </div>
+  );
+};
--- a/src/dashboardWebView/components/Media/List.tsx
+++ b/src/dashboardWebView/components/Media/List.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface IListProps {}
+
+export const List: React.FunctionComponent<IListProps> = ({children}: React.PropsWithChildren<IListProps>) => {
+  return (
+    <ul role="list" className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
+      {children}
+    </ul>
+  );
+};
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -0,0 +1,147 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { EventData } from '@estruyf/vscode/dist/models';
+import { UploadIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { MediaInfo, MediaPaths } from '../../../models/MediaPaths';
+import { DashboardCommand } from '../../DashboardCommand';
+import { LoadingAtom, MediaFoldersAtom, MediaTotalAtom, SelectedMediaFolderAtom, SettingsSelector, ViewDataSelector } from '../../state';
+import { Header } from '../Header';
+import { Spinner } from '../Spinner';
+import { SponsorMsg } from '../SponsorMsg';
+import { Item } from './Item';
+import { Lightbox } from './Lightbox';
+import { List } from './List';
+import { useDropzone } from 'react-dropzone'
+import { useCallback } from 'react';
+import { DashboardMessage } from '../../DashboardMessage';
+import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
+import { FolderItem } from './FolderItem';
+
+export interface IMediaProps {}
+
+export const LIMIT = 16;
+
+export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWithChildren<IMediaProps>) => {
+  const settings = useRecoilValue(SettingsSelector);
+  const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
+  const [ media, setMedia ] = React.useState<MediaInfo[]>([]);
+  const [ , setTotal ] = useRecoilState(MediaTotalAtom);
+  const [ folders, setFolders ] = useRecoilState(MediaFoldersAtom);
+  const [ loading, setLoading ] = useRecoilState(LoadingAtom);
+  const viewData = useRecoilValue(ViewDataSelector);
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    acceptedFiles.forEach((file) => {
+      const reader = new FileReader();
+
+      reader.onload = () => {
+        const contents = reader.result;
+        Messenger.send(DashboardMessage.uploadMedia, {
+          fileName: file.name,
+          contents,
+          folder: selectedFolder
+        });
+      };
+
+      reader.readAsDataURL(file)
+    });
+  }, [selectedFolder]);
+
+  const {getRootProps, isDragActive} = useDropzone({
+    onDrop,
+    accept: 'image/*'
+  });
+
+  const messageListener = (message: MessageEvent<EventData<MediaPaths | { key: string, value: any }>>) => {
+    if (message.data.command === DashboardCommand.media) {
+      const data: MediaPaths = message.data.data as MediaPaths;
+      setLoading(false);
+      setMedia(data.media);
+      setTotal(data.total);
+      setFolders(data.folders);
+      setSelectedFolder(data.selectedFolder);
+    }
+  };
+
+  React.useEffect(() => {
+    Messenger.listen<MediaPaths>(messageListener);
+
+    return () => {
+      Messenger.unlisten(messageListener);
+    }
+  }, ['']);
+  
+  return (
+    <main className={`h-full w-full`}>
+      <div className="flex flex-col h-full overflow-auto">
+        <Header settings={settings} />
+
+        <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4" {...getRootProps()}>
+
+          {
+            viewData?.data?.filePath && (
+              <div className={`text-lg text-center mb-6`}>
+                <p>Select the image you want to use for your article.</p>
+                <p className={`opacity-80 text-base`}>You can also drag and drop images from your desktop and select that once uploaded.</p>
+              </div>
+            )
+          }
+          
+          {
+            isDragActive && (
+              <div className="absolute top-0 left-0 w-full h-full text-whisper-500 bg-gray-900 bg-opacity-70 flex flex-col justify-center items-center z-50">
+                <UploadIcon className={`h-32`} />
+                <p className={`text-xl max-w-md text-center`}>
+                  {selectedFolder ? `Upload to ${selectedFolder}` : `No folder selected, files you drop will be added to the ${settings?.staticFolder || "public"} folder.`}
+                </p>
+              </div>
+            )
+          }
+
+          {
+            (media.length === 0 && folders.length === 0 && !loading) && (
+              <div className={`flex items-center justify-center h-full`}>
+                <div className={`max-w-xl text-center`}>
+                  <FrontMatterIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`} />
+                  
+                  <p className={`text-xl font-medium`}>No media files to show. You can drag &amp; drop new files.</p>
+                </div>
+              </div>
+            )
+          }
+
+          {
+            folders && folders.length > 0 && (
+              <div className={`mb-8`}>
+                <List>
+                  {
+                    folders && folders.map((folder) => (
+                      <FolderItem key={folder} folder={folder} staticFolder={settings?.staticFolder} wsFolder={settings?.wsFolder} />
+                    ))
+                  }
+                </List>
+              </div>
+            )
+          }
+
+          <List>
+            {
+              media.map((file) => (
+                <Item key={file.fsPath} media={file} />
+              ))
+            }
+          </List>
+        </div>
+
+        {
+          loading && ( <Spinner /> )
+        }
+
+        <Lightbox />
+
+        <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />
+      </div>
+    </main>
+  );
+};
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1249.98 1249.98"><rect x="25" y="25" width="1199.98" height="1199.98" style="fill:none;stroke:#AD0670;stroke-miterlimit:10;stroke-width:50px"/><path d="M171.89,489.56H95.38V127.21H230.6V212.4H171.89v52.8h54.68v81.91H171.89Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M461.79,489.56H379l-37.8-129.08c-.37-2.18-1-5.08-1.93-8.68s-2.05-7.9-3.39-12.91l.55,23.94V489.56H260.33V127.21h78.34q51.75,0,77.43,26.05,32.65,33.32,32.66,94.81,0,65.71-43.85,90.82ZM336.84,295H342q13.21,0,22-12.91t8.81-32.86q0-40.59-33.21-40.6h-2.75Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M691.68,309.56q0,82.85-29.54,134.71-29.35,51.63-76.51,51.63-41.82,0-71.74-39.66Q476.29,406,476.28,305.57q0-96.23,39.26-147.15,29.18-37.78,69.18-37.79,49,0,78,51.17T691.68,309.56Zm-79.44.7q0-98.32-27.16-98.33-13.58,0-21.65,25.81-7.89,23.94-7.89,70.41,0,45.77,7.43,71t20.65,25.23q13.57,0,20.91-24.88Q612.24,354.62,612.24,310.26Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M724.34,489.56V127.21h73l38.35,127.2q3.1,11.27,7.06,25.81t8.72,33.56l7.88,31.92Q855.17,298.52,853,265t-2.2-56.33V127.21h73V489.56h-73l-38.53-133.3q-6.06-21.35-10.92-40t-8.53-35.56q2.38,38.26,3.49,66.65t1.1,49.76v92.46Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M1062.31,489.56H985.8V214H943.6V127.21h162.56V214h-43.85Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M122.7,730.59h35.82l27.36,133.72q5,25.05,9.16,50.2t7.55,52.74q.39-3.6.6-5.62a25.33,25.33,0,0,1,.4-2.87l5.84-37.56,5.23-35.66L219.29,862l24.35-131.39h36.22l28.57,327.72h-40l-7-111.22q-.41-8.49-.71-14.64c-.2-4.11-.3-7.5-.3-10.19l-1.81-43.94-1-40.33c0-.28,0-.88-.1-1.8s-.17-2.16-.3-3.72l-1,6.58q-1.61,11.69-2.91,20.38t-2.32,14.65L245.65,904l-2,11.25-26.16,143.06H189.3L164.75,934.78q-5-24.4-8.95-49.56t-7.14-52.75l-12.08,225.84H97.14Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M395.56,730.59h32.6l66.6,327.72H453.31l-11.67-63.89H380.06l-11.87,63.89H327.94Zm40,229.66L426.35,908q-9.27-53.28-15.1-113.77Q408.43,823.78,404,854t-10.46,64.2l-7.65,42Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M496.17,730.59H632.4v38.63H585.51v289.09h-41V769.22H496.17Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M639,730.59H775.26v38.63H728.38v289.09h-41V769.22H639Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M806.65,730.59H917.93V768H848.5V871.74h61.58V909.1H848.5V1021h69.43v37.35H806.65Z" transform="translate(24 24)" style="fill:#AD0670"/><path d="M964.61,730.59h55.13q34.21,0,50.91,17.19,21.13,22.29,21.13,68.14,0,35.24-11.16,56.56t-31.9,26.43l57.15,159.4h-42.46l-57-160.46v160.46H964.61Zm41.85,145.18q24.35,0,34.41-11.88t10.06-40.12a138.46,138.46,0,0,0-2.11-26.11q-2.11-10.81-6.64-17.61a27.08,27.08,0,0,0-11.67-10,41.58,41.58,0,0,0-17-3.18h-7Z" transform="translate(24 24)" style="fill:#AD0670"/></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M4,11.4H2.2V2.9H5.4v2H4V6.1H5.3V8H4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#C5C5C5"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#C5C5C5" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#C5C5C5"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#C5C5C5"/></svg>
				`@@ -0,0 +1 @@`
				`export const HOME_PAGE_NAVIGATION_ID = "FrontMatter:RootFolder";`