From e50337cb947068e8fba20fe9def8a1c451be8982 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Wed, 22 May 2024 11:55:09 -0700 Subject: [PATCH] docs: update CDN installation instructions (#349) * wip: update installation instructions * refactor: update CDN installation instructions * feat: add french translation for new CDN instructions * docs: update CDN instructions --- .eleventy.js | 22 ++++-- src/_data/installation.js | 70 +++++++++++-------- .../partials/installation/step-2-angular.njk | 4 +- .../partials/installation/step-2-cdn.njk | 60 ++++++++++++++-- .../partials/installation/step-2-node.njk | 2 +- .../partials/installation/step-2-react.njk | 2 +- utils/cdn-info.js | 23 ++++++ 7 files changed, 138 insertions(+), 45 deletions(-) create mode 100644 utils/cdn-info.js diff --git a/.eleventy.js b/.eleventy.js index 7e652f221..ac7b601ba 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -6,6 +6,7 @@ const chroma = require('chroma-js'); const markdownIt = require('markdown-it'); const svgContents = require('eleventy-plugin-svg-contents'); const codeClipboard = require('eleventy-plugin-code-clipboard'); +const { getLatestCdnVersion } = require('./utils/cdn-info'); const { DateTime } = require('luxon'); const contextMenu = require('./utils/context-menu'); @@ -13,7 +14,7 @@ const displayTokens = require('./utils/display-tokens'); const markdownAnchor = require('./utils/anchor'); const slugify = require('./utils/slugify'); -const { execSync } = require('child_process') +const { execSync } = require('child_process'); module.exports = function (eleventyConfig) { // Pass through copies @@ -154,10 +155,9 @@ module.exports = function (eleventyConfig) { return colourName; }); - eleventyConfig.addFilter('stringify', (data) => { - return JSON.stringify(data, null, "\t") - }) - + eleventyConfig.addFilter('stringify', data => { + return JSON.stringify(data, null, '\t'); + }); /* Markdown Overrides */ let markdownLibrary = markdownIt({ @@ -216,6 +216,11 @@ module.exports = function (eleventyConfig) { `; }); + // Add shortcode for CDN info + eleventyConfig.addGlobalData('latestCdnVersion', async () => { + return await getLatestCdnVersion(); + }); + eleventyConfig.addPairedShortcode( 'docLinks', (children, locale, stage, figma, github) => { @@ -307,8 +312,11 @@ module.exports = function (eleventyConfig) { }); 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\"`, { encoding: 'utf-8' }) - }) + 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\"`, + { encoding: 'utf-8' }, + ); + }); return { pathPrefix: process.env.PATH_PREFIX || '/', diff --git a/src/_data/installation.js b/src/_data/installation.js index 3cf2fd10c..85f6c25ac 100644 --- a/src/_data/installation.js +++ b/src/_data/installation.js @@ -10,8 +10,8 @@ module.exports = { angular: 'Angular', react: 'React', vue: 'Vue', - node: 'Node with no framework', - cdn: 'No framework (without node)', + node: 'NodeJS with no Javascript framework', + cdn: 'Plain HTML - CDN', figma: "I'm a lost designer, looking for Figma", other: 'None of the above', }, @@ -23,18 +23,23 @@ module.exports = { heading: 'Install with npm', install: 'Navigate to the root folder of your project and run:', placeApp: - 'Place the following code in the app.module.ts file of your app:', + 'Place the following code in the app.module.ts file of your app:', placeStyles: - 'Place the following code in the styles.scss file of your app:', + 'Place the following code in the styles.scss file of your app:', }, cdn: { paragraph: 'Use these instructions to install GCDS components with no framework.', heading: 'Add the code', + version: + "Use the latest version of GC Design System. Version , released on , is the most recent. Pinned versions provide stability and predictability because the code will remain consistent and won't change unexpectedly, which can be crucial for maintaining the stability of an application. However, it requires manual updating of the CDN links whenever a newer version of GC Design System is released.", place: - 'Place the following code in the element of your project:', + 'Place the following code in the head element of your project:', icons: 'to access icons, import Font Awesome', - note: 'Note: - + + + {% endhighlight %} - {{ installation[locale].step2.cdn.note }} + + {{ installation[locale].step2.cdn.note | safe }} + +

{{ installation[locale].step2.cdn.subheading | safe }}

+

{{ installation[locale].step2.cdn.latest | safe }}

+ + diff --git a/src/_includes/partials/installation/step-2-node.njk b/src/_includes/partials/installation/step-2-node.njk index 64c2033f3..cea4cd6d9 100644 --- a/src/_includes/partials/installation/step-2-node.njk +++ b/src/_includes/partials/installation/step-2-node.njk @@ -9,7 +9,7 @@ npm install @cdssnc/gcds-components {% endhighlight %} -

{{ installation[locale].step2.node.place }}

+

{{ installation[locale].step2.node.place | safe }}

{% highlight "html" %} diff --git a/src/_includes/partials/installation/step-2-react.njk b/src/_includes/partials/installation/step-2-react.njk index 467ae5457..2a0bc325a 100644 --- a/src/_includes/partials/installation/step-2-react.njk +++ b/src/_includes/partials/installation/step-2-react.njk @@ -9,7 +9,7 @@ npm install @cdssnc/gcds-components @cdssnc/gcds-components-react {% endhighlight %} -

{{ installation[locale].step2.react.place }}

+

{{ installation[locale].step2.react.place | safe }}

{% highlight "js" %} import '@cdssnc/gcds-components-react/gcds.css' diff --git a/utils/cdn-info.js b/utils/cdn-info.js new file mode 100644 index 000000000..1b48425a1 --- /dev/null +++ b/utils/cdn-info.js @@ -0,0 +1,23 @@ +async function getLatestCdnVersion() { + try { + // Fetch package metadata + const response = await fetch( + 'https://registry.npmjs.org/@cdssnc/gcds-components', + ); + const data = await response.json(); + + // Get latest version and release date + const latestVersion = data['dist-tags'].latest; + const releaseDate = new Date(data.time[latestVersion]); + + // Format the release date to 'YYYY-MM-DD' + const formattedReleaseDate = `${releaseDate.getFullYear()}-${String(releaseDate.getMonth() + 1).padStart(2, '0')}-${String(releaseDate.getDate()).padStart(2, '0')}`; + + return { version: latestVersion, releaseDate: formattedReleaseDate }; + } catch (error) { + console.error('Error fetching latest version:', error); + return { version: 'Unknown', releaseDate: 'Unknown' }; + } +} + +module.exports = { getLatestCdnVersion };