adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-03 09:02:19 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

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

New Issue
Closed
opened 2026-10-05 02:23:45 +02:00 by adam · 8 comments
adam commented 2026-10-05 02:23:45 +02:00
Owner
Copy link
Copy source

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.
      image

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:
    Blank-FrontMatter-Panel
  • 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
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. ![image](https://user-images.githubusercontent.com/6931731/131259103-e073effe-ae06-4606-ab2c-a9c40583abbe.png) ## 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: ![Blank-FrontMatter-Panel](https://user-images.githubusercontent.com/6931731/131259241-311298fd-de70-45ef-b234-fee0d707bd20.png) - 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][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. ```json Blog-Workspace-Settings.json "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" ] ``` ```json Global-Settings.json "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 ``` [Sample-Script.js]: https://github.com/estruyf/vscode-front-matter/blob/main/sample/script-sample.js <!-- github-sync-id:982157030 -->
adam closed this issue 2026-10-05 02:23:45 +02:00
adam commented 2026-10-05 02:23:46 +02:00
Author
Owner
Copy link
Copy source

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

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](frontMatter.preview.pathName) 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](frontMatter.custom.scripts) <!-- github-comment-id:907835425 -->
adam commented 2026-10-05 02:23:47 +02:00
Author
Owner
Copy link
Copy source

Optimized Slug & Filename Sync

I love the option to optimize the slug and sync the filename to it, but it seems to be doing it incorrectly or I'm missing something.

When I enable the "frontMatter.taxonomy.alignFilename": true option and create an optimized slug, it'll append the dates to the filename when it's not a part of the slug.

For example, using the following front matter, the slug is perfect-keyboard, but the extension saves the file as 2021-08-29-perfect-keyboard.md. How would I get it to change the filename to just the slug of perfect-keyboard?

---
title: How I Made the Perfect Keyboard Mine
summary: A look into how I customized my ZSA Moonlander keyboard.
images:
  - /static/images/posts/Moonlander/16-lifestyle-shot.jpeg
  - /static/images/posts/Moonlander/moonlander-logo.png
date: '2021-07-04 05:03:01'
author: 4lch4
tags:
  - ZSA
  - Keyboards
  - Productivity
slug: perfect-keyboard
modifiedDate: '2021-08-29 @ 12:29:54'
---

My file structure is as follows:

data/
  entries/
    2018/
    2021/
      07/
        perfect-keyboard.md
        koa-router-printer.md
  templates/
    <FrontMatter Extension Article Templates>
  drafts/
    <Articles that aren't published yet, but being worked on>
public/
  static/
    images/
## Optimized Slug & Filename Sync I love the option to optimize the slug and sync the filename to it, but it seems to be doing it incorrectly or I'm missing something. When I enable the `"frontMatter.taxonomy.alignFilename": true` option and create an optimized slug, it'll append the dates to the filename when it's not a part of the slug. For example, using the following front matter, the slug is `perfect-keyboard`, but the extension saves the file as `2021-08-29-perfect-keyboard.md`. How would I get it to change the filename to _just_ the slug of `perfect-keyboard`? ```yaml --- title: How I Made the Perfect Keyboard Mine summary: A look into how I customized my ZSA Moonlander keyboard. images: - /static/images/posts/Moonlander/16-lifestyle-shot.jpeg - /static/images/posts/Moonlander/moonlander-logo.png date: '2021-07-04 05:03:01' author: 4lch4 tags: - ZSA - Keyboards - Productivity slug: perfect-keyboard modifiedDate: '2021-08-29 @ 12:29:54' --- ``` My file structure is as follows: ``` data/ entries/ 2018/ 2021/ 07/ perfect-keyboard.md koa-router-printer.md templates/ <FrontMatter Extension Article Templates> drafts/ <Articles that aren't published yet, but being worked on> public/ static/ images/ ``` <!-- github-comment-id:907836821 -->
adam commented 2026-10-05 02:23:48 +02:00
Author
Owner
Copy link
Copy source

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

Holy crap you're quick! I forgot to mention one more thing I needed some clarification on and you replied before I could even add it, lol.

This is perfect, thank you so much!

I should mention, the link you provided for further info on the Custom Scripts gave me a 404. I wasn't able to find anything that looked like your example.

> 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](frontMatter.preview.pathName) 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](frontMatter.custom.scripts) Holy crap you're quick! I forgot to mention one more thing I needed some clarification on and you replied before I could even add it, lol. This is perfect, thank you so much! I should mention, the link you provided for further info on the Custom Scripts gave me a 404. I wasn't able to find anything that looked like your example. <!-- github-comment-id:907837117 -->
adam commented 2026-10-05 02:23:48 +02:00
Author
Owner
Copy link
Copy source

Just wanted to mention that my first two questions have been answered and it's working as expected on my end, thank you so much for that ^_^

Just wanted to mention that my first two questions have been answered and it's working as expected on my end, thank you so much for that ^_^ <!-- github-comment-id:907837555 -->
adam commented 2026-10-05 02:23:49 +02:00
Author
Owner
Copy link
Copy source

@4lch4 no idea what might went wrong when copying the URL, but the correct one should be: https://github.com/estruyf/vscode-front-matter#frontmattercustomscripts

About the filename and slug, this is coming from the frontMatter.templates.prefix setting, which defines that it will create filenames with a defined prefix. By default set to yyyy-MM-dd. In case you do not want this, just define an empty string.

PS: I plan to work on a website for better documentation as the one-pager is not ideal.

@4lch4 no idea what might went wrong when copying the URL, but the correct one should be: https://github.com/estruyf/vscode-front-matter#frontmattercustomscripts About the filename and slug, this is coming from the `frontMatter.templates.prefix` setting, which defines that it will create filenames with a defined prefix. By default set to `yyyy-MM-dd`. In case you do not want this, just define an empty string. PS: I plan to work on a website for better documentation as the one-pager is not ideal. <!-- github-comment-id:907840450 -->
adam commented 2026-10-05 02:23:50 +02:00
Author
Owner
Copy link
Copy source

Oh, sweet, that did it!

PS: I plan to work on a website for better documentation as the one-pager is not ideal.

I'd be more than happy to help with this! I'll actually try and throw something together over the next couple of hours and let you know. Do you have a Discord or something where I could reach out to you without creating a new Issue?

Oh, sweet, that did it! > PS: I plan to work on a website for better documentation as the one-pager is not ideal. I'd be more than happy to help with this! I'll actually try and throw something together over the next couple of hours and let you know. Do you have a Discord or something where I could reach out to you without creating a new Issue? <!-- github-comment-id:907843049 -->
adam commented 2026-10-05 02:23:51 +02:00
Author
Owner
Copy link
Copy source

Not using Discord often, but you can use the discussion feature of GitHub: https://github.com/estruyf/vscode-front-matter/discussions

Not using Discord often, but you can use the discussion feature of GitHub: https://github.com/estruyf/vscode-front-matter/discussions <!-- github-comment-id:907844430 -->
adam commented 2026-10-05 02:23:51 +02:00
Author
Owner
Copy link
Copy source

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

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 <!-- github-comment-id:909154174 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#60