Ambrosius Topor

Projekt

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 dynamic features (e.g. post comments, restricted areas)

Capabilities

Architecture

The website consists of three parts:

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

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

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

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 rebuilt 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.