Add all marketing tracking scripts (#126)

Updated and enabled cluecon banner

docusaurus.config.js

@@ -151,42 +151,29 @@ const config = {
     }),
 
   plugins: ["docusaurus-plugin-sass"],
-  headTags: [
+  headTags: [],
+  scripts: [
     {
-      tagName: "script",
-      innerHTML: `
-  window['_fs_host'] = 'fullstory.com';
-  window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
-  window['_fs_org'] = 'o-1QJ4QX-na1';
-  window['_fs_namespace'] = 'FS';
-  !function(m,n,e,t,l,o,g,y){var s,f,a=function(h){
-  return!(h in m)||(m.console&&m.console.log&&m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),!1)}(e)
-  ;function j(b){var h,d=[];function k(){h&&(d.forEach((function(b){var d;try{d=b[h[0]]&&b[h[0]](h[1])}catch(h){return void(b[3]&&b[3](h))}
-  d&&d.then?d.then(b[2],b[3]):b[2]&&b[2](d)})),d.length=0)}function r(b){return function(d){h||(h=[b,d],k())}}return b(r(0),r(1)),{
-  then:function(b,h){return j((function(r,i){d.push([b,h,r,i]),k()}))}}}a&&(g=m[e]=function(){var b=function(b,d,k,r){function i(i,c){
-  h(b,d,k,i,c,r)}r=r||2;var c,u=/Async$/;return u.test(b)?(b=b.replace(u,""),"function"==typeof Promise?new Promise(i):j(i)):h(b,d,k,c,c,r)}
-  ;function h(h,d,k,r,i,c){return b._api?b._api(h,d,k,r,i,c):(b.q&&b.q.push([h,d,k,r,i,c]),null)}return b.q=[],b}(),y=function(b){function h(h){
-  "function"==typeof h[4]&&h[4](new Error(b))}var d=g.q;if(d){for(var k=0;k<d.length;k++)h(d[k]);d.length=0,d.push=h}},function(){
-  (o=n.createElement(t)).async=!0,o.crossOrigin="anonymous",o.src="https://"+l,o.onerror=function(){y("Error loading "+l)}
-  ;var b=n.getElementsByTagName(t)[0];b.parentNode.insertBefore(o,b)}(),function(){function b(){}function h(b,h,d){g(b,h,d,1)}function d(b,d,k){
-  h("setProperties",{type:b,properties:d},k)}function k(b,h){d("user",b,h)}function r(b,h,d){k({uid:b},d),h&&k(h,d)}g.identify=r,g.setUserVars=k,
-  g.identifyAccount=b,g.clearUserCookie=b,g.setVars=d,g.event=function(b,d,k){h("trackEvent",{name:b,properties:d},k)},g.anonymize=function(){r(!1)
-  },g.shutdown=function(){h("shutdown")},g.restart=function(){h("restart")},g.log=function(b,d){h("log",{level:b,msg:d})},g.consent=function(b){
-  h("setIdentity",{consent:!arguments.length||b})}}(),s="fetch",f="XMLHttpRequest",g._w={},g._w[f]=m[f],g._w[s]=m[s],m[s]&&(m[s]=function(){
-  return g._w[s].apply(this,arguments)}),g._v="2.0.0")}(window,document,window._fs_namespace,"script",window._fs_script);
-  `,
-      attributes: {
-        type: "text/javascript",
-      },
+      src: "/freeswitch/scripts/bannerica.js"
     },
-  ],
-  scripts: [// "/freeswitch/scripts/bannerica.js"
     {
       src: "/freeswitch/scripts/apollo.js",
       async: true,
-    }
+    },
+    {
+      src: "/freeswitch/scripts/fullstory.js",
+      async: true,
+    },
+    {
+      src: "/freeswitch/scripts/koala.js",
+      async: true,
+    },
+    {
+      src: "/freeswitch/scripts/munchkin.js",
+      async: true,
+    },
   ],
-  stylesheets: ["/freeswitch/styles/bannerica.css"]
+  stylesheets: ["/freeswitch/styles/bannerica.css?v=0.1.3"]
 };
 
 module.exports = config;

static/scripts/apollo.js

