Updated tsconfig to exclude docs + ignore list

Bump path-parse from 1.0.6 to 1.0.7

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

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

.templates/documentation.md

@@ -0,0 +1,8 @@
+---
+title: "{{name}}"
+slug: "/{{kebabCase name}}/"
+description:
+date: 2019-08-22T15:20:28.000Z
+lastmod: 2019-08-22T15:20:28.000Z
+weight: 1
+---

.vscode/settings.json

@@ -7,5 +7,17 @@
         "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",
+    "frontMatter.content.folders": [
+        {
+            "title": "documentation",
+            "fsPath": "/Users/eliostruyf/nodejs/vscode/vscode-front-matter/docs/content/docs",
+            "paths": [
+                "/Users/eliostruyf/nodejs/vscode/vscode-front-matter/docs/content/docs",
+                "\\Users\\eliostruyf\\nodejs\\vscode\\vscode-front-matter\\docs\\content\\docs"
+            ]
+        }
+    ],
+    "eliostruyf.writingstyleguide.terms.isDisabled": true,
+    "eliostruyf.writingstyleguide.biasFree.isDisabled": true
 }

.vscodeignore

@@ -10,3 +10,9 @@ vsc-extension-quickstart.md
 **/*.ts
 webpack.config.js
 node_modules
+docs
+tailwind.config.js
+sample
+postcss.config.js
+.templates
+.github

CHANGELOG.md

@@ -1,5 +1,70 @@
 # Change Log
 
+## [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  
+
+- 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 
+
+## [2.4.1] - 2020-08-16
+
+- Better editor highlighting functionality
+
+## [2.4.0] - 2020-08-16
+
+- [#21](https://github.com/estruyf/vscode-front-matter/issues/21): Folding provider for Front Matter implemented
+- [#55](https://github.com/estruyf/vscode-front-matter/issues/55): Highlight Front Matter in Markdown files
+- [#56](https://github.com/estruyf/vscode-front-matter/issues/56): Action to collapse all Front Matter panel sections at once
+- [#57](https://github.com/estruyf/vscode-front-matter/issues/57): New action added to provide better writing settings (only for Markdown files)
+- [#58](https://github.com/estruyf/vscode-front-matter/issues/58): Sections remember their previous state (folded/unfolded)
+- [#59](https://github.com/estruyf/vscode-front-matter/issues/59): Center layout view toggle action added
+
+## [2.3.0] - 2020-08-10
+
+- Refactoring and showing other actions in the base view
+- Show `BaseView` in Front Matter panel when switching to `welcome` tab
+- [#31](https://github.com/estruyf/vscode-front-matter/issues/31): Automatically update the last modification date of the file when performing changes
+- [#53](https://github.com/estruyf/vscode-front-matter/issues/53): Create current Markdown file as template
+
+## [2.2.0] - 2020-08-06
+
+- [#28](https://github.com/estruyf/vscode-front-matter/issues/28): Align the file its name with the article slug
+- [#47](https://github.com/estruyf/vscode-front-matter/issues/47): Fix when table shows only value `0`
+- [#48](https://github.com/estruyf/vscode-front-matter/issues/48): Added new folder registration message + notification helper
+- [#49](https://github.com/estruyf/vscode-front-matter/issues/49): New initialize project command
+- [#50](https://github.com/estruyf/vscode-front-matter/issues/50): Fix in the table rendering of rows
+- [#51](https://github.com/estruyf/vscode-front-matter/issues/51): Panel actions base view enhanced to show project actions and information
+
+## [2.1.0] - 2020-08-04
+
+- [#44](https://github.com/estruyf/vscode-front-matter/issues/45): Added article creation command
+- [#45](https://github.com/estruyf/vscode-front-matter/issues/45): WSL support added
+- [#46](https://github.com/estruyf/vscode-front-matter/issues/46): Make the tag pickers render in full width
+
+## [2.0.1] - 2020-07-27
+
+- [#42](https://github.com/estruyf/vscode-front-matter/issues/42): Small enhancement to the table layout
+- [#43](https://github.com/estruyf/vscode-front-matter/issues/43): Fix for collapsible sections and taxonomy picker
+
 ## [2.0.0] - 2020-07-23
 
 - Redesigned sidebar panel

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">
-  <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter">
-    <img alt="Front Matter" src="./assets/front-matter.png">
+  <a href="https://frontmatter.codes">
+    <img alt="Front Matter" src="./assets/frontmatter-teal-128x128.png">
   </a>
 </h1>
 
@@ -20,303 +20,52 @@
   </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="Documenation @ frontmatter.codes">
+    Check out the extension documenation 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.
+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" />
+</p>
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**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.
 
-<h2 id="table-of-contents">Table of Contents</h2>
+<h2 align="center">
+  <a href="https://frontmatter.codes" title="Documenation @ frontmatter.codes">
+    Check out the extension documenation at frontmatter.codes
+  </a>
+</h2>
 
-<details open="open">
-  <summary>Table of Contents</summary>
-  <ol>
-    <li><a href="#the-panel">The panel</a></li>
-    <li><a href="#custom-actions">Custom actions</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>
-
-## 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.
-
-The panel consists of the following sections:
-
-**SEO Status**
-
-<p align="center">
-  <img src="./assets/v2.0.0/seo.png" alt="SEO article status" style="display: inline-block" />
+<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 - Managing your static sites straight from within VS Code | Product Hunt" style="width: 250px; height: 40px;" />
+  </a>
 </p>
 
-**Actions**
-
 <p align="center">
-  <img src="./assets/v2.0.0/actions.png" alt="Actions" style="display: inline-block" />
-</p>
-
-**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**
-
-At the bottom of the panel you can find the following actions:
-
-<p align="center">
-  <img src="./assets/v2.0.0/other-actions.png" alt="Other actions" style="display: inline-block" />
-</p>
-
-## 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: 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.
-
-> **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.
-
-> **Info**: At the moment, the extension only supports English stopwords.
-
-### 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`.
-
-## Feedback / issues / ideas
-
-Please submit them via creating an issue in the project repository: [issue list](https://github.com/estruyf/vscode-front-matter/issues).
-
-<p align="center">
-  <a href="#">
-      <img src="https://estruyf-github.azurewebsites.net/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" />
+  <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>

assets/frontmatter-dark.svg

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

assets/frontmatter-mag-min.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="#01aeb7"/><path d="M10.9,11.4H9l-.9-3V8.2C8,8.1,8,8,7.9,7.8v3.6H6.1V2.9H8a2.88,2.88,0,0,1,1.9.6,3.11,3.11,0,0,1,.8,2.2A2.25,2.25,0,0,1,9.6,7.8ZM8,6.8h.1a.55.55,0,0,0,.5-.3,1.88,1.88,0,0,0,.2-.8c0-.6-.3-1-.8-1H8Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M16.5,7.2a6.08,6.08,0,0,1-.7,3.2A2.14,2.14,0,0,1,14,11.6a2.09,2.09,0,0,1-1.7-.9,5.84,5.84,0,0,1-.9-3.5,5.84,5.84,0,0,1,.9-3.5A2.09,2.09,0,0,1,14,2.8,2.16,2.16,0,0,1,15.9,4,8.24,8.24,0,0,1,16.5,7.2Zm-1.9,0c0-1.5-.2-2.3-.7-2.3-.2,0-.4.2-.5.6a6.53,6.53,0,0,0-.2,1.7,7.18,7.18,0,0,0,.2,1.7c.1.4.3.6.5.6s.4-.2.5-.6A7.93,7.93,0,0,0,14.6,7.2Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M17.2,11.4V2.9H19l.9,3c.1.1.1.3.2.6s.1.5.2.8l.2.7c-.1-.7-.1-1.4-.2-1.9a6.64,6.64,0,0,1-.1-1.3V2.9H22v8.5H20.3l-.9-3.1-.3-.9c-.1-.3-.1-.6-.2-.8,0,.6.1,1.1.1,1.6v3.4H17.2Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="#01aeb7"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="#01aeb7" stroke-miterlimit="10" stroke-width="2"/><path d="M2.9,17h.9l.6,3a5,5,0,0,1,.2,1.2c.1.4.1.8.2,1.2v-.2l.2-.9.1-.8.1-.5.6-3h.9l.7,7.5h-1l-.2-2.6V19.5h0v.1a.9.9,0,0,1-.1.5c-.1.2,0,.2-.1.3l-.1.7v.3l-.6,3.3H4.5l-.6-2.8a5.16,5.16,0,0,1-.2-1.1c-.1-.4-.1-.8-.2-1.2l-.3,5.2h-1Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M9.3,17h.8l1.6,7.5h-1L10.4,23H8.9l-.3,1.5h-1Zm1,5.2L10,21c-.1-.8-.3-1.7-.4-2.6a6.75,6.75,0,0,1-.2,1.4l-.3,1.5-.2,1h1.4Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="#01aeb7"/><path d="M22.3,17h1.3c.6,0,1,.1,1.2.4a2.35,2.35,0,0,1,.5,1.6,2.5,2.5,0,0,1-.3,1.3,1.24,1.24,0,0,1-.8.6l1.4,3.7h-1l-1.4-3.7v3.7h-1V17Zm1,3.3c.4,0,.7-.1.8-.3s.2-.5.2-.9a1.27,1.27,0,0,0-.1-.6c-.1-.2-.1-.3-.2-.4s-.2-.2-.3-.2-.3-.1-.4-.1h-.2v2.5Z" transform="translate(1 1)" fill="#01aeb7"/></svg>

assets/frontmatter-mag.svg

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

assets/icons/close-dark.svg

@@ -0,0 +1,4 @@
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#F3EFF5">
+  <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>

assets/icons/close-light.svg

@@ -0,0 +1,4 @@
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
+  <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>

assets/media/styles.css

@@ -21,6 +21,25 @@
   }
 }
 
+.relative {
+  position: relative !important;
+}
+
+.absolute {
+  position: absolute !important;
+}
+
+.inherit {
+  position: inherit !important;
+}
+
+.z-10 { z-index: 10 !important; }
+.z-20 { z-index: 10 !important; }
+
+.w-full {
+  width: 100% !important;
+}
+
 .collapsible__body,
 .ext_settings {
 	padding: 1rem 1.25rem;
@@ -240,12 +259,23 @@
   filter: contrast(60%);
 }
 
-.article__actions > * + * {
+.article__actions > * + *,
+.other_actions > * + *,
+.base__actions > * + *,
+.base__information > * + * {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.base__action label {
+  display: block;
+}
+
+.base__action input {
+  width: 100% !important;
+}
+
 .seo__status__details ul > * + *,
 .ext_settings > * + * {
   --tw-space-y-reverse: 0;
@@ -256,10 +286,21 @@
 .ext_link_block {
   display: flex;
   align-items: center;
+  width: 100%;
 }
 
 .ext_link_block svg {
   margin-right: .5rem;
+  display: block;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+}
+
+.ext_link_block button span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ext_link_block button,
@@ -278,7 +319,17 @@
   padding: 0px 14px;
   user-select: none;
   text-decoration: none;
-  width: auto;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.ext_link_block button.active {
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+.ext_link_block button.active:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
 }
 
 .ext_link_block a:hover, 
@@ -306,4 +357,153 @@
 
 .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;
+}
+
+/* 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;
 }

docs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

docs/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

docs/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

docs/components/Docs/Markdown.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link';
+import * as React from 'react';
+import { useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+export interface IMarkdownProps {
+  content: string | undefined;
+}
+
+export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: React.PropsWithChildren<IMarkdownProps>) => {
+
+  const getTitle = (props: any) => {
+    const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
+    return title;
+  };
+
+  const generateId = (props: any) => {
+    const title = getTitle(props);
+    return title.toLowerCase().replace(/\s/g, '-');
+  };
+
+  useEffect(() => {
+    const elms = document.querySelectorAll('blockquote > p > strong');
+    for (let i = 0; i < elms.length; i++) {
+      const elm = elms[i];
+      if (elm.textContent?.toLowerCase() === "important") {
+        elm.parentElement?.parentElement?.classList.add('important');
+      }
+    }
+  }, ['']);
+  
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div className={`markdown`}>
+      {/* eslint-disable react/no-children-prop */}
+      <ReactMarkdown 
+        components={{
+          a: ({node, ...props}) => {
+            const url = props?.href || "";
+            const title = getTitle(props);
+            const elm = <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
+            return elm;
+          },
+          h1: ({node, ...props}) => (<h1 id={generateId(props)}>{getTitle(props)}</h1>),
+          h2: ({node, ...props}) => (<h2 id={generateId(props)}>{getTitle(props)}</h2>),
+          h3: ({node, ...props}) => (<h3 id={generateId(props)}>{getTitle(props)}</h3>),
+        }}
+        rehypePlugins={[rehypeRaw]} 
+        children={content} />
+    </div>
+  );
+};

