level-level / ll-voordemensen
Unofficial plugin to access the VoordeMensen ticket platform directly from WordPress
Installs: 1 716
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 7
Forks: 1
Open Issues: 0
Type:wordpress-plugin
Requires
- php: ^8.0
Requires (Dev)
- level-level/coding-standards: ^4.0
- level-level/phpstan-config: ^1.0
- niels-de-blaauw/php-doc-check: ^0.2.2
- phpstan/extension-installer: ^1.3
- szepeviktor/phpstan-wordpress: ^1.3
README
VoordeMensen (ll-voordemensen)
Unofficial plugin to access the VoordeMensen ticket platform directly from WordPress
Installation
Zip download (recommended)
To download and install this plugin in your WordPress website, follow the steps below:
- Go to the releases tab and find the latest release.
- Download the zip named
ll-voordemensen-x.x.x.zip
(where x.x.x is the version number). - Rename the downloaded zip to
ll-voordemensen.zip
. - Extract the zip file. Make sure it puts the contents in a directory called
ll-voordemensen
. - Put the extracted folder and it's contents inside the
wp-content/plugins
directory of your WordPress installation. - Activate the plugin via the wp-admin panel.
Composer installation (alternative method)
It's also possible to download the plugin via Packagist.
Keep in mind that if you do, your composer should be setup in a way that packages of the type wordpress-plugin
are installed in your wp-content/plugins
directory.
Configuration
To configure the plugin, just fill in your client name in the VoordeMensen plugin settings screen.
Development
Setup
- Create a new WordPress installation using the latest twenty-* theme.
- Navigate to the
wp-content/plugins
directory. - Clone this repo there, so it creates the
ll-voordemensen
directory. - Navigate to the
ll-voordemensen
directory, and from there, run:
composer-install npm ci npm run build
Run composer run test
to verify results locally (more info about tests later in this file).
Releasing
- Merge all PR's in the
main
branch. - Change the version number in
ll-voordemensen.php
. - Wait for all GitHub Actions to finish.
- Update the created draft release, set a tag and version name, in SEMVER structure like vX.X.X.
- Publish the release.
Composer
Composer is used to manage the autoloading and automatic testing. More on the testing subject can be found later in this document.
Webpack
Usage
npm run start
npm run lint
npm run fix
npm run build
npm run scripts:lint
npm run scripts:fix
npm run styles:lint
npm run styles:fix
npm run browsersync
npm run bundle-analyzer
If you run into any problems locally with the initial installation of the node_modules (especially webpack) try setting your local environment to DEV by executing the following on your CLI:
export NODE_ENV=development
The cause of the problem is probably the Node version and the default state it's in (it used to install all packages, but recently changed to production modules only).
Config
Using custom config for webpack dev server. Duplicate the development/config.local.json.example
file and save it as development/config.local.json
. In this file you add your own project url, set secure based on your dev protocol and set a port. This config is being used to overwrite the default URL of your local dev environment. This applies to the webpack-dev-server and browser-sync.
Example:
{ "url": "http://local.my-site.test", "secure": false, "port": 1234 }
Images
Webpack automatically processes images used in the SCSS. For the images that you use directly in php, import them into index.js
.
import 'images/logo.jpg';
Get the image URL in the .php files by using the ( new \LevelLevel\VoorDeMensen\Assets() )->get_assets_directory_url()
function.
For example placing a logo in the header:
<img src="<?php echo ( new \LevelLevel\VoorDeMensen\Assets() )->get_assets_directory_url(); ?>/images/logo.jpg" alt="">
Lazyload
We use default browser lazyloading for images. Usage example:
<img src="<?php echo ( new \LevelLevel\VoorDeMensen\Assets() )->get_assets_directory_url(); ?>/images/thumbnail.jpg" loading="lazy" alt="">
Linter
- Styleint: Styleint is used, rules are set in
.stylelintrc.json
. View all doc rules - JS: eslint is used, rules are set in
.eslintrc.json
. View all doc rules
Localization
Default text language for this repo is English.
Make sure you translate all strings with the text-domain ll-vdm
.
Run: composer run make-pot
for updating the .pot file.
Automated testing
There are multiple code tests in place.
- Composer, to check if the composer files are intact
- PHPCS, to check if you are following the Level Level PHP code standards
- Psalm tests, that searches for possible mistakes in your code
- PHP Doc Check, to check if complicated functions have comments explaining the functionality
GitHub actions
On every pull-request, a GitHub action is run that verifies the project, based on the
composer run test
results. You need to provide the following secret in the
repository (under settings/secrets):
- SATIS_DOMAIN (without protocol)
- SATIS_USERNAME
- SATIS_PASSWORD
Manually
Run composer run test
to verify results locally.
Fixing
Run composer run fix
to use automated fixing tools such as phpcbf.
Working locally with https
If you locally work with https you need to enable Chrome to allow invalid certificates. To enable this go to: chrome://flags/#allow-insecure-localhost
and enable the Allow invalid certificates for resources loaded from localhost.
option.
Editor config
Theme comes with a .editorconfig file. For this to work you need to install a plugin that uses the .editorconfig
file.