Need help refactoring a partial with simple logic (+ bonus VSCode question)

Hello community! I am struggling with this bit of code in a partial and think it can be written a lot better:

<style>
{{range $index, $element := .Site.Params.social}}{{if isset $element "colour"}}
.social-icons 
    {{ if isset $element "icon" }}
        .fa-{{- $element.icon -}}:before
    {{else}}
        .fa-{{- $index -}}:before
    {{ end }}
 {
    color: {{ $element.colour }} !important;
}
{{ end }}{{ end }}
</style>

<div id="uwacore-footer-extras">
    <ul class="social-icons">
        {{range $index, $element := .Site.Params.social}} 

        <li>
            <a href="{{ $element.link }}" title="{{ $element.title }}">
                <i class="fa {{ if isset $element "icon" }}
                    fa-{{- $element.icon -}}
                {{else}}
                    fa-{{- $index -}}
                {{ end }}"></i>
            </a>
        </li>

        {{ end }}
    </ul>
</div>

I’ve tried to set a variable (using if isset based logic), but no matter what I do, it comes back with an undefined variable error.

Any advise on what to go learn to make this better would be greatly appreciated.


As a bonus question, I have a html linter installed with VSCode that formats the code on save. It freaks out with the handlebars syntax, especially in <style> ... </style> tags. Anyone know a way around that besides turning the linter off?

1 Like

As far as I know you cannot use Hugo template functions, set variables etc within the style tags.

1 Like

Concur - what I observed is, the template tags just get replaced with something like “zGoTmplz”, if between style tags.

Pipe the CSS to safeCSS.

Example

The original poster’s partial uses both CSS and HTML and template functions within the style tags.

Sorry, I meant to reply to @RickCogley about the “zGoTmplz” issue… safeCSS fixes that.

I have yet to understand the problem the OP has.

May be that safeCSS tip applies to the OP too…

@binaryben I haven’t had a chance to try it out, but try putting the stuff within the style tags in a partial and put {{ partial "that_new_partial.css" . | safeCSS }} between those style tags… should work… (or at least work more than now :))

Thanks @kaushalmodi. Just to be clear, the code I copied above is working. But it’s very long and easy to break (I’m expecting students to be working on this project).

What I would normally expect to be able to do is something like this:

<style>
{{range $index, $element := .Site.Params.social}}{{if isset $element "colour"}}
<!-- borrowing from javascript's syntax to get my point across -->
{{ $icon := (isset $element "icon") ? $element.icon : $index }}
.social-icons  .fa-{{- $icon -}}:before {
    color: {{ $element.colour }} !important;
}
{{ end }}{{ end }}
</style>

<div id="uwacore-footer-extras">
   ... (same mechanism again) ...
</div>

But no matter how I try to assign a value to the $icon variable, I always get the undefined variable error when I try to build the site. So is there a “proper” way I should be doing this?

I don’t think this is the way you use a conditional operator in Hugo. Try using the cond function instead.

@Jura, you’re a legend. Thanks! This works perfectly now

<style>
{{range $index, $element := .Site.Params.social}}{{if isset $element "colour"}}
.social-icons 
  .fa-{{- cond (isset $element "icon") $element.icon $index -}}:before {
    color: {{ $element.colour }} !important;
}
{{ end }}{{ end }}
</style>

<div id="uwacore-footer-extras">
  <ul class="social-icons">
    {{range $index, $element := .Site.Params.social}} 
    <li>
      <a href="{{ $element.link }}" title="{{ $element.title }}">
        <i class="fa 
          fa-{{- cond (isset $element "icon") $element.icon $index -}}
         "></i>
      </a>
    </li>
    {{ end }}
  </ul>
</div>

Does anyone have an answer for a linting plugin for VSCode that doesn’t freak out with handlebars in a html file? It especially struggles with the handlebars being used in tags.

I use HTMLHint by Mike Kaufman, and HTML files look fine in Visual Studio Code:

2018-02-27_17-19-18

(I don’t have special settings defined to make the extension behave that way. So it will work out of the box for you too, I think.)

1 Like

That works for HTML in a document, but unfortunately no longer lints CSS within <style> tags of a document. Maybe I need specifically need a seperate CSS and JS linter as well that supports handlebars… I keep trying to use variables in all types of code. :disappointed_relieved:

I’ve been using the JS-CSS-HTML plugin which is apparently a wrapper for JS beautify