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

• API driven approach for a decoupled systems
• Components based rendering of content
• Create content using different methods:
  • from component data
  • from referenced components (e.g. used to provide child components)
  • from data source (including item filters for queries)
  • from file
• Transform content using processors (e.g. Markdown, Twig)
• Provide content to clients in different formats by processing data with Pipelines (Proof of concept)
• Content tests to check for completeness

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:

• Docker, Docker Compose (for the development environments)
• PHP, Slim, Guzzle, Monolog, MySQL
• Parsedown, Twig, EventDispatcher, Crawler
• ES2018, TypeScript
• JSON, JSON-RPC, JSON Web Token

Content Aggregation Application

• MySQL, Slim, Twig, Bulma CSS

Content Management System

• React, Redux, Fetch API
• JSX, Semantic UI

Website

• Slim, Twig
• Custom CSS, Font-Awesome
• Alpine.js

Review App

• Slim, Twig
• Vue, Vuex
• Custom CSS

Tools

• Atom, Visual Studio Code
• MySQL Workbench, Postman
• Composer, PHPUnit, Panther, Goutte, vfsStream
• Webpack, Gulp, npm scripts
• Krita, Inkscape

Screenshots

Content Modelling App: Define "Page" Type

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

CMS (React): Page Listing

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

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.

Development Environment

Code: CMS (React)

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

Code: Tests for website

Some code (in Atom) of the content tests.

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: Edit image with Krita

Editing teaser image in 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.

• Refactor to use the content provider client to retrieve (local) data:
  • Remove data from controller classes
• Generalize content creation by introducing Components like Application Teaser, More Button, Paragraph, Lead, Section, Columns
• Introduce PageControlller
• Implement Path class to resolve URL paths
• Grid component with data source
  • Projects page
• Improve handling of errors and exceptions
• Add logging (using Monolog)
• Add components:
  • Heading (with different levels)
  • Several Teaser types
  • Listing (with Listing Item Text)

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.

• Using Docker Compose for development
  • Separate container for CMS, site
  • Container for composer dependencies handling
  • Modified PHP/Apache container with mod_rewrite extension
• Backend using Slim framework, Twig template engine; API implemented using JSON-RPC
  • Authentication handling and CSRF protection is done using Middlewares
• Frontend using Vue, Vue Router, Vuex
  • Reusing widgets library

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.