Adiciona barra de pesquisa do Google ao Header

[aprendendofelipe]

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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tabnews	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2023 10:50pm

[Rafatcb]

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 Overlay na horizontal e usar cores diferentes no dark mode?

[filipedeschamps]

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:

[aprendendofelipe]

Para complementar, seria possível centralizar o Overlay na horizontal e usar cores diferentes no dark mode?

Ótimas perguntas @Rafatcb! 💪

Centralização do Overlay

[Edit] Feito!

Estilizar o CSE (Mecanismo de Pesquisa Programável)

Não temos uma API nessa versão "grátis". A busca ocorre usando JS do próprio Google, que monta toda a parte da barra de pesquisa real e os resultados. Então a maneira de estilizar é diretamente pelo console deles, onde após salvar as configurações, eles já atendem as novas requisições com a nova estilização. Dá para personalizar bastante, mas o primeiro problema é que não descobri como deixar salvas duas versões diferentes.

A alternativa que pensei foi criar dois IDs de busca diferentes, e configurar cada um para um tema, mas isso também leva a alguns trabalhos extras que ainda não sei se vale a pena:

1. Teria que criar toda a estilização "dark" do zero, pois não tem nada pronto que se aproxime. A que usei é uma das opções já disponíveis, a "Minimalist". Só fiz alguns poucos ajustes nela.
2. Teremos que ficar juntando as duas estatísticas que serão geradas separadamente para cada ID de busca ("dark" e "light").

Se a busca permanecer muito tempo nessa versão "grátis" do Google, voltamos no caso do item 5 acima, onde mais gente pode se incomodar com a falta do tema "dark" e criar essa estilização pra gente. No CSE dá para exportar e importar a configuração.

[aprendendofelipe]

Fiz algumas personalizações no sistema de busca para testar:

• Mudei a mensagem padrão de quando nenhum resultado é encontrado. Agora ficou: "Sua busca não retornou resultados. Que tal criar uma publicação sobre isso?"
• Adicionei filtros que permitem buscar apenas no GitHub ou no TabNews para os casos em que o usuário não queira pesquisar nos dois sites. As opções aparecem após uma primeira busca nos dois sites.
• Dá para adicionar novas palavras para preenchimento automático, assim como excluir palavras da lista do Google, ou até mesmo usar apenas as que nós adicionarmos. Mas isso eu só testei e voltei o padrão que é deixar as palavras do Google.
• Dá para usar a pesquisa para promover qualquer coisa que quisermos. Pesquisem por qualquer dessas palavras e vejam o primeiro resultado após os anúncios do Google: curso, dev, filipe, deschamps, youtube, newsletter. Algo assim pode ser uma das opções da Revenue Share.
• Aí cheguei nos dados estruturados, que acho que vão permitir adicionar novas formas de classificação, como por comentários ou TabCoins. Mas isso eu não consegui testar direito, pois precisava mexer no código e hospedar uma versão de teste.

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 (#) e não uma página para cada comentário. Então já aproveitei para implementar isso, pois assim temos mais uma opção de links direto para quaisquer comentários, mas abrindo os comentários que estão acima sem precisar de uma nova navegação. Por exemplo:

https://tabnews-p92gnqtp5-tabnews.vercel.app/filipedeschamps/testando-pr-do-darkmode#79f7112d-a71c-4344-93f4-ad5bc09f6e32

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 😅

[mthmcalixto]

@aprendendofelipe Ficou muito bom, realmente dessa forma não gera nenhum custo, só falta um dark mode no modal e fica show!

[aprendendofelipe]

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 💪

[mthmcalixto]

@aprendendofelipe não seria melhor tentar trocar o "target" do link para abrir na mesma página?

Eu vi que existe um atributo suportado:

linkTarget	String	Sets the link target. Default: _blank.

[aprendendofelipe]

@aprendendofelipe não seria melhor tentar trocar o "target" do link para abrir na mesma página?

Eu vi que existe um atributo suportado:

linkTarget String Sets the link target. Default: _blank.

Boa @mthmcalixto! Se quiser abrir um PR mudando esse comportamento, daí amanhã eu reviso! 🤝

[mthmcalixto]

adiciona para abrir links na mesma página

[Jottinha]

Ficou muito bom, acredito que só falta a cor de fundo em dark mode ser acionada quando estiver com esse opção habilitada .

[aprendendofelipe]

Top consultas do primeiro dia:

Consulta	Contagem
pitch	23
javascript	17
teste	15
java	13
test	12
saas	12
c#	11
rust	11
busca	11
python	10

No total foram 448 consultas ✔

[filipedeschamps]

Que masssaaaaaaaa!!! Impressionante que pitch está em primeiro 😍

[mthmcalixto]

Que masssaaaaaaaa!!! Impressionante que pitch está em primeiro 😍

@filipedeschamps Eu poderia falar que metade é meu 😂

@aprendendofelipe mais dados pra gente vê se vale a pena criar algo melhor hahah?