Feat reading time on posts #1445
Conversation
|
@ValbertMartins is attempting to deploy a commit to the TabNews Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Olá @ValbertMartins, obrigado pelo PR! 💪
Fiz uma sugestão e um comentário no código. O comentário é sobre a forma de contar as palavras. Queria saber a opinião da turma.
Outra coisa que queria saber a opinião é se a gente deveria mostrar o tempo de leitura em todos os comentários ou apenas na publicação principal. O que acham?
| import { Text } from '@/TabNewsUI'; | ||
|
|
||
| function getReadTime(text, wpm = 260) { | ||
| const wordsQuantity = text.split(' ').length; |
There was a problem hiding this comment.
Estou em dúvida se vale a pena fazer algo mais elaborado que remova o markdown e lide corretamente com quebras de linhas, sequências de espaços, etc.
Considerando que é apenas uma aproximação do tempo de leitura, provavelmente não vai valer a pena criar algo mais pesado, mas queria saber a opinião da turma
There was a problem hiding this comment.
Olá @aprendendofelipe obrigado pelas sugestões,
Sobre ter tempo estimado nos comentários, também fico na dúvida, por um lado há comentários muito bem elaborados que dariam outro post, já para comentários curtos e diretos parece ficar redundante.
já a respeito de fazer algo mais elaborado para calcular essa média como no fim é apenas uma estimativa, também não sei vale a pena, já que isso pode variar em diversos fatores como complexidade do post, imagens e etc, então fica bem complexo ter uma estimativa bem precisa.
Co-authored-by: Felipe Barso <77860630+aprendendofelipe@users.noreply.github.com>
|
Eu estou muito pessimista com essa feature. No meu ponto de vista isso desmotivaria o usuário a ler o post, além de que o tempo de leitura é muito relativo, existem muitas variáveis envolvida. |
| import { Text } from '@/TabNewsUI'; | ||
|
|
||
| function getReadTime(text, wpm = 260) { | ||
| const wordsQuantity = text.split(' ').length; |
There was a problem hiding this comment.
Provavelmente performance não seria um problema aqui mas se tu quiser deixar mais rápido:
- Usa a lib alfaaz, 2x mais rápido que split
- Ou troca o
.splitpor um simples for, isso consumiria menos memória já que não precisa alocar para dividir o texto inteiro.
|
Concordo parcialmente com o @thisiscleverson. Isso pode ser algo que desencoraje o pessoal a ler. Mas também, pode ser uma mão na roda.. que tal isso ser configurável? Como se fosse um tipo de preferência de perfil ou algo do tipo. Sei que aumenta bem a complexidade da PR, mas é uma maneira de disponibilizar para quem quiser. Sobre o tempo de leitura em respostas/comentários.. minha opinião pessoal é de que seja válido sim! pois pelo que navego no TabNews, vejo respostas longas com frequência hehehe |
| <BranchName as={Link} href={`/${contentObject.owner_username}`}> | ||
| {contentObject.owner_username} | ||
| </BranchName> | ||
| <ReadTime text={contentObject.body} /> |
There was a problem hiding this comment.
Que tal usar {' · '} como separador, assim como no contentList?
There was a problem hiding this comment.
@aprendendofelipe aos espaçadores estou com um problema quanto a margem esquerda que já existia no componente PublishedSince, já que se remover esse ml do PublishedSince, dentro do contentList ele não ficará alinhado. tem alguma sugestão?
There was a problem hiding this comment.
Está ficando show de bola, @ValbertMartins! 💪
Se não quiser ter que arrumar o PublishedSince e o contentList, então basta passar sx={{ ml: 0}} para o PublishedSince dentro do Content:
<PublishedSince direction="n" date={contentObject.published_at} sx={{ ml: 0 }} />Agora o ideal mesmo seria inverter. Retirar o ml de dentro do componente PublishedSince e passar sx={{ ml: 1}} ao usar o componente em contentList. Mas fica a seu critério. 👍
Eu só não colocaria o separador entre no username e ReadTime , mas apenas entre ReadTime e PublishedSince.
E pensando mais sobre mostrar o tempo de leitura nos comentários. Acho melhor não mostrar por enquanto, pois vai piorar a quebra de layout que já ocorre em repostas em níveis mais profundos, por exemplo aqui:
Dependendo da aceitação da nova funcionalidade, podemos ver como fazer com os comentários e, mais importante, ver como podemos mostrar o tempo de leitura no contentList 🤝
There was a problem hiding this comment.
obrigado @aprendendofelipe !
Fiz a remoção do tempo de leitura dos comentários e a remoção do separador entre o username e o readTime.
No caso do PublishedSince além de remover o ml:1 de dentro do componente como sua sugestão, também tive que trazer o position:absolute dele quando usado no contentList.
| @@ -119,7 +119,7 @@ export default function ContentList({ contentList: list, pagination, paginationB | |||
| </Link> | |||
| {' · '} | |||
| <Text> | |||
| <PublishedSince direction="nw" date={contentObject.published_at} /> | |||
| <PublishedSince direction="nw" date={contentObject.published_at} sx={{ position: 'absolute', ml: 1 }} /> | |||
There was a problem hiding this comment.
tive que também trazer o position para fora do componente PublishedSince no contentList, já que só aplicar o ml apenas estava sobrescrevendo ficando sem o position, logo causando esse problema no tooltip
| @@ -33,7 +33,7 @@ export default function PublishedSince({ date, ...props }) { | |||
| }, [date]); | |||
|
|
|||
| return ( | |||
| <Tooltip sx={{ position: 'absolute', ml: 1 }} aria-label={tooltipLabel} suppressHydrationWarning {...props}> | |||
| <Tooltip sx={{ position: 'absolute' }} aria-label={tooltipLabel} suppressHydrationWarning {...props}> | |||
There was a problem hiding this comment.
resolvi deixar o position também dentro do componente, já que sem ele vi que o tooltip fica com alguns problemas.
There was a problem hiding this comment.
Sim @ValbertMartins, esse position é necessário, pois o Tooltip do Primer ainda contém bugs por estar em alpha.
|
Parece que está pronto! 🎉 Vamos só aguardar a Turma dar uma avaliada no resultado em homologação: 🤝 https://tabnews-ho4w6beg5-tabnews.vercel.app/Ezequias/publicacao-ficticia-para-teste-de-tts |
|
Em produção! 🚀🚀🚀 @ValbertMartins, bem vindo à Turma de contribuidores do TabNews! 👏👏👏 |
|
Deployment failed with the following error: |
Esse pr adiciona a feature de tempo de leitura estimado a cada post ao entrar no post.
Como base, segui o que o medium.com utiliza, 260/270 wpm(words per minute) e arrendondar para cima os segundos restantes.
Artigo base do medium:
https://blog.medium.com/read-time-and-you-bc2048ab620c