How do these features work? (Previews/Custom Scripts)

Heyo, folks!

I’ve been using this extension for quite some time with my blog but as of a few days ago started with custom settings and such to get even more value and use out of it.

With that, I’ve encountered a few things that I really don’t understand and the docs/README aren’t helping me out.

Opening a Preview

• What does it take to enable this option?
  • I had set the preview URL for my setup, I use Docusaurus so I set it to http://localhost:3000, and it wouldn’t show the Open Preview button.
  • It randomly appeared today when I went back to work on my blog again, I have no clue what I did to enable it.
• How does the frontMatter.preview.pathName property work exactly?
  • The help for the property says “Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: yyyy/MM. The date will be generated based on the article its date field value.” However, when I put blog/yyyy/MM into this property, it actually inserts those letters instead of the year/month values that I’d expect.

Custom Scripts

• When adding a custom script, what exactly needs to be done? The docs mention that you need to provide the path to the script but when I do that, the Front Matter panel won’t load, it just shows blank:
• How does the extension know what to title the button that runs the custom script?
  • For example, the README for the extension shows a “Generate Social Image” and references the sample-script.js file that doesn’t actually do anything. How does the Front Matter extension know what to call this button that’s tied to the custom script?

My Settings

Here are my global and workspace settings for the extension in my Blog project, hopefully, it’ll provide some insight into what I’m working with.

"frontMatter.templates.folder": "data/templates",
"frontMatter.content.folders": [
	{
		"title": "Drafts",
		"fsPath": "/Users/jisodl0/Development/alcha/front-end/blog/data/drafts",
		"paths": [
			"/Users/jisodl0/Development/alcha/front-end/blog/data/drafts",
			"\\Users\\jisodl0\\Development\\alcha\\front-end\\blog\\data\\drafts"
		]
	},
	{
		"title": "Published",
		"fsPath": "/Users/jisodl0/Development/alcha/front-end/blog/data/entries",
		"paths": [
			"/Users/jisodl0/Development/alcha/front-end/blog/data/entries",
			"\\Users\\jisodl0\\Development\\alcha\\front-end\\blog\\data\\entries"
		]
	}
],
"frontMatter.content.publicFolder": "public/static",
"frontMatter.preview.host": "http://localhost:3000",
"frontMatter.preview.pathName": "blog/yyyy/MM",
"frontMatter.taxonomy.alignFilename": true,
"frontMatter.custom.scripts": [
	"./.vsc-fme/scripts/Custom-Script-Test.js"
]

"frontMatter.dashboard.openOnStart": true,
"frontMatter.taxonomy.dateField": "publishedDate",
"frontMatter.taxonomy.dateFormat": "yyyy-MM-dd @ HH:mm:ss",
"frontMatter.taxonomy.modifiedField": "modifiedDate",
"frontMatter.content.fmHighlight": true,
"frontMatter.panel.freeform": true,
"frontMatter.taxonomy.categories": [
  "Productivity",
  "Learning",
  "Life",
  "Programming",
  "Writing"
],
"frontMatter.taxonomy.tags": [
  "PowerShell",
  "Beginner",
  "Learning",
  "Node.js",
  "JavaScript",
  "PowerShell-Profile",
  "Tips",
  "Enhancements",
  "Interviews",
  "FizzBuzz",
  "First",
  "ZSA",
  "Keyboards",
  "Productivity",
  "NPM",
  "TypeScript",
  "Koa",
  "Koa-Router",
  "Libs"
],
"frontMatter.content.autoUpdateDate": true,
// #endregion FrontMatter Extension Settings

[estruyf]

Hi @4lch4,

Thanks for using Front Matter and opening the issue!

Opening the preview

• It only requires the frontMatter.preview.host setting to be set, but I’ll check if I can reproduce this on any other environment.
• The pathname expects a string, if you want to use date formatting, you will need to pass the following format: 'blog/'yyyy/MM. Otherwise, it cannot correctly format the date. Also mentioned in the https://github.com/estruyf/vscode-front-matter#frontmatterpreviewpathname setting documentation.

Custom scripts

• The setting expects an object formatted like this:

{
  "frontMatter.custom.scripts": [{
    "title": "Generate social image",
    "script": "./scripts/social-img.js"
  }]
}

More information about this can be found: https://github.com/estruyf/vscode-front-matter#frontmattercustomscripts

[estruyf]

Closing the issue as the discussion about documentation can happen in the discussions section.

BTW @4lch4, the documentation has been migrated to https://frontmatter.codes