chore: add code and preview and updates to page templates

.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,11 @@ module.exports = function (eleventyConfig) {
     });
   });
 
+  // Pull templates from github into partials
+  eleventyConfig.on('eleventy.before', async () => {
+    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\"`,

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,62 @@
+const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
+const fs = require('fs');
+const path = require('path');
+const pjson = require('../package.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: 'https://raw.githubusercontent.com/cds-snc/gcds-examples/refs/heads/feat/add-basic-page-templates/templates/english/basic-page-template.html',
+            outputFileName: 'basic-page-template.njk'
+        }]
+
+    const frTemplateFiles = [
+
+        {
+            url: 'https://raw.githubusercontent.com/cds-snc/gcds-examples/refs/heads/feat/add-basic-page-templates/templates/french/basic-page-template.html',
+            outputFileName: 'basic-page-template.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/_includes/layouts/page-templates-overview.njk

@@ -2,8 +2,4 @@
 layout: "layouts/base.njk"
 ---
 
-{{ content | safe }}
-
-{% include "partials/template-list.njk" %}
-
-{% include "partials/reportanissue.njk" %}
+{{ content | safe }}

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

@@ -0,0 +1,2 @@
+<gcds-text>This is a preview</gcds-text>
+{% include 'partials/templates/' + locale + '/basic-page-template.njk' %}

src/_includes/partials/template-list.njk

@@ -1,11 +1,11 @@
 {% set templates = [cardlist.type, locale | upper] | join %}
-
 {% set templateCards = collections.all | eleventyNavigation(templates) %}
 
-{% if cardlist.type === 'pageTemplates' %}
+{% 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 %}
+    {%- for entry in templateCards -%}
+      {% if entry.state == cardlist.state %}
         <gcds-card
           card-title="{{ entry.title }}"
           href="{% if entry.state == "published" %}{{entry.url}}{% else %}#{% endif %}"
@@ -20,6 +20,7 @@
             </gcds-text>
           {% endif %}
         </gcds-card>
+      {% endif %}
     {%- endfor -%}
     </gcds-grid>
   </div>

src/_includes/partials/templates/en/basic-page-template.njk

@@ -0,0 +1,115 @@
+<!-- TODO: Remove all comments before deploying your code to production. -->
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- TODO: Add a description of the page for better SEO and sharing previews. -->
+    <meta
+      name="description"
+      content="Add a description to provide a brief summary of the content."
+    />
+
+    <!-- TODO: Insert a concise, descriptive title that summarizes your page's content. -->
+    <title>Basic Page Template (EN)</title>
+
+    <!---------- GC Design System Utility ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of the GC Design System utility framework. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-utility/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/[email protected]/dist/gcds-utility.min.css"
+    />
+
+    <!---------- GC Design System Components ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of GC Design System Components. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/[email protected]/dist/gcds/gcds.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/[email protected]/dist/gcds/gcds.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/[email protected]/dist/gcds/gcds.js"
+    ></script>
+
+    <!-- Custom styles -->
+    <!-- TODO: If needed, uncomment and link your custom CSS file here. -->
+    <!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
+  </head>
+
+  <body>
+    <!---------- Header ---------->
+    <!-- TODO: Modify the lang-href to set the language toggle's URL. -->
+    <!-- TODO: Update the skip-to-href with the main content container's id. -->
+    <gcds-header lang-href="#" skip-to-href="#main-content">
+      <!-- The slot="search" attribute adds the search component to the header. -->
+      <gcds-search slot="search"></gcds-search>
+
+      <!-- The slot="breadcrumb" attribute adds the breadcrumbs component to the header. -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <!-- TODO: Adjust the breadcrumb links with the correct ones for your site. -->
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+
+    <!---------- Main content ---------->
+    <!-- TODO: Confirm the id matches the "skip-to-href" id in the header. -->
+    <gcds-container
+      id="main-content"
+      main-container
+      size="xl"
+      centered
+      tag="main"
+    >
+      <!-- TODO: Update the heading and text content. -->
+      <section>
+        <gcds-heading tag="h1">Basic page</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <section>
+        <gcds-heading tag="h2">Section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <!-- TODO: Update the date to reflect the page's most recent change. -->
+      <gcds-date-modified>2024-08-22</gcds-date-modified>
+    </gcds-container>
+
+    <!---------- Footer ---------->
+    <!-- TODO: Update or remove the contextual footer heading and links as needed. -->
+    <gcds-footer
+      display="full"
+      contextual-heading="Canadian Digital Service"
+      contextual-links='{ "Why GC Notify": "#","Features": "#", "Activity on GC Notify": "#"}'
+    >
+    </gcds-footer>
+  </body>
+</html>

src/_includes/partials/templates/en/code-basic-page-template.njk

@@ -0,0 +1,118 @@
+{% highlight html %}
+<!-- TODO: Remove all comments before deploying your code to production. -->
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- TODO: Add a description of the page for better SEO and sharing previews. -->
+    <meta
+      name="description"
+      content="Add a description to provide a brief summary of the content."
+    />
+
+    <!-- TODO: Insert a concise, descriptive title that summarizes your page's content. -->
+    <title>Basic Page Template (EN)</title>
+
+    <!---------- GC Design System Utility ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of the GC Design System utility framework. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-utility/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@<version-number>/dist/gcds-utility.min.css"
+    />
+
+    <!---------- GC Design System Components ---------->
+    <!-- TODO: Replace <version-number> with the latest version number to receive corresponding updates of GC Design System Components. All notable changes will be documented in the changelog: https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.js"
+    ></script>
+
+    <!-- Custom styles -->
+    <!-- TODO: If needed, uncomment and link your custom CSS file here. -->
+    <!-- <link rel="stylesheet" href="path/to/custom.css" /> -->
+  </head>
+
+  <body>
+    <!---------- Header ---------->
+    <!-- TODO: Modify the lang-href to set the language toggle's URL. -->
+    <!-- TODO: Update the skip-to-href with the main content container's id. -->
+    <gcds-header lang-href="#" skip-to-href="#main-content">
+      <!-- The slot="search" attribute adds the search component to the header. -->
+      <gcds-search slot="search"></gcds-search>
+
+      <!-- The slot="breadcrumb" attribute adds the breadcrumbs component to the header. -->
+      <gcds-breadcrumbs slot="breadcrumb">
+        <!-- TODO: Adjust the breadcrumb links with the correct ones for your site. -->
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+        <gcds-breadcrumbs-item href="#">Link</gcds-breadcrumbs-item>
+      </gcds-breadcrumbs>
+    </gcds-header>
+
+    <!---------- Main content ---------->
+    <!-- TODO: Confirm the id matches the "skip-to-href" id in the header. -->
+    <gcds-container
+      id="main-content"
+      main-container
+      size="xl"
+      centered
+      tag="main"
+    >
+      <!-- TODO: Update the heading and text content. -->
+      <section>
+        <gcds-heading tag="h1">Basic page</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <section>
+        <gcds-heading tag="h2">Section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+
+        <gcds-heading tag="h3">Sub-section heading</gcds-heading>
+        <gcds-text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is
+          egestas maecenas pharetra convallis posuere morbi leo urna.
+        </gcds-text>
+      </section>
+
+      <!-- TODO: Update the date to reflect the page's most recent change. -->
+      <gcds-date-modified>2024-08-22</gcds-date-modified>
+    </gcds-container>
+
+    <!---------- Footer ---------->
+    <!-- TODO: Update or remove the contextual footer heading and links as needed. -->
+    <gcds-footer
+      display="full"
+      contextual-heading="Canadian Digital Service"
+      contextual-links='{ "Why GC Notify": "#","Features": "#", "Activity on GC Notify": "#"}'
+    >
+    </gcds-footer>
+  </body>
+</html>
+
+{% endhighlight %}