Remove Dashes from Tag Names

Theme component
, ,
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
9

7 posts were split to a new topic: Dashes not removed from sidebar 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);
    });
  });