Idea: New Design Markup Elements

dasGoogle commented 7 months ago

An idea that has been floating through my head: We currently do not have many markup elements for making a page look nice. Especially as there are some issues here that try making myHPI more user friendly, this might be a good time to also add a bunch more options for creating content on pages.

These are some of the Ideas I have, but feel free to criticise and add more:

Feature Link

Similar to what you see on social media platforms, this could be useful for displaying (mainly internal) links in a more prominent fashion. In my head, such a button would show the title of the referenced page (in the correct language) and also display the first few lines of the page. It would be nice if these blocks were able to automatically align to a grid if multiple are placed side by side.

Call to Action Button

There sometimes are pages that are mainly there to guide people to another page. In such cases, it is quite annoying that these can only be shown inline with the text. Having a large primary orange button would greatly improve the UX here. As a very basic example where something like this would be useful: If we were to write a page about the new Semester Ticket, people mainly need to get to the WebApp where they can download their ticket. This button would be great to do that.

Alerts

This feature exists in GitHub markdown (https://github.com/orgs/community/discussions/16925) and enables highlighting important aspects in a more prominent way than just using emphasis on a text. The FSR and I had a number of occurrences, where we wanted to highlight a main point of a page where other markup elements such as headings had to be misused. This would greatly improve that.

dasGoogle commented 7 months ago

Regarding the alerts: The github implementation is criticised for not being compatible with languages other than English. There are some other implementations of this floating around the web, so we could maybe consider those as well. Alternatively, we can of course also translate the relevant elements in myHPI directly and still use English markup as we do with minutes.

jeriox commented 3 months ago

Just a quick thought on this: I see two options on how to achieve this.

Build it as part of our custom markdown processing. This would probably be quite straightforward to build, as we only need to define a custom markdown syntax and render it to HTML as we please. However, this will make reusability/flexibility of the content a bit harder.
Use wagtail features for that. Wagtail knows this concept of "mix of several different components like headings, paragraphs, images etc." as a StreamField with different blocks of content. This would integrate much more nicely into the editor UI (and probably also things like translations, where we already had our fair share of problems). The downside is that the content of one page stops being one blob of markdown, which could make things like diffs/copying content around harder.

jeriox commented 3 months ago

Additional idea from the FSR: collapsible section, e.g. for FAQs

fsr-de / myHPI