Documentation: Template Overview and Basic page template

[daine]

📇 User story

As a user, I want to see documentation on how to create a basic page template using the GC Design System tools so that I can follow the pattern and create pages more efficiently.

✅ Definition of Done / Outcomes

• Done when content has been created and reviewed
• Done when design has been created and reviewed
• Done when the documentation website has been updated with the content and design (through a PR that is approved and ready for merge, but not yet published)

📜 Acceptance criteria

• PR on the website documentation repository is approved and ready for merge
• Code follows design updates
• Code follows content updates

📝 More info

This is part of the Basic page template work
Related tickets:

• 1056 Design: overview page for page templates #1056

Here is the figma file:
https://www.figma.com/design/nfpEteHyEJ9dhJ2YvuvLeo/Documentation-site%2FComponent-Pages?node-id=15116-3531

[daine]

@SmartMouthWords this ticket needs https://app.zenhub.com/workspaces/design-system-6100624a19f4cf000e46e458/issues/gh/cds-snc/design-gc-conception/1058 to be done so we can update the website with the content for the basic page template. Would you happen to know when that will be done? TIA!

[daine]

I have a PR available for review and testing here: cds-snc/gcds-docs#430

I found a few issues which I've indicated in the summary of the PR @SmartMouthWords

@ethanWallace feel free to take over the PR next week

[daine]

Overview page update design here: https://www.figma.com/design/nfpEteHyEJ9dhJ2YvuvLeo/Documentation-site%2FComponent-Pages?node-id=15046-4281&node-type=canvas&t=IEHVkEd0LXbfZu2m-0

Basic page designs here (comment on the ticket): #1058 (comment)

[daine]

I have a potential solution for the code & preview pages for the templates, will discuss with the team/designers this week

[SmartMouthWords]

@daine and @SmartMouthWords to connect and decide on version today

[daine]

Here is the basic page template page (still needs to be updated):
https://pr-430.djtlis5vpn8jd.amplifyapp.com/en/page-templates/basic/

Here is what the code page looks like for the basic page template:
https://pr-430.djtlis5vpn8jd.amplifyapp.com/en/page-templates/basic/code/

Sadly the preview page doesn't run on the amplify preview URLs but here is a screenshot:

What I need is:

• For the code page, are we going to have content around it? Please have a look at the URL above. I currently have a heading that just says "Copy this code (english content)". I'll remove "english content" because I think we only display the appropriate code HTML depending on their language setting on the website, we don't always display both english and french versions, correct?
• Blocker: Content for the code page currently located here
• For the preview page, are we also going to have content around it? I wasn't sure what to do with it so I just have a simple <gcds-text>This is a preview</gcds-text> on the top, which you can see in the screenshot.
• Blocker: A better design and content around the preview page
• Blocker: Should we release the templates, without any links to the code and preview pages at the moment? If we do this, we can have more time to work on the content and design for those two pages.

[SmartMouthWords]

• I'm not sure what the code page is. Is this only for copying the code? We'd talked about having a set up like grid where the user copy the code from the main content page. Do we need a separate page? @melaniebmn Can you clarify?

For the preview page heading: "Basic page template preview" and "Aperçu du modèle de page de base"

[daine]

Final stretch for this ticket. We discussed the following:

• Preview page. It will now no longer contain any heading to keep it simple. This follows the same pattern found on https://design.canada.ca/coded-layout/generic-destination-basic.html
• Preview image - will be provided by design
• Code - will not need a separate page, but the collapsible viewCode shortcode function needs a rework as we've identified a few bugs or issues with it namely:
  • It currently adds </p> and <p> tags to newlines on the code. It may be getting processed as a regular markdown format.
  • no syntax highlighting
  • "view code" button never changes into "hide code"
  • we'd like "copy" code button to live within the bounding box of the code
  • FIX: The issues above can be fixed by replacing it with the highlighter plugin used when testing the separate code page, we can just update it to be collapsible like the viewCode shortcode function. @melaniebmn can help look into fixing this.
• @melaniebmn will update the basic page templates on github. We are removing the variants and have agreed to keep only one template. We will retain examples or extended versions of the templates in a separate folder within github to avoid confusion. These templates will be used for the "view code" and "preview" sections on the "Design considerations" portion of the basic page template.

Once all of the pieces are in place and functioning, I can then replicate the structure and code onto the french version

[daine]

I think we should be good to go now, @melaniebmn brought the PR to completion which can be merged once we have published the design on figma and the code on github. Once those are done, we need to update the PR with the correct links.