docs/components/Docs/Page.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PageFrontMatter } from '../../models/PageFrontMatter';
+import { PageInfo } from './PageInfo';
+import { Sidebar } from './Sidebar';
+
+export interface IPageProps {
+  items: PageFrontMatter[];
+  page: PageFrontMatter | undefined;
+}
+
+export const Page: React.FunctionComponent<IPageProps> = ({items, page, children}: React.PropsWithChildren<IPageProps>) => {
+  return (
+    <div className={`mb-6 py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
+      <div className={`lg:flex`}>
+
+        <div className={`h-screen sticky top-16 lg:block hidden lg:w-60 xl:w-72`}>
+          <Sidebar items={items} />
+        </div>
+
+        <div className={`min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible`}>
+          {children}
+
+          <PageInfo page={page} />
+        </div>
+      </div>
+    </div>
+  );
+};
+

docs/components/Docs/PageInfo.tsx

@@ -0,0 +1,33 @@
+import { format, parseJSON } from 'date-fns';
+import * as React from 'react';
+import { Extension } from '../../constants/extension';
+import { PageFrontMatter } from '../../models/PageFrontMatter';
+
+export interface IPageInfoProps {
+  page: PageFrontMatter | undefined;
+}
+
+export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({page}: React.PropsWithChildren<IPageInfoProps>) => {
+
+  if (!page) {
+    return null;
+  }
+
+  const date = parseJSON(page.date);
+
+  return (
+    <div className={`mt-16`}>
+      {
+        date && (
+          <div className="text-base">
+            <span>Last updated on</span>{` `}<span>{format(date, `MMM dd, yyyy`)}</span>
+          </div>
+        )
+      }
+
+      <div className="mt-2 text-sm">
+        <p>Did you spot an issue in our documentation, or want to contribute? Edit this page on <a className={`text-teal-500 hover:text-teal-900`} href={`${Extension.githubLink}/edit/main/docs/content/docs/${page.fileName}.md`} target="_blank" rel={`noopener noreferrer`}>Github</a>!</p>
+      </div>
+    </div>
+  );
+};

docs/components/Docs/Sidebar.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { PageFrontMatter } from '../../models/PageFrontMatter';
+import { Link } from '../Link/Link';
+import { Section } from '../Link/Section';
+
+export interface ISidebarProps {
+  items: PageFrontMatter[];
+}
+
+export const Sidebar: React.FunctionComponent<ISidebarProps> = ({ items }: React.PropsWithChildren<ISidebarProps>) => {
+  
+  const sorted = items?.sort((a, b) => { return (a.weight || 99) - (b.weight || 99); }) || [];
+
+  const getLinks = (item: PageFrontMatter) => {
+    const { content } = item;
+    const links = Array.from(content.matchAll(/^## (.*$)/gim));
+
+    if (!links || links.length === 0) {
+      return null;
+    }
+
+    return (
+      <ul className={`mt-2 space-y-2`}>
+        {links.map((link, index) => (
+          <li key={index}>
+            <Link title={link[1]} link={`/docs/${item.slug}#${link[1].toLowerCase().replace(/\s/g, '-')}`} />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <nav role={`navigation`} className={`space-y-8`}>
+      {sorted.map((item, index) => {
+        return (
+          <div key={index}>
+            <Section title={item.title} link={`/docs/${item.slug !== "index" ? item.slug : ''}`} />
+
+            {getLinks(item)}
+          </div>
+        );
+      })}
+    </nav>
+  );
+};

docs/components/Images/Logo.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface ILogoProps {
+  className: string;
+}
+
+export const Logo: React.FunctionComponent<ILogoProps> = ({className}: React.PropsWithChildren<ILogoProps>) => {
+  return (
+    <svg className={className || ""} 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="currentcolor"/><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="currentcolor"/><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="currentcolor"/><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="currentcolor"/><path d="M25.3,11.4H23.5V4.9h-1v-2h3.9v2H25.3Z" transform="translate(1 1)" fill="currentcolor"/><rect x="1" y="1" width="28" height="28" fill="none" stroke="currentcolor" strokeMiterlimit="10" strokeWidth="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="currentcolor"/><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="currentcolor"/><path d="M11.5,17h3.3v.9H13.7v6.7h-1V17.9H11.5Z" transform="translate(1 1)" fill="currentcolor"/><path d="M14.8,17h3.3v.9H17v6.7H16V17.9H14.8Z" transform="translate(1 1)" fill="currentcolor"/><path d="M18.7,17h2.7v.9H19.7v2.4h1.5v.9H19.7v2.6h1.7v.9H18.7Z" transform="translate(1 1)" fill="currentcolor"/><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="currentcolor"/></svg>
+  );
+};

docs/components/Images/index.ts

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

docs/components/Link/Link.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface ILinkProps {
+  title: string;
+  link: string;
+}
+
+export const Link: React.FunctionComponent<ILinkProps> = ({title, link}: React.PropsWithChildren<ILinkProps>) => {
+  return (
+    <a className="transition-colors duration-200 relative block text-whisper-500 hover:text-teal-900" 
+       href={link}>
+      {title}
+    </a>
+  );
+};

docs/components/Link/Section.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import * as React from 'react';
+
+export interface ISectionProps {
+  title: string;
+  link: string;
+}
+
+export const Section: React.FunctionComponent<ISectionProps> = ({title, link}: React.PropsWithChildren<ISectionProps>) => {
+  
+  return (
+    <Link href={link}>
+      <a className={`mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm text-whisper-900 hover:text-teal-900`} title={title}>
+        {title}
+      </a>
+    </Link>
+  );
+};

docs/components/Meta/Description.tsx

@@ -0,0 +1,16 @@
+import Head from 'next/head';
+import * as React from 'react';
+
+export interface IDescriptionProps {
+  value: string;
+}
+
+export const Description: React.FunctionComponent<IDescriptionProps> = ({value}: React.PropsWithChildren<IDescriptionProps>) => {
+  return (
+    <Head>
+      <meta name="description" content={value} />
+      <meta property="og:description" content={value} />
+      <meta property="twitter:description" content={value} />
+    </Head>
+  );
+};

docs/components/Meta/OtherMeta.tsx

@@ -0,0 +1,28 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import * as React from 'react';
+import { publicUrl } from '../../lib/publicUrl';
+
+export interface IOtherMetaProps {
+  image: string;
+  type?: "website" | "article";
+}
+
+export const OtherMeta: React.FunctionComponent<IOtherMetaProps> = ({ image, type }: React.PropsWithChildren<IOtherMetaProps>) => {
+  const router = useRouter();
+
+  return (
+    <Head>
+      <link rel="canonical" href={`${publicUrl()}${router?.asPath || ""}`} />
+      
+      <meta property="og:type" content={type || "website"} />
+      <meta property="twitter:card" content="summary_large_image" />
+
+      <meta property="twitter:url" content={`${publicUrl()}${router?.asPath || ""}`} />
+      <meta property="og:url" content={`${publicUrl()}${router?.asPath || ""}`} />
+
+      <meta property="og:image" content={`${publicUrl()}/${image}`} />
+      <meta property="twitter:image" content={`${publicUrl()}/${image}`} />
+    </Head>
+  );
+};

docs/components/Meta/Title.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { Extension } from '../../constants/extension';
+
+export interface ITitleProps {
+  value: string;
+}
+
+export const Title: React.FunctionComponent<ITitleProps> = ({value}: React.PropsWithChildren<ITitleProps>) => {
+  return (
+    <Head>
+      <title>{value} | {Extension.name}</title>
+      <meta name="title" content={`${value} | ${Extension.name}`} />
+      <meta property="og:title" content={`${value} | ${Extension.name}`} />
+      <meta property="twitter:title" content={`${value} | ${Extension.name}`} />
+    </Head>
+  );
+};

docs/components/Meta/index.ts

@@ -0,0 +1,3 @@
+export * from './Description';
+export * from './OtherMeta';
+export * from './Title';

docs/components/Navigation/Navigation.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { navigation } from '../../constants/navigation';
+import { Logo } from '../Images';
+import Link from 'next/link';
+import { Extension } from '../../constants/extension';
+import { useRouter } from 'next/router';
+
+export interface INavigationProps {}
+
+export const Navigation: React.FunctionComponent<INavigationProps> = (props: React.PropsWithChildren<INavigationProps>) => {
+  const router = useRouter();
+  
+  return (
+    <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Top">
+      <div className="w-full py-6 flex items-center justify-center lg:justify-between border-b border-teal-500 lg:border-none">
+        <div className="flex items-center">
+          <Link href="/">
+            <a title={Extension.name}>
+              <span className="sr-only">{Extension.name}</span>
+              <Logo className={`text-whisper-500 h-12 w-auto`} />
+            </a>
+          </Link>
+        </div>
+        <div className="ml-10 space-x-4">
+          <div className="hidden ml-10 space-x-8 lg:block">
+            {navigation.main.map((link) => (
+              <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
+                {link.name}
+              </a>
+            ))}
+            {navigation.social.map((link) => (
+              <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
+                <span className="sr-only">{link.name}</span>
+                <link.icon className="inline-block h-6 w-6" aria-hidden="true" />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
+        {navigation.main.map((link) => (
+          <a key={link.name} href={link.href} title={link.title} className="text-base font-medium text-whisper-500 hover:text-whisper-900">
+            {link.name}
+          </a>
+        ))}
+      </div>
+    </nav>
+  );
+};

docs/components/Navigation/index.ts

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

docs/components/Page/CTA.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Extension } from '../../constants/extension';
+
+export interface ICTAProps {}
+
+export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithChildren<ICTAProps>) => {
+  const { t: strings } = useTranslation();
+
+  return (
+    <div className="px-4 sm:px-0 pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
+      <div className="mx-auto sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
+        <div className={`my-4 sm:my-5 lg:my-6`}>
+          <h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
+            <span className="md:block">{strings(`cta_title`)}</span>{' '}
+            <span className="text-teal-500 md:block">{Extension.name}</span>
+          </h1>
+
+          <p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+            {strings(`cta_description`)}
+          </p>
+
+          <div className="mt-10 max-w-sm mx-auto sm:max-w-none">
+            <div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
+              <a href={Extension.installLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8" rel={`noopener noreferrer`}>
+                {strings(`cta_button_primary`)}
+              </a>
+              <a href={`/docs`} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
+                {strings(`cta_button_secondary`)}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="sm:mx-auto sm:max-w-3xl sm:px-6">
+        <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
+          <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
+            <img className={`w-full lg:h-full lg:w-auto lg:max-w-none`} src={`/assets/site-preview.png`} alt={`Site preview`} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

docs/components/Page/Features.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { features } from '../../constants/features';
+import { CheckIcon } from '@heroicons/react/outline';
+
+export interface IFeaturesProps {}
+
+export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.PropsWithChildren<IFeaturesProps>) => {
+  const { t: strings } = useTranslation();
+
+  return (
+    <div className={``}>
+      <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl font-extrabold">{strings(`features_title`)}</h2>
+          <p className="mt-4 text-lg text-whisper-700">
+            {strings(`features_description`)}
+          </p>
+        </div>
+        <dl className="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-3 lg:gap-x-8">
+          {features.map((feature) => (
+            <div key={feature.name} className="relative">
+              <dt>
+                <CheckIcon className="absolute h-6 w-6 text-teal-500" aria-hidden="true" />
+                <p className="ml-9 text-lg leading-6 font-medium text-whisper-500">{strings(feature.name)}</p>
+              </dt>
+              <dd className="mt-2 ml-9 text-base text-whisper-800">{strings(feature.description)}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  );
+};

docs/components/Page/Footer.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Extension } from '../../constants/extension';
+import { navigation } from '../../constants/navigation';
+
+export interface IFooterProps {}
+
+export const Footer: React.FunctionComponent<IFooterProps> = (props: React.PropsWithChildren<IFooterProps>) => {
+  return (
+    <footer className="bg-vulcan-600">
+      <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+        <nav className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
+          {navigation.main.map((item) => (
+            <div key={item.name} className="px-5 py-2">
+              <a href={item.href} title={item.title} className="text-base text-gray-400 hover:text-gray-500">
+                {item.name}
+              </a>
+            </div>
+          ))}
+        </nav>
+        <div className="mt-8 flex justify-center space-x-6">
+          <a href="https://visitorbadge.io/status?path=https%3A%2F%2Ffrontmatter.codes" title={`Daily Front Matter visitors`}>
+            <img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes&countColor=%23060A15&labelColor=%23060A15" />
+          </a>
+
+          {navigation.social.map((item) => (
+            <a key={item.name} title={item.title} href={item.href} className="text-gray-400 hover:text-gray-500" rel={`noopener noreferrer`}>
+              <span className="sr-only">{item.name}</span>
+              <item.icon className="h-6 w-6" aria-hidden="true" />
+            </a>
+          ))}
+        </div>
+        <p className="mt-8 text-center text-base text-whisper-900">&copy; 2021 {Extension.name}. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};

docs/components/Page/Generators.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export interface IGeneratorsProps {}
+
+export const Generators: React.FunctionComponent<IGeneratorsProps> = (props: React.PropsWithChildren<IGeneratorsProps>) => {
+  const { t: strings } = useTranslation();
+
+  return (
+    <div className="bg-whisper-100">
+      <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+        <p className="text-center text-sm font-semibold uppercase text-vulcan-500 tracking-wide">
+          {strings(`generators_title`)}
+        </p>
+
+        <div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6">
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/11ty.svg" alt="11ty" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/docusaurus.svg" alt="Docusaurus" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/gatsby.svg" alt="Gatsby" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/hugo.svg" alt="Hugo" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/jekyll.svg" alt="Jekyll" />
+          </div>
+          <div className="col-span-1 flex justify-center">
+            <img className="h-12" src="/assets/logos/nextjs.svg" alt="Next.js" />
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-center">
+          <p className={`text-2xl tracking-tight font-bold sm:leading-none text-vulcan-500`}>and many more...</p>
+        </div>
+      </div>
+    </div>
+  );
+};

docs/components/Page/Layout.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Navigation } from '../Navigation';
+import { Footer } from './Footer';
+
+export interface ILayoutProps {}
+
+export const Layout: React.FunctionComponent<ILayoutProps> = (props: React.PropsWithChildren<ILayoutProps>) => {
+  return (
+    <div className={`flex flex-col h-screen`}>
+      <header>
+        <Navigation />
+      </header>
+
+      <main className={`flex-grow`}>
+        {props.children}
+      </main>
+
+      <Footer />
+    </div>
+  );
+};

docs/constants/extension.ts

@@ -0,0 +1,13 @@
+
+export const Extension = {
+  name: `Front Matter`,
+  home: `The CMS running in VS Code`,
+  description: `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.`,
+
+  githubLink: "https://github.com/estruyf/vscode-front-matter",
+  issueLink: "https://github.com/estruyf/vscode-front-matter/issues",
+  sponsorLink: "https://github.com/sponsors/estruyf",
+  extensionLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter",
+  reviewLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details",
+  installLink: "vscode:extension/eliostruyf.vscode-front-matter"
+}

docs/constants/features.ts

@@ -0,0 +1,28 @@
+
+
+export const features =  [
+  {
+    name: `feature_title_1`,
+    description: `feature_description_1`,
+  },
+  {
+    name: `feature_title_2`,
+    description: `feature_description_2`,
+  },
+  {
+    name: `feature_title_3`,
+    description: `feature_description_3`,
+  },
+  {
+    name: `feature_title_4`,
+    description: `feature_description_4`,
+  },
+  {
+    name: `feature_title_5`,
+    description: `feature_description_5`,
+  },
+  {
+    name: `feature_title_6`,
+    description: `feature_description_6`,
+  }
+];

docs/constants/navigation.tsx

@@ -0,0 +1,35 @@
+import { HeartIcon } from "@heroicons/react/outline";
+import React from "react";
+import { Extension } from "./extension";
+
+export const navigation = {
+  main: [
+    { name: 'Documentation', title: '', href: '/docs' },
+    { name: 'Showcase', href: '/showcase' },
+    { name: 'Changelog', href: '/changelog' },
+  ],
+  social: [
+    { 
+      name: 'GitHub', 
+      title: 'Check out our GitHub repository', 
+      href: Extension.githubLink,
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      )
+    },
+    { 
+      name: 'Sponsor us', 
+      title: 'Become a sponsor, and get mentioned', 
+      href: Extension.sponsorLink,
+      icon: (props: any) => (
+        <HeartIcon {...props} />
+      )
+    }
+  ]
+};

docs/content/changelog/CHANGELOG.md

@@ -0,0 +1,230 @@
+# Change Log
+
+## [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  
+
+- 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 
+
+## [2.4.1] - 2020-08-16
+
+- Better editor highlighting functionality
+
+## [2.4.0] - 2020-08-16
+
+- [#21](https://github.com/estruyf/vscode-front-matter/issues/21): Folding provider for Front Matter implemented
+- [#55](https://github.com/estruyf/vscode-front-matter/issues/55): Highlight Front Matter in Markdown files
+- [#56](https://github.com/estruyf/vscode-front-matter/issues/56): Action to collapse all Front Matter panel sections at once
+- [#57](https://github.com/estruyf/vscode-front-matter/issues/57): New action added to provide better writing settings (only for Markdown files)
+- [#58](https://github.com/estruyf/vscode-front-matter/issues/58): Sections remember their previous state (folded/unfolded)
+- [#59](https://github.com/estruyf/vscode-front-matter/issues/59): Center layout view toggle action added
+
+## [2.3.0] - 2020-08-10
+
+- Refactoring and showing other actions in the base view
+- Show `BaseView` in Front Matter panel when switching to `welcome` tab
+- [#31](https://github.com/estruyf/vscode-front-matter/issues/31): Automatically update the last modification date of the file when performing changes
+- [#53](https://github.com/estruyf/vscode-front-matter/issues/53): Create current Markdown file as template
+
+## [2.2.0] - 2020-08-06
+
+- [#28](https://github.com/estruyf/vscode-front-matter/issues/28): Align the file its name with the article slug
+- [#47](https://github.com/estruyf/vscode-front-matter/issues/47): Fix when table shows only value `0`
+- [#48](https://github.com/estruyf/vscode-front-matter/issues/48): Added new folder registration message + notification helper
+- [#49](https://github.com/estruyf/vscode-front-matter/issues/49): New initialize project command
+- [#50](https://github.com/estruyf/vscode-front-matter/issues/50): Fix in the table rendering of rows
+- [#51](https://github.com/estruyf/vscode-front-matter/issues/51): Panel actions base view enhanced to show project actions and information
+
+## [2.1.0] - 2020-08-04
+
+- [#44](https://github.com/estruyf/vscode-front-matter/issues/45): Added article creation command
+- [#45](https://github.com/estruyf/vscode-front-matter/issues/45): WSL support added
+- [#46](https://github.com/estruyf/vscode-front-matter/issues/46): Make the tag pickers render in full width
+
+## [2.0.1] - 2020-07-27
+
+- [#42](https://github.com/estruyf/vscode-front-matter/issues/42): Small enhancement to the table layout
+- [#43](https://github.com/estruyf/vscode-front-matter/issues/43): Fix for collapsible sections and taxonomy picker
+
+## [2.0.0] - 2020-07-23
+
+- Redesigned sidebar panel
+- Sidebar background styling match the VSCode defined sidebar color
+- Added support for `mdx` files
+- Added support for `enter` press in the combobox
+- [#41](https://github.com/estruyf/vscode-front-matter/issues/41): Word count implementation + extra details
+- [#40](https://github.com/estruyf/vscode-front-matter/issues/40): Added checks for the keyword usage in title, description, slug, and content
+
+## [1.18.0] - 2020-07-20
+
+- Updated README
+
+## [1.17.1] - 2020-06-28
+
+- [#34](https://github.com/estruyf/vscode-front-matter/issues/34): Fix that last modification date does not update the publication date
+- [#38](https://github.com/estruyf/vscode-front-matter/issues/38): Update the last modification date on new page creation from the template
+
+## [1.17.0] - 2020-06-14
+
+- [#36](https://github.com/estruyf/vscode-front-matter/issues/36): Add the option to change the Front Matter its description field
+
+## [1.16.1] - 2020-05-27
+
+- Fix for Node.js v14.16.0
+
+## [1.16.0] - 2020-05-04
+
+- Add all front matter properties as an argument for custom scripts
+
+## [1.15.1] - 2020-05-04
+
+- Add the ability to specify a custom Node path
+
+## [1.15.0] - 2020-05-04
+
+- Added the ability to add your own custom scripts as panel actions.
+
+## [1.14.0] - 2020-03-19
+
+- New links added to the Front Matter panel to reveal the file and folder.
+
+## [1.13.0] - 2020-02-26
+
+- Implemented links to quickly open the extension settings + issue from the FrontMatter view panel
+- Added button to update the modified time in the FrontMatter view panel
+
+## [1.12.1] - 2020-02-13
+
+- Fix Front Matter SVG
+
+## [1.12.0] - 2020-01-26
+
+- [#29](https://github.com/estruyf/vscode-front-matter/issues/29): Open file after creating it from the template
+
+## [1.11.1] - 2020-12-10
+
+- [#26](https://github.com/estruyf/vscode-front-matter/issues/26): Fix for arrow selection in the dropdown.
+
+## [1.11.0] - 2020-12-10
+
+- [#25](https://github.com/estruyf/vscode-front-matter/issues/25): Moved from Material UI Autocomplete to Downshift. This gives more flexibility, and allows to focus the inputs from a VSCode command.
+- Changed the `Front Matter: Insert <tags | categories>` functionality to open in the panel, instead of using the VSCode dialogs.
+
+## [1.10.0] - 2020-12-03
+
+- FrontMatter panel implemented. This panel allows you to control all extension actions, but not only that. It makes adding tags and categories in a easier way to your page.
+
+## [1.9.0] - 2020-11-25
+
+- [#23](https://github.com/estruyf/vscode-front-matter/issues/23): Implemented the option to create and use templates for article creation (front matter will be updates as well).
+
+## [1.8.0] - 2020-11-20
+
+- [#22](https://github.com/estruyf/vscode-front-matter/issues/22): Allow to configure the SEO Title and Description lengths.
+
+## [1.7.2] - 2020-10-30
+
+- [#19](https://github.com/estruyf/vscode-front-matter/issues/19): fix for tag insertion when empty tag is used
+
+## [1.7.1] - 2020-10-21
+
+- Fix for title and description length check
+
+## [1.7.0] - 2020-09-30
+
+- [#18](https://github.com/estruyf/vscode-front-matter/issues/18): Added date and modified date field names settings to be able to change the extension its behavior
+
+## [1.6.0] - 2020-09-23
+
+- Syntax highlighting for Hugo shortcodes has been added
+
+## [1.5.0] - 2020-09-10
+
+- [#17](https://github.com/estruyf/vscode-front-matter/issues/17): Make front matter be indentation `tabSize` aware
+
+## [1.4.0] - 2020-08-24
+
+- Added set `lastmod` date command
+- [#16](https://github.com/estruyf/vscode-front-matter/issues/16): Fixed hardcoded length value
+
+## [1.3.0] - 2020-08-22
+
+- Added SEO description warning when over 140 characters is used
+
+## [1.2.0] - 2020-07-03
+
+- Added SEO title warning when over 60 characters is used
+
+## [1.1.1] - 2020-04-07
+
+- `TOML` delimiter fix
+
+## [1.1.0] - 2020-03-25
+
+- `TOML` support added
+
+## [1.0.0] - 2020-03-25
+
+- First major release
+- Fixed an issue with `null` tag/category values
+
+## [0.0.10] - 2019-09-17
+
+- Updated the logic to remove quotes from front matter property values
+
+## [0.0.9] - 2019-09-17
+
+- Added setting to specify if you want to enable/disable array indents in the front matter of your article
+- Remove quotes on date strings
+
+## [0.0.8] - 2019-09-04
+
+- Added command to generate a clean article slug
+
+## [0.0.7] - 2019-08-28
+
+- Added command to remap tags or categories in all posts: `Front Matter: Remap tag/category in all articles`
+
+## [0.0.6] - 2019-08-28
+
+- Updated `package.json` file to include preview label
+- Added the status bar item to quickly view and update the draft status of an article
+
+## [0.0.5] - 2019-08-27
+
+- Updated title, description and logo
+
+## [0.0.4] - 2019-08-26
+
+- Added set date command
+
+## [0.0.3] - 2019-08-26
+
+- Support added for `*.markdown` files
+
+## [0.0.2] - 2019-08-26
+
+- Updated extension to bundle the project output
+
+## [0.0.1] - 2019-08-26
+
+- Initial beta version

docs/content/docs/commands.md

@@ -0,0 +1,128 @@
+---
+title: Commands
+slug: commands
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 6
+---
+
+# Commands
+
+Front Matter actions are also available as commands. In this section of the documenation all commands will be explained.
+
+![Commands](/assets/commands.png)
+
+## Using commands
+
+- Start by opening the command prompt:
+  - Windows: ⇧+ctrl+P
+  - Mac: ⇧+⌘+P
+- Use one of the following commands
+
+## Available commands
+
+### 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.
+
+ID: `frontMatter.init`
+
+### Open dashboard
+
+Opens the dashboard with your Markdown pages overview. If you did not yet initialize your project, the welcome screen will be shown.
+
+ID: `frontMatter.dashboard`
+
+### Create category
+
+Creates a new category and allows you to include it into your post automatically.
+
+ID: `frontMatter.createCategory`
+
+### Create tag
+
+Creates a new tag and allows you to include it into your post automatically.
+
+ID: `frontMatter.createTag`
+
+### Insert categories
+
+Inserts a selected categories into the front matter of your article/post/... - When using this command, the Front Matter panel opens and focuses on the specified type.
+
+ID: `frontMatter.insertCategories`
+
+### Insert tags
+
+Inserts a selected tags into the front matter of your article/post/... - When using this command, the Front Matter panel opens and focuses on the specified type.
+
+ID: `frontMatter.insertTags`
+
+### Export all tags & categories to your settings
+
+Export all the already used tags & categories in your articles/posts/... to your user settings.
+
+ID: `frontMatter.exportTaxonomy`
+
+### 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 VS Code settings update with all new taxonomy tags/categories.
+
+ID: `frontMatter.remap`
+
+### 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.
+
+ID: `frontMatter.createTemplate`
+
+### New article from template
+
+With this command, you can easily create content in your project within the registered folders and provided templates.
+
+> **Info**: The command will use the `frontMatter.templates.prefix` setting in order to add a prefix (default: `yyyy-MM-dd`) on the filename.
+
+ID: `frontMatter.createContent`
+
+### 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:
+
+```yaml
+---
+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 prefix and suffix settings are not provided, which mean it would not add anything extra 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. 
+
+ID: `frontMatter.generateSlug`
+
+### Set current date
+
+Sets/updates the current date in your Markdown file.
+
+ID: `frontMatter.setDate`
+
+### Set lastmod date
+
+Sets/updates the current modified date in your Markdown file.
+
+ID: `frontMatter.setLastModifiedDate`
+
+### Preview article
+
+Open the site preview of your article in VS Code.
+
+ID: `frontMatter.preview`

docs/content/docs/custom-actions.md

@@ -0,0 +1,58 @@
+---
+title: Custom actions
+slug: custom-actions
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 5
+---
+
+# Custom actions
+
+Not every website is the same. That is why we want to give you the ability to extend Front Matter and you can do this by adding your custom actions to the Front Matter panel. A custom action is nothing more than a Node.js script which is referenced from within your project.
+
+![Custom action](/assets/custom-action.png)
+
+> **Sample**: [Generate open graph preview image in Code with Front Matter](https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/)
+
+## Creating a script
+
+Create a folder in your project where you want to store all your custom scripts, and create a new JavaScript file. The sample content of this file looks like this:
+
+```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.`);
+}
+```
+
+> **Info**: The sample script can be found here [sample-script.js](https://github.com/estruyf/vscode-front-matter/blob/HEAD/sample/script-sample.js)
+
+The current workspace-, file-path, and front matter data will be passed as a arguments. Like you can see in the above sample script, you can fetch these argument values as follows:
+
+- `arguments[2]`: The workspace path
+- `arguments[3]`: The file path (Markdown file)
+- `arguments[4]`: The front matter data as object
+
+In order to use this functionality, you will need to configure the `frontMatter.custom.scripts` setting for your project as follows:
+
+```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. Command execution might for instance fail when using `nvm`. You can use the `nodeBin` property to specify the path to your node executable. **This property is optional**.
+
+Once a custom action has been configured, it will appear on the Front Matter panel. The output of the script will be passed as a notification in VS Code. This output allows you to copy the output, useful when you generate additional content.
+
+![Custom action output](/assets/custom-action-output.png)

docs/content/docs/dashboard.md

@@ -0,0 +1,33 @@
+---
+title: Dashboard
+slug: dashboard
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 3
+---
+
+# Dashboard
+
+Managing your Markdown pages has never been easier in VS Code. With the Front Matter dashboard, you will be able to view all your pages and **search** through them, **filter**, **sort**, and much more.
+
+![Dashboard](/assets/dashboard.png)
+
+In order to start using the dashboard, you will have to let the extension know in which folder(s) it can find your pages. Be sure to follow our [getting started](/docs/getting-started) guide.
+
+> **Important**: If your preview images are not loading, it might be that you need to configure the `publicFolder` where the extension can find them. For instance, in Hugo, this is the static folder. You can configure this by updating the `frontMatter.content.publicFolder` setting.
+
+## Supported filters
+
+- Tag filter
+- Category filter
+- Content folder (when you have multiple registered)
+
+## Supported sorting
+
+- Last modified
+- Filename (asc/desc)
+
+## Show on startup
+
+If you want, you can check on the `Open on startup?` checkbox. This setting will allow the dashboard to automatically open when you launch the project in VS Code. It will only apply to the current project, not for all of them.

docs/content/docs/getting-started.md

@@ -0,0 +1,49 @@
+---
+title: Getting started
+slug: getting-started
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 2
+---
+
+# Getting started
+
+To get you started, you first need to install the extension in Visual Studio Code. 
+
+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`
+
+## Welcome screen
+
+Once installed, Front Matter will open the **welcome screen** the first time Visual Studio Code gets reloaded.
+
+![Welcome screen](/assets/welcome-progress.png)
+
+It also supports light themes:
+
+![Welcome screen](/assets/welcome-light.png)
+
+> **Info**: The welcome screen will also be shown when Front Matter is not yet fully configured.
+
+## Required configuration
+
+On the welcome screen, there are two tasks to complete before you can take full advantage of Front Matter. 
+
+### Step 1: Initialize the project
+
+In this step, a `.templates` folder and `article.md` file template will be created in the current project.
+
+The `.templates` folder, is a folder that can be used to place all sort of Markdown templates. It will be used when you want to let Front Matter generate new pages/articles/...
+
+### Step 2: Register content folder(s)
+
+As Front Matter is **not** created to only support one static site generator, you will be able to specify where your Markdown content lives. From the moment you register a folder, it will be used on the dashboard to show an overview of all files.
+
+You can register a folder by right-clicking on a folder name in the explorer panel from Visual Studio Code and selecting **Front Matter: Register folder**.
+
+![Register a folder](/assets/register-folder.png)
+
+## Enjoy using Front Matter

docs/content/docs/index.md

@@ -0,0 +1,52 @@
+---
+title: Introduction
+slug: ''
+description: Create, edit, and preview your pages within Visual Studio Code. Front Matter allows you to keep control of your static site without any external tools.
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 1
+---
+
+# Introduction
+
+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.
+
+![Welcome screen](/assets/welcome-progress.png)
+
+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
+
+![Site preview](/assets/site-preview.png)
+
+## Why Front Matter?
+
+Initially, the Front Matter extension was created when [Elio Struyf](https://twitter.com/eliostruyf) migrated from WordPress to Hugo (Static Site Generator). To make content management more straightforward, he started to develop the Front Matter extension. He added more features regularly, and eventually, it became a headless CMS that runs within Visual Studio Code.
+
+## Advantages
+
+We believe that Front Matter gives you the following advantages:
+
+### Speed
+
+It just runs on your machine. There are no servers/websites/APIs involved in the process. Nothing can beat this.
+
+### Use it within Visual Studio Code
+
+You do not need to jump from tool to tool. Just use the one that you like the most, which is, of course, Visual Studio Code.
+
+### Customizable
+
+Almost all of the Front Matter features are customizable by the extension of its settings. These settings make sure that you can tweak it to your needs.
+
+### Extensibility
+
+We know that not every site is the same. That is why we allow you to add your custom scripts. These scripts will show up as actions in our panel and could take your content management to the next level. 
+
+> **Example**: [Generate open graph preview image in Code with Front Matter](https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/)

docs/content/docs/markdown.md

@@ -0,0 +1,26 @@
+---
+title: Markdown
+slug: markdown
+description: null
+date: '2021-08-31T05:59:58.852Z'
+lastmod: '2021-08-31T05:59:58.852Z'
+weight: 6
+---
+
+# Markdown features
+
+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.
+
+## Front Matter folding
+
+If you want to focus on the content of your page, you have the ability to fold the Front Matter section of your page.
+
+![Folding range](/assets/folding.png)
+
+## Front Matter highlighting
+
+The extension will automatically highlight the Front Matter of you document to create a visual difference between metadata and content.
+
+![Highlighting](/assets/fm-highlight.png)
+
+> **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`.

docs/content/docs/panel.md

@@ -0,0 +1,109 @@
+---
+title: Panel
+slug: panel
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 4
+---
+
+# 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.
+
+> **Info**: Initially, this panel was created to add tags and categories easily to your articles, as currently, VS Code multi-select is not optimal to use when having a lot of tags/categories.
+
+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.
+
+## Using the panel
+
+Once you installed the extension, you will notice a Front Matter icon on the activity bar (by default on the left side). Clicking this icon will open the Front Matter panel.
+
+![Activity bar action](/assets/activitybar-action.png)
+
+## Global settings
+
+In this section of the panel, you can modify a couple of the useful settings to have close to hand.
+
+![Global settings](/assets/global-settings.png)
+
+> **Info**: The global settings section will also be shown when you have the panel open on other types of files.
+
+## SEO status
+
+Search Engine Optimization or simply SEO is very important to any site. The extension shows you more information about how well your article is written.
+
+Supports the following:
+
+- Title and description length validation
+- Article length recommendation
+- Keyword validation on title, description, slug, and content
+- More content details
+
+![SEO](/assets/seo.png)
+
+### Settings
+
+In case you want to change the SEO settings, you can use the following settings: 
+
+- `frontMatter.taxonomy.seoTitleLength`: Specifies the optimal title length for SEO (set to `-1` to turn it off).
+- `frontMatter.taxonomy.seoDescriptionLength`: Specifies the optimal description length for SEO (set to `-1` to turn it off).
+- `frontMatter.taxonomy.seoContentLengh`: 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).
+- `frontMatter.taxonomy.seoDescriptionField`: Specifies the name of the SEO description field for your page. Default is 'description'.
+
+## Actions
+
+When writing articles, there are always a couple of actions you need/want to perform. In this section, we provide you the most used/requested actions like:
+
+- Optimizing the slug
+- Setting the publishing date
+- Setting the modified date
+- Publish or revert to draft
+
+![Actions](/assets/actions.png)
+
+> **Important**: You are able to add your own actions, more information about this you can read in our [custom actions](/docs/custom-actions) section.
+
+### Settings
+
+The following settings are related to these actions:
+
+- `frontMatter.preview.host`: Specify the host URL (example: http://localhost:1313) to be used when opening the preview.
+- `frontMatter.taxonomy.dateField`: Specifies the date field name to use in your Front Matter. Default: `date`.
+- `frontMatter.taxonomy.modifiedField`: Specifies the modified date field name to use in your Front Matter. Default: `lastmod`.
+- `frontMatter.taxonomy.dateFormat`: Specify the date format for your articles. Check [date-fns formating](https://date-fns.org/v2.0.1/docs/format) for more information.
+- `frontMatter.taxonomy.slugPrefix`: Specify a prefix for the slug.
+- `frontMatter.taxonomy.slugSuffix`: Specify a suffix for the slug.
+- `frontMatter.taxonomy.alignFilename`: Align the filename with the new slug when it gets generated.
+
+## Metadata
+
+In the metadata section, you can 
+
+![Metadata section](/assets/metadata.png)
+
+The tags and categories inputs allow you to insert known and unknown tags/categories. When an unknown tag/category gets added, it will show a `+` sign that allows you to add it to your configuration so that it will appear in the known tags/categories next time.
+
+### Settings
+
+- `frontMatter.panel.freeform`: Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: `true`.
+
+## Recently modified
+
+Navigate quickly to a recently modified file. In the recently modified section, the latest 10 modified files get shown. 
+
+![Recently modified](/assets/recent-files.png)
+
+> **Important**: In order to use this functionality, a registered content folder needs to be present. More information in our [getting started](/docs/getting-started) section.
+
+> **Info**: The recently modified section will also be shown when you have the panel open on other types of files.
+
+## Other actions
+
+This section provides a couple of other useful actions, like opening the current project in your explorer/finder. 
+
+![Other actions](/assets/other-actions.png)
+
+> **Info**: The `writing settings enabled / enable write settings` action allows 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.
+
+> **Info**: The other actions section will also be shown when you have the panel open on other types of files.

docs/content/docs/settings.md

@@ -0,0 +1,233 @@
+---
+title: Settings
+slug: settings
+description: 
+date: '2021-08-30T16:13:00.546Z'
+lastmod: '2021-08-30T16:13:01.763Z'
+weight: 7
+---
+
+# Settings
+
+Most of the actions are configurable to your needs. In this part of the documentation all settings are explained.
+
+## Where is the data stored?
+
+The extension stores all settings in the VS Code user settings file located in your project under `.vscode/settings.json`.
+
+## Available settings
+
+### frontMatter.content.autoUpdateDate
+
+Specify if you want to automatically update the modified date of your article/page.
+
+- Type: `boolean`
+- Default: `false`
+
+### frontMatter.content.fmHighlight
+
+Specify if you want to highlight the Front Matter in the Markdown file.
+
+- Type: `boolean`
+- Default: `true`
+
+### frontMatter.content.folders
+
+This array of folders defines where the extension can easily create new content by running the create article command.
+
+- Type: `object[]`
+- Default: `[]`
+
+Sample:
+
+```json
+{
+  "frontMatter.content.folders": [{
+    "title": "Articles",
+    "fsPath": "<the path to the folder>",
+    "paths": ["<wsl-folder-path>"]
+  }]
+}
+```
+
+### frontMatter.content.publicFolder
+
+Specify the folder name where all your assets are located. For instance in Hugo this is the `static` folder.
+
+- Type: `string`
+- Default: `""`
+
+
+### frontMatter.custom.scripts
+
+Specify the path to a Node.js script to execute. The current file path will be provided as an argument."
+
+- Type: `object[]`
+- Default: `[]`
+
+Sample:
+
+```json
+{
+  "frontMatter.custom.scripts": [{
+    "title": "Generate social image",
+    "script": "./scripts/social-img.js",
+    "nodeBin": "~/.nvm/versions/node/v14.15.5/bin/node"
+  }]
+}
+```
+
+### frontMatter.dashboard.openOnStart
+
+Specify if you want to open the dashboard when you start VS Code.
+
+- Type: `boolean | null`
+- Default: `null`
+
+### frontMatter.panel.freeform
+
+Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards).
+
+- Type: `boolean`
+- Default: `true`
+
+### frontMatter.preview.host
+
+Specify the host URL (example: http://localhost:1313) to be used when opening the preview.
+
+- Type: `string`
+- Default: `""`
+
+### 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`. The date will be generated based on the article its date field value.
+
+- Type: `string`
+- Default: `""`
+
+> **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`.
+
+### frontMatter.taxonomy.dateField
+
+Specifies the date field name to use in your Front Matter.
+
+- Type: `string`
+- Default: `date`
+
+### frontMatter.taxonomy.modifiedField
+
+Specifies the modified date field name to use in your Front Matter.
+
+- Type: `string`
+- Default: `lastmod`
+
+### frontMatter.taxonomy.dateFormat
+
+Specify the date format for your articles. Check [date-fns formating](https://date-fns.org/v2.0.1/docs/format) for more information.
+
+- Type: `string`
+- Default: `iso`
+
+### frontMatter.taxonomy.tags
+
+Specifies the tags which can be used in the Front Matter.
+
+- Type: `string[]`
+- Default: `[]`
+### frontMatter.taxonomy.categories
+
+Specifies the categories which can be used in the Front Matter.
+
+- Type: `string[]`
+- Default: `[]`
+
+### frontMatter.taxonomy.slugPrefix
+
+Specify a prefix for the slug.
+
+- Type: `string`
+- Default: `""`
+
+### frontMatter.taxonomy.slugSuffix
+
+Specify a suffix for the slug.
+
+- Type: `string`
+- Default: `""`
+
+### frontMatter.taxonomy.alignFilename
+
+Align the filename with the new slug when it gets generated.
+
+- Type: `boolean`
+- Default: `false`
+
+
+### frontMatter.taxonomy.indentArrays
+
+Specify if arrays in front matter of the markdown files are indented.
+
+- Type: `boolean`
+- Default: `true`
+
+### 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"]
+}
+```
+
+- Type: `string[]`
+- Default: `[]`
+
+### frontMatter.taxonomy.frontMatterType
+
+Specify which Front Matter language you want to use. The extension supports `YAML` (default) and `TOML`.
+
+- Type: `enum: YAML | TOML`
+- Default: `YAML`
+
+### frontMatter.taxonomy.seoTitleLength
+
+Specifies the optimal title length for SEO (set to `-1` to turn it off).
+
+- Type: `number`
+- Default: `60`
+
+### frontMatter.taxonomy.seoDescriptionLength
+
+Specifies the optimal description length for SEO (set to `-1` to turn it off).
+
+- Type: `number`
+- Default: `160`
+
+### frontMatter.taxonomy.seoContentLengh
+
+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).
+
+- Type: `number`
+- Default: `1760`
+
+### frontMatter.taxonomy.seoDescriptionField
+
+Specifies the name of the SEO description field for your page.
+
+- Type: `string`
+- Default: `description`
+
+### frontMatter.templates.folder
+
+Specify the folder to use for your article templates.
+
+- Type: `string`
+- Default: `.templates`
+
+### frontMatter.templates.prefix
+
+Specify the prefix you want to add for your new article filenames.
+
+- Type: `string`
+- Default: `yyyy-MM-dd`

docs/content/docs/site-preview.md

@@ -0,0 +1,20 @@
+---
+title: Site preview
+slug: site-preview
+description: null
+date: '2021-08-31T08:24:02.613Z'
+lastmod: '2021-08-31T08:24:02.613Z'
+weight: 6
+---
+
+# 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 actual site instead. 
+
+![Site preview](/assets/site-preview.png)
+
+## Configuration
+
+In order to use the site preview, you will first have to set the `frontMatter.preview.host` setting. You can set it via the `Global Settings` section in the Front Matter panel or in your `.vscode/settings.json` file. 
+
+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.

docs/lib/api.ts

@@ -0,0 +1,53 @@
+import fs from 'fs'
+import { join } from 'path'
+import matter from 'gray-matter'
+
+type ContentType = "docs" | "changelog";
+
+const postsDirectory = join(process.cwd(), 'content');
+
+export function getPostSlugs(type: ContentType) {
+  return fs.readdirSync(join(postsDirectory, type)).filter(f => f.endsWith(`.md`))
+}
+
+export function getPostByFilename(type: ContentType, crntFile: string, fields: string[] = []) {
+  
+  const realSlug = crntFile.replace(/\.md$/, '');
+  const fullPath = join(postsDirectory, type, `${realSlug}.md`)
+  const fileContents = fs.readFileSync(fullPath, 'utf8')
+  const { data, content } = matter(fileContents)
+
+  const items: any = {}
+
+  // Ensure only the minimal needed data is exposed
+  fields.forEach((field) => {
+    if (field === 'content') {
+      items[field] = content
+    }
+
+    if (field === 'fileName') {
+      items[field] = realSlug
+    }
+
+    if (data[field]) {
+      items[field] = data[field]
+    }
+    
+    if (field === 'slug') {
+      items[field] = data['slug'] || realSlug
+    }
+  })
+
+  return items
+}
+
+export function getAllPosts(type: ContentType, fields: string[] = []) {
+  const fileNames = getPostSlugs(type);
+  
+  const posts = fileNames
+    .map((fileName) => getPostByFilename(type, fileName, fields))
+    // sort posts by date in descending order
+    .sort((post1, post2) => ((post1 as any)?.date > (post2 as any)?.date ? -1 : 1));
+
+  return posts
+}

docs/lib/publicUrl.ts

@@ -0,0 +1,9 @@
+
+
+export function publicUrl() {
+  if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
+    return `https://frontmatter.codes`;
+  } else {
+    return `https://${process.env.VERCEL_URL}`;
+  }
+}

docs/locale/en.ts

@@ -0,0 +1,50 @@
+import { Extension } from "../constants/extension";
+
+
+export const strings = {
+  // CTA
+  cta_title: "Manage your static site with",
+  cta_description: "Create, edit, and preview your pages within Visual Studio Code. Front Matter allows you to keep control of your static site without any external tools.",
+  cta_button_primary: "Get the extension",
+  cta_button_secondary: "Read our docs",
+
+  // Generators
+  generators_title: "Built for any static-site generator you might like",
+
+  // Features
+  features_title: "Features",
+  features_description: "Check out our main features which help you manage your static-site",
+
+  // Feature
+  feature_title_1: "Manage your site within VS Code",
+  feature_description_1: "A Content Management System built to run within Visual Studio Code. No dependencies on any website or API.",
+
+  feature_title_2: "Preview",
+  feature_description_2: "Allow showing your page previews within Visual Studio Code.",
+
+  feature_title_3: "Page dashboard",
+  feature_description_3: "Our page dashboard allows you to search, filter, sort, and group all your static site pages.",
+
+  feature_title_4: "SEO Checks",
+  feature_description_4: "Our search engine optimization checks allow you to write better articles. We show you more information about your title, description, content, keywords, and more.",
+
+  feature_title_5: "Use it the way you want it",
+  feature_description_5: "All of the functionalities are configurable to your needs. You can define how you want to use Front Matter in your editor experience.",
+
+  feature_title_6: "Extensibility",
+  feature_description_6: "Add your actions with our custom scripting capability. For instance, you can use a script and hook it up to the extension if you want to generate preview images. If we do not support it, you can build it and share it with us.",
+
+  // Documentation
+  documentation_title: "Documentation",
+  documentation_description: `Get to know more about how you can use ${Extension.name} with our documentation.`,
+
+  // Showcase
+  showcase_title: "Showcase",
+  showcase_description: "Check out our showcase of static-sites using Front Matter.",
+
+  // Changelog
+  changelog_title: "Changelog",
+  changelog_description: "Check out our changelog for Front Matter.",
+  changelog_page_title: `Latest updates`,
+  changelog_page_description: `An overview of all updates from the ${Extension.name} extension`,
+};

docs/locale/localeStrings.ts

@@ -0,0 +1,5 @@
+import { strings as enMsgs } from './en';
+
+export const LOCALE_STRINGS = {
+  en: { translation: enMsgs }
+}

docs/locale/localization.ts

@@ -0,0 +1,20 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { LOCALE_STRINGS } from './localeStrings';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n.use(new LanguageDetector({}, {caches:[]}))
+    .use(initReactI18next)
+    .init({
+      fallbackLng: 'en',
+      resources: {...LOCALE_STRINGS},
+      // debug: process.env.NODE_ENV && process.env.NODE_ENV === 'development',
+      detection: {
+        order: ['cookie', 'localStorage'],
+      },
+      interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+      }
+    });
+    
+export default i18n;

docs/models/PageFrontMatter.ts

@@ -0,0 +1,10 @@
+export interface PageFrontMatter {
+  title: string;
+  slug: string;
+  description: string;
+  date: string;
+  lastmod: string;
+  content: string;
+  fileName: string;
+  weight?: number;
+}

docs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

docs/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+}

docs/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "frontmatter-docs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "changelog": "node scripts/copy-changelog.js",
+    "dev": "npm run changelog && next dev",
+    "build": "npm run changelog && next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.4.0",
+    "@heroicons/react": "^1.0.4",
+    "date-fns": "^2.23.0",
+    "gray-matter": "^4.0.3",
+    "i18next": "^20.4.0",
+    "i18next-browser-languagedetector": "^6.1.2",
+    "next": "11.1.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-i18next": "^11.11.4",
+    "react-markdown": "^7.0.1",
+    "rehype-raw": "^6.1.0",
+    "remark-autolink-headings": "7.0.1",
+    "remark-heading-id": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.19",
+    "autoprefixer": "^10.3.3",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.0",
+    "postcss": "^8.3.6",
+    "postcss-nested": "^5.0.6",
+    "remark": "14.0.1",
+    "remark-html": "14.0.0",
+    "tailwindcss": "^2.2.8",
+    "typescript": "4.4.2"
+  }
+}

docs/pages/_app.tsx

@@ -0,0 +1,9 @@
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
+import '../locale/localization';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

docs/pages/_document.tsx

@@ -0,0 +1,31 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+
+  static async getInitialProps(ctx: any) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <meta charSet="UTF-8" />
+          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+          <link rel="manifest" href="/site.webmanifest" />
+        </Head>
+
+        <body className={`bg-vulcan-500 text-whisper-500`}>
+          <Main />
+          
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument

docs/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

docs/pages/changelog/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import { Description, OtherMeta, Title } from '../../components/Meta';
+import { Layout } from '../../components/Page/Layout';
+import { getPostByFilename } from '../../lib/api';
+
+export default function Home({ content }: any) {
+  const { t: strings } = useTranslation();
+  
+  return (
+    <>
+      <Title value={strings(`changelog_title`)} />
+      <Description value={`changelog_description`} />
+      <OtherMeta image={`/assets/frontmatter-preview.png`} />
+
+      <Layout>
+        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
+          <div className="py-8 space-y-2 md:space-y-5 ">
+            <h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">{strings(`changelog_page_title`)}</h1>
+            
+            <p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{strings(`changelog_page_description`)}</p>
+          </div>
+
+          <div className={`changelog`}>
+            {/* eslint-disable react/no-children-prop */}
+            <ReactMarkdown 
+              components={{
+                a: ({node, ...props}) => {
+                  const url = props?.href || "";
+                  const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
+                  const elm = <a key={url as string} href={url as string} title={title}>{title}</a>;
+                  return elm;
+                }
+              }}
+              rehypePlugins={[rehypeRaw]} 
+              children={content} />
+          </div>          
+        </div>
+      </Layout>
+    </>
+  )
+}
+
+export const getStaticProps = async () => {
+  const changes = getPostByFilename('changelog', "CHANGELOG.md", ['content']);
+
+  return {
+    props: { content: changes.content }
+  }
+}

docs/pages/docs/[slug].tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { getAllPosts, getPostByFilename } from '../../lib/api';
+import { useRouter } from 'next/router';
+import { Description, OtherMeta, Title } from '../../components/Meta';
+import { Layout } from '../../components/Page/Layout';
+import { useTranslation } from 'react-i18next';
+import { Page } from '../../components/Docs/Page';
+import { Markdown } from '../../components/Docs/Markdown';
+
+export default function Documentation({ page, pages }: any) {
+  const { t: strings } = useTranslation();
+  const router = useRouter();
+
+  if (!router.isFallback && !page?.slug) {
+    return <p>Error</p>
+  }
+
+  return (
+    <>
+      <Title value={strings(`documentation_title`)} />
+      <Description value={`documentation_description`} />
+      <OtherMeta image={`/assets/frontmatter-preview.png`} />
+
+      <Layout>
+        <Page items={pages} page={page}>
+          <Markdown content={page?.content} />
+        </Page>
+      </Layout>
+    </>
+  )
+}
+
+export async function getStaticProps({ params }: any) {
+  const pages = getAllPosts('docs', [
+    'title',
+    'slug',
+    'description',
+    'date',
+    'lastmod',
+    'weight',
+    'content',
+    'fileName'
+  ]);
+
+  const article: any = pages.find((b: any) => b.slug === params.slug);
+
+  const doc: any = getPostByFilename('docs', article.fileName, [
+    'title',
+    'slug',
+    'description',
+    'date',
+    'lastmod',
+    'weight',
+    'content',
+    'fileName'
+  ])
+
+  return {
+    props: {
+      page: {
+        ...doc
+      },
+      pages
+    }
+  }
+}
+
+export async function getStaticPaths() {
+  const pages = getAllPosts('docs', ['slug', 'fileName']);
+
+  return {
+    paths: pages.map((page: any) => ({
+      params: {
+        slug: page.slug,
+        fileName: page.fileName
+      }
+    })),
+    fallback: false
+  }
+}

docs/pages/docs/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import { Markdown } from '../../components/Docs/Markdown';
+import { Page } from '../../components/Docs/Page';
+import { Description, OtherMeta, Title } from '../../components/Meta';
+import { Layout } from '../../components/Page/Layout';
+import { getAllPosts } from '../../lib/api';
+import { PageFrontMatter } from '../../models/PageFrontMatter';
+
+export default function Home({ pages }: { pages: PageFrontMatter[] }) {
+  const { t: strings } = useTranslation();
+
+  const welcome = pages?.find(p => p.slug === "index");
+  
+  return (
+    <>
+      <Title value={strings(`documentation_title`)} />
+      <Description value={`documentation_description`} />
+      <OtherMeta image={`/assets/frontmatter-preview.png`} />
+
+      <Layout>
+        <Page items={pages} page={welcome}>
+          <Markdown content={welcome?.content} />
+        </Page>
+      </Layout>
+    </>
+  )
+}
+
+export const getStaticProps = async () => {
+  const pages = getAllPosts('docs', [
+    'title',
+    'slug',
+    'description',
+    'date',
+    'lastmod',
+    'weight',
+    'content',
+    'fileName'
+  ]);
+
+  return {
+    props: { pages },
+  }
+}

docs/pages/index.tsx

@@ -0,0 +1,28 @@
+import type { NextPage } from 'next';
+import React from 'react';
+import { Description, OtherMeta, Title } from '../components/Meta';
+import { CTA } from '../components/Page/CTA';
+import { Features } from '../components/Page/Features';
+import { Generators } from '../components/Page/Generators';
+import { Layout } from '../components/Page/Layout';
+import { Extension } from '../constants/extension';
+
+const Home: NextPage = () => {
+  return (
+    <>
+      <Title value={Extension.home} />
+      <Description value={Extension.description} />
+      <OtherMeta image={`/assets/frontmatter-preview.png`} />
+      
+      <Layout>
+        <CTA />
+
+        <Generators />
+
+        <Features />
+      </Layout> 
+    </>
+  )
+}
+
+export default Home

docs/pages/showcase/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Description, OtherMeta, Title } from '../../components/Meta';
+import { Layout } from '../../components/Page/Layout';
+import showcases from '../../showcases.json';
+
+export default function Home({ showcases }: any) {
+  const { t: strings } = useTranslation();
+  
+  return (
+    <>
+      <Title value={strings(`showcase_title`)} />
+      <Description value={`showcase_description`} />
+      <OtherMeta image={`/assets/frontmatter-preview.png`} />
+
+      <Layout>
+        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:py-24 lg:px-8 divide-y-2 divide-vulcan-200">
+          <div className="py-8 space-y-2 md:space-y-5 ">
+            <h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">{strings(`showcase_title`)}</h1>
+            
+            <p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{strings(`showcase_description`)}</p>
+          </div>
+
+          <div className={`py-8 grid grid-cols-1 lg:grid-cols-2 gap-8`}>
+            {showcases.filter((showcase: any) => showcase.image).map((showcase: any) => (
+              <a key={showcase.title} className="group space-y-2 md:space-y-5 relative" href={showcase.link} title={showcase.title} rel={`noopener noreferrer`}>
+                <figure className={`relative h-64 lg:h-[25rem] overflow-hidden grayscale group-hover:grayscale-0`}>
+                  <img className={`w-full object-cover`} src={`/showcases/${showcase.image}`} alt={showcase.title} loading={`lazy`} />
+                </figure>
+
+                <h2 className="text-3xl tracking-tight font-extrabold sm:leading-none lg:text-3xl xl:text-4xl">{showcase.title}</h2>
+
+                <p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">{showcase.description}</p>
+              </a>
+            ))}
+          </div>
+        </div>
+      </Layout>
+    </>
+  )
+}
+
+export const getStaticProps = async () => {
+  return {
+    props: { showcases }
+  }
+}

docs/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "postcss-nested": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}