Educational Search Bar with Tags

[RaphaelMeudec]

This PR tackles #6 by adding:

• a search bar where users can input some text
• a tag system where users can click

I have done this by relying on both jekyll features and some custom javascript:

• the educational data is now a data file in _data (as e.g the speakers), and the educational pages gets the data using jekyll system
• the search bar + interactions with tags is done with javascript elements

For the review, can you take a look at the description / tags I added to each content? Make sure it fits well as I'm not familiar with all the subjects.

How it renders

General Page

After tag click

When user inputs in the search bar

Additional implementation details

• the page contains 2 div placeholders, one for the tags list, one for the cards containing the resource
• initially, the divs are empty which can be a bit surprising
• the rendering is performed using javascript by iterating over the site.data.educational from jekyll
  • we extract the unique list of tags to display them just below the search bar
  • we extract all the educational cards and build the html content for each of them
• I did it this way to be able to handle the interaction (typing in the search bar, clicking on the tag) and dynamically filter the cards

[RaphaelMeudec]

@rgbayrak ready for review!

[rgbayrak]

Thank you Raphael, the search bar looks fantastic!!

For the general outlook of the page, we would like to keep the tabs, say, Open Publishing with relevant document underneath. So you can think of this as a class page, it almost gives you a syllabus. Do you think the card design could be adjusted for that? Another thing, I may have mentioned earlier, we will not only have youtube links to the same videos, but Douyu links (China accessible video streaming platform). So maybe we can change the card outlook a little bit, reducing the tag space and perhaps list them below the card as clickable text and linking videos with two logos (youtube, and douyu). Let me know what you think @RaphaelMeudec. Here I tried to mock a hand drawn design.

[RaphaelMeudec]

Ok, I based myself on the brainhack design as Valentina pointed out in the other PR. What you have in mind seems clear, the only question I have is the following: should we keep the tags list under the search bar with filter on click? If yes, what happens when the user clicks on "git" for example and the list of relevant cards in Open Data is empty?

[rgbayrak]

Ah, yeah. I apologize for the cross communication. Tags should not occupy a lot of the space in the cards. Maybe they can be just used to search rather than showing on the card at all?

Above, I am mainly talking about the look of the page when you first land in it, that it should have the syllabus look. Through filtering, say, you click on 'git', I think it should filter as you planned and showed above. So, i.e. tabs like 'Open Publishing', 'Open Data' disappears and only the relevant tab 'Open Code' shows maybe? So whatever it is filtered out is removed. Yet again, I am not married to this plan, when you filter using a keyword, the tab (section title) can completely disappear as well, if we are sticking with the tags in cards (as opposed to what I said about removing the tags altogether from the cards). Whatever is easier and more user-friendly, your call!

[RaphaelMeudec]

Ok, so what I ended up doing is:

• remove the tags inside the cards: I agree this was a bit heavy to look at
• add the main categories, and display the cards in it
• when the users searches or click a specific tag, only the categories that have at least 1 relevant card show up

I haven't yet done the youtube/douyu icons, I'm off for a week starting tomorrow, so maybe the best is to merge this PR without the icons and then I can add them when I get back?

Here are some visuals:

• categories show up and the cards inside of them

• when the user clicks "git", relevant card show up and categories with no cards disappear

• same when the user types stuff in the search bar

[rgbayrak]

I like it!!! Looks great! Merging. Thank you @RaphaelMeudec 🥳

Yep, adding the links to the streaming platforms is not urgent. Enjoy your week off! Let me know when you get back, I will send you the douyu links!

[rgbayrak]

@RaphaelMeudec will you be able to look at the youtube/douyu links, more generally the card design?

[RaphaelMeudec]

@rgbayrak next week I should have some time. Do you have an idea in mind? I would suggest adding small youtube/douyu logos below the text description. Does it seem good to you? Also, are the douyu links somewhere or can you share them? Thanks!