unicef / inventory

UNICEF Open Source Inventory. A UNICEF Global Innovation knowledge base of best practices and resources for working and leading Open.
https://unicef.github.io/inventory/
Creative Commons Attribution Share Alike 4.0 International
35 stars 28 forks source link

[HUGO] Add news items to appear at top of every page unless dismissed by user #41

Closed jwflory closed 3 years ago

jwflory commented 3 years ago

Summary

Use posts in a special category / archetype to appear at the top of every page when set to active

Background

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

Sometimes a maintainer needs to communicate information about the website and other news/updates. This is not instructional content, but informative content.

Describe the solution you'd like:

A group of AsciiDoc files can be created for each "alert" or news item. A news item can be set to active or inactive (Hugo draft?). Active news items appear in a carousel on each page. A news item may be dismissed by a user.

Describe alternatives you've considered:

Hard-code information into the theme. Easier, but messier. Decreases ability for others to re-use the Hugo theme.

Details

This needs some research and design work first before a coding solution. Wireframes or editing local HTML in the browser for a proof-of-concept is a good start. These can be uploaded as screenshots to this GitHub issue for review by maintainers.

Once the proof-of-concept is approved, we can explore how to do this with Hugo with the theme in follow-up discussion.

Some use cases for this feature are described below:

Outcome

Easier to communicate informative news to site visitors or updates about other UNICEF programmes and activities related to Open Source

Edit 1: Changed Markdown references to AsciiDoc. Added use cases discussed in stand-up with @Idadelveloper.

Idadelveloper commented 3 years ago

@jwflory will this be like some sort of pop-up?

jwflory commented 3 years ago

Pardon the crude mock-up, but this is roughly the idea I had for what it would look like. It would appear as a dismissable modal at the top of every page, including articles. In this screenshot, I did a mock-up of what it might look like on the site home page and an article.

Screenshot of O.S. Inventory homepage, but with a crudely-drawn text box added at the top, reading about a new article being published and where to read it.

Screenshot of O.S. Inventory article, but with a crudely-drawn text box added at the top, reading about a new article being published and where to read it.

Idadelveloper commented 3 years ago

Will make use of bootstrap alert and carousel. Inside the content directory, we will have a new folder called announcements. Each news item will be a file of its own. I am thinking each file will have front matter with info like how long it should be displayed, and then the alert info. Inside the default.html file, will iterate through each alert(file in the new announcements directory) and pass it to the bootstrap alert component.

jwflory commented 3 years ago

Completed via unicef/inventory-hugo-theme#10, unicef/inventory#68, and unicef/inventory#66. Closing as complete! 🎬