85 lines
2.5 KiB
Markdown
85 lines
2.5 KiB
Markdown
# biobulkbende.org
|
|
|
|
> [biobulkbende.org](https://biobulkbende.org)
|
|
|
|
Our public website made by members.
|
|
|
|
## Hacking
|
|
|
|
- Make sure you have installed `git`, `node` (v14 LTS) and `npm`
|
|
- Clone this repo: `git clone https://github.com/biobulkbende/biobulkbende.org`
|
|
- From within the folder install all packages: `npm install`
|
|
- Run gulp for automation: `gulp watch`
|
|
|
|
## Deployment
|
|
|
|
(You need to be a member of the systems workgroup to do this).
|
|
|
|
```
|
|
make
|
|
```
|
|
|
|
## Structure
|
|
|
|
The website is served from the folder `/app`. The folder `/assets` is only for
|
|
development while the folder `/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
|
|
together. The command `gulp watch` runs automation and make sure that when you
|
|
save the change in automatic 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 files to be changed are stored in `assets/js/modules`. The JS is written
|
|
in ES6 and after changing it must be compiled in ES5 and bundled together. The
|
|
command `gulp watch` runs automation and make sure that when you save the
|
|
change in automatic 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 together and a
|
|
CSS which points at the right icon in the sprite). After this command
|
|
automation for the CSS must be run.
|
|
|
|
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.
|