Revert "Revert "kapa ai 🤖""

assets/css/code.css

@@ -1,64 +1,80 @@
 @layer components {
-  .highlight,
-  :not(pre) > code {
-    font-size: 0.875em;
-    border: 1px solid;
-    border-radius: theme("spacing.1");
-    background: theme("colors.white");
-    border-color: theme("colors.gray.light.300");
-    .dark & {
-      background: theme("colors.gray.dark.200");
-      border-color: theme("colors.gray.dark.300");
+  .prose {
+    .highlight,
+    :not(pre) > code {
+      font-size: 0.875em;
+      border: 1px solid;
+      border-radius: theme("spacing.1");
+      background: theme("colors.white");
+      border-color: theme("colors.gray.light.300");
+      .dark & {
+        background: theme("colors.gray.dark.200");
+        border-color: theme("colors.gray.dark.300");
+      }
     }
-  }
 
-  :not(pre) > code {
-    background: theme("colors.gray.light.200");
-    display: inline-block;
-    margin: 0;
-    font-weight: 400;
-    overflow-wrap: anywhere;
-    padding: 0 4px;
-    table & {
-      overflow-wrap: unset;
+    :not(pre) > code {
+      background: theme("colors.gray.light.200");
+      display: inline-block;
+      margin: 0;
+      font-weight: 400;
+      overflow-wrap: anywhere;
+      padding: 0 4px;
+      table & {
+        overflow-wrap: unset;
+      }
     }
-  }
 
-  /* Indented code blocks */
-  :not(.highlight) > pre {
-    @apply my-4 overflow-x-auto p-3;
-    font-size: 0.875em;
-    border: 1px solid;
-    border-radius: theme("spacing.1");
-    background: theme("colors.white");
-    border-color: theme("colors.gray.light.300");
-    .dark & {
-      background: theme("colors.gray.dark.200");
-      border-color: theme("colors.gray.dark.300");
+    /* Indented code blocks */
+    :not(.highlight) > pre {
+      @apply my-4 overflow-x-auto p-3;
+      font-size: 0.875em;
+      border: 1px solid;
+      border-radius: theme("spacing.1");
+      background: theme("colors.white");
+      border-color: theme("colors.gray.light.300");
+      .dark & {
+        background: theme("colors.gray.dark.200");
+        border-color: theme("colors.gray.dark.300");
+      }
     }
-  }
 
-  .highlight {
-    @apply my-4 overflow-x-auto p-3;
+    .highlight {
+      @apply my-4 overflow-x-auto p-3;
 
-    /* LineTableTD */
-    .lntd {
-      vertical-align: top;
-      padding: 0;
-      margin: 0;
-      border: 0;
-    }
-    /* LineTable */
-    .lntable {
-      display: table;
-      width: 100%;
-      border-spacing: 0;
-      padding: 0;
-      margin: 0;
-      border: 0;
-      /* LineNumberColumnHighlight */
-      .lntd:first-child .hl {
-        display: block;
+      /* LineTableTD */
+      .lntd {
+        vertical-align: top;
+        padding: 0;
+        margin: 0;
+        white-space: nowrap;
+        font-weight: 400;
+        padding: 0 4px;
+      }
+
+      .highlight {
+        @apply my-4 overflow-x-auto p-3;
+
+        /* LineTableTD */
+        .lntd {
+          vertical-align: top;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+        /* LineTable */
+        .lntable {
+          display: table;
+          width: 100%;
+          border-spacing: 0;
+          padding: 0;
+          margin: 0;
+          border: 0;
+          /* LineNumberColumnHighlight */
+          .lntd:first-child .hl {
+            display: block;
+          }
+        }
       }
     }
   }

assets/css/kapa.css

@@ -0,0 +1,17 @@
+.mantine-Modal-root {
+  ol {
+    list-style-type: decimal;
+  }
+
+  .mantine-List-root {
+    min-width: 100%;
+  }
+
+  .mantine-List-itemWrapper {
+    max-width: 100%;
+  }
+
+  .mantine-Prism-copy {
+    background-color: rgb(20, 21, 23)
+  }
+}

assets/css/styles.css

@@ -10,6 +10,7 @@
 @import "/assets/css/code";
 @import "/assets/css/toc";
 @import "/assets/css/callouts";
+@import "/assets/css/kapa";
 
 @import "tailwindcss/utilities";
 @import "/assets/css/syntax-light";

hugo.yaml

@@ -80,6 +80,8 @@ languages:
     languageName: English
 
 params:
+  kapa:
+    id: ba5c2cbc-6535-4334-a72e-050f7a681c8a
   analytics:
     hotjar:
       prod: 3169877

layouts/partials/head.html

@@ -36,6 +36,32 @@
   })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
   </script>
 {{ end }}
+{{ if hugo.IsProduction }}
+  {{/*  kapa.ai widget */}}
+  <script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var script = document.createElement('script');
+    script.src = 'https://widget.kapa.ai/kapa-widget.bundle.js';
+    script.setAttribute('data-website-id', '{{ site.Params.kapa.id }}');
+    script.setAttribute('data-project-name', 'Docker');
+    script.setAttribute('data-button-image-height', '29px');
+    script.setAttribute('data-button-image-width', '40px');
+    script.setAttribute('data-modal-image-height', '29px');
+    script.setAttribute('data-modal-image-width', '40px');
+    script.setAttribute('data-modal-title-color', '#fff');
+    script.setAttribute('data-project-color', '#086dd7');
+    script.setAttribute('data-modal-header-bg-color', '#086dd7');
+    script.setAttribute('data-project-logo', '/assets/images/logo-icon-white.svg');
+    script.setAttribute('data-font-family', 'Roboto Flex,sans-serif');
+    script.setAttribute('data-modal-disclaimer', 'This is a custom LLM for answering questions about Docker. Answers are based on the contents of the documentation. This feature is experimental - rate the answers to let us know what you think!');
+    script.setAttribute('data-modal-disclaimer-bg-color', '#e5f2fc');
+    script.setAttribute('data-modal-disclaimer-text-color', '#086dd7');
+    script.setAttribute('data-modal-example-questions','What is a volume?,How do I build multi-platform images?,Can I configure Docker to use a proxy?,What does a Docker subscription include?');
+    script.async = true;
+    document.body.appendChild(script);
+  });
+  </script>
+{{ end }}
 {{/* preload Roboto Flex as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
 <link href="/assets/fonts/RobotoFlex.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
 {{ partialCached "utils/css.html" "-" }}