docs: add vpn class to vpn links

docs/_plugins/shortcodes/renderInstallation.cjs

@@ -11,49 +11,56 @@ function renderInstallation(content, { lightdomcss = false } = {}) {
    * @type {DocsPage}
    */
   const docsPage = this.ctx._;
+  return /* markdown */`
 
-  const lightDomCSSBlock = `
-
-### Lightdom CSS
-
-Lightdom CSS is required for this element to ensure a reduced [Cumulative Layout Shift (CLS)](https://web.dev/cls/) experience before the element has fully initialized.
+<section class="band">
 
-~~~html
-<link rel="stylesheet" href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom.css">
-~~~
+  ## Installation ${!docsPage.manifest?.packageJson ? '' : /* markdown */`
 
-Replace \`/path/to\` in the \`href\` attribute with the installation path to the \`${docsPage.tagName}\` directory in your project.
+  We are currently working on our CDN which will be soon moving into beta.
+  This will be the preferred method of installation in the near future.
+  If you are a Red Hat employee and have questions or comments about the
+  CDN or installation process please join us in our
+  [Red Hat Design System Google chat][gchat]{.vpn}.
 
-`;
+  In the meantime, install this component using npm:
 
-  return /* html */`
+  ~~~shell
+  npm install ${docsPage.manifest.packageJson.name}
+  ~~~`}
 
-<section class="band">
+  We recommend using an import map to manage your dependencies. For more
+  information on import maps and how to use them, see the
+  [import map reference on MDN Web Docs][im-mdn].
 
-  ## Installation ${!docsPage.manifest?.packageJson ? '' : `
+  Then import this component into your page or app by using a
+  [bare module specifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
 
-  We are currently working on our CDN which will be soon moving into beta.  This will be the preferred method of installation in the near future.  If you are a Red Hat employee and have questions or comments about the CDN or installation process please join us in our [Red Hat Design System Google chat](https://red.ht/43bBaB0).
-  
-  In the meantime, install this component using npm:
+  ~~~js
+  import '@rhds/elements/${docsPage.tagName}/${docsPage.tagName}.js';
+  ~~~${!lightdomcss ? '' : /* markdown */`
 
-~~~shell
-npm install ${docsPage.manifest.packageJson.name}
-~~~`}
+  ### Lightdom CSS
 
-  We recommend using an import map to manage your dependencies. For more information on import maps and how to use them, see the [import map reference on MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap/).
+  Lightdom CSS is required for this element to ensure a reduced
+  [Cumulative Layout Shift (CLS)][cls] experience before
+  the element has fully initialized.
 
-  Then import this component into your project by using a [bare module specifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
-~~~js
-import '@rhds/elements/${docsPage.tagName}/${docsPage.tagName}.js';
-~~~
+  ~~~html
+  <link rel="stylesheet" href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom.css">
+  ~~~
 
-${lightdomcss ? lightDomCSSBlock : ''}
+  Replace \`/path/to\` in the \`href\` attribute with the installation path
+  to the \`${docsPage.tagName}\` directory in your project.`}
 
-${content ?? ''}
+  ${content ?? ''}
 
 </section>
 
-      `;
+[gchat]: https://red.ht/43bBaB0
+[im-mdn]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap/
+[cls]: https://web.dev/cls/
+`;
 }
 
 module.exports = function(eleventyConfig) {

docs/get-started/fts-starter-kit.njk

@@ -17,11 +17,11 @@ includeComponent:
   <p>The <em>Flexible Template System</em> (FTS) is a pattern building system in Drupal that allows its users to scale redhat.com web properties. It serves as a powerful development tool and a comprehensive library of our patterns. FTS users can customize patterns in <em>Patternkit</em> and then use those same patterns to build pages and experiences in Drupal. FTS is a powerful system that empowers its users to build web experiences that are aligned to our brand standards and design system.</p>
 
   <rh-cta variant="secondary">
-    <a href="https://red.ht/3zw5qKy">Learn how to use FTS</a>
+    <a class="vpn" href="https://red.ht/3zw5qKy">Learn how to use FTS</a>
   </rh-cta>
 
   <rh-cta style="margin-left:32px;">
-    <a href="https://red.ht/3No6R3N">Browse Patternkit patterns</a>
+    <a class="vpn" href="https://red.ht/3No6R3N">Browse Patternkit patterns</a>
   </rh-cta>
 
 {%- endcall %}
@@ -177,7 +177,7 @@ includeComponent:
     <li>Design system <a href="../../foundations/">foundations</a></li>
     <li><a href="https://www.redhat.com/en/about/brand/standards">Brand standards</a> like icons, illustrations, photography, etc.</li>
     <li>FTS <a href="https://www.redhat.com/en/demo-fts-patterns">patterns</a> or <a href="https://www.redhat.com/en/demo-fts-layouts">layout</a> demo pages so you can see what exists already</li>
-    <li><a href="https://red.ht/3zw5qKy">The Source</a> page</li>
+    <li><a class="vpn" href="https://red.ht/3zw5qKy">The Source</a> page</li>
   </ul>
 
   <img src="{{ '/assets/get-started/fts-starter-kit/best-practices.png' | url }}" alt="FTS starter kit best practices" style="--example-img-max-width: 1000px;">
@@ -212,7 +212,7 @@ includeComponent:
 
   <p><strong>How do I request a new pattern be added or updated in Drupal?</strong>
   <br />
-  To request a new pattern or request updates to an existing pattern, fill out <a href="https://red.ht/system-ux">this form</a>.</p>
+  To request a new pattern or request updates to an existing pattern, fill out <a class="vpn" href="https://red.ht/system-ux">this form</a>.</p>
 
   <hr class="margin-top--4 margin-bottom--4">
 
@@ -224,7 +224,7 @@ includeComponent:
 
   <p><strong>How can I report a bug?</strong>
   <br />
-  To report a bug, fill out <a href="https://red.ht/system-ux">this form</a> and include screenshots or a detailed explanation. If something is broken or if the bug is high priority, create a new topic in the <a href="https://chat.google.com/room/AAAAXFEmecI">CMS Help | redhat.com</a> Google Chat group.</p>
+  To report a bug, fill out <a class="vpn" href="https://red.ht/system-ux">this form</a> and include screenshots or a detailed explanation. If something is broken or if the bug is high priority, create a new topic in the <a href="https://chat.google.com/room/AAAAXFEmecI">CMS Help | redhat.com</a> Google Chat group.</p>
 
   <hr class="margin-top--4 margin-bottom--4">