DenoPress Part 3 — Edit Posts

John Coonrod
Tech Tonic
Published in
3 min readJul 29, 2021

--

Mashup by the author

In case you are just tuning in, this is my adventure in attempting to recreate Wordpress without PHP by using JavaScript and Deno, a server app designed to replace Node.js.

The code for DenoPress is in a public github repository jcoonrod/denopress.

The Medium article for Part 1 described how to build a stripped down WordPress server and Part 2 added various features for page and post navigation and images.

This Part 3 represents a change in plans! I had originally thought to integrate Gutenberg into DenoPress. However, I have this hatred of frameworks and dependencies and Gutenberg relies on a lot of them. So — let’s start with something much easier — adding the ability to add and edit pages and posts using the TinyMCE editor.

TinyMCE has evolved a great deal from the last time I used it, and so in this Part we’ll see how far it will take us.

3.1 Refactor the web server

The built-in web server functionality of Deno is quite good, and in a recent article I described how to meet the needs of this project without any third-party packages like Drash.

3.2: Refactor the URL processor

In Part 2, I added some spaghetti code to process the home page, a category list of posts and individual posts. Before adding many more features, these have been refactored into separate functions (home, category and page) and the use of an external template.ts.

3.3 Add the TinyMCE editor

I’ve added an “edit” function to the URL process options, and added a “pencil” edit option alongside the page title in the page function, and a “circle-plus” for new pages to the site title. Now when you click on the pencil, you can edit the page contents and its title in a form.

This, of course, then requires a save function to receive the submitted POST FormData. I was new to using that object . Thanks to Mayank Choubey who let me know what I needed to understand. The reference document is here.

3.4 Maintaining consistency with WordPress

Nearly all the content of WordPress is stored in the wp_posts table. For updating pages and posts created in WordPress is pretty easy — simply updating the record according to its id. Creating an entirely new page or post that can be read in WordPress as well as DenoPress means dealing with linkages.

For now, the only fields I save in an update is the post_title, post_name (a lower-case no spaces version of post_title) and post_content.

WordPress does not set defaults on a number of columns, so my insert function needs to set toping, pinged, post_content_filtered.

Also it appears that the Deno mysql driver does not include a “sanitize” function to make sure your strings are safe for mysql. Fortunately, there was nice answer to this here on stack overflow. Using it forced me to learn how to disable the “no-control-regex” rule in the built-in linter by adding this line at the top of denopress.ts:

// deno-lint-ignore-file no-control-regex

What’s Next!

I now have a nice “toy” WordPress that actually can generate and edit pages in the WordPress database. At this point, it doesn’t even pretend to deal with post categories, tags and featured images — but that bit is probably pretty straight forward. In Part 4, I will add authentication and the ability to run it on the Deno.com cloud in the wild! From there I will figure out how to clone some of the most important features of Gutenberg, like Columns, while avoiding React.

--

--