Create Vue starter app

[ethanWallace]

A starter app in the Vue framework to allow developers a quick and easy start using the GC Design System in the Vue framework.

Acceptance criteria:

• [x] Government of Canada branding (header/footer)
• [x] I18N (English/French)
• [x] Intro page
• [x] Report a bug page
• [x] Basic rendering end-to-end tests (app renders)

Done when

• [x] English pages
• [x] French pages
• [x] Merged into gcds-examples repo under starter-app directory
• [x] e2e tests that verify the app has:
  • [x] Rendered
  • [x] Page navigation
• [x] All text have equivalents in french and english
  • [x] French
  • [x] English

[daine]

Did some prep work to visualize this while working on the vue starter app: https://miro.com/app/board/uXjVKsYgVU8=/?moveToWidget=3458764596479395624&cot=14

Didn't get to finish it today, but I was in the middle of adding the following pieces:

• i18n
• Removing state management (pinia) - no purpose for it
• Adding a report a bug page that will eventually submit to https://github.com/cds-snc/gcds-components/issues/new?assignees=&labels=&projects=&template=bug_report.yml&title=bug%3A+
  • adding parameters to that URL to prefill the data like:
  • &package_version=123
  • Added one unit test (may need revision)
  • Missing proper breadcrumbs
  • Missing navigation
  • Needs e2e tests
  • Needs translation for any content
  • Version using typescript

Here is the branch: https://github.com/cds-snc/gcds-examples/tree/feat/vue-starter-app

Here is the folder inside the branch: https://github.com/cds-snc/gcds-examples/tree/feat/vue-starter-app/starter-apps/vue/vue-template

[adorayi]

Code review still pending. Requires content review and then translation + bilingual review.

[daine]

This should be good to go for translation and bilingual review.

Here is all the text that needs to be reviewed and have translation: https://github.com/cds-snc/gcds-examples/blob/feat/vue-starter-app/starter-apps/vue/vue-template/src/i18n/en.js

Here is the french file (please note it needs a full review): https://github.com/cds-snc/gcds-examples/blob/feat/vue-starter-app/starter-apps/vue/vue-template/src/i18n/en.js

Here are the routing paths in English and french, which will need a review as well. They are the URLs that show on the browser address bar: https://github.com/cds-snc/gcds-examples/pull/21/files#diff-3e884d1153e9232f30d2b52c0f84a7138454dd8473550b72a350a325b03f2825R9-R27

Here is the README for the codebase: https://github.com/cds-snc/gcds-examples/pull/21/files?short_path=48f4f14#diff-48f4f1431758bd64e7b49c67c3fc6cafe71081260abe68de36bfb66eb21dc3c9

List of what is needed:

• [ ] Content review for text that appears on all the pages
• [ ] Corresponding french content for text the appears on all the pages
• [ ] Routing path URLS need french review and translation
• [ ] Technical README needs french translation

@SmartMouthWords would you like to have a separate ticket for the content review? Let me know, I know it's a lot.

[daine]

Moving the content pieces into another ticket:

• [ ] Content review (English content)
• [ ] Bilingual review and french content