Add an announcement component

[lhw-1]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

#1960

What is the area that this feature belongs to?

No response

Is your feature request related to a problem? Please describe.

As discussed in #1960, we currently don't have a strong use case for a toast component. However, the issue of being able to display site-wide announcement still exists, which can be resolved through a separate <div> as is being done in the CS2103T website, AY20/21.

Describe the solution you'd like

Component-ify the <div> to appear above the navbar (or below). The component should be customizable in terms of:

• Text message
• Dismissable (ideally with a close button)
• Color / theme
• Placement (either above or below the navbar)

The template for this (possible vue) component can be a single <div>, as can be seen here, and should allow customization as described above.

Describe alternatives you've considered

No response

Additional context

No response

[jovyntls]

Hi @lhw-1 , I'm removing the good first issue tag for this as it's a nice issue to take up for CS3281 students but it's not suitable for first-time contributors.

For the CS3281 devs (or anyone planning to take on project management roles), a good first issue should be suitable for first time contributors who have no experience for the project. Furthermore, first-time contributors would also have to tackle setting up the project and getting used to our development/Github workflow, so we usually have simpler issues as good first issues. Often, these issues:

• are simple tasks
• do not require a strong understanding of how MarkBind works (but may help gain a better understanding)
• have a straightforward solution that has been laid out clearly (in the issue description, or otherwise)
• have a small scope of changes
• are quick to complete

The other similarly tagged issues might give a good idea of what these characteristics may look like. I understand it's a bit subjective at times but hopefully the list above clarifies this!

[ang-zeyu]

Can we repurpose <box dismissible> for this? the use case seems very similar

[lhw-1]

That is possible, but placement could be an issue - we want to be able to specify the component to be directly above or below the navbar. I'm not sure if the box styling could work for announcement as well, though that might just be subjective.

[ang-zeyu]

above or below

This should already be naturally achievable (place it on top or below the <navbar>) but cmiiw.

box styling

we'd have to think about a new style for sure, and if it suits the purpose of a <box> component as well.

Dismissable

I just remembered, we have a very obscure feature v-close as well that can already fit this case.

https://markbind.org/userGuide/reusingContents.html#allowing-users-to-remove-some-contents

We can think along the lines of enhancing this feature instead of adapting <box> as well.