11tyCMS: Improved File Management and Posts List

Sooo... It's been a while. I've been busy coding for my job and didn't really feel up to coding for 11tyCMS. However: I'm on holiday right now and I have a lot of time to do whatever the hell I damn well please. Much to the benefit of 11tyCMS!

And better yet? The changes I've been working on have made it so I can actually write this post within 11tyCMS! So let's dive into what's changed:

📚 The sidebar

One of the first things that I found frustrating about the design was that all the posts were listed in the sidebar under their respective categories. This was a bad design decision because there was little room for dates, metadata and search filtering.

So instead, I felt it was better to make the sidebar be exclusively for listing out categories, making it easier to work with and less visually cluttered, all goals in keeping with the design philosophy I'm aiming to have for 11tyCMS.

When you click on the category in the sidebar, on the content area , all the posts appear in a list.

📋 The posts menu

On the post menu, at the very top we have the header with the selected category name. It has an add button to create a post, which we'll talk more about in a minute.

Currently, the design isnt how I'd like. Its visually cluttered and it doesnt have a lot of info, but its just a placeholder for now.

Moving forward I'm going to make it so there's less to no contrast between each post on the list, infact I may even separate them by a line instead. I think the date will remain the same, but I'll also add a bunch of tags beneath the title.

So far so good!

Still a lot of work to do here though. As you can see: the list is all out of order. I'm gonna have to sort it by file modified/created date. But realistically, to do this performantly I'll probably have a special json cache file that generates whenever you start 11tyCMS to make this data easier and better to deal with.

📁 File management

This is the big one... This whole process was rather confusing. I had 2 main goals:

• Getting a "add new post" button to work
• Getting auto save to work

Both of these required some sort of decent file management in place.

✍️ New post functionality

This was surprisingly difficult to get in place. Initially, my plan was to have it so whenever you pressed "new post" it would lead you to the editor area with a blank slate. Then, when you change the title field at the top, it would change the file name according to the title that you typed. There's several problems with this:

• If the user types an entire post but not a title, then it will stop them from creating another fresh post. This is because it'll try and create a .md file (because theres no title), and itll see there's already one and open the last post.
• It takes control away from the user to decide the "slug" (the URL part of the post name) of the post, which can sometimes differ from the title of the post
• Its computationally intensive. I had to make a regex formula to remove any special characters and to keep it with letters and numbers only for the file name, while also saving the normal title to the file's `gray-matter` data.
• Attempting to make all of this worked caused a hideous bug where the parsing of `gray-matter` data, saving the file and everything else got out of sync on the change of the title (so every key stroke), and it caused new files to be created where they shouldnt.

So I figured I was beat by all this. Instead what I decided on was a modal. Whenever you press the plus button on the posts list, it gives you a popup model with a textbox prompting you for a slug, followed by a save button. Once filled out and saved, it leads you straight to the editor where you can edit your post to your hearts content: no problems! It worked beautifully.

💾 Autosave functionality

Thankfully, this ended up being the easiest bit. All it required was making a ref, and setting the ref to a timeout timer for onChange on the MDXEditor alonf with the title field and it worked beautifully. So now? 2 seconds after whenever you stop typing, it'll save.

Conclusion

So all in all, 11tyCMS is shaping up wonderful. Though I am noticing as I'm writing, the typing is rather laggy... So I've clearly got some bugs to iron out. But it's looking very promising indeed :)

That's all from me!

Over and out xo