create a plugin to inject heap tracking js client-side

Author: infrar

docs/get-started.md

@@ -10,8 +10,8 @@ This tutorial will teach you:
 - How to create application configurations
 - How to open a port and direct traffic to an application
 
-<figure class="video_container">
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/fzig4AvMr74" frameborder="0" allowfullscreen="true"> </iframe>
+<figure className="video_container">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/fzig4AvMr74" frameBorder="0" allowFullScreen={true}> </iframe>
 </figure>
 
 ## Step 1: Create Application

docs/guide-config.md

@@ -4,11 +4,10 @@ title: Add Env Variables & Configs
 
 A well designed application is likely to have configurations which vary between deployments. Kubernetes makes it easy to override the configurations specified in images.
 
-<figure class="video_container">
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/bMwc6XPtM3c" frameborder="0" allowfullscreen="true"> </iframe>
+<figure className="video_container">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/bMwc6XPtM3c" frameBorder="0" allowFullScreen={true}> </iframe>
 </figure>
 
-
 ## Example Container Setup
 
 Let's go through an example of configuring Redis. Our goal is to change the `maxmemory` parameter. (Imagine that you need a larger amount of memory for production vs dev)

docs/guide-logs.md

@@ -2,8 +2,8 @@
 title: View Container Logs
 ---
 
-<figure class="video_container">
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/zMzWkzxIKlo" frameborder="0" allowfullscreen="true"> </iframe>
+<figure className="video_container">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/zMzWkzxIKlo" frameBorder="0" allowFullScreen={true}> </iframe>
 </figure>
 
 Sometimes its useful to view the log output of a particular container. Kalm provides a view to quickly view logs in the web:

docusaurus.config.js

@@ -7,6 +7,7 @@
 
 // See https://docusaurus.io/docs/site-config for all the possible
 // site configuration options.
+const path = require("path");
 
 const siteConfig = {
   title: "Kalm", // Title for your website.
@@ -15,10 +16,9 @@ const siteConfig = {
   // Used for publishing and more
   projectName: "kalm",
   organizationName: "kalmhq",
-
   /* path to images for header/footer */
   favicon: "img/kalm-logo-blue.svg",
-
+  plugins: [path.resolve(__dirname, "heap-plugin")],
   themeConfig: {
     algolia: {
       apiKey: "d589acaac8cdb8ae96fca3f78c600ae4",

heap-plugin/index.js

@@ -0,0 +1,29 @@
+module.exports = function (context, options) {
+  // ...
+  return {
+    name: "heap-plugin",
+    async loadContent() {
+      /* ... */
+      console.log("HEAP plugin load content");
+    },
+    async contentLoaded({ content, actions }) {
+      console.log("HEAP plugin content loaded");
+    },
+    /* other lifecycle API */
+    injectHtmlTags() {
+      let heapId = process.env.HEAP_ID;
+      console.log({ heapId });
+      return {
+        headTags: [
+          {
+            tagName: "script",
+            innerHTML: `
+              window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};   
+              heap.load("${heapId}"); 
+            `,
+          },
+        ],
+      };
+    },
+  };
+};