Docs: Create styled link to DataStax Langflow in the sidebar (#7143)

add new html sidebar item with custom styles and new font

Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>

docs/css/custom.css

@@ -277,3 +277,46 @@ body {
   margin-top: 0.25rem !important;
 }
 
+.sidebar-ad {
+  margin-top: 2rem;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+  margin-bottom: -0.5rem;
+  border-radius: 0;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  background-color: var(--ifm-background-color);
+  position: sticky;
+  bottom: -0.5rem;
+}
+
+.sidebar-ad a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.sidebar-ad-text-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar-ad-text {
+  font-size: 0.875rem;
+  font-family: "Sora", serif;
+}
+
+.sidebar-ad-text-gradient {
+  color: transparent;
+  background-clip: text;
+  background-image: linear-gradient(
+    to right,
+    #a855f7,
+    var(--ifm-color-primary)
+  );
+}
+

docs/docusaurus.config.js

@@ -24,6 +24,15 @@ const config = {
     defaultLocale: "en",
     locales: ["en"],
   },
+  headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Sora:wght@550;600&display=swap",
+      },
+    }
+  ],
 
   presets: [
     [

docs/sidebars.js

@@ -213,5 +213,18 @@ module.exports = {
         },
       ],
     },
+    {
+      type: "html",
+      className: "sidebar-ad",
+      value: `
+        <a href="https://astra.datastax.com/signup?type=langflow" target="_blank" class="menu__link">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
+          <div class="sidebar-ad-text-container">
+            <span class="sidebar-ad-text">Use Langflow in the cloud</span>
+            <span class="sidebar-ad-text sidebar-ad-text-gradient">Sign up for DataStax Langflow</span>
+          </div>
+        </a>
+      `,
+    },
   ],
 };