 |
Resumo | Suporte da Comunidade - doação configurável |
 |
Pré-visualização | Theme Creator |
 |
Repositório | GitHub - VaperinaDEV/community-support: Community Support - configurable donation · GitHub |
 |
Achou útil? | ./support --coffee |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse |
Instalar este componente de tema
Olá 
O objetivo foi torná-lo flexível o suficiente para se adequar a designs e casos de uso de comunidade muito diferentes, mantendo a configuração inteiramente dentro das Configurações do Tema.
Recursos
Modal de doação / suporte
O componente pode exibir opcionalmente um modal de suporte automaticamente.
O modal automático suporta:
- atraso de abertura configurável
- visibilidade baseada em URL/caminho
- visibilidade para membros/anônimos
- nível de confiança mínimo
- grupos excluídos
- tempo de vida do cookie de dispensa configurável
- três tamanhos de modal:
normal,large,maximized
O modal também pode ser aberto manualmente de qualquer lugar usando:
#donate
Isso é intencionalmente independente das regras de visibilidade automática, para que uma comunidade possa compartilhar um link #donate ou adicioná-lo à barra lateral, enquanto ainda controla onde os prompts de suporte automáticos aparecem.
Métodos de doação / suporte
Múltiplos métodos de suporte podem ser configurados usando o editor de configurações de objetos do Discourse.
Cada método pode ter:
- nome
- descrição
- provedor
- proprietário
- ícone
- URL
- texto do botão
- valor copiável
- estado em destaque
- traduções
Isso é agnóstico em relação ao provedor, portanto, o componente não requer um provedor de pagamento específico.
Por exemplo, um método pode simplesmente apontar para uma página de pagamento/suporte existente do PayPal, Revolut, Wise ou outro serviço.
Localização por método
Os métodos de doação suportam suas próprias traduções.
O seletor de idioma inclui os idiomas disponíveis no Discourse, e cada método pode ter traduzido:
- nome
- descrição
- texto do botão
- rótulo de cópia
- proprietário
- provedor
Se um idioma exato não estiver disponível, o componente faz o fallback para o idioma base e, em seguida, para o inglês/outra tradução disponível.
Meta de suporte e barra de progresso
O componente inclui uma meta de suporte opcional e uma barra de progresso.
Você pode configurar:
- valor atual
- valor alvo
- moeda
- rótulo de suporte
- período de suporte
- exibição de progresso
- onde a barra de suporte aparece
Períodos suportados:
- único (one-time)
- mensal
- anual
A barra de progresso também lida com suporte acima da meta.
Em vez de simplesmente parar em 100%, o percentual real continua sendo exibido:
75% → progresso normal
100% → meta atingida
125% → 25% no próximo ciclo de meta
220% → 20% no terceiro ciclo de meta
A barra de progresso visual permanece como uma única barra compacta.
Antes da primeira meta:
background: tertiary-low
fill: tertiary
Exatamente em 100%, 200%, 300%, etc.:
background: success
fill: success
Entre marcos:
background: success-low
fill: success
Isso significa que uma comunidade pode continuar mostrando progresso significativo mesmo quando excede significativamente sua meta original.
Avatares de apoiadores
A barra de suporte pode exibir opcionalmente avatares de apoiadores.
Os apoiadores são atualmente configurados manualmente através da configuração de objeto supporters.
Cada apoiador pode ter:
- nome de usuário
- valor da contribuição
- moeda
O nome de usuário é resolvido em relação ao perfil do usuário, para que as informações de perfil/avatare do usuário possam ser exibidas automaticamente.
O número de avatares exibidos diretamente na barra de suporte é configurável.
Por exemplo:
◉ ◉ ◉ ◉ ◉ +8
Se houver mais apoiadores do que a contagem de avatares visíveis configurada, os apoiadores restantes estão acessíveis através de um DMenu.
O menu de apoiadores pode exibir:
- avatar
- nome de usuário
- link do perfil
- valor da contribuição
- moeda
Os valores de contribuição podem ser ativados ou desativados independentemente.
Os apoiadores também podem ser populados a partir de um ou mais grupos usando a configuração supporter_groups. Isso complementa a lista de apoiadores configurada manualmente, em vez de substituí-la.
Múltiplos designs
O componente inclui três designs visuais independentes:
- Clássico: apresentação equilibrada estilo comunidade
- Minimalista: menos elementos visuais e apresentação compacta
- Moderno: hierarquia mais forte e cartões mais proeminentes
O design é independente da visualização selecionada, para que os dois possam ser combinados livremente.
Múltiplas visualizações
O componente suporta vários modos de apresentação:
- Completa: conteúdo de suporte completo com hero, método em destaque e métodos de doação
- Compacta: apresentação reduzida para colocações menores
- Minimalista: apresentação focada no método
- Progresso: apenas meta de suporte e progresso
Isso permite que o mesmo componente seja usado em locais muito diferentes sem duplicar configuração ou estilo.
Incorporações em posts
O conteúdo de suporte pode ser incorporado diretamente em posts.
Ative enable_post_embed e, em seguida, use:
[wrap=donate]
[/wrap]
Visualizações adicionais estão disponíveis diretamente através do wrapper:
[wrap=donate-compact]
[/wrap]
[wrap=donate-minimal]
[/wrap]
[wrap=donate-progress]
[/wrap]
O wrapper controla a visualização, enquanto a configuração global design controla o design visual.
Isso é útil quando o conteúdo de suporte precisa fazer parte do contexto de um post específico, em vez de aparecer como um elemento de interface global.
Suporte a plugin outlets
O componente pode renderizar o widget de suporte através de plugin outlets.
Ative outlet_enabled e especifique os nomes de outlet desejados em outlet_locations, separados por |.
A visualização e o design do outlet podem ser configurados independentemente:
outlet_viewoutlet_design
Isso torna possível usar o componente de suporte em locais como listas de tópicos, cabeçalhos, rodapés e outros outlets suportados.
Compatibilidade com Discourse Ads
O componente também pode ser usado com o plugin Discourse Ads.
Em vez de depender diretamente do plugin Ads, o Community Support fornece um marcador de incorporação HTML estável:
<div data-donation-widget="support"></div>
Isso pode ser copiado para um anúncio HTML e colocado no outlet de Ads desejado.
O componente possui o markup e o CSS, portanto, não há necessidade de duplicar o estilo de doação dentro do próprio anúncio.
A visualização e o design podem ser sobrescritos opcionalmente:
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>
Isso significa que o mesmo sistema de suporte pode ser reutilizado em diferentes colocações de Ads mantendo um design consistente.
Incorporações HTML genéricas
O mesmo mecanismo de incorporação também pode ser usado em outras colocações compatíveis com HTML:
<div data-donation-widget="support"></div>
O marcador HTML permanece intencionalmente simples, enquanto o Componente de Tema lida com a renderização real.
Isso torna possível alterar o design ou a implementação do componente sem ter que reescrever cada incorporação individual.
Controles de visibilidade
O conteúdo de suporte automático e renderizado globalmente pode ser controlado através de várias configurações:
- Mostrar para membros
- Mostrar para usuários anônimos
- Nível de confiança mínimo
- Grupos excluídos
- Exibir na página inicial
- Correspondência de URL/caminho
Os grupos excluídos são aplicados ao conteúdo de suporte renderizado automaticamente, como o modal, widgets de plugin outlet e incorporações genéricas.
O conteúdo contextual permanece disponível:
#donate[wrap=donate]
Isso torna possível excluir certos usuários da interface de suporte promocional/automática sem impedi-los de acessar um link de suporte explicitamente compartilhado ou um bloco de suporte contextual.
Controle de dispensa / cookie
Quando o modal aberto automaticamente é dispensado, o componente pode lembrar essa decisão.
O tempo de vida do cookie pode ser configurado como:
- nenhum
- minuto
- dia
- semana
- mês
- ano
Isso impede que o modal automático apareça repetidamente para o mesmo visitante de acordo com o tempo de vida selecionado.
Exemplos básicos
Abrir o modal de suporte
#donate
Incorporar conteúdo de suporte em um post
[wrap=donate]
[/wrap]
Versão compacta do post
[wrap=donate-compact]
[/wrap]
Incorporação HTML genérica
<div data-donation-widget="support"></div>
Incorporação com apresentação personalizada
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>