Issue: Preview button not showing when setting is defined #133

New Issue

2026-10-05T02:27:04+02:00

adam commented

2026-10-05 02:27:04 +02:00

I did set frontMatter.preview.host to http://localhost:1313. Tried restarting whole system, not only VS Code, but no change. Tried in 2 different OSs (Win, Linux - Ubuntu) still no change.

I have also added my content folder by right clicking -> add folder. So the dashboard is appearing correctly. Only this preview option is not.

Originally posted by @sid-r-singh in https://github.com/estruyf/vscode-front-matter/discussions/165#discussioncomment-1565018

I did set `frontMatter.preview.host` to `http://localhost:1313`. Tried restarting whole system, not only VS Code, but no change. Tried in 2 different OSs (Win, Linux - Ubuntu) still no change. ![image](https://user-images.githubusercontent.com/68782815/139573589-9ce0311a-c976-4b32-b74e-7b5d4fc55133.png) I have also added my content folder by right clicking -> add folder. So the dashboard is appearing correctly. Only this preview option is not. ![image](https://user-images.githubusercontent.com/68782815/139573664-0e1206d9-a755-439b-9ff1-c9bc52c34ab8.png) _Originally posted by @sid-r-singh in https://github.com/estruyf/vscode-front-matter/discussions/165#discussioncomment-1565018_

adam closed this issue

2026-10-05 02:27:04 +02:00

adam commented

2026-10-05 02:27:05 +02:00

Oh, I just noticed, you should first open one of your pages. Once you opened a page, you should see the preview button show up.

Oh, I just noticed, you should first open one of your pages. Once you opened a page, you should see the preview button show up.

adam commented

2026-10-05 02:27:05 +02:00

Just in case, I have added the button on the panel to its base view. Which means that it will show up once the setting is present. Currently available in the beta version of the extension.

Just in case, I have added the button on the panel to its base view. Which means that it will show up once the setting is present. Currently available in the beta version of the extension.

adam commented

2026-10-05 02:27:06 +02:00

Oh, I just noticed, you should first open one of your pages. Once you opened a page, you should see the preview button show up.

I tried that already. Let me post a video of what I am doing. The video starts right from the time I open VS Code.

https://user-images.githubusercontent.com/68782815/139837509-d2c0557c-7901-4a96-98ab-5455f8f9de22.mp4

> Oh, I just noticed, you should first open one of your pages. Once you opened a page, you should see the preview button show up. I tried that already. Let me post a video of what I am doing. The video starts right from the time I open VS Code. https://user-images.githubusercontent.com/68782815/139837509-d2c0557c-7901-4a96-98ab-5455f8f9de22.mp4

adam commented

2026-10-05 02:27:07 +02:00

Just in case, I have added the button on the panel to its base view. Which means that it will show up once the setting is present. Currently available in the beta version of the extension.

How do I install the beta version ?

> Just in case, I have added the button on the panel to its base view. Which means that it will show up once the setting is present. Currently available in the beta version of the extension. How do I install the beta version ?

adam commented

2026-10-05 02:27:07 +02:00

You can install it via the following steps: https://beta.frontmatter.codes/docs/getting-started#beta-version

You can install it via the following steps: https://beta.frontmatter.codes/docs/getting-started#beta-version

adam commented

2026-10-05 02:27:08 +02:00

Oh 🤦‍♂️ - it the slug of your article, as there is none defined in your front matter of the content, it will not show the button. I'll implement the logic for this.

Oh 🤦‍♂️ - it the slug of your article, as there is none defined in your front matter of the content, it will not show the button. I'll implement the logic for this.

adam commented

2026-10-05 02:27:08 +02:00

Logic has been implemented into the beta.

It will get the slug from the following things:

Slug in the front matter
The filename, if it's not index.md
The folder name

Logic has been implemented into the beta. It will get the slug from the following things: 1. Slug in the front matter 2. The filename, if it's not `index.md` 3. The folder name

adam commented

2026-10-05 02:27:09 +02:00

Wow that was quite fast! Preview button is appearing now but another small problem cropped up. All my markdown files are within content/blog folder. Accordingly, the preview URL should be http://localhost:1313/blog/slug. But the blog part is missing in the preview URL.

So, folder name is captured correctly. Only the registered folder name is missing.

You might wonder whether I have registered my blog folder or not. I have done it. The proof lies in my frontmatter.json, which is:

{
  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
  "frontMatter.framework.id": "hugo",
  "frontMatter.content.publicFolder": "static",
  "frontMatter.content.pageFolders": [
    {
      "title": "blog",
      "path": "c:/Users/SIDHARTH R/Documents/blog-new/content/blog"
    }
  ]
}

Additional info: here is how my content is organized. If the URL in production is example.com/blog/slug then the corresponding .md file lives at \content\blog\slug\index.md.

Wow that was quite fast! Preview button is appearing now but another small problem cropped up. All my markdown files are within `content/blog` folder. Accordingly, the preview URL should be `http://localhost:1313/blog/slug`. But the `blog` part is missing in the preview URL. ![image](https://user-images.githubusercontent.com/68782815/139860453-ab300db1-2d54-4b76-b38d-540cd997abc3.png) So, folder name is captured correctly. Only the registered folder name is missing. You might wonder whether I have registered my `blog` folder or not. I have done it. The proof lies in my `frontmatter.json`, which is: ``` { "$schema": "https://frontmatter.codes/frontmatter.schema.json", "frontMatter.framework.id": "hugo", "frontMatter.content.publicFolder": "static", "frontMatter.content.pageFolders": [ { "title": "blog", "path": "c:/Users/SIDHARTH R/Documents/blog-new/content/blog" } ] } ``` **_Additional info:_** here is how my content is organized. If the URL in production is `example.com/blog/slug` then the corresponding `.md` file lives at `\content\blog\slug\index.md`.

adam commented

2026-10-05 02:27:10 +02:00

You will need to specify one last thing, the preview pathname: https://frontmatter.codes/docs/settings#frontmatter.preview.pathname

So in your case, you'll need to add:

{
  "frontMatter.preview.pathName": "'blog/'"
}

As all SSGs and sites are different, this pathname setting is used for it. Now that there is the frontMatter.content.pageFolders setting, it can be good to extend it with a custom pathname as well.

You will need to specify one last thing, the preview pathname: https://frontmatter.codes/docs/settings#frontmatter.preview.pathname So in your case, you'll need to add: ``` { "frontMatter.preview.pathName": "'blog/'" } ``` As all SSGs and sites are different, this pathname setting is used for it. Now that there is the `frontMatter.content.pageFolders` setting, it can be good to extend it with a custom pathname as well.

adam commented

2026-10-05 02:27:10 +02:00

That worked like a charm 🎉✨🤩. Thanks a lot for helping me out. I'm happy that I contributed to the project in some way 😄.

That worked like a charm 🎉✨🤩. Thanks a lot for helping me out. I'm happy that I contributed to the project in some way 😄.

adam commented

2026-10-05 02:27:11 +02:00

Thank you @sid-r-singh! Already using the extension and providing feedback is a great contribution! 🙏

Thank you @sid-r-singh! Already using the extension and providing feedback is a great contribution! 🙏

adam commented

2026-10-05 02:27:12 +02:00

FYI: the preview path can now also be defined per content type: https://beta.frontmatter.codes/docs/content-types#preview-path

FYI: the preview path can now also be defined per content type: https://beta.frontmatter.codes/docs/content-types#preview-path

adam commented

2026-10-05 02:27:12 +02:00

Thanks a ton for mentioning that. This is exactly what I was about to try out today. I was planning to add a content/snippets folder apart from the content/blog which I have now. In this case the URL needs to be http://localhost:1313/snippets/slug.

I was thinking whether it will be possible to achieve this or not & here you have already shipped this new feature. 🥳

Thanks a ton for mentioning that. This is exactly what I was about to try out today. I was planning to add a `content/snippets` folder apart from the `content/blog` which I have now. In this case the URL needs to be ` http://localhost:1313/snippets/slug`. I was thinking whether it will be possible to achieve this or not & here you have already shipped this new feature. 🥳

adam commented

2026-10-05 02:27:13 +02:00

@sid-r-singh this is now released in the main version.

@sid-r-singh this is now released in the main version.

Sign in to join this conversation.

main

beta

dependabot/npm_and_yarn/js-yaml-4.3.1

dependabot/npm_and_yarn/multi-7958ac4c45

dependabot/npm_and_yarn/postcss-8.5.25

dependabot/npm_and_yarn/multi-670d462a53

dependabot/npm_and_yarn/http-proxy-middleware-2.0.10

dependabot/npm_and_yarn/shell-quote-1.10.0

dependabot/npm_and_yarn/websocket-driver-0.7.5

dependabot/npm_and_yarn/multi-6aaed2ab8e

copilot/validate-issue-1043

dependabot/npm_and_yarn/multi-84120a5570

dependabot/npm_and_yarn/launch-editor-2.14.1

dependabot/npm_and_yarn/multi-9dd3b9b346

estruyf/smart-file-rename

copilot/fix-unwanted-auto-update-publish-date

copilot/fix-content-view-sorting-issue

copilot/fix-virtual-workspace-folder-selection

copilot/fix-937

copilot/fix-965

copilot/fix-958

copilot/fix-950

copilot/fix-932

copilot-integration

hotfix/10.2.1

issue/816

issue/671

i18n

azure-translator

issue/747

issue/673

poc/content-tagging

combobox

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#133