[Bug report] Icon added to translations file is rendered with extranious text

[pentastich]

Operating system

Fedora 41

Publii version

0.46.3 (build 17008)

Issue type

Free plugin

Bug description

This relates to the Lucide Icons plugin used in the Persona_free theme. From the output, I strongly suspect that the issue is with the Lucide Icons plugin, but I have not examined the code.

I was attempting to render the collapsed menu using a Lucide "menu" icon (a "hamburger"). The code in the umodified navbar.hbs partial reads:

<nav class="navbar js-navbar">
  <button class="navbar__toggle js-toggle" aria-label="{{ translate 'partials.menu.menu' }}">{{ translate 'partials.menu.menu' }}</button>
  {{> menu menus.mainMenu}}
</nav>

The translation in the unmodified 'persona_free.lang.json' reads:

{
	"partials": {
                …
		"menu": {
			"menu": "Menu"
		},

And I changed that to read:

{
	"partials": {
                …
		"menu": {
			"menu": "[li=menu]"
		},

After making my change, the output in each .html file reads:

      <nav class="navbar js-navbar">
         <button class="navbar__toggle js-toggle" aria-label="<svg class="li li-menu" width="24px" height="24px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><g><path d="M4 12h16M4 6h16M4 18h16"/></g></svg>"><svg class="li li-menu" width="24px" height="24px" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><g><path d="M4 12h16M4 6h16M4 18h16"/></g></svg></button>
         <ul class="navbar__menu">

THe SVG paths make the above hard to read. The problem occurs in the middle of the SVG stuff for the button, where it says:

</svg>"><svg

That results in the the icon being rendered with the [">] as shown below:

Steps to reproduce

1. Create a site
2. Install the Persona_free theme.
3. Install the Lucide Icons plugin.
4. Copy the persona_free.lang.json file to the site's "languages" directory.
5. Edit the translation of the "menu" string as described in the Bug description.

Relevant log output

No response

[pentastich]

By the way, upon reflection, I think that what I SHOULD be doing is to change the navbar.hbs file to reference the icon, and leave the current translation of "Menu" in the aria-label. That has the advantages of being more accessible, and avoids this issue!

I still think that what's happening is a bug, however :-)

[bobmitro]

This is not a bug; it is incorrect usage. You should not use this plugin in a language file - that is not what it was designed for.

[pentastich]

Thank you. That makes sense.

Let me describe the process of how I got there, and perhaps there's an opportunity for clearer guidance somewhere:

• I wanted to change my collapsed menu from a word "Menu" to an icon.
• I changed the name of the menu in Publii, but it didn't have any effect. For example, I changed it to "Banana" but it continued to render as "Menu".
• I looked at the navbar.hbs file and found that it referenced a translation.

So, I, somewhat naturally, I think, thought that I should make the change there.

I'm not sure how much of this is a Publii issue, how much is a Persona_free issue, and how much is a translation issue. Whatever the cause, tracking down where to make that change wasn't obvious to me at all!

As I said in my earlier comment, though, I think the right way to do this is to change the HBS file, and leave the "aria-label" translated as is.