From 39fc3524da5530645f5d8c3f94e3392f167fca8a Mon Sep 17 00:00:00 2001 From: Patrick Wolfert Date: Thu, 16 May 2024 12:57:39 -0700 Subject: [PATCH] [NO-TICKET] Generate the top-level CDN index (#3090) * Generate a main CDN index * If we're using `versions.json`, we don't need to keep betas separate because the `versions.json` file is kept succinct, and after a major release the beta column would be empty. Also format everything into 4 columns, which is still okay on small screens (I tested) * Don't need this variable * Fix meta tag and respond to other feedback --- .gitignore | 1 + scripts/build-cdn-indexes.ts | 191 +++++++++++++++++++++++------------ scripts/versions.ts | 2 +- 3 files changed, 126 insertions(+), 68 deletions(-) diff --git a/.gitignore b/.gitignore index b096194c35..745e6b1e74 100644 --- a/.gitignore +++ b/.gitignore @@ -53,6 +53,7 @@ coverage-data/ playwright-report/ tests/browser/test-results/ tests/a11y/test-results/ +dist/ # Doc Site ignores .cache/ diff --git a/scripts/build-cdn-indexes.ts b/scripts/build-cdn-indexes.ts index 1a47d94146..4be20769c7 100644 --- a/scripts/build-cdn-indexes.ts +++ b/scripts/build-cdn-indexes.ts @@ -1,37 +1,101 @@ import path from 'path'; import themes from '../themes.json'; +import packageVersions from '../versions.json'; import fs from 'node:fs'; import c from 'chalk'; -const getSystems = () => { - const result: string[][] = []; - Object.entries(themes).forEach(([themeName, themeInfo]) => { - if ('incomplete' in themeInfo) return; - - const packageFile = path.join('packages', themeInfo.packageName, 'package.json'); - const version = JSON.parse(fs.readFileSync(packageFile, 'utf8')).version; - - result.push([themeInfo.packageName, version, themeName]); - }); - return result; -}; - -const codeBlock = (lines: string[]) => { +function codeBlock(lines: string[]) { const escaped = lines.join('\n').replace(//g, '>'); const stringToCopy = JSON.stringify(lines); return ` 
${escaped}
Copy snippet `; -}; +} +function renderPageHtml(theme: keyof typeof themes, title: string, mainContent: string) { + const system = themes[theme].packageName; + const version = packageVersions[system as keyof typeof packageVersions][0]; + return ` + + + + + ${title} - CMSDS + + + + + +
+
+

${title}

+
+
+
+ ${mainContent} +
+ + + `; +} + +function writeCdnIndex() { + const theme = 'core'; + + const packageSections = Object.keys(themes).map((theme) => { + const { packageName } = themes[theme as keyof typeof themes]; + const versions = packageVersions[packageName as keyof typeof packageVersions]; + + const renderItem = (version: string) => ` +
  • + ${version} +
    • + `; + + const headingId = `heading-${packageName}`; + + return ` +
    +

    ${packageName}

    + +
    + `; + }); + + const htmlDoc = renderPageHtml( + theme, + 'CDN all package versions index', + ` +

    + Welcome to the CDN index for the CMS Design System. + Here you will find lists of current and past versions of the design system, organized + by their brand themes, which have independent package version numbers. Following the + version links will take you to CDN package resource pages that will show you how to use + them on your own website. +

    + + ${packageSections.join('\n')} + ` + ); + + console.log(`${c.green('+')} Writing main CDN index to dist.`); + + if (!fs.existsSync('dist')) { + fs.mkdirSync('dist'); + } + fs.writeFileSync(path.join('dist', 'index.html'), htmlDoc, 'utf8'); +} -getSystems().forEach((sysinfo) => { - const [system, version, shortname] = sysinfo; +function writeThemeIndex(theme: keyof typeof themes) { + const system = themes[theme].packageName; + const version = packageVersions[system as keyof typeof packageVersions][0]; const distPath = path.join('packages', system, 'dist'); const cssExample = codeBlock([ ``, - ``, + ``, ]); const webComponentsAllExample = codeBlock([ @@ -62,55 +126,48 @@ getSystems().forEach((sysinfo) => { ``, ]); - const htmlDoc = ` - - - - - CMSDS CDN Version Index - - - - - -
    -
    -

    CDN package resource index

    -
    -
    -
    -

    - You are viewing the CDN resource index for v${version} of the @cmsgov/${system} package. - These resources are currently loaded on this page. To understand how to use these resources, check out this page's source or the code snippets in the sections below. -

    -

    - See also: -

    -

    -

    How to load the CSS

    -

    Place the following HTML in your head tag:

    - ${cssExample} -

    How to load the JavaScript components

    -

    Web components

    -

    To import all web components, place the following code at the end of your body tag:

    - ${webComponentsAllExample} -

    To import a select set of web components, place the following code at the end of your body tag and remove the script tags for the components that you do not need:

    - ${webComponentsSomeExample} -

    Preact components

    -

    Place the following HTML in your head tag:

    - ${preactExample} -

    React components

    -

    Place the following HTML in your head tag:

    - ${reactExample} -
    - - -`; + const htmlDoc = renderPageHtml( + theme, + 'CDN package resource index', + ` +

    + You are viewing the CDN resource index for v${version} of the + @cmsgov/${system} + package. These resources are currently loaded on this page. To understand how to use + these resources, check out this page's source or the code snippets in the sections below. +

    +

    + See also: +

    +

    +

    How to load the CSS

    +

    Place the following HTML in your head tag:

    + ${cssExample} +

    How to load the JavaScript components

    +

    Web components

    +

    To import all web components, place the following code at the end of your body tag:

    + ${webComponentsAllExample} +

    To import a select set of web components, place the following code at the end of your body tag and remove the script tags for the components that you do not need:

    + ${webComponentsSomeExample} +

    Preact components

    +

    Place the following HTML in your head tag:

    + ${preactExample} +

    React components

    +

    Place the following HTML in your head tag:

    + ${reactExample} + ` + ); console.log( `${c.green('+')} Writing CDN index for ${c.yellow(system)} version ${c.cyan(version)} to dist.` ); - fs.writeFileSync(distPath + '/index.html', htmlDoc, 'utf8'); -}); + fs.writeFileSync(path.join(distPath, 'index.html'), htmlDoc, 'utf8'); +} + +// Write the main CDN index file +writeCdnIndex(); + +// Write all the theme index files +Object.keys(themes).forEach((theme) => writeThemeIndex(theme as keyof typeof themes)); diff --git a/scripts/versions.ts b/scripts/versions.ts index 04afc8131e..9d59ea00ca 100644 --- a/scripts/versions.ts +++ b/scripts/versions.ts @@ -13,7 +13,7 @@ function writeJson(filename: string, json: { [key: string]: any }) { writeFileSync(filename, JSON.stringify(json, null, 2)); } -function getPackageVersion(packageName: string): string { +export function getPackageVersion(packageName: string): string { const packageFileName = path.join(root, 'packages', packageName, 'package.json'); const packageData = readJson(packageFileName); return packageData.version;