🐛 Badge shortcode injects linebreaks, precluding aligning several of them horizontally.

[wolfspyre]

Issue description

Setup:

( Install gnu-sed and make the temp dest directory )

~/$ if [[ ! -x /usr/local/bin/gsed ]]; then brew install gnu-sed;fi && \
if [[ ! -d /tmp/congo ]]; then mkdir /tmp/congo; fi && \
cd $CONGODEV

Verify current:

~/NextCloud/Git_Repos/Wolfspyre.io/hugo/congo (dev)$ git status; git log --name-status

On branch dev
Your branch is up to date with 'origin/dev'.


commit dbf421848ff5222d522a40245771bbb7ced2d4ed (HEAD -> dev, origin/dev, origin/HEAD)
Author: James Panther <4462786+jpanther@users.noreply.github.com>
Date:   Mon Nov 27 19:38:56 2023 +1100

    📝 Update configuration docs

M       CHANGELOG.md
M       exampleSite/content/docs/configuration/index.md

Prep:

~/Git_Repos/Wolfspyre.io/hugo/congo (dev)$  \
npm install rimraf && \
npm run preinstall && \
npm install && \
npm upgrade && \
npm run postinstall

...(noise)...
> hugo-congo-theme@2.7.6 postinstall
> vendor-copy
...

Serve:

~/Git_Repos/Wolfspyre.io/hugo/congo (dev)$  \
hugo serve  --source exampleSite \
--themesDir ../.. --destination /tmp/congo \
 --baseURL http://localhost/congo --port 80 --bind 0.0.0.0

Start building sites … 
hugo v0.120.4-f11bca5fec2ebb3a02727fb2a5cfb08da96fd9df+extended darwin/amd64 BuildDate=2023-11-08T11:18:07Z VendorInfo=brew


                   | EN  | ES | JA  | DE  
-------------------+-----+----+-----+-----
  Pages            | 112 | 56 | 111 | 51  
  Paginator pages  |   1 |  1 |   1 |  1  
  Non-page files   |  35 | 10 |  35 |  9  
  Static files     |   7 |  7 |   7 |  7  
  Processed images | 138 | 45 | 121 | 40  
  Aliases          |  45 | 21 |  44 | 20  
  Sitemaps         |   2 |  1 |   1 |  1  
  Cleaned          |   0 |  0 |   0 |  0  

Built in 357 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:80/congo/ (bind address 0.0.0.0) 
Press Ctrl+C to stop

Demo abby normal

Inject a gaggle of badge-wrapped strings on a single line and let hugo regen page.

~/Git_Repos/Wolfspyre.io/hugo/congo (dev)$  gsed -i '11i {{<badge>}}did you{{</badge>}}{{<badge>}}ever see a llama{{</badge>}}{{<badge>}}kiss a llama
{{</badge>}}{{<badge>}}on the llama{{</badge>}}{{<badge>}}llama llama{{</badge>}}{{<badge>}}not a llama{{</badge>}}{{<badge>}}llama llama duck{{</badge>}}'  exampleSite/content/_index.md 

Theme version

2.7.6

Hugo version

0.120.4

Which browser rendering engines are you seeing the problem on?

Chromium (Google Chrome, Microsoft Edge, Brave, Vivaldi, Opera, etc.), WebKit (Safari)

URL to sample repository or website

No response

Hugo output or build error messages

not relevant. no errors; 
but badges don't align horizontally.

[wolfspyre]

I'm not 100% sure this isn't a known issue/behavior... but I didn't see any mention of it in discussions or issues.

[jpanther]

I don't recall this being raised previously. I suppose it's probably just this way because that's how it's always been. I can't see any reason why it should be forced to appear on a new line, so this can be an enhancement.

[wolfspyre]

fair. I'd just thought I'd seen them arranged horizontally as with metadata tags, and figured that would be the default behavior.

I came up with an.... interesting? way of addressing this... not sure if you like it or not, so I'll not file it as a PR:

layouts/shortcodes/badger.html

