Use discourse information and basic calculations in custom css?

Dev
1

Hi all,

I’m trying to find a way to show # of topics in categories on the front page and if theres a way to further sort them based on their tags?

And any idea how to do simple math using the #'s above with javascript?

1 Like
2

You can start from here:

<script type="text/discourse-plugin" version="1.4.0">
    api.modifyClass("component:topic-list", {
      pluginId: "returnTopicList",
      didInsertElement: function() {
        this._super();
        console.log(this.topics);
      }
    });
</script>

This will output the list of the topics as well as their attributes (including tags).
Then I suppose you just need to juggle a bit with the array to achieve what you want.

1 Like
3

Hey @Canapin,

Thanks for the help! I’m quite clueless with how the javascript on Discourse works can you explain what this does/how it works and how to work with it?

I’ve looked for somewhere I can get a feel for how it works, any suggestions as well?

2 Likes
4

For more context, I’m trying to have the number of topics in each category to be pulled from Discourse and used in the table for Discuss1-4. If possible I’d like to also have the sub category of the topic sorted into A-F as well. All in all I just want it to update as and when a topic is moved so I don’t have to do it manually.
Hopefully I described this well and please feel free to ask for clarifications :slight_smile:

(Apologies for the sloppyness of the table)

image
image940×303 2.71 KB

1 Like
5

I don’t understand quite well what you want to achieve. Where do you want this table to be displayed? On a new page or an existing page?
What do A B C D E F mean? What does Discuss 1 to 4 mean? Are they categories?
Do you need the total number of posts from each category?

1 Like
6

Ok, let me try to reword them since I made a little error in calling tags sub categories.

So let’s have Discuss 1-4 = Category 1-4
and A-F will be for tags

So let’s pretend the table is blank. I create a new topic under Category 1 and add an ‘A’ tag. Now the table should show a single topic next to Category 1 and under ‘A’ :
image

In the event that I remove tag ‘A’ and assign tag ‘C’ it will update the table accordingly.

Is there a way to do this?

1 Like
7

Do you want the information, or to display it on egret page for every user? If it’s the former, you might want the data explorer plugin.

2 Likes
8

CSS is too superficial for this purpose. It is a styling language to help with layout and look and feel.

What you want is an end to end solution using Rails to calculate, summarise and serialise your data, Ember JavaScript to receive the data and present it nicely on a route and CSS to style it as required. You could even use the D3 library to make a particularly nice visualisation.

Take a look at my Word Cloud or Network Vis Plugins that do exactly all this. Modify them to suit your requirement.

4 Likes
9

I’d like it to display for every user

1 Like
10

Awesome! I’ll check this out

2 Likes
11

Hey @merefield,

After checking these out and looking at how it works from the generator link, are you sure I’d be able to just get the number of topics under a category with these? Just confirming before I implement this into my discourse

1 Like
12

Obviously you will need to create your own custom calculation, but what I shared was an appropriate skeleton that overrides all the correct parts of the architecture.

What you do with it is up to you …

2 Likes