Anatole: Query re: css pipeline tweaks...

[cdichiara]

I'm wondering if you'd like to include Google font parameterization.

[params]
## Google fonts
googleFont = "Hachi Maru Pop"

Already complete, just unfortunately sitting behind the recaptcha pull request due to a messed up master branch on my side - sorry.

[lxndrblz]

@cdichiara Thanks for bringing up this idea! Font customisation is currently also possible, by using a custom CSS. In the past we had this issue #87 where I'd described how a certain font can be used. By taking the approach with a custom CSS, it's up to the user to decide what font, source, CDN they want to use, which is great as it gives a lot of flexibility. For me, as the maintainer of the theme, it is also one less thing that could break.

[cdichiara]

@lxndrblz thanks for reviewing.

So I definitely feel like something needs to be programmed in this case or the mask case ... either the theme or the end user. I'm in agreement with you to program the end user instead. I'm quite new to the Hugo scene, but I didn't put two and two together and get to the Custom CSS portion of the readme.md ... I think other people will also find a pointer helpful too. I'm glad you've got Custom CSS and Custom JS there.

Speaking of Custom CSS, I was wondering why not include resources.ExecuteAsTemplate in both the customCSS and the css/style.css pipeline in order to support parameterization in the future?

I will implement them myself and write them up in the README.md.

Carmine

[cdichiara]

There may be a good reason not to include it in the pipeline ... I just couldn't think of it.

[lxndrblz]

@cdichiara Which part of the custom CSS explanation did you find troublesome? Do you think it would help if we added examples for how the custom CSS can be used (change colours, fonts, stencils...)?

Regarding your second question. ExecuteAsTemplate in something, that is in the making (Check out PR #90). Using parameters we wanted to give the user a better (and easier) control of how the site looks. As an example: Allow users to change the ratio of the two main columns or define the colours right from the config file. While this already works on a basic level, I still need to put some work into it, as it will also require a shift from css to scss. Feel free to check out the PR and play around with it.

For the custom CSS it does not make sense in my opinion, as this should be purely up to the user.

[cdichiara]

Oh cool good luck on PR #90

Oh so basically what I'm saying is that I was guessing that people will probably want to change some basic things, like fonts, and when they don't find a solution they won't automatically look at the custom CSS explanation in the readme.md. I suspect your custom CSS explanation is fine ... it's just that I didn't think to look there, I just went searching for "how to incorporate google fonts." So instead of coding them ourselves we say, "this is what custom css is for, here are some websites that give you some ideas." Alternately, we could do, "this is what custom css is for, here's some example scripts we left in a folder - ymmv, if they don't work make your own!"

Carmine

[lxndrblz]

@cdichiara I will add a more in-depth description to the Readme and possibly two samples.

[cdichiara]

Cool man it's your thing, feel free. I'm going to be doing the mask and the font ones for myself, let me know if you want them as examples.

[lxndrblz]

@cdichiara Sure, send them my way once you have these.

[cdichiara]

@lxndrblz OK here's the changes I created for google fonts.

googleFonts.zip

You've got an alteration to head.html to support parameterization of the custom css and custom js files. Then you've got a css file and a js file. In config.toml you can use bodyFont = "xxx" to identify a font. A non-google font name will not break the website. An invalid font name will just cause it to be rendered in Times New Roman.

[lxndrblz]

@cdichiara Thanks I'd a look at your provided snippets. Something I couldn't understand is why you would load the fonts via JavaScript rather than from CSS. What is the reason behind this?

[cdichiara]

@lxndrblz Yeah dude I'm an ex-software engineer turned clinical psychologist who always did the nitty gritty computational backend work. I recommend assuming going forward that some of my decisions are based on learning how to code HTML, in a vaccuum, in the present. :)

How do you load Google's style sheet from within a css file? I couldn't find a way to do that.

[lxndrblz]

@cdichiara You could do it simply like this:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

... font-family: 'Roboto', sans-serif;

That is why I said, that anyone should be able to customise their fonts from the custom CSS. Give it a try and you'll see it's so much easiert and also avoids a couple of security issues which inline JavaScript bares. :)

[cdichiara]

I rest my case. :)

[cdichiara]

So here's what we're left with I think:

{{ with .Site.Params.bodyFont }}
/* If bodyFont is not a valid google font family, well, they'll see the mistake. */
@import url('https://fonts.googleapis.com/css2?family={{ . | safeHMTLAttr }}');

:root {
  --font-family: {{ . | default "'Verdana', sans serif" }};
  --silly: 'silly';
}
{{ end }}

To be clear I'm not picking and choosing the weights because I don't want to get to a place where the distributed choices on weights will be changed and suddenly the weights I limited the load to will be less than optimal. If you know of that being a poor choice due to load time do let me know.

[cdichiara]

Oh I"m sorry! "silly" is a flag that's hanging around when I wasn't parsing the css file properly and it wasn't showing up in the style sheets. :) That can be removed.

[cdichiara]

Yes so ... I'm with you in your conclusion that individuals can program the font through custom css. I think our experience also supports my claim, that certain customizations like changing the font is popular enough, and for people are not as good web developers as you, that "unsupported" but preprepared examples will help them and, therefore you. So thanks for being willing to try this.

[cdichiara]

Oh I know you're working on head.html elsewhere ... do you want me to submit the changes to head.html in a separate PR to allow for parameterization in custom CSS & JS? Minor changes you can do it as well:
Line 28:

        {{ $styles := $minstyles | resources.ExecuteAsTemplate . $ | resources.Minify | resources.Fingerprint }}

Line 76:

            {{- $customJS := resources.Get . | resources.ExecuteAsTemplate "." $ -}}

Or just note the tricky shift in the inputs to the function due to the {{ range }}, you may know that already.

[lxndrblz]

@cdichiara We could pick up the font idea in the PR #90 together with the other templating changes. Feel free to add the font commit to there. I know that @ivangjxyz also had few good ideas, maybe we could make this both user friendly and not overly complicated. I wanted to work on that PR through the upcoming days anyways.

[cdichiara]

OK I think we can close this now if we're going to combine this with PR #90 , sounds good?