{{- if .Parent -}}
{{-   $group           := printf  "grid-%s"                   (.Parent.Get 0)          -}}
{{-   $debug           := (     .Parent.Get "debug"           | default false )        -}}
{{-   $bgColor         := (     .Get        "bgColor"         | default "transparent") -}}
{{-   $bgColorDark     := (     .Get        "bgColorDark"     | default $bgColor )     -}}
{{-   $bgOpacity       := (     .Get        "bgOpacity"       | default nil )          -}}
{{-   $bgShade         := (int (.Get        "bgShade"         | default 400 ))         -}}
{{-   $bgShadeDark     := (     .Get        "bgShadeDark"     | default nil )          -}}
{{-   $borderColor     := (     .Get        "borderColor"     | default "primary" )    -}}
{{-   $borderColorDark := (     .Get        "borderColorDark" | default $borderColor ) -}}
{{-   $borderOpacity   := (     .Get        "borderOpacity"   | default nil)           -}}
{{-   $borderShade     := (int (.Get        "borderShade"     | default 400 ))         -}}
{{-   $borderShadeDark := (     .Get        "borderShadeDark" | default nil)           -}}
{{-   $class           := (     .Get        "class"           | default nil )          -}}
{{-   $href            := (     .Get        "href"            | default nil )          -}}
{{-   $icon            := (     .Get        "icon"            | default nil )          -}}
{{-   $size            := (.Get "size"      | lower           | default "regular" )    -}}
{{-   $textColor       := (     .Get        "textColor"       | default "primary" )    -}}
{{-   $textColorDark   := (     .Get        "textColorDark"   | default $textColor )   -}}
{{-   $textShade       := (int (.Get        "textShade"       | default 700 ))         -}}
{{-   $textShadeDark   := (int (.Get        "textShadeDark"   | default nil ))         -}}
{{-   $twBg            := "" -}}
{{-   $twBgDark        := "" -}}
{{-   $twBorder        := "" -}}
{{-   $twBorderDark    := "" -}}
{{-   $twText          := "" -}}
{{-   $twTextDark      := "" -}}
{{-   if not (in (slice "small" "regular" "large" "xlarge" "2xlarge") $size) -}}
{{-     $size = "regular"                                 -}}
{{-   end -}}
{{- /* text          */ -}}
{{-   $twText = printf "%s-%s" $textColor (string $textShade) -}}
{{-   if $textShadeDark -}}
{{-     $twTextDark = printf "%s-%s" $textColorDark (string $textShadeDark) -}}
{{-   else -}}
{{-     $twTextDark = printf "%s-%s" $textColorDark (string (sub (int $textShade) 300)) -}}
{{-   end -}}
{{- /* border        */ -}}
{{-   $twBorder = printf "%s-%s" $borderColor (string $borderShade) -}}
{{-   if $borderShadeDark -}}
{{-     $twBorderDark = printf "%s-%s" $borderColorDark (string $borderShadeDark) -}}
{{-   else -}}
{{-     $twBorderDark = printf "%s-%s" $borderColorDark (string (add (int $borderShade) 200)) -}}
{{-   end -}}
{{-   if $borderOpacity -}}
{{- /* append the '/xxx ' value to border/borderdark vars if an opacity value was given.  */ -}}
{{-     $twBorder     = printf "%s/%s" $twBorder     (string $borderOpacity)  -}}
{{-     $twBorderDark = printf "%s/%s" $twBorderDark (string $borderOpacity)  -}}
{{-   end -}}
{{- /* bg            */ -}}
{{-   if or (eq $bgColor "transparent") (not $bgShade) -}}
{{- /* if color is transparent, or we have no shade value, don't try to create an amalgam value. */ -}}
{{-     $twBg =  $bgColor -}}
{{-   else -}}
{{-     $twBg = printf "%s-%s" $bgColor (string $bgShade) -}}
{{-   end -}}
{{-   if or (eq $bgColorDark "transparent") (not $bgShadeDark) -}}
{{- /* if color is transparent, or we have no shade value, don't try to create an amalgam value. */ -}}
{{-     $twBgDark =  $bgColorDark -}}
{{-   else -}}
{{-     $twBgDark = printf "%s-%s" $bgColorDark $bgShadeDark -}}
{{-   end -}}
{{-   if $bgOpacity -}}
{{- /* append the '/xxx ' value to bg/bgdark vars if an opacity value was given.  */ -}}
{{-     $twBg     = printf "%s/%s" $twBg     (string $bgOpacity)  -}}
{{-     $twBgDark = printf "%s/%s" $twBgDark (string $bgOpacity)  -}}
{{-   end -}}
{{- /*   bgShade     */ -}}
{{-   if not (.Parent.Scratch.Get $group) }}
{{-      .Parent.Scratch.Set $group slice }}
{{-    end }}
{{-    if $debug -}}
{{-      warnf "%s" (dict "Class" $class  "Size" $size  "twBg" $twBg "twBgDark" $twBgDark "twBorder" $twBorder "twBorderDark" $twBorderDark "twText" $twText "twTextDark" $twTextDark  "icon" $icon "href" $href "Content" .Inner)  -}}
{{-    end -}}
{{-    .Parent.Scratch.Add $group (dict "Class" $class  "Size" $size  "twBg" $twBg "twBgDark" $twBgDark "twBorder" $twBorder "twBorderDark" $twBorderDark "twText" $twText "twTextDark" $twTextDark  "icon" $icon "href" $href "Content" .Inner) -}}
{{- else -}}
{{-   errorf "%q: 'badger' shortcode must be inside 'badges' shortcode" .Page.Path -}}
{{- end -}}

