Componente de publicaciones con formato Wikificada

Simple Description

This theme component enables you to make Wiki posts (and Shared Edits posts) more obvious.

Wikis and Shared Edits are a powerful feature of Discourse, but many users are unfamiliar with the concept and find the UI just a bit too subtle. This component makes it crystal clear, packaging the content from Change the style of a wiki post.

Screenshots

Detailed Description

Installing this component enables you to control the background colour of Wiki posts, and to add some text to the history/edit icon in the top right of the post.

It is a fork of discourse-wikified-post-background-color by @pacharanero, incorporates stuff from Change the style of a wiki post and re-used code from Personal Message Bubbles by @Rhidian.

Settings

Wiki post background color

The background colour of Wiki posts can be set to whatever you like. It defaults to ‘highlight’, but you can use any of these options:

  1. It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.
  2. A named color recognised in CSS (e.g. blue, red, yellow, black, etc)
  3. An HTML color code (e.g. #effbfb, etc)

Shared edits background color

You can choose one of the same color options for Shared Edits posts (see the Shared Edits Plugin)

Wiki added text

This adds the little bit of green text (defaulting to Wiki Post) in the top right corner of the post:

image

This is dynamic, and changes colour along with the history icon if there has been a recent edit (this is an unintended happy thing):

image

If you don’t want any text there, then delete the text in the setting and save it.

Shared edits added text

The text displayed when it is a Shared Edits post. This is in the Danger color from your palate.

image

Roadmap

  1. Auto tag Topics with ‘wiki’

Please make suggestions as replies to this post.

Install this theme component

25 Me gusta

Lovely stuff @nathank
I’m going to archive the old wikified post background color repo, in favour of this your new version, which adds much more.

4 Me gusta

¿Alguien más está recibiendo este error?

Error: Variable indefinida: "$Shared-edits-hide". en la línea 42 de common.scss >> @if ($Shared_edits_hide == "Yes"){ -----^

No puedo reproducir eso y no veo ningún problema obvio en el código. ¿Puedes darnos más información?

1 me gusta

Es porque tenía Shared edits hide configurado en No. El error apareció en la configuración de TC. El error desapareció después de configurarlo en Yes.

No lo entiendo ni con No ni con Yes en la última versión Beta de Discourse. ¿Estás en una versión antigua de Discourse? No he puesto ningún control de versiones en él, lo siento.

1 me gusta

Lo siento, mi error, estaba un poco desactualizado, sí. Olvidé probar de nuevo después de la actualización reciente hasta que lo mencionaste. Gracias. :slight_smile:

1 me gusta

Acabo de actualizar el componente para adaptarlo mejor a las publicaciones de Ediciones Compartidas.

Esto incluye adaptarlo a los cambios de Ediciones Compartidas aquí:

2 Me gusta

Se ha realizado un pequeño ajuste en los colores de fondo predeterminados, ya que no podía ver fácilmente las @menciones.

Además, el color de fondo de las ediciones compartidas ahora es tertiary-very-low por defecto.

1 me gusta

Un excelente componente. Pero solo mejora la visibilidad en la página del tema. ¿Es posible modificarlo para que el icono de wiki se muestre en la página de categoría, la lista de temas “recientes”, “no leídos”, etc.?

Buena sugerencia, y estoy seguro de que es posible (¡se aceptan PR!).

Lo abordo simplemente etiquetando las publicaciones con #wiki en mis instancias. Por supuesto, es semiautomático: puedes identificar las publicaciones/temas de wiki mediante una búsqueda avanzada. Tiene la ventaja adicional de hacerlos fácilmente descubribles a través de la navegación de la barra lateral.

Pensé que sería bueno tener el etiquetado automático de las publicaciones de wiki como parte de este componente de alguna manera (o hacer lo que sugieres), pero no me ha causado suficiente molestia como para dedicarle tiempo, me temo.

2 Me gusta

Pregunté esto en 2021 aquí: Add an icon in front of wikis in the topic list?

La respuesta fue:

La solicitud de Feature

1 me gusta

Busco asesoramiento sobre cómo adaptar los colores de fondo al modo oscuro (automático).

Actualmente, los colores claros y brillantes que he elegido para los fondos hacen que las publicaciones sean ilegibles en el modo oscuro.

¿Sería posible ampliar la paleta de colores y realizar algunos cálculos de color para definir los colores de fondo de wikis y pads?

Podrías usar etiquetas para marcar temas de “wiki”.
Las etiquetas se pueden estilizar con CSS, si mal no recuerdo.
Obtendrías el beneficio adicional de una opción de listado / desglose para ellas.

Además, se podría añadir una etiqueta wiki a los temas que incluyan wikis automáticamente con un plugin.

Esta es la razón por la que recomiendo un color de esquema:

Si desea salirse de lo común con sus colores, deberá encontrar una forma inteligente de lidiar con el modo oscuro.

Una buena característica sería permitir también la especificación de un color para el modo oscuro. Le echaré un vistazo cuando tenga algo de tiempo libre.

1 me gusta

Claro. Pero estos colores son demasiado dominantes para un fondo.
Por lo tanto, soñaba con algo como un 10% de color de esquema mezclado con un 90% de fondo. Supongo que SASS (o algo similar) no está disponible en el frontend.
Pero ¿funcionaría alguna magia de CSS como esta?

Actualización: rgba(0, 255, 0, 0.1) funciona bastante bien en modos oscuro y claro.

Las funciones SASS están disponibles en la sección de personalización del tema, se compila cuando guardas tus modificaciones. Sin embargo, no puedes usar funciones SASS en variables de tema o CSS.
Si quieres usar una función SASS en un color de tu esquema de colores, debes usar la variable SASS correspondiente.

Funcionará :white_check_mark:

body {
    background: darken($secondary, 10%);
}

No funcionará :x:

body {
    background: darken($my_theme_variable, 10%);
}

No funcionará :x:

body {
    background: darken(var(--secondary), 10%);
}

Y en el papel, creo que lo que describe tu enlace debería funcionar. :slight_smile:

3 Me gusta

Quizás valga la pena intentarlo. Aquí tienes una guía (para mi propia referencia) sobre el uso de la función SASS mix():