Wikified Posts Component

[nathank (Nathan Kershaw)]

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:

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

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.

Roadmap

1. Auto tag Topics with ‘wiki’

Please make suggestions as replies to this post.

	Repository	GitHub - nathan-nz/discourse-wikified-posts: This allows you to make Wiki posts more obvious.
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

[pacharanero (Marcus Baw)]

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.

[Zup]

Anyone else getting this error?

Error: Undefined variable: "$Shared-edits-hide". on line 42 of common.scss >> @if ($Shared_edits_hide == "Yes"){ -----^

[nathank (Nathan Kershaw)]

I can’t reproduce that, and can’t see any obvious problems in the code. Can you give us any more info?

[Zup]

It’s because I had Shared edits hide set to No. The error appeared in the TC settings. Error is gone after setting it to Yes.

[nathank (Nathan Kershaw)]

@Zup

It’s because I had Shared edits hide set to No .

I don’t get it with it No nor Yes on the latest Discourse Beta. Are you on an old Discourse version? I haven’t put any version control in it at all sorry.

[Zup]

Sorry, my bad - was a bit outdated, yeah. Forgot to test again after recent update until you mentioned it. Thanks.

[nathank (Nathan Kershaw)]

Have just updated the component to better cater for Shared Edits posts.

This includes adapting it for the Shared Edits changes here:

@Johani

I pushed a few changes.
DEV: improve interaction between wiki and shared-edit posts by hnb-ku · Pull Request #31 · discourse/discourse-shared-edits · GitHub

[nathank (Nathan Kershaw)]

Done a minor tweak to the default background colors as I couldn’t see @mentions easily.

Also Shared Edits background color now defaults to tertiary-very-low.

Colour very low

[volanar]

An excellent component. But it improves visibility only on the topic page. Is it possible to modify it so that the wiki icon is displayed on the category page, the list of topics “recent”, “unread”, etc?

[nathank (Nathan Kershaw)]

Good suggestion, and I’m sure it is possible (PR welcome!).

I address that by simply tagging posts with #wiki in my instances. It is of course semi-manual - you can identify the wiki posts / topics by advanced search. It has the added bonus of making them easily discoverable via the sidebar navigation.

I thought that it would be nice to have auto-tagging of wiki posts as part of this component some way (or do as you suggest) but it hasn’t caused me enough pain to put in the time to give this a crack I’m afraid.

[Canapin (Coin-coin le Canapin)]

@volanar

Is it possible to modify it so that the wiki icon is displayed on the category page, the list of topics “recent”, “unread”, etc?

I asked this in 2021 here: Add an icon in front of wikis in the topic list?

The answer was:

@Johani

wiki is a post-level, not a topic-level property. So, It’s not added to the topic list item model. You can use a tag or create a feature request for Discourse to add that class.

The feature request:

Add a specific class for wikis (when first post) at the topic list level

Following the suggestion from @Johani here: To which Johani replied: Unfortunately, wiki is a post-level, not a topic-level property. So, It’s not added to the topic list item model. You can use a tag or create a feature request for Discourse to add that class. I suppose the vast majority of wikis are first posts, but I understand the post level issue. However, having the possibility of emphasizing wikis on the topic list would be a neat addition and may incite people to visit them and m…

[thoka (Thomas Kalka)]

I’m seeking for advice how to adapt the background colors to (automatic) dark mode.

Currently, the light bright colors I have chosen for backgrounds render the posts unreadable in dark mode.

Could it be possible to extend the color palette and do some color calculation to define background colors for wikis and pads?

[thoka (Thomas Kalka)]

You could use tags to mark “wiki”-topics.
Tags can be styled by CSS IIRC.
You would get the additional benefit of a listing / drill down option for them.

In addition, a wiki-tag could be added to topics including wikis automatically with a plugin.

[nathank (Nathan Kershaw)]

This is why I recommend a Scheme colour:

@nathank

It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.

If you want to go off-piste with your colours, you will need to find a clever way to deal with dark mode.

A nice feature would be to enable specification of a dark mode colour too. I’ll take a look at that when I get some spare time.

[thoka (Thomas Kalka)]

@nathank

It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.

Sure. But these colors are too dominant for a background.
Therefore I was dreaming of something like 10% scheme-color mixed with 90% background. I suppose SASS (or something similar) is not available in the frontend.
But would some CSS magic like this work?

Update: rgba(0, 255, 0, 0.1) works quite good in dark and light modes.

[Canapin (Coin-coin le Canapin)]

@thoka

I suppose SASS (or something similar) is not available in the frontend.
But would some CSS magic like this work?

SASS functions are available in the customize theme section, it’s compiled when you save your modifications. Your can’t use SASS functions on theme or CSS variables though.
If you want to use a SASS function on a color from your color scheme, you must use the corresponding SASS variable.

Will work

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

Won’t work

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

Won’t work

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

And on the paper, I think what your link describes should work.

[nathank (Nathan Kershaw)]

@Canapin

SASS functions are available in the customize theme section, it’s compiled when you save your modifications.

Maybe this is worth a shot. Here is a guide (for my own reference) on using the SASS mix() function:

https://subscription.packtpub.com/book/web-development/9781849694544/4/ch04lvl1sec45/the-mix-function