Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Gallery search and filters stop working after you come back to /templates through a site link

Fechada
  • Algo errado?
#151 4 comentários 0 reações 1 responsável Ver no GitHub

Mantenedores costumam responder em até 1 dia

@prakashNalla já está trabalhando nisso.

Desde 20/10/2026.

  • #156 de @prakashNalla — integrado

Avaliação

Esta issue ainda não foi avaliada.

Descrição

bug good first issue hacktoberfest ui

The gallery's search box and category pills stop working once you come back to /templates through a link on the site. On https://og.codercops.com:

  1. Open /templates. Typing "dark" filters the gallery, and the GitHub pill shows 10 templates.
  2. Click "Preview" in the header, then "Templates".
  3. Type "dark" or click a category pill. All 110 templates stay on screen, the "Showing" line doesn't change, and there's no error in the console.

The site uses Astro's <ClientRouter /> (src/layouts/Layout.astro, line 75), so links inside the site swap the page without a full reload. The router runs each script once until the next full reload: it remembers scripts by their text and skips any it has already run, unless the script has data-astro-rerun. The gallery's code is a top-level <script is:inline> (src/pages/templates.astro, lines 80 to 163), so the second time the page is shown, nothing attaches listeners to the new search box and pills, and ?q= and ?category= aren't read either.

What to do

  • Put the gallery setup in a function and run it on astro:page-load, which fires on the first load and after every navigation. Layout.astro does this for the scroll animations (line 107).
  • The event fires on every page, so return early when the gallery isn't on the page.
  • Attach the listeners once per visit to /templates, not once more for every navigation.
  • If you'd rather add data-astro-rerun, wrap the code in a function first: run twice, the script's top-level consts would be declared twice and it would throw.
  • Keep the search matching names, descriptions and tags (#147), and keep ?q= and ?category= working.

Where to look

  • src/pages/templates.astro: the script at lines 80 to 163
  • src/layouts/Layout.astro: <ClientRouter /> (line 75) and the astro:page-load listener (line 107)
  • src/components/Header.astro (line 11) and src/components/Footer.astro (line 20) link to /templates

Acceptance criteria

  • After going from /templates to another page and back with the header or footer link, the search box and the category pills filter the gallery, and the "Showing" line updates
  • Going back and forth several times still works, without adding another set of listeners each time
  • Opening /templates?q=dark&category=github directly still applies both
  • npm run check, npm run test and npm run build pass
  • The PR says how you tested the navigation in a browser with npm run dev

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #<this issue number>.

Linguagem predominante
TypeScript
Estrelas
8
Forks
4
Merge médio
6h 40min
PRs com merge (30d)
106

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de codercops/ogcops

Todas as issues de codercops/ogcops

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.