Skip to content
Extraits de code Groupes Projets
Valider cc7ba255 rédigé par Cédric Niyikiza's avatar Cédric Niyikiza
Parcourir les fichiers

Delete Report_Cedric-Niyikiza_64492300.md

parent 4d612a62
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
# **LINFO2401 Project Report - Contributing to an Open Source project**
| **Author:** | _Cédric Niyikiza_ |
| ------------------------ | ----------------------------------------------------- |
| **NOMA:** | 64492300 |
| **Academic Year:** | 2024-2025 |
| **Open Source Project:** | [**e-vinci -** _js2_](https://github.com/e-vinci/js2) |
| **Pull request:** | [#14](https://github.com/e-vinci/js2/pull/14) |
## Project Selection
To briefly explain how the project selection process went, it was pretty simple. I already knew that I wanted to work on a web project and implement a feature within the project I was going to select. In addition, I wanted this feature to make sense and to respond to a problem.
I looked around the repositories of people I knew. And then the idea came to me to contribute to the site/syllabus of a teacher at [*my old school*](https://www.vinci.be/fr/formations/informatique-developpement-applications).
So I selected a repository from among those initiated by a former Web / JS / React teacher, Raphael Baroni ([Linkedin](https://www.linkedin.com/in/raphael-baroni-0177ab41/) / [Personal Github](https://github.com/e-baron) / [Organization Github](https://github.com/e-vinci/)).
I had very strong memories of my hours spent on the site of the JavaScript course ... And there was a big problem in my eyes... (My eyes were getting tired...)
## Project Description
So my project was to implement the ability to switch between a dark mode and a light mode. This was for the [Javascript course website](https://e-vinci.github.io/js2/) ([*BAC 2 at the Haute Ecole de Léonard de Vinci*](https://progcours.vinci.be/cocoon/cours/BINV2150-2.html)).
## Journey Trough The Project
So the first thing I did was clone the project (obvious).
- Attempt to launch the project following the `README.md` provided.
- Right from the start I had minor problems with the version of Node.JS used to compile the project. (Issue resolved thanks to [this solution](https://stackoverflow.com/a/77737680)).
- Since I wasn't familiar with [Gatsby](https://www.gatsbyjs.com/), I went straight to the web to find out how to simply implement what I wanted. I saw that there was a way out with additional packages, but this strategy wasn't the right one because I didn't even understand how the project was subdivided.
- So I took the time to look through the project's code and came across the `/scss` folder, which contained the files used to style the site's pages. I'd never used this variant of CSS before, so I was a bit scared at first. Looking in more detail at the files in this folder, I found the file containing the basic colors for the site. So all I had to do was add my color variables for my dark mode. But that wasn't all, I had to manage the style switch within the front-end.
- To manage the switch, I had to add a button and add a scss file that would override the style of the whole site if the ‘Dark Mode’ button was clicked.
- For the button: Addition of a button in the navbar (management of the dark/light mode state)
- For the style :
- Addition of the `_darkmode.scss` file. Override style so that it makes sense and looks good.
- Import added to `main.scss`, so that the project recognizes these style rules.
After all these steps, the feature was perfectly functional! 😁
## Conclusion
To conclude, I'd say that I'm very satisfied with my contribution. It's allowed me to challenge myself with technologies I didn't know (Gatsby [Framework] and SCSS) and not give up in the face of difficulty. What's more, I'm pleased to have been able to contribute to a project initiated by someone who taught me Javascript and the basics of web development.
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter