Use shortcodes from original universal theme

[cale-inspired]

Hey there,

first off, thanks for porting the universal theme. I love it, currently setting up my new website with it. I was wondering which is the best way to use the shortcodes from universal theme, e.g. the accordion text boxes. Shall I create shortcuts for them as well? But how am I supposed to feed it with data then, the only idea I could think of would be using .Params.whatever, but that doesn't seem elegant to me. Any other ideas?

[adrianmo]

Hi there,

Thank you for using it :)

I believe we would like to include these shortcodes within the content of any page or post. In this case, as you mentioned, adding them via .Params doesn't look like a good idea.

I think Hugo shortcodes are the way to go since they are designed to render text to HTML code. For example, to use an alert we could do something like:

{{% alert info %}}This is an info alert.{{% /alert %}}

And the shortcode implementation would be something like this:

<div class="alert alert-{{ .Get 0 }}" role="alert">
{{ .Inner }}
</div>

And it would be rendered as:

<div class="alert alert-info" role="alert">
This is an info alert.
</div>

I haven't tested this example, it's just a draft of what I think is the right direction.

Let me know what you think.

[adrianmo]

@inspiritana any thoughts?

[GeorgeWL]

I think I agree with the idea @adrianmo , it's pretty much the whole point of them in my opinion.

[ringods]

This is also what I'm hinting at in #101.

[ringods]

@cale-inspired @GeorgeWL @adrianmo can you have a look at PR #104 and chime in on the discussion?

[jcolomb]

trying this out, but wher will you define the alert class, and how ?

[jcolomb]

could not make it to work, using https://www.w3schools.com/w3css/w3css_alerts.asp instead with card.html in the Shortcodes folder:

<div class="w3-card-4">

<header class="w3-container w3-lime w3-hover-amber">
  <h1>{{ .Get 0 }}</h1>
</header>

<div class="w3-container w3-lime ">
  <p>{{ .Inner | markdownify | emojify }}</p>
</div>

</div>

[jcolomb]

Also added the expand Shortcodes (taken from the learn theme), only need to add expand.html:

{{ $_hugo_config := `{ "version": 1 }` }}
<div class="expand">
    <div class="expand-label" style="cursor: pointer;" onclick="$h = $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return $h.next('div').is(':visible') ? 'fas fa-chevron-down' : 'fas fa-chevron-right';});});">
        <i style="font-size:x-small;" class="fas fa-chevron-right"></i>
        <span>
        {{$expandMessage := T "Expand-title"}}
    	{{ if .IsNamedParams }}
    	{{.Get "default" | default $expandMessage}}
    	{{else}}
    	{{.Get 0 | default $expandMessage}}
    	{{end}}
    	</span>
    </div>
    <div class="expand-content" style="display: none;">
        {{.Inner | safeHTML}}
    </div>
</div>

[jcolomb]

Could do a PR if you like.