Componente de encabezados de categorías de Discourse

Aquí está el PR para admitir logotipos de categorías en modo oscuro:

Esto también me molestó un poco. Un poco de CSS personalizado hace el truco:

// Deja que el enlace Leer más de los encabezados de categoría use el mismo color que el texto del resumen

.category-about-url a {
  color: inherit;

}
2 Me gusta

Mi deseo restante para el enlace “leer más”: mostrarlo solo si realmente existe más contenido. Tengo algunas páginas de categoría “Acerca de” largas y otras cortas, y preferiría no ofrecer un enlace a contenido adicional inexistente.

(No tengo idea de si esto es factible. Podría ser mucho pedirle a un TC).

1 me gusta

Cuando se muestra la descripción completa de la categoría, también me encuentro con esto en Theme Creator y en mi instancia de desarrollo. Lo estoy investigando. Sospecho que se debe a que la ruta cambia pero la variable rastreada no lo hace.

ACTUALIZACIÓN: He agregado una funcionalidad de expandir/contraer para las descripciones de categorías aquí. @nathank También corregí el error en:

Con un pequeño empujón de Ask Discourse por usar willDestroy con el servicio de enrutador.

2 Me gusta

¡Vaya, Nate! :open_mouth: 55 commits y una PR en una sola tarde… increíble.
¡Estaré atento a la fusión y espero probarlo!

1 me gusta

Una mañana tardía para mí, en realidad :wink:. Veré si es posible tu sugerencia sobre comprobar si la descripción tiene más texto. Yo también sentí que la necesitaba durante mis pruebas.

2 Me gusta

¡Esta es una adición fantástica! :heart:

Solo un pequeño punto de retroalimentación: Podría tener sentido añadir un icono de chevron en la esquina superior derecha o en el borde derecho del encabezado de la categoría para indicar la funcionalidad de expandir/contraer a los usuarios. Pero es un buen comienzo, y por ahora usar un emoji en el texto del enlace


como indicador cumple su función:

2 Me gusta

PR se ha fusionado :git_merged: !

Entendido :+1: . Le echaré un vistazo.

3 Me gusta

Nate, la funcionalidad de leer más/menos es excelente, ¡gracias!

Si hay alguna manera de condicionar ese enlace a que exista más texto, sería genial, pero también podría simplemente escribir descripciones más largas :laughing:

Veo un par de problemas que quizás no hayas tenido la oportunidad de detectar:

  • Los enlaces de categoría y etiqueta no están renderizando sus iconos SVG
  • La imagen de la categoría no aparece, así que estoy obteniendo el icono predeterminado del sitio
(captura de pantalla)

Una pequeña cosa que he logrado solucionar: los enlaces en el texto “Acerca de” no heredaban el color del texto, como el enlace leer más mencionado anteriormente. Este CSS estiliza los enlaces de texto sin afectar los enlaces de categoría y etiqueta:

// estilo de enlace de texto, para excluir enlaces de categoría y etiqueta
.category-title-header .category-title-description 
a:not([data-type="tag"], [data-type="category"]) {
  color: inherit;
  text-decoration: underline;
}
(capturas de pantalla)

image
image

Estoy realmente impresionado con las actualizaciones, y espero que mis problemas con SVG e iconos sean solo una solución simple.

Interesante. ¿Sabes si esto estaba ahí antes?

Le echaré un vistazo. Yo también me encontré con esto. Intenta deshabilitar la configuración mostrar logo del sitio mientras tanto, eso parece solucionarlo.

Gracias. ¿Era este el caso anteriormente y ocurrió algún cambio?

Intenta desactivar la configuración show site logo mientras tanto, eso parece solucionarlo.

Eso funciona, ¡gracias! Debería haber experimentado con más configuraciones.

En cuanto a los iconos de enlace SVG y los colores de los enlaces de texto, no puedo decir qué podrían haber hecho antes; nunca tuve enlaces en el resumen corto del texto “Acerca de”, pero ahora hay algunos en la sección expandida “leer más”.

(Compartí ese CSS de color de enlace por si fuera útil para ti o para alguien, pero sé que ese tipo de ajuste de estilo no es necesariamente responsabilidad del componente).

1 me gusta

Nate, ¿alguna idea sobre el problema con los iconos SVG de categoría/enlace de marcador de posición?

image image
No sé si hay diferencias en cómo deben codificarse en la cabecera frente al tema, pero lo que se está generando es bastante diferente:

Comparación de enlaces de categoría

Enlace de categoría en la cabecera:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>Wild Speculations</span>
</a>

Enlace de categoría en el tema:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square" aria-label="Wild Speculations">
  <span class="hashtag-category-square hashtag-color--category-5"></span>
  <span>Wild Speculations</span>
</a>

y

Comparación de enlaces de etiqueta

Enlace de etiqueta en la cabecera:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>ai</span>
</a>

Enlace de etiqueta en el tema:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag" aria-label="ai">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-5 svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <use href="#tag"></use>
  </svg>
  <span>ai</span>
</a>

He estado ocupado estos días (lo haré mañana). Sospecho que esto está incluido en la descripción de la categoría. Si usas la descripción completa, ¿sigue ocurriendo?

Aprecio que ofrezcas tu tiempo y esfuerzo, y no quiero molestarte. He investigado para ver si había algo que pudiera resolver yo mismo. (No lo hay. :flushed_face:)

Pero sí, todavía sucede con Mostrar descripción completa de la categoría activada.

1 me gusta

Intentaré ver si hay algo que pueda hacer. El último recurso es usar algo de lógica (que puede ser complicada) para ajustarlos en función de los colores (que pueden no tener en cuenta los iconos). Estoy abierto a sugerencias si alguien tiene una forma mejor.

@ToddZ Si miras este ejemplo del componente oficial Category Banners (que creo que usa Meta), también tiene este problema.

¡Ya veo…! Y alguien menciona el problema:

Instalé Category Banners para verificar que los iconos de categoría funcionaran, pero no lo hicieron. Tanto los iconos de categoría como los de etiqueta obtienen el marcador de posición, al igual que con Category Headers. Y es lo mismo independientemente de la salida elegida en la configuración.

Si hay una manera de que se procesen normalmente, sería genial, pero no querría que recurrieras a una solución alternativa compleja.

1 me gusta

Acabo de probar la compatibilidad con el tema Horizon. En general, está funcionando, pero el único problema es que el outlet del plugin que actualmente utiliza el componente temático de los encabezados de categoría está dentro del contenedor list-controls en el tema Horizon. Por lo tanto, todo el encabezado de la categoría permanece fijo.

La solución sugerida es cambiar el outlet del plugin o agregar una opción para elegir un outlet de plugin diferente fuera del contenedor list-controls, por ejemplo, el outlet discovery-list-controls-above.

Puedo crear un PR si lo deseas @NateDhaliwal

1 me gusta

Interesante. ¡Gracias por mencionarlo! Lo investigaré.

1 me gusta