Adiciona barra de pesquisa do Google ao Header #1472
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Felipe, ficou bem legal o resultado! Não esperava por isso. A pesquisa ficou bem rápida, e gostei de mostrar assuntos publicados no GitHub também, isso deve ajudar a evitar algumas sugestões simples repetidas ou até responder algumas perguntas sobre a plataforma. Para complementar, seria possível centralizar o |
|
Ficou muito massa!!! 😍 Muito rápido o retorno da pesquisa. E reforço o comentário do @Rafatcb sobre o alinhamento em telas maiores, dado que o clique acontece num lado e o modal aparece do outro: 
|
Ótimas perguntas @Rafatcb! 💪 Centralização do
|
aprendendofelipe
force-pushed
the
searchbox
branch
from
fcac437 to
2eeecbb
Compare
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| function clearGoogleBox() { | ||
| Array.from(document.getElementsByTagName('script')).forEach((elm) => { | ||
| if (elm.src?.includes('google.com/')) { |
Check failure
Code scanning / CodeQL
Incomplete URL substring sanitization
| }); | ||
|
|
||
| Array.from(document.getElementsByTagName('link')).forEach((elm) => { | ||
| if (elm.href?.includes('google.com/')) { |
Check failure
Code scanning / CodeQL
Incomplete URL substring sanitization
|
|
||
| Array.from(document.getElementsByTagName('style')).forEach((elm) => { | ||
| if ( | ||
| elm.href?.includes('google.com/') || |
Check failure
Code scanning / CodeQL
Incomplete URL substring sanitization
|
Fiz algumas personalizações no sistema de busca para testar:
Para um dos testes eu já adicionei alguns dados estruturados. E uma das sugestões do Google era adicionar links exclusivos diretamente para cada comentário (algo que já temos), mas a sugestão era usando fragmentos ( Para criar esses links é só adicionar o id do comentário após a Daí já aproveitei que estava mexendo nisso e arrumei os endereços canônicos para usarem sempre o endereço do conteúdo raiz. Adequei as metatags relacionadas à url, para todas usarem o mesmo endereço canônico. E já que estava mexendo nas tags, configurei para não indexar conteúdos negativados. Tudo isso no 51b52cf. E como agora tem como criar links para os comentários de uma maneira mais interessante, alterei o link que é enviado no email de notificação de nova resposta, pois assim recebemos um link que mostra não apenas a nova mensagem, mas a anterior também. E já que mexi no código de novo, centralizei o box de pesquisa e mudei a scrollbar para ficar um pouco melhor no modo escuro 😅 |
|
@aprendendofelipe Ficou muito bom, realmente dessa forma não gera nenhum custo, só falta um dark mode no modal e fica show! |
aprendendofelipe
force-pushed
the
searchbox
branch
from
2eeecbb to
068ac4b
Compare
|
Vou separar a parte se SEO que tinha feito nesse PR porque preciso fazer mais testes primeiro, então logo abro outro PR. Vou abrir outro PR também sobre a mudança nas notificações, pois ainda não tive nenhum feedback sobre isso, então não sei se vai para produção. Com isso já posso mesclar essa branch que adiciona a barra de busca. 🎉 Se alguém quiser criar uma estilização diferente para a busca em modo escuro, é só enviar o PR 💪 |
|
@aprendendofelipe não seria melhor tentar trocar o "target" do link para abrir na mesma página? Eu vi que existe um atributo suportado:
|
Boa @mthmcalixto! Se quiser abrir um PR mudando esse comportamento, daí amanhã eu reviso! 🤝 |
|
Ficou muito bom, acredito que só falta a cor de fundo em dark mode ser acionada quando estiver com esse opção habilitada . |
|
Top consultas do primeiro dia:
No total foram 448 consultas ✔ |
|
Que masssaaaaaaaa!!! Impressionante que |
@filipedeschamps Eu poderia falar que metade é meu 😂 @aprendendofelipe mais dados pra gente vê se vale a pena criar algo melhor hahah? |
Conforme conversado em #927, enquanto o TabNews não possuir um sistema próprio, foi adicionada ao Header uma barra de pesquisa que busca pelas publicações no Google.
A barra é falsa, e na verdade é um botão que irá carregar a barra de pesquisa do Google apenas quando for clicado. Assim os scripts do Google só são executados por quem usar a barra de pesquisa, e com isso dificultamos o rastreamento dos usuários pelo Google.
No caso de telas menores, foi adicionado apenas um ícone no lugar da barra.
Do jeito que foi configurada, a pesquisa irá retornar também resultados aqui do repositório, quando for o caso. Então isso pode ser uma melhoria até para quem já costuma pesquisar diretamente pelo Google, pois poderá pesquisar em um único lugar quando não se lembrar se viu algo aqui ou no próprio TabNews (comigo acontece bastante 😅).
Existem diversas extensões para navegador (e aplicações web) construídas para fazer pesquisas no TabNews, mas está fora do nosso controle garantir uma boa experiência para quem estiver utilizando elas. Eu acredito que a maioria usa o Google, mas algumas são mais como filtros do que sistemas de pesquisas, e filtram apenas em uma pequena parte dos dados que foi coletada do banco de dados.
Por fim, com essa barra nós podemos levantar dados sobre a utilização para basear decisões quando formos implementar um sistema de busca próprio.