dto-btn/dtf-ein.github.io

Team website on GitHub Pages.

Digital Task Force website

Website for our team, working with the CIO of Shared Services Canada.

Local development

1. Install Ruby (troubleshooting).
2. Install bundler, dependencies and start the project:

# Install bundler
gem install bundler

# Install dependencies
cd /path/to/project
bundle install

# Start the project (http://localhost:4000)
jekyll serve --livereload

Add a new page

1. Create an English and French version of the page in the respective ./_pages/en and ./_pages/fr directory.
2. Use Jekyll front matter to link the pages together:

# English page
---
layout: page
title: Contact us
lang: en
ref: contact # must be same for linked English/French page
permalink: /contact-us/
---

# French page
---
layout: page
title: Contactez-nous
lang: fr
ref: contact
permalink: /contactez-nous/
---

Add translated strings

1. Edit ./_data/i18n.yml to add new English/French strings.
2. Use them in the templates like so:

{{ site.data.i18n.en.key_name }}          # English, hard-coded
{{ site.data.i18n.fr.key_name }}          # Français, hard-coded
{{ site.data.i18n[page.lang].key_name }}  # Dynamic, based on page's language

Publish changes

Any changes merged into master are automatically published.

Credit

Theme is based on the type-theme template.

dtf-ein.github.io's Issues

Add 'Digital Hour' page on Github.io

We should have a page dedicated to the Digital Hour - basic information on what, link to past and future materials that are available on GitHub.

Update automated tests with main menu behaviour

Main menu is currently in digital-hour branch.

Add 'Meet the Team' to GitHub.io

We should add a picture and brief bio, as well as a ink to everyones meet the team material, on our GitHub.io page

Add pipeline

Should include:

• linting
• valdation/a11y testing

Fix mobile style of site

• Menu needs to collapse or move to second line.
• Font sizes need to adjust.

Improve README docs

Should include instructions on:

• Environment setup
• Template features (posts/pages)
• License & credit

Fix landing page style

Need to improve how the English/French landing page looks.

Github.io Page - basic setup with i18n functionality

I'd like to set up a Github.io page to share our work in the open. We can go live before perfection, but we should aim for Accessibility and Bilingualism as much as possible.

The GCDevOpsLeage page can be used as an example (created by Guillaume Charest). Deepl was used for french translations.

https://gcdevops.github.io/

Add visual regression to Cypress tests

Allow for comparison of screenshots.

Adjust fonts/spacing of template style.

If possible, tie in with SSC 3.0 branding.

Add Contact details

Should include same details as the intro deck. These can either be on the home page or added to a contact page.

Include FIP header on team page.

A tip from a friendly source strong hints that we should include the FIP header on our site.

Example here: https://digital.canada.ca/

Create dev VM Vagrantfile

• ubuntu/trusty64 ubuntu/xenial64 base image.
• Should provision Docker and any other dev tools needed.
• Use VirtualBox provider for now. Switch to Hyper-V later.

Improve pipeline

Accessibility testing

• Use cucumber-puppeteeer with node-puppeteer image.
• Simple package.json with local dev server that serves generated _site directory.

Performance

• Cache gem and node_modules between pipeline runs.

# Gems
      - save_cache:
          key: deps-gems-{{ checksum "Gemfile.lock" }}
          paths:
            - vendor/bundle

# Node
      - save_cache:
          key: deps-node-{{ checksum "package.json" }}
          paths:
            - node_modules