Discourse Qingwa Timelines - BBCode personalizado para layouts de linha do tempo bonitos

:information_source: Resumo Um componente de tema do Discourse para criar belos layouts de linha do tempo
:eyeglasses: Pré-visualização https://meta.appinn.net/t/topic/76953
:hammer_and_wrench: Repositório GitHub - scavin/discourse-qingwa-timelines
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

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.

Efeito de Linha do Tempo Publicado

Botão da Barra de Ferramentas do Compositor

Visualização do Editor Markdown

Principais Recursos

:white_check_mark: BBCode Personalizado - Sintaxe simples [timelines]
:white_check_mark: 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!)
:white_check_mark: Design Bonito - Linha de gradiente vertical com estética limpa e minimalista
:white_check_mark: Suporte a Markdown - Preserva toda a formatação dentro das linhas do tempo
:white_check_mark: Multilíngue - Traduções integradas para 9 idiomas (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU)
:white_check_mark: Compatível com Temas - Funciona com modos claro e escuro
:white_check_mark: Personalizável - Altere facilmente as cores através das configurações de administrador
:white_check_mark: Responsivo - Layout amigável para dispositivos móveis
:white_check_mark: Seguro - Proteção XSS integrada
:white_check_mark: Sem Dependências - Usa apenas APIs nativas do Discourse

Uso

Usando o Botão da Barra de Ferramentas (Mais Fácil!)

  1. Abra o compositor
  2. Clique no botão de menu “+” (opções)
  3. Selecione “Inserir Linha do Tempo”
  4. Edite seu conteúdo
  5. 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. :blush:

20 curtidas

Este é um componente muito bom! Muito útil.

3 curtidas

Isso também suporta fotos/vídeos?

Sim, ele suporta imagens e vídeos.

Aqui está uma demonstração rápida [LINK DA DEMOSTRAÇÃO]

Screen-20251114144915@2x
Screen-20251114144924@2x

1 curtida

Muito doce mesmo. Ótimo trabalho!