search

filipedeschamps / tabnews.com.br

Conteúdos para quem trabalha com Programação e Tecnologia.
https://tabnews.com.br
GNU General Public License v3.0
5.32k stars 388 forks source link

Facilitar a cópia de âncoras para títulos de conteúdos #1659

Open Rafatcb opened 7 months ago

Rafatcb commented 7 months ago

Descrição

O PR #1635 adicionou id aos títulos ( h1, h2 ... h6) de um conteúdo, mas não há uma forma fácil de copiar a âncora para o título em questão. Essa funcionalidade pode ser útil tanto em conteúdos criados por usuários (publicação, comentário e descrição do perfil) como em páginas que utilizam markdown, como o FAQ, Termos de Uso e Museu.

Sugestão de implementação

Devemos dar uma atenção extra sobre esse comportamento em dispositivos móveis, então uma opção mais amigável do que exibir algo no hover é um comportamento como o da documentação do Joi. O ícone usado lá é uma prancheta e está sempre visível, e ao clicar no ícone, o link para o título é copiado.

Titulo com o ícone de uma prancheta do lado direito. Ao clicar, o ícone muda para um "verificado".

Foi sugerido em https://github.com/filipedeschamps/tabnews.com.br/pull/1635#issuecomment-1969029954 usar o ícone de compartilhar e chamar o navigator.share.

Ícone de compartilhar

Por questões de alinhamento de texto, muito provavelmente o melhor local para exibir o ícone é no final do título, mesmo que o ícone fique sozinho numa nova linha.

wendesongomes commented 6 months ago

Tava estudando como fazer plugin para o @bytemd/react e acabei fazendo o sistema de copiar a ancora, reaproveitei boa parte do codigo do copy-code-to-clipboard.js e ficou desta forma:

image

aprendendofelipe commented 6 months ago

acabei fazendo o sistema de copiar a ancora

Para facilitar a utilização em dispositivos móveis, é melhor usar o navigator.share. O ícone utilizado também é mais coerente com "compartilhamento" do que com a ação de "copiar".

E o posicionamento do ícone alinhado na direita não ajuda tanto no entendimento da funcionalidade. Acho que fica melhor deixar junto ao título. Pode até ser na direita, mas logo após o texto.

Faz sentido?

wendesongomes commented 6 months ago

Fez sim, vou fazer as alterações e coloco aqui novamente.

wendesongomes commented 6 months ago

@aprendendofelipe Coloquei um gap de 20px e adicionei o navigator.share.

Title: Tabnews Text: Coloquei o titulo do post url: ${window.location.href.split('#')[0]}#${anchor.id} fiz desta forma, coloquei um split para se caso a pessoa usar o dialog de ir para algum tópico fica com o # na url e para não ter dois # fiz desta forma

image