hugo-coder
hugo-coder copied to clipboard
luizdepra
Allow for custom css/js per page in frontmatter
Hey, I'm just starting a dev blog using this great theme, and one of my use cases (for including code examples in a per post basis) has the need to include the code in the post directory (as everything is on Github). And of course using that code in the post.
While looking for good solutions I found this: https://discourse.gohugo.io/t/best-way-to-include-javascript-libraries-in-hugo-sites/13614/2
And I like the proposal in the first answer as it is clean and simple to do, although I would allow for multiple files, for example:
Frontmatter
---
title: Some catchy title
js:
- ./somelib.js
- ./anotherfile.js
css:
- ./style.css
- ./anotherstyle.css
---
Template partial
Somewhere inside the <head> ...
{{ if .Params.css }}
{{ range .Params.css }}
<link rel="stylesheet" href="{{ . }}">
{{ end }}
{{ end }}
Somewhere before closing the <body> ...
{{ if .Params.js }}
{{ range .Params.js }}
<script src="{{ . }}"></script>
{{ end }}
{{ end }}
Thoughts? I can submit a PR if needed.
I have a strong opinion about creating this kind of feature. It fits better in a personal fork.
But, I'm curious about this: (for including code examples in a per post basis).
Why are markdown codefences not sufficient to show code examples? Why do you need to add custom JS and CSS?
Yes, I'm planning on importing code for P5.js sketches, p5 library itself (even if on assets I don't want it to load on every post), and custom WASM modules I'll be writing with GO in each post (the loader should be inside HEAD), so being able to import those exclusively for the POST that needs them is great as it keeps ever post folder in Github it's own "mono repo" for the post.
I will use the markdown codefences for showing code examples and snippets, but in order to show the functioning running code I need to import custom js, css, wasm, etc... And I only want it for that specific post. I hope this makes sense, as you can see from the discussion link, it is actually a common use case. I can probably just overwrite the entire default template and add this for my blog, but I do think is a great feature for the theme that does not affect anyone (backwards compatible).
Edit: As an example, let's say I want to do a series of posts comparing JS frameworks (React, Vue, etc...). And I want to show the functioning code in each post. I want the ability to import React, Vue, etc... from my assets folder or CDN in each post without having to import all of them in all posts.
How about using shortcodes to embed an external page? Hugo already provides shortcodes to add youtube and vimeo video, and I think doing something similar to code demo would be a better approach.
Which external page? the whole purpose of having this, is to keep the code files used inside the post directory for reference as those are on Github for everyone to look at them. Not outsourcing the code to an external site and having 2 copies of code you have to keep track of, it beats the purpose of using git for a Dev blog (which based on the name I thought the theme was to encouraging devs to use it).
The problem with your approach is that it limits devs to pick external services depending on the "demo", p5.js here, Codepen there, Go playground next, is there even an external page that allows you to do WASM files? You have to have book keeping on accounts on all of them and if those go down, your demo too.
The approach I'm proposing is completely backwards compatible, and allows everyone to include custom CSS/JS on a per page manner, but does not enforce it! If you don't want to use it, it's completely fine! As it is right now, if you need ANY JS or CSS library for 1 post, you HAVE to load that library EVERYWHERE on your site, eventually you are just affecting site performance on purpose.
Edit: I also understand where you are coming from, as I just reviewed #448 and saw your comment about the confusion and wanting to drop support for custom styles. I honestly don't think forking the theme is a proper solution for everyone as it just dilutes what makes this theme great!
IMHO the confusion comes from the lack of proper documentation (I just had the same issue with my custom SCSS for the site), because in the configuration documentation it is unclear what is the relative path where the assets will be loaded from. I would like to help as much as I can to this simple feature documenting and adding examples (even link my blog as a use case as it's open source and hosted on Github).
Sorry for the wall of text, eager to read your thoughts about this. Kudos on being the top Hugo theme BTW!