<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*! For license information please see 3c7ab691.5f43fc23.js.LICENSE.txt */
(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{200:function(e,a,n){"use strict";n.r(a),n.d(a,"frontMatter",(function(){return l})),n.d(a,"metadata",(function(){return u})),n.d(a,"rightToc",(function(){return s})),n.d(a,"default",(function(){return d}));var t=n(1),r=n(9),o=(n(0),n(350)),c=n(355),i=n(354),l={id:"search",title:"Search",keywords:["algolia","search"]},u={id:"version-2.0.0-alpha.56/search",title:"Search",description:"Docusaurus' own @docusaurus/preset-classic supports a search integration.",source:"@site/versioned_docs/version-2.0.0-alpha.56/search.md",permalink:"/docs/search",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/versioned_docs/version-2.0.0-alpha.56/search.md",version:"2.0.0-alpha.56",lastUpdatedBy:"Alexey Pyltsyn",lastUpdatedAt:1590599052,sidebar:"version-2.0.0-alpha.56/docs",previous:{title:"Blog",permalink:"/docs/blog"},next:{title:"Deployment",permalink:"/docs/deployment"}},s=[{value:"Using Algolia DocSearch",id:"using-algolia-docsearch",children:[{value:"Connecting Algolia",id:"connecting-algolia",children:[]},{value:"Customizing the Algolia search bar",id:"customizing-the-algolia-search-bar",children:[]}]},{value:"Using your own search",id:"using-your-own-search",children:[]}],p={rightToc:s},b="wrapper";function d(e){var a=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)(b,Object(t.a)({},p,n,{components:a,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Docusaurus' own ",Object(o.b)("inlineCode",{parentName:"p"},"@docusaurus/preset-classic")," supports a search integration."),Object(o.b)("p",null,"There are two main options, you can use ",Object(o.b)("a",Object(t.a)({parentName:"p"},{href:"https://community.algolia.com/docsearch/"}),"Algolia DocSearch")," or bring in your own ",Object(o.b)("inlineCode",{parentName:"p"},"SearchBar")," component."),Object(o.b)("h2",{id:"using-algolia-docsearch"},"Using Algolia DocSearch"),Object(o.b)("p",null,"Algolia DocSearch works by crawling the content of your website every 24 hours and putting all the content in an Algolia index. This content is then queried directly from your front-end using the Algolia API. Note that your website needs to be publicly available for this to work (i.e., not behind a firewall). The service is free."),Object(o.b)("h3",{id:"connecting-algolia"},"Connecting Algolia"),Object(o.b)("p",null,"To connect your docs with Algolia, add an ",Object(o.b)("inlineCode",{parentName:"p"},"algolia")," field in your ",Object(o.b)("inlineCode",{parentName:"p"},"themeConfig"),". Note that you will need algolia API key and algolia index. You can ",Object(o.b)("a",Object(t.a)({parentName:"p"},{href:"https://docsearch.algolia.com/apply/"}),"apply for DocSearch here"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-jsx",metastring:'title="docusaurus.config.js"',title:'"docusaurus.config.js"'}),"module.exports = {\n  // ...\n  themeConfig: {\n    // ...\n    // highlight-start\n    algolia: {\n      apiKey: 'api-key',\n      indexName: 'index-name',\n      appId: 'app-id', // Optional, if you run the DocSearch crawler on your own\n      algoliaOptions: {}, // Optional, if provided by Algolia\n    },\n    // highlight-end\n  },\n};\n")),Object(o.b)("h3",{id:"customizing-the-algolia-search-bar"},"Customizing the Algolia search bar"),Object(o.b)("p",null,"If you prefer to customize Algolia's search bar React component, swizzle the ",Object(o.b)("inlineCode",{parentName:"p"},"SearchBar")," component in ",Object(o.b)("inlineCode",{parentName:"p"},"@docusaurus/theme-search-algolia"),":"),Object(o.b)(c.a,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},Object(o.b)(i.a,{value:"npm",mdxType:"TabItem"},Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-bash"}),"npm run swizzle @docusaurus/theme-search-algolia SearchBar\n"))),Object(o.b)(i.a,{value:"yarn",mdxType:"TabItem"},Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-bash"}),"yarn run swizzle @docusaurus/theme-search-algolia SearchBar\n")))),Object(o.b)("h2",{id:"using-your-own-search"},"Using your own search"),Object(o.b)("p",null,"To use your own search, swizzle the ",Object(o.b)("inlineCode",{parentName:"p"},"SearchBar")," component in ",Object(o.b)("inlineCode",{parentName:"p"},"@docusaurus/theme-classic")),Object(o.b)(c.a,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},Object(o.b)(i.a,{value:"npm",mdxType:"TabItem"},Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-bash"}),"npm run swizzle @docusaurus/theme-classic SearchBar\n"))),Object(o.b)(i.a,{value:"yarn",mdxType:"TabItem"},Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-bash"}),"yarn run swizzle @docusaurus/theme-classic SearchBar\n")))),Object(o.b)("p",null,"This will create a ",Object(o.b)("inlineCode",{parentName:"p"},"src/themes/SearchBar")," file in your project folder. Restart your dev server and edit the component, you will see that Docusaurus uses your own ",Object(o.b)("inlineCode",{parentName:"p"},"SearchBar")," component now."),Object(o.b)("p",null,Object(o.b)("strong",{parentName:"p"},"Notes"),": You can alternatively ",Object(o.b)("a",Object(t.a)({parentName:"p"},{href:"#customizing-the-algolia-search-bar"}),"swizzle from Algolia SearchBar")," and create your own search component from there."))}d.isMDXComponent=!0},350:function(e,a,n){"use strict";n.d(a,"a",(function(){return p})),n.d(a,"b",(function(){return m}));var t=n(0),r=n.n(t);function o(e,a,n){return a in e?Object.defineProperty(e,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[a]=n,e}function c(e,a){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);a&amp;&amp;(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),n.push.apply(n,t)}return n}function i(e){for(var a=1;a&lt;arguments.length;a++){var n=null!=arguments[a]?arguments[a]:{};a%2?c(Object(n),!0).forEach((function(a){o(e,a,n[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(n,a))}))}return e}function l(e,a){if(null==e)return{};var n,t,r=function(e,a){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t&lt;o.length;t++)n=o[t],a.indexOf(n)&gt;=0||(r[n]=e[n]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t&lt;o.length;t++)n=o[t],a.indexOf(n)&gt;=0||Object.prototype.propertyIsEnumerable.call(e,n)&amp;&amp;(r[n]=e[n])}return r}var u=r.a.createContext({}),s=function(e){var a=r.a.useContext(u),n=a;return e&amp;&amp;(n="function"==typeof e?e(a):i({},a,{},e)),n},p=function(e){var a=s(e.components);return r.a.createElement(u.Provider,{value:a},e.children)},b="mdxType",d={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},h=Object(t.forwardRef)((function(e,a){var n=e.components,t=e.mdxType,o=e.originalType,c=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),p=s(n),b=t,h=p["".concat(c,".").concat(b)]||p[b]||d[b]||o;return n?r.a.createElement(h,i({ref:a},u,{components:n})):r.a.createElement(h,i({ref:a},u))}));function m(e,a){var n=arguments,t=a&amp;&amp;a.mdxType;if("string"==typeof e||t){var o=n.length,c=new Array(o);c[0]=h;var i={};for(var l in a)hasOwnProperty.call(a,l)&amp;&amp;(i[l]=a[l]);i.originalType=e,i[b]="string"==typeof e?e:t,c[1]=i;for(var u=2;u&lt;o;u++)c[u]=n[u];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,n)}h.displayName="MDXCreateElement"},352:function(e,a,n){var t;!function(){"use strict";var n={}.hasOwnProperty;function r(){for(var e=[],a=0;a&lt;arguments.length;a++){var t=arguments[a];if(t){var o=typeof t;if("string"===o||"number"===o)e.push(t);else if(Array.isArray(t)&amp;&amp;t.length){var c=r.apply(null,t);c&amp;&amp;e.push(c)}else if("object"===o)for(var i in t)n.call(t,i)&amp;&amp;t[i]&amp;&amp;e.push(i)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(t=function(){return r}.apply(a,[]))||(e.exports=t)}()},353:function(e,a,n){"use strict";var t=n(0),r=Object(t.createContext)({tabGroupChoices:{},setTabGroupChoices:function(){}});a.a=r},354:function(e,a,n){"use strict";var t=n(0),r=n.n(t);a.a=function(e){return r.a.createElement("div",null,e.children)}},355:function(e,a,n){"use strict";n(26),n(22),n(21);var t=n(0),r=n.n(t),o=n(353);var c=function(){return Object(t.useContext)(o.a)},i=n(352),l=n.n(i),u=n(132),s=n.n(u),p={left:37,right:39};a.a=function(e){var a=e.block,n=e.children,o=e.defaultValue,i=e.values,u=e.groupId,b=c(),d=b.tabGroupChoices,h=b.setTabGroupChoices,m=Object(t.useState)(o),f=m[0],g=m[1];if(null!=u){var y=d[u];null!=y&amp;&amp;y!==f&amp;&amp;g(y)}var O=function(e){g(e),null!=u&amp;&amp;h(u,e)},j=[];return r.a.createElement("div",null,r.a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:l()("tabs",{"tabs--block":a})},i.map((function(e){var a=e.value,n=e.label;return(r.a.createElement("li",{role:"tab",tabIndex:"0","aria-selected":f===a,className:l()("tabs__item",s.a.tabItem,{"tabs__item--active":f===a}),key:a,ref:function(e){return j.push(e)},onKeyDown:function(e){return function(e,a,n){switch(n.keyCode){case p.right:!function(e,a){var n=e.indexOf(a)+1;e[n]?e[n].focus():e[0].focus()}(e,a);break;case p.left:!function(e,a){var n=e.indexOf(a)-1;e[n]?e[n].focus():e[e.length-1].focus()}(e,a)}}(j,e.target,e)},onFocus:function(){return O(a)},onClick:function(){return O(a)}},n))}))),r.a.createElement("div",{role:"tabpanel",className:"margin-vert--md"},t.Children.toArray(n).filter((function(e){return e.props.value===f}))[0]))}}}]);</pre></body></html>