Since my latest post two months ago, a lot of things changed regarding the KDE websites. More and more KDE websites are switching to the Aether theme designed by Ken Vermette. You can follow the progress at the Phabricator task T10827.
- All three wikis were updated to MediaWiki 1.31 and are now using the Aether MediaWiki theme. There are some visual glitches when using the dark theme version that can still be observed. They are usually very simple to fix, so please report them in bugs.kde.org.
- The French speaking KDE websites was also updated to use the Aether Jekyll theme. It’s only an aesthetic change and some parts of the content still need to be updated. If you speak French and want to help, contact the French speaking KDE community in #kde-fr (IRC/Matrix) or via email.
- Choqok also got a new website.
Behind the scenes
Using a single codebase for the CSS theming
One of the big problems encountered was the multiplication of different versions of the CSS files. There is a CCS file used by konsole.kde.org and choqok.kde.org, one for all the MediaWiki instances, and one for kde.org. This was getting harder and harder to maintain, so I decided to create a single SASS codebase for all the KDE websites.
For the moment, the CSS code is only split into multiple SASS modules and the tooling builds multiple versions using some generic components (breeze buttons) and other more specific components (MediaWiki dark theme).
Compiling the SASS files to CSS is done using the KDE Binary Factory and produces two versions of each file, one with versioning (e.g. boostrap.hi8yh2huh.css) which is intended for all the dynamics websites (MediaWiki, kde.org, …) and another one without versioning for the static websites (Hugo and Jekyll).
Using versioned assets in a MediaWiki skin
MediaWiki uses ResourceLoader to load assets, but in our case we want to use the Webpack
manifest.json to load the versioned file. For this, I’m using a Symfony
component asset that is doing
most of the job for me.
Here is the code used:
$urlPackage = new UrlPackage( 'https://cdn.kde.org/', new JsonManifestVersionStrategy('https://cdn.kde.org/aether-devel/version/manifest.json') ); $out->addStyle( $urlPackage->getUrl('aether-devel/version/bootstrap.css'), 'all' );
I actually created a fork of the JsonManifestVersionStrategy class because of a bug in the library. I hope my change will be merged upstream.
New features in the Jekyll theme
The Jekyll theme got some nice new features added by various contributors.
- Eike Hein added support for meta tags allowing some basic SEO from page metadata
- Jumpei Ogawa added support for a custom navigation menu
- I added a blog component
And special thanks to Mark Winter for fixing a small typo.
There are multiple other websites in the pipeline and any help is welcome.
- Update RKward website
- Update KMyMoney website
- Update Umbrello website I already started it, but if someone wants to take care of it, they are welcome.
- Update kde.org/plasma-desktop There are still some screenshots and videos missing.
If you are interested in one of this tasks, join us in #kde-www in IRC/Matrix.
Websites Bof at Akademy
I’m going to Akademy and I will organize a BoF about the websites. It will take place Tuesday, 10th September 2019 in room U2-08b, just after the Plasma BoFs.
If you are interested and want to attend, you can put yourself in the list T11423.