docs: update readme

README.md

@@ -93,19 +93,18 @@ import "@aurodesignsystem/auro-hyperlink";
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-hyperlink__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
 
-We recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle correctly. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag.
+**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ### Bundle example code
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUse.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
 
 ```html
-<!-- **NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.3.0/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.5/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@3.5.2/dist/auro-hyperlink__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@alaskaairux/icons": "^4.34.1",
-    "@aurodesignsystem/auro-library": "^2.2.5",
+    "@aurodesignsystem/auro-library": "^2.4.7",
     "@aurodesignsystem/design-tokens": "^4.3.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
     "@aurodesignsystem/webcorestylesheets": "^5.0.5",

scripts/generateDocs.mjs

@@ -1,8 +1,3 @@
-/**
- * This version is sans dependencies
- * Create for use with the SSR updates
- */
-
 import path from 'path';
 import markdownMagic from 'markdown-magic';
 import fs from 'fs';
@@ -19,28 +14,34 @@ const readmeFilePath = dirDocTemplates + '/README.md';
  */
 
 function nameExtraction() {
- const packageJson = fs.readFileSync('package.json', 'utf8', function(err, data) {
-   if (err) {
-     console.log('ERROR: Unable to read package.json file', err);
-   }
- })
-
- let pName = JSON.parse(packageJson).name;
-
- let npmStart = pName.indexOf('@');
- let namespaceStart = pName.indexOf('/');
- let nameStart = pName.indexOf('-');
-
- let result = {
-   'npm': pName.substring(npmStart, namespaceStart),
-   'namespace': pName.substring(namespaceStart + 1, nameStart),
-   'namespaceCap': pName.substring(namespaceStart + 1)[0].toUpperCase() + pName.substring(namespaceStart + 2, nameStart),
-   'name': pName.substring(nameStart + 1),
-   'nameCap': pName.substring(nameStart + 1)[0].toUpperCase() + pName.substring(nameStart + 2)
- };
-
- return result;
-}
+  const packageJson = fs.readFileSync('package.json', 'utf8', function(err, data) {
+    if (err) {
+      console.log('ERROR: Unable to read package.json file', err);
+    }
+  })
+
+  let pName = JSON.parse(packageJson).name;
+  let pVersion = JSON.parse(packageJson).version;
+  let pdtVersion = JSON.parse(packageJson).peerDependencies['\@aurodesignsystem/design-tokens'].substring(1)
+  let wcssVersion = JSON.parse(packageJson).peerDependencies['\@aurodesignsystem/webcorestylesheets'].substring(1)
+
+  let npmStart = pName.indexOf('@');
+  let namespaceStart = pName.indexOf('/');
+  let nameStart = pName.indexOf('-');
+
+  let result = {
+    'npm': pName.substring(npmStart, namespaceStart),
+    'namespace': pName.substring(namespaceStart + 1, nameStart),
+    'namespaceCap': pName.substring(namespaceStart + 1)[0].toUpperCase() + pName.substring(namespaceStart + 2, nameStart),
+    'name': pName.substring(nameStart + 1),
+    'nameCap': pName.substring(nameStart + 1)[0].toUpperCase() + pName.substring(nameStart + 2),
+    'version': pVersion,
+    'tokensVersion': pdtVersion,
+    'wcssVersion': wcssVersion
+  };
+
+  return result;
+ }
 
 /**
  * Replace all instances of [npm], [name], [Name], [namespace] and [Namespace] accordingly
@@ -54,10 +55,13 @@ function formatTemplateFileContents(content, destination) {
    * Replace placeholder strings
    */
   result = result.replace(/\[npm]/g, nameExtractionData.npm);
-  result = result.replace(/\[name]/g, nameExtractionData.name);
-  result = result.replace(/\[Name]/g, nameExtractionData.nameCap);
+  result = result.replace(/\[name](?!\()/g, nameExtractionData.name);
+  result = result.replace(/\[Name](?!\()/g, nameExtractionData.nameCap);
   result = result.replace(/\[namespace]/g, nameExtractionData.namespace);
   result = result.replace(/\[Namespace]/g, nameExtractionData.namespaceCap);
+  result = result.replace(/\[Version]/g, nameExtractionData.version);
+  result = result.replace(/\[dtVersion]/g, nameExtractionData.tokensVersion);
+  result = result.replace(/\[wcssVersion]/g, nameExtractionData.wcssVersion);
 
   /**
    * Cleanup line breaks
@@ -66,7 +70,7 @@ function formatTemplateFileContents(content, destination) {
   result = result.replace(/>(\r\n|\r|\n){2,}/g, '>\r\n'); // Remove empty lines directly after a closing html tag.
   result = result.replace(/>(\r\n|\r|\n)```/g, '>\r\n\r\n```'); // Ensure an empty line before code samples.
   result = result.replace(/>(\r\n|\r|\n){2,}```(\r\n|\r|\n)/g, '>\r\n```\r\n'); // Ensure no empty lines before close of code sample.
-  result = result.replace(/([^(\r\n|\r|\n)])(\r\n|\r|\n)+#/g, "$1\r\n\r\n#"); // Ensure empty line before header sections.
+  result = result.replace(/([^(\r\n|\r|\n)])(\r?\n|\r(?!\n))+#/g, "$1\r\n\r\n#"); // Ensure empty line before header sections.
 
   /**
    * Write the result to the destination file
@@ -81,14 +85,14 @@ function formatApiTableContents(content, destination) {
   let result = content;
 
   result = result
-    .replace(/\r\n|\r|\n####\s`([a-zA-Z]*)`/g, `\r\n#### <a name="$1"></a>\`$1\`<a href="#${wcName}" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>`)
+    .replace(/\r\n|\r|\n####\s`([a-zA-Z]*)`/g, `\r\n#### <a name="$1"></a>\`$1\`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>`)
     .replace(/\r\n|\r|\n\|\s`([a-zA-Z]*)`/g, '\r\n| [$1](#$1)')
     .replace(/\| \[\]\(#\)/g, "");
 
   fs.writeFileSync(destination, result, { encoding: 'utf8'});
 
-  fs.readFile('./demo/api.md', 'utf8', function(err, data) {
-    formatTemplateFileContents(data, './demo/api.md');
+  fs.readFile('./demo/apiExamples.md', 'utf8', function(err, data) {
+    formatTemplateFileContents(data, './demo/apiExamples.md');
   });
 }
 
@@ -149,12 +153,12 @@ function processDemo() {
 
 function processApiExamples() {
   const callback = function(updatedContent, outputConfig) {
-    if (fs.existsSync('./demo/api.md')) {
-      fs.readFile('./demo/api.md', 'utf8', function(err, data) {
-        formatApiTableContents(data, './demo/api.md');
+    if (fs.existsSync('./demo/apiExamples.md')) {
+      fs.readFile('./demo/apiExamples.md', 'utf8', function(err, data) {
+        formatApiTableContents(data, './demo/apiExamples.md');
       });
     } else {
-      console.log('ERROR: ./demo/api.md file is missing');
+      console.log('ERROR: ./demo/apiExamples.md file is missing');
     }
   };
 
@@ -163,7 +167,7 @@ function processApiExamples() {
     outputDir: './demo'
   };
 
-  const markdownPath = path.join(__dirname, '../docs/partials/api.md');
+  const markdownPath = path.join(__dirname, '../docs/partials/apiExamples.md');
 
   markdownMagic(markdownPath, config, callback);
 }