layouts/shortcodes/badges.html:

{{- $itchybadge := newScratch -}}
{{- if .Inner -}}{{- end -}}
{{- $id := .Get 0 -}}
{{- $itchybadge.Set "sizeDecorations" "" -}}
{{- $group := printf "grid-%s" $id -}}
<span class="flex flex-gap flex-row" >
{{- /*  (dict "Class" $class  "Size" $size    "Icon" $icon "href" $href "Content" .Inner) */ -}}
{{- range $index, $badge := .Scratch.Get $group -}}
{{-   $badgeAttrs := "" -}}
{{-   if eq "small" $badge.Size -}}
{{-     $itchybadge.Set "sizeDecorations" "ms-1 px-1 py-[1px] text-xs min-w-10" -}}
{{-   else if eq "large" $badge.Size -}}
{{-     $itchybadge.Set "sizeDecorations" "ms-1 px-1 py-[1px] text sm min-w-20" -}}
{{-   else if eq "xlarge" $badge.Size -}}
{{-     $itchybadge.Set "sizeDecorations" "ms-1 px-1 py-[1px] text-base p-3 min-w-25" -}}
{{-   else if eq "2xlarge" $badge.Size -}}
{{-     $itchybadge.Set "sizeDecorations" "ms-1 px-1 py-[1px] text-base min-w-25" -}}
{{-   else  -}}
{{-     $itchybadge.Set "sizeDecorations" "text-xs ms-1 px-1 py-[1px] min-w-15" -}}
{{-   end -}}
{{-   $badgeAttrs = (printf "%s %s" $badgeAttrs ($itchybadge.Get "sizeDecorations") ) -}}
{{-   with $badge.twBg         -}}{{- $badgeAttrs = (printf "%s bg-%s" $badgeAttrs .) -}}{{- end -}}
{{-   with $badge.twBgDark     -}}{{- $badgeAttrs = (printf "%s dark:bg-%s" $badgeAttrs .) -}}{{- end -}}
{{-   with $badge.twBorder     -}}{{- $badgeAttrs = (printf "%s border-%s" $badgeAttrs .) -}}{{- end -}}
{{-   with $badge.twBorderDark -}}{{- $badgeAttrs = (printf "%s dark:border-%s" $badgeAttrs .) -}}{{- end -}}
{{-   with $badge.twText       -}}{{- $badgeAttrs = (printf "%s text-%s" $badgeAttrs .) -}}{{- end -}}
{{-   with $badge.twTextDark   -}}{{- $badgeAttrs = (printf "%s dark:text-%s" $badgeAttrs .) -}}{{- end -}}
{{-   with $badge.Class        -}}{{- $badgeAttrs = (printf "%s %s" $badgeAttrs .) -}}{{- end -}}
  <span class=" flex flex-row rounded-md border items-center font-normal {{ printf "%s "  $badgeAttrs }}" >
{{-   with $badge.href -}}<a href="{{.|safeURL}}">{{- end -}}
    <span class="badge">
{{-   .Content | $.Page.RenderString }}
{{-   with $badge.icon -}}
{{-     $icon := resources.Get (printf "icons/%s.svg" ($badge.icon)) -}}
{{-     with $icon -}}
      <span class="relative inline-block align-text-bottom pr-1 pl-0.5  mx-1 py-0 my-0 icon"> {{ $icon.Content | safeHTML }} </span>
{{-       else }}
{{          warnf `[badges] "icon" error in "%s": Resource "%s" not found. Check the path is correct or remove the invocation.` $badge.Icon (printf "icons/%s.svg" ($.Get 0)) }}
{{        end }}
{{-     end }}
    </span>
{{-   if $badge.href -}}</a>{{- end -}}
  </span>
{{- end }}
</span>

