Description

A personal website to host a biography, a blog, and personal/professional projects. Includes a CMS to add/update/update posts from a database, as well as add/update/delete images. See mockups for original designs.

The live site can be viewed here

Motivation

To create a CMS with similar (and much simpler) functionality to Wordpress using Node.js on the back-end. Wordpress allows you to distinguish post-types for different purposes- posts can be given a hierarchy and displayed in a non-blog-post manner (for example, a blog post can be 'featured' and set as a home past). The same idea applies to this site; you can create a post and set its category to 'CSS' to appear as a blog post, you can then change the category to 'Portfolio' and it will appear as a portfolio piece in a different area of the site. The home post used to display the first post on the site, its category cannot be changed be changed and it can't be deleted.

Github pages is another inspiration for its manipulation of markdown files. The marked npm plugin allows serious customisation of outputted markdown syntax. This plugin is used to add custom BEM classes to elements, as well as respond to markdown triggers which cause certain classes to appear. For example;

[Image1](image.jpg)

Would cause the following to render;

<img class="img" src="image.jpg" title="Image1">

Triggers can be added to add custom classes;

[Image1 %center% %small%](image.jpg)

translates to-

<img class="img img--center img--small" src="image.jpg" title="Image1">

With css applied-

.img {
  width: 100%;
}

.img--small {
  width: 50%;
}

.img--center {
  display: block;
  margin: 0 auto;
}

Technologies

• Node.js
• Hapi.js
• Sass
• PostCSS
• Webpack
• ES6
• Handlebars
• PostgreSQL

Testing Tools

• Tape
• Istanbul
• Codecov

Admin Screenshots

For logged in users, they can see an edit button below their posts-

When the user hits edit, they're taken to a restricted edit page for the post-

Here they can update the main image, edit the title, category, preview the markdown text (and embed images in the text), as well as submit changes and delete the post if they wish. If they choose to select an image;

They'll be shown an overlay of previously uploaded images, where they can upload a new image, edit the image title, delete an image, or go back.

If they choose to make the post hidden (so only they can view it) they can deselect the 'Live' button. Then when viewing the post snippet in the blog view they'll be warned that it's not live-

Database

Postgres is used to store the database, with queries passed to it via the npm module pg. Features of the schema include-

• Posts are split into 'posts' and 'postbodies' tables. Post bodies can be quite lengthy, and often when querying posts only meta information is needed. So post bodies are stored in their own table, queries are used to update/insert both at the same time, and when a post gets deleted the postbody is automatically deleted (postid INT REFERENCES posts ON DELETE CASCADE)
• Images are also split into 'images' and 'imagebodies'. The image bodies are stored as blobs, and the server deals with the logic of extracting the data and converting it to a buffer when sending to the client.
• Inner Joins on other tables are used to get information about a post (including the postbody, category, ownername), but Left Joins are used on the image table (as sometimes an image used for a post will be deleted, so the post can still queried if the image id is no longer used)