Example of how to create a data portal in 5 minutes (#769)

* [example][m] - start of a simple-example

* Empty-Commit

* [simple-example][sm] - change from repos.json to datasets.json

* [example][m] - changed styling and added octokit

* [build][sm] - fix build

examples/simple-example-e2e/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

examples/simple-example-e2e/cypress.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'cypress';
+import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__dirname),
+});

examples/simple-example-e2e/project.json

@@ -0,0 +1,30 @@
+{
+  "name": "simple-example-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/simple-example-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "examples/simple-example-e2e/cypress.config.ts",
+        "devServerTarget": "simple-example:serve:development",
+        "testingType": "e2e"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "simple-example:serve:production"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["examples/simple-example-e2e/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["simple-example"]
+}

examples/simple-example-e2e/src/e2e/app.cy.ts

@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('simple-example', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains('Welcome simple-example');
+  });
+});

examples/simple-example-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

examples/simple-example-e2e/src/support/app.po.ts

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

examples/simple-example-e2e/src/support/commands.ts

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

examples/simple-example-e2e/src/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

examples/simple-example-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+}

examples/simple-example/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "plugin:@nrwl/nx/react-typescript",
+    "next",
+    "next/core-web-vitals",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*", ".next/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": [
+          "error",
+          "examples/simple-example/pages"
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off"
+  },
+  "env": {
+    "jest": true
+  }
+}

examples/simple-example/components/MDLayout.tsx

@@ -0,0 +1,85 @@
+import FrictionlessViewFactory from "./drd/FrictionlessView";
+import Table from "./drd/Table";
+
+/* eslint import/no-default-export: off */
+function DatapackageLayout({ children, project, excerpt }) {
+  const { metadata } = project;
+
+  const title = metadata.title;
+  const resources = metadata.resources;
+  const views = metadata.views;
+
+  const FrictionlessView = FrictionlessViewFactory({ views, resources });
+
+  return (
+    <article className="docs prose text-primary dark:text-primary-dark dark:prose-invert prose-headings:font-headings prose-a:break-words mx-auto p-6">
+      <header>
+        {title && <h1 className="mb-4">{title}</h1>}
+        <a
+          className="font-semibold mb-4"
+          target="_blank"
+          href={project.github_repo}
+        >
+          @{project.owner} / {project.name}
+        </a>
+        {excerpt && <p className="text-md">{excerpt}</p>}
+      </header>
+      <section className="mt-10">
+        {views.map((view, i) => {
+          return (
+            <div key={`visualization-${i}`}>
+              <FrictionlessView viewId={i} />
+            </div>
+          );
+        })}
+      </section>
+      <section className="mt-10">
+        <h2>Data files</h2>
+        <table className="table-auto">
+          <thead>
+            <tr>
+              <th>File</th>
+              <th>Title</th>
+              <th>Format</th>
+            </tr>
+          </thead>
+          <tbody>
+            {resources.map((r) => {
+              return (
+                <tr key={`resources-list-${r.name}`}>
+                  <td>
+                    <a
+                      target="_blank"
+                      href={`https://github.com/${project.owner}/${project.name}/blob/main/${r.path}`}
+                    >
+                      {r.path}
+                    </a>
+                  </td>
+                  <td>{r.title}</td>
+                  <td>{r.format.toUpperCase()}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+        {resources.slice(0, 5).map((resource) => {
+          return (
+            <div key={`resource-preview-${resource.name}`} className="mt-10">
+              <h3>{resource.title || resource.name || resource.path}</h3>
+              <Table url={resource.path} />
+            </div>
+          );
+        })}
+      </section>
+      <hr />
+      <section>
+        <h2>Read me</h2>
+        {children}
+      </section>
+    </article>
+  );
+}
+
+export default function MDLayout({ children, layout, ...props }) {
+  return <DatapackageLayout project={props.project} excerpt={props.excerpt}>{children}</DatapackageLayout>;
+}

examples/simple-example/components/drd/DRD.tsx

@@ -0,0 +1,40 @@
+import { MDXRemote } from "next-mdx-remote";
+import dynamic from "next/dynamic";
+import { Mermaid } from "@flowershow/core";
+
+import FrictionlessViewFactory from "./FrictionlessView";
+
+// 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,
+  frictionless = {
+    views: [],
+    resources: [],
+  },
+}: {
+  source: any;
+  frictionless?: any;
+}) {
+  //  dynamic() can't be used inside of React rendering
+  //  as it needs to be marked in the top level of the
+  //  module for preloading to work
+  components.FrictionlessView = FrictionlessViewFactory({
+    views: frictionless.views,
+    resources: frictionless.resources,
+  });
+
+  return <MDXRemote {...source} components={components} />;
+}

examples/simple-example/components/drd/DebouncedInput.tsx

@@ -0,0 +1,33 @@
+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/simple-example/components/drd/FrictionlessView.tsx

@@ -0,0 +1,55 @@
+// FrictionlessView is a factory because we have to
+// set the views and resources lists before using it
+
+import { convertSimpleToVegaLite } from "../../lib/viewSpecConversion";
+import VegaLite from "./VegaLite";
+
+export default function FrictionlessViewFactory({
+  views = [],
+  resources = [],
+}): ({
+  viewId,
+  fullWidth,
+}: {
+  viewId: number;
+  fullWidth?: boolean;
+}) => JSX.Element {
+  return ({ viewId, fullWidth = false }) => {
+    if (!(viewId in views)) {
+      console.error(`View ${viewId} not found`);
+      return <></>;
+    }
+    const view = views[viewId];
+
+    let resource;
+    if (resources.length > 1) {
+      resource = resources.find((r) => r.name === view.resourceName);
+    } else {
+      resource = resources[0];
+    }
+
+    if (!resource) {
+      console.error(`Resource not found for view id ${viewId}`);
+      return <></>;
+    }
+
+    let vegaSpec;
+    switch (view.specType) {
+      case "simple":
+        vegaSpec = convertSimpleToVegaLite(view, resource);
+        break;
+      // ... other conversions
+    }
+
+    vegaSpec.data = { url: resource.path };
+
+    return (
+      <VegaLite
+        fullWidth={fullWidth}
+        spec={vegaSpec}
+        actions={{ editor: false }}
+        downloadFileName={resource.name}
+      />
+    );
+  };
+}

examples/simple-example/components/drd/LineChart.tsx

@@ -0,0 +1,49 @@
+import { VegaLite } from "react-vega";
+
+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" as "container",
+    height: 300,
+    mark: {
+      type: "line" as "line",
+      color: "black",
+      strokeWidth: 1,
+      tooltip: true,
+    },
+    data: {
+      name: "table",
+    },
+    selection: {
+      grid: {
+        type: "interval" as "interval",
+        bind: "scales",
+      },
+    },
+    encoding: {
+      x: {
+        field: "x",
+        timeUnit: "year",
+        type: "temporal" as "temporal",
+      },
+      y: {
+        field: "y",
+        type: "quantitative" as "temporal",
+      },
+    },
+  };
+
+  return <VegaLite data={vegaData} spec={spec} />;
+}

