• Stars
    star
    1,793
  • Rank 25,010 (Top 0.6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated 13 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Front Matter is a CMS running straight in Visual Studio Code. Can be used with static site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...

Front Matter

Front Matter a CMS running straight in Visual Studio Code

Visual Studio Marketplace Number of installs Ratings Sponsor the project

Check out the extension documentation at frontmatter.codes

โ“ What is Front Matter?

Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice. Jump right into editing and creating content with Front Matter and be able to preview it straight in VS Code.

The extension supports various static-site generators and frameworks like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.

A couple of our extension highlights that hopefully get you interested in giving Front Matter a try:

  • Content, data, and media management
    • Search, filter, sort, etc. all your content
    • Create new content
    • Supporting tools to edit content and media
  • Preview your site/content straight in Visual Studio Code
  • SEO checks for title, description, and keywords
  • Extensibility
    • As we know, we cannot support all use cases. We provide a way to extend the functionality of the extension to your needs
  • and many more features ...

Missing something? Let us know by opening an issue on the GitHub repository

Site preview

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

Version 8

The taxonomy dashboard got introduced on which you can manage your tags, categories, and custom taxonomy.

Taxonomy dashboard

Version 7

Snippets support for Front Matter has been added!

Snippets dashboard

Version 6

In this version, we introduced the new data files/folders dashboard. You can find more information about the release in our v6.0.0 release notes.

Data dashboard

Data files/folders are pieces of content that do not belong to any markdown content, but live on their own. Most of the time, these data files are used to store additional information about your project/blog/website that will be used to render the content.

Version 5

The new media dashboard redesign got introduced + support for setting metadata on media files v5.0.0 release notes.

Data dashboard

Version 4

Support for Team level settings, content-types, and image support. Get to know more at: v4.0.0 release notes.

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.

Front Matter - Managing your static sites straight from within VS Code | Product Hunt

โš™๏ธ Installation

You can get the extension via:

Info: The docs can be found on 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:

Info: The BETA docs can be found on beta.frontmatter.codes.

๐Ÿ“– Documentation

All documentation can be found on frontmatter.codes.

Documentation repository: GitHub - Front Matter DOCs

๐Ÿ’ช Contributing

Pull requests are welcome. Please open an issue first to discuss what you would like to change, or which problem you would like to fix. This makes it easier for us to follow-up and plan for future releases.

You can always help us improve the extension in varous ways like:

  • Testing out the extension and providing feedback
  • Reporting issues and bugs
  • Suggesting new features
  • Fixing an issue
  • Updating documentation
  • UI improvements
  • Tutorials
  • etc.

Eager to start contributing? Great ๐Ÿคฉ, you can contribute to the following projects:

๐Ÿ‘€ Show the work you are using Front Matter

Are you using Front Matter and are you interested in showing for which websites you use it? You can show your work by opening a showcase issue.

You can open showcase issues for the following things:

  • Show the website for which you use Front Matter;
  • Share an article/video/webcast/... that explains how you use Front Matter;
  • Got something else to share? Open an issue and we can see where it fits on our website.

๐Ÿ‘‰ Contributors ๐Ÿค˜

Front Matter contributors

๐Ÿ–ค Backers & Sponsors ๐Ÿ‘‡ ๐Ÿค˜

Front Matter sponsors


Powered by Vercel


Supported by the BEJS Community

๐Ÿ”‘ License

MIT



Front Matter visitors

More Repositories

1

doctor

Doctor - Maintain your documentation on SharePoint without pain.
TypeScript
108
star
2

unicorn-busy-server

Simple busy light server for Raspberry Pi Zero and Pimoroni Unicorn Hat
Python
59
star
3

homebridge-presence-switch-msgraph

Homebridge Presence Switch for Microsoft Graph
TypeScript
44
star
4

github-visitors-badge

Visitors badge running on Azure Functions
40
star
5

slidev-theme-the-unnamed

Slidev Theme - The unnamed
CSS
35
star
6

vscode-typescript-exportallmodules

VSCode extension which generates an `index.ts`barrel file with all the module exports from the current directory
TypeScript
35
star
7

azure-function-node-puppeteer

Azure Functions Docker image with Puppeteer
Dockerfile
32
star
8

spfx-rest-api-tester

SharePoint REST API tester web part created with SPFx
TypeScript
31
star
9

Search-WP-SPFx

Search Web Part built with the SharePoint Framework. It makes use of React and Flux.
TypeScript
29
star
10

vscode-hide-comments

This extension started as a joke for people who do not like to see comments in the code. The extension will basically set all comments to transparent, they will not be removed.
TypeScript
29
star
11

react-handlebars-search

SharePoint Framework search web part which makes use of React and Handlebars to do result visualisation
CSS
22
star
12

web-visitorbadge-nextjs

A simple visitor badge for your website or GitHub profile.
TypeScript
21
star
13

vscode-auth-sample

Authentication provider samples
TypeScript
21
star
14

screendown

Screendown - ๐Ÿ“ธ Capture stunning screenshots of your Markdown or code directly in Visual Studio Code with ease.
TypeScript
20
star
15

vscode-remote-control

Remote Control your Visual Studio Code - This extension allows you to remotely control Visual Studio Code. Run commands from anywhere you want on your device. The extension allows you to take VSCode automation to the next level.
TypeScript
20
star
16

cypress-sharepoint-sample

Cypress E2E testing for SharePoint solutions sample
JavaScript
19
star
17

playwright-github-actions-reporter

GitHub Actions reporter for Playwright
TypeScript
18
star
18

generator-displaytemplates

Yeoman generator that gives you a kick start for building Search Display Templates
JavaScript
18
star
19

vscode-react-webview-template

A starter template for a Visual Studio Code extension with a webview using React
TypeScript
17
star
20

spfx-navigation

SharePoint Framework navigation helper
TypeScript
15
star
21

gulp-spsync-creds

Gulp plugin for synchronizing local files with a SharePoint library via user credentials
JavaScript
12
star
22

vscode-msgraph-autocomplete

This VSCode extension allows you to auto-complete the Microsoft Graph API URLs you are writing. You get the most useful Microsoft Graph Explorer functionality in your favorite editor.
TypeScript
12
star
23

vscode-spfx-snippets

SharePoint Framework Snippets
11
star
24

cypress-msteams-sample

A sample project to get you started with Microsoft Teams E2E testing in Cypress
TypeScript
11
star
25

vsts-file-creator

VSTS File Creator build and release task
JavaScript
10
star
26

playwright-jest-e2e

Playwright E2E sample with Jest
TypeScript
10
star
27

vscode-spfx-essentials

SharePoint Framework - Extension Pack for VS Code
10
star
28

vscode-unnamed-theme

A VSCode dark theme with vivid colors
CSS
10
star
29

Mail-Tracking-Microsoft-Graph

Azure Function which can be used to check if your mails are tracked via the Microsoft Graph
TypeScript
9
star
30

disqus-to-github-discussions

Disqus to GitHub Discussions migration script
TypeScript
9
star
31

doctor-sample

Sample project for Doctor
JavaScript
9
star
32

vscode-helpers

The @estruyf/vscode package contains a couple of helpers to make Visual Studio Code Extension development easier.
TypeScript
8
star
33

node-sp-alm

SharePoint solution ALM actions
TypeScript
7
star
34

blog

Blog references
JavaScript
7
star
35

spfx-webhooks-config

SharePoint Framework web part to manage Webhooks
TypeScript
7
star
36

vscode-hugo-themer

VSCode extension to help you creating Hugo themes
TypeScript
7
star
37

UploadToOffice365SPFx

Automate publishing of your SharePoint Framework scripts to Office 365 public CDN
TypeScript
7
star
38

spfx-testing-wp

Sample web part with some predefined unit tests
TypeScript
6
star
39

vscode-msgraph-essentials

Microsoft Graph Essentials - The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit & API.
TypeScript
6
star
40

vscode-demo-time

A Visual Studio Code extension to help you script your demos
TypeScript
6
star
41

vscode-squarl

Squarl Bookmarks - Bookmark important files and/or links for your projects.
TypeScript
5
star
42

spfx-ui-tests-sample

Visual UI tests sample with Puppeteer and Jest
TypeScript
5
star
43

vscode-spfx-task-runner

SharePoint Framework Task Runner extension for Visual Studio Code
TypeScript
5
star
44

Mail-Embed-Images-with-Microsoft-Graph

This is a sample application that shows you how you can embed images to mail messages with the Microsoft Graph API
C#
5
star
45

pi-status-clock

Raspberry Pi status clock with Pimoroni Inky PHat
Python
5
star
46

slidev-addon-components

Slidev Addon - Components
Vue
4
star
47

AzureFunction-Update-Latest-Article-SearchIndex

This is the code that I used to update my Azure Search Index with the latest published article of my Wordpress blog.
JavaScript
4
star
48

vscode-api-caller

Just a POC
TypeScript
4
star
49

AddGuestUsersWithMicrosftGraph

Example of how you can add a guest user via the Microsoft Graph
JavaScript
4
star
50

msteams-node-applescript-shortcuts

TypeScript
4
star
51

vscode-extension-panel

An extension that provides an activity panel that other extensions can use to add their actions. When you want to visualize your command or extension actions, this extension provides a quick and easy way to do this. Instead of writing your view panel, you register your extension for panel usage with the required configuration.
TypeScript
4
star
52

vscode-spfx-localization

SharePoint Framework Localization Resources Extension
TypeScript
4
star
53

vscode-microsoft-writingstyleguide

Extension that makes your writing better by taking the recommendations from the Microsoft Writing Style Guide into account.
TypeScript
3
star
54

indexeddb-cache

IndexedDB Caching Solution
TypeScript
3
star
55

sonos-doorbell-api

Sonos Doorbell API
TypeScript
3
star
56

SharePoint-Webhook-Node-Sample

Sample Node.js SharePoint webhook application
TypeScript
3
star
57

node-sppkg-deploy

SharePoint APP Package Deployment
TypeScript
3
star
58

estruyf

3
star
59

appcustomizer-navigation-issues-spfx

Sample code to show the issues with application customizers and navigation events
TypeScript
2
star
60

pyod-shop-redirector

PYOD sticker shop redirector
HTML
2
star
61

devproxy-github-actions-templates

GitHub Action templates to be used for the Microsoft's Dev Proxy
2
star
62

blog-content

Blog content from Elio Struyf
JavaScript
2
star
63

MicrosoftGraphServiceAppDemo

This is a demo application for creating a Microsoft Graph Daemon or Service application.
C#
2
star
64

search-wp-spfx-templategenerator

This is a sample project that can be used for creating Search SPFx templates
TypeScript
2
star
65

vscode-project-creation

This extension allows you to create a new project from our available templates without the need to leave Visual Studio Code or open your terminal.
TypeScript
2
star
66

vscode-sparkup

Unlock Your Content's Potential with Sparkup
TypeScript
2
star
67

vscode-extension-installer

This is an alternative way to install extensions. It allows you/your company to install new versions of your extension(s) which are not ready yet to be released to the marketplace.
TypeScript
2
star
68

Office-Outlook-Add-in-Compose-Form

This is a sample Outlook add-in project that contains a compose form
JavaScript
1
star
69

vscode-spfx-remove-components

VSCode extension to easily remove components from SPFx solutions
TypeScript
1
star
70

vscode-cli

VS Code CLI to help you with extension development and documentation
TypeScript
1
star
71

vscode-spfx-debug-config

SharePoint Framework - VS Code Debug Configuration Extension
TypeScript
1
star
72

azure-samples

Samples created for eliostruyf.com
TypeScript
1
star
73

spfx-pnp-controls-sample

SharePoint Framework web part sample that makes use of the PnP SPFx Controls
TypeScript
1
star
74

Office-Client-Theme-Colors

This is a sample application to visualize the Office Client Theme Colors
JavaScript
1
star
75

spfx-testing-jest

SharePoint Framework Unit Tests with Jest
TypeScript
1
star
76

streamdeck-office

Stream deck office actions
TypeScript
1
star
77

Office365GroupWebUrlViaMicrosoftGraph

Get the site URL of an Office 365 Group via the Microsoft Graph
JavaScript
1
star
78

testing-microsoft365-playwright-template

Testing Microsoft 365 solutions with Playwright
TypeScript
1
star