CaiJimmy / hugo-theme-stack

Card-style Hugo theme designed for bloggers
https://stack.jimmycai.com
GNU General Public License v3.0
5.07k stars 1.67k forks source link

Searching has weird behavior when typing one character keyword #184

Closed lynear24 closed 2 years ago

lynear24 commented 3 years ago

Describe the bug

Using a single character as a keyword in the search page creates this weird behavior that nests \<mark> tags improperly (showing the "rk>" part of \<mark> as text in the search outputs). It also duplicates matched text the more you type the same letter again.

Expected behavior

It shouldn't nest the mark tags improperly and it shouldn't duplicate the text in the search output. I just manually tweaked search.tsx to only accept keywords that are at least 2 chars long (as a temporary fix). image image

To Reproduce

Type a complete word and a letter in that same word separated by whitespace. Typing the same letter again and again as another word duplicates the text that matches the search.

Screenshots

\<mark> nesting improperly image image

duplicating results image

Environment

Content of config.yaml

### Paste the content of the config file here
baseurl: /
languageCode: en-us
theme: stack
paginate: 6
title: Amateur Homie

# Change it to your Disqus shortname before using
disqusShortname: Lynear

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn
DefaultContentLanguage: en

permalinks:
    post: /post/:slug/
    page: /:slug/

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: false
    favicon: /favicon.ico

    footer:
        since: 2019
        customText:

    dateFormat:
        published: 02 Jan '06
        lastUpdated: Jan 02 '06 15:04 MST

    sidebar:
        emoji:
        subtitle: Artist(?). Profile picture by Raeny
        avatar:
            local: true
            src: img/layla.png

    article:
        math: false
        license:
            enabled: false
            default: Licensed under CC BY-NC-SA 4.0

    comments:
        enabled: false
        provider: disqus

        utterances:
            repo:
            issueTerm: pathname
            label:

        remark42:
            host:
            site:
            locale:

    widgets:
        enabled:
            - search
            - tag-cloud

        tagCloud:
            limit: 10

    opengraph:
        twitter:
            # Your Twitter username
            site:

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: false

        # Available values: auto, light, dark
        default: dark

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: -100
          pre: home

        - identifier: about
          name: About
          url: /about/
          weight: -90
          pre: user

        - identifier: gallery
          name: Gallery
          url: /gallery/
          weight: -80
          pre: hash

        - identifier: archives
          name: Archives
          url: /archives/
          weight: -70
          pre: archives

        - identifier: search
          name: Search
          url: /search/
          weight: -60
          pre: search

related:
    includeNewer: false
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    highlight:
        noClasses: false

Link to the demo site and/or source repository

Link to site

CaiJimmy commented 3 years ago

Thanks for reporting.

That's the consequence of my bad code. I used regex to highlight the HTML code directly, and when r keyword is typed, it tries to wrap the r letter of <mark> tag again, causing this strange behavior.

I don't have a good idea how to fix this yet.

ghost commented 3 years ago

@lynear24 maybe integrating this instead (or as an option) for the current search function in the theme can help? https://codewithhugo.com/hugo-lunrjs-search-index/

MassimoMaggioni commented 3 years ago

hi, the trivial workaround is to disable the keyword highlithing removing the tag from the marker function:

public static marker(match) { return match; }

but I like keyword highlithing and I want to try to work on it. My idea is to posticipate the marker substitution at the end of the search and not in the meantime from one keyword search and the others.