Add Algolia docusearch to website
MODIFY
website/.eleventy.js
website/.eleventy.js
@@ -6,24 +6,13 @@ const fs = require("fs");
const pluginTOC = require("eleventy-plugin-nesting-toc");
const path = require("path");
-const opts = {
- dirInput: "src",
- staticPath: "static",
- docsPath: "_includes/docs",
- blogPath: "src/posts",
- dirOutput: "build",
- toc: {
- headingText: "test", // Optional text to show in heading above the wrapper element
- },
-};
-
module.exports = function(eleventyConfig) {
// Aything listed in .gitignore will be ignored by the watch process,
// workaround to let eleventry rebuild when the css stylesheet gets rebuild.
eleventyConfig.setUseGitIgnore(false);
- eleventyConfig.addPassthroughCopy(opts.staticPath);
- eleventyConfig.addPassthroughCopy("_redirects");
+ eleventyConfig.addPassthroughCopy("static");
+ eleventyConfig.addPassthroughCopy({"static-root": "."});
eleventyConfig.addPlugin(syntaxHighlight);
eleventyConfig.addPlugin(pluginTOC);
@@ -100,8 +89,8 @@ module.exports = function(eleventyConfig) {
return {
dir: {
- input: opts.dirInput,
- output: opts.dirOutput,
+ input: "src",
+ output: "build",
},
passthroughFileCopy: true,
templateFormats: ["njk", "md", "css", "html", "yml"],

MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
<link rel="stylesheet" href="{{ '/static/styles.css' | url }}">
<script>
<nav aria-labelledby="site-navigation" class="menu">
<h2 id="site-navigation" class="sr-only">Site Navigation</h2>
+ <input type="text" id="docusearch" placeholder="Search" />
<ul>
<li>
<a href="{{ '/blog' | url }}">Blog</a>
</footer>
<script src="{{ '/static/js/index.js' | url }}"></script>
+ <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: '66db1ad366d458c6acded7cbc23dba7e',
+ indexName: 'romefrontend',
+ inputSelector: '#docusearch',
+ debug: false // Set debug to true if you want to inspect the dropdown
+ });
+ </script>
</body>
</html>

MODIFY
website/src/styles/_sidebar.scss
website/src/styles/_sidebar.scss
overflow-x: hidden;
font-size: 0.95rem;
position: sticky;
+ z-index: 99999;
top: 0;
height: 100vh;
border-right: 1px solid var(--soft-border-color);
height: 24px;
}
}
+}
+
+.algolia-autocomplete, input#docusearch {
+ width: 100%;
+ display: block;
+}
+.algolia-autocomplete {
+ padding-right: $unit * 2;
}
+input#docusearch {
+ padding: 5px;
+ border-radius: 4px;
+ border: 1px solid red;
+}
html[data-theme='dark'] .color-scheme-switch:after {
left: 50%;

RENAME
website/_redirects
website/static-root/_redirects
ADD
website/static-root/robots.txt
+User-agent: *
+Disallow: /sitemap/

Add Algolia docusearch to website (#819)