 |
Resumo | Este componente de tema adiciona proteção configurável para links externos em posts cozidos. Ele aplica regras baseadas no nível de confiança, redirecionamentos opcionais de login e informação, indicadores visuais para domínios confiáveis e um modal de confirmação de saída personalizável. |
 |
Prévia | Theme Creator |
 |
Repositório | \u003chttps://github.com/VaperinaDEV/external-link-shield\u003e |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo nos Temas do Discourse? | Guia para iniciantes sobre como usar Temas do Discourse |
\u003c!-- Preencha "repoName" e "repoURL" para o botão de instalação automática –\u003e
Instalar este componente de tema
Olá 
Gostaria de compartilhar um Componente de Tema que adiciona controle granular sobre links externos em posts cozidos, combinando:
- controle de acesso baseado no nível de confiança
- proteção para usuários anônimos
- um modal de confirmação de saída personalizado
- e indicadores visuais para domínios confiáveis versus desconhecidos
Este componente é projetado para comunidades onde links externos podem carregar implicações legais, de segurança ou de confiança.
Funcionalidades
Regras de nível de confiança configuráveis
Todos os comportamentos baseados em nível de confiança são totalmente configuráveis através das configurações do tema.
Você pode habilitar ou desabilitar independentemente:
- bloqueio de usuários anônimos
- substituição de informação para TL0
- requisito de revelação manual para TL1
- modal de confirmação de saída para níveis de confiança mais altos
Isso permite que o componente se adapte a políticas de comunidade muito diferentes, desde um blindamento de links rigoroso até um atrito mínimo para o usuário.
Links externos cientes do nível de confiança
Links externos se comportam de maneira diferente com base no nível de confiança do visualizador:
- Usuários anônimos
- Links externos são substituídos por um link de login ou uma URL personalizada definida nas configurações.
- TL0
- Links são substituídos por um redirecionamento configurável, por exemplo, um tópico explicando os níveis de confiança ou qualquer outra URL definida nas configurações.
- TL1
- Links exigem revelação manual (clicar para ver), então clicar no link mostra o modal de confirmação de saída.
- TL2+
- Links se comportam normalmente, mas sempre mostram um modal de confirmação de saída.
Modal de confirmação de saída
Antes de sair do fórum, os usuários veem um modal que:
- Afirma claramente que estão deixando a comunidade
- Mostra a URL de destino completa em tags
\u003ccode\u003e - Respeita a preferência
external_links_in_new_tabdo usuário
Isso é especialmente útil para:
- comunidades com alta exigência de conformidade
- mitigação de phishing
- educar usuários menos experientes
Comportamento baseado em domínio via configurações
O componente introduz duas configurações de tema:
internal_domains:
type: list
default: ""
description: "Seus domínios do fórum e CDN (ex: exemplo.com|exemplo-cdn.com). Estes NÃO terão ícone NEM modal."
excluded_domains:
type: list
default: ""
description: "Domínios externos confiáveis (ex: youtube.com|google.com). Estes mostrarão um ícone de CADEADO, mas pularão o modal/blindagem."
- Domínios internos
- Tratados como internos → sem ícone, sem modal
- Domínios excluídos (confiáveis)
- Mostram um ícone de cadeado
- Ignoram o controle de nível de confiança e o modal
- Mostram um ícone de cadeado
- Todos os outros links externos
- Mostram um ícone de link externo
- São controlados e/ou confirmados dependendo do nível de confiança
Indicadores visuais (SCSS)
Ícones são adicionados puramente via CSS:
- Links externos desconhecidos → ícone external-link
- Links externos confiáveis → ícone de cadeado (cor de sucesso)
Isso mantém o DOM limpo e evita a injeção de ícones baseada em JS.
Esta captura de tela mostra como o componente distingue visualmente entre:
- Domínios excluídos: links externos confiáveis (ícone de cadeado, sem confirmação de saída),
- Domínios internos: links internos (sem ícone, sem confirmação de saída),
- links externos desconhecidos (ícone external-link com confirmação de saída).
Casos de uso
Este componente é útil se você deseja:
- Proteger usuários de links externos inseguros ou enganosos
- Educar novos usuários antes de permitir que saiam do fórum
- Aplicar a progressão de confiança da comunidade
- Adicionar avisos legais/de conformidade sem quebrar a UX
