Joy of Code is a digital garden growing curious minds with a wide variety of topics from web development to web design. If reading isn't your thing watch the video version on YouTube.
First time contributors are welcome — in fact this is the reason why I wanted to make it possible to contribute so you can get your first open source contribution.
At the end of each post there's a direct link to the Markdown file of the post you can edit within GitHub. Read the contributing guidelines to learn more.
If you need help or something changed and isn't working when following a post or video series I made you can go to the issues and find the issue and bring it to my attention — I hope in general people help each other out this way.
This avoids having to hunt down the issue you have in YouTube comments or places like Discord that aren't indexed by search results and are lost forever.
-
⚡️ SvelteKit is used for the frontend with server-side rendering and prerendering static pages
-
🔌 GitHub API is used to manage content so GitHub is the content management system
-
The editor uses ⚡️ SvelteKit for the frontend and 📜 Monaco Editor (code editor which powers VS Code) as the editor to manage content using the 🔌 GitHub API
-
✍️ Posts are stored inside the
postsfolder and are used to build the page using the 🔌 GitHub API butdatais where posts metadata is stored in a singleposts.jsonto serve as a database -
The project is hosted on Vercel and uses ignored build step with
git diff HEAD^ HEAD --quiet . ':(exclude)editor/*' ':(exclude)posts/*' ':(exclude)data/*'to avoid redeploy for those special folders -
The tests use Playwright for end-to-end testing
-
Analytics use Google Analytics
-
Newsletter uses Buttondown when I remember to send one 🤭
-
Post views use Supabase
-
Social share images use mattcroat/social-share-images
The project uses 📦️ pnpm but any package manager is going to work.
👬 Clone the project.
git clone https://github.com/mattcroat/joy-of-code.git📦️ Install the dependencies.
pnpm i💿️ Run the development server with pnpm run dev or build and preview the project with pnpm run build && pnpm run preview.
pnpm run dev