Part 3 tutorial - Creating an index page (#834)

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

* [learn-example][sm] - dont panic when no markdown.db file found

* [docs][m] - creating an inedx page

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 ...