Merge pull request #83 from papermoonio/dev

Update cookbook styling (#82)
papermoonio · Nov 7, 2024 · a06a1fa · a06a1fa
2 parents fd7ad8a + 1bbd5e0
commit a06a1fa
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 20 deletions.
diff --git a/material-overrides/assets/images/wormhole-ai-logo.webp b/material-overrides/assets/images/wormhole-ai-logo.webp
diff --git a/material-overrides/assets/stylesheets/wormhole.css b/material-overrides/assets/stylesheets/wormhole.css
@@ -173,8 +173,8 @@ nav {
 
 /* To align with Wormhole website */
 .md-header {
-  padding: 1.6em 0;
   /* Make header a little thicker */
+  padding: 1.6em 0;
 }
 
 [dir='ltr'] .md-header__title {
@@ -1304,15 +1304,48 @@ label[for='__search']:hover {
   }
 }
 
-/** Kapa styling **/
+/** Cookbook styling **/
 /* Links at bottom of modal */
-.mantine-1k28ke3,
-.mantine-1helznf {
-  font-size: 1em;
+.cookbook-widget {
+  width: min-content;
+  height: fit-content;
+  background-color: var(--grey);
+  border: var(--md-border-width) solid var(--md-border-color);
+  border-right: none;
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+  position: fixed;
+  right: 0;
+  top: 60%;
+  /* Set z-index to be the same value as the header */
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  padding: 24px 16px;
+  gap: 24px;
+}
+
+/* Set the z-index to be greater than .cookbook-widget when search is active */
+[data-md-toggle=search]:checked~.md-header {
+  z-index: 5;
+}
+
+.md-typeset .cookbook-widget__text {
+  gap: 4px;
 }
 
-.mantine-1yrr1ry {
-  font-size: 1.2em;
+.md-typeset .cookbook-widget__text h2 {
+  font-size: 1.5rem;
+  line-height: 1;
+  font-family: var(--md-header-font);
+  margin: 0;
+}
+
+.md-typeset .cookbook-widget__text p {
+  font-size: var(--body-m-size);
+  margin: 0;
 }
 
 /* Cookie consent styling */

diff --git a/material-overrides/main.html b/material-overrides/main.html
@@ -36,18 +36,38 @@
 
 {% block libs %}
   {{ super() }}
-  <link rel="preconnect" href="https://widget.kapa.ai/">
-  <style data-emotion="mantine" data-s=""></style>
-  <script defer
-    src="https://widget.kapa.ai/kapa-widget.bundle.js"
-    data-website-id="a5f481b8-5f4f-43fc-b6bd-11169bac7271"
-    data-project-name="Wormhole"
-    data-project-color="rgb(75, 75, 75)"
-    data-button-box-shadow="0 0 10px rgba(255, 255, 255, 0.2)"
-    data-project-logo="{{ 'assets/images/logo-for-kapa.webp' | url }}"
-    data-font-family="Roboto"
-    data-footer-tos-privacy-links='[{"title": "terms of service", "url": "https://wormhole.com/pages/terms-of-use"}, {"title": "privacy policy", "url": "https://wormhole.com/pages/data-protection-and-privacy-policy"}]'
-  ></script>
+
+  <link rel="preload" href="https://cdn.jsdelivr.net/npm/@cookbookdev/docsbot/dist/standalone/index.cjs.js" as="script">
+  <script>
+    function initAskCookbook() {
+      // It's a public API key, so it's safe to expose it here
+      const PUBLIC_API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NmQ3MzdmOTE4MjcyOTljZGJlNTQ5ZDEiLCJpYXQiOjE3MjUzODA2MDEsImV4cCI6MjA0MDk1NjYwMX0.Qp6dEbLWFzju37NsD3VD3kNFGsHo8qJohXUSl5-lSiQ";
+
+      let cookbookContainer = document.getElementById("__cookbook");
+      if (!cookbookContainer) {
+        cookbookContainer = document.createElement("div");
+        cookbookContainer.id = "__cookbook";
+        cookbookContainer.dataset.apiKey = PUBLIC_API_KEY;
+        document.body.appendChild(cookbookContainer);
+      }
+
+      let cookbookScript = document.getElementById("__cookbook-script");
+      if (!cookbookScript) {
+        cookbookScript = document.createElement("script");
+        cookbookScript.id = "__cookbook-script";
+        cookbookScript.src = "https://cdn.jsdelivr.net/npm/@cookbookdev/docsbot/dist/standalone/index.cjs.js";
+        cookbookScript.async = true;
+        document.head.appendChild(cookbookScript);
+      }
+    }
+
+    // Check if the document is already loaded and if so, initialize the script, otherwise wait for the load event
+    if (document.readyState === "complete") {
+      initAskCookbook();
+    } else {
+      window.addEventListener("load", initAskCookbook);
+    }
+  </script>
 {% endblock %}
 
 {%- block container -%} 
@@ -59,4 +79,10 @@
       {% endblock %}
     </article>
   </div>
-{%- endblock -%} 
+  <div class="cookbook-widget md-typeset">
+    <div class="cookbook-widget__text">
+      <h2>Got any questions?</h2>
+      <p>Find out more</p>
+    </div>
+  </div>
+{%- endblock -%}