Issue: Preview button not showing when setting is defined

[estruyf]

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 #165 (reply in thread)

[estruyf]

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.

[estruyf]

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.

[sid-r-singh]

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.

2021-11-02_16-50-12.mp4

[sid-r-singh]

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 ?

[estruyf]

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

[estruyf]

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.

[estruyf]

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

[sid-r-singh]

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.

[estruyf]

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.

[sid-r-singh]

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

[estruyf]

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

[estruyf]

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