馃捇 adventure tabs and editor in public adventures page #4990
Conversation
|
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? |
Glad to hear that, Felienne :)))
I thought here just for that reason indeed, also to discuss it in the contributors meeting, but I thought it's not suitable yesterday! |
|
Ah that final failing test is not your fault @hasan-sh, I will fix that! |
|
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). |
|
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). |
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:
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=parrwith another teacher, they will see exactly what you see:How to test?
Go to
/public-adventuresand 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
initializeHighlightedCodeBlocksor 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 thejsproperty 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.