index-en.md

title	altLangPage	dateModified	description	lang
GCWeb, the WET-BOEW Canada.ca theme	accueil.html	2021-06-16	Home page describing all the components of the Canada.ca theme, named GCWeb.	en

{::nomarkdown}

The page templates and design patterns below comprise a reference implementation of the Canada.ca design system, including the mandatory requirement of the Content and Information Architecture (C&IA) Specification. Government of Canada departments and agencies can contribute additional patterns and templates via GCWeb github repository.

Download GCWeb theme v9.4.1
({{ page.dateModified | %F }} - Release notes)

• GCWeb v5 Summary and others technical notes
• Implementing GCWeb
• Components
• Templates
• Méli-mélo features
• GC promotional thematic
• Sites and global functionality

Found an C&IA implementation issue or you want to contribute at their development, let us know by submiting GCweb issue, sending pull request or by participating at one of our WET-BOEW weekly Tuesday code sprint.

Components

{% assign page_group = site.data.i18n.page_group[ page.lang ] %} {% assign comp_status = site.data.i18n.component_status[ page.lang ] %}

{% assign components = site.data.components %} {% for component in site.data.components %} {% assign list-pages = component.pages %}
• {{ component.title[ page.lang ] }} (State: {{ comp_status[ component.status ] | default: "Undefined" }})
  {% for pgGroup in list-pages %} {% assign grpkey = pgGroup[0] %}
  • {{ page_group[ grpkey ] | default: "Unknown group" }}
    {% assign examples = pgGroup[1] | where: "language", page.lang %} {% for example in examples %} {% if example.path %}
    • {{ example.title }}
    {% elsif example.url %}
    • {{ example.title }}
    {% else %}
    • {{ example.title }}
    {% endif %} {% endfor %}
  {% endfor %}
{% endfor %}

Templates

{% for template in site.data.templates %} {% assign list-pages = template.pages %}
• {{ template.title[ page.lang ] }} (État: {{ comp_status[ template.status ] | default: "Non définie" }})
  {% for pgGroup in list-pages %} {% assign grpkey = pgGroup[0] %}
  • {{ page_group[ grpkey ] | default: "Groupe inconnu" }}
    {% assign examples = pgGroup[1] | where: "language", page.lang %} {% for example in examples %} {% if example.path %}
    • {{ example.title }}
    {% elsif example.url %}
    • {{ example.title }}
    {% else %}
    • {{ example.title }}
    {% endif %} {% endfor %}
  {% endfor %}
{% endfor %}

Méli-mélo

Consult méli-mélo dedicated page

Sites and global functionality

{% for item in site.data.sites %} {% assign list-pages = item.pages %}
• {{ item.title[ page.lang ] }} (État: {{ comp_status[ item.status ] | default: "Non définie" }})
  {% for pgGroup in list-pages %} {% assign grpkey = pgGroup[0] %}
  • {{ page_group[ grpkey ] | default: "Groupe inconnu" }}
    {% assign examples = pgGroup[1] | where: "language", page.lang %} {% for example in examples %} {% if example.path %}
    • {{ example.title }}
    {% elsif example.url %}
    • {{ example.title }}
    {% else %}
    • {{ example.title }}
    {% endif %} {% endfor %}
  {% endfor %}
{% endfor %}

WET-BOEW feature demos styled with Canada.ca theme

WET-BOEW feature overview

{:/}

GCWeb project documentation

• GCWeb theme - Meta information
• Quick implementation guide - GCWeb theme
• Migration instruction - GCWeb theme V5
• Archived - Documentation - GCWeb English
• Archived - Releases English
• Skeleton - Static header/footer - Bootstrap 3
• Prototype skeleton - Static header/footer - Bootstrap 4

Evaluations and reports

• 1 - Accessibility assessment as 2018-11-14
• 2 - Regression user acceptance testing as 2018-11-16

Developping for GCWeb

Install NodeJS

Building GCweb

• Build a local development version: grunt or grunt debug
• Run code quality check: grunt test
• Build production files: grunt dist
• Compile and assemble méli-mélo:
  • Run local: grunt méli-mélo
  • Run from compiled dist: grunt méli-mélo-runLocal
  • Run from wet-boew sites : grunt méli-mélo-remote
• Regenerate site web content: grunt site-contents
  • _data/components.json
  • _data/sites.json
  • _data/templates.json
  • _wetboew-demos/**

Run GCWeb wetsite locally

Ensure that you have builded GCWeb first

After your are running docking container or the docker composer you will be able to access your local website at: http://localhost:4000

Build Dockerfile locally

docker build -t jekyll-with-env-options .

Run your image

grunt debug

docker run -it --rm -v "$PWD":/usr/src/app -p "4000:4000" --env JEKYLL_OPTIONS='--config _config.yml,_localJekyll.yml' jekyll-with-env-options

alternative with docker-compose

This version leverage the remote theme wet-beoew/gcweb-jekyll. This equivalent if you run with gh-pages through your own GCWeb repository.

docker-compose up

Run the continous integration and deployment script locally

Install ACT - https://github.com/nektos/act

Github fork needed:

• wet-boew/gcweb
• wet-boew/gcweb-jekyll
• wet-boew/gcweb-compiled-demos
• wet-boew/themes-dist
• wet-boew/themes-cdn

Run the continuous deployment script

act -f deploy-gcweb -s my_token=<XXXXXXXXXXXXXX> -s my_username="<GITHUB USERNAME>" - my_email="<GITHUB HANDLE>@users.noreply.github.com" -a <GITHUB HANDLE>

Where:

• <GITHUB USERNAME>: Your name, like "John Doe"
• <GITHUB HANDLE>: Your github id
• <XXXXXXXXXXXXXX>: Your personal access token with access to public repository

Refresh your github pages with the latest theme changes

You can make a commit to your site and it will get regenerated with the latest version of the jekyll theme. Alternatively, the following curl command will told github to regenerate your site.

curl -u <GITHUB HANDLE>:<XXXXXXXXXXXXXX> -X POST https://api.github.com/repos/<GITHUB HANDLE>/<GITHUB REPOSITORY>/pages/builds

Where:

• <GITHUB HANDLE>: Your github id
• <XXXXXXXXXXXXXX>: Your personal access token with access to public repository
• <GITHUB REPOSITORY>: Your web site github repository, like "jekyll-website"

Note: A manual update is required if you have specified a version for your jekyll remote theme in your config.yml file.