Ambrosius Topor

ambrosiustopor.name

My personal website where I can present my skills, showcase my projects, share notes and impressions of my activities.

Implementation plan

  1. Launch with static files generator —
  2. Update to dynamic rendering of pages —
  3. Add API to retrieve data, using a local client —
  4. Implement content modelling/aggregation application —
  5. Implement CMS using content provider —
  6. Connect site to content provider —
  7. Add interaction features (e.g. post comments, restricted areas) — /
    • Comments — (May 2020)
    • Contact Form — (May 2020)

Capabilities

Architecture

The website consists of four parts:

  1. Website
  2. Content Modelling/Aggregation/Provider application
  3. Content Management System
  4. Review App

The idea behind having the system structured in a decoupled way like this, is that it is easier to develop each part independently, while still being able to use the other parts of the system.

Technologies

Used so far:

Content Aggregation Application

Content Management System

Website

Review App

Tools

Screenshots

Content Modelling App: Define "Page" Type

Defining the "Page" type in the Content Modelling Application.

Content Modelling Page Type

CMS (React): Page Listing

Page listing in the CMS (data is being pulled from the Content Provider application).

CMS (React) Page Listing

CMS (React): Edit Page

Editing a single page in the CMS. The input controls are rendered according to the definitions of the Content Modelling application.

CMS (React) Edit Page

Development Environment

Code: CMS (React)

Some code (in Visual Studio Code) of the CMS, written using React (with Redux).

Code: CMS (React)

Code: Tests for website

Some code (in Atom) of the content tests.

Code: Testing website

Screenshot: Development of a component

Implementation of the new "News Teaser" component, using Gulp with a task in watch mode to have the CSS rebuild automatically.

Screenshot: Development of News Teaser component

Screenshot: Edit image with Krita

Editing teaser image in Krita.

Screenshot: Edit image with Krita

History

2019-01: Switch to components-based rendering

After implementing all needed components and other parts of the build process, I was able to relaunch the site without effecting the visible part. To be safe, I not only have functional tests for back-up, but also some content tests making sure the pages get rendered correctly.

Because the page is now pulling its data through a client, it's a simple step to switch it to use the remote API once it is available. But because the format of the data is JSON, it's already possible to benefit from the current state and publish updates (new pages) quite easy.

2018-12: Headless CMS

Since the site has been driven by a data-centric approach, I'm looking into the topic of headless CMS and start to develop one myself.

2018-10: Start CMS and Site

In order to be able to publish updates faster, I start to develop a CMS to create the page contents.

The implementation is working, but I start to like the idea behind Headless CMS, hence I stop further development of the CMS.

2018-01: Initial Launch

The first version has been launched in January 2018. It was using a static site generator, which I wrote myself using PHP, Twig, Parsedown, Less, Grunt.