examples/simple-example/components/drd/Table.tsx

@@ -0,0 +1,188 @@
+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 loadUrlProxied from "../../lib/loadUrlProxied";
+import parseCsv from "../../lib/parseCsv";
+import DebouncedInput from "./DebouncedInput";
+
+const Table = ({
+  data: ogData = [],
+  cols: ogCols = [],
+  csv = "",
+  url = "",
+}) => {
+  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(),
+  });
+
+  useEffect(() => {
+    if (url) {
+      loadUrlProxied(url).then((data) => {
+        const { rows, fields } = parseCsv(data);
+        setData(rows);
+        setCols(fields);
+      });
+    }
+  }, [url]);
+
+  return (
+    <div>
+      <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/simple-example/components/drd/Vega.tsx

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

examples/simple-example/components/drd/VegaLite.tsx

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

examples/simple-example/datasets.json

@@ -0,0 +1,7 @@
+[
+  { "owner": "datasets", "repo": "oil-prices"},
+  { "owner": "datasets", "repo": "investor-flow-of-funds-us"},
+  { "owner": "datasets", "repo": "browser-stats"},
+  { "owner": "datasets", "repo": "glacier-mass-balance"},
+  { "owner": "datasets", "repo": "bond-yields-us-10y"}
+]

examples/simple-example/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}

examples/simple-example/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'simple-example',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/examples/simple-example',
+};

