Fireworks Component 🎆

Customization Theme component

AI-generated summary

The discussion revolves around the “Fireworks Component” for Discourse forums, initially introduced by meghna to celebrate New Year’s Eve with animated fireworks. The component, inspired by Eddie’s Pure CSS Fireworks, is available via GitHub and a theme creator preview. Users like Zup suggest triggering fireworks on badge achievements, while Jagster notes it doesn’t work on iPhone. Arkshine offers a fork with mobile support and customizable settings (particle count, size, etc.), which Roi initially struggles to install but later confirms works well after following Arkshine’s instructions. Aaron_Walsh praises the mobile implementation. Kartoon suggests adjusting frequency for less obtrusiveness. Jagster urges merging the fork or updating the original post. meghna submits and merges a PR on Arkshine’s behalf to add mobile support. Later, NateDhaliwal contributes a PR to integrate tsParticles’ fireworks, which meghna merges. Finally, Roi reports a deprecation warning about inline JS, prompting Lilly to submit a PR refactoring the code to comply with Discourse standards. The component continues evolving with community contributions for better usability and compatibility.

1

What better way to celebrate the New Year’s eve than fireworks! :fireworks:

Here’s a component that adds fireworks on Discourse forum.

The source code is inspired from Eddie’s Pure CSS Fireworks.

Happy New Year 2021! :tada:
:sunglasses: Preview Preview on theme creator
:link: Github Repo discourse-fireworks
:hammer_and_wrench: Install Guide How to install a theme or theme component
32 Likes
2

would be cool if this triggered for a few seconds every time a badge is earned

14 Likes
4

@Don
if a badge is earned your theme FKB PRO
very usefull

1 Like
5

Doesn’t work on iPhone (at least).

Well, next year then.

6

You can try this fork @Jagster:

URL: https://github.com/Arkshine/discourse-fireworks
branch: mobile-support-and-settings

Click on Advanced button to provide the branch name here:

image
image600×323 7.02 KB

Mobile is supported, and I added a bunch of basic settings (particle count/size, firework width/height, and fall distance) for both desktop and mobile.

I will consider making a proper PR (and eventually other settings) on the original repository later!

6 Likes
7

Hm, I tried but I do not see any fireworks and also no settings.

8

No worries. I should have explained how to install it.

Make sure you click on Advanced and copy/paste the branch name:

image
image600×323 7.02 KB

Note: This will install another Theme component; you might want to disable the old one for now. :+1:

1 Like
9

The implementation of mobile support and settings is absolutely superb. It functions perfectly on my mobile device now, with dimensions that are impeccably suited, without any hint of being overwrought.

10

You did. I did not notice the branch, sorry. Thank you for making this clear. :slight_smile: Looks great now, thank you a lot! An official PR would be great. :slight_smile:

1 Like
11

I think this would be better if you could adjust the frequency somehow it’s (imo) fairly obnoxious but still cool

12

One year after last new year :smirking_face:

Arkshine’s fork works nicely. But yet original one is desktop-only.

Either the PR in needed or the OP could be edited including information of the fork. Both solutions are good.

2 Likes
13

I created the PR on @Arkshine’s behalf and merged it. Updating the component should work for mobile as well.

Thanks again, Arkshine.

5 Likes
14

Thanks @meghna! I have completely forgotten. :smile:

2 Likes
15

@meghna I’ve opened a PR to add an option to use tsParticles’ fireworks:
https://github.com/MeghnaAJ/discourse-fireworks/pull/3

4 Likes
16

Thanks Nate! I’ll take a look. :+1:

2 Likes
17

I’ve merged the PR, thanks for the improvements, Nate! :fireworks:

3 Likes
18

Thanks a bunch!

3 Likes
19

I just activated the Fireworks component and see the following warning:

[Admin-Hinweis] Theme ‘discourse-fireworks’ enthĂ€lt Code, der aktualisiert werden muss. (ID:discourse.script-tag-discourse-plugin) (mehr erfahren)

[THEME 62 ‘discourse-fireworks’] DEPRECATION NOTICE: Adding JS code using is deprecated. Move this code to a dedicated JavaScript file. [deprecation id: discourse.script-tag-discourse-plugin] [info: Modernizing inline script tags for templates & JS API]

Is it possible to get an update? I myself do not understand enough to make a PR. :see_no_evil_monkey:

4 Likes
20

I’ve had a fix and refactor for this for a couple days in my repo, but finally got around to creating a PR to this one. sorry i know it’s already Jan 1st. lol :woman_facepalming:t2:

https://github.com/MeghnaAJ/discourse-fireworks/pull/4

not sure about the acceptance tests though :see_no_evil_monkey:

5 Likes