[docs][m] - creating an inedx page

* [package][xs]: remove parameter that was not being used

* [package][xs]: remove import that's breaking the build

* [package][xs]: trying to fix build error on Vercel

examples/alan-turing-portal/README.md

@@ -1,6 +1,18 @@
+## Intro
+
+This page catalogues datasets annotated for hate speech, online abuse, and offensive language. They may be useful for e.g. training a natural language processing system to detect this language.
+
+Its built on top of [PortalJS](https://portaljs.org/), it allows you to publish datasets, lists of offensive keywords and static pages, all of those are stored as markdown files inside the `content` folder.
+
+- .md files inside `content/datasets/` will appear on the dataset list section of the homepage and be searchable as well as having a individual page in `datasets/<file name>`
+- .md files inside `content/keywords/` will appear on the list of offensive keywords section of the homepage as well as having a individual page in `keywords/<file name>`
+- .md files inside `content/` will be converted to static pages in the url `/<file name>` eg: `content/about.md` becomes `/about`
+
+This is also a Next.JS project so you can use the following steps to run the website locally.
+
 ## Getting started
 
-To get started with this template, first install the npm dependencies:
+To get started first install the npm dependencies:
 
 ```bash
 npm install
@@ -13,7 +25,3 @@ npm run dev
 ```
 
 Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
-
-## License
-
-This site template is a commercial product and is licensed under the [Tailwind UI license](https://tailwindui.com/license).

examples/alan-turing-portal/components/Footer.jsx

@@ -21,7 +21,7 @@ export function Footer() {
           <Container.Inner>
             <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
               <p className="text-sm font-medium text-zinc-800 dark:text-zinc-200">
-                hatespeechdata maintained by <a href='https://github.com/leondz'>leondz</a>
+                Built with <a href='https://portaljs.org'>PortalJS 🌀</a>
               </p>
               <p className="text-sm text-zinc-400 dark:text-zinc-500">
                 &copy; {new Date().getFullYear()} Leon Derczynski. All rights

examples/alan-turing-portal/content/about.md

@@ -0,0 +1,5 @@
+---
+title: About
+---
+
+This is an about page, left here as an example

examples/alan-turing-portal/content/contributing.md

@@ -1,22 +0,0 @@
----
-title: Contributing
----
-
-We accept entries to our catalogue based on pull requests to the content folder. The dataset must be avaliable for download to be included in the list. If you want to add an entry, follow these steps!
-
-Please send just one dataset addition/edit at a time - edit it in, then save. This will make everyone’s life easier (including yours!)
-
-- Go to the repo url file and click the "Add file" dropdown and then click on "Create new file".
-![](https://i.imgur.com/2PR0ZgL.png)
-   
-- In the following page type `content/datasets/<name-of-the-file>.md`. if you want to add an entry to the datasets catalog or `content/keywords/<name-of-the-file>.md` if you want to add an entry to the lists of abusive keywords.
-![](https://i.imgur.com/rr3uSYu.png)
-   
-- Copy the contents of `templates/dataset.md` or `templates/keywords.md` respectively to the camp below, filling out the fields with the correct data format
-![](https://i.imgur.com/x6JIjhz.png)
-   
-- Click on "Commit changes", on the popup make sure you give some brief detail on the proposed change.  and then click on Propose changes
-![](https://i.imgur.com/BxuxKEJ.png)
-   
-- Submit the pull request on the next page when prompted.
-

examples/alan-turing-portal/content/datasets/abusive-eval-v1-0.md

@@ -0,0 +1,14 @@
+---
+title: AbuseEval v1.0
+link-to-publication: http://www.lrec-conf.org/proceedings/lrec2020/pdf/2020.lrec-1.760.pdf
+link-to-data: https://github.com/tommasoc80/AbuseEval
+task-description: Explicitness annotation of offensive and abusive content
+details-of-task: "Enriched versions of the OffensEval/OLID dataset with the distinction of explicit/implicit offensive messages and the new dimension for abusive messages. Labels for offensive language: EXPLICIT, IMPLICT, NOT; Labels for abusive language: EXPLICIT, IMPLICT, NOTABU"
+size-of-dataset: 14100
+percentage-abusive: 20.75
+language: English
+level-of-annotation: ["Tweets"]
+platform: ["Twitter"]
+medium: ["Text"]
+reference: "Caselli, T., Basile, V., Jelena, M., Inga, K., and Michael, G. 2020. \"I feel offended, don’t be abusive! implicit/explicit messages in offensive and abusive language\". The 12th Language Resources and Evaluation Conference (pp. 6193-6202). European Language Resources Association."
+---

examples/alan-turing-portal/content/datasets/coral-a-context-aware-croatian-abusive-language-dataset.md

@@ -0,0 +1,14 @@
+---
+title: "CoRAL: a Context-aware Croatian Abusive Language Dataset"
+link-to-publication: https://aclanthology.org/2022.findings-aacl.21/
+link-to-data: https://github.com/shekharRavi/CoRAL-dataset-Findings-of-the-ACL-AACL-IJCNLP-2022
+task-description: Multi-class based on context dependency categories (CDC)
+details-of-task: Detectioning CDC from abusive comments
+size-of-dataset: 2240
+percentage-abusive: 100
+language: "Croatian"
+level-of-annotation: ["Posts"]
+platform: ["Posts"]
+medium: ["Newspaper Comments"]
+reference: "Ravi Shekhar, Mladen Karan and Matthew Purver (2022). CoRAL: a Context-aware Croatian Abusive Language Dataset. Findings of the ACL: AACL-IJCNLP."
+---

examples/alan-turing-portal/content/datasets/large-scale-hate-speech-detection-with-cross-domain-tranfer.md

@@ -0,0 +1,14 @@
+---
+title: Large-Scale Hate Speech Detection with Cross-Domain Transfer
+link-to-publication: https://aclanthology.org/2022.lrec-1.238/
+link-to-data: https://github.com/avaapm/hatespeech
+task-description: Three-class (Hate speech, Offensive language, None)
+details-of-task: Hate speech detection on social media (Twitter) including 5 target groups (gender, race, religion, politics, sports)
+size-of-dataset: "100k English (27593 hate, 30747 offensive, 41660 none)"
+percentage-abusive: 58.3
+language: English
+level-of-annotation: ["Posts"]
+platform: ["Twitter"]
+medium: ["Text", "Image"]
+reference: "Cagri Toraman, Furkan Şahinuç, Eyup Yilmaz. 2022. Large-Scale Hate Speech Detection with Cross-Domain Transfer. In Proceedings of the Thirteenth Language Resources and Evaluation Conference, pages 2215–2225, Marseille, France. European Language Resources Association."
+---

examples/alan-turing-portal/content/datasets/measuring-hate-speech.md

@@ -0,0 +1,14 @@
+---
+title: Measuring Hate Speech
+link-to-publication: https://arxiv.org/abs/2009.10277
+link-to-data: https://huggingface.co/datasets/ucberkeley-dlab/measuring-hate-speech
+task-description: 10 ordinal labels (sentiment, (dis)respect, insult, humiliation, inferior status, violence, dehumanization, genocide, attack/defense, hate speech), which are debiased and aggregated into a continuous hate speech severity score (hate_speech_score) that includes a region for counterspeech & supportive speeech. Includes 8 target identity groups (race/ethnicity, religion, national origin/citizenship, gender, sexual orientation, age, disability, political ideology) and 42 identity subgroups.
+details-of-task: Hate speech measurement on social media in English
+size-of-dataset: "39,565 comments annotated by 7,912 annotators on 10 ordinal labels, for 1,355,560 total labels."
+percentage-abusive: 25
+language: English
+level-of-annotation: ["Social media comment"]
+platform: ["Twitter", "Reddit", "Youtube"]
+medium: ["Text"]
+reference: "Kennedy, C. J., Bacon, G., Sahn, A., & von Vacano, C. (2020). Constructing interval variables via faceted Rasch measurement and multitask deep learning: a hate speech application. arXiv preprint arXiv:2009.10277."
+---

examples/alan-turing-portal/content/datasets/offensive-language-and-hate-speech-detection-for-danish.md

@@ -0,0 +1,14 @@
+---
+title: Offensive Language and Hate Speech Detection for Danish
+link-to-publication: http://www.derczynski.com/papers/danish_hsd.pdf
+link-to-data: https://figshare.com/articles/Danish_Hate_Speech_Abusive_Language_data/12220805
+task-description: "Branching structure of tasks: Binary (Offensive, Not), Within Offensive (Target, Not), Within Target (Individual, Group, Other)"
+details-of-task: Group-directed + Person-directed
+size-of-dataset: 3600
+percentage-abusive: 0.12
+language: Danish
+level-of-annotation: ["Posts"]
+platform: ["Twitter", "Reddit", "Newspaper comments"]
+medium: ["Text"]
+reference: "Sigurbergsson, G. and Derczynski, L., 2019. Offensive Language and Hate Speech Detection for Danish. ArXiv."
+---

examples/alan-turing-portal/content/index.md

@@ -11,3 +11,24 @@ We provide a list of datasets and keywords. If you would like to contribute to o
 If you use these resources, please cite (and read!) our paper: Directions in Abusive Language Training Data: Garbage In, Garbage Out. And if you would like to find other resources for researching online hate, visit The Alan Turing Institute’s Online Hate Research Hub or read The Alan Turing Institute’s Reading List on Online Hate and Abuse Research.
 
 If you’re looking for a good paper on online hate training datasets (beyond our paper, of course!) then have a look at ‘Resources and benchmark corpora for hate speech detection: a systematic review’ by Poletto et al. in Language Resources and Evaluation.
+
+## How to contribute
+
+We accept entries to our catalogue based on pull requests to the content folder. The dataset must be avaliable for download to be included in the list. If you want to add an entry, follow these steps!
+
+Please send just one dataset addition/edit at a time - edit it in, then save. This will make everyone’s life easier (including yours!)
+
+- Go to the repo url file and click the "Add file" dropdown and then click on "Create new file".
+![](https://i.imgur.com/2PR0ZgL.png)
+   
+- In the following page type `content/datasets/<name-of-the-file>.md`. if you want to add an entry to the datasets catalog or `content/keywords/<name-of-the-file>.md` if you want to add an entry to the lists of abusive keywords, if you want to just add an static page you can leave in the root of `content` it will automatically get assigned an url eg: `/content/about.md` becomes the `/about` page
+![](https://i.imgur.com/rr3uSYu.png)
+   
+- Copy the contents of `templates/dataset.md` or `templates/keywords.md` respectively to the camp below, filling out the fields with the correct data format
+![](https://i.imgur.com/x6JIjhz.png)
+   
+- Click on "Commit changes", on the popup make sure you give some brief detail on the proposed change.  and then click on Propose changes
+<img src='https://i.imgur.com/BxuxKEJ.png' style={{ maxWidth: '50%', margin: '0 auto' }}/>
+   
+- Submit the pull request on the next page when prompted.
+

examples/alan-turing-portal/lib/markdown.js

@@ -23,12 +23,7 @@ import { serialize } from "next-mdx-remote/serialize";
  * @returns: { mdxSource: mdxSource, frontMatter: ...}
  */
 const parse = async function (source, format) {
-  const { content, data, excerpt } = matter(source, {
-    excerpt: (file, options) => {
-      // Generate an excerpt for the file
-      file.excerpt = file.content.split("\n\n")[0];
-    },
-  });
+  const { content, data } = matter(source);
 
   const mdxSource = await serialize(
     { value: content, path: format },
@@ -56,7 +51,7 @@ const parse = async function (source, format) {
           [
             rehypeAutolinkHeadings,
             {
-              properties: { className: 'heading-link' },
+              properties: { className: "heading-link" },
               test(element) {
                 return (
                   ["h2", "h3", "h4", "h5", "h6"].includes(element.tagName) &&
@@ -91,14 +86,12 @@ const parse = async function (source, format) {
         ],
         format,
       },
-      scope: data,
     }
   );
 
   return {
     mdxSource: mdxSource,
     frontMatter: data,
-    excerpt,
   };
 };
 

examples/alan-turing-portal/package-lock.json

@@ -36,7 +36,8 @@
         "focus-visible": "^5.2.0",
         "gray-matter": "^4.0.3",
         "hastscript": "^7.2.0",
-        "mdx-mermaid": "2.0.0-rc7",
+        "mdx-mermaid": "^2.0.0-rc7",
+        "mermaid": "^10.1.0",
         "next": "13.2.1",
         "next-mdx-remote": "^4.4.1",
         "next-router-mock": "^0.9.3",
@@ -3338,7 +3339,6 @@
       "version": "7.0.10",
       "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
       "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
-      "peer": true,
       "dependencies": {
         "d3": "^7.8.2",
         "lodash-es": "^4.17.21"
@@ -3353,8 +3353,7 @@
     "node_modules/dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
-      "peer": true
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -3544,8 +3543,7 @@
     "node_modules/dompurify": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz",
-      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==",
-      "peer": true
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA=="
     },
     "node_modules/dot-prop": {
       "version": "5.3.0",
@@ -7533,7 +7531,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.1.0.tgz",
       "integrity": "sha512-LYekSMNJygI1VnMizAPUddY95hZxOjwZxr7pODczILInO0dhQKuhXeu4sargtnuTwCilSuLS7Uiq/Qn7HTVrmA==",
-      "peer": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.0",
         "@khanacademy/simple-markdown": "^0.8.6",
@@ -7558,7 +7555,6 @@
       "version": "0.8.6",
       "resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz",
       "integrity": "sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==",
-      "peer": true,
       "dependencies": {
         "@types/react": ">=16.0.0"
       },
@@ -15739,7 +15735,6 @@
       "version": "7.0.10",
       "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
       "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
-      "peer": true,
       "requires": {
         "d3": "^7.8.2",
         "lodash-es": "^4.17.21"
@@ -15754,8 +15749,7 @@
     "dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
-      "peer": true
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
     },
     "debug": {
       "version": "4.3.4",
@@ -15894,8 +15888,7 @@
     "dompurify": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.5.tgz",
-      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==",
-      "peer": true
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA=="
     },
     "dot-prop": {
       "version": "5.3.0",
@@ -18847,7 +18840,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.1.0.tgz",
       "integrity": "sha512-LYekSMNJygI1VnMizAPUddY95hZxOjwZxr7pODczILInO0dhQKuhXeu4sargtnuTwCilSuLS7Uiq/Qn7HTVrmA==",
-      "peer": true,
       "requires": {
         "@braintree/sanitize-url": "^6.0.0",
         "@khanacademy/simple-markdown": "^0.8.6",
@@ -18872,7 +18864,6 @@
           "version": "0.8.6",
           "resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz",
           "integrity": "sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==",
-          "peer": true,
           "requires": {
             "@types/react": ">=16.0.0"
           }

examples/alan-turing-portal/package.json

@@ -12,47 +12,46 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "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",
     "@headlessui/react": "^1.7.13",
+    "@heroicons/react": "^2.0.17",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
     "@next/mdx": "^13.0.2",
+    "@opentelemetry/api": "^1.4.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.4",
-    "autoprefixer": "^10.4.12",
-    "clsx": "^1.2.1",
-    "fast-glob": "^3.2.11",
-    "feed": "^4.2.2",
-    "flexsearch": "^0.7.31",
-    "focus-visible": "^5.2.0",
-    "next-router-mock": "^0.9.3",
-    "next-superjson-plugin": "^0.5.7",
-    "postcss-focus-visible": "^6.0.4",
-    "react-hook-form": "^7.43.9",
-    "react-markdown": "^8.0.7",
-    "superjson": "^1.12.3",
-    "tailwindcss": "^3.3.0",
-    "@flowershow/core": "^0.4.10",
-    "@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/node": "18.16.0",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
+    "autoprefixer": "^10.4.12",
+    "clsx": "^1.2.1",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
+    "fast-glob": "^3.2.11",
+    "feed": "^4.2.2",
+    "flexsearch": "^0.7.31",
+    "focus-visible": "^5.2.0",
     "gray-matter": "^4.0.3",
     "hastscript": "^7.2.0",
-    "mdx-mermaid": "2.0.0-rc7",
+    "mdx-mermaid": "^2.0.0-rc7",
+    "mermaid": "^10.1.0",
     "next": "13.2.1",
     "next-mdx-remote": "^4.4.1",
+    "next-router-mock": "^0.9.3",
+    "next-superjson-plugin": "^0.5.7",
     "papaparse": "^5.4.1",
+    "postcss-focus-visible": "^6.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-markdown": "^8.0.7",
     "react-vega": "^7.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.3",
@@ -61,7 +60,9 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "remark-smartypants": "^2.0.0",
-    "remark-toc": "^8.0.1"
+    "remark-toc": "^8.0.1",
+    "superjson": "^1.12.3",
+    "tailwindcss": "^3.3.0"
   },
   "devDependencies": {
     "eslint": "8.26.0",

examples/alan-turing-portal/pages/[...slug].jsx

@@ -1,9 +1,12 @@
 import { Container } from '../components/Container'
 import clientPromise from '../lib/mddb'
-import fs from 'fs'
+import { promises as fs } from 'fs';
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 import { Card } from '../components/Card'
+import Head from 'next/head'
+import parse from '../lib/markdown'
+import { Mermaid } from '@flowershow/core';
 
 export const getStaticProps = async ({ params }) => {
   const urlPath = params.slug ? params.slug.join('/') : ''
@@ -11,8 +14,8 @@ export const getStaticProps = async ({ params }) => {
   const mddb = await clientPromise
   const dbFile = await mddb.getFileByUrl(urlPath)
 
-  const source = fs.readFileSync(dbFile.file_path, { encoding: 'utf-8' })
-  const mdxSource = await serialize(source, { parseFrontmatter: true })
+  const source = await fs.readFile(dbFile.file_path,'utf-8')
+  let mdxSource = await parse(source, '.mdx')
 
   return {
     props: {
@@ -73,12 +76,15 @@ const Meta = ({keyValuePairs}) => {
 }
 
 export default function DRDPage({ mdxSource }) {
-  const meta = mdxSource.frontmatter
+  const meta = mdxSource.frontMatter
   const keyValuePairs = Object.entries(meta).filter(
     (entry) => entry[0] !== 'title'
   )
   return (
     <>
+      <Head>
+        <title>{meta.title}</title>
+      </Head>
       <Container className="mt-16 lg:mt-32">
         <article>
           <header className="flex flex-col">
@@ -90,7 +96,7 @@ export default function DRDPage({ mdxSource }) {
             </Card>
           </header>
           <div className="prose dark:prose-invert">
-            <MDXRemote {...mdxSource} />
+            <MDXRemote {...mdxSource.mdxSource} components={{mermaid: Mermaid}} />
           </div>
         </article>
       </Container>

examples/alan-turing-portal/pages/index.jsx

@@ -4,7 +4,6 @@ import fs from 'fs'
 import { Card } from '../components/Card'
 import { Container } from '../components/Container'
 import clientPromise from '../lib/mddb'
-import ReactMarkdown from 'react-markdown'
 import { Index } from 'flexsearch'
 import { useForm } from 'react-hook-form'
 import Link from 'next/link'
@@ -109,7 +108,6 @@ export default function Home({
   datasets,
   indexText,
   listsOfKeywords,
-  contributingText,
   availableLanguages,
   availablePlatforms,
 }) {
@@ -141,7 +139,7 @@ export default function Home({
           <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
             {indexText.frontmatter.title}
           </h1>
-          <article className="mt-6 flex flex-col gap-y-2 text-base text-zinc-600 dark:text-zinc-400">
+          <article className="mt-6 index-text flex flex-col gap-y-2 text-base text-zinc-600 dark:text-zinc-400 prose dark:prose-invert">
             <MDXRemote {...indexText} />
           </article>
         </div>
@@ -236,14 +234,6 @@ export default function Home({
           ))}
         </div>
       </Container>
-      <Container className="mt-16">
-        <h2 className="text-xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
-          How to contribute
-        </h2>
-          <article className="mt-6 flex flex-col gap-y-8 text-base text-zinc-600 dark:text-zinc-400 contributing">
-            <MDXRemote {...contributingText} />
-        </article>
-        </Container>
     </>
   )
 }
@@ -270,12 +260,7 @@ export async function getStaticProps() {
   }))
 
   const index = await mddb.getFileByUrl('/')
-  const contributing = await mddb.getFileByUrl('contributing')
   let indexSource = fs.readFileSync(index.file_path, { encoding: 'utf-8' })
-  let contributingSource = fs.readFileSync(contributing.file_path, {
-    encoding: 'utf-8',
-  })
-  contributingSource = await serialize(contributingSource, { parseFrontmatter: true })
   indexSource = await serialize(indexSource, { parseFrontmatter: true })
 
   const availableLanguages = [
@@ -289,7 +274,6 @@ export async function getStaticProps() {
       datasets,
       listsOfKeywords,
       indexText: indexSource,
-      contributingText: contributingSource,
       availableLanguages,
       availablePlatforms,
     },

examples/alan-turing-portal/styles/tailwind.css

@@ -3,6 +3,11 @@
 @import './prism.css';
 @import 'tailwindcss/utilities';
 
-.contributing li {
-  margin-bottom: 1.75rem;
+.index-text ul,
+.index-text p {
+  margin: 0;
+}
+
+.index-text h2 {
+  margin-top: 1rem;
 }

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

@@ -6,21 +6,27 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "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

@@ -1,7 +1,8 @@
-import { promises as fs } from 'fs';
+import { existsSync, 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,28 @@ export const getStaticProps = async (context) => {
     pathToFile = context.params.path.join('/') + '/index.md';
   }
 
+  let datasets = [];
+  const mddbFileExists = existsSync('markdown.db');
+  if (mddbFileExists) {
+    const mddb = await clientPromise;
+    const datasetsFiles = await mddb.getFiles({
+      extensions: ['md', 'mdx'],
+    });
+    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,

package.json

@@ -4,11 +4,10 @@
   "license": "MIT",
   "scripts": {},
   "private": true,
-  "dependencies": {},
   "devDependencies": {
     "@babel/preset-react": "^7.14.5",
     "@nrwl/cypress": "15.9.2",
-    "@nrwl/eslint-plugin-nx": "15.9.2",
+    "@nrwl/eslint-plugin-nx": "^16.0.2",
     "@nrwl/jest": "15.9.2",
     "@nrwl/js": "15.9.2",
     "@nrwl/linter": "15.9.2",

packages/components/.eslintrc.cjs

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn'
+  }
+};

packages/components/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/components/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

packages/components/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import 'tailwindcss/tailwind.css'
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

packages/components/README.md

@@ -0,0 +1,32 @@
+# `components` package
+
+**See live:** https://storybook.portaljs.org
+
+## Dev
+
+Use Storybook to work on components by running:
+
+```bash
+yarn storybook
+```
+
+## Build
+
+To build this project, run:
+
+```bash
+yarn build
+```
+
+## Install
+
+TODO: command to install the package
+
+### Next.js
+
+Add this line at the start of `_app.tsx`:
+
+```ts
+//  pages/_app.tsx
+import "dist/styles.css";
+```

packages/components/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "components",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "yarn storybook",
+    "build": "tsc && vite build && yarn build-tailwind",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/styles.css --minify"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.17",
+    "next-mdx-remote": "^4.4.1",
+    "papaparse": "^5.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-vega": "^7.6.0",
+    "vega": "5.20.2",
+    "vega-lite": "5.1.0",
+    "@tanstack/react-table": "^8.8.5"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/blocks": "^7.0.7",
+    "@storybook/react": "^7.0.7",
+    "@storybook/react-vite": "^7.0.7",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@types/papaparse": "^5.3.7",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-storybook": "^0.6.11",
+    "json": "^11.0.0",
+    "postcss": "^8.4.23",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.7",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.2",
+    "vite-plugin-dts": "^2.3.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/components.umd.js",
+  "module": "./dist/components.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/components.es.js",
+      "require": "./dist/components.umd.js"
+    }
+  }
+}

packages/components/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/components/src/components/DebouncedInput.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value]);
+
+  return (
+    <input
+      {...props}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export default DebouncedInput;

packages/components/src/components/LineChart.tsx

@@ -0,0 +1,63 @@
+import { VegaLite } from './VegaLite';
+
+export type LineChartProps = {
+  data: Array<Array<string | number>> | string | { x: string; y: number }[];
+  title?: string;
+  xAxis?: string;
+  yAxis?: string;
+  fullWidth?: boolean;
+};
+
+export function LineChart({
+  data = [],
+  fullWidth = false,
+  title = '',
+  xAxis = 'x',
+  yAxis = 'y',
+}: LineChartProps) {
+  var tmp = data;
+  if (Array.isArray(data)) {
+    tmp = data.map((r) => {
+      return { x: r[0], y: r[1] };
+    });
+  }
+  const vegaData = { table: tmp };
+  const spec = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    title,
+    width: 'container',
+    height: 300,
+    mark: {
+      type: 'line',
+      color: 'black',
+      strokeWidth: 1,
+      tooltip: true,
+    },
+    data: {
+      name: 'table',
+    },
+    selection: {
+      grid: {
+        type: 'interval',
+        bind: 'scales',
+      },
+    },
+    encoding: {
+      x: {
+        field: xAxis,
+        timeUnit: 'year',
+        type: 'temporal',
+      },
+      y: {
+        field: yAxis,
+        type: 'quantitative',
+      },
+    },
+  };
+  if (typeof data === 'string') {
+    spec.data = { url: data } as any;
+    return <VegaLite fullWidth={fullWidth} spec={spec} />;
+  }
+
+  return <VegaLite fullWidth={fullWidth} data={vegaData} spec={spec} />;
+}

packages/components/src/components/Table.tsx

@@ -0,0 +1,195 @@
+import {
+  createColumnHelper,
+  FilterFn,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/24/solid';
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import parseCsv from '../lib/parseCsv';
+import DebouncedInput from './DebouncedInput';
+import loadData from '../lib/loadData';
+
+export type TableProps = {
+  data?: Array<{ [key: string]: number | string }>;
+  cols?: Array<{ [key: string]: string }>;
+  csv?: string;
+  url?: string;
+  fullWidth?: boolean;
+};
+
+export const Table = ({
+  data: ogData = [],
+  cols: ogCols = [],
+  csv = '',
+  url = '',
+  fullWidth = false,
+}: TableProps) => {
+  if (csv) {
+    const out = parseCsv(csv);
+    ogData = out.rows;
+    ogCols = out.fields;
+  }
+
+  const [data, setData] = React.useState(ogData);
+  const [cols, setCols] = React.useState(ogCols);
+  // const [error, setError] = React.useState(""); //  TODO: add error handling
+
+  const tableCols = useMemo(() => {
+    const columnHelper = createColumnHelper();
+    return cols.map((c) =>
+      columnHelper.accessor<any, string>(c.key, {
+        header: () => c.name,
+        cell: (info) => info.getValue(),
+      })
+    );
+  }, [data, cols]);
+
+  const [globalFilter, setGlobalFilter] = useState('');
+
+  const table = useReactTable({
+    data,
+    columns: tableCols,
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      globalFilter,
+    },
+    globalFilterFn: globalFilterFn,
+    onGlobalFilterChange: setGlobalFilter,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  useEffect(() => {
+    if (url) {
+      loadData(url).then((data) => {
+        const { rows, fields } = parseCsv(data);
+        setData(rows);
+        setCols(fields);
+      });
+    }
+  }, [url]);
+
+  return (
+    <div className={`${fullWidth ? 'w-[90vw] ml-[calc(50%-45vw)]' : 'w-full'}`}>
+      <DebouncedInput
+        value={globalFilter ?? ''}
+        onChange={(value: any) => setGlobalFilter(String(value))}
+        className="p-2 text-sm shadow border border-block"
+        placeholder="Search all columns..."
+      />
+      <table className="w-full mt-10">
+        <thead className="text-left border-b border-b-slate-300">
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id}>
+              {hg.headers.map((h) => (
+                <th key={h.id} className="pr-2 pb-2">
+                  <div
+                    {...{
+                      className: h.column.getCanSort()
+                        ? 'cursor-pointer select-none'
+                        : '',
+                      onClick: h.column.getToggleSortingHandler(),
+                    }}
+                  >
+                    {flexRender(h.column.columnDef.header, h.getContext())}
+                    {{
+                      asc: (
+                        <ArrowUpIcon className="inline-block ml-2 h-4 w-4" />
+                      ),
+                      desc: (
+                        <ArrowDownIcon className="inline-block ml-2 h-4 w-4" />
+                      ),
+                    }[h.column.getIsSorted() as string] ?? (
+                      <div className="inline-block ml-2 h-4 w-4" />
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((r) => (
+            <tr key={r.id} className="border-b border-b-slate-200">
+              {r.getVisibleCells().map((c) => (
+                <td key={c.id} className="py-2">
+                  {flexRender(c.column.columnDef.cell, c.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="flex gap-2 items-center justify-center mt-10">
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanPreviousPage() ? 'opacity-25' : 'opacity-100'
+          }`}
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronDoubleLeftIcon />
+        </button>
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanPreviousPage() ? 'opacity-25' : 'opacity-100'
+          }`}
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronLeftIcon />
+        </button>
+        <span className="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {table.getState().pagination.pageIndex + 1} of{' '}
+            {table.getPageCount()}
+          </strong>
+        </span>
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanNextPage() ? 'opacity-25' : 'opacity-100'
+          }`}
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <ChevronRightIcon />
+        </button>
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanNextPage() ? 'opacity-25' : 'opacity-100'
+          }`}
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          <ChevronDoubleRightIcon />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const globalFilterFn: FilterFn<any> = (row, columnId, filterValue: string) => {
+  const search = filterValue.toLowerCase();
+
+  let value = row.getValue(columnId) as string;
+  if (typeof value === 'number') value = String(value);
+
+  return value?.toLowerCase().includes(search);
+};

packages/components/src/components/Vega.tsx

@@ -0,0 +1,6 @@
+//  Wrapper for the Vega component
+import { Vega as VegaOg } from "react-vega";
+
+export function Vega(props) {
+  return <VegaOg {...props} />;
+}

packages/components/src/components/VegaLite.tsx

@@ -0,0 +1,9 @@
+//  Wrapper for the Vega Lite component
+import { VegaLite as VegaLiteOg } from "react-vega";
+import applyFullWidthDirective from "../lib/applyFullWidthDirective";
+
+export function VegaLite(props) {
+  const Component = applyFullWidthDirective({ Component: VegaLiteOg });
+
+  return <Component {...props} />;
+}

packages/components/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/components/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./components/Table";
+export * from "./components/LineChart";
+export * from "./components/Vega";
+export * from "./components/VegaLite";

packages/components/src/lib/applyFullWidthDirective.tsx

@@ -0,0 +1,21 @@
+export default function applyFullWidthDirective({
+  Component,
+  defaultWFull = true,
+}) {
+  return (props) => {
+    const newProps = { ...props };
+
+    let newClassName = newProps.className || "";
+    if (newProps.fullWidth === true) {
+      newClassName += " w-[90vw] ml-[calc(50%-45vw)] max-w-none";
+    } else if (defaultWFull) {
+      //  So that charts and tables will have the
+      //  same width as the text content, but images
+      //  can have its width set using the width prop
+      newClassName += " w-full";
+    }
+    newProps.className = newClassName;
+
+    return <Component {...newProps} />;
+  };
+}

packages/components/src/lib/loadData.tsx

@@ -0,0 +1,5 @@
+export default async function loadData(url: string) {
+  const response = await fetch(url)
+  const data = await response.text()
+  return data
+}

packages/components/src/lib/parseCsv.ts

@@ -0,0 +1,20 @@
+import papa from "papaparse";
+
+const parseCsv = (csv: string) => {
+  csv = csv.trim();
+  const rawdata = papa.parse(csv, { header: true });
+
+  let cols: any[] = [];
+  if(rawdata.meta.fields) {
+    cols = rawdata.meta.fields.map((r: string) => {
+      return { key: r, name: r };
+    });
+  }
+
+  return {
+    rows: rawdata.data as any,
+    fields: cols,
+  };
+};
+
+export default parseCsv;

packages/components/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/components/stories/Introduction.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Components/Introduction" />
+
+# Welcome to the PortalJS components guide
+
+**Official Website:** [portaljs.org](https://portaljs.org)  
+**Docs:** [portaljs.org/docs](https://portaljs.org/docs)  
+**GitHub:** [github.com/datopian/portaljs](https://github.com/datopian/portaljs)

packages/components/stories/LineChart.stories.ts

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LineChart, LineChartProps } from '../src/components/LineChart';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/LineChart',
+  component: LineChart,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        'Data to be displayed.\n\n E.g.: [["1990", 1], ["1991", 2]] \n\nOR\n\n "https://url.to/data.csv"',
+    },
+    title: {
+      description: 'Title to display on the chart. Optional.',
+    },
+    xAxis: {
+      description:
+        'Name of the X axis on the data. Required when the "data" parameter is an URL.',
+    },
+    yAxis: {
+      description:
+        'Name of the Y axis on the data. Required when the "data" parameter is an URL.',
+    },
+    fullWidth: {
+      description:
+        'Whether the component should be rendered as full bleed or not',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<LineChartProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const FromDataPoints: Story = {
+  name: 'Line chart from array of data points',
+  args: {
+    data: [
+      ['1850', -0.41765878],
+      ['1851', -0.2333498],
+      ['1852', -0.22939907],
+      ['1853', -0.27035445],
+      ['1854', -0.29163003],
+    ],
+  },
+};
+
+export const FromURL: Story = {
+  name: 'Line chart from URL',
+  args: {
+    title: 'Oil Price x Year',
+    data: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
+    xAxis: 'Date',
+    yAxis: 'Price',
+  },
+};

packages/components/stories/Table.stories.ts

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table, TableProps } from '../src/components/Table';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description: "Data to be displayed in the table, must also set \"cols\" to work."
+    },
+    cols: {
+      description: "Columns to be displayed in the table, must also set \"data\" to work."
+    },
+    csv: {
+      description: "CSV data as string.",
+    },
+    url: {
+      description: "Fetch the data from a CSV file remotely."
+    }
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TableProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const FromColumnsAndData: Story = {
+  name: "Table from columns and data",
+  args: {
+    data: [
+      { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+      { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+      { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+      { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+      { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+      { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+      { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+    ],
+    cols: [
+      { key: 'id', name: 'ID' },
+      { key: 'firstName', name: 'First name' },
+      { key: 'lastName', name: 'Last name' },
+      { key: 'age', name: 'Age' },
+    ],
+  },
+};
+
+export const FromRawCSV: Story = {
+  name: "Table from raw CSV",
+  args: {
+    csv: `
+    Year,Temp Anomaly
+    1850,-0.418
+    2020,0.923
+    `
+  }
+};
+
+export const FromURL: Story = {
+  name: "Table from URL",
+  args: {
+    url: "https://raw.githubusercontent.com/datasets/finance-vix/main/data/vix-daily.csv"
+  }
+};
+

packages/components/stories/Vega.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Vega } from '../src/components/Vega';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/Vega',
+  component: Vega,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<any>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  name: 'Chart built with Vega',
+  args: {
+    data: {
+      table: [
+        {
+          y: -0.418,
+          x: 1850,
+        },
+        {
+          y: 0.923,
+          x: 2020,
+        },
+      ],
+    },
+    spec: {
+      $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
+      mark: 'bar',
+      data: {
+        name: 'table',
+      },
+      encoding: {
+        x: {
+          field: 'x',
+          type: 'ordinal',
+        },
+        y: {
+          field: 'y',
+          type: 'quantitative',
+        },
+      },
+    },
+  },
+};

packages/components/stories/VegaLite.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { VegaLite } from '../src/components/VegaLite';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/VegaLite',
+  component: VegaLite,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        'Data to be used by Vega Lite. See the Vega Lite docs: https://vega.github.io/vega-lite/docs/data.html.',
+    },
+    spec: {
+      description:
+        'Spec to be used by Vega Lite. See the Vega Lite docs: https://vega.github.io/vega-lite/docs/spec.html.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<any>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  name: 'Chart built with Vega Lite',
+  args: {
+    data: {
+      table: [
+        {
+          y: -0.418,
+          x: 1850,
+        },
+        {
+          y: 0.923,
+          x: 2020,
+        },
+      ],
+    },
+    spec: {
+      $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
+      mark: 'bar',
+      data: {
+        name: 'table',
+      },
+      encoding: {
+        x: {
+          field: 'x',
+          type: 'ordinal',
+        },
+        y: {
+          field: 'y',
+          type: 'quantitative',
+        },
+      },
+    },
+  },
+};

packages/components/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

packages/components/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    // "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }],
+}

packages/components/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/components/vite.config.ts

@@ -0,0 +1,30 @@
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+    plugins: [
+        react(),
+        dts({
+            insertTypesEntry: true,
+        }),
+    ],
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, 'src/index.ts'),
+            name: 'components',
+            formats: ['es', 'umd'],
+            fileName: (format) => `components.${format}.js`,
+        },
+        rollupOptions: {
+            external: ['react', 'react-dom', 'styled-components'],
+            output: {
+                globals: {
+                    react: 'React',
+                    'react-dom': 'ReactDOM'
+                },
+            },
+        },
+    },
+});

site/content/docs/index.md

@@ -116,3 +116,103 @@ From the browser, access http://localhost:3000. You should see the following:
 
 <img src="/assets/docs/datasets-index-page.png" />
 
+### Creating a search page
+
+Typing out every link in the index page will get cumbersome eventually, and as the portal grows, finding the datasets you are looking for on the index page will become harder and harder. Luckily we have a component for that. Change your `content/index.md` file to this:
+
+```
+# Welcome to my data portal!
+
+List of available datasets:
+
+<Catalog datasets={datasets} />
+```
+
+Before you refresh the page, however, you will need to run the following command:
+
+```
+npm run mddb
+```
+
+This example makes use of the [markdowndb](https://github.com/datopian/markdowndb) library. For now the only thing you need to know is that you should run the command above everytime you make some change to `/content`.
+
+From the browser, access http://localhost:3000. You should see the following, you now have a searchable automatic list of your datasets:
+
+![](https://i.imgur.com/9HfSPIx.png)
+
+To make this catalog look even better, we can change the text that is being displayed for each dataset to a title. Let's do that by adding the "title" [frontmatter field](https://daily-dev-tips.com/posts/what-exactly-is-frontmatter/) to the first dataset in the list. Change `content/my-awesome-dataset/index.md` to the following:
+
+```
+---
+title: 'My awesome dataset'
+---
+
+# My Awesome Dataset
+
+Built with PortalJS 
+
+## Table 
+
+<Table url="data.csv" />
+```
+
+Rerun `npm run mddb` and, from the browser, access http://localhost:3000. You should see the title appearing instead of the folder name:
+
+![](https://i.imgur.com/nvmSnJ5.png)
+
+Any frontmatter attribute that you add will automatically get indexed and be usable in the search box.
+
+## Deploying your PortalJS app
+
+Finally, let's learn how to deploy PortalJS apps to Vercel or Cloudflare Pages.
+
+> [!tip]
+> Although we are using Vercel and Cloudflare Pages in this tutorial, you can deploy apps in any hosting solution you want as a static website by running `npm run export` and distributing the contents of the `out/` folder.
+
+### Push to a GitHub repo
+
+The PortalJS app we built up to this point is stored locally. To allow Vercel or Cloudflare Pages to deploy it, we have to push it to GitHub (or another SCM supported by these hosting solutions).
+
+- Create a new repository under your GitHub account
+- Add the new remote origin to your PortalJS app
+- Push the app to the repository
+
+If you are not sure about how to do it, follow this guide: https://nextjs.org/learn/basics/deploying-nextjs-app/github
+
+> [!tip]
+> You can also deploy using our Vercel deploy button. In this case, a new repository will be created under your GitHub account automatically.
+> [Click here](#one-click-deploy) to scroll to the deploy button.
+
+### Deploy to Vercel
+
+The easiest way to deploy a PortalJS app is to use Vercel, a serverless platform for static and hybrid applications developed by the creators of Next.js.
+
+To deploy your PortalJS app:
+
+- Create a Vercel account by going to https://vercel.com/signup and choosing "Continue with GitHub"
+- Import the repository you created for the PortalJS app at https://vercel.com/new
+- During the setup process you can use the default settings - no need to change anything.
+
+When you deploy, your PortalJS app will start building. It should finish in under a minute.
+
+When it’s done, you’ll get deployment URLs. Click on one of the URLs and you should see your PortaJS app live.
+
+>[!tip]
+> You can find a more in-depth explanation about this process at https://nextjs.org/learn/basics/deploying-nextjs-app/deploy
+
+#### One-Click Deploy
+
+You can instantly deploy our example app to your Vercel account by clicking the button below:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Flearn-example&project-name=my-data-portal&repository-name=my-data-portal&demo-title=PortalJS%20Learn%20Example&demo-description=PortalJS%20Learn%20Example%20-%20https%3A%2F%2Fportaljs.org%2Fdocs&demo-url=learn-example.portaljs.org&demo-image=https%3A%2F%2Fportaljs.org%2Fassets%2Fexamples%2Fbasic-example.png)
+
+This will create a new repository on your GitHub account and deploy it to Vercel. If you are following the tutorial, you can replicate the changes done on your local app to this new repository.
+
+### Deploy to Cloudflare Pages
+
+To deploy your PortalJS app to Cloudflare Pages, follow this guide:
+
+https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#deploy-with-cloudflare-pages-1
+
+Note that you don't have to change anything - just follow the steps, choosing the repository you created.
+