Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
gatsby-transformer-javascript-frontmatter
Advanced tools
Gatsby transformer plugin for JavaScript to extract exports.frontmatter statically.
Parses JavaScript files to extract frontmatter from exports.
npm install gatsby-source-filesystem gatsby-transformer-javascript-frontmatter
To use this plugin you also need gatsby-source-filesystem installed and configured.
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`,
},
},
"gatsby-transformer-javascript-frontmatter",
],
}
This plugin uses @babel/parser and @babel/traverse to statically read the frontmatter exports.
In a .js
(or .jsx
/ .ts
/ .tsx
) file, export a frontmatter object to set your metadata variables, like so:
import React from "react"
exports.frontmatter = {
title: "Choropleth on d3v4",
written: "2017-05-04",
layoutType: "post",
path: "choropleth-on-d3v4",
category: "data science",
description: "Things about the choropleth.",
}
export default MyComponent
You can also use a named export for the frontmatter object:
export const frontmatter = {
title: "Choropleth on d3v4",
written: "2017-05-04",
layoutType: "post",
path: "choropleth-on-d3v4",
category: "data science",
description: "Things about the choropleth.",
}
You'd be able to query your frontmatter like:
{
allJavascriptFrontmatter {
edges {
node {
frontmatter {
error
path
title
written
category
description
updated
}
}
}
}
}
Which would return something like:
{
"data": {
"allJavascriptFrontmatter": {
"edges": [
{
"node": {
"frontmatter": {
"error": false,
"path": "choropleth-on-d3v4",
"title": "Choropleth on d3v4",
"written": "2017-05-04",
"category": "data science",
"description": "Things about the choropleth.",
"updated": null
}
}
}
]
}
}
}
Any attribute on "frontmatter" across your js files will be exported. If a file is missing it, the value will be null.
The error
field will contain false
or an object with error information just to
give a surface level view of what the query is pulling out.
{
"error": {
"err": true,
"message": "we threw an error",
"stack": "This is a stringified stack trace"
}
}
FAQs
Gatsby transformer plugin for JavaScript to extract exports.frontmatter statically.
We found that gatsby-transformer-javascript-frontmatter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.