Custom actions and scripts
Overview
Not every website is the same. That is why we want to give you the ability to extend Front Matter and you can do this by adding your custom actions to the Front Matter panel. A custom action is nothing more than a script which is referenced from within your project.
Settings
The content and media custom actions can be defined by using the frontMatter.custom.scripts setting.
Custom actions can be configured with the following properties:
| Title | Type | Description | Default |
|---|---|---|---|
id | string | The id of the custom action/script | "" |
title | string | The title of the custom action | "" |
script | string | The path to the script to execute | "" |
command | string | The command to execute (optional). Example: node, path to your node executable, bash, python, ... | node |
type | <content | mediaFile | mediaFolder> | The type for which the script will be used (optional). Use one of the following types: content, mediaFile, or mediaFolder. | content |
bulk | boolean | Run the script for one file or multiple files. | false |
output | <notification | editor | Specifies the output type (optional). Available values are: notification and editor. notification: The output will be passed as a notification. editor: The output will be passed to the editor. | notification |
outputType | <text | html> | Specifies the output type (optional). Available values the editor values from VS Code like: text: The output will be passed as a text file. html: The output will be passed as an HTML file. markdown: The output will be passed as a Markdown file. | text |
hidden | boolean | Hide the action from the UI. This is mostly used when creating a content script that will be used to post process new content (optional). | false |
environments | environment | The environments option allows you to specify in which environments the script should be executed (optional). Available values are: macos, linux, or windows. | undefined |
contentTypes | string[] | The content types for which the script will be used (optional). Example: ["post"] | undefined |
ImportantPreviously, you could define the
nodeBinproperty to define the path to your node executable. This path was needed when you are working with for instancenvmand have multiple versions of node installed. You can now use thecommandproperty instead.
Environment type
The environment option contains the following properties:
| Title | Type | Description | Default |
|---|---|---|---|
type | <macos | linux | windows> | The environment type for the script to run at. | "" |
script | string | The path to the script to execute. | "" |
command | string | The command to execute (optional). Example: node, path to your node executable, bash, python, ... | node |
Example of defining a custom action with an environment
{
"frontMatter.custom.scripts": [
{
"title": "Create image folder",
"id": "create-image-folder",
"script": "./.frontmatter/config/custom/scripts/create-image-folder.sh",
"command": "bash",
"environments": [
{
"type": "windows",
"script": "./.frontmatter/config/custom/scripts/create-image-folder.ps1",
"command": "powershell"
}
]
}
]
}InfoThe above sample would execute the bash script on macOS and Linux and the PowerShell for Windows. In case the PowerShell script would fail, it would fallback to the bash script.
Extensibility library
The @frontmatter/extensibility library provides you with the necessary methods to interact with the Front Matter CMS.
You can use the library for your custom actions to update the front matter of your content or media files.
Installing the extensibility library
When using JavaScript, you can make use of the @frontmatter/extensibility package.
npm i @frontmatter/extensibilityWith this @frontmatter/extensibility dependency,
you can easily get the arguments and ask questions to the user.
Feedback/comments
Did you spot an issue in our documentation, or want to contribute? Edit this page on Github!
