giscus: add custom theming

[davidsneighbour]

As described in Advanced Usage a custom theme can be added. Let's implement it here too.

The setup would be as follows:

config

[outputs]
home = ["GISCUS_THEME"]
[params.dnb.giscus]
theme = "dark"
[params.dnb.giscus.theme]
stylesheet = "scss/giscus/theme.scss"
colorPrettylightsSyntaxComment = "#768390"
colorPrettylightsSyntaxConstant = "#6cb6ff"
...

stylesheet is a path to a stylesheet (looks by default for assets/scss/giscus/theme.scss). This stylesheet will import the original theme selected under giscus (loading via getRemote), then subsequent properties under theme are added as overrides and exports the finished stylesheet.

The camelcased syntax of the theme variables are corresponding to the CSS variables in the sample theme.

The pain point here is how to map this without having to add all items to the template. I think there should be a way to transform camelcase to title-case in Hugo.

Currently I think it's a sequence like this:

• Do a replaceRE over the key (see this regexp test)
• lower case it
• trim extra dashes - no idea why the last item in the sample adds a dash in the end

If GISCUS_THEME is set in the outputs, then a custom stylesheet will be linked, so a custom theme without any settings in the theme config section still can add custom styles via theme.scss.

[davidsneighbour]

See https://discourse.gohugo.io/t/camel-case-to-dashed-case/37757/5

It's easier than that:

{{ $v := "someCamelCase" }}
{{ add "--" ($v | humanize | lower | replaceRE " " "-") }}

[davidsneighbour]

stylesheet is a path to a stylesheet (looks by default for assets/scss/giscus/theme.scss). This stylesheet will import the original theme selected under giscus (loading via getRemote), then subsequent properties under theme are added as overrides and exports the finished stylesheet.

Let's rephrase this: The file in stylesheet will be used in connection with a pipeline, that will do the following steps:

• import the original theme selected under giscus
• override properties with specific properties set up below giscus>theme
• then the file in stylesheet will be imported and the stylesheet will be created.