First Contribution to Codu
So I did a thing..
I joined the 6 week writing challenge here. Quickly realised I am terrible at writing and half decent at coding… so straight to GitHub to check out the open issues !
My strategy for picking an issue to solve was extremely complicated and I won’t go into it here.
… I picked the issue at the top 😂 When in doubt.. Aim for the middle. Issue
Grand nice handy one. Add an announcement box to the articles page. ( Side note… by now I hope you this has been deployed )
Getting started with the Codu codebase
Grand it’s a typescript react codebase. This is what I daily drive so no hassle there. Tailwinds.. I have heard of that but never used it.. let’s avoid it if possible.
So I forked the repo and npm installed. 0 vulnerabilities… nice!
Don’t think I have ever seen that in industry but it’s lovely to see.
Ok did the few bits and pieces getting the secrets for GitHub’s oAuth and spun up the docker container to host the database. Time to hit the oul npm start…
Panik! npm start not found… oh no I knew this wasn’t going to be easy! Quick check of the package.json and I was back on track! Npm run dev 🚀
And it’s alive! Wow that was surprising straight forward.. Ok why am I running this? Oh yeah announcement banner. Ok… what page is it on… quick CMD shift F for “Recommended Topics” and I found the page. Slapped in a quick div where I thought the announcement box should go and one auto reload later. Boom we are in business! That looks to be in the right place.
Will I be lazy?
So what do I need to render..? Ok a box with a bit of text.. the Codu logo.. a bit more text. Ok I can create a reusable component that we can use for all announcements… or I can just render the image provided… hmm better ask the question on the issue before going down the wrong path.
A few moments later
Ok looks like we can do this one the quick and dirty way. Seems @Niall Maher (You can’t tag a user… I think I’ll write an issue for this) is happy enough with my hacky solution. Let’s render an image. Looks like this repo is using next so I can just use the next/image component to render an image.
Ok image is there but it’s in margin is off and it’s not quite wide enough. Nothing a little CSS can’t fix.. width:100% margin: 16px and It’s looking good!
Grand let’s throw the CSS into a class and into the global.css file and we can commit and push.
Perfect looks great. Let’s open the PR and merge into the… main branch. That seems correct..
#A few more moments later..
Why does it say I want to merge in 200+ commits… oh no what did I do…
Quick trip to discord and a cry for help later. Looks like I should be targeting develop and not main.. this makes sense! So switch that over and now it’s 1 commit and 2 changed files. That seems more manageable.
So about that Tailwind stuff…
Ok got some comments… 4 comments on 3 changed files. Panic stations! 😧
So it seems like CSS classes in global.css are not the preferred method but I have been told the solution. Tail wind classes! But I know nothing about them so a quick google and a “Tailwind in 100 seconds” YouTube video later and it’s working again!
Push the changes and update the PR comments. Let’s see if that’s enough
Several moments later…
Email pings. @NiallJoeMaher approved this pull request. Awesome!
Takeaways
- The README file for the Codu codebase is awesome and up to date. I was shocked at how quickly I went from fork to npm run dev. Kudos to everyone involved
- Codebase is well structured and I was able to figure out what’s where pretty quickly
- Everyone should grab a ticket after reading this. There’s more then a few that are quick fixes and it’s instant dopamine. I haven’t enjoyed a pull request being approved that much in a long time.
- It’s addictive… already grabbed another ticket and have my eye on a third 🤩 This won’t be the last article on my journey into the codebase and please let me know if you grab a ticket after reading this. Would love to support 💪
