Estou animado para compartilhar um novo componente de tema que adiciona layouts de linha do tempo elegantes à sua comunidade Discourse!
Este é o meu primeiro componente de tema, construído com a assistência de LLM.
O que é?
Discourse Timelines é um componente de tema que implementa BBCode personalizado [timelines]...[/timelines] para criar layouts de linha do tempo bonitos e minimalistas. Perfeito para roteiros de projetos, guias passo a passo, históricos de empresas, divisões de capítulos e muito mais.
BBCode Personalizado - Sintaxe simples [timelines] Botão da Barra de Ferramentas do Compositor - Não há necessidade de digitar tags manualmente (resolve o problema de escape de colchetes do novo editor!) Design Bonito - Linha de gradiente vertical com estética limpa e minimalista Suporte a Markdown - Preserva toda a formatação dentro das linhas do tempo Multilíngue - Traduções integradas para 9 idiomas (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU) Compatível com Temas - Funciona com modos claro e escuro Personalizável - Altere facilmente as cores através das configurações de administrador Responsivo - Layout amigável para dispositivos móveis Seguro - Proteção XSS integrada Sem Dependências - Usa apenas APIs nativas do Discourse
Uso
Usando o Botão da Barra de Ferramentas (Mais Fácil!)
Abra o compositor
Clique no botão de menu “+” (opções)
Selecione “Inserir Linha do Tempo”
Edite seu conteúdo
Publique!
O botão da barra de ferramentas resolve o problema em que o novo editor do Discourse escapa automaticamente os colchetes digitados manualmente.
Exemplo de Sintaxe
[timelines]
## Janeiro de 2024 - Lançamento do Projeto
O projeto foi oficialmente iniciado e a equipe foi formada.
## Março de 2024 - Primeira Versão
O desenvolvimento da funcionalidade principal foi concluído e os testes beta começaram.
## Junho de 2024 - Versão 2.0
Atualização importante com novos recursos:
- Recurso A
- Recurso B
- Recurso C
[/timelines]
Personalização
Todas as cores podem ser personalizadas através das configurações do tema:
timeline_gradient_start - Cor do gradiente superior (padrão: #ff7a18)
timeline_gradient_end - Cor do gradiente inferior (padrão: #ffb800)
timeline_heading_color - Cor do texto do título (padrão: #d96d14)
timeline_dot_color - Cor do ponto da linha do tempo (padrão: #ff7a18)
timeline_heading_color_dark - Cor do título no modo escuro (padrão: #ff9854)
timeline_dot_border_color_dark - Borda do ponto no modo escuro (opcional)
Espero que você ache este componente útil! Por favor, me avise se você tiver alguma dúvida, feedback ou sugestão.
Ao usá-la em uma postagem com o autoTOC, ela se destaca por depender dos markdown de cabeçalho 2 e 3. Existe alguma maneira de mudar para usar cabeçalhos 4 ou 5 em vez disso/além disso para mais flexibilidade?
Se a linha do tempo aparecer mais abaixo na hierarquia do TOC, como depois de um cabeçalho 2 ou 3, isso faz com que o TOC pareça visualmente desordenado.
EDIT: Posso envolver isso em tags [details] e isso remove os cabeçalhos da Linha do Tempo de aparecerem no TOC. Solução razoável para meus propósitos, se for o caso.
Eles são renderizados como H2/H3 dentro da linha do tempo, mas não são tratados como títulos reais, então o autoTOC permanece organizado, independentemente de onde a linha do tempo esteja.
Se você quiser que os títulos de uma linha do tempo permaneçam no sumário, continue usando ##/### normais.
No momento, se houver apenas um ##! (ou ###!) dentro de [timelines], o sumário ignorará a linha do tempo inteira.
Misturar os dois estilos na mesma linha do tempo ainda não é suportado.
Você pode misturá-los agora: ##/### ainda aparecem no sumário, enquanto ##!/###! são renderizados apenas dentro da linha do tempo e ficam de fora do sumário.
O código também parece ser ativado em qualquer lugar onde [timelines] esteja presente na postagem, mesmo que esteja entre crases de código como acima. Escapar com barra invertida \\[timelines] também não parece fazer diferença.
ETA: as tags [timelines] e [/timelines] parecem escapar quebras de linha e aparecem na mesma linha do texto mais próximo em blocos de código com três crases ```
Então
[timelines]
Blah
Blah
[/timelines]
Aparece como
[timelines]Blah
Blah[/timelines]
Encontrei isso ao escrever um guia para usá-lo, então provavelmente é apenas um caso extremo.
BBCode Personalizado - Sintaxe simples [timelines]
