Latest Discoveries

22/09

FINALLY got the HTMX swapping working. Outputting both HTML & HTMX files on the _index.md lists. Of course it all came down to damn naming conventions.

The layout file I was missing was list.htmx.html

That’s all it was. I went through such a ridiculous way to solve that.

Have currently implemented onto my Ratings for buttery smooth (though the animations need some work)

Animation Shortcodes!

These work in the posts, and with markdown

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    Fade Out

    Fade In

    Slide Down

    Slide In Right

    Slide In Left

    Slide Up

Imported New Fonts!

Followed the theme config documentation here, nothing crazy

HTMX is in baby!

Starting to realise/visualise its potential. e.g. keeping all the side menus, only updating the main container for content.

Heading 3 Test - did I break it?

Finally got custom list templates working!

Custom List Templates

Just update the .GetTerms to the taxonomy name layouts/partials/article/components/details.html

Then I made a partial to call it even more easily

1
    {{ partial "article/components/taxonomies" . }}

Backtick is next to the tilde. Who knew.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    {{ if .Params.categories }}
    <header class="article-category">
        {{ range (.GetTerms "sizes") }}
            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
                {{ .LinkTitle }}
            </a>
        {{ end }}
        {{ range (.GetTerms "brand") }}
            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
                {{ .LinkTitle }}
            </a>
        {{ end }}
        {{ range (.GetTerms "colours") }}
            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
                {{ .LinkTitle }}
            </a>
        {{ end }}
    </header>