Feature/openlayers map (#967)

* [maps][xl] - working with swc equals to minify

* [maps][xs] - fixing height

examples/ckan-ssg/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@heroicons/react": "^2.0.17",
         "@portaljs/ckan": "^0.0.2",
+        "@portaljs/remark-wiki-link": "^1.0.4",
         "next": "13.3.1",
         "next-seo": "^6.0.0",
         "octokit": "^2.0.14",
@@ -35,7 +36,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -732,6 +732,16 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/@portaljs/remark-wiki-link": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@portaljs/remark-wiki-link/-/remark-wiki-link-1.0.4.tgz",
+      "integrity": "sha512-cp6vlssDAPawcBI0vUPRpcPdORql3RbK1Q+t1LuRvMQ+yiRb+9DnSPBUviDXKqwsBMOOXP/ePAdYohaeXGt0lQ==",
+      "dependencies": {
+        "mdast-util-to-markdown": "^1.5.0",
+        "mdast-util-wiki-link": "^0.0.2",
+        "micromark-util-symbol": "^1.0.1"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
@@ -1420,6 +1430,24 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -2888,6 +2916,28 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -3019,6 +3069,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -3055,6 +3114,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -3727,6 +3795,59 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-wiki-link": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-wiki-link/-/mdast-util-wiki-link-0.0.2.tgz",
+      "integrity": "sha512-lSsR10/dPuYIxzjGZIGA4oYzsnEnqcsD6DTXL0pqdbBzNB9teKVZB2aIzZcUsdg31v/NoHOstkVwzbN6VrQLtw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "mdast-util-to-markdown": "^0.6.5"
+      }
+    },
+    "node_modules/mdast-util-wiki-link/node_modules/longest-streak": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
+      "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-wiki-link/node_modules/mdast-util-to-markdown": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz",
+      "integrity": "sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "longest-streak": "^2.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "parse-entities": "^2.0.0",
+        "repeat-string": "^1.0.0",
+        "zwitch": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-wiki-link/node_modules/mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-wiki-link/node_modules/zwitch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
+      "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4714,6 +4835,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5083,8 +5230,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.0",
@@ -5147,6 +5293,14 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",

examples/ckan-ssg/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^2.0.17",
     "@portaljs/ckan": "^0.0.2",
+    "@portaljs/remark-wiki-link": "^1.0.4",
     "next": "13.3.1",
     "next-seo": "^6.0.0",
     "octokit": "^2.0.14",

examples/ckan/components/DataRichDocument.tsx

@@ -1,6 +1,6 @@
 import { MDXRemote } from 'next-mdx-remote';
 import dynamic from 'next/dynamic';
-import { Mermaid } from '@flowershow/core';
+import { Mermaid } from '@portaljs/core';
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how

examples/ckan/lib/markdown.js

@@ -1,13 +1,13 @@
 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 remarkCallouts from "@portaljs/remark-callouts";
+import remarkEmbed from "@portaljs/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 remarkWikiLink from "@portaljs/remark-wiki-link";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";

examples/ckan/lib/mddb.ts

@@ -1,4 +1,4 @@
-import { MarkdownDB } from "@flowershow/markdowndb";
+import { MarkdownDB } from "mddb";
 
 const dbPath = "markdown.db";
 

examples/ckan/package.json

@@ -11,14 +11,14 @@
     "mddb": "mddb ./content"
   },
   "dependencies": {
-    "@flowershow/core": "^0.4.13",
-    "@flowershow/markdowndb": "^0.1.5",
-    "@flowershow/remark-callouts": "^1.0.0",
-    "@flowershow/remark-embed": "^1.0.0",
     "@githubocto/flat-ui": "^0.14.1",
     "@heroicons/react": "^2.0.18",
     "@portaljs/ckan": "^0.0.2",
     "@portaljs/components": "0.1.6",
+    "@portaljs/core": "^1.0.5",
+    "@portaljs/remark-callouts": "^1.0.5",
+    "@portaljs/remark-embed": "^1.0.4",
+    "@portaljs/remark-wiki-link": "^1.0.4",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "20.2.3",
     "@types/react": "18.2.6",
@@ -27,6 +27,7 @@
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.3",
     "isomorphic-unfetch": "^4.0.2",
+    "mddb": "^0.1.9",
     "next": "13.4.3",
     "next-mdx-remote": "^4.4.1",
     "papaparse": "^5.4.1",

examples/ckan/pages/index.tsx

@@ -40,16 +40,25 @@ export default function Home({
   });
 
   return (
-    <main className="flex min-h-screen flex-col items-center p-24 bg-zinc-900">
-      <DatasetSearchForm
-        options={options}
-        setOptions={setOptions}
-        groups={groups}
-        orgs={orgs}
-      />
-      <div className="bg-white p-8 my-4 rounded-lg">
-        <ListOfDatasets options={options} setOptions={setOptions} ckan={ckan} />{' '}
-      </div>
-    </main>
+    <div>
+      <main className="py-12 bg-zinc-900">
+        <DatasetSearchForm
+          options={options}
+          setOptions={setOptions}
+          groups={groups}
+          orgs={orgs}
+        />
+        <div
+          className="bg-white p-8 mx-auto my-4 rounded-lg"
+          style={{ width: 'min(1100px, 95vw)' }}
+        >
+          <ListOfDatasets
+            options={options}
+            setOptions={setOptions}
+            ckan={ckan}
+          />{' '}
+        </div>
+      </main>
+    </div>
   );
 }

examples/ckan/styles/globals.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "@flowershow/remark-callouts/styles.css";
+@import "@portaljs/remark-callouts/styles.css";
 
 /* mathjax */
 .math-inline > mjx-container > svg {

examples/fivethirtyeight/package.json

@@ -9,10 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@flowershow/core": "^0.4.13",
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.18",
     "@portaljs/components": "^0.1.8",
+    "@portaljs/core": "^1.0.5",
+    "@portaljs/remark-wiki-link": "^1.0.4",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node": "20.1.1",
     "@types/react": "18.2.6",

examples/fivethirtyeight/pages/_app.tsx

@@ -1,7 +1,7 @@
 import '@/styles/globals.css';
 import '@portaljs/components/styles.css';
 import { useEffect } from 'react';
-import { pageview } from '@flowershow/core';
+import { pageview } from '@portaljs/core';
 import Script from 'next/script';
 import Head from 'next/head';
 import { useRouter } from 'next/router';

examples/github-backed-catalog/components/DataRichDocument.tsx

@@ -1,6 +1,6 @@
 import { MDXRemote } from 'next-mdx-remote';
 import dynamic from 'next/dynamic';
-import { Mermaid } from '@flowershow/core';
+import { Mermaid } from '@portaljs/core';
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how

examples/github-backed-catalog/lib/markdown.js

@@ -1,13 +1,13 @@
 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 remarkCallouts from "@portaljs/remark-callouts";
+import remarkEmbed from "@portaljs/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 remarkWikiLink from "@portaljs/remark-wiki-link";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";

examples/github-backed-catalog/lib/mddb.ts

@@ -1,4 +1,4 @@
-import { MarkdownDB } from "@flowershow/markdowndb";
+import { MarkdownDB } from "mddb";
 
 const dbPath = "markdown.db";
 

examples/github-backed-catalog/package-lock.json

@@ -8,16 +8,17 @@
       "name": "my-app",
       "version": "0.1.0",
       "dependencies": {
-        "@flowershow/core": "^0.4.13",
-        "@flowershow/markdowndb": "^0.1.5",
-        "@flowershow/remark-callouts": "^1.0.0",
-        "@flowershow/remark-embed": "^1.0.0",
         "@portaljs/components": "^0.1.6",
+        "@portaljs/core": "^1.0.5",
+        "@portaljs/remark-callouts": "^1.0.5",
+        "@portaljs/remark-embed": "^1.0.4",
+        "@portaljs/remark-wiki-link": "^1.0.4",
         "@types/node": "18.16.0",
         "@types/react": "18.0.38",
         "@types/react-dom": "18.0.11",
         "eslint": "8.39.0",
         "eslint-config-next": "13.3.1",
+        "mddb": "^0.1.9",
         "next": "13.4.3",
         "next-mdx-remote": "^4.4.1",
         "next-seo": "^6.0.0",
@@ -45,19 +46,31 @@
       }
     },
     "node_modules/@algolia/autocomplete-core": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.8.2.tgz",
-      "integrity": "sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.2.tgz",
+      "integrity": "sha512-hkG80c9kx9ClVAEcUJbTd2ziVC713x9Bji9Ty4XJfKXlxlsx3iXsoNhAwfeR4ulzIUg7OE5gez0UU1zVDdG7kg==",
       "dependencies": {
-        "@algolia/autocomplete-shared": "1.8.2"
+        "@algolia/autocomplete-plugin-algolia-insights": "1.9.2",
+        "@algolia/autocomplete-shared": "1.9.2"
+      }
+    },
+    "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.2.tgz",
+      "integrity": "sha512-2LVsf4W66hVHQ3Ua/8k15oPlxjELCztbAkQm/hP42Sw+GLkHAdY1vaVRYziaWq64+Oljfg6FKkZHCdgXH+CGIA==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.2"
+      },
+      "peerDependencies": {
+        "search-insights": ">= 1 < 3"
       }
     },
     "node_modules/@algolia/autocomplete-preset-algolia": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.8.2.tgz",
-      "integrity": "sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.2.tgz",
+      "integrity": "sha512-pqgIm2GNqtCT59Y1ICctIPrYTi34+wNPiNWEclD/yDzp5uDUUsyGe5XrUjCNyQRTKonAlmYxoaEHOn8FWgmBHA==",
       "dependencies": {
-        "@algolia/autocomplete-shared": "1.8.2"
+        "@algolia/autocomplete-shared": "1.9.2"
       },
       "peerDependencies": {
         "@algolia/client-search": ">= 4.9.1 < 6",
@@ -65,123 +78,127 @@
       }
     },
     "node_modules/@algolia/autocomplete-shared": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.8.2.tgz",
-      "integrity": "sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g=="
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.2.tgz",
+      "integrity": "sha512-XxX6YDn+7LG+SmdpXEOnj7fc3TjiVpQ0CbGhjLwrd2tYr6LVY2D4Iiu/iuYJ4shvVDWWnpwArSk0uIWC/8OPUA==",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
     },
     "node_modules/@algolia/cache-browser-local-storage": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.17.1.tgz",
-      "integrity": "sha512-e91Jpu93X3t3mVdQwF3ZDjSFMFIfzSc+I76G4EX8nl9RYXgqcjframoL05VTjcD2YCsI18RIHAWVCBoCXVZnrw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.17.2.tgz",
+      "integrity": "sha512-ZkVN7K/JE+qMQbpR6h3gQOGR6yCJpmucSBCmH5YDxnrYbp2CbrVCu0Nr+FGVoWzMJNznj1waShkfQ9awERulLw==",
       "dependencies": {
-        "@algolia/cache-common": "4.17.1"
+        "@algolia/cache-common": "4.17.2"
       }
     },
     "node_modules/@algolia/cache-common": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.17.1.tgz",
-      "integrity": "sha512-fvi1WT8aSiGAKrcTw8Qg3RYgcwW8GZMHcqEm4AyDBEy72JZlFBSY80cTQ75MslINjCHXLDT+9EN8AGI9WVY7uA=="
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.17.2.tgz",
+      "integrity": "sha512-fojbhYIS8ovfYs6hwZpy1O4mBfVRxNgAaZRqsdVQd54hU4MxYDYFCxagYX28lOBz7btcDHld6BMoWXvjzkx6iQ=="
     },
     "node_modules/@algolia/cache-in-memory": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.17.1.tgz",
-      "integrity": "sha512-NbBt6eBWlsXc5geSpfPRC5dkIB/0Ptthw8r0yM5Z7D3sPlYdnTZSO9y9XWXIptRMwmZe4cM8iBMN8y0tzbcBkA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.17.2.tgz",
+      "integrity": "sha512-UYQcMzPurNi+cPYkuPemTZkjKAjdgAS1hagC5irujKbrYnN4yscK4TkOI5tX+O8/KegtJt3kOK07OIrJ2QDAAw==",
       "dependencies": {
-        "@algolia/cache-common": "4.17.1"
+        "@algolia/cache-common": "4.17.2"
       }
     },
     "node_modules/@algolia/client-account": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.17.1.tgz",
-      "integrity": "sha512-3rL/6ofJvyL+q8TiWM3qoM9tig+SY4gB1Vbsj+UeJPnJm8Khm+7OS+r+mFraqR6pTehYqN8yGYoE7x4diEn4aA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.17.2.tgz",
+      "integrity": "sha512-doSk89pBPDpDyKJSHFADIGa2XSGrBCj3QwPvqtRJXDADpN+OjW+eTR8r4hEs/7X4GGfjfAOAES8JgDx+fZntYw==",
       "dependencies": {
-        "@algolia/client-common": "4.17.1",
-        "@algolia/client-search": "4.17.1",
-        "@algolia/transporter": "4.17.1"
+        "@algolia/client-common": "4.17.2",
+        "@algolia/client-search": "4.17.2",
+        "@algolia/transporter": "4.17.2"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.17.1.tgz",
-      "integrity": "sha512-Bepr2w249vODqeBtM7i++tPmUsQ9B81aupUGbDWmjA/FX+jzQqOdhW8w1CFO5kWViNKTbz2WBIJ9U3x8hOa4bA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.17.2.tgz",
+      "integrity": "sha512-V+DcXbOtD/hKwAR3qGQrtlrJ3q2f9OKfx843q744o4m3xHv5ueCAvGXB1znPsdaUrVDNAImcgEgqwI9x7EJbDw==",
       "dependencies": {
-        "@algolia/client-common": "4.17.1",
-        "@algolia/client-search": "4.17.1",
-        "@algolia/requester-common": "4.17.1",
-        "@algolia/transporter": "4.17.1"
+        "@algolia/client-common": "4.17.2",
+        "@algolia/client-search": "4.17.2",
+        "@algolia/requester-common": "4.17.2",
+        "@algolia/transporter": "4.17.2"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.17.1.tgz",
-      "integrity": "sha512-+r7kg4EgbFnGsDnoGSVNtXZO8xvZ0vzf1WAOV7sqV9PMf1bp6cpJP/3IuPrSk4t5w2KVl+pC8jfTM7HcFlfBEQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.17.2.tgz",
+      "integrity": "sha512-gKBUnjxi0ukJYIJxVREYGt1Dmj1B3RBYbfGWi0dIPp1BC1VvQm+BOuNwsIwmq/x3MPO+sGuK978eKiP3tZDvag==",
       "dependencies": {
-        "@algolia/requester-common": "4.17.1",
-        "@algolia/transporter": "4.17.1"
+        "@algolia/requester-common": "4.17.2",
+        "@algolia/transporter": "4.17.2"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.17.1.tgz",
-      "integrity": "sha512-gJku9DG/THJpfsSlG/az0a3QIn+VVff9kKh8PG8+7ZfxOHS+C+Y5YSeZVsC+c2cfoKLPo3CuHIiJ/p86erR3bA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.17.2.tgz",
+      "integrity": "sha512-wc4UgOWxSYWz5wpuelNmlt895jA9twjZWM2ms17Ws8qCvBHF7OVGdMGgbysPB8790YnfvvDnSsWOv3CEj26Eow==",
       "dependencies": {
-        "@algolia/client-common": "4.17.1",
-        "@algolia/requester-common": "4.17.1",
-        "@algolia/transporter": "4.17.1"
+        "@algolia/client-common": "4.17.2",
+        "@algolia/requester-common": "4.17.2",
+        "@algolia/transporter": "4.17.2"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.17.1.tgz",
-      "integrity": "sha512-Q5YfT5gVkx60PZDQBqp/zH9aUbBdC7HVvxupiHUgnCKqRQsRZjOhLest7AI6FahepuZLBZS62COrO7v+JvKY7w==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.17.2.tgz",
+      "integrity": "sha512-FUjIs+gRe0upJC++uVs4sdxMw15JxfkT86Gr/kqVwi9kcqaZhXntSbW/Fw959bIYXczjmeVQsilYvBWW4YvSZA==",
       "dependencies": {
-        "@algolia/client-common": "4.17.1",
-        "@algolia/requester-common": "4.17.1",
-        "@algolia/transporter": "4.17.1"
+        "@algolia/client-common": "4.17.2",
+        "@algolia/requester-common": "4.17.2",
+        "@algolia/transporter": "4.17.2"
       }
     },
     "node_modules/@algolia/logger-common": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.17.1.tgz",
-      "integrity": "sha512-Us28Ot+fLEmX9M96sa65VZ8EyEEzhYPxfhV9aQyKDjfXbUdJlJxKt6wZpoEg9RAPSdO8IjK9nmuW2P8au3rRsg=="
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.17.2.tgz",
+      "integrity": "sha512-EfXuweUE+1HiSMsQidaDWA5Lv4NnStYIlh7PO5pLkI+sdhbMX0e5AO5nUAMIFM1VkEANes70RA8fzhP6OqCqQQ=="
     },
     "node_modules/@algolia/logger-console": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.17.1.tgz",
-      "integrity": "sha512-iKGQTpOjHiE64W3JIOu6dmDvn+AfYIElI9jf/Nt6umRPmP/JI9rK+OHUoW4pKrBtdG0DPd62ppeNXzSnLxY6/g==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.17.2.tgz",
+      "integrity": "sha512-JuG8HGVlJ+l/UEDK4h2Y8q/IEmRjQz1J0aS9tf6GPNbGYiSvMr1DDdZ+hqV3bb1XE6wU8Ypex56HisWMSpnG0A==",
       "dependencies": {
-        "@algolia/logger-common": "4.17.1"
+        "@algolia/logger-common": "4.17.2"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.17.1.tgz",
-      "integrity": "sha512-W5mGfGDsyfVR+r4pUFrYLGBEM18gs38+GNt5PE5uPULy4uVTSnnVSkJkWeRkmLBk9zEZ/Nld8m4zavK6dtEuYg==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.17.2.tgz",
+      "integrity": "sha512-FKI2lYWwksALfRt2OETFmGb5+P7WVc4py2Ai3H7k8FSfTLwVvs9WVVmtlx6oANQ8RFEK4B85h8DQJTJ29TDfmA==",
       "dependencies": {
-        "@algolia/requester-common": "4.17.1"
+        "@algolia/requester-common": "4.17.2"
       }
     },
     "node_modules/@algolia/requester-common": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.17.1.tgz",
-      "integrity": "sha512-HggXdjvVFQR0I5l7hM5WdHgQ1tqcRWeyXZz8apQ7zPWZhirmY2E9D6LVhDh/UnWQNEm7nBtM+eMFONJ3bZccIQ=="
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.17.2.tgz",
+      "integrity": "sha512-Rfim23ztAhYpE9qm+KCfCRo+YLJCjiiTG+IpDdzUjMpYPhUtirQT0A35YEd/gKn86YNyydxS9w8iRSjwKh+L0A=="
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.17.1.tgz",
-      "integrity": "sha512-NzFWecXT6d0PPsQY9L+/qoK2deF74OLcpvqCH+Vh3mh+QzPsFafcBExdguAjZsAWDn1R6JEeFW7/fo/p0SE57w==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.17.2.tgz",
+      "integrity": "sha512-E0b0kyCDMvUIhQmDNd/mH4fsKJdEEX6PkMKrYJjzm6moo+rP22tqpq4Rfe7DZD8OB6/LsDD3zs3Kvd+L+M5wwQ==",
       "dependencies": {
-        "@algolia/requester-common": "4.17.1"
+        "@algolia/requester-common": "4.17.2"
       }
     },
     "node_modules/@algolia/transporter": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.17.1.tgz",
-      "integrity": "sha512-ZM+qhX47Vh46mWH8/U9ihvy98HdTYpYQDSlqBD7IbiUbbyoCMke+qmdSX2MGhR2FCcXBSxejsJKKVAfbpaLVgg==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.17.2.tgz",
+      "integrity": "sha512-m8pXlz5OnNzjD1rcw+duCN4jG4yEzkJBsvKYMoN22Oq6rQwy1AY5muZ+IQUs4dL+A364CYkRMLRWhvXpCZ1x+g==",
       "dependencies": {
-        "@algolia/cache-common": "4.17.1",
-        "@algolia/logger-common": "4.17.1",
-        "@algolia/requester-common": "4.17.1"
+        "@algolia/cache-common": "4.17.2",
+        "@algolia/logger-common": "4.17.2",
+        "@algolia/requester-common": "4.17.2"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -353,18 +370,18 @@
       "integrity": "sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg=="
     },
     "node_modules/@docsearch/css": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.4.0.tgz",
-      "integrity": "sha512-Hg8Xfma+rFwRi6Y/pfei4FJoQ1hdVURmmNs/XPoMTCPAImU+d5yxj+M+qdLtNjWRpfWziU4dQcqY94xgFBn2dg=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.0.tgz",
+      "integrity": "sha512-Ob5FQLubplcBNihAVtriR59FRBeP8u69F6mu4L4yIr60KfsPc10bOV0DoPErJw0zF9IBN2cNLW9qdmt8zWPxyg=="
     },
     "node_modules/@docsearch/react": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.4.0.tgz",
