🌱 Effective Open Source

Meta

Celebrating the (mostly) open source technology behind effectiveopensource.dev

This page is titled “Meta” because its purpose is to explore the technologies that power the effectiveopensource.dev site. Not all of these technologies are open source (like Vercel), but those that aren’t are still near and dear to the open source community.

Did you know that effectiveopensource.dev is itself an open source project? Check out our code at github.com/with-heart/effectiveopensource.dev!

Writing

Markdown

Markdown is a lightweight markup language that allows you to add element formatting to plaintext documents.

# This is an h1 heading
## This is an h2 heading
[A link to Google](https://google.com/)
How about some **bold** and _italic_ text?
- Markdown is great for making lists!
- You can even nest them!
- Have another item
- And another nested thing

Markdown is the language of open source. It’s easy to read and easy to write.

We use it to write our READMEs. We use it to write issues, pull requests, and comments. Heck, this post is written in Markdown!

Reading and writing Markdown is an essential soft skill in the open source world. If you can’t speak it, I highly recommend that you invest time into learning how!

mdx

If Markdown is the language of open source then MDX is its most advanced dialect.

MDX allows authors to write JSX in their Markdown documents, providing a large amount of power over customizing the document output.

Unified

Unified is a unified collective of packages that compile content to syntax trees and syntax trees to content.

This is powerful because we can write utilities and plugins that manipulate the syntax tree in order to effect change in the content.

Even better is that Unified and MDX play well together, allowing us to modify our Markdown documents with Unified.

As an example, the code blocks on effectiveopensource.dev are written in Markdown, connected to MDX, and manipulated by rehype (a library in the Unified collective) in order to add line numbers, syntax highlighting, individual word highlighting, and more!

function hello() {
// I'm a comment
const variable = "I'm on the highlighted line!"
return variable
}

Speaking of the code blocks, huge shout-out to Pedro Duarte for his post “Code blocks, but better” which serves as the foundation for our code blocks.

Styling

@stitches/react

Stitches is the CSS-in-JS library used to style the components that render this site.

I chose Stitches because:

  • it features near-zero runtime and SSR support, which means the styles are almost entirely pre-generated so you’re only served the bare minimum styles needed for each page
  • it allows you to roll your own theme-powered style system from scratch
  • its variants api is excellent; Boolean Variants are my favorite feature!

I also want to mention TailwindCSS here because I built a Prose component using Stitches that is partially a clone of the TailwindCSS Typography prose styles.

Night Owl

Our code block theme is a modified version of the open source Night Owl theme created by Sarah Drasner.

const isThemeAwesome = (theme: {name: string}) => {
return theme.name === 'nightOwl'
}

Fonts

The fonts used on effectiveopensource.dev:

The non-system fonts are imported using Fontsource, an open source solution for self-hosting open source fonts.

Code

React

NextJS

Visual Studio Code

This site is Code. This document is Code. The world is Code.

Deployment

Vercel

GitHub Actions

🌱

🌱

🌱