gatsby-transformer-javascript-frontmatter
Parses Stories files to extract content.
Install
npm install --save-dev gatsby-transformer-front10-component-loader
How to use
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: {
path: `./.ui/stories/gatsby/`
}
},
"gatsby-transformer-front10-component-loader"
]
};Parsing algorithm
In a index.story.js (or index.story.jsx / index.story.ts / index.story.tsx) file.
export default {
name: "Sorting",
summary: "",
hiddenInMobile: false,
code: `<Icon icon="icon icon-switch"/>`
};How to query
You'd be able to query your frontmatter like:
{
allComponents {
edges {
node {
component {
linkRepo
name
summary
}
}
}
}
}Which would return something like:
{
"data": {
"allComponents": {
"edges": [
{
"node": {
"component": {
"linkRepo": "",
"name": "locationSelector",
"summary": "This is a locationSelector component."
}
}
}
]
}
}
}