-      "integrity": "sha512-ufrp5879XYGojgS30ZAp8H4qIMbahRHB9M85VDBP36Xgz5QjYM54i1URKj5e219F7gqTtOivfztFTij6itc0MQ==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.0.tgz",
+      "integrity": "sha512-3IG8mmSMzSHNGy2S1VuPyYU9tFCxFpj5Ov8SYwsSHM4yMvFsaO9oFxXocA5lSenliIELhuOuS5+BdxHa/Qlf2A==",
       "dependencies": {
-        "@algolia/autocomplete-core": "1.8.2",
-        "@algolia/autocomplete-preset-algolia": "1.8.2",
-        "@docsearch/css": "3.4.0",
+        "@algolia/autocomplete-core": "1.9.2",
+        "@algolia/autocomplete-preset-algolia": "1.9.2",
+        "@docsearch/css": "3.5.0",
         "algoliasearch": "^4.0.0"
       },
       "peerDependencies": {
@@ -573,16 +590,16 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
-      "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.0.tgz",
+      "integrity": "sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ=="
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.8.tgz",
-      "integrity": "sha512-XLwhYV90MxiHDq6S0rzFZj00fnDM+A1R9jhSioZoMsa7G0Q0i+Q4x40ajR8FHSdYDE1bgjG45mIWe6jtv9UPmg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.3.0.tgz",
+      "integrity": "sha512-qIAwejE3r6NeA107u4ELDKkH8+VtgRKdXqtSPaKflL2S2V+doyN+Wt9s5oHKXPDo4E8TaVXaHT3+6BbagH31xw==",
       "dependencies": {
-        "@floating-ui/core": "^1.2.6"
+        "@floating-ui/core": "^1.3.0"
       }
     },
     "node_modules/@floating-ui/react-dom": {
@@ -612,103 +629,6 @@
         "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/@flowershow/core": {
-      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/@flowershow/core/-/core-0.4.13.tgz",
-      "integrity": "sha512-UeDb70pjUGgILUXGQKFkytKL9ilwsTIM3jYsNNi55PKHXAaHEQA480Y+m2yNPgC5SzFlGj0FIP/zhH0JfBdNiw==",
-      "dependencies": {
-        "@docsearch/react": "^3.3.3",
-        "@floating-ui/react-dom": "^1.3.0",
-        "@floating-ui/react-dom-interactions": "^0.13.3",
-        "@giscus/react": "^2.2.6",
-        "@headlessui/react": "^1.7.12",
-        "clsx": "^1.2.1",
-        "disqus-react": "^1.1.5",
-        "framer-motion": "^10.0.1",
-        "kbar": "0.1.0-beta.40",
-        "mdx-mermaid": "2.0.0-rc7",
-        "mermaid": "10.0.1-rc.2",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "next": "^13.2.1",
-        "next-themes": "^0.2.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "node_modules/@flowershow/core/node_modules/dagre-d3-es": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.8.tgz",
-      "integrity": "sha512-eykdoYQ4FwCJinEYS0gPL2f2w+BPbSLvnQSJ3Ye1vAoPjdkq6xIMKBv+UkICd3qZE26wBKIn3p+6n0QC7R1LyA==",
-      "dependencies": {
-        "d3": "^7.8.2",
-        "lodash-es": "^4.17.21"
-      }
-    },
-    "node_modules/@flowershow/core/node_modules/dompurify": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
-      "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
-    },
-    "node_modules/@flowershow/core/node_modules/mermaid": {
-      "version": "10.0.1-rc.2",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.0.1-rc.2.tgz",
-      "integrity": "sha512-THnhraO9F6pQZY9Nv91QuWv35QdmZy/UW2FpadRN/1cLuqCyihNKIEOxuVLEPrgtFawt2nL+BpUoJKC4div3UQ==",
-      "dependencies": {
-        "@braintree/sanitize-url": "^6.0.0",
-        "cytoscape": "^3.23.0",
-        "cytoscape-cose-bilkent": "^4.1.0",
-        "cytoscape-fcose": "^2.1.0",
-        "d3": "^7.4.0",
-        "dagre-d3-es": "7.0.8",
-        "dompurify": "2.4.3",
-        "elkjs": "^0.8.2",
-        "khroma": "^2.0.0",
-        "lodash-es": "^4.17.21",
-        "moment-mini": "^2.29.4",
-        "non-layered-tidy-tree-layout": "^2.0.2",
-        "stylis": "^4.1.2",
-        "ts-dedent": "^2.2.0",
-        "uuid": "^9.0.0",
-        "web-worker": "^1.2.0"
-      }
-    },
-    "node_modules/@flowershow/markdowndb": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@flowershow/markdowndb/-/markdowndb-0.1.5.tgz",
-      "integrity": "sha512-AfmkvgitNb7z150bTcCn/1lqwUhPRD3IhCbIwYxE5IXtL57+WwewJUNOU3SOKXNWg6eDVlfEq0H2GICSLAC4bw==",
-      "dependencies": {
-        "@flowershow/remark-wiki-link": "^1.1.2",
-        "gray-matter": "^4.0.3",
-        "knex": "^2.4.2",
-        "remark-gfm": "^3.0.1",
-        "remark-parse": "^10.0.1",
-        "sqlite3": "^5.1.6",
-        "unist-util-select": "^4.0.3"
-      },
-      "bin": {
-        "mddb": "src/bin/index.js"
-      }
-    },
-    "node_modules/@flowershow/remark-callouts": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@flowershow/remark-callouts/-/remark-callouts-1.0.0.tgz",
-      "integrity": "sha512-zzHDpw1bswTTf+cbhNh2Bogf4ghpIcxAypFxYZxZ/afeGdN3NNSQwnamL8StY9uu6aQ/miq4Egbuof3xk2ksWA==",
-      "dependencies": {
-        "mdast-util-from-markdown": "^1.2.0",
-        "svg-parser": "^2.0.4",
-        "unist-util-visit": "^4.1.0"
-      }
-    },
-    "node_modules/@flowershow/remark-embed": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@flowershow/remark-embed/-/remark-embed-1.0.0.tgz",
-      "integrity": "sha512-tADovIrhbmNWJj72C+pgT921+BuApmO6xxKU3HlWciRHkD6S4KqsikLjsopalK+VJmqluoHhhST0kf0S6xUKIA==",
-      "dependencies": {
-        "unist-util-visit": "^4.1.1"
-      }
-    },
     "node_modules/@flowershow/remark-wiki-link": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@flowershow/remark-wiki-link/-/remark-wiki-link-1.2.0.tgz",
@@ -1701,9 +1621,9 @@
       }
     },
     "node_modules/@headlessui/react": {
-      "version": "1.7.14",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz",
-      "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==",
+      "version": "1.7.15",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.15.tgz",
+      "integrity": "sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==",
       "dependencies": {
         "client-only": "^0.0.1"
       },
@@ -1807,9 +1727,9 @@
       "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
     },
     "node_modules/@lit/reactive-element": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz",
-      "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.2.tgz",
+      "integrity": "sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA==",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.0.0"
       }
@@ -2444,6 +2364,60 @@
         "react-dom": "^18.2.0"
       }
     },
+    "node_modules/@portaljs/core": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@portaljs/core/-/core-1.0.5.tgz",
+      "integrity": "sha512-HJ3eYjyKL7wrPlBwcEHzNd/SW2PwLu49nAsRTz8r7tgyRINDVkHTLVjZ5V6jCSYtuX7LSlxk0WMIZ9aDOocXDA==",
+      "dependencies": {
+        "@docsearch/react": "^3.3.3",
+        "@floating-ui/react-dom": "^1.3.0",
+        "@floating-ui/react-dom-interactions": "^0.13.3",
+        "@giscus/react": "^2.2.6",
+        "@headlessui/react": "^1.7.12",
+        "clsx": "^1.2.1",
+        "core-js": "^3.30.2",
+        "disqus-react": "^1.1.5",
+        "framer-motion": "^10.0.1",
+        "kbar": "0.1.0-beta.40",
+        "mermaid": "^10.2.2",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "mdx-mermaid": "2.0.0-rc7",
+        "next": "^13.2.1",
+        "next-themes": "^0.2.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/@portaljs/remark-callouts": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@portaljs/remark-callouts/-/remark-callouts-1.0.5.tgz",
+      "integrity": "sha512-KMjr44isEvQzpNBBCP3s5/3TCmI/ce4xRvbOk6h9xicVZqE6BPTH9rhfOGvop9cchyAWgj9gmJXhQk+Bd+t5bg==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^1.2.0",
+        "svg-parser": "^2.0.4",
+        "unist-util-visit": "^4.1.0"
+      }
+    },
+    "node_modules/@portaljs/remark-embed": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@portaljs/remark-embed/-/remark-embed-1.0.4.tgz",
+      "integrity": "sha512-BvRMC1iBd5M93u9WS0mvunHoBMWgQQTCR7RdqSS9sRav5pqquiNG7il12Yza4vFpFBXwLkzEG0NwIVXzzutT8w==",
+      "dependencies": {
+        "unist-util-visit": "^4.1.1"
+      }
+    },
+    "node_modules/@portaljs/remark-wiki-link": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@portaljs/remark-wiki-link/-/remark-wiki-link-1.0.4.tgz",
+      "integrity": "sha512-cp6vlssDAPawcBI0vUPRpcPdORql3RbK1Q+t1LuRvMQ+yiRb+9DnSPBUviDXKqwsBMOOXP/ePAdYohaeXGt0lQ==",
+      "dependencies": {
+        "mdast-util-to-markdown": "^1.5.0",
+        "mdast-util-wiki-link": "^0.0.2",
+        "micromark-util-symbol": "^1.0.1"
+      }
+    },
     "node_modules/@primer/octicons-react": {
       "version": "12.1.0",
       "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-12.1.0.tgz",
@@ -2474,27 +2448,43 @@
       "integrity": "sha512-Z8R0kdAZui8eYTuGY5oQUA0SU4jYq43m4bZW6Dw0B35fUp+U3r+pCrkj0EADJAPv1UaKNskSv/lrfRdC7719Rg=="
     },
     "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
-      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       },
       "peerDependencies": {
+        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/react-portal": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.2.tgz",
-      "integrity": "sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+      "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.2"
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/react-presence": {
@@ -2517,28 +2507,44 @@
       }
     },
     "node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
-      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.1"
+        "@radix-ui/react-slot": "1.0.2"
       },
       "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
-      "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0"
+        "@radix-ui/react-compose-refs": "1.0.1"
       },
       "peerDependencies": {
+        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/rect": {
@@ -2862,6 +2868,7 @@
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
       "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -3078,24 +3085,24 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.17.1.tgz",
-      "integrity": "sha512-4GDQ1RhP2qUR3x8PevFRbEdqZqIARNViZYjgTJmA1T7wRNtFA3W4Aqc/RsODqa1J8IO/QDla5x4tWuUS8NV8wA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.17.2.tgz",
+      "integrity": "sha512-VFu43JJNYIW74awp7oeQcQsPcxOhd8psqBDTfyNO2Zt6L1NqnNMTVnaIdQ+8dtKqUDBqQZp0szPxECvX8CK2Fg==",
       "dependencies": {
-        "@algolia/cache-browser-local-storage": "4.17.1",
-        "@algolia/cache-common": "4.17.1",
-        "@algolia/cache-in-memory": "4.17.1",
-        "@algolia/client-account": "4.17.1",
-        "@algolia/client-analytics": "4.17.1",
-        "@algolia/client-common": "4.17.1",
-        "@algolia/client-personalization": "4.17.1",
-        "@algolia/client-search": "4.17.1",
-        "@algolia/logger-common": "4.17.1",
-        "@algolia/logger-console": "4.17.1",
-        "@algolia/requester-browser-xhr": "4.17.1",
-        "@algolia/requester-common": "4.17.1",
-        "@algolia/requester-node-http": "4.17.1",
-        "@algolia/transporter": "4.17.1"
+        "@algolia/cache-browser-local-storage": "4.17.2",
+        "@algolia/cache-common": "4.17.2",
+        "@algolia/cache-in-memory": "4.17.2",
+        "@algolia/client-account": "4.17.2",
+        "@algolia/client-analytics": "4.17.2",
+        "@algolia/client-common": "4.17.2",
+        "@algolia/client-personalization": "4.17.2",
+        "@algolia/client-search": "4.17.2",
+        "@algolia/logger-common": "4.17.2",
+        "@algolia/logger-console": "4.17.2",
+        "@algolia/requester-browser-xhr": "4.17.2",
+        "@algolia/requester-common": "4.17.2",
+        "@algolia/requester-node-http": "4.17.2",
+        "@algolia/transporter": "4.17.2"
       }
     },
     "node_modules/ansi-regex": {
@@ -3402,7 +3409,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/before-after-hook": {
       "version": "2.2.3",
@@ -3430,6 +3438,7 @@
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -3532,6 +3541,7 @@
         }
       ],
       "optional": true,
+      "peer": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.1.13"
@@ -3542,6 +3552,7 @@
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
       "optional": true,
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -3905,6 +3916,16 @@
         "toggle-selection": "^1.0.6"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.0.tgz",
+      "integrity": "sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cose-base": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
@@ -3933,6 +3954,7 @@
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
       "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "node-fetch": "2.6.7"
       }
@@ -3942,6 +3964,7 @@
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
       "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -4080,9 +4103,9 @@
       "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="
     },
     "node_modules/d3": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz",
-      "integrity": "sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==",
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
+      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
       "dependencies": {
         "d3-array": "3",
         "d3-axis": "3",
@@ -4489,7 +4512,6 @@
       "version": "7.0.10",
       "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
       "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
-      "peer": true,
       "dependencies": {
         "d3": "^7.8.2",
         "lodash-es": "^4.17.21"
@@ -4516,10 +4538,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.7",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
-      "peer": true
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.8.tgz",
+      "integrity": "sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -4685,7 +4706,8 @@
       "version": "0.0.1045489",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1045489.tgz",
       "integrity": "sha512-D+PTmWulkuQW4D1NTiCRCFxF7pQPn0hgp4YyX4wAQ6xYXKOadSWPR3ENGDQ47MW/Ewc9v2rpC/UEEGahgBYpSQ==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/didyoumean": {
       "version": "1.2.2",
@@ -4739,8 +4761,7 @@
     "node_modules/dompurify": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
-      "integrity": "sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==",
-      "peer": true
+      "integrity": "sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ=="
     },
     "node_modules/downshift": {
       "version": "6.1.12",
@@ -4807,6 +4828,7 @@
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
       "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "once": "^1.4.0"
       }
@@ -5521,6 +5543,7 @@
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
       "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "debug": "^4.1.1",
         "get-stream": "^5.1.0",
@@ -5615,6 +5638,7 @@
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
       "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "pend": "~1.2.0"
       }
@@ -5749,7 +5773,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/fs-extra": {
       "version": "10.1.0",
@@ -5884,6 +5909,7 @@
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "pump": "^3.0.0"
       },
@@ -6456,7 +6482,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/ignore": {
       "version": "5.2.4",
@@ -7350,9 +7377,9 @@
       }
     },
     "node_modules/lit": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.4.tgz",
