Check out the finished demo here!

About once a month, I teach lessons and lead discussions with the women of our local church congregation. However, with everything moving online due to COVID-19, we were unable to meet together. We started having our meetings on Zoom, but I couldn't help thinking that there was a better way to make more people feel included. Typically when I teach, I make a slide presentation. I love visuals and I also like being able to post my questions for everyone to see so that no one has to ask, "Wait, what was the question again?" every time. I could just screenshare during my Zoom lessons so that those are still part of the discussion!

But then I had another idea. Not everyone could make it to every lesson or moms that had to step out with their babies couldn't stay for the whole time. I still wanted them to be included, too. Not everyone has time to watch a recording after the fact and just having someone's notes about what was talked about just isn't the same. That's when I came up with the idea for Blog 'n' Decker! What if I could do the write-up about what I talk about, which would be much more detailed than anyone else's notes since it would be my lesson, and include the slide presentation with it?

I found a cool Gatsby theme by pomber called gatsby-theme-deck-n-blog that did exactly what I wanted! However, there were a couple of bugs, some breaking, others visual. So I forked the theme and made the adjustments. Now the GraphQL query for the markdown files runs correctly and there's a working dark mode! This theme was also my first time trying out shadowing with Gatsby themes. I'll admit that at first, it was a little confusing. It certainly gets challenging when you want to customize things because you have to look at the original repo to see what the current implementation is. But the actual shadowing itself is nice and easy! And for this particular theme, all I have to do is create a single mdx file and it creates both a slide deck and blog post! And as you scroll through the blog post, a mini version of the slides scrolls along with you. So. Cool.

To take it up a notch, I wanted to provide an environment where people could still participate and voice their thoughts, even if they didn't feel comfortable speaking during class. After watching Jason Lengstorf's stream, I added a live comment feed to the bottom of each blog post using Hasura and Apollo Client.

Figuring out the live comment feed was a bit tricky, mostly because I had never used Apollo Client, subscriptions, or web sockets before. So it was all brand new stuff to learn. I did try to add some Google ReCaptcha to prevent bots from making comments, but I really struggled with the documentation. It felt too sparse and it was difficult to find what I was looking for. While it's there and you can't submit a comment without checking the box, I still have doubts as to whether or not I implemented it correctly.

Another challenge was fixing the dark mode from the gatsby-theme-deck-n-blog! It took a lot of trial and error and digging into the other themes that this one is dependent on. Ultimately, I had to merge the styling themes from a couple of the Gatsby themes being used to make sure the colors were what I wanted.

This was a super fun site to make! It was very gratifying not just to make a fun site that works, but also hear the words of gratitude from other women that enjoyed being able to follow along or catch up later. Making more people feel included and seeing the positive outcomes is always worth the extra effort.