@@ -1,4 +1,4 @@
 function initApollo(){var n=Math.random().toString(36).substring(7),o=document.createElement("script");
-    o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,o.async=!0,o.defer=!0,
+  o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,o.async=!0,o.defer=!0,
     o.onload=function(){window.trackingFunctions.onLoad({appId:"66314dd45dbb1701c7850f76"})},
     document.head.appendChild(o)}initApollo();

static/scripts/bannerica.js

@@ -1,9 +1,91 @@
-document.addEventListener("DOMContentLoaded", function() {
-    var link = document.createElement("a");
+const bannerLink = 'https://cluecon.com';
+const announcementText = '🚀 ClueCon: a real-time communications conference by developers for developers. August 12-15 in Chicago, IL 📞';
 
-    link.href = "https://signalwire.com/enterprise-connect-2024?x-craft-preview=Pf1n9sLgPn&x-craft-preview=GycqMWdsUN&x-craft-preview=7S4KoPCcLT&x-craft-preview=ymLvN3CqO1&x-craft-preview=BhzWPl7Ntk&x-craft-preview=rHg5bUKLTk&x-craft-preview=rHg5bUKLTk&x-craft-preview=8rBwlgtYiq&utm_source=google&utm_medium=ads&utm_campaign=us_search_brand&utm_content=testing&gad_source=1&gclid=Cj0KCQiAuqKqBhDxARIsAFZELmLpkRL3cC2CMMtFig2QqUyk9m9Ty_on-7WaRZPbLmZNlV41gQmd204aAkoKEALw_wcB"; // Replace with your desired link URL
-    link.target = "_blank";
-    link.id="bannerica"
+document.addEventListener('DOMContentLoaded', initializeBanner);
 
-    document.body.insertBefore(link, document.body.firstChild);
-});
+function initializeBanner() {
+
+  createHeaderElements();
+  setInitialVisibility();
+  bindEventListeners();
+}
+
+function createHeaderElements() {
+  let headerContainer = document.getElementById('headerContainer');
+
+  if (!headerContainer) {
+    headerContainer = document.createElement('div');
+    headerContainer.id = 'headerContainer';
+    document.body.insertBefore(headerContainer, document.body.firstChild);
+
+    const customBanner = document.createElement('a');
+    customBanner.id = 'bannerica';
+    customBanner.href = bannerLink;
+    customBanner.className = 'bannerica';
+    customBanner.innerHTML = `
+      <button type="button" aria-label="Close" class="close-banner-btn"></button>
+    `;
+    headerContainer.appendChild(customBanner);
+
+    const announcementBar = document.createElement('div');
+    announcementBar.className = 'announcementBar';
+    announcementBar.innerHTML = `
+      <div class="announcementBarText"><a href="${bannerLink}">${announcementText}</a></div>
+      <button class="expand-banner-btn" aria-label="Expand"></button>
+    `;
+    headerContainer.appendChild(announcementBar);
+  }
+}
+
+function setInitialVisibility() {
+  const customBanner = document.getElementById('bannerica');
+  const announcementBar = document.querySelector('.announcementBar');
+  const savedState = localStorage.getItem('bannerVisible');
+
+  if (savedState !== null) {
+    const isBannerVisible = savedState === 'true';
+    customBanner.style.display = isBannerVisible ? 'block' : 'none';
+    announcementBar.style.display = isBannerVisible ? 'none' : 'block';
+  } else {
+    customBanner.style.display = 'block';
+    announcementBar.style.display = 'none';
+  }
+}
+
+function bindEventListeners() {
+  const customBanner = document.getElementById('bannerica');
+  const announcementBar = document.querySelector('.announcementBar');
+  const closeBtn = customBanner.querySelector('.close-banner-btn');
+  const expandBtn = announcementBar.querySelector('.expand-banner-btn');
+
+  if (closeBtn && !closeBtn.hasAttribute('data-listener')) {
+    closeBtn.addEventListener('click', handleBannerClose);
+    closeBtn.setAttribute('data-listener', 'true');
+  }
+
+  if (expandBtn && !expandBtn.hasAttribute('data-listener')) {
+    expandBtn.addEventListener('click', handleBannerExpand);
+    expandBtn.setAttribute('data-listener', 'true');
+  }
+}
+
+function handleBannerClose(event) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const customBanner = document.getElementById('bannerica');
+  const announcementBar = document.querySelector('.announcementBar');
+
+  customBanner.style.display = 'none';
+  announcementBar.style.display = 'block';
+  localStorage.setItem('bannerVisible', 'false');
+}
+
+function handleBannerExpand() {
+  const customBanner = document.getElementById('bannerica');
+  const announcementBar = document.querySelector('.announcementBar');
+
+  customBanner.style.display = 'block';
+  announcementBar.style.display = 'none';
+  localStorage.setItem('bannerVisible', 'true');
+}

