[learn-example][m] - code section for the tutorial part 3

examples/learn-example/components/Catalog.tsx

@@ -0,0 +1,40 @@
+import { Index } from 'flexsearch';
+import { useState } from 'react';
+import DebouncedInput from './DebouncedInput';
+
+export default function Catalog({ datasets }: { datasets: any[] }) {
+  const [indexFilter, setIndexFilter] = useState('');
+  const index = new Index({ tokenize: "full"});
+  datasets.forEach((dataset) =>
+    index.add(
+      dataset._id,
+      Object.entries(dataset.metadata).reduce(
+            (acc, curr) => acc + ' ' + curr.toString(),
+            ''
+          ) + ' ' + dataset.url_path
+    )
+  );
+  return (
+    <>
+      <DebouncedInput
+        value={indexFilter ?? ''}
+        onChange={(value) => setIndexFilter(String(value))}
+        className="p-2 text-sm shadow border border-block"
+        placeholder="Search all datasets..."
+      />
+      <ul>
+        {datasets
+          .filter((dataset) =>
+            indexFilter !== ''
+              ? index.search(indexFilter).includes(dataset._id)
+              : true
+          )
+          .map((dataset) => (
+            <li key={dataset.id}>
+              <a href={dataset.url_path}>{dataset.metadata.title ? dataset.metadata.title : dataset.url_path}</a>
+            </li>
+          ))}
+      </ul>
+    </>
+  );
+}

examples/learn-example/components/DRD.tsx

@@ -8,6 +8,7 @@ import { Mermaid } from '@flowershow/core';
 // here.
 const components = {
   Table: dynamic(() => import('./Table')),
+  Catalog: dynamic(() => import('./Catalog')),
   mermaid: Mermaid,
   // Excel: dynamic(() => import('../components/Excel')),
   // TODO: try and make these dynamic ...

examples/learn-example/lib/markdown.js

@@ -22,7 +22,7 @@ import { serialize } from "next-mdx-remote/serialize";
  * @format: used to indicate to next-mdx-remote which format to use (md or mdx)
  * @returns: { mdxSource: mdxSource, frontMatter: ...}
  */
-const parse = async function (source, format) {
+const parse = async function (source, format, scope) {
   const { content, data, excerpt } = matter(source, {
     excerpt: (file, options) => {
       // Generate an excerpt for the file
@@ -91,7 +91,7 @@ const parse = async function (source, format) {
         ],
         format,
       },
-      scope: data,
+      scope: { ...scope, ...data},
     }
   );
 

examples/learn-example/lib/mddb.ts

@@ -0,0 +1,14 @@
+import { MarkdownDB } from "@flowershow/markdowndb";
+
+const dbPath = "markdown.db";
+
+const client = new MarkdownDB({
+  client: "sqlite3",
+  connection: {
+    filename: dbPath,
+  },
+});
+
+const clientPromise = client.init();
+
+export default clientPromise;

examples/learn-example/package.json

@@ -7,21 +7,26 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "export": "npm run build && next export -o out"
+    "export": "npm run build && next export -o out",
+    "prebuild": "npm run mddb",
+    "mddb": "mddb ./content"
   },
   "dependencies": {
     "@flowershow/core": "^0.4.10",
+    "@flowershow/markdowndb": "^0.1.1",
     "@flowershow/remark-callouts": "^1.0.0",
     "@flowershow/remark-embed": "^1.0.0",
     "@flowershow/remark-wiki-link": "^1.1.2",
     "@heroicons/react": "^2.0.17",
     "@opentelemetry/api": "^1.4.0",
     "@tanstack/react-table": "^8.8.5",
+    "@types/flexsearch": "^0.7.3",
     "@types/node": "18.16.0",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
+    "flexsearch": "^0.7.31",
     "gray-matter": "^4.0.3",
     "hastscript": "^7.2.0",
     "mdx-mermaid": "2.0.0-rc7",

examples/learn-example/pages/[[...path]].tsx

@@ -2,6 +2,7 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import parse from '../lib/markdown';
 import DRD from '../components/DRD';
+import clientPromise from '../lib/mddb';
 
 export const getStaticPaths = async () => {
   const contentDir = path.join(process.cwd(), '/content/');
@@ -23,9 +24,24 @@ export const getStaticProps = async (context) => {
     pathToFile = context.params.path.join('/') + '/index.md';
   }
 
+  const mddb = await clientPromise;
+  const datasetsFiles = await mddb.getFiles({
+    extensions: ['md', 'mdx'],
+  });
+  const datasets = datasetsFiles
+    .filter((dataset) => dataset.url_path !== '/')
+    .map((dataset) => ({
+      _id: dataset._id,
+      url_path: dataset.url_path,
+      file_path: dataset.file_path,
+      metadata: dataset.metadata,
+    }));
+
   const indexFile = path.join(process.cwd(), '/content/' + pathToFile);
   const readme = await fs.readFile(indexFile, 'utf8');
-  let { mdxSource, frontMatter } = await parse(readme, '.mdx');
+
+  let { mdxSource, frontMatter } = await parse(readme, '.mdx', { datasets });
+
   return {
     props: {
       mdxSource,