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

support
#1

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
#2

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

1 Like
#3

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

#4

Pipe the CSS to safeCSS.

Example

#5

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

#6

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

I have yet to understand the problem the OP has.

#7

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 :))

#8

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?

#9

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

#10

@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.

#11

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
#12

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