|:.:.:.:.:.:.:.:.:/.:.:.:.:.:./.:.:.:.:.:.:.:.:.:.:.:.:.:./|   '. :.:.:.:.:.:.:.:.:.:.l.ヽ:.:.:.:.l:.:.:.:.:.:.:.:.:.:∧\:.:.:.',
          |:.:.:.:.:.:.:./.:.:.:.:.:./.:.:.:.:.:.:.:.:.:.:.:.: , ′   l :.:.:.:.:.:.:.:.:.:| ∨.:.:.l:.:.:.:.:.:.:.:.:.:.∧ \:.'.
          |:.:.:.:.:.:/.:.:.:.:.: /.:.:.:.:.:.:.:.:. ヽ/ /    |:.:.:.:.:.:.:./:.:.|   y'.:.:|:.:.:.:.|:.:.:.:.:.:.∧   ヘ.
          |:.:.:.:./.:.:.:.//.:.:.:.:.:.:.:.:.:.:/ \,′   !:.:.:.:.:.:/|:.:./,/ '.:.:| :.:.:.|:.:.:.:.:.:.:.:.|
          |:.:.:/.:.:./.:./.:.:.:.:.:.:.:.:./   /` ‐-‐'|:.:.:./ |ァ'´    |:.:| :.:.:.|:.:.:.:.:.:.:.:.|
          |:.:.i.:.:./.:.:.: '.:.:.:.:.:.:.:/   ,/       |:.:.:/   ′    }.:.| :.:.:.|:.:.:.| :.:.:.:|
          |:.:.|:./.: rヘ|:.:.:.:.:.:/:.| 三三三三三  |:./   三三三 ハ|:.:.:.:.|:.:.:.| :.:.:.:|
          |:.:.l〃.:{  |:.:.:.:./.:.:.|             l.'         .i.:.:.i.:.:.:∧ :.:|ヽ :.:|
          |:.:./.:.:.:.\|:.:.:/.:.:.:.:|                '       |:.:.||:.:/  :.:.| '.:.:l
          |:./.:.:.:.:.:.:. !:./.:.:.:.:.:.'、            ,.ー--、    }.:.:|レ′ ∨  V
          |/.:.:.:.:.:.:.:.:V '´  ̄`ヽ.、            ´`¨¨{. |_.  '.:.:.:.|
         /.:.:.:.:.:.:.:./         ヘ `    . __. -r1 |:.:.:.:.:.:.:.:.|
         :.:.:.:.:.:.:, '         '. \    | _.   -┴ー──┴┐
         :.:.:.:.:./           |  \  r' |   -──────i'
    

< KONAKONA.MOE >

Hugo Favicon Shortcode

Last Mod.: 2024-06-07 | Created On: 2024-06-07


This is a cool shortcode that I made a while ago on Hugo to download favicons from the google favicon api (or any other favicon API really, you choose), this is meant to be used in a list but you can of course adapt it. The google api is only used to download the favicons, it is static so your favis are going to be self hosted from your domain and your user’s won’t be calling google and leaking their IP etc etc.

image.png

^This is what it looks like

HTML

This goes inside layouts/shortcodes/favi-url.html.

 1{{ $url := printf "%s%s://%s" (.Site.Params.favicons) ((urls.Parse (.Get 0)).Scheme) ((urls.Parse (.Get 0)).Hostname) }}
 2
 3<li class="icontext-li">
 4    <span class="icontext-wrapper">
 5        {{ with resources.GetRemote $url }}
 6            {{ with .Err }}
 7                <img alt="?" loading="lazy" src="/img/icons/placeholder.png" width="16" height="16"> 
 8            {{ else }}
 9                <img alt="?" loading="lazy" src="{{ .RelPermalink }}" width="16" height="16">
10            {{ end }}
11        {{ else }}
12            <img alt="?" loading="lazy" src="/img/icons/placeholder.png" width="16" height="16">
13        {{ end }}
14        <p><b><a target="_blank" href="{{ .Get 0 }}">{{ (urls.Parse (.Get 0)).Hostname }}{{ (urls.Parse (.Get 0)).Path }}</a></b>{{ with (.Get 1) }}<b>:</b> {{ . }}{{ end }}</p>
15    </span>
16</li>

CSS

Style it with CSS feel free to edit as you want.

 1@media screen and (max-width: 500px) {
 2    li.icontext-li {
 3        list-style: none;
 4    }
 5}
 6
 7.icontext-wrapper {
 8    display: flex;
 9    align-items: center;
10}
11
12.icontext-wrapper > img {
13    margin-right: 8px;
14    position: relative;
15    top: -5px;
16}
17
18.icontext-wrapper > p > a,
19.icontext-wrapper > p > strong > a {
20    color: var(--text-color);
21    transition: 0.2s;
22}
23
24.icontext-wrapper > p > a:hover,
25.icontext-wrapper > p > strong > a:hover {
26    color: var(--hover-color);
27    transition: 0.2s;
28}
29
30.icontext-wrapper > img {
31    vertical-align: middle;
32    margin-right: 3px;
33}
34
35.icontext-wrapper > p {
36    overflow: auto;
37}
38
39.icontext-wrapper {
40    display: flex;
41    align-items: center;
42}

TOML

You will now need to add a link to the favicon api that you’re going to use: again, this shortcode downloads the favicons locally so your users won’t connect to google or whatever you’re using!.

This is the hugo /config.toml (or json/yml) file.

1[params]
2  favicons = "https://www.google.com/s2/favicons?sz=16&domain="

Example

Inside any markdown file on content:

1{{< favi-text "https://panzergranate.lol/" "🇯🇵 a chaotic energy radiates from this girl" >}}
2
3{{< favi-text "https://greekmugi.neocities.org/" "🇬🇷 your average xitter user" >}}
4
5{{< favi-text "https://example.com" >}}



^Lol wtf escaping hugo shortcodes is possible: https://liatas.com/posts/escaping-hugo-shortcodes/

1Something like this: `{{</*/* shortcode */*/>}}` to acheive this:
2
3{{</* favi-text "https://example.com" */>}}

Prev:
Javascript Function to get Relative Time with Auto …
Next:
KDE Spectacle + Zipline Upload Script