Encoding in URL from Go Pipes

support
1

Hi,
I’m using the following template to compile my sass to css using Hugo Pipes

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify | 
resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink | safeHTML }}">

But the output URL is not encoded properly in live-view. It is shown as:

<link rel="stylesheet" href="http\3a\2f\2flocalhost\3a 1313\2fsass\2fmain.min.1d60ee14e6d22ec850cd61862094f6b212ac4b38cb53f4ff758a63610d88afd9.css">

I tried the other pipes in this post but none of them worked. Any tips? Thank you!

2

The safeHTML pipe should not be necessary. Have you tried without?

3

Yes, I should’ve mentioned - it’s the same issue without the pipe too!

4

Just to humor me, try a different variable name. If it is one that Hugo uses internally, it could be the issue.
I’ve had something similar once with another program.

As a workaround, use RelPermalink, works just fine as well.

5

Thanks for your suggestions! I now have this code

{{ $mysass := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $mysass.RelPermalink }}">

for which I get the generated html as

<link rel="stylesheet" href="\2fsass\2fmain.min.1d60ee14e6d22ec850cd61862098f6b212ae4b38cb53f4ff758a63610d88afd9.css">

I am unable to open this link, and it doesn’t look like my css is active on the site either. Is there something else I should try out? Thanks

6

This is how I do it:

    <!-- Hugo Pipes-->
    {{ $options := (dict "targetPath" "css/tuxstash.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "css/sass/bulma")) }}
    {{ $sass := resources.Get "css/sass/tuxstash.scss" }}
    {{ $tuxstyle := $sass | resources.ToCSS $options }}

    {{ $tux := resources.Get "css/tux.css" }}
    {{ $tux = $tux | resources.PostCSS | minify }}

    {{ $syntax := resources.Get "css/syntax.css" }}
    {{ $syntax = $syntax | resources.PostCSS | minify }}

    {{ $CSS := slice $tuxstyle $tux $syntax | resources.Concat "css/tuxstash.css" | fingerprint }}
    <link rel="preload" as="style" href="{{ $CSS.RelPermalink }}" media=screen>
    <link rel="stylesheet" href="{{ $CSS.RelPermalink }}" media="screen">

Pay attention to the first line, where I set an output path. According to what you have, it should be placed in the root of public.

Mine resolves to

<link rel=preload as=style href=/css/tuxstash.ef37b16550837ecc86b50868bdc3a0bd3afc46e09fd6efbf1aa296dd9fee17e1.css>
<link rel=stylesheet href=/css/tuxstash.ef37b16550837ecc86b50868bdc3a0bd3afc46e09fd6efbf1aa296dd9fee17e1.css media=screen>
2 Likes
7

Thanks a ton for the code sample! Turns out I had enclosed the link tag within a style tag facepalm
Some days, I’m just not too bright! Much appreciation for your help in figuring this out!

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.