Discourse Birthdays & Anniversaries Today (Banner)

[NateDhaliwal]

	Summary	Adds a banner to the site to show the anniversaries and birthdays today.
	Preview	Theme Creator
	Repository	GitHub - NateDhaliwal/Discourse-Birthdays-Anniversaries-Today
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

The Cakeday plugin must be installed for this theme component to work.

This theme component places a banner at the top of the site on the homepage displaying the birthdays and anniversaries for that day.

The setting banner_location allows you to select where you want the banner to be placed. The available options are:

• above-site-header
• below-site-header
• above-main-containter

The settings banner_text_color an banner_background_color change the banner’s text and background colours respectively. You can input Discourse CSS variables like var(--primary) or var(--tertiary), or Hex values too.

Also, the settings anniversaries_text and birthdays_text allow you to use the placeholder %{count} for the number of users celebrating that event respectively.

Users displayed are not pinged: it uses <a class="mention"> to show the users. The user cards of each user will still be shown if you click on it.

I got this idea when looking at Discourse and wondering, since the Cakeday plugin is installed, why don’t users celebrate other user’s birthdays and anniversaries? We used to do this kind of thing on a forum I was on, and here on Meta too. With this theme component, you can celebrate user’s special days with them, promoting a more inclusive community.

Screenshots:

Desktop:

Mobile:

---

I grab the data from /cakeday/anniversaries/today.json and /cakeday/birthdays/today.json for the display of users.

[NateDhaliwal]

You can now customize the background and text colours of the banner.

@NateDhaliwal

The settings banner_text_color an banner_background_color change the banner’s text and background colours respectively. You can input Discourse CSS variables like var(--primary) or var(--tertiary), or Hex values too.

I may add an @if statement so that using the var() keyword isn’t necessary.

[patrickemin]

Hi thanks for that. Is it possible to display no banner when there is no data instead of a message saying there is nothing to display?

[NateDhaliwal]

No problem, I was thinking of doing that anyway.

[NateDhaliwal]

This will be down for a while, while I fix this. I had to update a few getters to the correct names and debug them. Still working on it.
EDIT: It’s back up now. Let me do some final testing for the new setting.

[NateDhaliwal]

UPDATE: there are some issues with the setting controlling this. I suspect it’s because of the async fetch() I’m using. I’ll take a look again soon.

[NateDhaliwal]

Tagging this as broken for now as I fix this.

[NateDhaliwal]

@patrickemin This is now ready! You can now use the setting hide_unused_data to hide either anniversaries or birthdays that are empty.
Sorry for the delay; I was overseas.

[patrickemin]

Hi, there is a blue empty line above container as I have no data to display:

[NateDhaliwal]

Got it, I’ll work on a fix!

[NateDhaliwal]

I came back to this to fix this. Did a fair revamp of the code to simplify the whole thing. Also, if there are no anniversaries/birthdays on that day, it’s automatically hidden. (I’ve also localised the TC and settings’ descriptions)

2 new settings are introduced: anniversaries_text and birthdays_text. You can use the placeholder %{count} for the number of users celebrating that event.

Please report back if you have any errors or problems faced!

The sheer number of times I wrote ‘anniversaries’ and ‘birthdays’