-      "integrity": "sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==",
+      "version": "2.7.5",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.5.tgz",
+      "integrity": "sha512-i/cH7Ye6nBDUASMnfwcictBnsTN91+aBjXoTHF2xARghXScKxpD4F4WYI+VLXg9lqbMinDfvoI7VnZXjyHgdfQ==",
       "dependencies": {
         "@lit/reactive-element": "^1.6.0",
         "lit-element": "^3.3.0",
@@ -7993,6 +8020,23 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/mddb": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/mddb/-/mddb-0.1.9.tgz",
+      "integrity": "sha512-d3B5zArnWDqKN1Blq6hGtfr3HTHUKK/GS95b4OZqcyDPvUP4JnYuWHDjyoJ0tSgDKH6ybB6WdnnI3tcHQvRTyw==",
+      "dependencies": {
+        "@flowershow/remark-wiki-link": "^1.1.2",
+        "gray-matter": "^4.0.3",
+        "knex": "^2.4.2",
+        "remark-gfm": "^3.0.1",
+        "remark-parse": "^10.0.1",
+        "sqlite3": "^5.1.6",
+        "unist-util-select": "^4.0.3"
+      },
+      "bin": {
+        "mddb": "dist/src/bin/index.js"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -8002,6 +8046,7 @@
       "version": "2.0.0-rc7",
       "resolved": "https://registry.npmjs.org/mdx-mermaid/-/mdx-mermaid-2.0.0-rc7.tgz",
       "integrity": "sha512-AMy3138EsvcGwE4cGqUVytj4mLpJ3TJ2nek82+67Qi4GSOXoelAqmQudHSk26IsP091c3qX4d/4wi9CqLwFl9Q==",
+      "peer": true,
       "optionalDependencies": {
         "estree-util-to-js": "^1.1.0",
         "estree-util-visit": "^1.2.0",
@@ -8032,10 +8077,9 @@
       }
     },
     "node_modules/mermaid": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.2.0.tgz",
-      "integrity": "sha512-mYKXlH9ngKdMsJ87VYMdlDZXS+MXDAGKPf3XzDf2vvAPnmRoFm7GFebemOAOWYI1bWSECDyoWTGwesWe6mW1Cw==",
-      "peer": true,
+      "version": "10.2.3",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.2.3.tgz",
+      "integrity": "sha512-cMVE5s9PlQvOwfORkyVpr5beMsLdInrycAosdr+tpZ0WFjG4RJ/bUHST7aTgHNJbujHkdBRAm+N50P3puQOfPw==",
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.2",
         "cytoscape": "^3.23.0",
@@ -8899,7 +8943,8 @@
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/modern-normalize": {
       "version": "1.1.0",
@@ -8912,11 +8957,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/moment-mini": {
-      "version": "2.29.4",
-      "resolved": "https://registry.npmjs.org/moment-mini/-/moment-mini-2.29.4.tgz",
-      "integrity": "sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg=="
-    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -9641,7 +9681,8 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/periscopic": {
       "version": "3.1.0",
@@ -9850,6 +9891,7 @@
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -9896,13 +9938,15 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
       "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -9923,6 +9967,7 @@
       "deprecated": "< 19.4.0 is no longer supported",
       "hasInstallScript": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "https-proxy-agent": "5.0.1",
         "progress": "2.0.3",
@@ -9938,6 +9983,7 @@
       "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-18.2.1.tgz",
       "integrity": "sha512-MRtTAZfQTluz3U2oU/X2VqVWPcR1+94nbA2V6ZrSZRVEwLqZ8eclZ551qGFQD/vD2PYqHJwWOW/fpC721uznVw==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "cross-fetch": "3.1.5",
         "debug": "4.3.4",
@@ -10804,6 +10850,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/search-insights": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.6.0.tgz",
+      "integrity": "sha512-vU2/fJ+h/Mkm/DJOe+EaM5cafJv/1rRTZpGJTuFPf/Q5LjzgMDsqPdSaZsAe+GAWHHsfsu+rQSAn6c8IGtBEVw==",
+      "peer": true,
+      "engines": {
+        "node": ">=8.16.0"
+      }
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -11403,6 +11458,7 @@
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
       "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "chownr": "^1.1.1",
         "mkdirp-classic": "^0.5.2",
@@ -11414,13 +11470,15 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/tar-stream": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
       "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "bl": "^4.0.3",
         "end-of-stream": "^1.4.1",
@@ -11484,7 +11542,8 @@
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "optional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/tildify": {
       "version": "2.0.0",
@@ -11867,6 +11926,7 @@
       "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
       "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "buffer": "^5.2.1",
         "through": "^2.3.8"
@@ -12880,6 +12940,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz",
       "integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==",
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -12955,6 +13016,7 @@
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
       "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"

examples/github-backed-catalog/package.json

@@ -10,16 +10,17 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
-    "@flowershow/core": "^0.4.13",
-    "@flowershow/markdowndb": "^0.1.5",
-    "@flowershow/remark-callouts": "^1.0.0",
-    "@flowershow/remark-embed": "^1.0.0",
     "@portaljs/components": "^0.1.6",
+    "@portaljs/core": "^1.0.5",
+    "@portaljs/remark-callouts": "^1.0.5",
+    "@portaljs/remark-embed": "^1.0.4",
+    "@portaljs/remark-wiki-link": "^1.0.4",
     "@types/node": "18.16.0",
     "@types/react": "18.0.38",
     "@types/react-dom": "18.0.11",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
+    "mddb": "^0.1.9",
     "next": "13.4.3",
     "next-mdx-remote": "^4.4.1",
     "next-seo": "^6.0.0",

examples/github-backed-catalog/pages/styles.css

@@ -79,7 +79,7 @@ pre {
   width: 100%;
 }
 
-@import "@flowershow/remark-callouts/styles.css";
+@import "@portaljs/remark-callouts/styles.css";
 
 /* mathjax */
 .math-inline > mjx-container > svg {

examples/learn/components/DataRichDocument.tsx

@@ -1,6 +1,6 @@
 import { MDXRemote } from 'next-mdx-remote';
 import dynamic from 'next/dynamic';
-import { Mermaid } from '@flowershow/core';
+import { Mermaid } from '@portaljs/core';
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how

examples/learn/lib/markdown.js

@@ -1,13 +1,13 @@
 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 remarkCallouts from "@portaljs/remark-callouts";
+import remarkEmbed from "@portaljs/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 remarkWikiLink from "@portaljs/remark-wiki-link";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";

examples/learn/lib/mddb.ts

@@ -1,4 +1,4 @@
-import { MarkdownDB } from "@flowershow/markdowndb";
+import { MarkdownDB } from "mddb";
 
 const dbPath = "markdown.db";
 

examples/learn/next.config.js

@@ -0,0 +1,5 @@
+const nextConfig = {
+  swcMinify: false
+}
+
+module.exports = nextConfig

examples/learn/package.json

@@ -12,17 +12,28 @@
     "mddb": "mddb ./content"
   },
   "dependencies": {
-    "@flowershow/core": "^0.4.10",
-    "@flowershow/markdowndb": "^0.1.1",
-    "@flowershow/remark-callouts": "^1.0.0",
-    "@flowershow/remark-embed": "^1.0.0",
-    "@flowershow/remark-wiki-link": "^1.1.2",
+    "@githubocto/flat-ui": "^0.14.1",
+    "@heroicons/react": "^2.0.17",
     "@opentelemetry/api": "^1.4.0",
     "@portaljs/components": "^0.1.8",
+    "@portaljs/core": "^1.0.5",
+    "@portaljs/remark-callouts": "^1.0.5",
+    "@portaljs/remark-embed": "^1.0.4",
+    "@portaljs/remark-wiki-link": "^1.0.4",
+    "@tanstack/react-table": "^8.8.5",
+    "flexsearch": "0.7.21",
     "gray-matter": "^4.0.3",
     "hastscript": "^7.2.0",
+    "mddb": "^0.1.9",
     "mdx-mermaid": "2.0.0-rc7",
     "next": "13.2.1",
+    "next-mdx-remote": "^4.4.1",
+    "papaparse": "^5.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-query": "^3.39.3",
+    "react-vega": "^7.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.3",
     "rehype-prism-plus": "^1.5.1",
@@ -32,17 +43,6 @@
     "remark-smartypants": "^2.0.0",
     "remark-toc": "^8.0.1",
     "typescript": "5.0.4",
-    "@githubocto/flat-ui": "^0.14.1",
-    "@heroicons/react": "^2.0.17",
-    "@tanstack/react-table": "^8.8.5",
-    "flexsearch": "0.7.21",
-    "next-mdx-remote": "^4.4.1",
-    "papaparse": "^5.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.9",
-    "react-query": "^3.39.3",
-    "react-vega": "^7.6.0",
     "vega": "5.25.0",
     "vega-lite": "5.1.0"
   },

examples/learn/styles/globals.css

@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import "@flowershow/remark-callouts/styles.css";
+@import "@portaljs/remark-callouts/styles.css";
 
 .w-5 {
   width: 1.25rem

examples/openspending/components/DataRichDocument.tsx

@@ -1,6 +1,6 @@
 import { MDXRemote } from 'next-mdx-remote';
 import dynamic from 'next/dynamic';
-import { Mermaid } from '@flowershow/core';
+import { Mermaid } from '@portaljs/core';
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how

examples/openspending/content/contributing.md

@@ -16,6 +16,8 @@ We welcome contributions from anyone who is interested in improving OpenSpending
 
 The main platform for communication and collaboration for OpenSpending is Github, if you want to interact with us you can o so by submitting an issue.
 
+**Repo for issues:** [https://github.com/os-data/registry/issues](https://github.com/os-data/registry/issues)
+
 If you want to submit a dataset for evaluation and inclusion in OpenSpending, you will need to create an issue on Github using this template:
 
 ```markdown

examples/openspending/content/stories/moers-anomaly-2016.mdx

@@ -0,0 +1,284 @@
+---
+title: An Exploration of Moers' 2016 Budget Anomaly
+date: 06/13/2023
+---
+
+_Note: The currency in this post has been converted to USD using an average exchange rate of 1 EUR = 1.20 USD.
+Additionally, the text values for account groups have been loosely translated to English. You can find the
+original dataset here: [Moers budget dataset](https://www.openspending.org/@os-data/moers-all)_
+
+In the fiscal landscape of Moers, Germany, 2016 stands out as an anomaly. An examination of the budget allocations
+for this particular year shows a significant surge in spending across various areas. After this anomalous
+spike, spending patterns then seemed to resume their previous trajectory of a slow, steady climb in the
+following years. While it's tempting to dismiss this as an irregularity, it's worth exploring the potential
+underlying causes of this fiscal fluctuation.
+
+<VegaLite
+  spec={{
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    title: 'Spending by Account Group',
+    description: 'Spending by Account Group',
+    data: {
+      url: 'https://storage.openspending.org/moers-all/moers-sums.csv',
+    },
+    transform: [
+      {
+        calculate: "format(datum.amount / 1e6 * 1.20, '$,.1f') + 'M'",
+        as: 'formattedAmountMillion',
+      },
+      { calculate: 'datum.amount / 1e9 * 1.20', as: 'amountBillion' },
+    ],
+    mark: 'bar',
+    height: 400,
+    width: 350,
+    encoding: {
+      x: {
+        field: 'date',
+        type: 'temporal',
+        timeUnit: 'utcyear',
+        title: 'Year',
+      },
+      y: {
+        field: 'amount',
+        type: 'quantitative',
+        title: 'Spending (USD in millions)',
+        axis: {
+          format: '~s',
+          labelExpr: "format(datum.value / 1e6 * 1.20, '$,.0f') + 'M'",
+        },
+      },
+      color: {
+        field: 'account group',
+        type: 'nominal',
+        title: 'Account Group',
+        scale: {
+          domain: [
+            'Activated Own Work',
+            'Balance Expenses',
+            'Care Expenses',
+            'Donations And General Levies',
+            'Expenses For Material And Services',
+            'Extraordinary Expenses',
+            'Extraordinary Income',
+            'Other Ordinary Expenses',
+            'Other Ordinary Income',
+            'Other Transfer Income',
+            'Personnel Expenses',
+            'Private Law Performance Fees',
+            'Public-Service Performance Fees',
+            'Taxes And Similar Charges',
+            'Transfer Expenses',
+          ],
+          range: [
+            '#EF5350',
+            '#F06292',
+            '#BA68C8',
+            '#9575CD',
+            '#7986CB',
+            '#64B5F6',
+            '#4FC3F7',
+            '#4DD0E1',
+            '#4DB6AC',
+            '#81C784',
+            '#AED581',
+            '#DCE775',
+            '#FFF176',
+            '#FFD54F',
+            '#FFB74D',
+          ],
+        },
+      },
+      tooltip: [
+        { field: 'account group', type: 'nominal', title: 'Account Group' },
+        {
+          field: 'formattedAmountMillion',
+          type: 'ordinal',
+          title: 'Spending (USD)',
+        },
+        { field: 'date', type: 'temporal', title: 'Year', format: '%Y' }
+      ],
+    },
+  }}
+/>
+
+## Why?
+
+One possible explanation could be the global refugee crisis that was unfolding around this time, particularly
+in Germany. While we can't assert this connection definitively due to the lack of specific data, it's an angle
+worth examining to better understand the budget anomaly of 2016.
+
+For instance, the "Donations and General Levies" account group saw a distinct increase in 2016. This could be
+reflective of Moers' attempts to provide immediate support to incoming refugees, although we can only speculate
+at this point.
+
+<VegaLite
+  spec={{
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    title: 'Donations and General Levies',
+    description: 'Donations and General Levies',
+    data: {
+      url: 'https://storage.openspending.org/moers-all/moers-sums.csv',
+    },
+    transform: [
+      { filter: "datum['account group']==='Donations And General Levies'" },
+      {
+        calculate: "format(datum.amount / 1e6 * 1.20, '$,.1f') + 'M'",
+        as: 'formattedAmountMillion',
+      },
+    ],
+    mark: {
+      type: 'area',
+      line: true,
+      point: true,
+    },
+    width: 400,
+    height: 400,
+    encoding: {
+      x: {
+        field: 'date',
+        type: 'temporal',
+        timeUnit: 'utcyear',
+        title: 'Year',
+      },
+      y: {
+        field: 'amount',
+        type: 'quantitative',
+        title: 'Spending (USD in millions)',
+        axis: {
+          format: '~s',
+          labelExpr: "format(datum.value / 1e6 * 1.20, '$,.0f') + 'M'",
+        },
+      },
+      color: {
+        title: 'Account Group',
+        field: 'account group',
+        scale: {
+          domain: ['Donations And General Levies'],
+          range: ['#9575CD'],
+        },
+      },
+      tooltip: [
+        { field: 'account group', type: 'nominal', title: 'Area' },
+        {
+          field: 'formattedAmountMillion',
+          type: 'ordinal',
+          title: 'Spending (USD in millions)',
+        },
+        { field: 'date', type: 'temporal', title: 'Year', format: '%Y' }
+      ],
+    },
+  }}
+/>
+
+Similarly, "Expenses for Material and Services" also experienced an upswing. This could suggest
+that the town was working to establish necessary infrastructure and resources for the newcomers. It's plausible
+that procurement of essential supplies and services to aid the refugees was a factor contributing to this budget
+increase.
+
+The rise in "Personnel Expenses" may suggest an expansion of the town's workforce during this period. Additional
+staffing in areas like interpretation, social work, healthcare, and administration would be necessary to handle
+the influx of refugees.
+
+The two account groups that experienced the most substantial raw monetary increases were "Taxes and Similar Charges"
+and "Transfer Expenses". Both these categories more than doubled in size during the year, a significant surge
+especially considering their already high baseline spending. This could be for a variety of reasons.
+
+For "Taxes and Similar Charges", the hike could indicate the town adjusting local taxation to meet the additional
+expenditures, or it could reflect an increase in income from other sources falling under this group. The influx
+of refugees and the resulting uptick in economic activity may have also led to a rise in the collection of certain
+local taxes or fees.
+
+Concurrently, the "Transfer Expenses" spike could be an indication of heightened social welfare payments, costs
+associated with refugee integration, and funds transferred to other entities managing the crisis. These financial
+escalations are a testament to the extensive and multifaceted financial impact the refugee crisis had on the town's
+budget.
+
+<VegaLite
+  spec={{
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    title: 'Largest Spending by Account Group',
+    description: 'Largest Spending by Account Group',
+    data: {
+      url: 'https://storage.openspending.org/moers-all/moers-sums.csv',
+    },
+    transform: [
+      {
+        filter: {
+          field: 'account group',
+          oneOf: [
+            'Donations And General Levies',
+            'Expenses For Material And Services',
+            'Personnel Expenses',
+            'Taxes And Similar Charges',
+            'Transfer Expenses'
+          ]
+        }
+      },
+      {
+        calculate: "format(datum.amount / 1e6 * 1.20, '$,.1f') + 'M'",
+        as: 'formattedAmountMillion',
+      }
+    ],
+    mark: {
+      type: 'line',
+      point: true,
+    },
+    width: 400,
+    height: 400,
+    encoding: {
+      x: {
+        field: 'date',
+        type: 'temporal',
+        timeUnit: 'utcyear',
+        title: 'Year'
+      },
+      y: {
+        field: 'amount',
+        type: 'quantitative',
+        title: 'Spending (USD in millions)',
+        axis: {
+          format: '~s',
+          labelExpr: "format(datum.value / 1e6 * 1.20, '$,.0f') + 'M'",
+        }
+      },
+      color: {
+        field: 'account group',
+        type: 'nominal',
+        title: 'Account Group',
+        scale: {
+          domain: [
+            'Donations And General Levies',
+            'Expenses For Material And Services',
+            'Personnel Expenses',
+            'Taxes And Similar Charges',
+            'Transfer Expenses'
+          ],
+          range: [
+            '#9575CD',
+            '#7986CB',
+            '#AED581',
+            '#FFD54F',
+            '#FFB74D'
+          ],
+        },
+      },
+      tooltip: [
+        { field: 'account group', type: 'nominal', title: 'Area' },
+        {
+          field: 'formattedAmountMillion',
+          type: 'ordinal',
+          title: 'Spending (USD in millions)',
+        },
+        { field: 'date', type: 'temporal', title: 'Year', format: '%Y' }
+      ],
+    },
+  }}
+/>
+
+By 2017, these budget items returned to their pre-2016 levels, which may suggest that the town had successfully
+adapted to the new circumstances, perhaps by implementing more cost-effective strategies.
+
+While this exploration offers a compelling perspective, it's important to note that these are theories derived
+from the available budget data and the concurrent global events of the time. It underscores how global crises,
+like the refugee crisis, may potentially impact not just national budgets, but also the fiscal management of
+smaller towns like Moers.

examples/openspending/content/stories/where-does-berlin-spends-its-erdf-benefits.mdx

@@ -0,0 +1,105 @@
+---
+title: Where does Berlin spend its ERDF benefits?
+date: 2023-06-12
+authors: ['João Demenech']
+---
+
+In this data-driven story, let's analyze how the city of Berlin benefited from ERDF from 2008 to 2015.
+
+## What is ERDF?
+
+If you're not familiar with ERDF, it's the European Regional Development Fund. According to its [official website](https://ec.europa.eu/regional_policy/funding/erdf_en):
+
+> The European Regional Development Fund (ERDF) aims to strengthen economic, social, and territorial cohesion in the European Union by correcting imbalances between its regions. In 2021-2027 it will enable investments in a smarter, greener, more connected, and more social Europe that is closer to its citizens.
+
+## A look into the data
+
+The dataset that will be used is this one: https://www.openspending.org/@os-data/de3-berlin-2007-2013-erdf (if you're looking for ERDF data for other cities/regions, take a look at the data catalog).
+
+Here's a sample of this data:
+
+<FlatUiTable url="https://storage.openspending.org/de3-berlin-2007-2013-erdf/concat.csv" />
+
+Note that we will only use the rows where the "amount_kind" column is set to "total_amount".
+
+## How has the total amount changed over the years?
+
+The line chart below shows the sum of the total amount of EUR that was approved for each year:
+
+<LineChart data="https://storage.openspending.org/de3-berlin-2007-2013-erdf/berlin-erdf-2007-2013-total-amount-apporved-per-year.csv" xAxis="approval_year" yAxis="total_amount" />
+
+As you can see, the total increased significantly from 2007 to 2010, later fluctuating between €7 million and €9 million per year.
+
+## Who were the top beneficiaries for each year?
+
+Now, let's try to understand who were the top beneficiaries each year. To do that, let's filter the data to show only the two top beneficiaries for each year:
+
+<FlatUiTable url="https://storage.openspending.org/de3-berlin-2007-2013-erdf/berlin-erdf-2007-2013-total-amount-approved-per-year-per-beneficiary--top-2.csv" />
+
+Since there are many years in this range, let's split this analysis into two ranges: one for 2008-2010 and the other for 2011-2015.
+
+<VegaLite spec={{
+  "data": { "url": "https://storage.openspending.org/de3-berlin-2007-2013-erdf/berlin-erdf-2007-2013-total-amount-approved-per-year-per-beneficiary--top-2.csv"},
+  "transform": [
+    {"filter": "datum.approval_year <= 2010"},
+  ],
+  "title": "Total Amount (EUR) x Approval Year (2007-2010)",
+  "width": "container",
+  "mark": {"type": "bar", "tooltip": true },
+  "encoding": {
+    "y": {
+      "aggregate": "sum",
+      "field": "total_amount",
+      "title": "Total Amount (EUR)",
+      "stack": null
+    },
+    "x": {"field": "approval_year", "title": "Approval Year"},
+    "color": {
+      "type": "nominal",
+      "field": "beneficiary_name",
+    }
+  }
+}} />
+
+<VegaLite spec={{
+  "title": "Total Amount (EUR) x Approval Year (2011-2013)",
+  "data": { "url": "https://storage.openspending.org/de3-berlin-2007-2013-erdf/berlin-erdf-2007-2013-total-amount-approved-per-year-per-beneficiary--top-2.csv"},
+  "transform": [
+    {"filter": "datum.approval_year > 2010"},
+  ],
+  "width": "container",
+  "mark": {"type": "bar", "tooltip": true },
+  "encoding": {
+    "y": {
+      "aggregate": "sum",
+      "field": "total_amount",
+      "title": "Total Amount (EUR)",
+      "stack": null
+    },
+    "x": {"field": "approval_year", "title": "Approval Year"},
+    "color": {
+      "type": "nominal",
+      "field": "beneficiary_name",
+    }
+  }
+}} />
+
+It's easy to spot some repeating colors. Now, let's see to which sector the top beneficiaries belong to:
+
+<Table csv="
+Beneficiary,Sector
+D & B,Education
+Stiftung Sozialpädagogisches Institut Berlin (SPI),Education/Social work
+IB e.V.,Social work
+gsub-Projektegesellschaft mbH,Consulting
+BBW Berufsvorbereitungs-u.Ausbildungsgesellschaft,Education
+Arbeit und Bildung e.V.,Consulting
+Gesellschaft für soziale Unternehmensberatung  GSUB,Consulting
+SPI Consult GmbH,Consulting
+Beuth Hochschule für Technik Berlin,Education
+TU Berlin, Fakultät II,Education
+Hochschule für Technik und Wirtschaft Berlin,Education
+WeTeK gGmbH,Education
+" />
+
+Based on the sectors of the top beneficiaries, it's clear that education and professional training have been a major focus of ERDF investment in Berlin during that period of time.

examples/openspending/lib/computeFields.ts

@@ -2,7 +2,7 @@
 import { remark } from "remark";
 import stripMarkdown, { Options } from "strip-markdown";
 
-import { defaultConfig as siteConfig } from '@flowershow/core'
+import { defaultConfig as siteConfig } from '@portaljs/core'
 
 // TODO return type
 const sluggify = (urlPath: string) => {

examples/openspending/lib/markdown.js

@@ -1,13 +1,13 @@
 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 remarkCallouts from "@portaljs/remark-callouts";
+import remarkEmbed from "@portaljs/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 remarkWikiLink from "@portaljs/remark-wiki-link";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";

examples/openspending/lib/mddb.ts

@@ -1,4 +1,4 @@
-import { MarkdownDB } from "@flowershow/markdowndb";
+import { MarkdownDB } from "mddb";
 // import config from "./markdowndb.config.js";
 
 // TODO get this path from markdowndb.config.js or something

examples/openspending/package.json

@@ -12,53 +12,55 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@octokit/plugin-throttling": "^5.2.2",
-    "@types/flexsearch": "^0.7.3",
-    "@vitejs/plugin-react": "^4.0.0",
-    "clsx": "^1.2.1",
-    "datapackage": "^1.1.10",
-    "flexsearch": "0.7.21",
-    "next-seo": "^6.0.0",
-    "octokit": "^2.0.14",
-    "prettier": "^2.8.8",
-    "react-hook-form": "^7.43.9",
-    "react-markdown": "^8.0.7",
-    "react-timeago": "^7.1.0",
-    "rehype-raw": "^6.1.1",
-    "remark": "^14.0.3",
-    "remark-gfm": "^3.0.1",
-    "strip-markdown": "^5.0.1",
-    "@flowershow/core": "^0.4.13",
-    "@flowershow/markdowndb": "^0.1.5",
-    "@flowershow/remark-callouts": "^1.0.0",
-    "@flowershow/remark-embed": "^1.0.0",
+    "@flowershow/markdowndb": "^0.1.8",
     "@githubocto/flat-ui": "^0.14.1",
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.18",
+    "@octokit/plugin-throttling": "^5.2.2",
     "@portaljs/ckan": "^0.0.2",
-    "@portaljs/components": "^0.1.8",
+    "@portaljs/components": "^0.1.12",
+    "@portaljs/core": "^1.0.5",
+    "@portaljs/remark-callouts": "^1.0.5",
+    "@portaljs/remark-embed": "^1.0.4",
+    "@portaljs/remark-wiki-link": "^1.0.4",
     "@tailwindcss/typography": "^0.5.9",
+    "@types/flexsearch": "^0.7.3",
     "@types/node": "20.2.3",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
+    "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "10.4.14",
+    "clsx": "^1.2.1",
+    "datapackage": "^1.1.10",
     "eslint": "8.41.0",
     "eslint-config-next": "13.4.3",
+    "flexsearch": "0.7.21",
     "isomorphic-unfetch": "^4.0.2",
+    "mddb": "^0.1.9",
     "next": "13.4.3",
     "next-mdx-remote": "^4.4.1",
+    "next-seo": "^6.0.0",
+    "octokit": "^2.0.14",
     "papaparse": "^5.4.1",
     "postcss": "8.4.23",
+    "prettier": "^2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-markdown": "^8.0.7",
     "react-query": "^3.39.3",
+    "react-timeago": "^7.1.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.3",
     "rehype-prism-plus": "^1.5.1",
+    "rehype-raw": "^6.1.1",
     "rehype-slug": "^5.1.0",
+    "remark": "^14.0.3",
+    "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "remark-smartypants": "^2.0.0",
     "remark-toc": "^8.0.1",
+    "strip-markdown": "^5.0.1",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
   },

examples/openspending/pages/_app.tsx

@@ -13,7 +13,7 @@ import {
   ThemeProvider,
   NavItem,
   NavGroup,
-} from '@flowershow/core';
+} from '@portaljs/core';
 
 export interface CustomAppProps {
   meta: {

examples/openspending/pages/blog.tsx

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import React from 'react';
 import { GetStaticProps } from 'next';
-import { BlogsList, SimpleLayout } from '@flowershow/core';
+import { BlogsList, SimpleLayout } from '@portaljs/core';
 import clientPromise from '../lib/mddb';
 import type { CustomAppProps } from './_app';
 import Layout from '@/components/_shared/Layout';

examples/openspending/pages/stories/index.tsx

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import React from 'react';
 import { GetStaticProps } from 'next';
-import { BlogsList, SimpleLayout } from '@flowershow/core';
+import { BlogsList, SimpleLayout } from '@portaljs/core';
 import clientPromise from '../../lib/mddb';
 import type { CustomAppProps } from '../_app';
 import Layout from '@/components/_shared/Layout';

examples/openspending/pages/styles.css

@@ -86,7 +86,7 @@ pre {
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import "@flowershow/remark-callouts/styles.css";
+@import "@portaljs/remark-callouts/styles.css";
 
 .w-5 {
   width: 1.25rem

examples/openspending/tailwind.config.js

@@ -4,8 +4,8 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./node_modules/@flowershow/core/dist/*.js",
-    "./node_modules/@flowershow/core/*.js",
+    "./node_modules/@portaljs/core/dist/*.js",
+    "./node_modules/@portaljs/core/*.js",
   ],
   darkMode: "class",
   theme: {

examples/turing/lib/markdown.js

@@ -1,13 +1,13 @@
 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 remarkCallouts from "@portaljs/remark-callouts";
+import remarkEmbed from "@portaljs/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 remarkWikiLink from "@portaljs/remark-wiki-link";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";

examples/turing/lib/mddb.ts

@@ -1,4 +1,4 @@
-import { MarkdownDB } from "@flowershow/markdowndb";
+import { MarkdownDB } from "mddb";
 
 const dbPath = "markdown.db";
 

examples/turing/package.json

@@ -12,11 +12,6 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@flowershow/core": "^0.4.10",
-    "@flowershow/markdowndb": "^0.1.1",
-    "@flowershow/remark-callouts": "^1.0.0",
-    "@flowershow/remark-embed": "^1.0.0",
-    "@flowershow/remark-wiki-link": "^1.1.2",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.17",
     "@mapbox/rehype-prism": "^0.8.0",
@@ -24,6 +19,10 @@
     "@mdx-js/react": "^2.1.5",
     "@next/mdx": "^13.0.2",
     "@opentelemetry/api": "^1.4.0",
+    "@portaljs/core": "^1.0.5",
+    "@portaljs/remark-callouts": "^1.0.5",
+    "@portaljs/remark-embed": "^1.0.4",
+    "@portaljs/remark-wiki-link": "^1.0.4",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.4",
     "@tanstack/react-table": "^8.8.5",
@@ -35,6 +34,7 @@
     "focus-visible": "^5.2.0",
     "gray-matter": "^4.0.3",
     "hastscript": "^7.2.0",
+    "mddb": "^0.1.9",
     "mdx-mermaid": "^2.0.0-rc7",
     "mermaid": "^10.1.0",
     "next": "13.2.1",
@@ -60,12 +60,12 @@
     "tailwindcss": "^3.3.0"
   },
   "devDependencies": {
+    "@types/node": "18.16.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "eslint": "8.26.0",
     "eslint-config-next": "13.0.2",
     "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.6",
-    "@types/node": "18.16.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0"
+    "prettier-plugin-tailwindcss": "^0.2.6"
   }
 }

examples/turing/pages/[...slug].jsx

@@ -5,7 +5,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { Card } from '../components/Card'
 import Head from 'next/head'
 import parse from '../lib/markdown'
-import { Mermaid } from '@flowershow/core';
+import { Mermaid } from '@portaljs/core';
 
 export const getStaticProps = async ({ params }) => {
   const urlPath = params.slug ? params.slug.join('/') : ''

package-lock.json

@@ -8808,6 +8808,16 @@
       "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
       "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -12696,6 +12706,15 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.195",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
@@ -15525,6 +15544,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -27579,6 +27603,11 @@
         "url": "https://github.com/motdotla/dotenv?sponsor=1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -32646,6 +32675,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@@ -39254,17 +39296,20 @@
     },
     "packages/components": {
       "name": "@portaljs/components",
-      "version": "0.1.11",
+      "version": "0.1.12",
       "dependencies": {
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",
         "@tanstack/react-table": "^8.8.5",
+        "chroma-js": "^2.4.2",
         "flexsearch": "0.7.21",
+        "leaflet": "^1.9.4",
         "next-mdx-remote": "^4.4.1",
         "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
+        "react-leaflet": "^4.2.1",
         "react-query": "^3.39.3",
         "react-vega": "^7.6.0",
         "rollup-plugin-re": "^1.0.7",
@@ -39281,6 +39326,7 @@
         "@storybook/react-vite": "^7.0.7",
         "@storybook/testing-library": "^0.0.14-next.2",
         "@types/flexsearch": "^0.7.3",
+        "@types/leaflet": "^1.9.3",
         "@types/papaparse": "^5.3.7",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
@@ -39627,7 +39673,7 @@
     },
     "packages/core": {
       "name": "@portaljs/core",
-      "version": "1.0.3",
+      "version": "1.0.6",
       "license": "MIT",
       "dependencies": {
         "@docsearch/react": "^3.3.3",
@@ -39653,7 +39699,7 @@
     },
     "packages/remark-callouts": {
       "name": "@portaljs/remark-callouts",
-      "version": "1.0.4",
+      "version": "1.0.5",
       "license": "MIT",
       "dependencies": {
         "mdast-util-from-markdown": "^1.2.0",
@@ -39663,7 +39709,7 @@
     },
     "packages/remark-embed": {
       "name": "@portaljs/remark-embed",
-      "version": "1.0.3",
+      "version": "1.0.4",
       "license": "MIT",
       "dependencies": {
         "unist-util-visit": "^4.1.1"
@@ -39671,7 +39717,7 @@
     },
     "packages/remark-wiki-link": {
       "name": "@portaljs/remark-wiki-link",
-      "version": "1.0.3",
+      "version": "1.0.4",
       "license": "MIT",
       "dependencies": {
         "mdast-util-to-markdown": "^1.5.0",
@@ -46416,6 +46462,7 @@
         "@storybook/testing-library": "^0.0.14-next.2",
         "@tanstack/react-table": "^8.8.5",
         "@types/flexsearch": "^0.7.3",
+        "@types/leaflet": "^1.9.3",
         "@types/papaparse": "^5.3.7",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
@@ -46423,12 +46470,14 @@
         "@typescript-eslint/parser": "^5.57.1",
         "@vitejs/plugin-react": "^4.0.0",
         "autoprefixer": "^10.4.14",
+        "chroma-js": "2.4.2",
         "eslint": "^8.38.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.3.4",
         "eslint-plugin-storybook": "^0.6.11",
         "flexsearch": "0.7.21",
         "json": "^11.0.0",
+        "leaflet": "^1.9.4",
         "next-mdx-remote": "^4.4.1",
         "papaparse": "^5.4.1",
         "postcss": "^8.4.23",
@@ -46436,6 +46485,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
+        "react-leaflet": "^4.2.1",
         "react-query": "^3.39.3",
         "react-vega": "^7.6.0",
         "rollup-plugin-re": "^1.0.7",
@@ -46799,6 +46849,12 @@
       "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
       "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
     },
+    "@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "requires": {}
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -49605,6 +49661,15 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "@types/leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/lodash": {
       "version": "4.14.195",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
@@ -51793,6 +51858,11 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -61034,6 +61104,11 @@
         }
       }
     },
+    "leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -64650,6 +64725,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "requires": {
+        "@react-leaflet/core": "^2.1.0"
+      }
+    },
     "react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",

package.json

@@ -5,7 +5,6 @@
   "license": "MIT",
   "scripts": {
     "changeset": "changeset",
-    "prerelease": "nx run-many --targets=lint,test,build --projects=tag:test",
     "release": "changeset publish"
   },
   "private": true,

packages/components/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<!--
+  This is necessary for Leaflet maps to work.
+-->
+
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+  crossorigin=""
+/>

packages/components/.storybook/preview.ts

@@ -1,6 +1,7 @@
 import 'tailwindcss/tailwind.css'
 import '../src/index.css'
 
+
 import type { Preview } from '@storybook/react';
 
 const preview: Preview = {

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @portaljs/components
 
+## 0.1.12
+
+### Patch Changes
+
+- [#960](https://github.com/datopian/portaljs/pull/960) [`add2f6d0`](https://github.com/datopian/portaljs/commit/add2f6d0f372434eb996d59d6faf5cd06530c932) Thanks [@demenech](https://github.com/demenech)! - Fix width of the <LineChart /> component
+
 ## 0.1.11
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [
@@ -12,12 +12,14 @@
   ],
   "scripts": {
     "dev": "npm run storybook",
-    "build": "tsc && vite build && npm run build-tailwind",
+    "example": "vite",
+    "build": "tsc && vite build && npm run build-tailwind && npm run fix-leaflet",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/styles.css --minify",
-    "prepare": "npm run build"
+    "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/styles.css --minify",
+    "prepare": "npm run build",
+    "fix-leaflet": "node ./scripts/fix-leaflet.cjs"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -26,16 +28,20 @@
   "dependencies": {
     "@githubocto/flat-ui": "^0.14.1",
     "@heroicons/react": "^2.0.17",
+    "@planet/maps": "^8.1.0",
     "@tanstack/react-table": "^8.8.5",
+    "chroma-js": "^2.4.2",
     "flexsearch": "0.7.21",
+    "leaflet": "^1.9.4",
     "next-mdx-remote": "^4.4.1",
+    "ol": "^7.4.0",
     "papaparse": "^5.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
+    "react-leaflet": "^4.2.1",
     "react-query": "^3.39.3",
     "react-vega": "^7.6.0",
-    "rollup-plugin-re": "^1.0.7",
     "vega": "5.25.0",
     "vega-lite": "5.1.0",
     "vitest": "^0.31.4"
@@ -48,13 +54,16 @@
     "@storybook/react": "^7.0.7",
     "@storybook/react-vite": "^7.0.7",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@swc/core": "^1.3.68",
     "@types/flexsearch": "^0.7.3",
+    "@types/leaflet": "^1.9.3",
     "@types/papaparse": "^5.3.7",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -62,12 +71,15 @@
     "eslint-plugin-storybook": "^0.6.11",
     "json": "^11.0.0",
     "postcss": "^8.4.23",
+    "postcss-import": "^15.1.0",
+    "postcss-import-url": "^7.2.0",
     "prop-types": "^15.8.1",
     "storybook": "^7.0.7",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
     "vite": "^4.3.2",
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^2.3.0",
+    "vite-plugin-swc-only": "^0.1.18"
   },
   "files": [
     "dist"

packages/components/postcss.config.js

@@ -1,6 +1,9 @@
+console.log('PostCSS')
+
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

packages/components/scripts/fix-leaflet.cjs

@@ -0,0 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+
+const leafletPath = path.join(require.resolve('leaflet'), '../')
+
+fs.cpSync(`${leafletPath}images`,'./dist/images', { recursive: true });

packages/components/src/components/LineChart.tsx

@@ -35,7 +35,7 @@ export function LineChart({
   const spec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
     title,
-    width: 600,
+    width: 'container',
     height: 300,
     mark: {
       type: 'line',

packages/components/src/components/Map.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+import LoadingSpinner from './LoadingSpinner';
+import loadData from '../lib/loadData';
+import chroma from 'chroma-js';
+import {
+  MapContainer,
+  TileLayer,
+  GeoJSON as GeoJSONLayer,
+} from 'react-leaflet';
+
+import * as L from 'leaflet';
+
+export type MapProps = {
+  data: string | GeoJSON.GeoJSON;
+  title?: string;
+  colorScale?: {
+    starting: string;
+    ending: string;
+  };
+  center?: { latitude: number | undefined; longitude: number | undefined };
+  zoom?: number;
+  tooltip?: {
+    prop: string;
+  };
+};
+
+export function Map({
+  data,
+  title = '',
+  colorScale = { starting: 'blue', ending: 'red' },
+  center = { latitude: 45, longitude: 45 },
+  zoom = 2,
+  tooltip = {
+    prop: '',
+  },
+}: MapProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  //  By default, assumes data is an Array...
+  const [geoJsonData, setGeoJsonData] = useState<any>(null);
+
+  useEffect(() => {
+    //  If data is string, assume it's a URL
+    if (typeof data === 'string') {
+      setIsLoading(true);
+
+      loadData(data).then((res: any) => {
+        const geoJsonObject = JSON.parse(res);
+
+        const colorScaleAr = chroma
+          .scale([colorScale.starting, colorScale.ending])
+          .mode('lch')
+          .colors(geoJsonObject.features.length);
+
+        geoJsonObject.features.forEach((feature, i) => {
+          if (feature.color === undefined) {
+            feature.color = colorScaleAr[i];
+          }
+        });
+
+        setGeoJsonData(geoJsonObject);
+        setIsLoading(false);
+      });
+    } else {
+      setGeoJsonData(data);
+    }
+  }, []);
+
+  const onEachFeature = (feature, layer) => {
+    const geometryType = feature.type;
+
+    if (tooltip.prop)
+      layer.bindTooltip(feature.properties[tooltip.prop], {
+        direction: 'center',
+      });
+
+    layer.on({
+      mouseover: (event) => {
+        if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
+          event.target.setStyle({
+            fillColor: '#B85042',
+          });
+        }
+      },
+      mouseout: (event) => {
+        if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
+          event.target.setStyle({
+            fillColor: '#A7BEAE',
+          });
+        }
+      },
+    });
+  };
+
+  return isLoading || !geoJsonData ? (
+    <div className="w-full flex items-center justify-center w-[600px] h-[300px]">
+      <LoadingSpinner />
+    </div>
+  ) : (
+    <MapContainer
+      center={[center.latitude, center.longitude]}
+      zoom={zoom}
+      scrollWheelZoom={false}
+      className="h-80 w-full"
+      // @ts-ignore
+      whenReady={(map: any) => {
+        map.target.scrollWheelZoom.enable();
+
+        var info = new L.Control() as any;
+
+        info.onAdd = function () {
+          this._div = L.DomUtil.create('div', 'info');
+          this.update();
+          return this._div;
+        };
+
+        info.update = function () {
+          this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
+        };
+
+        if (title) info.addTo(map.target);
+
+        setTimeout(() => map.target.invalidateSize(), 5000);
+      }}
+    >
+      <GeoJSONLayer
+        data={geoJsonData}
+        style={(geoJsonFeature: any) => {
+          return { color: geoJsonFeature?.color };
+        }}
+        onEachFeature={onEachFeature}
+      />
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+    </MapContainer>
+  );
+}

packages/components/src/components/OpenLayers/Controls.jsx

@@ -0,0 +1,84 @@
+import React, { useContext, useEffect, useState } from 'react';
+export const Controls = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+import { FullScreen, Zoom } from 'ol/control';
+import { MapContext } from './Map';
+
+export const FullScreenControl = () => {
+  const { map } = useContext(MapContext);
+  useEffect(() => {
+    if (!map) return;
+    let fullScreenControl = new FullScreen({
+      className: 'ml-1 flex flex-col w-8 items-center mt-2',
+      activeClassName:
+        'w-full inline-flex justify-center items-center rounded-t-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+      inactiveClassName:
+        'inline-flex w-full justify-center items-center rounded-t-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+    });
+    let zoomControl = new Zoom({
+      className: 'ml-1 flex flex-col w-8 items-center',
+      zoomInClassName:
+        'inline-flex w-full justify-center items-center bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+      zoomOutClassName:
+        'inline-flex w-full justify-center items-center rounded-b-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+    });
+    map.controls.push(fullScreenControl);
+    map.controls.push(zoomControl);
+
+    return () => {
+      map.controls.remove(zoomControl);
+      map.controls.remove(fullScreenControl);
+    };
+  }, [map]);
+  return null;
+};
+
+//build a list of checkboxes in react
+
+export const ListOfCheckboxes = ({ layers, shownLayers, setShownLayers }) => {
+  //layers is an array of url and name
+  function addLayer(layer) {
+    setShownLayers([...shownLayers, layer.url]);
+  }
+
+  function removeLayer(layer) {
+    setShownLayers(shownLayers.filter((l) => l !== layer.url));
+  }
+
+  return (
+    <div>
+      <h3 className="mb-4 font-semibold text-gray-900 ">Layers</h3>
+      <ul className="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg ">
+        {layers.map((layer, index) => (
+          <li
+            key={index}
+            className="w-full border-b border-gray-200 rounded-t-lg "
+          >
+            <div className="flex items-center pl-3">
+              <input
+                id={layer.name}
+                type="checkbox"
+                defaultChecked={shownLayers.includes(layer.url)}
+                onClick={() =>
+                  shownLayers.includes(layer.url)
+                    ? removeLayer(layer)
+                    : addLayer(layer)
+                }
+                value={true}
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 "
+              ></input>
+              <label
+                htmlFor={layer.name}
+                className="w-full py-3 ml-2 text-sm font-medium text-gray-90"
+              >
+                {layer.name}
+              </label>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

packages/components/src/components/OpenLayers/HeatMapLayer.jsx

@@ -0,0 +1,29 @@
+import { useContext, useEffect, useState } from 'react';
+import HeatMap from 'ol/layer/Heatmap';
+import { MapContext } from './Map';
+const HeatMapLayer = ({ source, style, zIndex = 0 }) => {
+  const { map } = useContext(MapContext);
+  const [heatMapLayer, setHeatMapLayer] = useState(null);
+  useEffect(() => {
+    if (!map) return;
+    let heatMapLayer = new HeatMap({
+      source,
+      style,
+      blur: parseInt(5, 10),
+      radius: parseInt(5, 10),
+    });
+    map.addLayer(heatMapLayer);
+    setHeatMapLayer(heatMapLayer);
+    heatMapLayer.setZIndex(zIndex);
+    return () => {
+      if (map) {
+        map.removeLayer(heatMapLayer);
+      }
+    };
+  }, [map]);
+  useEffect(() => {
+    heatMapLayer && heatMapLayer.setZIndex(zIndex);
+  }, [zIndex]);
+  return null;
+};
+export default HeatMapLayer;

packages/components/src/components/OpenLayers/Layers.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+export const Layers = ({ children }) => {
+  return <div>{children}</div>;
+};

packages/components/src/components/OpenLayers/Map.jsx

@@ -0,0 +1,50 @@
+import React, { useRef, useState, useEffect } from 'react';
+import * as ol from 'ol';
+
+export const MapContext = new React.createContext();
+
+const Map = ({ children, zoom, center, setSelected }) => {
+  const mapRef = useRef();
+  const [map, setMap] = useState(null);
+  // on component mount
+  useEffect(() => {
+    let options = {
+      view: new ol.View({ zoom, center }),
+      layers: [],
+      controls: [],
+      overlays: [],
+    };
+    let mapObject = new ol.Map(options);
+    mapObject.setTarget(mapRef.current);
+    setMap(mapObject);
+    return () => mapObject.setTarget(undefined);
+  }, []);
+
+  useEffect(() => {
+    if (map) {
+      if (setSelected !== null) {
+        let selected = null;
+        map.on('pointermove', function (e) {
+          map.forEachFeatureAtPixel(e.pixel, function (f) {
+            selected = f;
+            return true;
+          });
+          if (selected) {
+            setSelected(selected);
+          } else {
+            setSelected(null);
+          }
+        });
+      }
+    }
+  }, [map]);
+  return (
+    <MapContext.Provider value={{ map }}>
+      <div ref={mapRef} className="w-full" style={{height: '500px'}}>
+        {children}
+      </div>
+    </MapContext.Provider>
+  );
+};
+
+export default Map;

packages/components/src/components/OpenLayers/OpenLayers.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import Map from './Map';
+import { Layers } from './Layers';
+import { Fill, Icon, Style } from 'ol/style';
+import * as olSource from 'ol/source';
+import TileLayer from './TileLayer';
+import { fromLonLat } from 'ol/proj';
+import VectorLayer from './VectorLayer';
+import { Vector as VectorSource } from 'ol/source';
+import GeoJSON from 'ol/format/GeoJSON';
+import KML from 'ol/format/KML';
+import { colors } from './colors';
+import { FullScreenControl, Controls, ListOfCheckboxes } from './Controls';
+import HeatMapLayer from './HeatMapLayer';
+
+function osm() {
+  return new olSource.OSM();
+}
+
+const formats = {
+  geojson: new GeoJSON(),
+  kml: new KML(),
+};
+
+interface OpenLayersProps {
+  layers: {
+    url: string;
+    name?: string;
+    format?: string;
+    heatmap?: boolean;
+  }[];
+  center?: [number, number];
+  zoom?: number;
+  popup?: (selected: any) => JSX.Element;
+}
+
+export function OpenLayers({
+  layers,
+  center = [0, 0],
+  zoom = 1,
+  popup,
+}: OpenLayersProps) {
+  const [shownLayers, setShownLayers] = useState(
+    layers.map((layer) => layer.url)
+  );
+  const [selected, setSelected] = useState(null);
+  const [style, setStyle] = useState(null);
+
+  useEffect(() => {
+    const style = new Style({
+      fill: new Fill({
+        color: '#eeeeee',
+      }),
+      image: new Icon({
+        anchor: [0.5, 46],
+        anchorXUnits: 'fraction',
+        anchorYUnits: 'pixels',
+        width: 18,
+        height: 28,
+        src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Google_Maps_icon_%282020%29.svg/418px-Google_Maps_icon_%282020%29.svg.png?20200218211225',
+      }),
+    });
+    setStyle(style);
+  }, []);
+
+  return (
+    <div className="relative">
+      <Map
+        center={fromLonLat(center)}
+        zoom={zoom}
+        setSelected={popup ? setSelected : null}
+      >
+        <Layers>
+          <TileLayer source={osm()} zIndex={0} />
+          {layers.map((layer, index) =>
+            !layer.heatmap ? (
+              <VectorLayer
+                key={index}
+                zIndex={shownLayers.includes(layer.url) ? 1 : -1}
+                source={
+                  new VectorSource({
+                    url: layer.url,
+                    format: layer.format
+                      ? formats[layer.format]
+                      : new GeoJSON(),
+                  })
+                }
+                style={function (feature) {
+                  const id = feature.getId();
+                  const color = feature.get('COLOR') || colors[id % 1302].hex;
+                  style.getFill().setColor(color);
+                  return style;
+                }}
+              />
+            ) : (
+              <HeatMapLayer
+                key={index}
+                zIndex={shownLayers.includes(layer.url) ? 1 : -1}
+                source={
+                  new VectorSource({
+                    url: layer.url,
+                    format: layer.format
+                      ? formats[layer.format]
+                      : new GeoJSON(),
+                  })
+                }
+                style={function (feature) {
+                  const color =
+                    feature.get('COLOR') || colors[feature.ol_uid % 1302].hex;
+                  style.getFill().setColor(color);
+                  return style;
+                }}
+              />
+            )
+          )}
+        </Layers>
+        {/* add a floating pane that will output the ListOfCheckboxes component using tailwind*/}
+        <div className="absolute bottom-0 right-0 m-4 p-4 z-50 bg-white rounded-lg shadow-xl">
+          <ListOfCheckboxes
+            layers={layers}
+            shownLayers={shownLayers}
+            setShownLayers={setShownLayers}
+          />
+        </div>
+        {popup && selected && (
+          <div className="absolute bottom-0 left-0 m-4 p-4 z-50 bg-white rounded-lg shadow-xl">
+            {popup(selected)}
+          </div>
+        )}
+        <Controls>
+          <FullScreenControl />
+        </Controls>
+      </Map>
+    </div>
+  );
+}

packages/components/src/components/OpenLayers/TileLayer.jsx

@@ -0,0 +1,23 @@
+import { useContext, useEffect } from 'react';
+import OLTileLayer from 'ol/layer/Tile';
+import { MapContext } from './Map';
+const TileLayer = ({ source, zIndex = 0 }) => {
+  const { map } = useContext(MapContext);
+  useEffect(() => {
+    if (!map) return;
+
+    let tileLayer = new OLTileLayer({
+      source,
+      zIndex,
+    });
+    map.addLayer(tileLayer);
+    tileLayer.setZIndex(zIndex);
+    return () => {
+      if (map) {
+        map.removeLayer(tileLayer);
+      }
+    };
+  }, [map]);
+  return null;
+};
+export default TileLayer;

packages/components/src/components/OpenLayers/VectorLayer.jsx

@@ -0,0 +1,33 @@
+import { useContext, useEffect, useState } from 'react';
+import OLVectorLayer from 'ol/layer/Vector';
+import { MapContext } from './Map';
+const VectorLayer = ({ source, style, zIndex = 0 }) => {
+  const { map } = useContext(MapContext);
+  const [vectorLayer, setVectorLayer] = useState(null);
+  useEffect(() => {
+    if (!map) return;
+    let vectorLayer = new OLVectorLayer({
+      source,
+      style,
+    });
+    const vectorSource = vectorLayer.getSource();
+    vectorSource.on('featuresloadend', function () {
+      vectorSource.getFeatures().forEach((feature, index) => {
+        feature.setId(index);
+      });
+    });
+    map.addLayer(vectorLayer);
+    setVectorLayer(vectorLayer);
+    vectorLayer.setZIndex(zIndex);
+    return () => {
+      if (map) {
+        map.removeLayer(vectorLayer);
+      }
+    };
+  }, [map]);
+  useEffect(() => {
+    vectorLayer && vectorLayer.setZIndex(zIndex);
+  }, [zIndex]);
+  return null;
+};
+export default VectorLayer;

packages/components/src/include.css

@@ -0,0 +1,6 @@
+/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
+@layer base {
+  svg[tw^='animate-pulse w-12'] {
+    max-width: 100px;
+  }
+}

packages/components/src/index.css

@@ -1,10 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
-@layer base {
-  svg[tw^='animate-pulse w-12'] {
-    max-width: 100px;
-  }
-}
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "leaflet";
+@import "include";
+@import "tailwindcss/utilities";
+

packages/components/src/index.ts

@@ -4,3 +4,5 @@ export * from "./components/LineChart";
 export * from "./components/Vega";
 export * from "./components/VegaLite";
 export * from "./components/FlatUiTable";
+export * from './components/OpenLayers/OpenLayers';
+export * from "./components/Map";

packages/components/src/types/GeoJSON.tsx

@@ -0,0 +1,171 @@
+/**
+ * Typescript types for the GeoJSON RFC7946 specification. This is not fully RFC-compliant due to lack of support for
+ * ranged number data types.
+ *
+ * See https://tools.ietf.org/html/rfc7946
+ */
+export declare namespace GeoJSON {
+    /**
+     * Inside this document, the term "geometry type" refers to seven case-sensitive strings: "Point", "MultiPoint",
+     * "LineString", "MultiLineString", "Polygon", "MultiPolygon", and "GeometryCollection".
+     */
+    export type Geometry = Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon
+        | GeometryCollection;
+    export type GeometryType = Geometry["type"];
+
+    /**
+     * ...the term "GeoJSON types" refers to nine case-sensitive strings: "Feature", "FeatureCollection", and the
+     * geometry types listed above.
+     */
+    export type GeoJson = Geometry | Feature | FeatureCollection;
+    export type GeoJsonType = GeoJson["type"];
+
+    // types
+
+    /**
+     * A position is an array of numbers. There MUST be two or more elements. The first two elements are longitude and
+     * latitude, or easting and northing, precisely in that order and using decimal numbers. Altitude or elevation MAY
+     * be included as an optional third element.
+     *
+     * Implementations SHOULD NOT extend positions beyond three elements because the semantics of extra elements are
+     * unspecified and ambiguous.
+     */
+    export type Position = [longitude: number, latitude: number, elevation?: number]
+
+    export type Record = { [key in string | number]: unknown };
+
+    /**
+     * Properties inherit to all GeoJSON types
+     */
+    export interface GeometryBase extends Record {
+        /**
+         * A GeoJSON object MAY have a member named "bbox" to include information on the coordinate range for its
+         * Geometries, Features, or FeatureCollections. The value of the bbox member MUST be an array of length 2*n
+         * where n is the number of dimensions represented in the contained geometries, with all axes of the most
+         * southwesterly point followed by all axes of the more northeasterly point. The axes order of a bbox follows
+         * the axes order of geometries.
+         */
+        bbox?: number[];
+
+        /**
+         * A GeoJSON object MAY have other members.
+         *
+         * Members not described in this specification ("foreign members") MAY be used in a GeoJSON document. Note that
+         * support for foreign members can vary across implementations, and no normative processing model for foreign
+         * members is defined.
+         */
+    }
+
+    // geometry types
+
+    export interface Point extends GeometryBase {
+        type: "Point";
+        /**
+         * For type "Point", the "coordinates" member is a single position.
+         */
+        coordinates: Position;
+    }
+
+    export interface MultiPoint extends GeometryBase {
+        type: "MultiPoint";
+        /**
+         * For type "MultiPoint", the "coordinates" member is an array of positions.
+         */
+        coordinates: Position[];
+    }
+
+    export interface LineString extends GeometryBase {
+        type: "LineString";
+        /**
+         * For type "LineString", the "coordinates" member is an array of two or more positions.
+         */
+        coordinates: { 0: Position, 1: Position } & Position[]
+    }
+
+    export interface MultiLineString extends GeometryBase {
+        type: "MultiLineString";
+        /**
+         *  For type "MultiLineString", the "coordinates" member is an array of LineString coordinate arrays.
+         */
+        coordinates: LineString["coordinates"][];
+    }
+
+    /**
+     * To specify a constraint specific to Polygons, it is useful to introduce the concept of a linear ring:
+     *  - A linear ring is a closed LineString with four or more positions.
+     *  - The first and last positions are equivalent, and they MUST contain identical values; their representation
+     *    SHOULD also be identical.
+     *  - A linear ring is the boundary of a surface or the boundary of a hole in a surface.
+     *  - A linear ring MUST follow the right-hand rule with respect to the area it bounds, i.e., exterior rings are
+     *  counterclockwise, and holes are clockwise.
+     */
+    export type LinearRing = { 0: Position, 1: Position, 2: Position, 3: Position } & Position[];
+
+    export interface Polygon extends GeometryBase {
+        type: "Polygon";
+        /**
+         * For type "Polygon", the "coordinates" member MUST be an array of linear ring coordinate arrays.
+         *
+         * For Polygons with more than one of these rings, the first MUST be the exterior ring, and any others MUST be
+         * interior rings. The exterior ring bounds the surface, and the interior rings (if present) bound holes within
+         * the surface.
+         */
+        coordinates: LinearRing[];
+    }
+
+    export interface MultiPolygon extends GeometryBase {
+        type: "MultiPolygon";
+        /**
+         * For type "MultiPolygon", the "coordinates" member is an array of Polygon coordinate arrays.
+         */
+        coordinates: Polygon["coordinates"][];
+    }
+
+    export interface GeometryCollection {
+        /**
+         * A GeoJSON object with type "GeometryCollection" is a Geometry object.
+         */
+        type: "GeometryCollection";
+        /**
+         *  A GeometryCollection has a member with the name "geometries". The value of "geometries" is an array. Each
+         *  element of this array is a GeoJSON Geometry object. It is possible for this array to be empty.
+         */
+        geometries: Geometry[];
+    }
+
+    // GeoJSON types
+
+    export interface Feature {
+        /**
+         * A Feature object has a "type" member with the value "Feature".
+         */
+        type: "Feature";
+        /**
+         * If a Feature has a commonly used identifier, that identifier SHOULD be included as a member of the Feature object
+         * with the name "id", and the value of this member is either a JSON string or number.
+         */
+        id?: string | number;
+        /**
+         * A Feature object has a member with the name "geometry". The value of the geometry member SHALL be either a
+         * Geometry object as defined above or, in the case that the Feature is unlocated, a JSON null value.
+         */
+        geometry: Geometry | null;
+        /**
+         * A Feature object has a member with the name "properties". The value of the properties member is an object
+         * (any JSON object or a JSON null value).
+         */
+        properties: Record | null;
+    }
+
+    export interface FeatureCollection {
+        /**
+         * A GeoJSON object with the type "FeatureCollection" is a FeatureCollection object.
+         */
+        type: "FeatureCollection";
+        /**
+         * A FeatureCollection object has a member with the name "features". The value of "features" is a JSON array. Each
+         * element of the array is a Feature object as defined above. It is possible for this array to be empty.
+         */
+        features: Feature[];
+    }
+}

packages/components/stories/Map.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Map, MapProps } from '../src/components/Map';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/Map',
+  component: Map,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        'Data to be displayed.\n\n GeoJSON Object \n\nOR\n\n URL to GeoJSON Object',
+    },
+    title: {
+      description: 'Title to display on the map. Optional.',
+    },
+    center: {
+      description: 'Initial coordinates of the center of the map',
+    },
+    zoom: {
+      description: 'Zoom level',
+    },
+    tooltip: {
+      description: 'Tooltip settings'
+    }
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<MapProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const GeoJSONPolygons: Story = {
+  name: 'GeoJSON polygons map',
+  args: {
+    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+    title: 'Seas and Oceans Map',
+    center: { latitude: 45, longitude: 0 },
+    zoom: 2,
+    tooltip: { prop: 'name' },
+  },
+};
+
+export const GeoJSONPoints: Story = {
+  name: 'GeoJSON points map',
+  args: {
+    data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+    title: 'Roads in York',
+    center: { latitude: 53.9614, longitude: -1.0739 },
+    zoom: 12,
+    tooltip: { prop: 'Location' },
+  },
+};

packages/components/stories/OpenLayers.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { OpenLayers } from '../src/components/OpenLayers/OpenLayers';
+
+const meta: Meta = {
+  title: 'Components/OpenLayers',
+  component: OpenLayers,
+  argTypes: {
+    layers: {
+      description: 'Layers to be added to the map',
+      control: {
+        type: 'array',
+      },
+    },
+    center: {
+      description: 'Center of the map',
+      defaultValue: [0, 0],
+      control: {
+        type: 'array',
+      },
+    },
+    zoom: {
+      description: 'Zoom level of the map',
+      defaultValue: 1,
+      control: {
+        type: 'number',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<any>;
+
+export const Secondary: Story = {
+  name: 'Map with OpenLayers',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+  },
+};
+
+export const Primary: Story = {
+  name: 'Map with OpenLayers 2',
+  args: {
+    layers: [
+      {
+        url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Marine regions',
+      },
+    ],
+  },
+};
+
+export const MapWithPopover: Story = {
+  name: 'Map with popup',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+    popup: (feature: any) => {
+      return (
+        <div className="flex flex-col gap-y-1" style={{ color: 'red' }}>
+          <span className="font-bold">Biome name</span>
+          <span className="text-sm">{feature.values_.BIOME_NAME}</span>
+        </div>
+      );
+    },
+  },
+};
+
+export const Third: Story = {
+  name: 'Map with two layers',
+  args: {
+    layers: [
+      {
+        url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Marine regions',
+      },
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+  },
+};
+
+export const CustomCenter: Story = {
+  name: 'Map with custom center and zoom',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+    center: [-15, 20],
+    zoom: 4,
+  },
+};
+
+export const PointsOnMap: Story = {
+  name: 'Map with points on',
+  args: {
+    layers: [
+      {
+        url: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        name: 'E-Scooter Parking Bays',
+      },
+    ],
+    center: [-1.055429957881787, 53.963900188025301],
+    zoom: 12,
+  },
+};
+
+export const KMLFile: Story = {
+  name: 'Map with KML File',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml',
+        name: '2012 Earthquakes M5+',
+        format: 'kml',
+        heatmap: true,
+      },
+    ],
+  },
+};

packages/components/tailwind.config.js

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

packages/components/vite.config.ts

@@ -1,29 +1,15 @@
-import react from '@vitejs/plugin-react'
-import path from 'node:path'
-import { defineConfig } from 'vitest/config'
-import dts from 'vite-plugin-dts'
-import tailwindcss from 'tailwindcss'
-import { UserConfigExport } from 'vite'
-import replace from "rollup-plugin-re"
+import react from '@vitejs/plugin-react-swc';
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+import dts from 'vite-plugin-dts';
+import tailwindcss from 'tailwindcss';
+import { UserConfigExport } from 'vite';
+import replace from 'rollup-plugin-re';
 
 const app = async (): Promise<UserConfigExport> => {
   return defineConfig({
     plugins: [
       react(),
-      replace({
-          patterns: [
-            {
-              match: /js-sha256/,
-              test: `eval("require('crypto')")`,
-              replace: `require('crypto')`,
-            },
-            {
-              match: /js-sha256/,
-              test: `eval("require('buffer').Buffer")`,
-              replace: `require('buffer').Buffer`,
-            },
-          ],
-        }),
       dts({
         insertTypesEntry: true,
       }),
@@ -34,6 +20,7 @@ const app = async (): Promise<UserConfigExport> => {
       },
     },
     build: {
+      target: 'es2020',
       lib: {
         entry: path.resolve(__dirname, 'src/index.ts'),
         name: 'components',
@@ -41,12 +28,27 @@ const app = async (): Promise<UserConfigExport> => {
         fileName: (format) => `components.${format}.js`,
       },
       rollupOptions: {
-        external: ['react', 'react-dom', 'tailwindcss', 'vega-lite', 'vega', 'react-vega'],
+        external: [
+          'react',
+          'ol-mapbox-style',
+          'react-dom',
+          'tailwindcss',
+          'vega-lite',
+          'vega',
+          'react-vega',
+          'ol',
+          'leaflet'
+        ],
         output: {
+          manualChunks: undefined,
           globals: {
             react: 'React',
+            ol: 'ol',
+            'ol-mapbox-style': 'ol-mapbox-style',
+            'react-vega': 'react-vega',
             'react-dom': 'ReactDOM',
             tailwindcss: 'tailwindcss',
+            leaflet: 'leaflet'
           },
         },
       },
@@ -55,7 +57,7 @@ const app = async (): Promise<UserConfigExport> => {
       globals: true,
       environment: 'jsdom',
     },
-  })
-}
+  });
+};
 // https://vitejs.dev/config/
-export default app
+export default app;

packages/components/vite.config.ts.timestamp-1688577409260-11eb314b205fb.mjs

@@ -0,0 +1,64 @@
+// vite.config.ts
+import react from "file:///home/urutu-branco/Projetos/portaljs/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import path from "node:path";
+import { defineConfig } from "file:///home/urutu-branco/Projetos/portaljs/node_modules/vitest/dist/config.js";
+import dts from "file:///home/urutu-branco/Projetos/portaljs/node_modules/vite-plugin-dts/dist/index.mjs";
+import tailwindcss from "file:///home/urutu-branco/Projetos/portaljs/node_modules/tailwindcss/lib/index.js";
+var __vite_injected_original_dirname = "/home/urutu-branco/Projetos/portaljs/packages/components";
+var app = async () => {
+  return defineConfig({
+    plugins: [
+      react(),
+      dts({
+        insertTypesEntry: true
+      })
+    ],
+    css: {
+      postcss: {
+        plugins: [tailwindcss]
+      }
+    },
+    build: {
+      target: "es2020",
+      lib: {
+        entry: path.resolve(__vite_injected_original_dirname, "src/index.ts"),
+        name: "components",
+        formats: ["es", "umd"],
+        fileName: (format) => `components.${format}.js`
+      },
+      rollupOptions: {
+        external: [
+          "react",
+          "ol-mapbox-style",
+          "react-dom",
+          "tailwindcss",
+          "vega-lite",
+          "vega",
+          "react-vega",
+          "ol",
+          "ol/dom.js"
+        ],
+        output: {
+          manualChunks: void 0,
+          globals: {
+            react: "React",
+            ol: "ol",
+            "ol/dom.js": "ol/dom.js",
+            "react-vega": "react-vega",
+            "react-dom": "ReactDOM",
+            tailwindcss: "tailwindcss"
+          }
+        }
+      }
+    },
+    test: {
+      globals: true,
+      environment: "jsdom"
+    }
+  });
+};
+var vite_config_default = app;
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS91cnV0dS1icmFuY28vUHJvamV0b3MvcG9ydGFsanMvcGFja2FnZXMvY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvdXJ1dHUtYnJhbmNvL1Byb2pldG9zL3BvcnRhbGpzL3BhY2thZ2VzL2NvbXBvbmVudHMvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvdXJ1dHUtYnJhbmNvL1Byb2pldG9zL3BvcnRhbGpzL3BhY2thZ2VzL2NvbXBvbmVudHMvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcmVhY3QgZnJvbSAnQHZpdGVqcy9wbHVnaW4tcmVhY3Qtc3djJztcbmltcG9ydCBwYXRoIGZyb20gJ25vZGU6cGF0aCc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlc3QvY29uZmlnJztcbmltcG9ydCBkdHMgZnJvbSAndml0ZS1wbHVnaW4tZHRzJztcbmltcG9ydCB0YWlsd2luZGNzcyBmcm9tICd0YWlsd2luZGNzcyc7XG5pbXBvcnQgeyBVc2VyQ29uZmlnRXhwb3J0IH0gZnJvbSAndml0ZSc7XG5pbXBvcnQgcmVwbGFjZSBmcm9tICdyb2xsdXAtcGx1Z2luLXJlJztcblxuY29uc3QgYXBwID0gYXN5bmMgKCk6IFByb21pc2U8VXNlckNvbmZpZ0V4cG9ydD4gPT4ge1xuICByZXR1cm4gZGVmaW5lQ29uZmlnKHtcbiAgICBwbHVnaW5zOiBbXG4gICAgICByZWFjdCgpLFxuICAgICAgZHRzKHtcbiAgICAgICAgaW5zZXJ0VHlwZXNFbnRyeTogdHJ1ZSxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgY3NzOiB7XG4gICAgICBwb3N0Y3NzOiB7XG4gICAgICAgIHBsdWdpbnM6IFt0YWlsd2luZGNzc10sXG4gICAgICB9LFxuICAgIH0sXG4gICAgYnVpbGQ6IHtcbiAgICAgIHRhcmdldDogJ2VzMjAyMCcsXG4gICAgICBsaWI6IHtcbiAgICAgICAgZW50cnk6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsICdzcmMvaW5kZXgudHMnKSxcbiAgICAgICAgbmFtZTogJ2NvbXBvbmVudHMnLFxuICAgICAgICBmb3JtYXRzOiBbJ2VzJywgJ3VtZCddLFxuICAgICAgICBmaWxlTmFtZTogKGZvcm1hdCkgPT4gYGNvbXBvbmVudHMuJHtmb3JtYXR9LmpzYCxcbiAgICAgIH0sXG4gICAgICByb2xsdXBPcHRpb25zOiB7XG4gICAgICAgIGV4dGVybmFsOiBbXG4gICAgICAgICAgJ3JlYWN0JyxcbiAgICAgICAgICAnb2wtbWFwYm94LXN0eWxlJyxcbiAgICAgICAgICAncmVhY3QtZG9tJyxcbiAgICAgICAgICAndGFpbHdpbmRjc3MnLFxuICAgICAgICAgICd2ZWdhLWxpdGUnLFxuICAgICAgICAgICd2ZWdhJyxcbiAgICAgICAgICAncmVhY3QtdmVnYScsXG4gICAgICAgICAgJ29sJyxcbiAgICAgICAgICAnb2wvZG9tLmpzJyxcbiAgICAgICAgXSxcbiAgICAgICAgb3V0cHV0OiB7XG4gICAgICAgICAgbWFudWFsQ2h1bmtzOiB1bmRlZmluZWQsXG4gICAgICAgICAgZ2xvYmFsczoge1xuICAgICAgICAgICAgcmVhY3Q6ICdSZWFjdCcsXG4gICAgICAgICAgICBvbDogJ29sJyxcbiAgICAgICAgICAgICdvbC9kb20uanMnOiAnb2wvZG9tLmpzJyxcbiAgICAgICAgICAgICdyZWFjdC12ZWdhJzogJ3JlYWN0LXZlZ2EnLFxuICAgICAgICAgICAgJ3JlYWN0LWRvbSc6ICdSZWFjdERPTScsXG4gICAgICAgICAgICB0YWlsd2luZGNzczogJ3RhaWx3aW5kY3NzJyxcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIHRlc3Q6IHtcbiAgICAgIGdsb2JhbHM6IHRydWUsXG4gICAgICBlbnZpcm9ubWVudDogJ2pzZG9tJyxcbiAgICB9LFxuICB9KTtcbn07XG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgYXBwO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUEwVixPQUFPLFdBQVc7QUFDNVcsT0FBTyxVQUFVO0FBQ2pCLFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sU0FBUztBQUNoQixPQUFPLGlCQUFpQjtBQUp4QixJQUFNLG1DQUFtQztBQVF6QyxJQUFNLE1BQU0sWUFBdUM7QUFDakQsU0FBTyxhQUFhO0FBQUEsSUFDbEIsU0FBUztBQUFBLE1BQ1AsTUFBTTtBQUFBLE1BQ04sSUFBSTtBQUFBLFFBQ0Ysa0JBQWtCO0FBQUEsTUFDcEIsQ0FBQztBQUFBLElBQ0g7QUFBQSxJQUNBLEtBQUs7QUFBQSxNQUNILFNBQVM7QUFBQSxRQUNQLFNBQVMsQ0FBQyxXQUFXO0FBQUEsTUFDdkI7QUFBQSxJQUNGO0FBQUEsSUFDQSxPQUFPO0FBQUEsTUFDTCxRQUFRO0FBQUEsTUFDUixLQUFLO0FBQUEsUUFDSCxPQUFPLEtBQUssUUFBUSxrQ0FBVyxjQUFjO0FBQUEsUUFDN0MsTUFBTTtBQUFBLFFBQ04sU0FBUyxDQUFDLE1BQU0sS0FBSztBQUFBLFFBQ3JCLFVBQVUsQ0FBQyxXQUFXLGNBQWM7QUFBQSxNQUN0QztBQUFBLE1BQ0EsZUFBZTtBQUFBLFFBQ2IsVUFBVTtBQUFBLFVBQ1I7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFVBQ0E7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFVBQ0E7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFFBQ0Y7QUFBQSxRQUNBLFFBQVE7QUFBQSxVQUNOLGNBQWM7QUFBQSxVQUNkLFNBQVM7QUFBQSxZQUNQLE9BQU87QUFBQSxZQUNQLElBQUk7QUFBQSxZQUNKLGFBQWE7QUFBQSxZQUNiLGNBQWM7QUFBQSxZQUNkLGFBQWE7QUFBQSxZQUNiLGFBQWE7QUFBQSxVQUNmO0FBQUEsUUFDRjtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFDQSxNQUFNO0FBQUEsTUFDSixTQUFTO0FBQUEsTUFDVCxhQUFhO0FBQUEsSUFDZjtBQUFBLEVBQ0YsQ0FBQztBQUNIO0FBRUEsSUFBTyxzQkFBUTsiLAogICJuYW1lcyI6IFtdCn0K

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @portaljs/core
 
+## 1.0.6
+
+### Patch Changes
+
+- [#958](https://github.com/datopian/portaljs/pull/958) [`c4bf5bd0`](https://github.com/datopian/portaljs/commit/c4bf5bd05401982125750e61a27ed31f9bb14a4d) Thanks [@olayway](https://github.com/olayway)! - Add basic Hero component.
+
 ## 1.0.5
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/core",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Core Portal.JS components, configs and utils.",
   "repository": {
     "type": "git",

packages/core/src/ui/Hero/Hero.tsx

@@ -0,0 +1,90 @@
+interface Button {
+    title: string;
+    href: string;
+    type: 'filled' | 'text'
+}
+
+export interface HeroProps {
+    title: string;
+    subtitle?: string;
+    announcement?: {
+        title: string;
+        href?: string;
+    };
+    buttons?: Array<Button>
+}
+
+const buttonStyle = {
+    'filled': "rounded-md bg-secondary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-secondary/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
+    'text': "text-sm font-semibold leading-6"
+}
+
+
+export const Hero: React.FC<HeroProps> = ({ title, subtitle, announcement, buttons }) => {
+
+    return (
+        <div className="text-primary dark:text-primary-dark">
+            <div className="relative isolate px-6 pt-14 lg:px-8">
+                {/* <div
+                    className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+                    aria-hidden="true"
+                >
+                    <div
+                        className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#38bdf8] to-[#89a8fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                        style={{
+                            clipPath:
+                                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                        }}
+                    />
+                </div> */}
+                <div className="mx-auto max-w-2xl py-16 sm:py-32 lg:py-40">
+                    {announcement && (
+                        <div className="hidden sm:mb-8 sm:flex sm:justify-center">
+                            <div className="relative rounded-full px-3 py-1 text-sm leading-6 ring-1 ring-primary/20 hover:ring-primary/30 dark:ring-primary-dark/30 dark:hover:ring-primary-dark/40">
+                                {announcement.title}{' '}
+                                <a href="#" className="font-semibold text-secondary">
+                                    <span className="absolute inset-0" aria-hidden="true" />
+                                    Read more <span aria-hidden="true">&rarr;</span>
+                                </a>
+                            </div>
+                        </div>
+                    )}
+                    <div className="text-center">
+                        <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
+                            {title}
+                        </h1>
+                        {subtitle && (
+                            <p className="mt-6 text-lg leading-8 text-primary/90 dark:text-primary-dark/80">
+                                {subtitle}
+                            </p>
+                        )}
+                        {buttons && buttons.length && (
+                            <div className="mt-10 flex items-center justify-center gap-x-6">
+                                {buttons.map((b) => (
+                                    <a
+                                        href={b.href}
+                                        className={buttonStyle[b.type]}
+                                    >
+                                        {b.title}
+                                    </a>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+                {/* <div
+                    className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+                    aria-hidden="true"
+                >
+                    <div
+                        className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#89a8fc] to-[#38bdf8] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+                        style={{
+                            clipPath:
+                                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                        }}
+                    />
+                </div> */}
+            </div>
+        </div>
+    )
+}

packages/core/src/ui/Hero/index.ts

@@ -0,0 +1 @@
+export { Hero } from "./Hero"

packages/core/src/ui/index.ts

@@ -18,5 +18,5 @@ export { BlogLayout } from "./BlogLayout";
 export { Mermaid } from "./Mermaid";
 export { SiteToc, NavItem, NavGroup } from "./SiteToc";
 export { Comments, CommentsConfig } from "./Comments";
-
 export { AuthorConfig } from "./types";
+export { Hero } from "./Hero";

site/components/MDXPage.tsx

@@ -1,20 +1,21 @@
 import { MDXRemote } from 'next-mdx-remote';
+import { NextSeo } from 'next-seo';
 import layouts from 'layouts';
 import DocsPagination from './DocsPagination';
-import { NextSeo } from 'next-seo';
+import { Hero } from "@portaljs/core";
 
 export default function MDXPage({ source, frontMatter }) {
-  const Layout = ({ children }) => {
-    const layoutName = frontMatter?.layout || 'default';
-    const LayoutComponent = layouts[layoutName];
+    const Layout = ({ children }) => {
+        const layoutName = frontMatter?.layout || 'default';
+        const LayoutComponent = layouts[layoutName];
 
-    return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
-  };
+        return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
+    };
 
 
-  return (
-    <Layout>
-      <MDXRemote {...source} components={{ DocsPagination, NextSeo }} />
-    </Layout>
-  );
+    return (
+        <Layout>
+            <MDXRemote {...source} components={{ DocsPagination, NextSeo, Hero }} />
+        </Layout>
+    );
 }

site/config/siteConfig.ts

@@ -1,4 +1,4 @@
-import { defaultConfig } from "@flowershow/core";
+import { defaultConfig } from "@portaljs/core";
 import userConfig from "../content/config";
 
 export const siteConfig: any = {

site/content/blog/create-a-simple-catalog-of-anything.md

@@ -0,0 +1,201 @@
+---
+title: Create a catalog of anything using Markdown files in Obsidian
+date: 2023-05-30
+authors: ['Ola Rubaj']
+filetype: 'blog'
+---
+
+![[dataview.gif]]
+
+Have you ever wanted to create a catalog of stuff? Maybe it's a list of personal projects, maybe favourite books or movies, or perhaps the options for the next smartphone you'll buy. But you've found yourself deterred by expensive software, lack of flexibility in capturing and modifying the structure of the data, or lack of control over it?
+
+Markdown files, with their unique combination of 1) rich content, including text, images, links, and more, with 2) structured metadata allowing for data retrieval, are an excellent tool for this task. These features, coupled with the user-friendly interface of Obsidian and the analytical power of the Dataview plugin, make creating a data catalog an easy task. And it's free!
+
+This tutorial will provide you with an easy yet extendable approach to creating your personal data catalogs using Markdown, in Obsidian.
+
+## What are we going to build?
+
+In this tutorial, we're going to create a catalog of characters from the Harry Potter series. Each character will have their own markdown file containing some unstructured data like character's quotes, as well as structured metadata, such as the character's name, house, creature they own, and status (alive or dead).
+
+## Step 1: Setup
+
+Here are the steps to get you started:
+
+1. Download and install Obsidian from their [official website](https://obsidian.md/).
+2. Create a new Obsidian vault.
+   1. Open the app.
+   2. Click the "New" button to create a new vault.
+   3. Choose a name and a location for your vault. For this tutorial, you might name it "Harry Potter Characters".
+   4. Click "Create" to create the vault.
+3. Install the ["Dataview" plugin](https://github.com/blacksmithgu/obsidian-dataview) from Obsidian's community plugins.
+   1. Open the newly created vault in Obsidian.
+   2. Click on the settings icon ⚙️ in the left-hand pane to open the Settings view.
+   3. In the Settings view, find the "Community plugins" section and click on it.
+   4. Click on the button "Turn on community plugins".
+   5. Click on "Browse" and search for "Dataview" in the plugin browser.
+   6. Click on "Install" to install the Dataview plugin.
+   7. After the plugin is installed, click on "Enable" to enable the plugin in your vault.
+
+## Step 2: Add some data about the characters
+
+Let's start by creating a subfolder in our Obsidian vault, that will store all the markdown files with our characters data. Let's name it e.g. `/characters`. Then, we're going to create three markdown files in it for data about Harry Potter, Hermione, and Malfoy.
+
+Here's an example file for Harry Potter:
+
+```md
+---
+name: Harry Potter
+house: Gryffindor
+status: Alive
+---
+
+## Quotes
+
+"I solemnly swear I am up to no good."
+```
+
+Here's an example file for Hermione:
+
+```md
+---
+name: Hermione Granger
+house: Gryffindor
+status: Alive
+---
+
+## Quotes
+
+"Books! And cleverness! There are more important things - friendship and bravery."
+```
+
+Here's an example file for Malfoy:
+
+```md
+---
+name: Draco Malfoy
+house: Slytherin
+status: Alive
+---
+
+Draco Malfoy is Harry's rival and a member of Slytherin House.
+
+## Quotes
+
+"My father will hear about this!"
+```
+
+By the end of this step you should end up with the following folder structure:
+
+```
+Harry Potter Characters
+└── characters
+    ├── Harry Potter.md
+    ├── Hermione.md
+    └── Malfoy.md
+```
+
+## Step 3: Create a data catalog
+
+Now let's create a data catalog of our Harry Potter characters!
+
+In the root of our vault, let's create a file called `Catalog` (but you can name it whatever you want) that's going to display a table with all our characters and their metadata. Inside it, we're going to write the following code block with a simple Dataview query:
+
+````md
+```dataview
+table name, house, status
+from "characters"
+sort name asc
+```
+````
+
+Let's break it down:
+
+- `table name, house, status`: This line instructs Dataview to create a table that includes columns for "name", "house", and "status". These are fields that you should have defined in your markdown files' frontmatter, but you don't have to. For any missing field Dataview will just display `-`.
+- `from "characters"`: This tells Dataview to pull the data from all markdown files located in the `/characters` folder in your Obsidian vault.
+- `sort name asc`: This command sorts the data based on the "name" field, in ascending order.
+
+After you click somewhere outside of this code block, you should see the following table:
+
+![[table1.png]]
+
+## Step 4: Add more metadata about characters
+
+We can continue to add more information about our characters. For example, let's add creatures each character owns:
+
+```md=
+---
+name: Harry Potter
+...
+creature: Hedwig (Owl)
+---
+
+...
+
+---
+
+name: Hermione Granger
+...
+creature: Crookshanks (Cat)
+---
+
+...
+
+```
+
+Now, if we want to show this field in our Dataview table, we need to add it to the first line of our dataview code block:
+
+````md
+```dataview
+table name, house, status, creature
+from "characters"
+sort name asc
+```
+````
+
+After clicking somewhere outside the code block, you should see an updated table that includes the column `creature`.
+
+![[table2.png]]
+
+## Step 5: Enrich content with images and links
+
+To enhance your catalog, you can add images of characters, and links to other characters in your markdown content.
+
+#### Add images
+
+To add an image of a character, right-click on the image you want to embed and copy it to clipboard - you can use the image below - and paste it directly in your markdown file.
+
+![[harry_original.png]]
+
+Obsidian will automatically save the file to the root of your vault and create a link to it in your content, so you'll end up with a link similar to this one:
+
+```md
+![[Pasted image 20230525212302.png]]
+```
+
+Which will render as:
+
+![[harry.png]]
+
+#### Add links to other pages
+
+Obsidian allows you to create links between different notes (or in this case, characters). To add a link to another character, use the double bracket `[[]]` syntax.
+
+For example, if you're writing about Harry Potter and want to mention that he is friends with Hermione, you can link to Hermione's markdown file like this:
+
+```md
+He is a friend of [[Hermione]].
+```
+
+When you click on Hermione's name in the rendered link, Obsidian will take you to Hermione's file in your vault. If you hover over it, you'll see a preview of Hermione's file:
+
+![[link-preview.png]]
+
+## Summary
+
+And there you have it! We've walked through the process of creating a personal data catalog using markdown files, the Obsidian application, and its Dataview plugin. We've transformed scattered data into a well-organized, easy-to-navigate, and visually pleasing catalog. Whether you've used our example of a Harry Potter character catalog or applied these steps to a different topic of your choosing, we hope you've found this tutorial helpful and empowering.
+
+Happy data cataloging!
+
+---
+
+You can find the [vault created in this tutorial here](https://github.com/datopian/markdowndb/tree/main/examples/obsidian-dataview).

site/content/blog/create-a-website-from-scratch.md

@@ -0,0 +1,190 @@
+---
+title: 'Tutorial 1: Create a website from scratch using Markdown and PortalJS'
+date: 2023-06-20
+authors: ['Ola Rubaj']
+filetype: 'blog'
+---
+
+In this tutorial we will walk you through creating an elegant, fully functional website written in simple markdown and published with PortalJS.
+
+By the end of this tutorial you will:
+
+- have a working markdown-based website powered by PortalJS.
+- be able to edit the text and add pages, all from an online interface without installing anything.
+
+Below is a screenshot of how the final website will look like:
+![[tutorial-1-result.png]]
+
+## Prerequisites
+
+- A [GitHub](https://github.com/) account.
+- A [Vercel](https://vercel.com/) account. You can set it up using your GitHub account.
+
+## Setting up a sandbox website
+
+### 1. Navigate to the [datopian/flowershow repository](https://github.com/datopian/flowershow).
+
+### 2. Scroll down and click on the "Deploy" button
+
+After clicking on it, you'll be redirected to Vercel's "Create Git Repository" page.
+
+![Step 2 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/35cb9df6-d93e-4ce6-9741-54be744cf9e7/55ca0e14-6780-40e3-9ecc-148a7fa7c08e.png?crop=focalpoint&fit=crop&fp-x=0.0945&fp-y=0.4783&fp-z=2.5970&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=162&mark-y=440&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNjUmaD03MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+### 3. Select your GitHub account in "Git Scope"
+
+Click on "Select Git Scope" dropdown and select your GitHub account name from the list if it's there.
+
+![Step 3 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/bdd61961-e1fe-4282-abec-75ae66bfeaa5/85df39b9-51a8-410a-a83b-93f2d2d6256c.png?crop=focalpoint&fit=crop&fp-x=0.2455&fp-y=0.4226&fp-z=1.4615&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=94&mark-y=427&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NzQmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+If your GitHub account is not available in the dropdown list, click on "Add GitHub Account"...
+
+![Step 3 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/879ebed5-fec7-443e-8be9-66b73a4ec044/583f8a42-fc35-43d8-b791-70e22976ed46.png?crop=focalpoint&fit=crop&fp-x=0.2455&fp-y=0.5030&fp-z=1.5031&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=113&mark-y=429&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NTkmaD05NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+...and authorize Vercel to access your GitHub repositories by clicking "Install".
+
+![Step 3 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/61441f7d-ccc4-45ca-b52d-4ccc0573d787/ff97c393-2fff-407e-abe2-bc96c18562cc.png?crop=focalpoint&fit=crop&fp-x=0.2922&fp-y=0.7621&fp-z=2.4427&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=440&mark-y=385&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMjEmaD0xMjgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+Now you can select your GitHub account.
+
+![Step 3 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/d2382391-f4bc-4ffe-b8e8-e22b9f6550ad/f4817109-ae2e-49f9-98ad-2f8dfe9a5b3b.png?crop=focalpoint&fit=crop&fp-x=0.2455&fp-y=0.5833&fp-z=1.5031&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=113&mark-y=429&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NTkmaD05NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+### 4. Give your repository a name
+
+A good practice is to use lowercase and dashes.
+
+![Step 4 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/a9b6af4c-4645-4b93-9c28-75d23e7f48a3/55dcaf47-8851-4808-ab9e-6fe6c4d552aa.png?crop=focalpoint&fit=crop&fp-x=0.6919&fp-y=0.4929&fp-z=1.7767&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=57&mark-y=416&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDg2Jmg9MTIxJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)
+
+### 5. Click on "Create" and wait until the site deploys
+
+After you click "Create", Vercel will create a new repository on your GitHub account, using the `datopian/flowershow` repository as a template. Then, it will immediately start buidling the initial version of your website. This may take about 1-2 minutes.
+
+![Step 5 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/ae740310-736d-48e5-9fbf-cf567a2ff966/2bc653a7-0e6c-4eaa-a11b-85a2a4d4c1d3.png?crop=focalpoint&fit=crop&fp-x=0.5007&fp-y=0.5152&fp-z=1.0564&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=33&mark-y=379&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTM0Jmg9MTk1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)
+
+### 6. See your published website!
+
+And voila! Your site is up and running. Once on the "Congratulations" screen, navigate to the project dashboard...
+
+![Step 6 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/1df8967e-2bcf-43ec-b3d0-a9d638d21ff7/af6d363d-2872-4a45-b5e5-16ca754e4702.png?crop=focalpoint&fit=crop&fp-x=0.5005&fp-y=0.3351&fp-z=1.8197&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=328&mark-y=414&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NDUmaD0xMjQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+... and click on "Visit" to see your published website!
+
+![Step 6 screenshot](https://images.tango.us/workflows/9bef984b-9dd1-4c07-ae32-88bb426c306e/steps/319f8eef-5007-4885-a3d6-6dc7fd7472ea/80b34413-f7da-4765-90d6-89a93fb4eab5.png?crop=focalpoint&fit=crop&fp-x=0.0697&fp-y=0.3482&fp-z=2.5500&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=72&mark-y=390&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yODImaD0xNzQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+## Editing a page on your website
+
+Once your site is up and running, the next step is to customize it to your liking. Let's start by editing our home page.
+
+### 1. Navigate to the repository of your website on GitHub
+
+You can get there by going to GitHub, clicking on your profile icon, and going to "Your repositories".
+
+![Step 1 screenshot](https://images.tango.us/workflows/5b5166f4-2965-4a91-9bec-47108fe34234/steps/adecdf18-e46a-4003-984e-1dc1945963df/6792cf00-20fc-4e24-88ca-8d35a41aadab.png?crop=focalpoint&fit=crop&fp-x=0.9589&fp-y=0.0345&fp-z=3.0108&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=992&mark-y=53&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMjAmaD05MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+![Step 1 screenshot](https://images.tango.us/workflows/5b5166f4-2965-4a91-9bec-47108fe34234/steps/8578ff07-5dc9-4908-bc81-197293970344/9b01a3fb-47fe-48ed-a7bc-c9910e9e42ef.png?crop=focalpoint&fit=crop&fp-x=0.8963&fp-y=0.1997&fp-z=2.9422&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=553&mark-y=420&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NjImaD0xMTImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+Or, you can navigate to [your Vercel dashboard](https://vercel.com/dashboard), select your project in the "Overview" tab...
+
+![Step 1 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/b7f96b7d-28b1-4366-b889-681b327b5f40/a0d2bffd-2e81-4878-854b-0766cf710339.png?crop=focalpoint&fit=crop&fp-x=0.2578&fp-y=0.4408&fp-z=1.3063&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=39&mark-y=274&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03MzAmaD00MDQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+...and click on "Git Repository". You'll be redirected to the repository of your website on GitHub.
+
+![Step 1 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/2cfbda16-23dc-45b2-9be9-a4b5b3a255d1/da2be1ca-da13-4257-a830-3ece2b89ff51.png?crop=focalpoint&fit=crop&fp-x=0.4560&fp-y=0.4590&fp-z=1.1707&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=321&mark-y=313&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMjYmaD04MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+### 2. Navigate to the "content" folder
+
+This is where all the Markdown-based pages live in a Flowershow-based project.
+
+![Step 2 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/4ce5b74e-40e5-4c3f-a3ce-be7fa8959489/25b9ddc8-c1df-44f8-bf3e-7d08960f0592.png?crop=focalpoint&fit=crop&fp-x=0.0900&fp-y=0.4574&fp-z=2.8680&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=226&mark-y=441&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNjgmaD03MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+### 3. Edit the "index.md" file
+
+The homepage on your website is built with the "index.md" file in the root of the "content" folder. Click on it to open.
+
+![Step 3 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/b14c059d-89e4-419b-8ac4-0e219ed195af/4d86a32a-b5f8-48d1-bccd-ddbfd140fe5a.png?crop=focalpoint&fit=crop&fp-x=0.0754&fp-y=0.4711&fp-z=2.7997&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=157&mark-y=442&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xOTImaD02OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+Then, click on the "Edit this file" icon...
+
+![Step 3 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/e4d28cd5-3863-46e3-813d-5304ec0d769f/ce2bf765-9bef-4d96-8354-0eed3aa88c03.png?crop=focalpoint&fit=crop&fp-x=0.9435&fp-y=0.3449&fp-z=2.9525&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=945&mark-y=422&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDkmaD0xMDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+... and add some content.
+
+![Step 3 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/daad6528-db93-426c-8b8b-ae67d0a28189/a5767c01-a16e-4c4b-b4a0-5595663b175d.png?crop=focalpoint&fit=crop&fp-x=0.5170&fp-y=0.3762&fp-z=1.0470&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=7&mark-y=300&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTg2Jmg9MTUwJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)
+
+### 4. Save your changes
+
+To see your changes live, you need to "commit" them. Click on "Commit changes..." buttom in the top-tight corner.
+
+![Step 4 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/74159a33-2897-4ffb-af3d-ce2fa109e570/0e96f7a4-b4ff-418e-9b44-73573a4354d1.png?crop=focalpoint&fit=crop&fp-x=0.9227&fp-y=0.2208&fp-z=2.9167&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=696&mark-y=417&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NjgmaD0xMTkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+In the "Commit message" field add a concise description of your changes. Optionally, if the commit message is not enough, you can add more info in the "Extended description" field.
+
+![Step 4 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/09130863-221f-436e-bab0-a46bea2fd5c4/bdbd1458-3b5c-4352-a8fb-5921132ee3e4.png?crop=focalpoint&fit=crop&fp-x=0.4998&fp-y=0.3476&fp-z=1.4555&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=262&mark-y=447&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NzYmaD01OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+Leave "Commit directly to `main` branch" selected and click on "Commit changes". Doing that will trigger rebuilding of your site on Vercel.
+
+![Step 4 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/40bf87e4-a2b1-4a99-97da-5e87530d0622/88a19d05-ce63-4da0-9e85-e427b063245e.png?crop=focalpoint&fit=crop&fp-x=0.5545&fp-y=0.5989&fp-z=1.3207&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=612&mark-y=616&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDcmaD01NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+### 5. See your site getting rebuild
+
+If you want to see the current progress of rebuilding your website after you've commited the changes, click on the dot next to your commit message.
+
+> [!note]
+> It will be either a dot (if the site is currently being rebuilt after your changes), a check mark (if the site has finished building) or a cross (if something went wrong when rebuilding it).
+
+![Step 5 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/0d273173-d852-47e4-b41e-418b9196e0fd/fbf1afe6-7af3-4b06-8ab0-d3c41d2923ce.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n)
+
+Click on "Details" to see your project's deployment status on Vercel.
+
+![Step 5 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/94b4e4ab-458c-4be9-b7a9-e34c7b4185b9/645687a4-b91d-4870-a935-48403b8ce33c.png?crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n)
+
+### 6. Preview your site after changes
+
+Once the site has been rebuilt, click the preview to see your changes live.
+
+![Step 6 screenshot](https://images.tango.us/workflows/4aa9bd80-6829-415e-b3a8-6136bfb176eb/steps/a1294580-7d0d-492c-a880-32040b4bee48/5e7ddd43-03e3-4545-b1b3-cd631da401d8.png?crop=focalpoint&fit=crop&fp-x=0.2207&fp-y=0.3824&fp-z=1.4465&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=43&mark-y=261&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NzkmaD00MzEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+## Add a single Markdown-based page
+
+### 1. Navigate to the "content" folder in your website's repository
+
+See how to find it in the previous section.
+
+### 2. Create new file
+
+Click on "Add file"...
+
+![Step 2 screenshot](https://images.tango.us/workflows/c14ae6dc-9e15-49f5-af87-b513daa701ba/steps/1708e4fa-8234-4393-a8e9-cd972afce770/b986ab26-d53f-4b57-8520-fb87782dfb22.png?crop=focalpoint&fit=crop&fp-x=0.9119&fp-y=0.2208&fp-z=2.9167&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=737&mark-y=417&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMDkmaD0xMTkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+...and "Create new file".
+
+![Step 2 screenshot](https://images.tango.us/workflows/c14ae6dc-9e15-49f5-af87-b513daa701ba/steps/e79d32ef-9385-4903-8ca1-408f78752633/7006ac1c-796c-4bb6-95ef-dd4d9969c9b6.png?crop=focalpoint&fit=crop&fp-x=0.8712&fp-y=0.2679&fp-z=2.9167&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=476&mark-y=417&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NDcmaD0xMTkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+### 3. Type the name of the new file you want to create
+
+![Step 3 screenshot](https://images.tango.us/workflows/c14ae6dc-9e15-49f5-af87-b513daa701ba/steps/54c786cb-15d6-4abe-8893-fa95dff3ed0a/c39152b2-f446-4e39-a2f3-9b3cf0e7c193.png?crop=focalpoint&fit=crop&fp-x=0.3476&fp-y=0.2214&fp-z=2.1864&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=394&mark-y=418&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MTMmaD04NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+### 4. Write the content of the file
+
+![Step 4 screenshot](https://images.tango.us/workflows/c14ae6dc-9e15-49f5-af87-b513daa701ba/steps/8ffe1e8c-45f9-42b7-8053-bc8bc61b098c/56489034-d5a9-495e-8fb7-1fbfff62d7f3.png?crop=focalpoint&fit=crop&fp-x=0.5170&fp-y=0.3440&fp-z=1.0470&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=7&mark-y=300&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTg2Jmg9ODYmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+### 5. Save your changes
+
+To see your changes live, you need to "commit" them. Click on "Commit changes..." buttom in the top-tight corner.
+
+![Step 5 screenshot](https://images.tango.us/workflows/c14ae6dc-9e15-49f5-af87-b513daa701ba/steps/382d133d-19f3-4aee-a0fa-535fcb361090/fe7b1fc6-c8f0-4f3f-958a-204c4fc65cf8.png?crop=focalpoint&fit=crop&fp-x=0.9227&fp-y=0.2208&fp-z=2.9167&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=696&mark-y=417&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NjgmaD0xMTkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
+
+In the "Commit message" field add a concise description of your changes. Optionally, if the commit message is not enough, you can add more info in the "Extended description" field.
+
+![Step 5 screenshot](https://images.tango.us/workflows/c14ae6dc-9e15-49f5-af87-b513daa701ba/steps/13c5873d-4071-4ae2-b641-d6202631076c/53029856-5543-4681-919a-092ed2dacb02.png?crop=focalpoint&fit=crop&fp-x=0.4998&fp-y=0.3476&fp-z=1.4555&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=262&mark-y=447&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NzYmaD01OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+Leave "Commit directly to `main` branch" selected and click on "Commit changes". Doing that will trigger rebuilding of your site on Vercel.
+
+![Step 5 screenshot](https://images.tango.us/workflows/c14ae6dc-9e15-49f5-af87-b513daa701ba/steps/68002c21-451a-4536-89b6-8a0d01d327eb/bb71cbb3-7a79-45f3-a71e-2500a380556c.png?crop=focalpoint&fit=crop&fp-x=0.6278&fp-y=0.7315&fp-z=2.3207&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=418&mark-y=428&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNjUmaD05NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
+
+### 6. Preview your site after changes
+
+As you already know, Vercel will now start rebuilding your website. When it's done, you can navigate to `/about` url on your website to see the new file we've just added.
+
+## What's next?
+
+While editing on GitHub UI is acceptable, it has its limitations – it doesn't support working offline, adding multiple files simultaneously, or previewing many markdown syntax elements supported by Flowershow-based websites. We'll delve into these issues and solutions to overcome them in our next tutorial. Stay tuned!

site/content/blog/example-ckan-2021.md

@@ -1,5 +1,5 @@
 ---
-title: "PortalJS example 1: Create a full-featured custom data portal frontend for CKAN with PortalJS"
+title: "Setup Guide: How to create a full-featured custom data portal frontend for CKAN with PortalJS"
 authors: ['Luccas Mateus']
 date: 2021-04-20
 ---

site/content/blog/markdowndb-basics-tutorial-2023.md

@@ -142,7 +142,7 @@ process.exit(0);
 
 Since we're using ES6 modules, we also need to add `"type": "module"` to our `package.json` file.
 
-Before we run the above script, we need to make sure that the `dbPath` variable is pointing to our `markdown.db` file. If you want to store the database outside of your project folder, you can update the `dbPath` variable to point to the correct location. If you want to have it inside your project folder, you can copy it there, or simply re-run the `npx mddb` {'<'}path-to-markdown-folder{'>'}` command from within your project folder.
+Before we run the above script, we need to make sure that the `dbPath` variable is pointing to our `markdown.db` file. If you want to store the database outside of your project folder, you can update the `dbPath` variable to point to the correct location. If you want to have it inside your project folder, you can copy it there, or simply re-run the `npx mddb <path-to-markdown-folder>` command from within your project folder.
 
 Now, let's run the script:
 

site/content/config.js

@@ -20,7 +20,8 @@ const config = {
     // { name: "Components", href: "/docs/components" },
     { name: "Blog", href: "/blog" },
     { name: "Showcases", href: "/#showcases" },
-    { name: "Howtos", href: "/howto" },
+    { name: "Howtos", href: "/howtos" },
+    { name: "Guide", href: "/guide" },
     { name: "Examples", href: "https://github.com/datopian/portaljs/tree/main/examples", target: "_blank" },
     { name: "Components", href: "https://storybook.portaljs.org", target: "_blank" },
     // { name: "DL Demo", href: "/data-literate/demo" },

site/content/docs/examples/ckan-ssg.md

@@ -1,5 +1,5 @@
 ---
-title: "Example: Data catalog with data on CKAN"
+title: "Setup Guide: Create a data catalog with PortalJS and CKAN to share your data stories"
 authors: ['Luccas Mateus']
 date: 2023-04-20
 filetype: blog

site/content/docs/examples/github-backed-catalog.md

@@ -1,5 +1,5 @@
 ---
-title: "Example: Data catalog with data on GitHub"
+title: "Setup Guide: Create a data catalog to display and share your GitHub datasets with PortalJS"
 authors: ['Luccas Mateus']
 date: 2023-04-20
 filetype: blog

site/content/guide/index.md

@@ -0,0 +1,57 @@
+---
+showToc: false
+showSidebar: false
+---
+
+<Hero title="Markdown-based Websites" subtitle="Create markdown-based website, update it, add collaborators and discover markdown superpowers" />
+
+# Tutorial 1: Create a website from scratch using markdown and PortalJS
+
+In this tutorial we will walk you through creating an elegant, fully functional website written in simple markdown and published with PortalJS.
+
+By the end of this tutorial you will:
+
+- have a working markdown-based website powered by PortalJS.
+- be able to edit the text and add pages, all from an online interface without installing anything.
+
+Below is a screenshot of how the final website will look like:
+![[tutorial-1-result.png]]
+
+### Setup a sandbox website including live publishing
+
+- Prerequisites: sign up for GitHub and Vercel
+- Navigate to [datopian/flowershow repository](https://github.com/datopian/flowershow)
+- Click on "Deploy"
+- Let the site build on Vercel
+- Visit the site! Yay! Your site is working! 🎉
+
+### Now, let's edit the front page
+
+- Navigate to `content/index.md` file in the site repository
+- Add some text to it
+- Save and watch the site redeploy
+- Visit the site! Yay! Your changes are live! 🎉
+
+### Let's add a page: e.g. about page
+
+- Navigate to the `content` folder in the site repository
+- Add `about.md` file with some text
+- Save and watch the site redeploy
+- Visit the site! Yay! Your changes are live! 🎉
+
+> [!tip]
+> Read full tutorial [[create-a-website-from-scratch|here!]]
+
+# Tutorial 2: Editing your site locally on your computer
+
+### What is this markdown stuff?
+
+- Idea of "markup" - how is this different from plain text
+- Brief info about markdown
+- Link to markdown tutorials
+- Explain we offer "markdown plus"
+- ?? Explain about PFM (vs GFM ...)
+
+### Why go local?
+
+While editing on GitHub UI is acceptable, it has its limitations – it doesn't support working offline, adding multiple files simultaneously, or previewing many markdown syntax elements supported by Flowershow-based websites.

site/content/howto/index.md

@@ -1,12 +0,0 @@
-# Guides and tutorials
-
-- [[howto/analytics|How to add web analytics?]]
-- [[howto/seo|How to customize page metadata for SEO?]]
-- [[howto/sitemap|How to build a sitemap?]]
-- [[howto/markdown|How to add markdown-based content pages?]]
-- [[howto/blog|How to add a simple blog?]]
-- [[howto/drd|How to create data-rich documents with charts and tables?]]
-- [[howto/comments|How to add user comments?]]
-
-If you have questions about anything related to PortalJS, you're always welcome to ask our community on [GitHub Discussions](https://github.com/datopian/portaljs/discussions) or on [our chat channel on Discord](https://discord.gg/EeyfGrGu4U).
-

site/content/howtos/add-a-simple-md-page.md

@@ -0,0 +1,34 @@
+---
+title: How to quickly add a simple Markdown-based page
+---
+
+Welcome to this tutorial on how to quickly add a simple Markdown-based page to your website.  The steps here are designed for non-technical contributors. There's no need to know how to code!
+
+> [!important]
+> This "How to" is only recommended for very simple Markdown pages, e.g. those without images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode. 
+
+>[!tip]
+> If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements.
+
+## Steps
+
+1. Go to the repository of your website in GitHub.
+2. Click on the `content` folder to open it. This is where all the Markdown files for a Flowershow-based website are stored.
+3. Optionally, navigate to a subfolder where you want to add your page.
+4. Click “Add file” and write the page name + extension `.md`, e.g. `my-new-page.md`.
+
+> [!tip]
+> If you want to add your page to a new subfolder, in the "Name your file..." field, first type the name of the new subfolder, followed by a forward slash, .e.g., `blog/`. After you hit the slash, you'll see the name field gets cleared, but the path before it has been extended with your subfolder name. You can repeat this process if you want to put your file into further nested subfolders. Then, simply type the name of the file with ".md" extension.
+
+5. Paste or write the contents of the file in Markdown format. 
+6. (Optionally) Switch to the "Preview" mode, by toggling from "Edit" -> "Preview" at the top of the file content, to see a rough visualisation of your changes. Keep in mind though, that the actual website may have different styling and may support additional Markdown elements that GitHub doesn't render on the preview.
+5. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes."
+6. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live.
+
+## Summary
+
+Congratulations, you've now learned how to create a new Markdown page on your Flowershow-based website. 
+
+If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know. 
+
+Happy editing!

site/content/howtos/add-or-edit-content-on-life-itself-ecosystem.md

@@ -0,0 +1,160 @@
+---
+title: How to add or edit content on the Life Itself ecosystem page
+isDraft: true
+---
+
+## Contents
+
+1. [Introduction](#introduction)
+2. [How to edit and add to the site](#how-to-edit-and-add-to-the-site)
+3. [Glossary](#glossary)
+4. [Contact](#contact)
+
+## Introduction
+
+From the outset, we have argued that any successful mapping effort must be collaborative and participatory. To make it as simple as possible to contribute, we have opened up the site, giving it a wiki-like structure, meaning people can contribute and add items directly - no coding required. We hope this can support the ongoing growth of our contributor community, and empower users to continue in collective efforts to make the map ever more useful and informative.
+
+We have included information on how the site works and its technical architecture. If you’re wanting to get stuck in, feel free to skip over this section and go straight to our instructions on [how to edit and add to the site](#how-to-edit-and-add-to-the-site) - you can always refer back if you need to!
+
+### How does the site work?
+
+All the content for the [Polycrisis Action Mapping](https://ecosystem.lifeitself.us/) site is contained within the life-itself/ecosystem [Github repo](https://github.com/life-itself/ecosystem).
+
+![](../img/repo-homepage.png)
+
+#### Technical Architecture
+
+The website is written in [Markdown](#markdown). A tool called content layer converts the Markdown files into HTML (the standard computer language for displaying and formatting web pages) so that they are displayed as pages on the site. This is the case for all pages on the website except for the homepage which is written directly in HTML.
+
+#### Markdown
+
+Markdown is a markup language (computer language for displaying and formatting web pages), which is designed to be easy to write and easy to read. It’s widely deployed on the web, for example by DataHub, GitHub, Stackoverflow and many other sites.
+
+In Markdown, you control the display of the document. For instance, you can format words as bold or italic, add images, create lists, and much more. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like ## or \*\*.
+
+Head over to our [Markdown Guide](https://playbook.datopian.com/markdown/#why-markdown) to learn more about Markdown and how to use it.
+
+#### Front Matter
+
+In the world of computer programming, front matter is metadata (data about data) at the top of a file. Front matter does two things: a) it displays key info about a page (such as its title and description) in a structured way which helps with a consistent layout throughout the site and b) is used as metadata for SEO (search engine optimization) purposes, helping our content to reach interested readers.
+
+## How to edit and add to the site
+
+There are two methods for making edits to the website:
+
+1. Edit directly in Github
+2. Edit on your local machine (using a code editor or Obsidian)
+
+For reasons of simplicity, in this guide we have only outlined how to edit using Github. If you would like to make edits using a code editor or Obsidian, please refer to our [editors’ guide](https://docs.google.com/document/d/1RcwjaJYn0jtMw9rOR9W0Gv2fmQDd7Fjr53NM6j1-lco/edit#heading=h.vkkc3zo06um7) for our [Web3 site](https://web3.lifeitself.us/) and apply these instructions to the ecosystem repo.
+
+### Edit in Github
+
+#### Setup
+
+- Create a [GitHub](https://github.com/) account if you don’t already have one
+
+#### Key steps
+
+- Go to the repo storing the website content: [https://github.com/life-itself/ecosystem](https://github.com/life-itself/ecosystem)
+- All edits can be made in the main repo - unlike adding content to the site (see below), you can make edits to existing pages without forking the repo.
+- Look for the file that corresponds with the page you want to edit. To find the file, it might help to look at the page URL. E.g. To find the file containing the profile page for 42 Acres ([https://ecosystem.lifeitself.us/profiles/alter-ego](https://web3.lifeitself.us/concepts/blockchain)), go to the folder “content”, then “profiles“, then the file “alter-ego.md”.
+- Click on the pencil icon in the upper right corner to edit this file
+- Make your edits
+- Once you’ve made your edits, go to the bottom of the page where you will see a box titled ‘Propose changes’. Type into the first text box below ‘Propose changes’ a brief description of the edits you have made. E.g. ‘fix typo’, ‘add citation’ or ‘expand definition’. Use the box below that for optional further description of your edits.
+- Then click the button that says ‘Propose changes’.
+- Once you’ve clicked the ‘Propose changes’ button you will be taken to a new page. Here, click the button that says ‘Create pull request’. This will notify a team member to review and confirm the edits you’ve made.
+- Once they’ve done that, your edit will appear on the site! Thanks for contributing!
+
+### Add to the website in Github
+
+- Go to the repo storing the website content: [https://github.com/life-itself/ecosystem](https://github.com/life-itself/ecosystem)
+- Unlike when you are editing an existing page, in order to add a page to the site, you are going to fork the Life Itself ecosystem repo. To do this, click the “Fork” button at the top right of the page.
+- Click the green “Create fork” button
+- You have now created a fork! You can see that you are working in a fork of the repo by looking at the top left of the screen. It should look like this (but with your own user name).
+
+![](../img/fork-repo.png)
+
+- We now recommend that you do all the following steps in the same pull request. That way, you can request all the additions to the site you want to make in one request. But we’re getting ahead of ourselves, let’s add some content!
+
+#### Templates
+
+To add a new profile page, please use the [profiles-template.md](https://github.com/life-itself/ecosystem/blob/main/profiles-template.md) in the ecosystem repo.
+
+To add a new topics page, please use the [topics-template.md](https://github.com/life-itself/ecosystem/blob/main/topics-template.md) in the ecosystem repo.
+
+Copy the raw contents from the relevant template by clicking the icon with 2 squares overlapping.
+
+#### Adding a page
+
+##### Create the page
+
+- In your fork of the ecosystem repo, go to the folder “content”, then select the folder representing the type of page you want to add, eg “profiles” or “topics”.
+- Click on the “Add file” button in the upper right corner to add a new page. Select, “create new file”.
+- On the top right, under the “Cancel changes” button is the line wrap mode box. Select “Soft wrap”.
+
+##### Add the frontmatter
+
+- Place your cursor in line with the figure “1”. Then “right click” (two finger click on a mac) and select paste. Alternatively, select command+v to paste. This will paste in your template (ensure the template was the last thing you copied).
+- Fill in the [frontmatter](#frontmatter) with the relevant information. The template that you have copied across will contain information from another organization/topic. We have left this information in place so you can see how the information should be inputted.
+- For a new profile page, the following answers can be left as is, the rest should be tailored to your oragnization.
+  - Notes_data_entry
+  - Curation_status
+- To add a logo and image to your profile:
+  - Save the logo and photo you want to be featured on the profile to your computer. Name these files on your computer something that represents the images (eg organization-name-logo.png and organization-name-image.png).
+  - Copy the name of one of the files you have just made.
+  - Paste the name of the file into the relevant field in the frontmatter for the profile eg logo, cached. Add /img/ to the beginning so it should look like this: logo: cached: /img/organization-name-logo.png
+  - Do the same steps for the other image.
+  - In the url sections of the frontmatter for the logo and image, paste the url of where you downloaded the logo and image from (eg [https://www.facebook.com/AlterEgoNetwork/photos/a.163253037723176/163253617723118/](https://www.facebook.com/AlterEgoNetwork/photos/a.163253037723176/163253617723118/)).
+  - The image and logo fields of the frontmatter should look like this:
+
+![](../img/logo-and-image.png)
+
+- For a new topics page, leave “image” as is. Fill in the rest of the information as appropriate for the topic you are creating the page for. Have fun picking an emoji that you think best represents it!
+- Note: All fields within the frontmatter are optional. Remove (or leave empty) the fields that are not in use to eliminate any errors during build.
+- Name your file. In the box that says “name your file”, paste in the “id” of your page followed by “.md”. Eg for a profile, it should look like this:
+
+![](../img/page-name.png)
+
+##### Adding a description
+
+- Once you have filled in the frontmatter, add a brief description of the topic/organization. Use the example description to guide what your description should contain and how it should be formatted.
+
+##### Check and propose changes
+
+- Once you have filled in the frontmatter and have added a description, check it’s all worked. Click the preview button. It should look like this for a profile:
+
+![](../img/profile-example.png)
+
+- Or this for a topic:
+
+![](../img/topic-example.png)
+
+- Once you’ve checked everything looks fine, and you’re ready to commit the new file, go to the bottom of the page where you will see a box titled ‘Commit new file’. Type into the first text box below a brief description of what you are proposing, eg “add alter-ego.md”. Use the box below that for optional further description of your edits.
+- Now you are going to commit directly to the main branch by clicking the green button that says “Commit new file”.
+- Well done! But you’re not done yet. Remember the logo and image you downloaded to your computer? Now you need to upload them to the repo.
+
+###### Adding an image/logo
+
+- Remaining in your fork of the ecosystem repo, click “content”, then “assets”, then "img". Once here, click on the “Add file” button, then select “Upload files”. Once here, click on the “Add file” button, then select “Upload files”. Upload your two files eg organization-name-logo.png and organization-name-image.png
+- Once you’ve uploaded the images, go to the bottom of the page where you will see a box titled ‘Commit changes’. Type into the first text box below a brief description of what you are proposing, eg “adding images”.
+- Now you are going to commit these images directly to the main branch by clicking the green button that says “Commit changes”.
+
+##### Open pull request
+
+- Now that you’ve committed your new page and the relevant images, you’re ready to open the pull request. Head back to your fork of the ecosystem repo. You should see a box that looks like this:
+
+![](../img/pull-request.png)
+
+- Click the “Contribute button”. Now click the green “Open pull request button”
+- In the box that says “Title”, give a title to your pull request. Something like “Add (name of organization) profile page + images”.
+- Now click the green “Create pull request button”. This will notify a team member to review and confirm the additions you’ve made to the site.
+- Once they’ve done that, your edit will appear on the site! Thanks for contributing!
+
+## Glossary
+
+- Repo => short for [Repository](https://docs.github.com/en/get-started/quickstart/github-glossary#repository). Contains all a project’s files.
+- Working directory => The folder you are currently working in.
+
+## Contact
+
+If you run into any issues while following this guide, please [let us know](https://lifeitself.us/contact/) so we can improve this guide to help future contributors.

site/content/howtos/blog.md

@@ -2,10 +2,10 @@
 
 ## Setup
 
-The following example uses components imported from the [`@flowershow/core` package](https://github.com/datopian/flowershow). If you want to follow along install it too:
+The following example uses components imported from the [`@portaljs/core` package](https://www.npmjs.com/package/@portaljs/core). If you want to follow along install it too:
 
 ```sh
-npm i @flowershow/core
+npm i @portaljs/core
 ```
 
 ## Create home page for your blogs
@@ -13,7 +13,7 @@ npm i @flowershow/core
 Add the following code to the Next.js page that is going to be your blog home page, e.g. to `/pages/blog/index.tsx`:
 
 ```tsx
-import { BlogsList, SimpleLayout } from "@flowershow/core";
+import { BlogsList, SimpleLayout } from "@portaljs/core";
 
 // pass a list of blogs, home page title and home page description, e.g. from `getStaticProps`
 export default function BlogIndex({ blogs, title, description }) {
@@ -47,7 +47,7 @@ interface Blog {
 Add the following code to your blog pages, e.g. to `/pages/blog/[...slug].tsx`:
 
 ```tsx
-import { BlogLayout } from "@flowershow/core";
+import { BlogLayout } from "@portaljs/core";
 
 export default BlogPost({ content, title, date, authors }) {
 	return (

site/content/howtos/comments.md

@@ -12,8 +12,8 @@ Page comments can be setup with any one of the following supported providers:
 
 Each provider has it's own configuration options that you should add to your `.env` file.
 
->[!Info]
->If you are hosting your website on hosting providers like Netlify, Vercel or Cloudflare, you will also need to add the environment variables there.
+> [!Info]
+> If you are hosting your website on hosting providers like Netlify, Vercel or Cloudflare, you will also need to add the environment variables there.
 
 ### Giscus
 
@@ -26,7 +26,7 @@ Each provider has it's own configuration options that you should add to your `.e
 
 Once the above steps are completed, head over to [https://giscus.app](https://giscus.app/) and follow the steps there by filling out the fields to get your config values.
 
->[!important]
+> [!important]
 > Make sure to choose `pathname` under page discussions mapping.
 
 After filling out the fields, you will be provided with a script tag that contains your config values. Add them to your `.env` file, like so:
@@ -75,10 +75,10 @@ NEXT_PUBLIC_DISQUS_SHORTNAME=
 
 ## Add comments to your page layout
 
-You can use `@flowershow/core` to import the comments section component. Install it with:
+You can use `@portaljs/core` to import the comments section component. Install it with:
 
 ```sh
-npm i @flowershow/core
+npm i @portaljs/core
 ```
 
 Then, add the following to your custom layout (or directly to your pages):
@@ -86,21 +86,17 @@ Then, add the following to your custom layout (or directly to your pages):
 ```tsx
 import Navbar from './navbar';
 import Footer from './footer';
- 
+
 export default function Layout({ children }) {
   return (
     <>
-	    <Navbar />
-	    <main>{children}</main>
-	    <div>
-			<Comments commentsConfig={commentsConfig} slug={urlPath} />
-		</div>
-		<Footer />
+      <Navbar />
+      <main>{children}</main>
+      <div>
+        <Comments commentsConfig={commentsConfig} slug={urlPath} />
+      </div>
+      <Footer />
     </>
   );
 }
 ```
-
-## Add user comments
-
-Learn how to add support for user comments in [[comments|this guide]].