jpanther / congo

A powerful, lightweight theme for Hugo built with Tailwind CSS.
https://jpanther.github.io/congo/
MIT License
1.24k stars 329 forks source link

Search results bug connected to markup #642

Closed stereobooster closed 1 year ago

stereobooster commented 1 year ago

Issue description

Screenshot 2023-09-06 at 17 39 52

Search results are broken, because there is markup in JSON response.

This piece of code responsible for creating markup for search results:

`<li class="mb-2">
          <a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
            <div class="grow">
              <div class="-mb-1 text-lg font-bold">${value.item.title}</div>
              <div class="text-sm text-neutral-500 dark:text-neutral-400">${value.item.section}${value.item.date == null ? '' : `<span class="px-2 text-primary-500">&middot;</span>${value.item.date}</span>`}</div>
              <div class="text-sm italic">${value.item.summary}</div>
            </div>
            <div class="ml-2 ltr:block rtl:hidden text-neutral-500">&rarr;</div>
            <div class="mr-2 ltr:hidden rtl:block text-neutral-500">&larr;</div>
          </a>
        </li>`

But in my case it generates markup like this

<li class="mb-2">
          <a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="/posts/typography/" tabindex="0">
            <div class="grow">
              <div class="-mb-1 text-lg font-bold">Typography</div>
              <div class="text-sm text-neutral-500 dark:text-neutral-400">Posts<span class="px-2 text-primary-500">&middot;</span>10 June 2019</span></div>
              <div class="text-sm italic"><p>See: <a href="https://jpanther.github.io/congo/samples/markdown/">https://jpanther.github.io/congo/samples/markdown/</a>

...

        </li>

Because there is tag <a> inside another <a> browser will close tags earlier and result would be as in screenshot.

Does it mean we need to use plainify in themes/congo/layouts/_default/index.json? Or is it my configuration somehow broken?

Theme version

2.6.1

Hugo version

hugo v0.117.0-b2f0696cad918fb61420a6aff173eb36662b406e+extended darwin/amd64 BuildDate=2023-08-07T12:49:48Z VendorInfo=brew

Which browser rendering engines are you seeing the problem on?

Firefox (Mozilla Firefox)

URL to sample repository or website

No response

Hugo output or build error messages

n/a
stereobooster commented 1 year ago

unrelated to the bug, but this code should be more memory effective:

    resultsHTML = results.map(function (value, key) {
      return `<li class="mb-2">
          <a class="flex items-center px-3 py-2 rounded-md appearance-none bg-neutral-100 dark:bg-neutral-700 focus:bg-primary-100 hover:bg-primary-100 dark:hover:bg-primary-900 dark:focus:bg-primary-900 focus:outline-dotted focus:outline-transparent focus:outline-2" href="${value.item.permalink}" tabindex="0">
            <div class="grow">
              <div class="-mb-1 text-lg font-bold">${value.item.title}</div>
              <div class="text-sm text-neutral-500 dark:text-neutral-400">${value.item.section}${value.item.date == null ? '' : `<span class="px-2 text-primary-500">&middot;</span>${value.item.date}</span>`}</div>
              <div class="text-sm italic">${value.item.summary}</div>
            </div>
            <div class="ml-2 ltr:block rtl:hidden text-neutral-500">&rarr;</div>
            <div class="mr-2 ltr:hidden rtl:block text-neutral-500">&larr;</div>
          </a>
        </li>`;
    }).join("");
stereobooster commented 1 year ago

I found what the problem. It is cause by "cut" (<!--more-->) in articles.