Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
estruyf opened this issue Nov 2, 2021 · 14 comments
Closed

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

estruyf opened this issue Nov 2, 2021 · 14 comments
Milestone

Comments

@estruyf
Copy link
Owner

estruyf commented Nov 2, 2021

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

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

Originally posted by @sid-r-singh in #165 (reply in thread)

@estruyf
Copy link
Owner Author

estruyf commented Nov 2, 2021

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
Copy link
Owner Author

estruyf commented Nov 2, 2021

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
Copy link

sid-r-singh commented Nov 2, 2021

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
Copy link

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
Copy link
Owner Author

estruyf commented Nov 2, 2021

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

@estruyf
Copy link
Owner Author

estruyf commented Nov 2, 2021

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
Copy link
Owner Author

estruyf commented Nov 2, 2021

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
Copy link

sid-r-singh commented Nov 2, 2021

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
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
Copy link
Owner Author

estruyf commented Nov 2, 2021

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
Copy link

sid-r-singh commented Nov 2, 2021

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
Copy link
Owner Author

estruyf commented Nov 3, 2021

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

@estruyf estruyf added this to the 5.4.0 milestone Nov 3, 2021
@estruyf
Copy link
Owner Author

estruyf commented Nov 3, 2021

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

@sid-r-singh
Copy link

sid-r-singh commented Nov 3, 2021

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

@estruyf
Copy link
Owner Author

estruyf commented Nov 5, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants