akjy / sti-ui

Frontend code for the new savetheinternet.eu website

STI-UI

Frontend code for savetheinternet.eu

Translations

Config File

Please have a quick look at the generated language specific config file here:

./config_[TWO_LETTER_CODE].yaml

Layouts / Homepage

The homepage itself is translatable in HTML form via layouts / layout partials only.

The corresponding layout files needed for translation (based on the English originals) will have been created and put here:

./layouts/[TWO_LETTER_CODE]/

Content / Content Subpages

We need a consistent content files structure in order for Hugo to generate the corresponding URL paths. Most of the content files are stubs only but an example for a pure content based page is FAQ. All files in content should be written in Markdown. Files in the root content directory overrule any corresponding content file from themes/sti/content.

The corresponding content files needed for translation (based on the English originals) will have been created and put here:

./content/[TWO_LETTER_CODE]/

Set language to be ready for building (and deployment)

To mark certain languages ready to be built (and deployed) add the corresponding two-letter-codes as a new line in:

./active_languages.conf

Build process

HTML

• Download and install hugo.
• Continuously build and watch for development (builds to development server cache; ATTENTION: the path will be absolute in development mode i.e. /faq ):

cd /STI-UI
hugo server --config config_[TWO_LETTER_CODE].yaml --verbose

• Build for production (builds to /public/en):

cd /STI-UI
hugo --config config_[TWO_LETTER_CODE].yaml

Assets

We have adapted the pragmatic Hugo Skeleton theme by Savio van Hoi which uses Gulp for cross-platform compatible asset building.

• Change to STI Hugo theme cd /themes/sti.
• Download and install node.js v5.7.1 via the official installer or via nodenv (we use 5.7.1 locally in themes/sti).
• Run npm install.
• Continuously build and watch for development (builds to the STI theme's static directory; Hugo picks this up for now and will use it within /public):

cd /STI-UI/themes/sti
npm start

• Build for production:

cd /STI-UI/themes/sti
npm run build

Internationalisation

Different languages have different root config files:

config_[TWO_LETTER_CODE].yaml

E.g. build German website to /public/de with:

hugo --config config_de.yaml

Deployment

Run without parameters to see usage of deploy script:

cd /STI-UI
./build_and_deploy.sh

! This is an important last step before deploying as it provides all assets through the root url path until Hugo provides a better solution natively !

Questionnaire specifics

This is about the iFrame included consultation page ("Questionnaire") and the corresponding backend adaptations.

Backend HTML templates

All questionnaire templates needed for inclusion and adaptation on the backend can either be built locally or viewed and downloaded from staging:

• Questionnaire Template Step 1
• Questionnaire Template Step 2
• Questionnaire Template Step 3
• Questionnaire Template Step 4

Backend Assets

All asset files/directories should be copied verbatim (to the public path of the backend server). E.g. "fonts" should simply be made accessible from "https://consultation.savetheinternet.eu/fonts" (without language path namespacing).

The asset files can be found in the repository:

themes
   └── sti
        └── static
             ├── fonts
             ├── images
             ├── javascripts
             └── stylesheets