Open-sourcing rtcs.dev

TL;DR

You can now browse the source code for this blog on github.

1. Reasoning

When I started this project close to a year ago, the goal was always to publish the code so that it may help others who are trying to build a personal brand.

This will also allow me to directly reference the source code in posts and it will motivate me to maintain the quality of it at the highest level.

1.1 Timing

I started this blog from a template, and while that helped me publish it fast and see if I enjoy technical writing, I held off on open-sourcing it because I did not feel that I could call it mine.

I kept some of the key elements I liked from the old implementation but made some improvements that reflect my way of working and my aesthetic.

2. Technical details

2.1 Stack

Main benefits:

• Astro’s plugin system makes it really easy to start with vanilla web technologies and sprinkle interactive components authored with React (or other frameworks where needed).
• Tailwind’s been a highly contested tool in the field of web dev. I haven’t used it at a large scale yet but I have made good use of it for personal projects and I like it.
• Authoring content with MDX gives me the most control over the level of customization.
• The old version of this blog was deployed using SST v2 and now I upgraded to v3 (or ion). The defaults allow you to deploy very fast, but you also have access to the base infrastructure elements in case you want to go deeper which I appreciate a lot.

2.2 Design system

One of the biggest pain points in the previous version was not having the main colors of the theme centralized and set according to the color preference (dark or light). This resulted in a lot of markup looking like this:

<p class="text-black dark:text-white">Hi!</p>

In the newer version, every color in the theme has both a light and a dark variant, and I don’t have to repeat myself as often.

@layer base {
  :root {
    --background: #ffffff;
    // ...other light theme colors
  }

  .dark {
    --background: #0a0a0a;
    // ...other dark theme colors
  }
}

And of course, the tailwind color theme is extended in order for me to be able to reference these colors easily:

export default {
  darkMode: ["class"],
  theme: {
    extend: {
      // ...
      colors: {
        // ....
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          "blog-foreground": "hsl(var(--primary-blog-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
      },
    },
  },
  // ...
};

As a starter, I used the boilerplate shadcn generates and just kept the tailwind configuration and the CSS variables.

3. Conclusion

I plan to continue improving the look & feel of the blog in the future, especially now that I have a sturdy foundation to build on.

Shout-outs:

• Julien Thibeaut - I used his background and logo tools to add life to the site.
• shadcn - completely changed how I think about composability and package publishing. Even though I am not using React for this blog yet, I still benefited from using a theme preset.