ambrosiustopor.name
My personal website where I can present my skills, showcase my projects, share notes and impressions of my activities.
Implementation plan
- Launch with static files generator —
- Update to dynamic rendering of pages —
- Add API to retrieve data, using a local client —
- Implement content modelling/aggregation application —
- Implement CMS using content provider —
- Connect site to content provider —
- 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:
- Website
- Content Modelling/Aggregation/Provider application
- Content Management System
- 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.