usable like:

exampleSite/content/_index.md:1-28:

---
title: "Welcome to Congo! :tada:"
description: "This is a demo of the Congo theme for Hugo."
---

{{< lead >}}
A powerful, lightweight theme for Hugo built with Tailwind CSS.
{{< /lead >}}

This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation]({{< ref "docs" >}}). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
{{<badge>}}did you{{</badge>}}{{<badge>}}ever see a llama{{</badge>}}{{<badge>}}kiss a llama{{</badge>}}{{<badge>}}on the llama{{</badge>}}{{<badge>}}llama llama{{</badge>}}{{<badge>}}not a llama{{</badge>}}{{<badge>}}llama llama duck{{</badge>}}

{{<badges>}}
{{< badger bgColor="neutral" bgShade=100 textColor="neutral"  >}}badger{{< /badger >}}
{{< badger bgColor="neutral" bgShade="300">}}badger{{< /badger >}}
{{< badger bgColor="neutral" bgShade="500" bgOpacity="50" >}}badger{{< /badger >}}
{{< badger bgColor="neutral" bgShade="500" bgOpacity="50" borderColor="neutral" >}}badger{{< /badger >}}
{{< badger bgColor="primary" bgShade=200 borderColor="secondary" borderShade="100" >}}badger{{< /badger >}}
{{< badger bgColor="primary" bgShade=600  borderColor="neutral" borderShade="500"  >}}badger{{< /badger >}}
{{< badger bgColor="primary" bgShade=600  borderColor="primary" borderShade="100" borderOpacity="50" >}}badger{{< /badger >}}
{{< badger bgColor="primary" bgShade=600  borderColor="neutral" borderShade="200" >}}badger{{< /badger >}}
{{< badger textColor="primary" textShade=400 icon="moon"  >}}badger{{< /badger >}}
{{< badger textColor="primary" textShade=300  icon="lightbulb" >}}badger{{< /badger >}}
{{< badger textColor="primary" textShade=400  icon="globe"  >}}badger{{< /badger >}}
{{< badger icon="skull-crossbones"  >}}badger{{< /badger >}}
{{< badger icon="github" href="https://github.com/jpanther/congo" >}}mushroom{{< /badger >}}{{< badger  icon="github" href="https://github.com/jpanther/congo"  >}}mushroom{{< /badger >}}
{{</badges>}}

if you want me to file a PR, I will, but I'm sure there's likely a better way to accomplish the goal

[jpanther]

I worry that introducing all these params in a shortcode will make it unwieldy for most users. It is nice to be able to customise the output but this is extreme. Perhaps we could come up with a sensible subset of params that finds a middle ground?

I feel like opacity, shading, borders, etc are all something that should be handled with a consistent design language so it could be more that there's a set of pre-defined styles and the values are calculated from that. Maybe the first step is to have primary, secondary, neutral as they are the easiest to theme.

It's also important to me to consider how these shortcode params would apply across the whole theme. It would be preferable to implement them in such a way that the same params could be reused for different elements.

[wolfspyre]

like I said I didn’t think it was a GOOD way of doing it,

I just don’t like sayin “this doesn’t work” without demonstrating some investment in trying to resolve it.

I agree it’s absurd as is…. but wanted to provide something to chew on to identify a preferred direction forward…

i’d think 95% of the likely use cases would be met with a fairly small bundle of variants¹…
i’ve seen them abstracted as

• light
• dark
• brand
• success
• warn
• danger
• info

prolly resulting in a few flavors of the colors:

• red
• yellow
• green
• blue
  thematics:
• primary
• secondary
• neutral

thots?

¯\_(ツ)_/¯

Footnotes

1. https://medium.com/@elvann.abendroth/tailwind-dynamic-color-theme-solution-4351d0495c7f ↩

[github-actions]

This issue has been automatically marked as stale because it has not had any recent activity.
If you are still experiencing this issue, please review the issue history and add a reply with any requested and/or additional information in order to keep the issue open.
This issue will automatically close in 30 days if no further activity occurs.