![image.png](https://cdn.utopian.io/posts/b744aea127f9421052cac3c115da0a48790aimage.png)


Note: the changes in this contribution won't be live on https://utopian.info as I am completely reworking the application structure and it would break the website if I added it. If you want to test it out locally then make sure to clone the `develop` branch and not the `master` branch: https://github.com/amosbastian/utopian/tree/develop (instructions are in the README).

### What's new?
Currently Utopian.info doesn't have a proper home page, so I created one! If anyone remembers the first version of Utopian.info, they might recall that when we still had supervisors and teams the home page looked something like this

<center>![image.png](https://cdn.utopian.io/posts/95523369cd8bf8373b3f41caac23b4f96047image.png)
</center>

After all the changes made to moderation teams I decided to scrap that page, since it was obviously redundant, and create a new one from scratch. As I am not very creative I needed to find some inspiration, and what better than Utopian's very own landing page https://join.utopian.io/.

Currently the homepage has five separate sections, so I will go over them on by one below! I created a PR [here](https://github.com/amosbastian/utopian/pull/8) to make it easier on whoever has to moderate this contribution, but I also will link all relevant commits below.

#### Categories

If you checked out https://join.utopian.io/ you will already know what Utopian.info's category section is going to look like... it's nearly identical as you can see below.

![categories.gif](https://cdn.utopian.io/posts/a51c56ec14196b0ca539356cda372dc115b1categories.gif)

The way I implemented this was by checking the CSS they used on https://join.utopian.io/ and basically copying most of the values. It's probably a bit different though, as I just checked stuff like the width of the circles and what kind of transitions they use when hovering them. Another thing that is different is that I used CSS Grid to implement this, where each category circle is its own cell. Because of this it was pretty easy to make it responsive, as you can see in the gif below.

![https://i.imgur.com/w98cjNb.gif](https://i.imgur.com/w98cjNb.gif)

I'll also show some code snippets below, so you can understand how easy CSS Grid really makes this. When using CSS Grid you can name areas in the grid like so

```
&__categories {
  ...
  grid-template-areas: 
    "cat1 cat2 cat3 cat4  cat5   cat6"
    "cat7 cat8 cat9 cat10 cat11 cat12"
}
```

then just like usual you can use media queries to change the shape of the area depending on the width of the screen

```
@media (max-width: 90rem) {
  .home-categories__categories {
    grid-template-areas:
      "cat1 cat2  cat3  cat4"
      "cat5 cat6  cat7  cat8"
      "cat9 cat10 cat11 cat12"
  }
}

@media (max-width: 50rem) {
  .home-categories__categories {
    grid-template-areas:
      "cat1  cat2  cat3"
      "cat4  cat5  cat6"
      "cat7  cat8  cat9"
      "cat10 cat11 cat12"
  }
}
```

Also, I got the SVG icons from https://icomoon.io/, but I couldn't find the ones for the categories documentation, analysis or blogs, so if anyone knows what they *actually* are please let me know!

##### Commits
* [Start on remake, add header homepage and start category section](https://github.com/amosbastian/utopian/commit/ca0fe9e0388431ea1d19b198547252fa4a5169a2)
* [Category section finished, add slick carousel](https://github.com/amosbastian/utopian/commit/aab36c017957aca37b3c837920a2329397d624fa)
* [Finish most styling, media queries to categories](https://github.com/amosbastian/utopian/commit/52ab71c05fa501e469819cb2ec3566ab481d13ba)

#### Community managers

In the community manager section I have, once again just like on the landing page of Utopian.io, used [slick](http://kenwheeler.github.io/slick/) to create a carousel of the most active community managers in the last week. You can see this in action in the GIF below

![https://i.imgur.com/WvfBMou.gif](https://i.imgur.com/WvfBMou.gif)

I created a `moderator-card` component using SCSS, which makes it easy to use this on other pages if I ever need to. Everything is dynamic, even the category as you may have noticed in the GIF above. In `home.py` I retrieve a list of all posts in the last week from the database and use this to calculate the following:

* The category the community manager was most active in
* The amount of accepted and rejected contributions
* The amount of points scored in that week

All this information is then stored in a dictionary and passed to the template, which is very useful. As I mentioned above, everything is dynamic, and because Knowledges and ms10398 have been most active in the bug hunting category it shows that its their category, even though it isn't. Everything is also responsive, which is this time made easy by [slick](http://kenwheeler.github.io/slick/) itself

![https://i.imgur.com/d4Cv5xd.gif](https://i.imgur.com/d4Cv5xd.gif)

The code for this can be found [here](https://github.com/amosbastian/utopian/blob/develop/utopian/static/js/carousel.js). A problem I faced was that for some reason CSS Grid messes up the carousel, so after doing some research I found out that you need to set a specific view width otherwise it doesn't work - just thought I'd add this here in case someone reading this runs into the same problem.

Finally, I wanted to add a gradient on each side of the carousel. On Utopian's landing page they use an actual image for this, but I implemented this differently. I simply overlay the entire carousel with a linear gradient. When I first added this, I simply used a linear gradient with three colour stops like so: `linear-gradient(to right,#fff, transparent, #fff);`. Unfortunately this had an unforeseen side effect. Because it was overlaying the entire carousel it made it impossible to click a community manager's name. To remedy this I created two `div`s instead, one that would hover over the left side and another on the opposite side

```
&__gradient-left {
  position: absolute;
  height: 50%;
  width: 30%;
  background: linear-gradient(to right,#fff, transparent);
  z-index: 100;
  left: 0;
}
&__gradient-right {
  position: absolute;
  height: 50%;
  width: 30%;
  background: linear-gradient(to left,#fff, transparent);
  z-index: 100;
  right: 0;
}
```

This makes it so that there's a small gap in-between both linear gradients so the middle community manager's name can always be clicked!

##### Commits
* [Add community manager carousel + moderator-card component styling](https://github.com/amosbastian/utopian/commit/31fdf07e0f1ff4cd12950a162353e919132b0d07)
* [Managers and moderators now retrieved from database and dynamic](https://github.com/amosbastian/utopian/commit/3713a316ed5fd82f149741373c5b3e4628d0ee85)

#### Moderators

Since I made the moderator card a component I could simply reuse it here. The only difference is that when creating the dictionary with information for the moderators in `hello.py` they start with 100 points less.

![https://i.imgur.com/wuHO42Y.gif](https://i.imgur.com/wuHO42Y.gif)

#### Contributors

Once again this uses the moderator card, but there's a small difference. Instead of showing the seven most active contributors, it shows the contributors with the highest pending rewards. To implement this I had to add this to each post object in the database, which was very easy to do:

```
new_post = {
    ...,
    "reward": float(post["pending_payout_value"].split()[0])
}

if new_post["reward"] == 0:
        new_post["reward"] = float(post["total_payout_value"].split()[0])
```

This is then shown on the contributor's card in place of the points as seen in the GIF below

![https://i.imgur.com/7KTZtnd.gif](https://i.imgur.com/7KTZtnd.gif)

Note: this is not the amount they will actually receive, it's simply the pending rewards of all their contributions summed.

##### Commits
* [Contributor now also dynamic + extra styling](https://github.com/amosbastian/utopian/commit/a05810319fe3405712fbde8216dcd92909ebe629)
* [Add rewards to posts, add comments, fix client](https://github.com/amosbastian/utopian/commit/7a19e477f3426ef6836c3b49673712eae3ba0970)

#### Projects

Of course I wanted to also add projects to the home page, but this was a little bit more tricky to implement. Each post in the database already contains the repository's ID, so in `hello.py` I simply check which repository's have the highest pending rewards (just like the contributors section). Once I have the IDs of the repositories I use GitHub's API to retrieve the information needed like so

```
# Use GitHub API to get additional information
for project in project_list:
    project_id = project["id"]
    request = requests.get(f"{GITHUB}repositories/{project_id}").json()
    project["full_name"] = request["full_name"]
    project["avatar_url"] = request["owner"]["avatar_url"]
    project["html_url"] = request["html_url"]
```

A project's card also looks a bit different, so I created them as their own component. Instead of showing the category at the top of the card it links to the project on GitHub. Also, instead of showing a user's avatar, it shows the avatar of the owner of the project. Everything together results in the following carousel:

![https://i.imgur.com/Px4eBwN.gif](https://i.imgur.com/Px4eBwN.gif)

##### Commits
* [Hardcode project section, create project card component](https://github.com/amosbastian/utopian/commit/7e282a47eb0f94be94e5be92e08c1e217cf81079)
* [Projects now also dynamic - retrieved with GitHub API](https://github.com/amosbastian/utopian/commit/207795092070292160506bfb8e5a760c49c2781c)

#### Search
It's not actually functioning yet, but I already implemented it with CSS as seen in the GIF below.

<center>![searchbar.gif](https://cdn.utopian.io/posts/1c1c0a1c1808bfd4d1ae3a882db8b11a4a93searchbar.gif)</center>

In future updates I obviously want to make it actually work, including autocompletion, so look forward to that!

##### Commits
* [Add search bar + styling](https://github.com/amosbastian/utopian/commit/35a841fd80b9200b4799328f3011387b0793b9af)

### What are my plans?
As I mentioned above I am now working on the complete restructure of the Flask application. I will obviously reuse a lot of code, but it should result in a much cleaner and quicker application (hopefully). I am keeping everything on the `develop` branch for now, so it will only be available on https://utopian.info once everything is complete. Next step is implementing the search on the homepage and then probably the projects page since that doesn't exist yet!

### Contributing
If you want to contribute, then please read [CONTRIBUTING.md](https://github.com/amosbastian/utopian/blob/master/CONTRIBUTING.md) for more information.

---

Also, I was testing my stream a bit while working on a part of the application, so if you want to see some clips of this you can do so [here](https://www.twitch.tv/amosbastian/videos/all).

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@amosbastian/utopian-info-home-page">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>