Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
Rafatcb opened this issue Mar 30, 2024 · 4 comments
Open

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

Rafatcb opened this issue Mar 30, 2024 · 4 comments
Labels
front Envolve modificações no frontend novo recurso Nova funcionalidade/recurso

Comments

@Rafatcb
Copy link
Collaborator

Rafatcb commented Mar 30, 2024

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 #1635 (comment) 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.

@Rafatcb Rafatcb added front Envolve modificações no frontend novo recurso Nova funcionalidade/recurso labels Mar 30, 2024
@wendesongomes
Copy link

wendesongomes commented May 3, 2024

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
Copy link
Collaborator

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
Copy link

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

@wendesongomes
Copy link

wendesongomes commented May 3, 2024

@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

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
front Envolve modificações no frontend novo recurso Nova funcionalidade/recurso
Projects
None yet
Development

No branches or pull requests

3 participants