How to use Algolia Search ? #107
Description
Situation
So I have nexta set up the way I like it but the issue is I want to change the default search to alogia but I can't seem to do that.
Problem
There are two sub problems to this :
- There is an option in the theme.config.js that you can toggle to supposedly use a custom search.
export default {
repository: 'https://github.com/shuding/nextra', // project repo
docsRepository: 'https://github.com/shuding/nextra', // docs repo
branch: 'master', // branch of docs
path: '/', // path of docs
titleSuffix: ' – Nextra',
nextLinks: true,
prevLinks: true,
search: true,
customSearch: null, // customizable, you can use algolia for example
darkMode: true,
footer: true,
footerText: 'MIT 2020 © Shu Ding.',
footerEditOnGitHubLink: true, // will link to the docs repo
logo: <>
<svg>...</svg>
<span>Next.js Static Site Generator</span>
</>,
head: <>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Nextra: the next docs builder" />
<meta name="og:title" content="Nextra: the next docs builder" />
</>
}When you change customSearch to true then the search bar just disappears and is nowhere to be seen. I need this to be an input field that can be mapped to algoila.
- The second problem is with the javascript script tag I need to have as part of frontend.
<!-- at the end of the HEAD -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript"> docsearch({
apiKey: 'CENSORED',
indexName: 'igcse-chem',
inputSelector: 'INPUT-FEILD,
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>Here the first issue is getting the body script to work since adding this to theme.config.js it doesn't work as } causes an error to occurs. Further, I have no clue how I'm supposed to link the input field via the 'inputSelector' variable.