Ícone de links externos

Personalização Componente de tema
1
:information_source: Resumo Adiciona um ícone a links externos em tópicos e posts
:hammer_and_wrench: Repositório GitHub - denvergeeks/discourse-external-links-icon · GitHub
: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

Instale este componente de tema

Usa o SVG padrão (o mesmo ícone dos Links em Destaque no núcleo), como este link external-link-alt-solid-trans-919191-14x18

Funciona bem tanto com temas claros quanto escuros, ou seja…

light-sample

dark-sample

Isso simplesmente adiciona o ícone. Para uma solução completa, tente External Link Shield – Exit Confirmation & Trust Gating

A FAZER: Configurações para…

  • Posição
  • Cor
  • Ícone
  • ??
4 curtidas
2

Estou vendo isto no modo escuro:

image
image1179×441 34.2 KB

Provavelmente não é a aparência pretendida, certo?

3

O componente funciona bem com diferentes paletas

Screenshot_20251227_111928_Firefox
Screenshot_20251227_111928_Firefox1997×594 134 KB

Mas uma captura de tela não ajusta sua cor para a paleta de cores. O que você sugeriria para apresentar o recurso em um fórum onde o componente não está instalado? Uma captura de tela maior que inclua o link?
Eu estava prestes a sugerir o uso do componente de ícone do Discourse, mas não consigo alterar a cor do ícone:

example.com

[example.com [wrap=icon id=up-right-from-square][/wrap]]()

4

[quote=“Moin, post:3, topic:392222”]Uma captura de tela maior que inclua o link?

[/quote]

Sim, eu acho? Isso seria uma representação melhor do que esperar.

5

Eu mudei a imagem na descrição/exemplo para um .webp transparente com um preenchimento cinza.

1 curtida
6

Ótimo, ficou muito melhor!

1 curtida
7

Olá, não funciona para mim, o ícone aparece em todos os links, inclusive nos internos.

Outra coisa, para títulos que têm um link externo direto, como um vídeo do YouTube, o ícone aparece duas vezes:

image
image548×148 12.5 KB

4 curtidas
8

O mesmo aqui. O ícone também aparece em links internos.

Se eu entendi o código corretamente, ele procura por “http*” na URL para determinar links externos. Infelizmente, a ferramenta de link no editor usa automaticamente URLs totalmente qualificadas (absolutas) começando com “https://<MeuDomínio>/..”.

Eu presumo que isso causa os ícones externos em links “internos”.

O código poderia ser expandido para verificar “https://<MeuDomínio>/..” classificando-os como internos?

1 curtida
9

Criei um PR para corrigir esses problemas.

Isso ocultará o ícone de link para links internos, relativos ou absolutos, bem como os ocultará nos links de título.

5 curtidas
10

Obrigado @Lilly, eu mesclei isto.

3 curtidas
11

Eu fiz algo semelhante com CSS puro há muito tempo, quando o Discourse usava o Font Awesome no font-family.

Não é mais possível, mas um efeito semelhante pode ser alcançado com isto:

.cooked {
  a[href^="http"]:not([href*="www.yourdomain.com"]) {
    display: inline-flex;
    align-items: center;

    &::after {
      content: "";
      width: 0.8em;
      height: 0.8em;
      margin-left: 0.2em;
      margin-bottom: 0.4em;
      background-color: currentColor; 
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
      mask-size: contain;
    }
  }
}

image
image438×136 6.52 KB

O SVG está codificado, no entanto.

12

Oi, sou eu de novo, desculpe :grinning_face_with_smiling_eyes:

Os ícones externos aparecem no TC Custom Header Links (icons), eles não deveriam. Obrigado.

image

13

Olá :waving_hand:

Aqui está um exemplo de como eu uso isso no meu componente de tema.

No meu caso, eu uso configurações para isso porque o componente altera ícones dinamicamente via CSS, permitindo-me direcionar essas configurações diretamente. (Adicionar classe aos links nem sempre funciona muito bem em alguns casos.)

No entanto, para o seu componente, você pode simplesmente excluir o nome de host atual dinamicamente, algo como isto, eu acho:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.decorateCookedElement(
    (element) => {
      const currentHost = window.location.hostname;

      const selector = `a[href*='//']:not([href^='/']):not([href*='${currentHost}'])`;
      
      const links = element.querySelectorAll(selector);

      links.forEach((link) => {
        console.log("External link:", link.href);
      });
    },
    { id: "external-link", onlyStream: true }
  );
});
14

Agradeço o feedback. Isso já deve estar corrigido!

2 curtidas