Icono de enlaces externos

Personalización Componente temático
1
:information_source: Resumen Añade un icono a los enlaces externos en temas y publicaciones
:hammer_and_wrench: Repositorio GitHub - denvergeeks/discourse-external-links-icon · GitHub
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas en Discourse

Instala este componente de tema

Utiliza el SVG predeterminado (el mismo icono que los enlaces destacados en el núcleo) como este enlace external-link-alt-solid-trans-919191-14x18

Funciona perfectamente tanto con temas claros como oscuros, es decir…

light-sample

dark-sample

Esto simplemente añade el icono. Para una solución completa, prueba External Link Shield – Exit Confirmation & Trust Gating

POR HACER: Configuraciones para…

  • Posición
  • Color
  • Icono
  • ??
4 Me gusta
2

Veo esto en modo oscuro:

image
image1179×441 34.2 KB

¿Probablemente no sea el aspecto previsto?

3

El componente funciona bien con diferentes paletas

Screenshot_20251227_111928_Firefox
Screenshot_20251227_111928_Firefox1997×594 134 KB

Pero una captura de pantalla no ajusta su color a la paleta de colores. ¿Qué sugerirías para presentar la característica en un foro donde el componente no está instalado? ¿Una captura de pantalla más grande que incluya el enlace?
Estaba a punto de sugerir usar el componente de icono de Discourse, pero no puedo cambiar el color del icono:

example.com

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

4

[quote=“Moin, post:3, topic:392222”]¿Una captura de pantalla más grande que incluya el enlace?

[/quote]

Sí, ¿creo? Esa sería una mejor representación de lo que se puede esperar.

5

Cambié la imagen en la descripción/ejemplo a un .webp transparente con un relleno gris.

1 me gusta
6

¡Genial, se ve mucho mejor!

1 me gusta
7

Hola, no me funciona, el icono aparece en todos los enlaces, incluso los internos.

Otra cosa, para los títulos que tienen un enlace externo directo como un vídeo de YouTube, el icono aparece dos veces:

image
image548×148 12.5 KB

4 Me gusta
8

Lo mismo aquí. El icono también aparece en los enlaces internos.

Si entendí el código correctamente, busca “http*” en la URL para determinar los enlaces externos. Desafortunadamente, la herramienta de enlaces en el editor utiliza automáticamente URLs completamente cualificadas (absolutas) que comienzan con “https://<MiDominio>/..”.

Supongo que esto provoca los iconos externos en los enlaces “internos”.

¿Se podría ampliar el código para comprobar si hay “https://<MiDominio>/..” clasificándolos como internos?

1 me gusta
9

He enviado un PR para solucionar estos problemas.

Esto ocultará el ícono de enlace para enlaces internos, relativos o absolutos, y también los ocultará en los enlaces de título.

5 Me gusta
10

Gracias @Lilly, he fusionado esto.

3 Me gusta
11

Hice algo similar con CSS puro hace mucho tiempo cuando Discourse usaba Font Awesome en font-family.

Ya no es posible, pero se puede lograr un efecto similar con esto:

.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

Aunque el SVG está codificado.

12

Hola, soy yo de nuevo, lo siento :grinning_face_with_smiling_eyes:

Los iconos externos aparecen en el TC de Custom Header Links (icons), no deberían. Gracias.

image

13

Hola :waving_hand:

Aquí tienes un ejemplo de cómo lo uso en mi componente de tema.

En mi caso, utilizo configuraciones para esto porque el componente cambia los iconos dinámicamente a través de CSS, lo que me permite apuntar directamente a esas configuraciones. (Añadir una clase a los enlaces no siempre funciona muy bien en algunos casos).

Sin embargo, para tu componente, puedes simplemente excluir el nombre de host actual dinámicamente algo como esto, creo:

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 }
  );
});
1 me gusta
14

Agradezco los comentarios. ¡Esto debería estar solucionado ahora!

2 Me gusta
15

Por alguna razón, al pasar el cursor sobre los enlaces, los iconos externos desaparecen. Lo probé con el inspector y el ::after desaparece.

16

Probablemente se está sobrescribiendo con otro fragmento de código CSS. En mi instancia de pruebas, el icono externo no desaparece al pasar el cursor.

1 me gusta