Advice or feature suggestions for a real-time progress bar theme component

AI-generated summary

Canapin is seeking feedback and suggestions for a real-time progress bar theme component, initially designed for tracking donations via Ko-fi. The component currently allows customization of width, height, and content placement, with values updated via CSS. agemo and barto_95 express interest, asking about installation and functionality, such as placement in posts and support for multiple progress bars. Canapin clarifies the component is limited to specific locations and doesn’t support multiple bars, and notes the real-time update may no longer function. They encourage others to fork or improve the component if desired, as they may not continue development. Moin provides a link to Discourse’s theme installation guide. agemo appreciates the idea, seeing potential for broader applications like fundraising categories.

Hi everyone!

I’m working on a progress bar theme component prototype.

The initial purpose was to have a donations progress bar for users to see on my forum since the servers’ fees are paid by our users, via my ko-fi.com account.

Each time a ko-fi donation is made, ko-fi sends a request to a PHP script I made, which triggers a request to Discourse to update the current amount setting.

The PHP script part isn’t directly related to the component, and I’d like a component that could be used for many other purposes.

I don’t have the knowledge to create an elaborate component, but I think it could interest some other people here, so if you think of interesting features, or know code better than me and think could be made better and more efficient, feel free to participate :slight_smile:

Here’s what it currently looks like:

The repo: GitHub - Canapin/discourse-progress-bar: Adds a progress bar to Discourse · GitHub

What we can do:

  • Adds HTML on top or below the progress bar

  • Change the component width and progress bar height

  • The progress bar as well as the numbers are set via CSS.
    Numbers use a content CSS property because I didn’t know how to update them in real time otherwise.

What I’d like to add:

  • Automatically disable or hide the component when the amount is reached

  • Descriptions for each setting

  • I feel the code isn’t “Discourse coding style”. It doesn’t use anything from Discourse. I don’t mean it should, but maybe it could be a cleaner way to do it as well as benefit from Discourse’s existing methods for some current or future features.


If you’re interested in such a component, please feel free to share whatever you have to say about it :slight_smile:

How to use and install your component ?

This is a great idea and a feature that could work really well in multiple applications.

My questions are:

  • Can the progress- bar be placed in a post and other locations?
  • Can multiple progress-bars be placed at once for multi fund raising activities?

Essentially what you seem to be potentially creating here is an in-house go fund me capability for any discourse installation.

In theory it could be open to other users too. Say if a discourse instance wanted to run a “fund me/my project” type category.

No.

No.

I probably won’t work much on this theme component, perhaps just trying to have it working each year when I enable donations, which is why I didn’t create a Customization > Theme component topic about it.

Plus, I think the real-time update of the progress bar doesn’t work anymore. I didn’t try, but:

If enough (or knowledgeable) people find a progress bar useful, I encourage them to create a fork or a whole new component with new features.

Thanks for the quick reply. I had a few use cases for this if it was closer to be ready for prime time. It would be a cool feature to have.