La Dominatrice... Transform!

There's a lot of things you can do a bed, but maybe magical girl transforming isn't one of them.

We're now four comics in and I guess that means Catherine is officially apart of Natsumi's world now. I've got some ideas for her backstory, but this being a webcomic updated once per week, we'll get to it in due time.

For now a battle with a smol, angry dog with antlers lies ahead of her.

New Website, Who Dis?

You might notice some changes around here.

Such as the website being considerably faster.

You may remember I mentioned basically wrecking the website. Who knew that updating Bootstrap would cause my WP theme to upchuck and make a mess taking it down for several hours. I worried all this time that bots or hackers would do it, but, uh, well, I am kind of a "hacker." I write/hack code!

So, I guess a hacker did take down TMC, but that hacker was me, and it wasn't through maliciousness, but incompetence.

Go me.

But, I recovered the site. I was well on my way to rework the child theme I had created for Wordpress until a friend showed me his statically generated websites.

What's this?

Something new? Something other than Wordpress. I dove in. I test drove Publii which is basically an offline "Wordpress" like interface that bakes out a static website. You can place the contents in an FTP or where ever you'd like on the Internet.

Then I started researching in earnest the idea of rebuilding TMC's website better and faster.

Since March 30th, I've learned Gatsby.js, GraphiQL, React.js, some more Node.js, and rebuilt the entire website for this webcomic...

As a static website.

Unceremoniously, this past Tuesday I took down the Wordpress site and put this one up in its place. Well, not quite. The Wordpress site has been backed up and deleted. I have a different host for TMC now. The static site is faster by leaps and bounds. There's no backend to hack -- nothing for me to screw up.

Well, okay, nothing in a "live" sense to screw up. There's still plenty to mess around with but it's all confined to my computer. No waiting for a server to update.

As Marie Kondo would say, thank you for your service, old Wordpress site. You've weathered 11 years of change and have been a strange constant in my life, but now it's time to make way for something newer, leaner, and faster.

Welcome to the New This Mortal Coil website

It's not just an aesthetic change... from the backend to the front, a lot has changed.

Backend

Gone is Wordpress.

No more MySQL database and bloated Wordpress plugins.

No more classic editor or Gutenberg blocks.

I don't have to upload images to a separate upload folder and have it be sorted by Wordpress' whims. I've consolidated the pictures and text together and made a folder structure within my Gatsby project where all of the comic and blog postings live.

Text is written using markdown and Gatsby has a means of rendering that as HTML.

Visual Code is my tool of choice -- for now when it comes to authoring markdown content.

Data Organization

All of the comic and blog posts are in a folder structure now. Images live with the words and I think that's fantastic. It's the organization I wanted in 2010 but couldn't figure out with Wordpress -- and eventually I settled for doing things WP's way.

Not anymore.

You might be wondering, how exactly did I move all this data across? Well, I found a Github project that would read the export XML from a Wordpress site and restructure the data as Markdown. It could even scrape images linked to the Wordpress posts and drop them into the same folder.

It was a lucky find.

If you find yourself needing to do something similar, you can get the wordpress-export-to-markdown project from Github.

I also modified it for my needs because I use custom post types for the comic pages. I forked that repository and made some minor modifications for my own needs right here.

If you are looking to grab more information from the Wordpress export, then you can do a diff between my version and the original to get some ideas of how you can tailor the export-to-markdown for your needs.

Here's how the process works

1. In your Wordpress site, export an XML dump of all your posts
2. Clone the wordpress-export-to-markdown project from github
3. In the original there are some settings you can change such as getting the full date/time stamp exported out. I made modifications to pull additional information into the Markdown page's frontmatter for my needs. You can fork either my project or the original and make mods for your needs, esp. if you use custom posts.
4. Use NPX and run the script. There's a super helpful wizard to guide you through the process. It'll take a while. One issue I had was that linked image files couldn't be scraped. It caused an error and I didn't want to fix it. Luckily if you run the wizard for the exporter you can have it ignore scraping linked images.
5. Wait for everything to get processed.

Once I had all of the files I was able to move them to my new Gatsby project's content folder. From there I had the long and arduous task of formatting all of the data the way I really wanted/needed it.

I learned how to do some regex with Visual Code's search and replace. It took some time to figure out but made a lot of tedious tasks a lot more bearable.

Throwing Out the Old...

I also took the time to remove a lot of cruft. Mainly old blog posts. Stuff that doesn't SEO very well. No need to carry that forward.

Speaking of that...

The old site had a lot of links in the menu bar. The Shrine, a shop section, voting links. Blah blah blah.

It's a lot.

Now there's two.

1. Comics. A list of all the available stories to read for This Mortal Coil. This includes the artwork that used to be its own section on the old site and fan works.
2. Blog. See a list of journal entries about Mortal Coil's history and development.

I will add more later, but this is basically what this site is and I didn't want to immediately clutter it back up again with links.

The Front End

This is it!

After learning Gatsby, restructuring data, cutting out things I don't need, and minimizing what I do, this is the new website for This Mortal Coil.

It's got color now. I happen to like the peppy looking blue and gold theme after messing with a bunch of color combinations.

Yes, gone is the black and white. We've moved on from that.

I always, always wanted a focus more on the images. I wanted them big and bold and I will be going forward experimenting with that. I don't really want them boxed. I don't want the comic pages to be tiny. I want the images to take up the entire space and bleed right ot the edges of the browser window -- on mobile and desktop. You can see an example of that thinking with the featured comic box below.

The Future

I also want to experiment with things beyond just images. That's something I felt Wordpress never really let me do because WP is heavy. It does things in a certain way making it difficult to break the mold without breaking WP.

You may notice the comic viewer is different. In fact, it's gone. I simply display an image whereas in the old site I had a whole comic viewer that would shuffle in the next page. Too much overhead. I grew to hate it. So it's an image now.

Really, I see that area where the comic is as a space to be explored. Sure, 99% of the time it'll be images, but I also hope to try and do some other experimental things there.

This site being built in React allows me to experiment like that.

Oh... There Are Definitely Bugs and Missing Features...

Yeah, there are. Some links are broken. I am well aware of that. I have a roadmap and a tasklist of things to do before we can get crazy with experimenting.

There's other little nice-to-haves that should be brought back, but for now everything is cut down to the bare minimal.

If you do find a bug, a 404 (missing page) or something else that's weird, feel free to email me: glenn.song@gmail.com so I can make note of it and fix it.

I'll spend sometime to write something a little more... in-depth about the process I went through to build this new site.

But, that's all for now, have a great weekend!