From e282b3c3c922700094ad23ee5469d3c4dbb4f70a Mon Sep 17 00:00:00 2001 From: Tancre Date: Wed, 26 May 2021 11:53:59 +0200 Subject: [PATCH] more info on the website and how it works --- README.md | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++- gulpfile.js | 3 ++- 2 files changed, 56 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7732a7d..5dbe7ec 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,6 @@ > https://biobulkbende.org Our public website made by members! - ## Hacking - Make sure you have installed git, node.js and npm @@ -13,6 +12,60 @@ Our public website made by members! - From within the folder install all packages: `npm install` - Run gulp for automation: `gulp watch` +## Structure + +The website is served from the folder /app + +The folder /assets is only for developement while the folde /bundle contains the files linked to index.html and /en/index.html + +### Html + +There are two pages: + - index.html (Dutch) + - /en/index.html (English) + +Changes to the text can be done directly to these files without having to run any automation. + +### (S)CSS + +The CSS files to be changed are stored in /assets/scss which contains: + * /base (global CSS declarations) + * /modules (specific CSS declarations) + +The CSS is written in SCSS and after changing it must be compiled and bundled togheter. + +The command `gulp watch` runs automation and make sure that when you save the change in atuomatic everything is compiled and bundled. + +The final file is stored in /bundle/styles and provide the CSS to index.html and /en/index.html + +### JS + +The JS file to be changed are stored in assets/js/modules + +The JS is writted in ES6 and after changing it must be compiled in ES5 and bundled togheter. + +The command `gulp watch` runs automation and make sure that when you save the change in atuomatic everything is compiled and bundled. + +The final file is stored in /bundle/scripts and provide the JS to index.html and /en/index.html. + +### Media + +The media are stored in /assets/media containing: + * Icons + * Fonts + * Images + +Icons are compressed in a sprite through the command `gulp icons`. (This is complicated as it generates a single sprite with all the icons togheter and a CSS which points at the right icon in the sprite). After this command automation for the CSS must be runned. + +Images are minified through the command `gulp images`. + +All the media are copied with the command `gulp copyMediaInBundle` (it also minified the images) into the folder /bundle/media which provide the media to index.html and /en/index.html. + +If you want to change an Image you have to put it in /assets/media/images and run `gulp copyMediaInBundle`. The html must refer to the image that has been copied and minified in /bundle/media/images. + +### Video + +The video is stored on vimeo. ## Deployment Just push commits and our [CD config](https://drone.autonomic.zone/biobulkbende/biobulkbende.org) will deploy the website. diff --git a/gulpfile.js b/gulpfile.js index a5dd5a4..8ba8ef4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -148,6 +148,7 @@ function copyFonts() { } exports.watch = watch; +exports.images = imagesTask; exports.icons = series( beginClean, createSprite, @@ -155,7 +156,7 @@ exports.icons = series( copySpriteCSS, endClean ); -exports.images = imagesTask; + exports.copyMediaInBundle = series( copySpriteGraphic,