Modernize kde.org css
Closed, ResolvedPublic

Description

One of the problem encountered with the redesigning of *.kde.org is that each websites uses a similar CSS file, but not exactly the same because of some differences in the HTML structure.

A solution would be to move from CSS to SASS and create multiple modules, and for each website generate a different CSS file, that import a different set of SASS modules.

Now about the Sysadmin part, for this to work I would need to have a repo 'websites/aether-sass', with a CI/CD job that create all the CSS files and download them to cdn.kde.org.

It is possible to create such a ci job?

Related Objects

StatusAssignedTask
OpenNone
Resolvedbcooksley
ognarb created this task.Jul 28 2019, 4:20 PM
Restricted Application added a subscriber: sysadmin. · View Herald TranscriptJul 28 2019, 4:20 PM
bcooksley added a subscriber: bcooksley.

That can certainly be done (all the Jekyll/Hugo/etc sites are built using a similar method).

You'd be looking at generating the full content of https://cdn.kde.org/aether/ using this tooling?
If so, would you mind detailing the tools, etc. we'll need in the environment to run this generation process?

I would like to use Symfony Encore, because I'm familiar with this tool from work.

For the installation, I only need a recent version of Nodejs and Yarn.

For the ci, the script would looks like this

# Update yarn/dependencies
yarn install

# Create CSS files and js files
yarn encore production

# Upload  with scp
scp -r public cdn@kdeserver.org/aether
# or with rsync
rsync -????? public cdn@kdeserver.org/aether

For the beginning I would push to https://cdn.kde.org/aether/aether-dev instead so that I can test without worries. ;=)

I've now provisioned the repository part of this request - https://invent.kde.org/websites/aether-sass

Thanks I will first for the time being start creating the CSS code for the mediawiki and do some manual test with wikisandbox ;) if this work, we can then start writing the ci job to upload to cdn.kde.org

So I started working on it, and it now exports bootstrap.{css,js} and aether-mediawiki.css.

I also created a merge request for a gitlab ci: https://invent.kde.org/sysadmin/ci-tooling/merge_requests/17

bcooksley closed this task as Resolved.Aug 5 2019, 4:11 AM
bcooksley claimed this task.

This is now all setup and ready to go.
https://binary-factory.kde.org/job/Website_cdn-kde-org-aether-devel/

Content will be published automatically at https://cdn.kde.org/aether-devel/

ognarb added a comment.Aug 5 2019, 7:05 AM

Thank you :) Now I can move the CSS of all websites to a unified code base ;)

(Side note: due to how the system is architectured, in the future it will be possible to operate separate branches for devel and production easily)

I added a small merge request https://invent.kde.org/sysadmin/binary-factory-tooling/merge_requests/9 to generate two versions: one with versioning and one without.

I've now reviewed and merged that.

The versioned files will appear on the next job run.