How to use Google search on a docusaruas blog

Question

I'm wondering how i might go about adding this search box snippet to a docusarus blog.

<script async src="https://cse.google.com/cse.js?cx=e2e7646659949450a">
 </script>
 <div class="gcse-search"></div>

I've googled lot but can't find any examples or anything close that I could hack on.

I've also tried swizzling the local search and also navbar items but could not figure it out.

I also tried to add it as a html item into the navbar but didn't notice any change.

I'm new to docusarus and not a front end developer, just trying to help get our blog off WordPress :)

Any help/pointers/references would be greatly appreciated.

Update

I seem to have one approach working by just using custom html item in the navbar.

Adding below script from Google:

scripts: [
    {src:'https://cse.google.com/cse.js?cx=e2e7646659949450a', async: false, defer: false}
    ]

And then this item in the navbar:

items: [
    ...
    {
        type: "html",
        position: "left",
        value: '<div class="gcse-search"></div>',
    },
    ...
    ],

This seems like the most simple to me as avoids having to swizzle anything. However i am having an issue in that i need to now f5 refresh the page for the search box to load for some reason. So i need to try figure that out before saying the html item in navbar approach 100% can work.

I am working in thie PR if ends up being useful to anyone: https://github.com/netdata/blog/pull/106/files

score 1 · Answer 1 · answered Oct 27 '22 at 21:26

Probably looking at something like this:

export default function NavbarContent(): JSX.Element {
  const mobileSidebar = useNavbarMobileSidebar();

  const items = useNavbarItems();
  const [leftItems, rightItems] = splitNavbarItems(items);

  const searchBarItem = items.find((item) => item.type === 'search');

  return (
    <NavbarContentLayout
      left={
        // TODO stop hardcoding items?
        <>
          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
          <NavbarLogo />
          <NavbarItems items={leftItems} />
        </>
      }
      right={
        // TODO stop hardcoding items?
        // Ask the user to add the respective navbar items => more flexible
        <>
          <NavbarItems items={rightItems} />
          <NavbarColorModeToggle className={styles.colorModeToggle} />
          <div className="gcse-search"></div>
        </>
      }
    />
  );
}

In a swizzled Navbar/Content.

Then:

  scripts: [
    {
      src: 'https://cse.google.com/cse.js?cx=<ID>',
      async: true,
    },
  ],

in your docusaurus.config.js. This is untested.

Thanks! This is my initial attempt: https://github.com/netdata/blog/commit/c6f87b9e160a06b080c31153ae17dccfe8385107 I am struggling to convert the `index.js` i got from swizzling into i think the `index.ts` that i need with the new `NavbarContent()` function. — andrewm4894, Oct 28 '22 at 07:30

How to use Google search on a docusaruas blog

Update

1 Answers1