fix: align Algolia search button

Author: Abhash-Chakraborty

docusaurus.config.ts

@@ -276,7 +276,7 @@ const config: Config = {
         max: 1030,
         min: 640,
         steps: 2,
-        disableInDev: false,
+        disableInDev: true,
       },
     ],
   ],

src/components/AlgoliaSiteSearch/index.tsx

@@ -23,6 +23,7 @@ declare global {
         applicationId: string;
         apiKey: string;
         indexName: string;
+        insights?: boolean;
         attributes: {
           primaryText: string;
           secondaryText: string;
@@ -32,6 +33,7 @@ declare global {
         };
         darkMode: boolean;
       }) => void;
+      destroy?: (container: string) => void;
     };
   }
 }
@@ -115,6 +117,7 @@ export default function AlgoliaSiteSearch(): React.ReactElement | null {
           applicationId,
           apiKey,
           indexName,
+          insights: false,
           attributes: {
             primaryText: "title",
             secondaryText: "description",
@@ -131,6 +134,7 @@ export default function AlgoliaSiteSearch(): React.ReactElement | null {
 
     return () => {
       cancelled = true;
+      window.SiteSearch?.destroy?.(`#${containerId}`);
     };
   }, [apiKey, applicationId, indexName, isConfigured]);
 

src/css/custom.css

@@ -1388,6 +1388,72 @@ html {
   box-sizing: border-box !important;
 }
 
+.algolia-sitesearch-navbar {
+  display: flex !important;
+  align-items: center !important;
+  padding: 0.2rem 0.3rem !important;
+}
+
+.algolia-sitesearch-navbar #algolia-sitesearch-navbar {
+  display: flex;
+  align-items: center;
+}
+
+.algolia-sitesearch-navbar .sitesearch-button {
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  box-sizing: border-box !important;
+  width: 250px;
+  height: 36px !important;
+  min-width: 250px !important;
+  padding: 0 12px 0 48px !important;
+  line-height: 1 !important;
+  transform: none !important;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.algolia-sitesearch-navbar .sitesearch-button:hover {
+  transform: none !important;
+}
+
+.algolia-sitesearch-navbar .sitesearch-button .search-icon {
+  position: absolute !important;
+  top: 50% !important;
+  left: 16px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 18px !important;
+  height: 18px !important;
+  margin: 0 !important;
+  line-height: 0 !important;
+  pointer-events: none;
+  transform: translateY(-50%) !important;
+}
+
+.algolia-sitesearch-navbar .sitesearch-button .search-icon svg {
+  display: block;
+  width: 18px !important;
+  height: 18px !important;
+  margin: 0 !important;
+}
+
+.algolia-sitesearch-navbar .sitesearch-button .button-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+}
+
+.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut {
+  margin-left: 10px;
+  flex-shrink: 0;
+}
+
 [data-theme="dark"] .explore-btn:hover {
   color: white;
 }

static/pinterest-init.js

@@ -1,20 +1,29 @@
 console.log("✅ pinterest-init.js loaded");
-!(function (e) {
-  if (!window.pintrk) {
-    window.pintrk = function () {
-      window.pintrk.queue.push(Array.prototype.slice.call(arguments));
-    };
-    var n = window.pintrk;
-    ((n.queue = []), (n.version = "3.0"));
-    var t = document.createElement("script");
-    t.async = !0;
-    t.src = e;
-    var r = document.getElementsByTagName("script")[0];
-    r.parentNode.insertBefore(t, r);
-  }
-})("https://s.pinimg.com/ct/core.js");
 
-pintrk("load", "2613717138491", {
-  em: "b58906c504c5638798eb06151e6f49af1b0e4c6c3b5d4f30d9c2268dbe6f9d60", // example hashed email
-});
-pintrk("page");
+const isLocalhost = ["localhost", "127.0.0.1", "::1"].includes(
+  window.location.hostname,
+);
+
+if (isLocalhost) {
+  console.log("Pinterest tracking skipped in local development");
+} else {
+  !(function (e) {
+    if (!window.pintrk) {
+      window.pintrk = function () {
+        window.pintrk.queue.push(Array.prototype.slice.call(arguments));
+      };
+      var n = window.pintrk;
+      ((n.queue = []), (n.version = "3.0"));
+      var t = document.createElement("script");
+      t.async = !0;
+      t.src = e;
+      var r = document.getElementsByTagName("script")[0];
+      r.parentNode.insertBefore(t, r);
+    }
+  })("https://s.pinimg.com/ct/core.js");
+
+  pintrk("load", "2613717138491", {
+    em: "b58906c504c5638798eb06151e6f49af1b0e4c6c3b5d4f30d9c2268dbe6f9d60", // example hashed email
+  });
+  pintrk("page");
+}