static/scripts/fullstory.js

@@ -0,0 +1,19 @@
+window['_fs_host'] = 'fullstory.com';
+window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
+window['_fs_org'] = 'o-1QJ4QX-na1';
+window['_fs_namespace'] = 'FS';
+!function(m,n,e,t,l,o,g,y){var s,f,a=function(h){
+  return!(h in m)||(m.console&&m.console.log&&m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),!1)}(e)
+;function j(b){var h,d=[];function k(){h&&(d.forEach((function(b){var d;try{d=b[h[0]]&&b[h[0]](h[1])}catch(h){return void(b[3]&&b[3](h))}
+  d&&d.then?d.then(b[2],b[3]):b[2]&&b[2](d)})),d.length=0)}function r(b){return function(d){h||(h=[b,d],k())}}return b(r(0),r(1)),{
+  then:function(b,h){return j((function(r,i){d.push([b,h,r,i]),k()}))}}}a&&(g=m[e]=function(){var b=function(b,d,k,r){function i(i,c){
+  h(b,d,k,i,c,r)}r=r||2;var c,u=/Async$/;return u.test(b)?(b=b.replace(u,""),"function"==typeof Promise?new Promise(i):j(i)):h(b,d,k,c,c,r)}
+;function h(h,d,k,r,i,c){return b._api?b._api(h,d,k,r,i,c):(b.q&&b.q.push([h,d,k,r,i,c]),null)}return b.q=[],b}(),y=function(b){function h(h){
+  "function"==typeof h[4]&&h[4](new Error(b))}var d=g.q;if(d){for(var k=0;k<d.length;k++)h(d[k]);d.length=0,d.push=h}},function(){
+  (o=n.createElement(t)).async=!0,o.crossOrigin="anonymous",o.src="https://"+l,o.onerror=function(){y("Error loading "+l)}
+  ;var b=n.getElementsByTagName(t)[0];b.parentNode.insertBefore(o,b)}(),function(){function b(){}function h(b,h,d){g(b,h,d,1)}function d(b,d,k){
+  h("setProperties",{type:b,properties:d},k)}function k(b,h){d("user",b,h)}function r(b,h,d){k({uid:b},d),h&&k(h,d)}g.identify=r,g.setUserVars=k,
+  g.identifyAccount=b,g.clearUserCookie=b,g.setVars=d,g.event=function(b,d,k){h("trackEvent",{name:b,properties:d},k)},g.anonymize=function(){r(!1)
+},g.shutdown=function(){h("shutdown")},g.restart=function(){h("restart")},g.log=function(b,d){h("log",{level:b,msg:d})},g.consent=function(b){
+  h("setIdentity",{consent:!arguments.length||b})}}(),s="fetch",f="XMLHttpRequest",g._w={},g._w[f]=m[f],g._w[s]=m[s],m[s]&&(m[s]=function(){
+  return g._w[s].apply(this,arguments)}),g._v="2.0.0")}(window,document,window._fs_namespace,"script",window._fs_script);

static/scripts/munchkin.js

@@ -0,0 +1,20 @@
+(function() {
+  var didInit = false;
+  function initMunchkin() {
+    if(didInit === false) {
+      didInit = true;
+      Munchkin.init('262-HGR-311');
+    }
+  }
+  var s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.async = true;
+  s.src = '//munchkin.marketo.net/munchkin.js';
+  s.onreadystatechange = function() {
+    if (this.readyState == 'complete' || this.readyState == 'loaded') {
+      initMunchkin();
+    }
+  };
+  s.onload = initMunchkin;
+  document.getElementsByTagName('head')[0].appendChild(s);
+})();

static/styles/bannerica.css

@@ -1,21 +1,147 @@
 #bannerica {
