<h1 align="center">
  <a href="https://frontmatter.codes">
    <img alt="Front Matter" src="https://frontmatter.codes/assets/frontmatter-social.png">
  </a>
</h1>

<h2 align="center">Front Matter a CMS running straight in Visual Studio Code</h2>

<h2 align="center">This is the BETA version of Front Matter. If you were looking for the main version, check it out at <a href="https://frontmatter.codes">frontmatter.codes</a></h2>

<p align="center">
  <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
    <img src="https://vsmarketplacebadge.apphb.com/version/eliostruyf.vscode-front-matter.svg" alt="Visual Studio Marketplace" style="display: inline-block" />
  </a>

  <img src="https://vsmarketplacebadge.apphb.com/installs/eliostruyf.vscode-front-matter.svg" alt="Number of installs"  style="display: inline-block;margin-left:10px" />
  
  <img src="https://vsmarketplacebadge.apphb.com/rating/eliostruyf.vscode-front-matter.svg" alt="Ratings" style="display: inline-block;margin-left:10px" />

  <a href="https://www.buymeacoffee.com/zMeFRy9" title="Buy me a coffee" style="margin-left:10px">
    <img src="https://img.shields.io/badge/Buy%20me%20a%20coffee-€%203-blue?logo=buy-me-a-coffee&style=flat" alt="Buy me a coffee" style="display: inline-block" />
  </a>
</p>

<h2 align="center">
  <a href="https://beta.frontmatter.codes" title="Documentation @ beta.frontmatter.codes">
    Check out the extension documentation at beta.frontmatter.codes
  </a>
</h2>

## What is Front Matter?

Front Matter BETA is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more. 

The extension brings Content Management System (CMS) capabilities straight within Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.

Our main extension features are:

- Page dashboard where you can get an overview of all your markdown pages. You can use it to search, filter, sort your contents.
- Site preview within Visual Studio Code
- SEO checks for title, description, and keywords
- Support for custom actions/scripts
- and many more

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

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

**Version 4**

Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).

**Version 3**

In version v3 we introduced the welcome and dashboard webview. The welcome view allows to get you started using the extension, and the dashboard allows you to manage all your markdown pages in one place. This makes it easy to search, filter, sort, and more.

**Version 2**

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

<p align="center" style="margin-top: 2rem;">
  <a href="https://www.producthunt.com/posts/front-matter?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-front-matter" target="_blank">
    <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.png?post_id=309033&theme=dark" alt="Front Matter BETA - Managing your static sites straight from within VS Code | Product Hunt" style="width: 250px; height: 40px;" />
  </a>
</p>

## Installation

You can get the extension via:

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

> **Info**: The docs can be found on [frontmatter.codes](https://frontmatter.codes).

### Beta version

If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:

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

> **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).

## Documentation

<h2 align="center">
  <a href="https://beta.frontmatter.codes" title="Documentation @ beta.frontmatter.codes">
    Check out the extension documentation at beta.frontmatter.codes
  </a>
</h2>

## 👉 Contributors 🤘

<p align="center">
  <a href="https://github.com/estruyf/vscode-front-matter/graphs/contributors">
    <img src="https://contrib.rocks/image?repo=estruyf/vscode-front-matter" />
  </a>
</p>

## 🖤 Sponsors 👇 🤘

<p align="center">
  <a href="https://github.com/timschps" title="Tim Schaeps">
    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
   </a>
  <a href="https://github.com/flikteoh" title="FlikTeoh">
    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
  </a>
</p>

<br />

<p align="center">
  <a href="https://vercel.com/?utm_source=vscode-frontmatter&utm_campaign=oss">
    <img src="assets/sponsors/powered-by-vercel.png" />
   </a>
</p>

<br />
<br />

<p align="center">
  <a href="https://visitorbadge.io">
      <img src="https://estruyf-github.azurewebsites.net/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
   </a>
</p>