CMS
Content management system for my personal website.
Motivation
It should be easy to publish news on my website, instead of doing it in a rather manual way.
Technologies
- Vue, Vue Router, Vuex
- Single file components
- Manual webpack setup with loaders
- JSON, JSON-RPC, UUID
- PHP7, Composer, Slim, Twig
- Webpack
- Docker, Docker Compose
- Sass, Font Awesome
- API, REST
Development Environment
The development environment is set up with Docker Compose, defining separate containers for the CMS and the site, both having their container for the dependency manager (Composer).
version: '2'
services:
cms:
build: ./dockerfiles/php7-apache2
ports:
- "8082:80"
volumes:
- ./cms:/var/www/html
A custom Dockerfile for the PHP Apache image (additional extensions, modified document root) has been used.
FROM php:7.2.10-apache
RUN docker-php-ext-install -j$(nproc) mysqli pdo_mysql mbstring
RUN a2enmod rewrite
ENV APACHE_DOCUMENT_ROOT /var/www/html/public
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
The configuration (CMS API keys, etc.) is defined by environment variables.
private function cms_commit($arguments)
{
if (empty($arguments['data'])) {
return false;
}
$uuid = \Ramsey\Uuid\Uuid::uuid4()->toString();
$data = [
'jsonrpc' => '2.0',
'id' => $uuid,
'method' => 'commit',
'params' => [
'data' => $arguments['data'],
'api-key' => \getenv('SITE_API_KEY')
]
];
$body = json_encode($data);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, \getenv('SITE_API_URL'));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $body);
$result = curl_exec($ch);
return [
'result' => $result,
'error' => curl_error($ch)
];
}
Example store mutation to update a path object.
import uuidv4 from 'uuid/v4'
import types from './../mutation-types'
export default {
[types.UPDATE_PATH] (state, path) {
const index = state.paths.findIndex(_path => _path.id === path.id)
if (index >= 0) {
const patch = Object.assign({}, state.paths[index], path)
state.paths.splice(index, 1, patch)
}
else {
throw new Error(`Path with id "${path.id}" was not found`)
}
}
}