diff --git a/docs/src/theme/Footer.js b/docs/src/theme/Footer.js index 094c27098..67f7211cb 100644 --- a/docs/src/theme/Footer.js +++ b/docs/src/theme/Footer.js @@ -1,38 +1,46 @@ -import React from 'react'; -import Footer from '@theme-original/Footer'; -import { MendableFloatingButton } from '@mendable/search'; +import React from "react"; +import Footer from "@theme-original/Footer"; +import { MendableFloatingButton } from "@mendable/search"; export default function FooterWrapper(props) { - const iconSpan1 = React.createElement('img', { - src: '/img/chain.png', - style: { width: '40px' } - }, null); - - const icon = React.createElement('div', { - style: { - color: '#000000', - fontSize: '22px', - width: '48px', - height: '48px', - margin: '0px', - padding: '0px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - textAlign: 'center' - } - }, [iconSpan1]); - - const mendableFloatingButton = React.createElement( - MendableFloatingButton, + const iconSpan1 = React.createElement( + "img", { - floatingButtonStyle: { color: '#000000', backgroundColor: '#f6f6f6' }, - anon_key: 'b7f52734-297c-41dc-8737-edbd13196394', // Mendable Search Public ANON key, ok to be public - showSimpleSearch: true, - icon: icon, - } + src: "/img/chain.png", + style: { width: "40px" }, + }, + null ); + const icon = React.createElement( + "div", + { + style: { + color: "#000000", + fontSize: "22px", + width: "48px", + height: "48px", + margin: "0px", + padding: "0px", + display: "flex", + alignItems: "center", + justifyContent: "center", + textAlign: "center", + }, + }, + [iconSpan1] + ); + const { + siteConfig: { customFields }, + } = useDocusaurusContext(); + + const mendableFloatingButton = React.createElement(MendableFloatingButton, { + floatingButtonStyle: { color: "#000000", backgroundColor: "#f6f6f6" }, + anon_key: customFields.mendableAnonKey, // Mendable Search Public ANON key, ok to be public + showSimpleSearch: true, + icon: icon, + }); + return ( <>