Remove Dashes from Tag Names

Customization Theme component
, ,

AI-generated summary

The official Discourse theme component “Remove Dashes from Tag Names” aims to visually replace dashes with spaces in tag displays across the Topic List and Topic pages, addressing the default behavior where spaces are converted to dashes. Discourse introduced the component, providing links for support, bug reports, UX feedback, and feature requests. While the component successfully removes dashes in the sidebar, users have reported limitations. thaidb and thaidb noted that the component fails to remove dashes in the page title and other areas, which impacts SEO and user experience. MarkoK highlighted a conflict where enabling this component inadvertently removes tag icons, clashing with the “Tag Icons” component. As a temporary workaround, eisammy shared a custom JavaScript snippet that recursively replaces dashes with spaces in text nodes for tags in the sidebar and box elements. jordanjay29 suggested that this script could be optimized and submitted as a Pull Request to update the official component for better interoperability and to cover the missing positions.

1
:discourse2: Summary Remove dashes (-) from tag names in the Topic List and on the Topic page
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository https://github.com/discourse/discourse-remove-dashes-from-tag-names
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

This theme component removes dashes from tag names wherever they’re displayed in the UI.

example of tags with dash visually removed
example of tags with dash visually removed1584×546 23.6 KB

As Discourse replaces spaces in tag names with dashes, this theme component is useful for visually changing back dash → space in the display.


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-22T12:55:26Z

Check documentPerform check on document:
14 Likes
How to remove Hyphen from tags?
Tag Style Tool
Get Error Oops The software powering this discussion forum encountered an unexpected problem after upgrade
Customizing your site with existing theme components
Tag Icons
9

7 posts were split to a new topic: Dashes not removed from sidebar tags

Dashes not removed from title tags
18

This image displays a computer screen with an error message in Vietnamese, indicating a download failure for a file named "Tin dang Ban Ha Quan Gia". (Captioned by AI)
This image displays a computer screen with an error message in Vietnamese, indicating a download failure for a file named "Tin dang Ban Ha Quan Gia". (Captioned by AI)1080×788 202 KB

Thank for your component,
Remove Dash from Tags side bar is OK, How about title Tag?
%{filter} %{tag} %{category}

19

Thank you for this. I could never understand the dashes there :smiley:

20

The image shows a computer screen displaying a webpage titled "Mới nhất Bản - Nghệ chủ đẹ - Nhàsag" with its address and memory usage, as seen on a web browser interface. (Captioned by AI)
The image shows a computer screen displaying a webpage titled "Mới nhất Bản - Nghệ chủ đẹ - Nhàsag" with its address and memory usage, as seen on a web browser interface. (Captioned by AI)1080×501 67.7 KB

The image shows a white building on a street corner with the caption "Bán nha Phường Bến Nghé" circled and highlighted in red, indicating its location in Phường Bến Nghé, Lê Thánh Tôn, HCMC. (Captioned by AI)
The image shows a white building on a street corner with the caption "Bán nha Phường Bến Nghé" circled and highlighted in red, indicating its location in Phường Bến Nghé, Lê Thánh Tôn, HCMC. (Captioned by AI)1464×720 89.9 KB

The current theme component still misses many positions where the hyphen of the Tag Name cannot be removed, especially the website title to be friendly to Google. Can you update it?

1 Like
21

When enabling this theme component it also removes Tag icons from tags. So a bit conflict with this component: Tag Icons

Also as said before it misses removing those pesky dashes in few places.

1 Like
22

This script replace this component for awhile

function replaceTextNodes(node) {
    node.childNodes.forEach(child => {
      if (child.nodeType === Node.TEXT_NODE) {
        child.textContent = child.textContent
          .replace(/-E-/gi, ' & ')
          .replace(/-/g, ' ');
      } else {
        replaceTextNodes(child);
      }
    });
  }

  api.onPageChange(() => {

    document.querySelectorAll('.discourse-tag.box').forEach(tag => {
      replaceTextNodes(tag);
    });
    
    document.querySelectorAll('#sidebar-section-content-tags .sidebar-section-link-content-text').forEach(tag => {
      replaceTextNodes(tag);
    });
  });
1 Like
23

Wanted to come and make a note of this as well, with a request to bring this component up to date for interoperability. Sammy’s script works well enough that it could be PRed and optimized for inclusion.