💻 adventure tabs and editor in public adventures page

[hasan-sh]

Fixes #4954

Features

Initially the page shows all available public adventures.

There are four filters that teachers can utilize in order to find adventures quickly. These filters are:

1. search input: finds an adventure whose name matches the search input
2. level (default=1): gets adventures of a specific level. Only one item can be selected.
3. language: gets adventures of a specific language. Only one item can be selected.
4. tags: gets adventures that have at least one of the selected tags. Multiple items can be selected.

Another interesting and important feature is that the URL always updates wrt the filters. For instance, if you filter by English, the URL will be something like: public-adventures?level=1&lang=en&tag=&search=. The same applied to all available filters. Additionally, this means that you can share a url with someone and they would see the exact same adventures you've filtered. So, if you share /public-adventures?level=1&lang=&tag=print&search=parr with another teacher, they will see exactly what you see:

How to test?

Go to /public-adventures and start applying some filters, run some code of any adventure you like, and perhaps clone one that's created by some other user.

Technicality (for devs)

Whenever a filter is applied, we send a request to python and expect two things:

• html: the template of the new filtered adventures, to replace the current adventure tabs with.
• js: some properties that are needed for js; e.g., to initialize the editor.

The html is simply a string that we replace the innerHTML of the target element that includes the editor and tabs. And since this is a string, we need to manually initialize the JS code; e.g., run the initializeHighlightedCodeBlocks or initialize the editor with the selected level.

The reason why I didn't use htmx here is due to the fact that the created template that has the editor and tabs (i.e., in public-adventures-body.html) does not issue a rerender on the js side. Most probably, this behavior is because htmx only replaces a target element by whatever the server returns and does not mind the js property that we pass to the template. As a result, the editor and tabs become just views with no interactivity.

Another matter is the usage of Tailwind Elements. I used this for two reasons: it uses Tailwind (which we also do) and it has a plenty of already styled elements. The problem with TE is that they don't support RTL currently, however, they did mention that they're working on it. So, let's just keep using our custom select that I created, until they fix that issue or we need some of the beautiful components they provide.

[ghost]

👇 Click on the image for a new way to code review

Legend

[Felienne]

Loooooooove how extensive this PR is @hasan-sh!!!

Before we merge just one question, do we want to move the "Technicality" information in this PR elsewhere? To the docs or a discussion? Or is it fine if it just lives here so we can find it when needed?

[hasan-sh]

Loooooooove how extensive this PR is @hasan-sh!!!

Glad to hear that, Felienne :)))

Before we merge just one question, do we want to move the "Technicality" information in this PR elsewhere? To the docs or a discussion? Or is it fine if it just lives here so we can find it when needed?

I thought here just for that reason indeed, also to discuss it in the contributors meeting, but I thought it's not suitable yesterday!

[Felienne]

Ah that final failing test is not your fault @hasan-sh, I will fix that!

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).