-    content: "";
-    height: 30vh;
+    height: 25vh;
     display: block;
-    background-image: url("/freeswitch/images/Banner-PUC.webp");
-    background-size: contain; /* This will make the background image cover the entire box */
-    background-position: center; /* Center the background image within the box */
-    background-repeat: no-repeat; /* Ensure the background image is not repeated */
+    background-image: url("/freeswitch/attachments/cluecon-20.gif");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+    content: "";
 }
 
-@media screen and (max-width: 900px) {
+/* Media query for screen widths up to 1919px */
+@media screen and (max-width: 1919px) {
     #bannerica {
-        height:0;
-        padding-top: calc(1312 / 4687 * 100%);
+        height: 0;
+        padding-top: calc(232 / 1920 * 100%);
     }
-    #bannerica::before {
-        content: "";
-        display: block;
-        padding-top: calc(1312 / 4687 * 100%);
+}
+
+/* Media query for screen widths 1920px and above */
+@media screen and (min-width: 1920px) {
+    #bannerica {
+        height: 0;
+        padding-top: calc(232 / 1920 * 100%);
     }
-}
+}
+
+
+.expand-banner-btn {
+    z-index: 1000;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    font-family: var(--ifm-btn-font-family);
+}
+
+.close-banner-btn {
+    z-index: 1000;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    font-family: var(--ifm-btn-font-family);
+}
+
+.expand-banner-btn::before {
+    content: '\002B'; /* Unicode for + symbol */
+    font-size: 30px;
+    display: inline-block;
+    line-height: 1;
+}
+
+.close-banner-btn::before {
+    content: '\2212'; /* Unicode for - symbol */
+    font-size: 30px;
+    display: inline-block;
+    line-height: 1;
+}
+
+.close-banner-btn:hover, .expand-banner-btn:hover,
+.close-banner-btn:focus, .expand-banner-btn:focus {
+    color: var(--ifm-color-btn-hover);
+}
+
+.close-banner-btn:active, .expand-banner-btn:active {
+    color: var(--ifm-color-btn-active);
+}
+
+
+:root {
+    --ifm-color-btn-active: #ea6f6f;
+    --ifm-color-btn-hover: #044ef4;
+    --ifm-color-black: #000;
+    --ifm-color-gray-100: #f5f6f7;
+    --ifm-color-white: #fff;
+    --ifm-color-emphasis-100: var(--ifm-color-gray-100);
+    --ifm-btn-font-family: 'Arial', sans-serif;
+}
+
+@media (min-width: 997px) {
+    :root {
+        --docusaurus-announcement-bar-height: 30px;
+    }
+}
+
+.announcementBar {
+    align-items: center; /* Vertically center the content */
+    justify-content: center; /* Horizontally center the content */
+    --site-announcement-bar-stripe-color1: #467796;
+    --site-announcement-bar-stripe-color2: #D4E0E3;
+    background: repeating-linear-gradient(
+            35deg,
+            var(--site-announcement-bar-stripe-color1) 0px,
+            var(--site-announcement-bar-stripe-color1) 40px,
+            var(--site-announcement-bar-stripe-color2) 40px,
+            var(--site-announcement-bar-stripe-color2) 80px
+    );
+    border-bottom: 1px solid var(--ifm-color-emphasis-100);
+    min-height: var(--docusaurus-announcement-bar-height); /* Ensure this variable is set properly in the root */
+    font-size: 20px;
+    font-weight: 700;
+    position: relative;
+    padding-right: 50px; /* Extra padding to accommodate button */
+    width: 100%; /* Ensure it takes the full width */
+    display: flex;
+    justify-content:center; 
+    align-items:center
+}
+
+.announcementBar::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.7); /* White foreground with 50% opacity */
+    z-index: 0; /* Ensure it's behind the text */
+}
+
+.announcementBarText, .announcementBarText a {
+    color: #000000;
+    font-size: 20px !important;
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    display: flex;
+    justify-content:center; 
+    align-items:center;
+    line-height: normal;
+    text-decoration: none;
+}
+
+.announcementBarText a:hover, .announcementBarText a:focus, .announcementBarText a:active {
+    color: inherit; /* Ensure the color remains the same on hover, focus, and active states */
+    text-decoration: underline;
+}
+