The semester from Hell is nearly over, thank the gods. Only 24 hours remain (well, more or less) until I'm finally free for a whole month. And yet I still have another assignment to do, Santa have mercy.
This will serve as my third and final blog post for release 0.4 for my Open Source Development class (You can read the first blog post here and the second one here.) It's been a blast but the party is over and everyone wants to go home, so grab your gun and bring the cat in.
So I originally set out on my journey to implement a global stylesheet configuration for the new NextJS frontend. We already had one for the Gatsby side of things but since we're switching to NextJS all the styling needed to be ported over as well. I spent a few hours doing TypeScript and NextJS tutorials (two things I know nothing about) to brush up on what needs to get done for this PR. I figured out how to create a top level component which will import and force a global CSS file onto any page across the entire web app, but only after I researched this stuff did I realize that Gatsby's PageBase.js file (the file in charge of doing that) does much more than that (SEO) and requires more work in order to fully implement a global config. Since Gatsby uses MaterialUI (something else I also researched) that had to be created first. Then SEO. Then global config. Then styling. Oof. I may have bitten off more than I could chew for this. I decided to tackle something else in the mean time and get back to this if I could.
My next task was to reimplement an about page for the NextJS port. Seems easy enough.
As usual I started out my hunt for a solution with a bit of reconnaissance. I wanted to learn how Gatsby rendered the about page. Oddly enough, it redirects the about route directly to the md page and renders it. Isn't that neat? A bit inconsistent with how every other page component is created in the project, but really cool nonetheless. It does this using GraphQL and something called slugs, two things I also had to learn a bit about... sooo, how can I do this with NextJS? We aren't using GraphQL so the duo idea between that and generating slug pages seemed out of the question. I decided to look at how NextJS handles rendering .md files, which wasn't as easy as I figured it would be. Eventually I stumbled upon a library that rendered .mdx files, which are just fancy .md files that can have JSX/TSX code injected directly into them! Seems perfect and really interesting, so I tried it out.
I also think this approach pairs really nicely with how NextJS renders routes based on present files. All I had to do was place the .mdx file in our Pages directory and navigate to localhost:8000/about to render it. We don't even need a slug library anymore because it just works. I also created a simple component which returns a the word Hello styled in blue, and called it in the .mdx file:
const h2Style = {
color: 'blue',
textDecoration: 'none',
};
const hello = () => {
return <h2 style={h2Style}>Hello</h2>;
};
export default hello;
import Hello from './hello';
<Hello />
## About
One of the key features[...]
Amazingly, it just worked. The page obviously requires styling but we'll get around to that when we get around to that. Cool. Figuring out the config file for next.config.js was easy and interesting. You can see the entire PR here. Hopefully I don't get yelled at for introducing a dependency. I think this is a neat approach though, we can also use this library to further add .mdx files in the future (documentation, etc, who knows?) Next. (heh)
My second issue was reimplementing a Logo component which accepts a height and width as props and generates a logo on command. Perfect! NextJS just came out. I remember watching the release conference and being excited by them talking about automatic lazy loading and image optimization as big highlights of version 10.0.0, so I was keen on reading up about how the new technology works and how to implement it. I also was curious about the .webp file format so I decided to convert our .svg logo to .webp in Photoshop to play around with it. Simply getting the image to even display on screen surprisingly not as easy as I thought it was. If eslint was fighting with me about not being able to resolve the path (even when the image would actually display) then NextJS just was not displaying the image at all.
I found a library that allowed for easier image imports in a NextJS app. Again I'm hesitant about introducing yet another stupid dependency, but couldn't figure out an alternative that would make everyone happy, seems like NextJS has no problem importing images from a CDN but struggled to safely import them locally. Eventually I figured out how to pass props between a component and a main page and the logo finally displayed in all its glory:
I made a PR which you can see here. Afterwards I also had some help from my new friend Tony (who is already a better developer than I'll ever be) who showed me how to properly specify a prop's type, which was I apparently doing wrong here, so I fixed the issue and made a new commit. Thanks Tony, and see you in January! TypeScript is neat, but kind of quirky.
And with those two smol PRs, that about wraps up all the time I have for my release 0.4 assignment.
Overall in release 0.4 I didn't face too many challenges, which is honestly upsetting to me. I had three weeks and I set out with the goal of doing a bunch of small sized issues to reintroduce myself to the lovely world of Web Programming. I wanted to do 5 PRs, which quickly became 4 PRs... then 3, and, you know how it ended. But hey, at least I learned a bunch and, as always, had fun doing it.
Oh, and I did (kind of?) a review of a PR here. I was really excited about this merge to master that I wanted to try it when it was available. Josue was kind enough to help me out with some questions I had with it. He's a really swell guy.
Anyway that about wraps it up. My plans for the Christmas break include eating, drinking, sleeping, being merry, dual-booting Linux, learning React, formatting my pc, shuckin' some 8TB drives and updating my FreeNAS server, and playing Cyberpunk.
Oh and the video game awards are tonight at 615pm EST, you can watch it here. I'll be at work but fortunately I work from home so I can just glance over at it.
Now I have to run and help finish a group for a presentation tomorrow morning.
Tune in January to see my progress in the successor to this course, OSD700!
Top comments (0)