[basic-example][m] - initial commit

examples/basic-example/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/basic-example/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/basic-example/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/basic-example/components/DRD.tsx

@@ -0,0 +1,21 @@
+import { MDXRemote } from 'next-mdx-remote';
+import dynamic from 'next/dynamic';
+import { Mermaid } from '@flowershow/core';
+
+// Custom components/renderers to pass to MDX.
+// Since the MDX files aren't loaded by webpack, they have no knowledge of how
+// to handle import statements. Instead, you must include components in scope
+// here.
+const components = {
+  Table: dynamic(() => import('./Table')),
+  mermaid: Mermaid,
+  // Excel: dynamic(() => import('../components/Excel')),
+  // TODO: try and make these dynamic ...
+  Vega: dynamic(() => import('./Vega')),
+  VegaLite: dynamic(() => import('./VegaLite')),
+  LineChart: dynamic(() => import('./LineChart')),
+} as any;
+
+export default function DRD({ source }: { source: any }) {
+  return <MDXRemote {...source} components={components} />;
+}

examples/basic-example/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;

examples/basic-example/components/LineChart.tsx

@@ -0,0 +1,49 @@
+import VegaLite from "./VegaLite";
+
+export default function LineChart({
+  data = [],
+  fullWidth = false,
+  title = "",
+}) {
+  var tmp = data;
+  if (Array.isArray(data)) {
+    tmp = data.map((r, i) => {
+      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: "x",
+        timeUnit: "year",
+        type: "temporal",
+      },
+      y: {
+        field: "y",
+        type: "quantitative",
+      },
+    },
+  };
+
+  return <VegaLite fullWidth={fullWidth} data={vegaData} spec={spec} />;
+}

examples/basic-example/components/Table.tsx

@@ -0,0 +1,178 @@
+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";
+
+const Table = ({
+  data: ogData = [],
+  cols: ogCols = [],
+  csv = "",
+  url = "",
+  fullWidth = false,
+}) => {
+  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(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(),
+  });
+
+  return (
+    <div className={`${fullWidth ? "w-[90vw] ml-[calc(50%-45vw)]" : "w-full"}`}>
+      <DebouncedInput
+        value={globalFilter ?? ""}
+        onChange={(value) => setGlobalFilter(String(value))}
+        className="p-2 text-sm shadow border border-block"
+        placeholder="Search all columns..."
+      />
+      <table>
+        <thead>
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id}>
+              {hg.headers.map((h) => (
+                <th key={h.id}>
+                  <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}>
+              {r.getVisibleCells().map((c) => (
+                <td key={c.id}>
+                  {flexRender(c.column.columnDef.cell, c.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="flex gap-2 items-center justify-center">
+        <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);
+};
+
+export default Table;

examples/basic-example/components/Vega.tsx

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

examples/basic-example/components/VegaLite.tsx

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

examples/basic-example/content/my-dataset/README.md

@@ -0,0 +1,11 @@
+# Data
+
+This is the README.md this project.
+
+## Table 
+
+<Table url="data_1.csv" />
+ 
+## Vega Lite Line Chart from URL 
+
+<VegaLite spec={ { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"url": "data_2.csv"}, "width": 600, "height": 250, "mark": "line", "encoding": { "x": {"field": "Time", "type": "temporal"}, "y": {"field": "Anomaly (deg C)", "type": "quantitative"}, "tooltip": {"field": "Anomaly (deg C)", "type": "quantitative"} } } } />

examples/basic-example/content/my-dataset/data_2.csv

@@ -0,0 +1,173 @@
+Time,Anomaly (deg C),Lower confidence limit (2.5%),Upper confidence limit (97.5%)
+1850,-0.41765878,-0.589203,-0.24611452
+1851,-0.2333498,-0.41186792,-0.054831687
+1852,-0.22939907,-0.40938243,-0.04941572
+1853,-0.27035445,-0.43000934,-0.110699534
+1854,-0.29163003,-0.43282393,-0.15043613
+1855,-0.2969512,-0.43935776,-0.15454465
+1856,-0.32035372,-0.46809322,-0.1726142
+1857,-0.46723005,-0.61632216,-0.31813794
+1858,-0.3887657,-0.53688604,-0.24064532
+1859,-0.28119546,-0.42384982,-0.13854107
+1860,-0.39016518,-0.5389766,-0.24135375
+1861,-0.42927712,-0.5972301,-0.26132414
+1862,-0.53639776,-0.7037096,-0.36908585
+1863,-0.3443432,-0.5341645,-0.1545219
+1864,-0.4654367,-0.6480974,-0.282776
+1865,-0.33258784,-0.5246526,-0.14052312
+1866,-0.34126064,-0.52183825,-0.16068307
+1867,-0.35696334,-0.55306214,-0.16086453
+1868,-0.35196072,-0.52965826,-0.17426313
+1869,-0.31657043,-0.47642276,-0.15671812
+1870,-0.32789087,-0.46867347,-0.18710826
+1871,-0.3685807,-0.5141493,-0.22301209
+1872,-0.32804197,-0.4630833,-0.19300064
+1873,-0.34133235,-0.4725396,-0.21012507
+1874,-0.3732512,-0.5071426,-0.2393598
+1875,-0.37562594,-0.514041,-0.23721085
+1876,-0.42410994,-0.56287116,-0.28534868
+1877,-0.101108834,-0.22982001,0.027602348
+1878,-0.011315193,-0.13121258,0.10858219
+1879,-0.30363432,-0.43406433,-0.1732043
+1880,-0.31583208,-0.44015095,-0.19151321
+1881,-0.23224552,-0.35793498,-0.10655605
+1882,-0.29553008,-0.4201501,-0.17091006
+1883,-0.3464744,-0.4608177,-0.23213111
+1884,-0.49232006,-0.6026686,-0.38197154
+1885,-0.47112358,-0.5830682,-0.35917896
+1886,-0.42090362,-0.5225382,-0.31926903
+1887,-0.49878576,-0.61655986,-0.3810117
+1888,-0.37937889,-0.49332377,-0.265434
+1889,-0.24989556,-0.37222093,-0.12757017
+1890,-0.50685817,-0.6324095,-0.3813068
+1891,-0.40131494,-0.5373699,-0.26525995
+1892,-0.5075585,-0.64432853,-0.3707885
+1893,-0.49461925,-0.6315314,-0.35770702
+1894,-0.48376393,-0.6255681,-0.34195974
+1895,-0.4487516,-0.58202064,-0.3154826
+1896,-0.28400728,-0.4174015,-0.15061308
+1897,-0.25980017,-0.39852425,-0.12107607
+1898,-0.48579213,-0.6176492,-0.35393503
+1899,-0.35543364,-0.48639694,-0.22447036
+1900,-0.23447904,-0.3669676,-0.10199049
+1901,-0.29342857,-0.42967388,-0.15718324
+1902,-0.43898427,-0.5754281,-0.30254042
+1903,-0.5333264,-0.66081935,-0.40583345
+1904,-0.5975614,-0.7288325,-0.46629035
+1905,-0.40775132,-0.5350291,-0.28047356
+1906,-0.3191393,-0.45052385,-0.18775477
+1907,-0.5041577,-0.6262818,-0.38203365
+1908,-0.5138707,-0.63748026,-0.3902612
+1909,-0.5357649,-0.6526296,-0.41890016
+1910,-0.5310242,-0.6556868,-0.40636164
+1911,-0.5392051,-0.66223973,-0.4161705
+1912,-0.47567302,-0.5893311,-0.36201498
+1913,-0.46715254,-0.5893755,-0.34492958
+1914,-0.2625924,-0.38276345,-0.1424214
+1915,-0.19184391,-0.32196194,-0.06172589
+1916,-0.42020997,-0.5588941,-0.28152588
+1917,-0.54301953,-0.6921192,-0.3939199
+1918,-0.42458433,-0.58198184,-0.26718682
+1919,-0.32551822,-0.48145813,-0.1695783
+1920,-0.2985808,-0.44860035,-0.14856121
+1921,-0.24067703,-0.38175339,-0.09960067
+1922,-0.33922812,-0.46610323,-0.21235302
+1923,-0.31793055,-0.444173,-0.1916881
+1924,-0.3120622,-0.4388317,-0.18529275
+1925,-0.28242525,-0.4147755,-0.15007503
+1926,-0.12283547,-0.25264767,0.006976739
+1927,-0.22940508,-0.35135695,-0.10745319
+1928,-0.20676155,-0.33881804,-0.074705064
+1929,-0.39275664,-0.52656746,-0.25894582
+1930,-0.1768054,-0.29041144,-0.06319936
+1931,-0.10339768,-0.2126916,0.0058962475
+1932,-0.14546166,-0.25195515,-0.0389682
+1933,-0.32234442,-0.4271004,-0.21758842
+1934,-0.17433685,-0.27400395,-0.07466974
+1935,-0.20605922,-0.30349734,-0.10862111
+1936,-0.16952093,-0.26351926,-0.07552261
+1937,-0.01919893,-0.11975875,0.08136089
+1938,-0.012200732,-0.11030374,0.08590227
+1939,-0.040797167,-0.14670466,0.065110326
+1940,0.07593584,-0.04194966,0.19382134
+1941,0.038129337,-0.16225387,0.23851255
+1942,0.0014060909,-0.1952124,0.19802457
+1943,0.0064140745,-0.19959097,0.21241911
+1944,0.14410514,-0.054494828,0.3427051
+1945,0.043088365,-0.15728289,0.24345961
+1946,-0.1188128,-0.2659574,0.028331792
+1947,-0.091205545,-0.23179041,0.04937931
+1948,-0.12466127,-0.25913337,0.009810844
+1949,-0.14380224,-0.2540775,-0.033526987
+1950,-0.22662179,-0.33265698,-0.12058662
+1951,-0.06115397,-0.15035024,0.028042298
+1952,0.015354565,-0.08293597,0.11364509
+1953,0.07763074,-0.020529618,0.1757911
+1954,-0.11675021,-0.20850271,-0.024997713
+1955,-0.19730993,-0.28442997,-0.1101899
+1956,-0.2631656,-0.33912563,-0.18720557
+1957,-0.035334926,-0.10056862,0.029898768
+1958,-0.017632553,-0.083074555,0.04780945
+1959,-0.048004825,-0.11036375,0.0143540995
+1960,-0.115487024,-0.17416587,-0.056808177
+1961,-0.019997388,-0.07078052,0.030785747
+1962,-0.06405444,-0.11731443,-0.010794453
+1963,-0.03680589,-0.09057008,0.016958294
+1964,-0.30586675,-0.34949213,-0.26224136
+1965,-0.2043879,-0.25357357,-0.15520222
+1966,-0.14888458,-0.19839221,-0.09937696
+1967,-0.11751631,-0.16062479,-0.07440783
+1968,-0.1686323,-0.21325313,-0.124011464
+1969,-0.031366713,-0.07186544,0.009132013
+1970,-0.08510657,-0.12608096,-0.04413217
+1971,-0.20593274,-0.24450706,-0.16735843
+1972,-0.0938271,-0.13171694,-0.05593726
+1973,0.04993336,0.013468528,0.086398184
+1974,-0.17253734,-0.21022376,-0.1348509
+1975,-0.11075424,-0.15130512,-0.07020335
+1976,-0.21586166,-0.25588378,-0.17583954
+1977,0.10308852,0.060056705,0.14612034
+1978,0.0052557723,-0.034576867,0.04508841
+1979,0.09085813,0.062358618,0.119357646
+1980,0.19607207,0.162804,0.22934014
+1981,0.25001204,0.21939126,0.28063282
+1982,0.034263328,-0.005104665,0.07363132
+1983,0.22383861,0.18807402,0.2596032
+1984,0.04800471,0.011560736,0.08444869
+1985,0.04972978,0.015663471,0.08379609
+1986,0.09568697,0.064408,0.12696595
+1987,0.2430264,0.21218552,0.27386728
+1988,0.28215173,0.2470353,0.31726816
+1989,0.17925027,0.14449838,0.21400215
+1990,0.36056247,0.32455227,0.39657268
+1991,0.33889654,0.30403617,0.3737569
+1992,0.124896795,0.09088206,0.15891153
+1993,0.16565846,0.12817313,0.2031438
+1994,0.23354977,0.19841294,0.2686866
+1995,0.37686616,0.34365577,0.41007656
+1996,0.2766894,0.24318004,0.31019878
+1997,0.4223085,0.39009082,0.4545262
+1998,0.57731646,0.54304415,0.6115888
+1999,0.32448497,0.29283476,0.35613516
+2000,0.3310848,0.29822788,0.36394167
+2001,0.48928034,0.4580683,0.5204924
+2002,0.5434665,0.51278186,0.57415116
+2003,0.5441702,0.5112426,0.5770977
+2004,0.46737072,0.43433833,0.5004031
+2005,0.60686255,0.5757053,0.6380198
+2006,0.5725527,0.541973,0.60313237
+2007,0.5917013,0.56135315,0.6220495
+2008,0.46564984,0.43265733,0.49864236
+2009,0.5967817,0.56525564,0.6283077
+2010,0.68037146,0.649076,0.7116669
+2011,0.53769773,0.5060012,0.5693943
+2012,0.5776071,0.5448553,0.6103589
+2013,0.6235754,0.5884838,0.6586669
+2014,0.67287165,0.63890487,0.7068384
+2015,0.82511437,0.79128706,0.8589417
+2016,0.93292713,0.90176356,0.96409065
+2017,0.84517425,0.81477475,0.87557375
+2018,0.762654,0.731052,0.79425603
+2019,0.8910726,0.85678726,0.92535794
+2020,0.9227938,0.8882121,0.9573755
+2021,0.6640137,0.5372486,0.79077876

examples/basic-example/lib/markdown.js

@@ -0,0 +1,105 @@
+import matter from "gray-matter";
+import mdxmermaid from "mdx-mermaid";
+import { h } from "hastscript";
+import remarkCallouts from "@flowershow/remark-callouts";
+import remarkEmbed from "@flowershow/remark-embed";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkSmartypants from "remark-smartypants";
+import remarkToc from "remark-toc";
+import remarkWikiLink from "@flowershow/remark-wiki-link";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeKatex from "rehype-katex";
+import rehypeSlug from "rehype-slug";
+import rehypePrismPlus from "rehype-prism-plus";
+
+import { serialize } from "next-mdx-remote/serialize";
+
+/**
+ * Parse a markdown or MDX file to an MDX source form + front matter data
+ *
+ * @source: the contents of a markdown or mdx file
+ * @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 { content, data, excerpt } = matter(source, {
+    excerpt: (file, options) => {
+      // Generate an excerpt for the file
+      file.excerpt = file.content.split("\n\n")[0];
+    },
+  });
+
+  const mdxSource = await serialize(
+    { value: content, path: format },
+    {
+      // Optionally pass remark/rehype plugins
+      mdxOptions: {
+        remarkPlugins: [
+          remarkEmbed,
+          remarkGfm,
+          [remarkSmartypants, { quotes: false, dashes: "oldschool" }],
+          remarkMath,
+          remarkCallouts,
+          remarkWikiLink,
+          [
+            remarkToc,
+            {
+              heading: "Table of contents",
+              tight: true,
+            },
+          ],
+          [mdxmermaid, {}],
+        ],
+        rehypePlugins: [
+          rehypeSlug,
+          [
+            rehypeAutolinkHeadings,
+            {
+              properties: { className: 'heading-link' },
+              test(element) {
+                return (
+                  ["h2", "h3", "h4", "h5", "h6"].includes(element.tagName) &&
+                  element.properties?.id !== "table-of-contents" &&
+                  element.properties?.className !== "blockquote-heading"
+                );
+              },
+              content() {
+                return [
+                  h(
+                    "svg",
+                    {
+                      xmlns: "http:www.w3.org/2000/svg",
+                      fill: "#ab2b65",
+                      viewBox: "0 0 20 20",
+                      className: "w-5 h-5",
+                    },
+                    [
+                      h("path", {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z",
+                      }),
+                    ]
+                  ),
+                ];
+              },
+            },
+          ],
+          [rehypeKatex, { output: "mathml" }],
+          [rehypePrismPlus, { ignoreMissing: true }],
+        ],
+        format,
+      },
+      scope: data,
+    }
+  );
+
+  return {
+    mdxSource: mdxSource,
+    frontMatter: data,
+    excerpt,
+  };
+};
+
+export default parse;

examples/basic-example/lib/parseCsv.ts

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

examples/basic-example/middleware.ts

@@ -0,0 +1,14 @@
+// middleware.ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+// This function can be marked `async` if using `await` inside
+export function middleware(request: NextRequest) {
+  console.log('FUCK MY LIFE')
+  return NextResponse.redirect(new URL('/about-2', request.url))
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+  matcher: '/datasets/:datasetName',
+}

examples/basic-example/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

examples/basic-example/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "basic-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@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",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
+    "gray-matter": "^4.0.3",
+    "hastscript": "^7.2.0",
+    "mdx-mermaid": "^1.3.2",
+    "next": "13.2.1",
+    "next-mdx-remote": "^4.4.1",
+    "papaparse": "^5.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-vega": "^7.6.0",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-katex": "^6.0.3",
+    "rehype-prism-plus": "^1.5.1",
+    "rehype-slug": "^5.1.0",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "remark-smartypants": "^2.0.0",
+    "remark-toc": "^8.0.1",
+    "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.1"
+  }
+}

examples/basic-example/pages/_app.tsx

@@ -0,0 +1,6 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/basic-example/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

examples/basic-example/pages/datasets/[datasetId].tsx

@@ -0,0 +1,56 @@
+import { promises as fs } from 'fs';
+import { GetStaticProps } from 'next';
+import path from 'path';
+import parse from '../../lib/markdown';
+import DRD from '../../components/DRD';
+
+export async function getStaticPaths() {
+  const contentDir = path.join(process.cwd(), '/content');
+  const datasets = await fs.readdir(contentDir);
+  return {
+    paths: datasets.map((dataset) => ({ params: { datasetId: dataset } })),
+    fallback: false, // can also be true or 'blocking'
+  };
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const { datasetId } = context.params;
+  const jsonDirectory = path.join(
+    process.cwd(),
+    '/content/' + datasetId + '/README.md'
+  );
+  const readme = await fs.readFile(jsonDirectory, 'utf8');
+  let { mdxSource, frontMatter, excerpt } = await parse(readme, '.mdx');
+  return {
+    props: {
+      mdxSource,
+      frontMatter,
+      excerpt,
+    },
+  };
+};
+
+export default function DatasetPage({ mdxSource, frontMatter, excerpt }) {
+  return (
+    <div className="prose mx-auto">
+      <header>
+        <div className="mb-6">
+          <>
+            <h1>{frontMatter.title}</h1>
+            {frontMatter.author && (
+              <div className="-mt-6">
+                <p className="opacity-60 pl-1">{frontMatter.author}</p>
+              </div>
+            )}
+            {frontMatter.description && (
+              <p className="description">{frontMatter.description}</p>
+            )}
+          </>
+        </div>
+      </header>
+      <main>
+        <DRD source={mdxSource} />
+      </main>
+    </div>
+  );
+}

examples/basic-example/pages/index.tsx

@@ -0,0 +1,71 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by editing{' '}
+          <code className={styles.code}>pages/index.tsx</code>
+        </p>
+
+        <div className={styles.grid}>
+          <a href="https://nextjs.org/docs" className={styles.card}>
+            <h2>Documentation &rarr;</h2>
+            <p>Find in-depth information about Next.js features and API.</p>
+          </a>
+
+          <a href="https://nextjs.org/learn" className={styles.card}>
+            <h2>Learn &rarr;</h2>
+            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          </a>
+
+          <a
+            href="https://github.com/vercel/next.js/tree/canary/examples"
+            className={styles.card}
+          >
+            <h2>Examples &rarr;</h2>
+            <p>Discover and deploy boilerplate example Next.js projects.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.card}
+          >
+            <h2>Deploy &rarr;</h2>
+            <p>
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  )
+}

examples/basic-example/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/basic-example/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

examples/basic-example/styles/Home.module.css

@@ -0,0 +1,129 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card,
+  .footer {
+    border-color: #222;
+  }
+  .code {
+    background: #111;
+  }
+  .logo img {
+    filter: invert(1);
+  }
+}

examples/basic-example/styles/globals.css

@@ -0,0 +1,105 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "@flowershow/remark-callouts/styles.css";
+
+.w-5 {
+  width: 1.25rem
+}
+
+.h-5 {
+  height: 1.25rem
+}
+
+/* mathjax */
+.math-inline > mjx-container > svg {
+  display: inline;
+  align-items: center;
+}
+
+/* smooth scrolling in modern browsers */
+html {
+  scroll-behavior: smooth !important;
+}
+
+/* tooltip fade-out clip */
+.tooltip-body::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */
+  height: 1.2rem; /* ($top + $height)/$line-height is the number of lines we want to clip tooltip text at*/
+  width: 10rem;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 1) 100%
+  );
+}
+
+:is(h2, h3, h4, h5, h6):not(.blogitem-title) {
+  margin-left: -2rem !important;
+  padding-left: 2rem !important;
+  scroll-margin-top: 4.5rem;
+  position: relative;
+}
+
+.heading-link {
+  padding: 1px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: auto 0;
+  border-radius: 5px;
+  background: #1e293b;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.light .heading-link {
+  /* border: 1px solid #ab2b65; */
+  /* background: none; */
+  background: #e2e8f0;
+}
+
+:is(h2, h3, h4, h5, h6):not(.blogitem-title):hover .heading-link {
+  opacity: 100;
+}
+
+.heading-link svg {
+  transform: scale(0.75);
+}
+
+@media screen and (max-width: 640px) {
+  .heading-link {
+    visibility: hidden;
+  }
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}

examples/basic-example/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

examples/basic-example/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}