Update to meilisearch, improve markdown rendering for search

Author: bryannielsen

package-lock.json

@@ -37,7 +37,7 @@
     "js-yaml": "^3.13.1",
     "list-item": "^2.0.0",
     "markdown-slug": "^0.1.1",
-    "marked": "^0.7.0",
+    "marked": "^7.0.5",
     "postcss": "^8.4.18",
     "replace-ext": "^1.0.0",
     "tailwindcss": "^3.2.1",

package.json

@@ -11,6 +11,7 @@ const Fs         = require('fs')
 const Path       = require('path')
 const MarkedJs   = require('marked')
 
+
 const isUrl      = require('is-url')
 const { bsToFs } = require('./utility.js')
 const Logger     = require('./logger.js')
@@ -185,13 +186,56 @@ renderer.table = function(header, body) {
 	return `<div class="table-wrapper"><table><thead>${header}</thead>${body}</table></div>`
 }
 
+
+// The sectionLevel will help us prevent matching the same header multiple times.
+let sectionLevel = 0;
+
+// Creating regular expressions is expensive so we create them once.
+// Create 7 sections since that is the maximum heading level.
+const sectionRegexps = new Array(7).fill().map((e, i) => new RegExp(`^(#{${i + 1}} )[^]*?(?:\\n(?=\\1)|$)`));
+
+const sectionExtension = {
+    name: 'sectionBlock',
+    level: 'block',
+    start(src) {
+      // Match when # is at the beginning of a line.
+      return src.match(/^#/m)?.index;
+    },
+    tokenizer(src) {
+      const match = src.match(sectionRegexps[sectionLevel]);
+      if (!match) {
+        return;
+      }
+
+
+      sectionLevel++;
+      // Tokenize text inside the section.
+      // Only add sectionBlock token for headers one level up from current level.
+      const tokens = this.lexer.blockTokens(match[0]);
+      sectionLevel--;
+
+      return {
+        type: 'sectionBlock',
+        raw: match[0],
+        level: sectionLevel + 1,
+        tokens
+      };
+    },
+    renderer(token) {
+      const tag = token.level === 1 ? 'article' : 'section';
+      return `<${tag}>\n${this.parser.parse(token.tokens)}</${tag}>\n`;
+    }
+};
+
 // -------------------------------------------------------------------
 
 module.exports = function (text, info) {
 	currentPageInfo = info
 	tocGenerator = new PageTocGenerator()
 
-	let renderedContent = MarkedJs(text, { renderer: renderer })
+	MarkedJs.marked.use({ renderer: renderer, extensions: [sectionExtension] })
+    let renderedContent = MarkedJs.marked.parse(text)
+
 
 	renderedContent = tocGenerator.renderTocs(renderedContent, currentPageInfo)
 

scripts/md-render.js

@@ -102,7 +102,7 @@ class PageTocGenerator {
 
 			let start = toc.hide ? '<div class="table-of-contents collapse"><div class="toc-overview-button">Show List</div>' : '<div class="table-of-contents">'
 			// Render the list as html
-			let tocContent = start + Marked(list) + '</div>'
+			let tocContent = start + Marked.marked.parse(list) + '</div>'
 			// Replace the temporary id with the new html
 			pageContent    = pageContent.replace(key, tocContent)
 		}

scripts/page-toc-generator.js

@@ -14,7 +14,7 @@
 
 		<title>{{page_title}} — ExpressionEngine {{current_version}} Documentation</title>
 
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
+        <link rel="stylesheet" href="https://unpkg.com/meilisearch-docsearch@latest/dist/index.css"/>
 
 		<link rel="stylesheet" href="{{root_dir}}_assets/default.min.css">
 
@@ -93,7 +93,7 @@
 		<div class="sidebar-container">
 			<div class="sidebar">
 				<div class="sidebar-search" id="docsearch">
-				
+
 				</div>
 
 				<div class="sidebar-toc">
@@ -127,20 +127,20 @@ <h2>Community</h2>
 			</div>
 		</section>
 
-		<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-		<script type="text/javascript">
-
-			docsearch({
-				appId: 'BFKETQLPH4',
-				apiKey: '871012547f7adf3ab753e99d158612f6',
-				indexName: 'expressionengine',
-				container: '#docsearch',
-				searchParameters: { 
-					'facetFilters': ["version:latest"],
-					},
-				debug: false
-			});
-		</script>
+        <script src="https://unpkg.com/meilisearch-docsearch@latest/dist/index.global.js"></script>
+        <script>
+            const { docsearch } = window.__docsearch_meilisearch__;
+            docsearch({
+                container: "#docsearch",
+                host: "https://docsearch.expressionengine.com",
+                apiKey: "{{docsearch_public_key}}",
+                indexUid: "{{docsearch_index}}",
+                searchParams: {
+                    distinct: "hierarchy_lvl1",
+                    attributesToSearchOn: ["content","hierarchy_lvl1"],
+                }
+            });
+        </script>
 
 		<script src="{{root_dir}}_assets/main.min.js"></script>
 	</body>

theme/doc-page-template.html

@@ -81,24 +81,17 @@ <h2>Community</h2>
 </div>
 
 <script type="text/javascript">
-	docsearch({
-		apiKey: 'ba20cc61ab2d8a0148041c98eeddd9c6',
-		indexName: 'expressionengine',
-		inputSelector: '#docsearch-input',
-		algoliaOptions: { 
-					'facetFilters': ["version:latest"],
-					'hitsPerPage': 50 
-					},
-		debug: false
-	});
-	docsearch({
-		apiKey: 'ba20cc61ab2d8a0148041c98eeddd9c6',
-		indexName: 'expressionengine',
-		inputSelector: '#docsearch-input-2',
-		algoliaOptions: { 
-					'facetFilters': ["version:latest"],
-					'hitsPerPage': 50 
-					},
-		debug: false
-	});
+    const { docsearch } = window.__docsearch_meilisearch__;
+    docsearch({
+        container: "#docsearch-input",
+        host: "https://docsearch.expressionengine.com",
+        apiKey: "{{docsearch_public_key}}",
+        indexUid: "{{docsearch_index}}",
+    });
+    docsearch({
+        container: "#docsearch-input2",
+        host: "https://docsearch.expressionengine.com",
+        apiKey: "{{docsearch_public_key}}",
+        indexUid: "{{docsearch_index}}",
+    });
 </script>