November 30

Hi everyone, hope you're doing well! Under the weather myself, my allergies and eczema went berserk after I couldn't get my medication for two weeks and are pretty much on fire, so I'm still recovering from that as it takes a while for it to start working again.

Nonetheless, I've been making a lot of progress on Deserted Chateau and other projects. Updates are below :)

Migrating documentation to Bookstack

With all of the documentation I’ve been writing for Deserted Chateau being in text files at present (hardly a basis for a system of documentation), I’ve been investigating what solution to use for a more proper documentation area.

I spent a little time testing BookStack, which after setting up a server for it, does the job very nicely. I’ve started migrating the documentation there and customising the appearance; there’s a fair bit of coding documentation that needs to be properly formatted to look nice and be easily readable, so that’ll be a lot of work, but it can be done gradually as I focus on other things.

BookStack has an option for making the documentation server public (i.e. viewable without an account), with options to make specific pages private. My expectation is just to have the entire documentation server public, as there’s nothing I can think of where there would be a need for something that’s private to be on the documentation server in any case (e.g. credentials or the like).

TinyMCE: migrated to new rich text editor

After a whole lot of pain and problems making QuillJS (the rich text editor Deserted Chateau used up to now) work with emojis, as I documented in the last update, I ended up looking into TinyMCE after looking at it again whilst investigating other stuff. It’s open source and under the MIT license as of the newest major version, so I got it working and starting testing whether it could replace Quill instead, as maintaining a bunch of Quill and Emoji-Mart-specific overrides seems like a nightmare solution.

The conclusion is that TinyMCE is a lot better - integrating emojis has an official plugin - and I’ve moved all of the site’s rich text areas over to TinyMCE, which took a while but is done. That means private message displays, navbar areas that show messages, artwork descriptions and comments, and editors to write them.

Integration:

• TinyMCE is working, as a self-hosted library on Deserted Chateau's CDN
  
  
• Emojis integrated, using self-hosted Twemoji assets
  
  
• Private messages, artwork descriptions, comment boxes and submit artwork description areas are using TinyMCE now
  
  
• Editor styling is now in line with the rest of Deserted Chateau, mostly. A few minor parts to clean up for a few of the dialog windows (e.g. inserting/modifying links) but nothing major.

TinyMCE: performance testing

I ran into a problem during moving to the new system - TinyMCE can load slowly, or so it seems. I did a lot of performance testing to try and figure this out, which I documented here: https://github.com/tinymce/tinymce/issues/9190.

So far, I have been unable to replicate the slower results I got initially when running under normal conditions, so I don’t think there will be any issue. It was worth testing of course, but thankfully it seems to load instantly when I’m not in the Chrome devtools area (I can’t seem to replicate the results I got when keeping the cache enabled before, so I'lldo a bit more testing to be sure, but I think it isn't an issue now).

TinyMCE: Async efficiency considerations

Due to the possibility of slow loading I encountered above, I changed the code execution order of artwork submission and display code to account for cases where TinyMCE might initialise slowly. The editor loads asynchronously, so instead of loading it when the artwork information is retrieved, the editor is created immediately, and then the contents are set last to ensure that any possible bottleneck is kept to a minimum.

Quill + Emoji-Mart: Removed

I spent some time doing extra bug fixes, adding key bindings used to efficiently deal with emoji delta changes and cursor issues, and standardising toolbar layouts and positions… but ultimately, I came to realise that just won’t be a workable solution (it could work now and break in future, and there is no way I can realistically look at that as a good solution to anything). TinyMCE is much more actively maintained and used, so it’s a better choice overall.

Refactoring main HTML, JavaScript and CSS, continued

I moved various parts of the “main” JavaScript file that is loaded on page load into their own files (AppearanceManager and NavbarManager) for better code structure. Also refactored DisplayArtwork.js (the main script for artwork details pages) to be a proper class.

Now that the rich text editor is finally decided and settled, I’m starting to remove the final traces of ugly “render a bunch of HTML in JavaScript” code, most of which is for the messages and notification pages. There isn’t much of it left so that should be quite easy to do, as it can follow the template HTML structure I’ve been implementing while refactoring the rest of the code.

I've also started to improve the styling for parts of the site like the artwork details pages, where I previously had fixed widths for things like the details section that shows artist info. They're now more variable so they scale better on smaller screens, and I also want to make them change orientation for mobile screens / very small screens (so that the artworks aren't displayed in a tiny unreadable size).

Security improvements

Added various headers to the Apache configuration, to set Strict-Transport-Security, X-Frame-Options and Content-Security-Policy. As Deserted Chateau has almost no externally hosted scripts or assets, it’s pretty easy to do this without breaking anything; the only external sites I have to allow are Stripe and hCaptcha, since they can’t be self-hosted. There’s also a minor addition to the CSP for TinyMCE, as it needs to be able to add inline styling to display properly.

I did encounter a minor nuisance, in that initially the CSP blocked access to phpMyAdmin when tunneling into the server via PuTTY, but adding localhost to the allowed domains fixes that.

Artwork Galleries: SQL fix

I inadvertently noticed that, when an artwork has tags, the artwork categories were returning duplicate values (due to the SQL query grouping by artwork). I had to change the query slightly to not return any duplicate category values with each artwork, which is done now. Basically I had to change the query from getting the GROUP_CONCAT results of category IDs and settings individually, to getting them as a GROUP_CONCAT(DISTINCT(CONCAT of both)) field.