Website: bring back support for markdown ((bubbles)) (#43189)

Related to: https://github.com/fleetdm/fleet/issues/42738

Changes:
- Uncommented and updated the code that replaces text content in double
parentheses with `<bubble>` elements in build-static-content to not
replace content inside of `<code>` elements
- Created a `<bubble>` component based on the ((bubbles)) in the
Sails.js docs.

website/assets/js/components/bubble.component.js

@@ -0,0 +1,60 @@
+/**
+ * <bubble>
+ * -----------------------------------------------------------------------------
+ * A styled span used in documentation.
+ *
+ * @type {Component}
+ *
+ * @event click   [emitted when clicked]
+ * -----------------------------------------------------------------------------
+ */
+
+parasails.registerComponent('bubble', {
+  //  ╔═╗╦═╗╔═╗╔═╗╔═╗
+  //  ╠═╝╠╦╝║ ║╠═╝╚═╗
+  //  ╩  ╩╚═╚═╝╩  ╚═╝
+  props: [
+    'type',
+  ],
+
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: function (){
+    return {
+      rawType: this.type ? this.type.replace(/\?$/, '').toLowerCase() : '',
+      isUncertain: this.type ? this.type.match(/\?$/g) ? true : false : '',
+    };
+  },
+
+  //  ╦ ╦╔╦╗╔╦╗╦
+  //  ╠═╣ ║ ║║║║
+  //  ╩ ╩ ╩ ╩ ╩╩═╝
+  template: `
+    <span>
+      <span purpose="bubble-heart" :class="rawType+' '+[[isUncertain ? 'uncertain' : '']]" class="">{{type}}</span>
+    </span>
+  `,
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    if(this.type === undefined){
+      throw new Error(`Incomplete usage of <bubble>: Please provide a 'type' that will be displayed as text inside the bubble. e.g., <bubble type="Observer"></bubble>`);
+    }
+  },
+  mounted: async function(){
+    //…
+  },
+  beforeDestroy: function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  }
+});

website/assets/styles/components/bubble.component.less

@@ -0,0 +1,30 @@
+
+/**
+ * <bubble>
+ *
+ * App-wide styles for our bubbles.
+ */
+
+ [parasails-component='bubble'] {
+  span {
+    color: white;
+    display: inline-block;
+    padding-left: 10px;
+    padding-right: 10px;
+    height: 20px;
+    line-height: 20px;
+    vertical-align: middle;
+    border-radius: 15px;
+    font-size: 11px;
+    background-color: #0e6471;
+    border-color: darken(#0e6471, 10%);
+    border-style: none;
+    &.uncertain {
+      border-width: 1px;
+      border-style: solid;
+      font-style: italic;
+      background-color: #FFF;
+      color: #222;
+    }
+  }
+}

website/assets/styles/importer.less

@@ -30,6 +30,7 @@
 @import 'components/animated-arrow-button.component.less';
 @import 'components/docs-nav-and-search.component.less';
 @import 'components/multifield.component.less';
+@import 'components/bubble.component.less';
 
 // Per-page styles
 @import 'pages/homepage.less';

website/scripts/build-static-content.js

@@ -426,8 +426,22 @@ module.exports = {
               if(htmlString.match(/(`){3,4}[\s\S]+(`){3}/g)){
                 throw new Error('The compiled markdown has a codeblock (\`\`\`) nested inside of another codeblock (\`\`\`\`) at '+pageSourcePath+'. To resolve this error, remove the codeblock nested inside another codeblock from this file.');
               }
-              // (2025-11-06) eashaw: I'm commenting the line below out to resolve a bug where the regex below would replace content inside of a code block. See https://github.com/fleetdm/fleet/issues/34935 for more details.
-              // htmlString = htmlString.replace(/\(\(([^())]*)\)\)/g, '<bubble type="$1" class="colors"><span is="bubble-heart"></span></bubble>');// « Replace ((bubble))s with HTML. For more background, see https://github.com/fleetdm/fleet/issues/706#issuecomment-884622252
+              htmlString = htmlString.replace(
+                /(<code(?:\s[^>]*)?>[\s\S]*?<\/code>)|\(\(([^()]*)\)\)/g,
+                (match, codeBlock, bubbleContent) => {
+                  if (codeBlock) {
+                    // ignore content inside of <code> elements.
+                    return codeBlock;
+                  } else {
+                    let sanitizedType = bubbleContent.trim().replace(/["'`]/g, '');
+                    if (!sanitizedType) {
+                      return match; // ignore bubbles with no text
+                    } else {
+                      return `<bubble type="${sanitizedType}" class="colors"></bubble>`;
+                    }
+                  }
+                }
+              );// « Replace ((bubble))s (outside of code blocks) with HTML. For more background, see https://github.com/fleetdm/fleet/issues/706#issuecomment-884622252
               htmlString = htmlString.replace(/(href="(\.\/[^"]+|\.\.\/[^"]+)")/g, (hrefString)=>{// « Modify path-relative links like `./…` and `../…` to make them absolute.  (See https://github.com/fleetdm/fleet/issues/706#issuecomment-884641081 for more background)
                 let oldRelPath = hrefString.match(/href="(\.\/[^"]+|\.\.\/[^"]+)"/)[1];
                 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

website/views/layouts/layout.ejs

@@ -857,6 +857,7 @@
     <script src="/js/components/ajax-form.component.js"></script>
     <script src="/js/components/animated-arrow-button.component.js"></script>
     <script src="/js/components/bar-chart.component.js"></script>
+    <script src="/js/components/bubble.component.js"></script>
     <script src="/js/components/call-to-action.component.js"></script>
     <script src="/js/components/cloud-error.component.js"></script>
     <script src="/js/components/docs-nav-and-search.component.js"></script>