gethyas/core

Official Core integration for Hyas

core's Issues

Add option to pass params to scss files

Update libsass.html — create resource from template with ExecuteAsTemplate:

{{ $css := "" }}
{{ if eq (hugo.Environment) "development" -}}
  {{ $options := (dict "targetPath" "main.css" "transpiler" "libsass" "enableSourceMap" true "includePaths" (slice "node_modules")) -}}
  {{ $css = resources.Get . | resources.ExecuteAsTemplate "app.scss" . | toCSS $options | resources.Fingerprint "sha512" -}}
{{ else -}}
  {{ $options := (dict "targetPath" "main.css" "transpiler" "libsass" "outputStyle" "compressed" "includePaths" (slice "node_modules")) -}}
  {{ $css = resources.Get . | resources.ExecuteAsTemplate "app.scss" . | toCSS $options | postCSS (dict "config" "config/postcss.config.js") | resources.Fingerprint "sha512" -}}
{{ end -}}
<link rel="stylesheet" href="{{ $css.Permalink | relURL }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">

Example

In config\_default\hyas\starter.toml:

[..]
# SCSS
backGround = "yellowgreen"

In assets\scss\app.scss:

[..]
body {
  background-color: {{ site.Data.starter.backGround }};
}
[..]

Remove lazysizes

For, now (back) in h-enk/hyas

Add option to pass params to js files

Update esbuild.html:

[..]
{{- /* pass hugo env to the js file as a param */ -}}
{{- /* $params := (dict "env" hugo.Environment) */ -}}

{{- $paramsDefault := (dict "env" hugo.Environment) -}}
{{- $params := "" -}}
{{- with .params -}}
{{- $params = merge $paramsDefault . -}}
{{- else -}}
{{- $params = $paramsDefault -}}
{{- end -}}
[..]

Example

In layouts\partials\footer\script-footer-core.html:

{{ $plausibleAnalyticsDomain := site.Data.starter.plausibleAnalyticsDomain -}}
{{ partial "footer/esbuild" (dict "src" "js/app.js" "targetPath" "main.js" "load" "async" "transpile" false "params" (dict "plausibleAnalyticsDomain" $plausibleAnalyticsDomain)) -}}
[..]

In assets\js\plausible.js:

[..]
import * as params from '@params';
const plausibleAnalyticsDomain = params.plausibleAnalyticsDomain;
[..]

Script defer/async attribute fails to render

See: https://github.com/h-enk/hyas-core/blob/main/layouts/partials/footer/esbuild.html#L77-L79

Issue

<script {{ with $load }}{{ . }}{{ end }} 
src="{{- $js.RelPermalink -}}"
integrity="{{- $js.Data.Integrity -}}"></script>

Gets rendered as — for example:

<script ZgotmplZ 
src="/js/bootstrap.cab6a9fd760df551eb4f2d5b061e92f9d3948ab3e72c6ba4621a91ac01c55ca1.js"
integrity="sha256-yrap/XYN9VHrTy1bBh6S&#43;dOUirPnLGukYhqRrAHFXKE="></script><script ZgotmplZ 
src="/js/app.1b957aaec1272a032f2d481858c1074c37a3f32ee071717c5b80d40947c8b005.js"
integrity="sha256-G5V6rsEnKgMvLUgYWMEHTDej8y7gcXF8W4DUCUfIsAU="></script>

Solution

<script {{ with $load }}{{ . | safeHTMLAttr }}{{ end }} 
src="{{- $js.RelPermalink -}}"
integrity="{{- $js.Data.Integrity -}}"></script>

Gets rendered as — for example:

<script async 
src="/js/bootstrap.cab6a9fd760df551eb4f2d5b061e92f9d3948ab3e72c6ba4621a91ac01c55ca1.js"
integrity="sha256-yrap/XYN9VHrTy1bBh6S&#43;dOUirPnLGukYhqRrAHFXKE="></script><script async 
src="/js/app.1b957aaec1272a032f2d481858c1074c37a3f32ee071717c5b80d40947c8b005.js"
integrity="sha256-G5V6rsEnKgMvLUgYWMEHTDej8y7gcXF8W4DUCUfIsAU="></script>