[WNMGDS-711] Update doc site <head> for child ds (#896)

* Use options.name in doc site <head> * Make analytics tag only appear on core * Consistently use the same description * Updated snapshot Co-authored-by: Scott Weber <[email protected]>
CMSgov · Dec 8, 2020 · 2226b33 · 2226b33
1 parent 9c8101f
commit 2226b33
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "workspaces": [
     "packages/*"
   ],
-  "description": "A shared set of design and code elements for creating accessible and consistent websites",
+  "description": "A set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites.",
   "repository": "https://github.com/CMSgov/design-system",
   "scripts": {
     "start": "yarn cmsds start",

diff --git a/packages/design-system-docs/src/pages/index.md b/packages/design-system-docs/src/pages/index.md
@@ -3,9 +3,9 @@ title: Introduction
 weight: -100
 ---
 
-The design system is a set of open-source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design System and extends it to support additional CSS and React components, [utility classes]({{root}}/utilities/overview), and a [grid framework]({{root}}/utilities/grid/) to allow teams to quickly prototype and build accessible, responsive, production-ready websites.
+The design system is a set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design System and extends it to support additional CSS and React components, [utility classes]({{root}}/utilities/overview), and a [grid framework]({{root}}/utilities/grid/) to allow teams to quickly prototype and build accessible, responsive, production-ready websites.
 
-It is currently being applied to [HealthCare.gov](https://www.healthcare.gov/). It is open-source and freely available to use by anyone.
+It is currently being applied to [HealthCare.gov](https://www.healthcare.gov/) and [Medicare.gov](https://www.medicare.gov/). It is open-source and freely available to use by anyone.
 
 ## Getting started
 

diff --git a/...ages/design-system-scripts/gulp/docs/__tests__/__snapshots__/generateDocPage.test.js.snap b/...ages/design-system-scripts/gulp/docs/__tests__/__snapshots__/generateDocPage.test.js.snap
@@ -2,14 +2,13 @@
 
 exports[`generateDocPage generates correct head and uri 1`] = `
 Object {
-  "head": "<title>Button - CMS Design System</title>
-  <link rel=\\"shortcut icon\\" type=\\"image/x-icon\\" href=\\"/images/favicon.ico\\" />
-  <link href=\\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\\" rel=\\"stylesheet\\" />
-  <link rel=\\"stylesheet\\" href=\\"/index.css\\" />
-  <script>
-window.tealiumEnvironment = \\"dev\\";
-</script>
-<script src=\\"//tags.tiqcdn.com/utag/cmsgov/cms-design/prod/utag.sync.js\\"></script>",
+  "head": "
+    <title>Button - undefined</title>
+    <link rel=\\"shortcut icon\\" type=\\"image/x-icon\\" href=\\"/images/favicon.ico\\" />
+    <link href=\\"https://fonts.googleapis.com/css?family=Roboto+Mono:400,700\\" rel=\\"stylesheet\\" />
+    <link rel=\\"stylesheet\\" href=\\"/index.css\\" />
+    
+  ",
   "uri": "components/button",
 }
 `;
diff --git a/packages/design-system-scripts/gulp/docs/generatePages/generateDocPage.js b/packages/design-system-scripts/gulp/docs/generatePages/generateDocPage.js
@@ -33,19 +33,24 @@ function generateDocPage(routes, page, docsPath, options) {
 
   const rootPath = options.rootPath && options.rootPath !== '' ? `${options.rootPath}/` : '';
 
-  const head = `${seo(page, rootPath)}
-  <link rel="shortcut icon" type="image/x-icon" href="/${rootPath || ''}images/favicon.ico" />
-  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet" />
-  <link rel="stylesheet" href="/${rootPath}index.css" />
-  ${analytics()}`;
+  // TODO: Add the ability for child design systems to customize this easier, i.e. use their own tealium utag
+  const head = `
+    ${seo(page, options)}
+    <link rel="shortcut icon" type="image/x-icon" href="/${rootPath || ''}images/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet" />
+    <link rel="stylesheet" href="/${rootPath}index.css" />
+    ${options.core ? analytics() : ''}
+  `;
 
   const body = `
-<div id="js-root">${componentRenderer()}</div>
-<script type="text/javascript">
-  window.page = ${JSON.stringify(page)};
-  window.routes = ${JSON.stringify(routes)};
-</script>
-<script src="/${rootPath}index.js"></script>`;
+    <div id="js-root">${componentRenderer()}</div>
+    <script type="text/javascript">
+      window.page = ${JSON.stringify(page)};
+      window.routes = ${JSON.stringify(routes)};
+    </script>
+    <script src="/${rootPath}index.js"></script>
+  `;
+
   return savePage(
     {
       uri: page.referenceURI,
@@ -63,29 +68,30 @@ function generateDocPage(routes, page, docsPath, options) {
  */
 function analytics() {
   const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';
-  return `<script>
-window.tealiumEnvironment = "${env}";
-</script>
-<script src="//tags.tiqcdn.com/utag/cmsgov/cms-design/prod/utag.sync.js"></script>`;
+  return `
+    <script>
+      window.tealiumEnvironment = "${env}";
+    </script>
+    <script src="//tags.tiqcdn.com/utag/cmsgov/cms-design/prod/utag.sync.js"></script>
+  `;
 }
 
 /**
  * Output SEO tags for the documentation's permalink page
  * @param {Object} page
- * @param {String} rootPath - Root docs site path
  * @return {String}
  */
-function seo(page) {
+function seo(page, options) {
   const html = [];
 
   if (page.referenceURI === '') {
     // Homepage
     html.push(
-      '<meta name="description" content="A set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. It builds on the U.S. Web Design System and extends it to support additional CSS and React components, utility classes, and a grid framework" />'
+      '<meta name="description" content="A set of open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites." />'
     );
-    html.push('<title>CMS Design System | An open source design and front-end toolkit</title>');
+    html.push(`<title>${options.name} | An open source design and front-end toolkit</title>`);
   } else {
-    html.push(`<title>${page.header} - CMS Design System</title>`);
+    html.push(`<title>${page.header} - ${options.name}</title>`);
   }
 
   return html.join('');