Landing page for Cangopal
- Execute
npm installto install dependecies - To build the website, just type
npm run build - If you want to update something, run
npm startand update whatever inwwworlocalesfolders.- You can see the changes in
docsfolder.
- You can see the changes in
- Once is finished, the built version of the website is in
docsfolder.
The project is structured in three main folders:
www: The source code for the website.locales: The languages and localization.docs: The "dist" folder (called docs to deploy on gh-pages)
Also, there is a file called gulpfile.js, which is in charge of automating the build process, and a package.json with the npm info (dependencies, scripts...).
Let's see in depth every single folder.
This folder contains the main website structure. This is not the final source, but the templates to build from.
There are some folders, such as img, js, css or fonts, to keep everything structured. Inside it, just files.
Every .html file does not contain any literal text, or any locale dependant information. Instead of it, we're using the static-i18n package. This means, every literal will be setted this way:
<p data-t> title </p>or
<p data-t> home.title </p>To use some translation as value of a property (i.e. <html lang="en">) just type:
<html data-attr-t lang-t="html.lang>
<!-- ... -->
</html>
All the translation literals are in the locales folder. Let's see more about it.
This folder contains the language and localization data. Each language is a JSON file, with all the key value pairs. The name of the file will be the shortcode of the language.
This means, we can have es.json for Spanish and en.json for English.
Keys shall be the same in every language, and values are the literals we want to setup in each website version.
If you add a new language, remember updating the
gulpfile.jsonconfig, so it's included in the build proccess.
This folder is the typical dist folder. Is called docs, so we can easily deploy on github pages. Folder name can be updated in the gulpfile.js config.
There's a default version, and a folder for each other language. So, the website are available as a static version of the default lang in example.com and the localized version in example.com/en (or any locale shortcode).
Don't touch anything inside here, or changes will be lost in the next build. To update somethig, go to www folder if is a markup/styles thing, or to locales folder if is something related with a text or literal
This is the file with all the automated tasks for building the website from templates, to final versions. Let's see the existing tasks.
This script is configurable, so you can change the origin or destiny folder names, and also the locales folder name. To do so, open it, and update whatever you need. The config variables are setted in the middle of some comments like this:
// #### CONFIGS ####
const dist_folder = 'docs';
const source_folder = 'www';
const locales_folder = 'locales';
// ## END CONFIGS ##Lints all the json files (specially in locales folder), to ensure the following tasks don't fail becouse of this.
Compile templates in www folder to final html into docs folder
Execute, in series, json and compileI18N
Move css styles from origin folder (www) to docs folder.
Move js scripts from origin folder (www) to docs folder.
Execute, in series, i18n, styles and scripts
Actively listens changes on every file in www and execute the task required to update the changes in docs folder. If a .css file is changed, it executes styles task. If a locale .json file is updated, or an .html, it executes i18n task. Same with .js and scripts.
This task is specially usefull to keep it running while developing, so you work on www and locales files, and can see the changes automatically in docs folder.