TSH Home Page Card Structure

[thierrylahaije]

I have now made a local layout for the card structure on the homepage which can be seen in the image:

To make sure that we can display the most read pages correctly, we will need to use Google Analytics Reporting API. I do not have access to the tilburgsciencehub Google account so I currently cannot set this up.

The task is quite simple:

1. Create a project for this in Cloud Console
2. Enable Google Analytics Reporting API
3. Obtain the necessary credentials (such as API key or OAuth credentials)

@hannesdatta if you like the card structure in the image we can proceed to check who is going to set up the Google Analytics Reporting API.

[hannesdatta]

1. Create a larger variety of "cards" to display content: e.g., small box w/ text only, large box w/ text only, maybe a box with a picture, carousel, maybe you can find some more inspiration --> "choice options that we can later use to design our homepage"
2. Build technology to "populate" categories from a Python or R script
   • Deel 1: Python / R script reads .md files
     • Python / R script reads google popularity logs
     • Builds categories (@thierrylahaije - do this very simplistically as a demo)
     • dumps data as JSON file with category name, type of "display class" (e.g., courses vs txt box) to use
   • Deel 2: Implementatie in Hugo/other tools we have on the site to "Read" that JSON file

Inspiration: web-scraping.org

[hannesdatta]

Potential new categories:

- Easy updates to make your projects more reproducible
    - e.g., make, package managers (versions), install R packages
- Refresh your knowledge about reproducible science
    - Project management
    - Why is open science/reproducible science important, etc.
- Learn something new (e.g., a new programming language, about web scraping)
    - Starters for new stuff, but pretty basic
- Most important categories - show popular content

[thierrylahaije]

Hi Hannes,

I think I am quite far now building the home page structure and I am curious what you think about it.

Column descriptions:

1. Most popular building blocks (number 2-5)
2. Most popular building blocks (number 1)
3. Most popular tutorials (number 2-5)
4. Reproducible category
5. Recently Published
6. Code Snippet
7. Most popular tutorial (number 1)
8. Learn something new category

I made a python script which exports the data in json format for the cards. The example in the picture above a basic html structure which is dynamically filled by javascript when the index page is loaded. Javascript fetches the json file and then populates the cards.

The custom categories can easily be set in an .md file. For example, I now created 2 categories called 'reproducible' and 'learn'. If someone wishes to add something to that specific category, he/she can simply add the argument "category: reproducible" to the top of the .md file, below the title and description. Someone can also add the argument "icon", followed by the class of a FontAwesome Icon (which can easily be found at fontawesome.com) to add an icon to that specific article. In the example above, I added icons to the articles of the learn category.

[hannesdatta]

Hi @thierrylahaije - I LOVE IT!

How can we bring that tech to our site? Have it on a separate branch for now so I can test it myself, please!

Let's push ahead!