docs: new page templates overview page

.eleventy.js

@@ -15,6 +15,7 @@ const markdownAnchor = require('./utils/anchor');
 const slugify = require('./utils/slugify');
 const { encode } = require('html-entities');
 
+const { downloadTemplates } = require('./scripts/templates');
 const { execSync } = require('child_process');
 
 module.exports = function (eleventyConfig) {
@@ -316,6 +317,14 @@ module.exports = function (eleventyConfig) {
     });
   });
 
+  // Pull templates from github into partials
+  eleventyConfig.on('eleventy.before', async ({ runMode }) => {
+    // Only download templates in build mode
+    if (runMode === 'build') {
+      await downloadTemplates();
+    }
+  });
+
   eleventyConfig.on('eleventy.after', () => {
     execSync(
       `npx pagefind --site _site --exclude-selectors "gcds-side-nav, gcds-top-nav, gcds-breadcrumbs, .github-link, .figma-link, h1 > code, .component-preview" --glob \"**/*.html\"`,

.gitignore

@@ -9,4 +9,8 @@ node_modules/
 public/
 _site/
 
-package-lock.json
+# Output folder for page templates
+src/_includes/partials/templates/en/
+src/_includes/partials/templates/fr/
+
+package-lock.json

package.json

@@ -40,6 +40,7 @@
     "@quasibit/eleventy-plugin-sitemap": "^2.1.4",
     "chroma-js": "^2.4.2",
     "eleventy-plugin-svg-contents": "^0.7.0",
+    "node-fetch": "^3.3.2",
     "pagefind": "^1.0.4",
     "prettier": "3.3.3",
     "prompt-sync": "^4.2.0",

scripts/templates.js

@@ -0,0 +1,91 @@
+const fetch = (...args) =>
+  import('node-fetch').then(({ default: fetch }) => fetch(...args));
+const fs = require('fs');
+const path = require('path');
+const pjson = require('../package.json');
+const i18nEN = require('../src/en/en.json');
+const i18nFR = require('../src/fr/fr.json');
+
+async function downloadFile(url, outputDir, outputFileName) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+    }
+    // Get initial file contents
+    const fileContent = await response.text();
+
+    // Add code formatting for code files
+    const codeContent = `{% highlight html %}\n${fileContent}\n{% endhighlight %}`;
+
+    // Replace version numbers in preview files
+    let previewContent = fileContent.replace(
+      /gcds-utility\@<version-number>/g,
+      'gcds-utility@' +
+        pjson.devDependencies['@cdssnc/gcds-utility'].replace(/^\^/, ''),
+    );
+    previewContent = previewContent.replace(
+      /gcds-components\@<version-number>/g,
+      'gcds-components@' +
+        pjson.devDependencies['@cdssnc/gcds-components'].replace(/^\^/, ''),
+    );
+
+    fs.mkdirSync(outputDir, { recursive: true });
+    const previewOutputPath = path.join(outputDir, outputFileName);
+    const codeOutputPath = path.join(outputDir, 'code-' + outputFileName);
+
+    fs.writeFileSync(previewOutputPath, previewContent, 'utf8');
+    fs.writeFileSync(codeOutputPath, codeContent, 'utf8');
+    console.log(`File saved to ${previewOutputPath} and ${codeOutputPath}`);
+  } catch (error) {
+    console.error(`Error: ${error.message}`);
+  }
+}
+async function downloadTemplates() {
+  const enTemplateFiles = [
+    {
+      url: i18nEN.links.pageTemplatesBasicGithubRaw,
+      outputFileName: 'basic-page-template.njk',
+    },
+    {
+      url: i18nEN.links.pageTemplatesBasicExtOTPGithubRaw,
+      outputFileName: 'basic-page-template-on-this-page.njk',
+    },
+  ];
+
+  const frTemplateFiles = [
+    {
+      url: i18nFR.links.pageTemplatesBasicGithubRaw,
+      outputFileName: 'basic-page-template.njk',
+    },
+    {
+      url: i18nFR.links.pageTemplatesBasicExtOTPGithubRaw,
+      outputFileName: 'basic-page-template-on-this-page.njk',
+    },
+  ];
+  const outputDirectory = './src/_includes/partials/templates';
+  const outputDirEn = outputDirectory + '/en';
+  const outputDirFr = outputDirectory + '/fr';
+
+  enTemplateFiles.forEach(file => {
+    console.log(
+      'downloading english file',
+      file.url,
+      outputDirEn,
+      file.outputFileName,
+    );
+    downloadFile(file.url, outputDirEn, file.outputFileName);
+  });
+
+  frTemplateFiles.forEach(file => {
+    console.log(
+      'downloading french file',
+      file.url,
+      outputDirFr,
+      file.outputFileName,
+    );
+    downloadFile(file.url, outputDirFr, file.outputFileName);
+  });
+}
+
+exports.downloadTemplates = downloadTemplates;

