gray-matter
Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author: https://github.com/jonschlinkert (by jonschlinkert)
TypeScript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output. (by microsoft)
Our great sponsors
gray-matter | TypeScript | |
---|---|---|
17 | 1294 | |
3,728 | 97,451 | |
- | 1.0% | |
3.3 | 9.9 | |
4 months ago | 1 day ago | |
JavaScript | TypeScript | |
MIT License | Apache License 2.0 |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
gray-matter
Posts with mentions or reviews of gray-matter.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2024-03-05.
-
Building a flat-file CMS with Angular
Writing in markdown is super convenient, and supported by just about any text editor. To convert these .md files to browser-ready HTML, I wrote a simple little Node.js script using two great npm packages called gray-matter and showdown.
-
Eleventy vs. Next.js for static site generation
Next, install gray-matter to extract metadata from the front matter of markdown files, and marked to convert the markdown files to HTML:
-
Exploring the code behind Docusaurus
It turns out that Docusaurus uses an open source JavaScript parser called gray-matter to parse the front matter from markdown files! After installing gray-matter using npm and them importing it into the markdownUtils.ts file, all it takes is calling the matter method and passing the markdown file contents to get returned an Object with data and content (the data being the front matter and the content being the rest of the markdown file contents).
-
Create an Interactive Table of Contents for a Next.js Blog with Remark
Although we are building a custom table of contents, we won't have to write everything from scratch. To separate the Markdown/MDX content from the front matter, we'll use the Gray-matter package. It is optional in case you don't have front matter in your Markdown files. To process the Markdown itself, we'll use the Remark package. We'll also need the unist-util-visit package for traversing node trees and mdast-util-to-string for getting the text content of a node.
-
Create your own blog with MDX and NextJS
In this article we walk you through the process of creating a simple blog app using the popular React framework NextJS, gray-matter and next-mdx-remote.
-
NextJS 13 Blog Starter
In order to get post information (such as author, title, date, etc.) from our HTML without having them be apart of our rendered post we need a way to parse YAML front matter, this is where gray-matter comes in hand.
-
Create a Markdown Editor with Rust and React
It’s actually not part of the CommonMark spec, so you’ll often need a 3rd party library to parse it out on top of your Markdown parser. In JavaScript we use gray-matter which converts frontmatter into a JS object we can more easily use.
-
Turn a Markdown blog to a simple SSG
Over the past few weeks, I mostly wrote on how to template a Node.js application with EJS using Express. Then, I wrote an article showing how to create a Markdown blog in Node.js using EJS, Express, gray-matter and markdown-it. Today, I'll combine those tutorials to turn the Markdown blog, from the last tutorial, into a simple SSG.
-
Markdown blog with EJS
gray-matter, to parse the front matter from the Markdown files
-
Create Blog Post Bookmarks in Next.js
Luckily for us, there is a fantastic NPM package that can help us with this. Let’s install it.
TypeScript
Posts with mentions or reviews of TypeScript.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2024-03-28.
-
Building a Dynamic Job Board with Issues Github, Next.js, Tailwind CSS and MobX-State-Tree
Familiarity with TypeScript, React and Next.js
-
Building a Fast, Efficient Web App: The Technology Stack of PromptSmithy Explained
On top of that, Vite’s compiler is super fast, supports Typescript (which we of course used), and built just fine on our host, which was Cloudflare Pages. Cloudflare Pages is a super fast static website hosting service by Cloudflare, which allows your site to take advantage of their global CDN to make sure your site is as close to your users as possible. It supports nearly any JS framework you could want to use for your site, and can even host plan old HTML if you’re of that persuasion.
-
Incredible JavaScript Animation Libraries
Popmotion prioritizes simplicity and ease of use in its design. Written in TypeScript and compatible with any API that accepts numerical input, it offers a straightforward API and supports major browsers. Popmotion's architecture powers animations in Framer Motion and can be extended through plugins.
-
Full Stack Web Development Concept map
Typescript can be used in both the front end and the back end and gives strong typing to javascript for easier error prevention. The learning curve can be difficult at times but the benefits are worth it! docs
-
Building a full stack app with Remix, Prisma, and Neon
Basic knowledge of React and TypeScript
-
How to stream data over HTTP using NextJS
Take note that the implementation will be based on typescript to make in evidence the objects' type that we are going to use.
-
Top Paying Programming Technologies 2024
28. TypeScript - $77,104
-
Six Factors That Raise The Risk Of Bugs In A Codebase
1. Lack of Static Code Analysis Static code analysis tools like TypeScript and ESLint play a crucial role in identifying and preventing bugs. TypeScript provides static typing, enhancing the robustness of the code. ESLint detects issues and enforces coding standards. The absence of these tools can significantly elevate the likelihood of bugs due to the lack of early detection and guidance provided during development.
-
Unit Testing in Node.js and TypeScript: A Comprehensive Guide with Jest Integration
TypeScript version 4.0 or higher. TypeScript is a superset of JavaScript that adds static types and other features to the language. You can check your TypeScript version by running tsc -v in your terminal.
-
TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality
In recent years, TypeScript has become an indispensable tool for many JavaScript developers, offering type safety, improved code maintainability, and enhanced developer experience with many advanced type features, like generic types, type guards and conditional types. One of the powerful features introduced in TypeScript 4.1 is template literal types which provide greater flexibility and control over string literal types.
What are some alternatives?
When comparing gray-matter and TypeScript you can also consider the following projects:
front-matter - Extract YAML front matter from strings
zod - TypeScript-first schema validation with static type inference
Flutter - Flutter makes it easy and fast to build beautiful apps for mobile and beyond
Tailwind CSS - A utility-first CSS framework for rapid UI development.
react-markdown - Markdown component for React
remark - markdown processor powered by plugins part of the @unifiedjs collective
zx - A tool for writing better scripts
esbuild - An extremely fast bundler for the web
Yup - Dead simple Object schema validation
Quasar Framework - Quasar Framework - Build high-performance VueJS user interfaces in record time
rescript-compiler - The compiler for ReScript.
linaria - Zero-runtime CSS in JS library