Technical Devlogs?

Hi, I’m Arcy- I was on the team for DLMC for quite a bit now, but only recently I’ve officially started working on the game full-time, and my one of my first tasks was to create this very website. The goal was to have a better reading experience for users and giving us a space to write more detailed design, technical (and other) types of devlogs. I’m gonna be writing mostly on the nerdyside of how’s the game (or website in this case) made but occasionally I’ll chip in with more creative stuff as well ^^

Initial idea

website-1.PNG

So after working on the game really hard for like 2 weeks trying to fix Yollie’s spaghetti code (wink wink see my next post in 2 weeks), this random idea came to my mind, and after some discussion we decided making a website to put our devlogs means we can stop relying on discord for them (hi discord people) and also means we can put nicely decorated and more detailed posts that read much better for you guys :)

And now for the technical side of things, to make this website for as little investment as possible, I decided that the thing that’s hosted on the internet must be fully static, so that we can upload it to Vercel, and possibly stay on the free plan for as long as possible. This avoids any server hosting costs, which would probably the biggest money sink in this project.

But, since we didn’t want to change the source code of the frontend app every time we wanted to make a post (even if markdown editors exist, even github has one), I wanted to implement some sort of locally running backend that changes the frontend files, makes a commit to github, and then vercel handles deployment automatically after that.

My decision went to Strapi, as it’s open source and gives me an ability to host everything locally via node.js. To complement Strapi, I decided that I didn’t want to bother learning how it actually renders anything and instead I put the entire thing into an Electron windows app with a menu item to actually upload the content to frontend’s github repo.

The entire website is a hybrid between a monorepo and separate repositories, the main structure is that in the root folder there’s a Frontend, Backend (Strapi) and Electron folder, but the root repo .gitignores the Frontend folder - because it’s a different repository altogether (for uploading to Vercel), but it’s required for the project to work.

Strapi

Strapi is an open source headless CMS (Content Management System) that allowed me to create a nicely integrated admin panel for the devlog posts, here’s how it looks:

website-2.PNG website-3.PNG

Don’t mind the short descriptions under fields, they are a bit outdated lol

Other than the blogs, I can use Strapi for the dev team on the front page, and authors under blog posts, which means I can easily change my profile picture or description whenever I want.

I disabled almost every additional element of Strapi and left only the simple content management aspect of it. I even disabled authentication (because you need to authenticate the frontend’s github repo locally anyways to upload anything)

Electron

On top of Strapi, I needed a way to do a couple of things:

  • Grab the posts, get their markdown and copy them to frontend’s blogs folder
  • Automatically detect the code blocks’ scripting language for nice code highlighting
  • Convert images to hmtl image tags
  • Grab the authors, and copy their properties to .json files into frontend’s authors folder
  • Create a new commit for the frontend repo and upload it to github

All of this is done in an Electron custom menu:

website-4.PNG

And the steps are split into a couple of different helper methods, which do all the steps described above:

try {
updateProgress('Uploading to GitHub...', 10);
await upload.resetFrontend();

updateProgress('Exporting files...', 30);
await exporter.exportFiles();

updateProgress('Copying content...', 50);
await assets.copyToFrontEnd();

updateProgress('Uploading to GitHub...', 80);
await upload.uploadToGitHub();

updateProgress('Finished, page will update soon :)', 100);
} catch (err) {
updateProgress('Error: ' + (err.message || err), 100);
}

Frontend

Frontend took definitely the most work, since it required me to not only design the website, but actually make it from kind of scratch (but not really, will explain soon) without MUCH full stack web dev experience, I’ve only done some very basic website projects for college in the past. For the frontend framework I used Svelte, which is my favorite flavour of the same thing every other framework is doing (I’ll get crucified for this), specifically I’ve used Svelte 5 and SvelteKit 2 for serverside rendering.

As for why it wasn’t made from scratch, I’ve used https://github.com/josh-collinsworth/sveltekit-blog-starter as a kickstart for the project (which included a LOT of useful features, inlcuding mdsvex which parses the markdown posts into html), but I basically remade the entire styling and mobile responsiveness from zero mostly using tailwind css. The wave on the front page was actually “borrowed” from another blog template https://github.com/matfantinel/sveltekit-static-blog-template and was tweaked a bit to better match the page.

Other than these two, I used shadcn-sveltefor a bunch of components and lucidefor a couple of button icons. Oh and also for the mailing list we use Brevo, which allows us to send a bunch of emails for free, but so many of you already signed up for the mailing list that we’re kinda forced to move to the paid tier, so DONATE TO YOLLIE’S KO-FI NOW

Outro

So this is basically it, I made the entire website in about a week and a half, then took another half a week to get some feedback and fix a bunch of issues. Overall I’m really proud of how it came out, it looks really pretty and the mobile responsiveness works really well.

Oh and if you’re looking for a clue about next week post, Yollie forced me to say the word “carrier”, idk what it means.