How to find routes or use relative URL that includes dynamic fields

I’m trying to add routes to one of the plugins I’m using (Discourse Tab Bar) and I couldn’t find anything relevant or easy to understand for me by searching the meta.

I’m trying to identify the route name that leads to for example:

domain.com/u/admin/follow/feed

I know that I can use either a predefined route name or a relative URL. Here is the question:

  1. How can i find the list of all the predefined routes? (if there even is such a list)

  2. How can I use a relative URL when the URL contains the username in the URL (or other dynamic text like groups names)? For example for URLs that in the Preferences panel.

This one I know. :slightly_smiling_face: You can swop out /u/username for my to create a generic link.

Eg.

https://meta.discourse.org/u/jammydodger/preferences/account

Becomes

https://meta.discourse.org/my/preferences/account

https://meta.discourse.org/my/preferences/account

1 Like

Thank you @JammyDodger, that helped a lot.

LE: I’m still looking for an answer regarding the routes cause it seems that for the theme I’m using https://meta.discourse.org/t/discourse-tab-bar-for-mobile/ using the relative URL the active button is not changing its color like it’s suppose to.

1 Like

Hello,

I am also using Discourse Tab Bar and Follow plugin. I also added the /my/follow/feed url to Discourse Tab Bar. The tab activation didn’t work on my forum too :grin: Now I made a little css hack to make this work.

I target the current body class which is .user-follow-page this help us to keep the css modification on follow page. With this class we can easily target the relevant Discourse Tab Bar tab.

What we have to do is change the stucked active tab color to the default (non active) and add the active tab color to that tab which has the data-destination /my/follow/feed.

data-destination is the url you set up in the Tab Bar theme component to tabs.

Add this to a new component mobile css section.

body.user-follow-page {
  .d-tab-bar {
    .tab {
      &.active {
        color: var(--primary-medium);
      }
      &[data-destination="/my/follow/feed"] {
        color: var(--tertiary);
      }
    }
  }
}

I believe this is it discourse/app-route-map.js at 9d5da2b383765becb824a8f3ff3665abc8e527fa · discourse/discourse · GitHub

3 Likes

Fantastic reply. :heart: :awthanks:

1 Like