Documenation updates

2026-07-04 00:41:00 +02:00 · 2021-08-31 11:49:14 +02:00
parent 733e747f58
commit 0fd6e1c87b
32 changed files with 658 additions and 16 deletions
@@ -1,4 +1,6 @@
+import Link from 'next/link';
 import * as React from 'react';
+import { useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';

@@ -21,6 +23,16 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
    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');
+      }
+    }
+  }, ['']);
+
  return (
    <div className={`markdown`}>
      {/* eslint-disable react/no-children-prop */}
@@ -29,7 +41,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
          a: ({node, ...props}) => {
            const url = props?.href || "";
            const title = getTitle(props);
-            const elm = <a key={url as string} href={url as string} title={title}>{title}</a>;
+            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>),
@@ -1,14 +1,16 @@
 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, children}: React.PropsWithChildren<IPageProps>) => {
+export const Page: React.FunctionComponent<IPageProps> = ({items, page, children}: React.PropsWithChildren<IPageProps>) => {
  return (
-    <div className={`py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
+    <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`}>
@@ -17,6 +19,8 @@ export const Page: React.FunctionComponent<IPageProps> = ({items, children}: Rea

        <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>
@@ -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">Github</a>!</p>
+      </div>
+    </div>
+  );
+};
@@ -22,7 +22,7 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh

          <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.extensionLink} 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`}>
+              <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">
@@ -9,4 +9,5 @@ export const Extension = {
  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"
 }
@@ -5,4 +5,124 @@ 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`
@@ -5,4 +5,54 @@ 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)
@@ -5,4 +5,29 @@ 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.
@@ -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`.
@@ -5,4 +5,105 @@ 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.
@@ -5,4 +5,229 @@ 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`
@@ -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.
@@ -5,5 +5,6 @@ export interface PageFrontMatter {
  date: string;
  lastmod: string;
  content: string;
+  fileName: string;
  weight?: number;
 }
@@ -1220,6 +1220,11 @@
      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
      "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
    },
+    "date-fns": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
+      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA=="
+    },
    "debug": {
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -12,6 +12,7 @@
  "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",
@@ -22,7 +22,7 @@ export default function Documentation({ page, pages }: any) {
      <OtherMeta image={`/assets/frontmatter-preview.png`} />

      <Layout>
-        <Page items={pages}>
+        <Page items={pages} page={page}>
          <Markdown content={page?.content} />
        </Page>
      </Layout>
@@ -51,7 +51,8 @@ export async function getStaticProps({ params }: any) {
    'date',
    'lastmod',
    'weight',
-    'content'
+    'content',
+    'fileName'
  ])

  return {
@@ -21,7 +21,7 @@ export default function Home({ pages }: { pages: PageFrontMatter[] }) {
      <OtherMeta image={`/assets/frontmatter-preview.png`} />

      <Layout>
-        <Page items={pages}>
+        <Page items={pages} page={welcome}>
          <Markdown content={welcome?.content} />
        </Page>
      </Layout>
@@ -37,7 +37,8 @@ export const getStaticProps = async () => {
    'date',
    'lastmod',
    'weight',
-    'content'
+    'content',
+    'fileName'
  ]);

  return {
@@ -16,7 +16,7 @@ html, body {height: 100%;}
  }

  ul {
-    @apply list-disc pl-4 pb-8;
+    @apply list-disc pl-5 pb-8;
  }

  a, a:visited {
@@ -36,13 +36,17 @@ html, body {height: 100%;}
  }

  h2 {
-    @apply tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl;
+    @apply mt-16 tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl !important;
  }

  h3 {
    @apply tracking-tight font-extrabold sm:leading-none text-xl xl:text-2xl;
  }

+  h4 {
+    @apply tracking-tight font-extrabold sm:leading-none text-lg xl:text-xl;
+  }
+
  img {
    @apply mx-auto my-8;
  }
@@ -52,7 +56,7 @@ html, body {height: 100%;}
  }

  ul {
-    @apply list-disc pl-4 my-4;
+    @apply list-disc pl-5 my-4;
  }

  a, a:visited {
@@ -66,4 +70,16 @@ html, body {height: 100%;}
  blockquote {
    @apply py-2 px-4 my-4 border-l-4 border-teal-500;
  }
+
+  blockquote.important {
+    @apply border-red-500;
+  }
+
+  code {
+    @apply text-rose-500;
+  }
+
+  pre {
+    @apply p-4 my-4 bg-vulcan-200;
+  }
 }