CC Open Source Blog

What is up? - CCOS Revamp


by Dhruvi Butti on 2020-07-20

This blog is part of the series: Outreachy May 2020 round: CC Open source

In my previous blog, I demonstrated what my Outreachy project was about. Here I will talk about my progress in the past 7 weeks.

The Set-Up -

The Creative Commons Open Source website is built using Lektor. I was not very familiar with it, so I started by going through the documentation and the official website code. I learned how awesome it is and can also be used by non-coders. I got familiar with the jinja templates and working of themes in a Lektor app. For integrating new styles from Vocabulary, I replaced templates/ folder with a theme/ folder. Here is the link to how templates work in Lektor.

As the revamping process is gradual, there was a need of setting up a staging environment where we could test the website. Deploying the branch that consists of the ongoing changes was pretty easy, I just followed the official documentation provided by Netlify and deployed it.

Adding New Components to Vocabulary -

The mock-ups for the new CCOS website extensively use Vocabulary components, styles, and patterns, and it had components that were not available in Vocabulary. So, I worked on building them from scratch. I enjoyed this part a bit too much. And also this was a part of the project, I did not think would take up like 2 weeks but it did. I enjoyed questioning the scope, the design, the experience of the components, and getting satisfactory answers. Maintaining the practices, focusing on details were fun things to do. It felt like I own those components. You can check them out here and also use them wherever needed.

Updating Templates of the Theme -

I started by updating the home page template. I try to make the code cleaner and more readable. Going through the Lektor documentation, I came across different ways to do so. One of them was flow blocks), I like how it makes a template more modular and readable so I implemented the home page using flow blocks. This one after one, I started updating every template. For now, I have updated 10 templates and I plan to update the remaining in upcoming weeks.

My Experience so far -

This has been one heck of a journey for me. I have never collaborated with such a huge open-source organization and so that was something new for me. I have learned a lot of things both technical and non-technical so far. I have become more alert about the code I write, this journey has helped me improve the questions I ask to myself while writing code or thinking about the solution, I got to learn about new technologies such as Lektor, Webpack, SCSS and many more. I am just very glad to be a part of this.