11tyCMS: Electron Prototype
posted on Apr 17, 2025So... Seems as tho the fediverse was really really keen on seeing 11ty CMS become a thing. So I've spent the last couple of days figuring out how I'd get everything setup. I've taken to writing a project plan before I start most of my projects. For me, this means creating some sort of markdown document in Notesnook where I list all the libraries and frameworks I'm going to use. Then I write out anything that I know I'm going to find difficult/don't know how to do/will need to look up in bullet points. Then, I'll indent into these bullet points and include a bunch of links for resources about the thing I need to do. This helps keep my attention focused on getting the app done, rather than task switching between coding, research and troubleshooting. I've found it very helpful for my ADHD. Anyway...
Today I made a start! I bootstrapped a React Electron template, and got things together. After an hour and a half, this was the result:
So... What does it do right now? Well, it's capable of opening a folder for a collection and listing all the files. It also allows you to select a file and interpret it's gray-matter data and displaying it, AND outputting the markdown into the MDXEditor markdown editor I've implemented.
These are all pretty small steps, but this is like... Core functionality! All I need to do now is figure out how to get saving working (will be very easy I think), and I'll have most of the basic stuff I'll want for now. I'm honestly excited I got this far. Now obviously, there's the code editor and the terminal, but tbh, rn these are not a priority for me. I don't need either of those to work right away for this to be useful, but I do need a competent markdown editor that can work with my 11ty site. It's obviously not a looker right now, but for now I'm soley focused on getting this functional before I figure out layouts and styles.
🤔 So what's next?
Well, first priority is obviously getting file saving working properly, but then my next most immediate and dreaded task is figuring out how file and folder structures work in 11ty. It really doesnt feel like its standardised. I'm not saying that as a critique, its just how 11ty works. Its very hands off and unopinionated when it comes to file structure. Which is great and its something I admire and like about it. However, in this instance: it is a bit of a nightmare, as I need 11tyCMS to work with a variety of different file structures. That is to say: I need to figure out a way for it to understand where the posts folder will be, and what folders belong to collections, which ones belong to assets and other stuff that I need to account for.
Presently my plan is as follows:
-
Take a look at every folder in the directory the user opened and look for a .json file with the same name as it's folder. If this occurs, then we know that this folder is probably a collection of markdown files that are rendered out according to how the json file instructs.
-
This will allow us to categorise these as "posts" and display them in the CMS accordingly. Any folders beginning with underscore will be siphened off for the code area of the app, as that's where all the layout magic happens. For any other folder? Maybe we can assume it doesnt need to be looped over? I'm not sure.
This feels like it could end badly/be flimsy. However, if worse comes to worst, I will get the user to select their asset folders etc and then I can hopefully leave 11tyCMS to detect which folders belong to collections etc.
The problem I have is: I only discovered and started using 11tyCMS about 5 days ago. I'm positively U-Hauling myself into it. I don't have an intimate understanding of how it works and what best practise is. So I think there's going to be a real process of trial and error until I figure it out properly.
Anyways, that's where we're at for now. I'll keep y'all posted!