examples/simple-example/lib/loadUrlProxied.tsx

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+export default function loadUrlProxied(url: string) {
+  // HACK: duplicate of Excel code - maybe refactor
+  // if url is external may have CORS issue so we proxy it ...
+  if (url.startsWith("http")) {
+    const PROXY_URL = "/api/proxy";
+    url = PROXY_URL + "?url=" + encodeURIComponent(url);
+  }
+  return axios.get(url).then((res) => res.data);
+}

examples/simple-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/simple-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/simple-example/lib/project.ts

@@ -0,0 +1,60 @@
+import * as crypto from "crypto";
+import axios from "axios";
+import { Octokit } from "octokit"
+
+export default class Project {
+  id: string;
+  name: string;
+  owner: string;
+  github_repo: string;
+  readme: string;
+  metadata: any;
+  repo_metadata: any;
+
+  constructor(owner: string, name: string) {
+    this.name = name;
+    this.owner = owner;
+    this.github_repo = `https://github.com/${owner}/${name}`;
+
+    //  TODO: using the GitHub repo to set the id is not a good idea
+    //  since repos can be renamed and then we are going to end up with
+    //  a duplicate
+    const encodedGHRepo = Buffer.from(this.github_repo, "utf-8").toString();
+    this.id = crypto.createHash("sha1").update(encodedGHRepo).digest("hex");
+  }
+
+  initFromGitHub = async () => {
+    const octokit = new Octokit()
+    //  TODO: what if the repo doesn't exist?
+    await this.getFileContent("README.md")
+      .then((content) => (this.readme = content))
+      .catch((e) => (this.readme = null));
+
+    await this.getFileContent("datapackage.json")
+      .then((content) => (this.metadata = content))
+      .catch((e) => (this.metadata = {}));
+
+    const github_metadata = await octokit.rest.repos.get({ owner: this.owner, repo: this.name })
+    this.repo_metadata = github_metadata.data ? github_metadata.data : null
+  };
+
+  getFileContent = (path, branch = "main") => {
+    return axios
+      .get(
+        `https://raw.githubusercontent.com/${this.owner}/${this.name}/${branch}/${path}`
+      )
+      .then((res) => res.data);
+  };
+
+  serialize() {
+    return JSON.parse(JSON.stringify(this));
+  }
+
+  static async getFromGitHub(owner: string, name: string) {
+    const project = new Project(owner, name);
+    await project.initFromGitHub();
+
+    return project;
+  }
+}
+

examples/simple-example/lib/viewSpecConversion.ts

@@ -0,0 +1,47 @@
+export function convertSimpleToVegaLite(view, resource) {
+  const x = resource.schema.fields.find((f) => f.name === view.spec.group);
+  const y = resource.schema.fields.find((f) => f.name === view.spec.series[0]);
+
+  const xType = inferVegaType(x.type);
+  const yType = inferVegaType(y.type);
+
+  let vegaLiteSpec = {
+    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    mark: {
+      type: view.spec.type,
+      color: "black",
+      strokeWidth: 1,
+      tooltip: true,
+    },
+    title: view.title,
+    width: "container",
+    height: 300,
+    selection: {
+      grid: {
+        type: "interval",
+        bind: "scales",
+      },
+    },
+    encoding: {
+      x: {
+        field: x.name,
+        type: xType,
+      },
+      y: {
+        field: y.name,
+        type: yType,
+      },
+    },
+  };
+
+  return vegaLiteSpec;
+}
+
+const inferVegaType = (fieldType) => {
+  switch (fieldType) {
+    case "date":
+      return "Temporal";
+    case "number":
+      return "Quantitative";
+  }
+};

examples/simple-example/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/simple-example/next.config.js

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { withNx } = require('@nrwl/next/plugins/with-nx');
+
+/**
+ * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  async rewrites() {
+    return {
+      beforeFiles: [
+        {
+          source: "/@org/:org/:project/:file(\.\+\\\.\.\+\$)",
+          destination:
+            '/api/proxy?url=https://raw.githubusercontent.com/:org/:project/main/:file',
+        },
+        {
+          source: "/@:org/:project/:file(\.\+\\\.\.\+\$)",
+          destination:
+            '/api/proxy?url=https://raw.githubusercontent.com/:org/:project/main/:file',
+        },
+        {
+          source: '/@:org/:project*',
+          destination: '/@org/:org/:project*',
+        },
+      ],
+    };
+  },
+  nx: {
+    // Set this to true if you would like to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: true,
+  },
+};
+
+module.exports = withNx(nextConfig);

examples/simple-example/pages/@org/[org]/[project]/index.tsx

@@ -0,0 +1,110 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+import DRD from '../../../../components/drd/DRD';
+import parse from '../../../../lib/markdown';
+import Project from '../../../../lib/project';
+import { NextSeo } from 'next-seo';
+import MDLayout from 'examples/simple-example/components/MDLayout';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+function CollectionsLayout({ children, ...frontMatter }) {
+  const { title, date, description } = frontMatter;
+
+  return (
+    <article className="docs prose text-primary dark:text-primary-dark dark:prose-invert prose-headings:font-headings prose-a:break-words mx-auto p-6">
+      <header>
+        <div className="mb-6">
+          {date && (
+            <p className="text-sm text-zinc-400 dark:text-zinc-500">
+              <time dateTime={date}>{date}</time>
+            </p>
+          )}
+          {title && <h1 className="mb-2">{title}</h1>}
+          {description && <p className="text-xl mt-0">{description}</p>}
+        </div>
+      </header>
+      <section>{children}</section>
+    </article>
+  );
+}
+
+export default function ProjectPage({
+  mdxSource,
+  frontMatter,
+  excerpt,
+  project,
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <NextSeo title={`PortalJS - @${project.owner}/${project.name}`} />
+      <Head>
+        {/* 
+          On index files, add trailling slash to the base path 
+          see notes: https://github.com/datopian/datahub-next/issues/69
+        */}
+        <base href={router.asPath.split('#')[0] + '/'} />
+      </Head>
+      <main>
+        <MDLayout
+          layout={frontMatter.layout}
+          excerpt={excerpt}
+          project={project}
+          {...frontMatter}
+        >
+          <DRD
+            source={mdxSource}
+            frictionless={{
+              views: project.metadata?.views,
+              resources: project.metadata?.resources,
+            }}
+          />
+        </MDLayout>
+      </main>
+    </>
+  );
+}
+
+// Generates `/posts/1` and `/posts/2`
+export async function getStaticPaths() {
+  const jsonDirectory = path.join(process.cwd(), '/examples/simple-example/datasets.json');
+  const repos = await fs.readFile(jsonDirectory, 'utf8');
+
+  return {
+    paths: JSON.parse(repos).map(repo => ({ params: { org: repo.owner, project: repo.repo}})),
+    fallback: false, // can also be true or 'blocking'
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const { org: orgName, project: projectName } = params;
+
+  const project = await Project.getFromGitHub(orgName, projectName);
+
+  //  Defaults to README
+  let content = project.readme;
+
+  if (content === null) {
+    return {
+      notFound: true,
+    };
+  }
+
+  let { mdxSource, frontMatter, excerpt } = await parse(content, '.mdx');
+
+  if (project.metadata?.resources) {
+    frontMatter.layout = 'datapackage';
+  }
+
+  return {
+    props: {
+      mdxSource,
+      frontMatter,
+      excerpt,
+      project: project.serialize(),
+    },
+  };
+}

examples/simple-example/pages/_app.tsx

@@ -0,0 +1,19 @@
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import './styles.css';
+import "../styles/global.css";
+
+function CustomApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <title>Welcome to simple-example!</title>
+      </Head>
+      <main className="app">
+        <Component {...pageProps} />
+      </main>
+    </>
+  );
+}
+
+export default CustomApp;

examples/simple-example/pages/api/proxy.ts

@@ -0,0 +1,26 @@
+import axios from "axios";
+
+export default function handler(req, res) {
+  if (!req.query.url) {
+    res.status(200).send({
+      error: true,
+      info: "No url to proxy in query string i.e. ?url=...",
+    });
+    return;
+  }
+  axios({
+    method: "get",
+    url: req.query.url,
+    responseType: "stream",
+  })
+    .then((resp) => {
+      resp.data.pipe(res);
+    })
+    .catch((err) => {
+      res.status(400).send({
+        error: true,
+        info: err.message,
+        detailed: err,
+      });
+    });
+}

examples/simple-example/pages/index.tsx

@@ -0,0 +1,152 @@
+import parse from '../lib/markdown';
+import Project from '../lib/project';
+import { promises as fs } from 'fs';
+import path from 'path';
+import Link from 'next/link';
+
+export async function getStaticProps() {
+  const jsonDirectory = path.join(
+    process.cwd(),
+    '/examples/simple-example/datasets.json'
+  );
+  const repos = await fs.readFile(jsonDirectory, 'utf8');
+
+  const projects = await Promise.all(
+    JSON.parse(repos).map(async (repo) => {
+      const project = await Project.getFromGitHub(repo.owner, repo.repo);
+
+      //  Defaults to README
+      const content = project.readme ? project.readme : '';
+
+      let { mdxSource, frontMatter, excerpt } = await parse(content, '.mdx');
+
+      if (project.metadata?.resources) {
+        frontMatter.layout = 'datapackage';
+      }
+
+      return {
+        mdxSource,
+        frontMatter,
+        excerpt,
+        project: project.serialize(),
+      };
+    })
+  );
+  return {
+    props: {
+      projects,
+    },
+  };
+}
+
+const formatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  timeZone: 'UTC',
+});
+
+export function Datasets({ projects }) {
+  return (
+    <div className="bg-white">
+      <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
+        <h2 className="text-2xl font-bold leading-10 tracking-tight text-indigo-500">
+          My Datasets
+        </h2>
+        <p className="mt-6 max-w-2xl text-base leading-7 text-gray-600">
+          Here is a list of all my datasets for easy access and sharing
+        </p>
+        <div className="mt-20">
+          {/*
+          <dl className="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:grid-cols-3 lg:gap-x-10">
+            {projects.map((project) => (
+              <div>
+                <dt className="text-base font-semibold leading-7 text-gray-900">
+                  <Link
+                    href={`@${project.project.owner}/${project.project.name}`}
+                  >
+                    {project.project.owner}/{project.project.name}
+                  </Link>
+                </dt>
+                <dt className="text-base font-semibold leading-7 text-indigo-600">
+                  <a
+                    href={`https://github.com/${project.project.owner}/${project.project.name}`}
+                  >
+                    Github repo
+                  </a>
+                </dt>
+                <dd className="mt-2 text-base leading-7 text-gray-600">
+                  {project.excerpt !== '' ? project.excerpt : 'No description'}
+                </dd>
+              </div>
+            ))}
+          </dl> */}
+          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead>
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
+                      Dataset name
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
+                      Description
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
+                      Last updated
+                    </th>
+                    <th
+                      scope="col"
+                      className="relative py-3.5 pl-3 pr-4 sm:pr-0"
+                    ></th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {projects.map((project) => (
+                    <tr>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <a href={project.project.repo_metadata.html_url}>
+                          {project.project.owner}/{project.project.name}
+                        </a>
+                      </td>
+                      <td className="px-3 py-4 text-sm text-gray-500">
+                        {project.project.repo_metadata.description}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {formatter.format(
+                          new Date(project.project.repo_metadata.updated_at)
+                        )}
+                      </td>
+                      <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
+                        <a
+                          href={`/@${project.project.owner}/${project.project.name}`}
+                          className="text-indigo-600 hover:text-indigo-900"
+                        >
+                          More info
+                        </a>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Datasets;

examples/simple-example/pages/styles.css

@@ -0,0 +1,403 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+html {
+  -webkit-text-size-adjust: 100%;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  line-height: 1.5;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+h1,
+h2,
+p,
+pre {
+  margin: 0;
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+h1,
+h2 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+}
+svg {
+  display: block;
+  vertical-align: middle;
+  shape-rendering: auto;
+  text-rendering: optimizeLegibility;
+}
+pre {
+  background-color: rgba(55, 65, 81, 1);
+  border-radius: 0.25rem;
+  color: rgba(229, 231, 235, 1);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+  overflow: scroll;
+  padding: 0.5rem 0.75rem;
+}
+
+.shadow {
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.rounded {
+  border-radius: 1.5rem;
+}
+.wrapper {
+  width: 100%;
+}
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 768px;
+  padding-bottom: 3rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  color: rgba(55, 65, 81, 1);
+  width: 100%;
+}
+#welcome {
+  margin-top: 2.5rem;
+}
+#welcome h1 {
+  font-size: 3rem;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1;
+}
+#welcome span {
+  display: block;
+  font-size: 1.875rem;
+  font-weight: 300;
+  line-height: 2.25rem;
+  margin-bottom: 0.5rem;
+}
+#hero {
+  align-items: center;
+  background-color: hsla(214, 62%, 21%, 1);
+  border: none;
+  box-sizing: border-box;
+  color: rgba(55, 65, 81, 1);
+  display: grid;
+  grid-template-columns: 1fr;
+  margin-top: 3.5rem;
+}
+#hero .text-container {
+  color: rgba(255, 255, 255, 1);
+  padding: 3rem 2rem;
+}
+#hero .text-container h2 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  position: relative;
+}
+#hero .text-container h2 svg {
+  color: hsla(162, 47%, 50%, 1);
+  height: 2rem;
+  left: -0.25rem;
+  position: absolute;
+  top: 0;
+  width: 2rem;
+}
+#hero .text-container h2 span {
+  margin-left: 2.5rem;
+}
+#hero .text-container a {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 0.75rem;
+  color: rgba(55, 65, 81, 1);
+  display: inline-block;
+  margin-top: 1.5rem;
+  padding: 1rem 2rem;
+  text-decoration: inherit;
+}
+#hero .logo-container {
+  display: none;
+  justify-content: center;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+#hero .logo-container svg {
+  color: rgba(255, 255, 255, 1);
+  width: 66.666667%;
+}
+#middle-content {
+  align-items: flex-start;
+  display: grid;
+  gap: 4rem;
+  grid-template-columns: 1fr;
+  margin-top: 3.5rem;
+}
+#learning-materials {
+  padding: 2.5rem 2rem;
+}
+#learning-materials h2 {
+  font-weight: 500;
+  font-size: 1.25rem;
+  letter-spacing: -0.025em;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.list-item-link {
+  align-items: center;
+  border-radius: 0.75rem;
+  display: flex;
+  margin-top: 1rem;
+  padding: 1rem;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 100%;
+}
+.list-item-link svg:first-child {
+  margin-right: 1rem;
+  height: 1.5rem;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 1.5rem;
+}
+.list-item-link > span {
+  flex-grow: 1;
+  font-weight: 400;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.list-item-link > span > span {
+  color: rgba(107, 114, 128, 1);
+  display: block;
+  flex-grow: 1;
+  font-size: 0.75rem;
+  font-weight: 300;
+  line-height: 1rem;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.list-item-link svg:last-child {
+  height: 1rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 1rem;
+}
+.list-item-link:hover {
+  color: rgba(255, 255, 255, 1);
+  background-color: hsla(162, 47%, 50%, 1);
+}
+.list-item-link:hover > span {
+}
+.list-item-link:hover > span > span {
+  color: rgba(243, 244, 246, 1);
+}
+.list-item-link:hover svg:last-child {
+  transform: translateX(0.25rem);
+}
+#other-links {
+}
+.button-pill {
+  padding: 1.5rem 2rem;
+  transition-duration: 300ms;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  align-items: center;
+  display: flex;
+}
+.button-pill svg {
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  flex-shrink: 0;
+  width: 3rem;
+}
+.button-pill > span {
+  letter-spacing: -0.025em;
+  font-weight: 400;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.button-pill span span {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+}
+.button-pill:hover svg,
+.button-pill:hover {
+  color: rgba(255, 255, 255, 1) !important;
+}
+#nx-console:hover {
+  background-color: rgba(0, 122, 204, 1);
+}
+#nx-console svg {
+  color: rgba(0, 122, 204, 1);
+}
+#nx-repo:hover {
+  background-color: rgba(24, 23, 23, 1);
+}
+#nx-repo svg {
+  color: rgba(24, 23, 23, 1);
+}
+#nx-cloud {
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  padding: 2.5rem 2rem;
+}
+#nx-cloud > div {
+  align-items: center;
+  display: flex;
+}
+#nx-cloud > div svg {
+  border-radius: 0.375rem;
+  flex-shrink: 0;
+  width: 3rem;
+}
+#nx-cloud > div h2 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  letter-spacing: -0.025em;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+#nx-cloud > div h2 span {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+}
+#nx-cloud p {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin-top: 1rem;
+}
+#nx-cloud pre {
+  margin-top: 1rem;
+}
+#nx-cloud a {
+  color: rgba(107, 114, 128, 1);
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-top: 1.5rem;
+  text-align: right;
+}
+#nx-cloud a:hover {
+  text-decoration: underline;
+}
+#commands {
+  padding: 2.5rem 2rem;
+  margin-top: 3.5rem;
+}
+#commands h2 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  letter-spacing: -0.025em;
+  line-height: 1.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+#commands p {
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.5rem;
+  margin-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+details {
+  align-items: center;
+  display: flex;
+  margin-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 100%;
+}
+details pre > span {
+  color: rgba(181, 181, 181, 1);
+  display: block;
+}
+summary {
+  border-radius: 0.5rem;
+  display: flex;
+  font-weight: 400;
+  padding: 0.5rem;
+  cursor: pointer;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+summary:hover {
+  background-color: rgba(243, 244, 246, 1);
+}
+summary svg {
+  height: 1.5rem;
+  margin-right: 1rem;
+  width: 1.5rem;
+}
+#love {
+  color: rgba(107, 114, 128, 1);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-top: 3.5rem;
+  opacity: 0.6;
+  text-align: center;
+}
+#love svg {
+  color: rgba(252, 165, 165, 1);
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline;
+  margin-top: -0.25rem;
+}
+@media screen and (min-width: 768px) {
+  #hero {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  #hero .logo-container {
+    display: flex;
+  }
+  #middle-content {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

examples/simple-example/postcss.config.js

@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

examples/simple-example/project.json

@@ -0,0 +1,69 @@
+{
+  "name": "simple-example",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/simple-example",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/next:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "root": "examples/simple-example",
+        "outputPath": "dist/examples/simple-example"
+      },
+      "configurations": {
+        "development": {
+          "outputPath": "examples/simple-example"
+        },
+        "production": {}
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/next:server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "simple-example:build",
+        "dev": true
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "simple-example:build:development",
+          "dev": true
+        },
+        "production": {
+          "buildTarget": "simple-example:build:production",
+          "dev": false
+        }
+      }
+    },
+    "export": {
+      "executor": "@nrwl/next:export",
+      "options": {
+        "buildTarget": "simple-example:build:production"
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "examples/simple-example/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["examples/simple-example/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": []
+}

examples/simple-example/specs/index.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Index from '../pages/index';
+
+describe('Index', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Index />);
+    expect(baseElement).toBeTruthy();
+  });
+});

examples/simple-example/styles/global.css

@@ -0,0 +1,67 @@
+@import "@flowershow/remark-callouts/styles.css";
+
+/* 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;
+  }
+}

examples/simple-example/tailwind.config.js

@@ -0,0 +1,21 @@
+const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "node_modules/@flowershow/core/dist/*.js",
+    "node_modules/@flowershow/core/*.js",
+    join(
+      __dirname,
+      '{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+};

examples/simple-example/tsconfig.json

@@ -0,0 +1,50 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "target": "es2020",
+  "lib": [
+    "dom",
+    "dom.iterable",
+    "esnext"
+  ],
+  "allowJs": true,
+  "skipLibCheck": true,
+  "strict": false,
+  "forceConsistentCasingInFileNames": true,
+  "noEmit": true,
+  "incremental": true,
+  "esModuleInterop": true,
+  "module": "esnext",
+  "moduleResolution": "node",
+  "resolveJsonModule": true,
+  "isolatedModules": true,
+  "jsx": "preserve",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "next-env.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ]
+}

examples/simple-example/tsconfig.spec.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"],
+    "jsx": "react"
+  },
+  "paths": {
+      "@/*": ["./*"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package.json

@@ -9,6 +9,7 @@
     "@apollo/react-hooks": "^4.0.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@flowershow/core": "^0.4.9",
     "@flowershow/markdowndb": "^0.1.0",
     "@flowershow/remark-callouts": "^1.0.0",
     "@flowershow/remark-embed": "^1.0.0",
@@ -18,7 +19,9 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.11.16",
     "@mui/x-data-grid": "^6.1.0",
+    "@opentelemetry/api": "^1.4.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@tanstack/react-table": "^8.8.5",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-link": "^1.2.14",
     "apollo-link-rest": "^0.9.0",
@@ -26,11 +29,12 @@
     "gray-matter": "^4.0.3",
     "html-react-parser": "^3.0.15",
     "markdown-it": "^13.0.1",
-    "next": "13.1.1",
+    "next": "^13.2.1",
     "next-mdx-remote": "^4.4.1",
     "next-seo": "^6.0.0",
     "next-translate": "^2.0.5",
     "nock": "^13.3.0",
+    "octokit": "^2.0.14",
     "papaparse": "^5.4.1",
     "plotly.js-basic-dist": "^2.20.0",
     "prop-types": "^15.8.1",