Hashtags are getting a #makeover

Announcements
,
1

Discourse has supported linking to categories (announcements) and tags (release-notes) for a long time using hashtags (#). With the introduction of Discourse Chat we wanted to be able to link to chat channels with hashtags, which required some overhauling of how the system works to allow for channels to be suggested with autocomplete and also to cook in posts and chat messages. We also decided to take the time to overhaul the design of the autocomplete menu and cooked hashtags.

A summary of the changes included with this overhaul:

  • The ability to search for chat channels if you have chat enabled
  • Hashtag search results prioritise exact matches based on the slug, and depending on whether you are using them in a post or a chat message, we prioritise different types of results (e.g. categories are at the top in a post, but channels are at the top in chat)
  • A distinct icon is shown for each result
  • A new style for cooked hashtags which include the distinct icon

The new autocomplete results:

image

The new cooked style for hashtag autocompletion, which closely matches the @mention style.

image
image1567Ɨ376 51.4 KB

You can opt-in to using this new version of hashtag autocompletion and cooking by enabling the enable_experimental_hashtag_autocomplete site setting on your Discourse site:

image
image1493Ɨ163 18.7 KB

We expect to make this the default in the new year, meanwhile this is still considered an experimental feature, so there are still a few things to fix and refine.

This feature is now enabled on Discourse Meta as well :sparkles:

42 Likes
2

An example of these new hashtags on Meta. Why not check out announcements ? Or read over some release-notes !

12 Likes
3

23 posts were split to a new topic: Add colour and subcategory styling to category and chat mentions

5

Hereā€™s a quick example of what it looks like to link to a chat channel from a post: #general::channel

And hereā€™s a quick example of what it looks like to link to a chat channel from another chat channel:

7 Likes
21

A post was split to a new topic: Change existing hashtags to the new design

22

An update here ā€“ weā€™ve now made this the default for all sites, after making some changes around how the hashtags are cooked. We now also show colours for the icons including the original subcategory styling :rainbow: :

support feature general blog

Soon the old code referencing the previous hashtag system will be deleted as well.

16 Likes
23

This looks very good. But how does it work for visually-impaired people? I guess

accessibility General general developers

might be missing aria labelsā€¦ Here is the matching preview HTML.

<p dir="ltr">
<a class="hashtag-cooked" href="/tag/accessibility" data-type="tag" data-id="109" data-slug="accessibility" tabindex="-1">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-109 svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#tag"></use></svg>
  <span>accessibility</span>
</a> 
<a class="hashtag-cooked" href="/c/general/124" data-type="category" data-id="124" data-slug="general" tabindex="-1">
  <span class="hashtag-category-badge hashtag-color--category-124"></span>  
  <span>General</span></a> 
<a class="hashtag-cooked" href="/chat/c/general/508" data-type="channel" data-id="508" data-slug="general" tabindex="-1">
  <svg class="fa d-icon d-icon-comment svg-icon hashtag-missing svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#comment"></use></svg>
  <span>general</span></a> 
<a class="hashtag-cooked" href="/c/documentation/devs/56" data-type="category" data-id="56" data-slug="devs" tabindex="-1">
  <span class="hashtag-category-badge hashtag-color--category-56"></span>
  <span>developers</span>
</a>
</p>
7 Likes
24

Thanks for noting this, this is a great point. At the very least some aria-labels on each hashtag are in order. I will try to get a commit for this this week.

7 Likes
28

Old topics wonā€™t use the new format for tags and categories until the HTML is rebuild. Is there a way to safely rebuild all topics to make the UI consistent? Maybe with rake?

Something like this? Didnā€™t test it!

./launcher enter app
rake posts:rebake
2 Likes
29

I think this one is more targeted:

Not sure about the bundle exec bit though. I donā€™t know if thatā€™s needed for a live site?

5 Likes
30

Without bundle exec, seems to work on a production site :slight_smile:

root@Canapin-app:/var/www/discourse# rake hashtags:mark_old_format_for_rebake
Finding posts matching old format, this could take some time...
[!] You are about to mark 0 posts containing hashtags in the old format to rebake. [CTRL+c] to cancel, [ENTER] to continue

Done, rebakes will happen when periodical updates job runs.
6 Likes