src/_data/footer.js

@@ -2,7 +2,7 @@ module.exports = {
   en: {
     contextual: {
       heading: 'Canadian Digital Service',
-      list: 'Sign up for mailing list',
+      list: 'Contact us',
       listurl: '/en/contact',
       issue: 'Report an issue',
       issueurl: 'https://github.com/cds-snc/gcds-components/issues/new/choose',
@@ -24,7 +24,7 @@ module.exports = {
   fr: {
     contextual: {
       heading: 'Service numérique canadien',
-      list: "S'inscrire à la liste d'envoi",
+      list: "Contactez-nous",
       listurl: '/fr/contactez',
       issue: 'Signaler un problème',
       issueurl: 'https://github.com/cds-snc/gcds-components/issues/new/choose',

src/_data/givefeedback.js

@@ -0,0 +1,12 @@
+module.exports = {
+    en: {
+        heading: 'Give feedback',
+        paragraph: "Something's not working? Flag the issue to our team through GitHub. With a GitHub account, you’ll have access to all past issues and get updates on progress.",
+        reportAnIssue: 'Report an issue',
+    },
+    fr: {
+        heading: 'Fournir des commentaires',
+        paragraph: "Quelque chose ne fonctionne pas? Signalez le problème à notre équipe via GitHub. Avec un compte GitHub, vous pourrez voir tous les problèmes (issues) passés et serez informé des progrès accomplis.",
+        reportAnIssue: 'Signaler un problème'
+    },
+};

src/_includes/layouts/page-templates-overview.njk

@@ -0,0 +1,5 @@
+---
+layout: "layouts/base.njk"
+---
+
+{{ content | safe }}

src/_includes/layouts/page-templates-preview.njk

@@ -0,0 +1 @@
+{% include 'partials/templates/' + locale + '/' + previewFile %}

src/_includes/partials/givefeedback.njk

@@ -0,0 +1,26 @@
+<section data-pagefind-ignore class="py-100 mt-400 mb-600 {% if removeBorder %} {% else %}by-sm b-dark {% endif %}">
+  <h2 class="mt-300 mb-400">
+    {{ givefeedback[locale].heading }}
+  </h2>
+
+  <p class="mb-400">
+    {{ givefeedback[locale].paragraph }}
+  </p>
+
+  <gcds-link
+    href="{{ links.githubCompsBug }}"
+    external
+  >
+    {{ givefeedback[locale].reportAnIssue }}
+  </gcds-link>
+
+  <p class="mb-400">
+    {{ helpus[locale].paragraph }}
+  </p>
+
+  <gcds-link
+    href="{{ helpus[locale].feedbackHref }}"
+  >
+    {{ helpus[locale].feedback }}
+  </gcds-link>
+</section>

src/_includes/partials/template-list.njk

@@ -0,0 +1,27 @@
+{% set templates = [cardlist.type, locale | upper] | join %}
+{% set templateCards = collections.all | eleventyNavigation(templates) %}
+
+{% if cardlist.type === 'pageTemplates' and cardlist.state === 'published' %}
+  <div class="my-500">
+    <gcds-grid tag="ul" columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" gap="400">
+    {%- for entry in templateCards -%}
+      {% if entry.state == cardlist.state %}
+        <gcds-card
+          card-title="{{ entry.title }}"
+          href="{% if entry.state == "published" %}{{entry.url}}{% else %}#{% endif %}"
+          card-title-tag="h3"
+          badge="{% if entry.tag %}{{ entry.tag }}{% endif %}"
+          role="listitem"
+        >
+          <gcds-text >{{ entry.description }}</gcds-text>
+          {% if entry.descriptionSecondaryText %}
+            <gcds-text>
+              {{ documentation[locale].descriptionSecondaryText }}{{ entry.descriptionSecondaryText }}
+            </gcds-text>
+          {% endif %}
+        </gcds-card>
+      {% endif %}
+    {%- endfor -%}
+    </gcds-grid>
+  </div>
+{% endif %}

src/en/contact/contact.md

@@ -6,6 +6,7 @@ eleventyNavigation:
   title: Contact us
   locale: en
   order: 2
+  hideMain: true
 translationKey: 'contactus'
 contactForm: en
 date: 'git Last Modified'

src/en/en.json

@@ -61,6 +61,19 @@
     "releaseNotes": "https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md",
     "privacy": "/en/privacy-notice",
 
+    "pageTemplates": "/en/page-templates",
+    "pageTemplatesBasic": "/en/page-templates/basic",
+    "pageTemplatesBasicPreview": "/en/page-templates/basic/preview",
+    "pageTemplatesBasicCode": "/en/page-templates/basic/code",
+    "pageTemplatesBasicGithubLink": "https://github.com/cds-snc/gcds-examples/blob/feat/add-basic-page-templates/templates/english/basic/basic-page-template.html",
+    "pageTemplatesBasicGithubRaw": "https://raw.githubusercontent.com/cds-snc/gcds-examples/refs/heads/feat/add-basic-page-templates/templates/english/basic/basic-page-template.html",
+    "pageTemplatesBasicFigma": "#",
+    "pageTemplatesBasicExtOTPPreview": "/en/page-templates/basic/preview-on-this-page",
+    "pageTemplatesBasicExtOTPCode": "/en/page-templates/basic/code-on-this-page",
+    "pageTemplatesBasicExtOTPGithubLink": "https://github.com/cds-snc/gcds-examples/blob/feat/add-basic-page-templates/templates/english/basic/extensions/basic-page-template-table-of-contents.html",
+    "pageTemplatesBasicExtOTPGithubRaw": "https://raw.githubusercontent.com/cds-snc/gcds-examples/refs/heads/feat/add-basic-page-templates/templates/english/basic/extensions/basic-page-template-table-of-contents.html",
+    "pageTemplatesBasicExtOTPFigma": "#",
+
     "figma": "https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?node-id=4%3A1006&t=qguKsJtr1ityUsUN-0",
 
     "fontAwesome": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css",
@@ -96,6 +109,7 @@
     "githubTokens": "https://github.com/cds-snc/gcds-tokens",
     "githubTokensIssues": "https://github.com/cds-snc/gcds-tokens/issues",
 
+    "tbsStandardsOnWebA11y": "https://www.tbs-sct.canada.ca/pol/doc-eng.aspx?id=23601",
     "wcag": "https://www.w3.org/TR/WCAG21/",
     "wcagTargetSize": "https://www.w3.org/TR/WCAG21/#target-size",
     "wcagTextSpacing": "https://www.w3.org/TR/WCAG21/#text-spacing",

src/en/get-involved.md

@@ -87,10 +87,4 @@ Provide any of the following for each component or pattern:
   </ul>
 </div>
 
-## Report an issue
-
-Something's not working? Flag the issue to our team through GitHub. If this is your first time using Github - follow these <gcds-link href="{{ links.githubGetStarted }}" external>instructions</gcds-link> to create your account. With an account, you'll have access to all past issues and get updates on progress.
-
-<gcds-link href="{{ links.githubCompsBug }}" external>Report an issue</gcds-link>
-
-{% include "partials/helpus.njk" %}
+{% include "partials/givefeedback.njk" %}

src/en/page-templates/basic/basic.md

@@ -0,0 +1,82 @@
+---
+title: Basic page template
+layout: 'layouts/page-templates-overview.njk'
+eleventyNavigation:
+  key: basicPageTemplateEN
+  title: Basic
+  locale: en
+  parent: pageTemplatesEN
+  description: Starting point for any web page.
+  descriptionSecondaryText: Offers a basic, accessible page structure and hierarchy and includes the elements required for most GC pages.
+  state: published
+#  tag: Canada.ca required
+  order: 1
+translationKey: 'basicPageTemplate'
+tags: ["templates"]
+date: "git Last Modified"
+github: https://github.com/cds-snc/gcds-examples/blob/feat/add-basic-page-templates/templates/english/basic-page-template.html
+figma: https://figma.com
+---
+
+# Basic page template
+
+The Basic Page template provides accessibility essentials for page structure and heading hierarchy. Brand elements, like the header and footer, make it recognizable as a Government of Canada page.
+
+## When to use
+
+For use on Canada.ca and other GC sites.
+The basic page template is for non-specialized pages across Canada.ca and is an optional template. It has the starting elements needed for a simple page and those required for most GC pages. You can use it as a canvas to add or combine <gcds-link href="{{ links.components }}">components</gcds-link> from the GC Design System.
+
+## Preview
+
+<gcds-button class="md:d-inline-block d-block md:me-400 me-0 md:mb-0 mb-400" button-role="secondary" type="link" href="{{ links.pageTemplatesBasicPreview }}" target="_blank">Open demo in new tab</gcds-button>
+<gcds-button class="md:d-inline-block d-block" button-role="secondary" type="link" href="{{ links.pageTemplatesBasicCode }}" target="_blank">Get code in new tab</gcds-button>
+
+<img class="max-width-content b-sm b-default mb-400 p-400" src="/images/en/templates/basic-page-preview.png" alt="A basic page template includes the Government of Canada header and footer, H1, H2 and H3 heading sections with text underneath each section."/>
+
+## How to implement
+
+To implement page templates into your project or to prototype in HTML, download the specific template you need in GitHub:
+
+- <gcds-link external href="{{ links.pageTemplatesBasicGithubLink }}">Basic page template</gcds-link>
+- <gcds-link external href="{{ links.pageTemplatesBasicExtOTPGithubLink }}">Basic page table of contents template</gcds-link>
+
+To prototype in Figma, find the <gcds-link external href="{{ links.pageTemplatesBasicFigma }}">Basic Page Template</gcds-link> in the GC Design System library.
+
+## Design considerations
+
+### Improve navigation on longer pages
+
+Include an "On this page" section with bulleted anchor links for pages with four or more sections. Anchor links  to improve navigation and help people find relevant content.
+
+### Preview "On this page"
+
+<gcds-button class="md:d-inline-block d-block md:me-400 me-0 md:mb-0 mb-400" button-role="secondary" type="link" href="{{ links.pageTemplatesBasicExtOTPPreview }}" target="_blank">Open demo in new tab</gcds-button>
+<gcds-button  button-role="secondary" type="link" href="{{ links.pageTemplatesBasicExtOTPCode }}" target="_blank">Get code in new tab</gcds-button>
+
+<img class="max-width-content b-sm b-default mb-400 p-400" src="/images/en/templates/basic-page-on-this-page-preview.png" alt='A basic page template with a "On this page" section includes the Government of Canada header and footer, a "On this page" section with three sections listed underneath.'/>
+
+### Maintain a logical heading structure
+
+- Follow the hierarchy logic within the page template to structure your content for everyone, including people using assistive technology.
+- Use appropriate heading levels (H1-H6) to reflect the structure of your content.
+- Write clear and consistent headings, and maintain default character limits for each heading line for a comfortable reading length.
+- For consistency and accessibility, use GC Design System components like <gcds-link href="{{ links.heading }}">Heading</gcds-link>, <gcds-link href="{{ links.text }}">Text</gcds-link>, and <gcds-link href="{{ links.screenreaderOnly }}">Screenreader-only</gcds-link>.
+- For any custom-built elements, follow the Government of Canada’s <gcds-link href="{{ links.tbsStandardsOnWebA11y }}" external>Standard on Web Accessibility</gcds-link>.
+
+## Accessibility highlights
+
+The Basic Page template is built using the following components that meet WCAG 2.1 AA accessibility standards:
+
+- Container
+- Date modified
+- Footer
+- Header (includes search and breadcrumbs)
+- Heading
+- Link
+- Text
+
+The Basic Page template includes:
+
+- A clear heading hierarchy you can use to structure your content logically for everyone, including people using assistive technologies, by following <gcds-link href="{{ links.heading }}">Heading</gcds-link> guidance.
+- GC Design System **tokens** meet level AA of the <gcds-link href="{{ links.wcag }}" external>Web Content Accessibility Guidelines (WCAG 2.1)</gcds-link> colour contrast standards for text and interactive elements and level AAA for both tap targets and visual presentation.

src/en/page-templates/basic/code-on-this-page.md

@@ -0,0 +1,15 @@
+---
+title: Basic page code with on this page section
+layout: 'layouts/page-templates-overview.njk'
+eleventyNavigation:
+  key: basicPageCodeOTPEN
+  locale: en
+  parent: basicPageTemplateEN
+  state: published
+translationKey: 'basicPageCodeOTP'
+date: "git Last Modified"
+---
+
+# Copy this code
+
+{% include 'partials/templates/en/code-basic-page-template-on-this-page.njk' %}

src/en/page-templates/basic/code.md

@@ -0,0 +1,15 @@
+---
+title: Basic page code
+layout: 'layouts/page-templates-overview.njk'
+eleventyNavigation:
+  key: basicPageCodeEN
+  locale: en
+  parent: basicPageTemplateEN
+  state: published
+translationKey: 'basicPageCode'
+date: "git Last Modified"
+---
+
+# Copy this code
+
+{% include 'partials/templates/en/code-basic-page-template.njk' %}