embed feedback widget

Signed-off-by: David Karlsson <david.karlsson@docker.com>

_layouts/docs.html

@@ -22,13 +22,14 @@
                 <div class="col-body">
                     <main class="col-content content">
                         <section class="section">
-                            {%- if page.title -%}
+                            <div class="content-title">
-                            <h1>{{ page.title }}</h1>
+                              {%- if page.title -%}
-                            {%- endif -%}
+                              <h1>{{ page.title }}</h1>
-                            {%- if page.advisory -%}
+                              {%- endif -%}
-                            <blockquote>{{ site.data.advisories.texts[page.advisory] | markdownify }}</blockquote>
+                              {%- if site.hotjar_id and site.hotjar_id != '' and page.skip_feedback != true -%}
-                            {%- endif -%}
+                                <button id="hotjar-feedback">Give feedback</button>
-                            <p></p>
+                              {%- endif -%}
+                            </div>
                             {{ content }}
                         </section>
                     </main>

_scss/_buttons.scss

@@ -69,3 +69,24 @@ a.button.outline-btn.min-hgt {
 .outline-btn:hover {
     opacity: 0.8;
 }
+
+// Hotjar feedback button
+#hotjar-feedback {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: $light-blue-500;
+  font-weight: bold;
+  background: none;
+  padding: 8px 16px;
+  border: 2px solid $light-blue-500;
+  border-radius: 2px;
+  .night & {
+    color: $white;
+    border: 2px solid $dark-blue-500;
+  }
+  &:hover {
+    opacity: 0.7;
+  }
+}

_scss/_content.scss

@@ -202,4 +202,9 @@ main img:hover {opacity: 0.7;}
   }
 }
 
-
+// Make the title wrapper flex
+.content-title {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}