Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search results bug connected to markup #642

Closed
stereobooster opened this issue Sep 6, 2023 · 2 comments
Closed

Search results bug connected to markup #642

stereobooster opened this issue Sep 6, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@stereobooster
Copy link
Contributor

stereobooster commented Sep 6, 2023

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 stereobooster added the bug Something isn't working label Sep 6, 2023
@stereobooster
Copy link
Contributor Author

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
Copy link
Contributor Author

stereobooster commented Sep 6, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant