Merge pull request #179 from finos/demo-gallery

Add demo gallery
finos · Mar 19, 2023 · 0e3fefd · 0e3fefd
2 parents bbe4d1b + 3c9816f
commit 0e3fefd
Show file tree

Hide file tree

Showing 28 changed files with 8,742 additions and 192 deletions.
diff --git a/.gitignore b/.gitignore
@@ -195,3 +195,5 @@ docs/index.md
 .jupyter/
 python_junit.xml
 
+docs/.docusaurus
+docs/static/blocks
diff --git a/README.md b/README.md
diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};
diff --git a/docs/docs/intro.md b/docs/docs/intro.md
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -0,0 +1,120 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require("prism-react-renderer/themes/github");
+const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+
+const fs = require("fs");
+
+fs.cpSync("../dist/examples", "static/blocks", { recursive: true });
+console.log("\n");
+
+function make(name, type = "examples") {
+    const record = {
+        img: `img/${name}.png`,
+        url: `block?example=${name}`,
+        name: `${name}`,
+        files: [
+            {
+                name: `${name}.md`,
+                contents: fs.readFileSync(`../${type}/${name}.md`).toString(),
+            },
+        ],
+    };
+
+    console.log(
+        `<a href="https://finos.github.io/regular-table/${record.url}">
+<img width="30%" src="https://finos.github.io/regular-table/${record.img}"/>
+</a>`
+    );
+
+    return record;
+}
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+    title: "regular-table",
+    favicon: "https://www.finos.org/hubfs/FINOS/finos-logo/favicon.ico",
+    url: "https://finos.github.io/",
+    baseUrl: "/regular-table/",
+    organizationName: "finos",
+    projectName: "regular-table",
+    onBrokenLinks: "throw",
+    onBrokenMarkdownLinks: "warn",
+    i18n: {
+        defaultLocale: "en",
+        locales: ["en"],
+    },
+    customFields: {
+        examples: [
+            make("two_billion_rows"),
+            make("canvas_data_model"),
+            make("perspective"),
+            make("minesweeper"),
+            make("file_browser"),
+            make("spreadsheet"),
+        ],
+        features: [
+            make("row_mouse_selection", "features"),
+            make("area_mouse_selection", "features"),
+            make("row_stripes", "features"),
+            make("column_mouse_selection", "features"),
+        ],
+    },
+    presets: [
+        [
+            "classic",
+            /** @type {import('@docusaurus/preset-classic').Options} */
+            ({
+                docs: {
+                    sidebarPath: require.resolve("./sidebars.js"),
+                },
+                theme: {
+                    customCss: require.resolve("./src/css/custom.css"),
+                },
+            }),
+        ],
+    ],
+    stylesheets: [
+        {
+            href:
+                "https://fonts.googleapis.com/css?display=block&family=Roboto+Mono:400",
+            type: "text/css",
+        },
+    ],
+    themeConfig:
+        /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+        ({
+            // Replace with your project's social card
+            image: "img/logo.png",
+            navbar: {
+                title: "regular-table",
+                items: [
+                    {
+                        href: "https://github.com/finos/regular-table",
+                        label: "GitHub",
+                        position: "right",
+                    },
+                ],
+            },
+            footer: {
+                style: "dark",
+                links: [
+                    {
+                        title: "More",
+                        items: [
+                            {
+                                label: "GitHub",
+                                href: "https://github.com/finos/regular-table",
+                            },
+                        ],
+                    },
+                ],
+            },
+            prism: {
+                theme: lightCodeTheme,
+                darkTheme: darkCodeTheme,
+            },
+        }),
+};
+
+module.exports = config;
diff --git a/docs/package.json b/docs/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.3.1",
+    "@docusaurus/preset-classic": "2.3.1",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.2.1",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.3.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}
diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -0,0 +1,33 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    'intro',
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -0,0 +1,32 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+    font-family: "Roboto Mono";
+    --ifm-font-family-base: "Roboto Mono";
+    --ifm-color-primary: #242526;
+    --ifm-color-primary-dark: #242526;
+    --ifm-color-primary-darker: #242526;
+    --ifm-color-primary-darkest: #242526;
+    --ifm-color-primary-light: #242526;
+    --ifm-color-primary-lighter: #242526;
+    --ifm-color-primary-lightest: #242526;
+    --ifm-code-font-size: 95%;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+    --ifm-color-primary: white;
+    --ifm-color-primary-dark: #21af90;
+    --ifm-color-primary-darker: #1fa588;
+    --ifm-color-primary-darkest: #1a8870;
+    --ifm-color-primary-light: #29d5b0;
+    --ifm-color-primary-lighter: #32d8b4;
+    --ifm-color-primary-lightest: #4fddbf;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
diff --git a/docs/src/pages/block.js b/docs/src/pages/block.js
@@ -0,0 +1,104 @@
+import React, { useEffect } from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import CodeBlock from "@theme/CodeBlock";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import Link from "@docusaurus/Link";
+
+function getQueryVariable(variable) {
+    const params = new URL(document.location).searchParams;
+    return params.get(variable);
+}
+
+export default function Block() {
+    const { siteConfig } = useDocusaurusContext();
+    let files = [];
+    let example;
+    if (ExecutionEnvironment.canUseDOM) {
+        useEffect(() => {
+            document.body.classList.add("scrolled");
+        }, []);
+
+        example = getQueryVariable("example");
+        if (!example) {
+            return (
+                <Layout
+                    title={`${siteConfig.title}`}
+                    description={siteConfig.description}
+                ></Layout>
+            );
+        }
+
+        files = (
+            siteConfig.customFields.examples.find((x) => x.name === example) ||
+            siteConfig.customFields.features.find((x) => x.name === example)
+        ).files.filter((x) => !x.name.endsWith("png"));
+    }
+
+    const url = useBaseUrl(`/blocks/${example}/index.html`);
+
+    return (
+        <Layout
+            title={`${siteConfig.title}`}
+            description={siteConfig.description}
+        >
+            <div
+                style={{
+                    width: "960px",
+                    margin: "0 auto",
+                }}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        alignItems: "stretch",
+                        flexDirection: "column",
+                    }}
+                >
+                    <br />
+                    <h1>{example}</h1>
+                    <BrowserOnly>
+                        {() => (
+                            <>
+                                <iframe
+                                    width="960"
+                                    height="500"
+                                    style={{
+                                        border:
+                                            "1px solid var(--ifm-toc-border-color)",
+                                        borderRadius: "10px",
+                                    }}
+                                    src={url}
+                                ></iframe>
+                                <br />
+                                <Link
+                                    to={`pathname:///blocks/${example}/index.html`}
+                                    style={{ alignSelf: "flex-end" }}
+                                >
+                                    {"Open in New Tab"}
+                                </Link>
+                                <br />
+
+                                {files.map((x, i) => {
+                                    const ext = x.name.split(".")[1];
+                                    return (
+                                        <CodeBlock
+                                            key={i}
+                                            language={ext}
+                                            title={x.name}
+                                            showLineNumbers
+                                        >
+                                            {x.contents}
+                                        </CodeBlock>
+                                    );
+                                })}
+                            </>
+                        )}
+                    </BrowserOnly>
+                </div>
+            </div>
+        </Layout>
+    );
+}