[examples/538] - changes requested by demenech

* [#858,site][xl]: add Examples to the Navbar, rename gallery to showcases, remove examples from showcases, move github stars to the navbar, add view on github button to the hero section, reduce padding on buttons, add RHS image to the hero

* [#858,site][xl]: make sidebar consistent on all pages

* [site][xs]: fix ts error on GitHub button component

* [site][xs]: fix external links on navbar needing two clicks to open

* [site, hero][xs]: align RHS image to the top

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

@@ -23,13 +23,8 @@
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.4",
         "@tanstack/react-table": "^8.8.5",
-        "@types/node": "18.16.0",
-        "@types/react": "18.2.0",
-        "@types/react-dom": "18.2.0",
         "autoprefixer": "^10.4.12",
         "clsx": "^1.2.1",
-        "eslint": "8.39.0",
-        "eslint-config-next": "13.3.1",
         "fast-glob": "^3.2.11",
         "feed": "^4.2.2",
         "flexsearch": "^0.7.31",
@@ -61,6 +56,9 @@
         "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",
@@ -552,9 +550,9 @@
       "dev": true
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.2",
+      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
       "peer": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
@@ -584,9 +582,9 @@
       }
     },
     "node_modules/@jridgewell/source-map": {
-      "version": "0.3.2",
+      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
-      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
       "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -600,13 +598,13 @@
       "peer": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.14",
+      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "peer": true,
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/resolve-uri": "3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
@@ -1348,6 +1346,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA==",
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1478,148 +1477,148 @@
       }
     },
     "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
-      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-numbers": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
-      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.6",
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
-      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.1"
+        "@webassemblyjs/wasm-gen": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
-      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
       "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "node_modules/@webassemblyjs/leb128": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
-      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
       "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
     },
     "node_modules/@webassemblyjs/utf8": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
       "peer": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
-      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/helper-wasm-section": "1.11.1",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-opt": "1.11.1",
+        "@webassemblyjs/wasm-opt": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.6",
-        "@webassemblyjs/wast-printer": "1.11.1"
+        "@webassemblyjs/wast-printer": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
-      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
-      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.1"
+        "@webassemblyjs/wasm-parser": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
-      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
-      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
       "peer": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -3651,9 +3650,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.10.0",
+      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz",
-      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
+      "integrity": "sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==",
       "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -3728,9 +3727,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "0.9.3",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+      "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
       "peer": true
     },
     "node_modules/es-shim-unscopables": {
@@ -5410,9 +5409,9 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "node_modules/http-cache-semantics": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
     "node_modules/http-proxy-agent": {
       "version": "4.0.1",
@@ -6118,9 +6117,9 @@
       "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="
     },
     "node_modules/json5": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
       "dependencies": {
         "minimist": "^1.2.0"
@@ -10808,9 +10807,9 @@
       }
     },
     "node_modules/schema-utils": {
-      "version": "3.1.1",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
       "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -10876,9 +10875,9 @@
       "integrity": "sha512-EjnoLE5OGmDAVV/8YDoN5KiajNadjzIp9BAHOhYeQHt7j0UWxjmgsx4YD48wp4Ue1Qogq38F1GNUJNqF1kKKxA=="
     },
     "node_modules/serialize-javascript": {
-      "version": "6.0.0",
+      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -11496,9 +11495,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.14.2",
+      "version": "5.17.3",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.3.tgz",
-      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "integrity": "sha512-AudpAZKmZHkG9jueayypz4duuCFJMMNGRMwaPvQKWfxKedh8Z2x3OCoDqIIi1xx5+iwx1u6Au8XQcc9Lke65Yg==",
       "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
@@ -11514,16 +11513,16 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.3",
+      "version": "5.3.8",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.8.tgz",
-      "integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
+      "integrity": "sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==",
       "peer": true,
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.0",
+        "serialize-javascript": "^6.0.1",
-        "terser": "^5.7.2"
+        "terser": "^5.16.8"
       },
       "engines": {
         "node": ">= 10.13.0"
@@ -12813,22 +12812,22 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack": {
-      "version": "5.74.0",
+      "version": "5.82.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz",
-      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==",
       "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
-        "@types/estree": "^0.0.51",
+        "@types/estree": "^1.0.0",
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "^1.11.5",
-        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
-        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
         "acorn": "^8.7.1",
         "acorn-import-assertions": "^1.7.6",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.10.0",
+        "enhanced-resolve": "^5.13.0",
-        "es-module-lexer": "^0.9.0",
+        "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
@@ -12837,9 +12836,9 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.0",
+        "schema-utils": "^3.1.2",
         "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.3",
+        "terser-webpack-plugin": "^5.3.7",
         "watchpack": "^2.4.0",
         "webpack-sources": "^3.2.3"
       },
@@ -12876,12 +12875,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/@types/estree": {
-      "version": "0.0.51",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-      "peer": true
-    },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -13708,9 +13701,9 @@
       "dev": true
     },
     "@jridgewell/gen-mapping": {
-      "version": "0.3.2",
+      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
       "peer": true,
       "requires": {
         "@jridgewell/set-array": "^1.0.1",
@@ -13731,9 +13724,9 @@
       "peer": true
     },
     "@jridgewell/source-map": {
-      "version": "0.3.2",
+      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
-      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
       "peer": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -13747,13 +13740,13 @@
       "peer": true
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.14",
+      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "peer": true,
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/resolve-uri": "3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
     "@lit-labs/ssr-dom-shim": {
@@ -14279,6 +14272,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA==",
+      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -14361,148 +14355,148 @@
       }
     },
     "@webassemblyjs/ast": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
-      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-numbers": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
       "peer": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
       "peer": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
       "peer": true
     },
     "@webassemblyjs/helper-numbers": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
-      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.6",
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
       "peer": true
     },
     "@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
-      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.1"
+        "@webassemblyjs/wasm-gen": "1.11.6"
       }
     },
     "@webassemblyjs/ieee754": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
-      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
       "peer": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
-      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
       "peer": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
       "peer": true
     },
     "@webassemblyjs/wasm-edit": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
-      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/helper-wasm-section": "1.11.1",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-opt": "1.11.1",
+        "@webassemblyjs/wasm-opt": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.6",
-        "@webassemblyjs/wast-printer": "1.11.1"
+        "@webassemblyjs/wast-printer": "1.11.6"
       }
     },
     "@webassemblyjs/wasm-gen": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
-      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "@webassemblyjs/wasm-opt": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
-      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.1"
+        "@webassemblyjs/wasm-parser": "1.11.6"
       }
     },
     "@webassemblyjs/wasm-parser": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
-      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.6",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.6",
-        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.6",
-        "@webassemblyjs/utf8": "1.11.1"
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
     "@webassemblyjs/wast-printer": {
-      "version": "1.11.1",
+      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
-      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
       "peer": true,
       "requires": {
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "1.11.6",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -15985,9 +15979,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "5.10.0",
+      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz",
-      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
+      "integrity": "sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==",
       "peer": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -16044,9 +16038,9 @@
       }
     },
     "es-module-lexer": {
-      "version": "0.9.3",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+      "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
       "peer": true
     },
     "es-shim-unscopables": {
@@ -17305,9 +17299,9 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "http-cache-semantics": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
     "http-proxy-agent": {
       "version": "4.0.1",
@@ -17794,9 +17788,9 @@
       "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="
     },
     "json5": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
       "requires": {
         "minimist": "^1.2.0"
@@ -21048,9 +21042,9 @@
       }
     },
     "schema-utils": {
-      "version": "3.1.1",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
       "peer": true,
       "requires": {
         "@types/json-schema": "^7.0.8",
@@ -21096,9 +21090,9 @@
       "integrity": "sha512-EjnoLE5OGmDAVV/8YDoN5KiajNadjzIp9BAHOhYeQHt7j0UWxjmgsx4YD48wp4Ue1Qogq38F1GNUJNqF1kKKxA=="
     },
     "serialize-javascript": {
-      "version": "6.0.0",
+      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "peer": true,
       "requires": {
         "randombytes": "^2.1.0"
@@ -21549,9 +21543,9 @@
       "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="
     },
     "terser": {
-      "version": "5.14.2",
+      "version": "5.17.3",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.3.tgz",
-      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+      "integrity": "sha512-AudpAZKmZHkG9jueayypz4duuCFJMMNGRMwaPvQKWfxKedh8Z2x3OCoDqIIi1xx5+iwx1u6Au8XQcc9Lke65Yg==",
       "peer": true,
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
@@ -21561,16 +21555,16 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "5.3.3",
+      "version": "5.3.8",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.8.tgz",
-      "integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
+      "integrity": "sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==",
       "peer": true,
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.7",
+        "@jridgewell/trace-mapping": "^0.3.17",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
-        "serialize-javascript": "^6.0.0",
+        "serialize-javascript": "^6.0.1",
-        "terser": "^5.7.2"
+        "terser": "^5.16.8"
       }
     },
     "text-table": {
@@ -22604,22 +22598,22 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "webpack": {
-      "version": "5.74.0",
+      "version": "5.82.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz",
-      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==",
       "peer": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
-        "@types/estree": "^0.0.51",
+        "@types/estree": "^1.0.0",
-        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/ast": "^1.11.5",
-        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
-        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
         "acorn": "^8.7.1",
         "acorn-import-assertions": "^1.7.6",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.10.0",
+        "enhanced-resolve": "^5.13.0",
-        "es-module-lexer": "^0.9.0",
+        "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
@@ -22628,19 +22622,13 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.0",
+        "schema-utils": "^3.1.2",
         "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.3",
+        "terser-webpack-plugin": "^5.3.7",
         "watchpack": "^2.4.0",
         "webpack-sources": "^3.2.3"
       },
       "dependencies": {
-        "@types/estree": {
-          "version": "0.0.51",
-          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-          "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-          "peer": true
-        },
         "eslint-scope": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",

examples/fiverthirtyeight-example/.eslintrc.json

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

examples/fiverthirtyeight-example/.gitignore

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

examples/fiverthirtyeight-example/README.md

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

examples/fiverthirtyeight-example/components/Breadcrumbs.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+function HomeIcon({ className = "" }) {
+  return <div className={`inline-block w-4 ${className}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">    <path d="M 12 2 A 1 1 0 0 0 11.289062 2.296875 L 1.203125 11.097656 A 0.5 0.5 0 0 0 1 11.5 A 0.5 0.5 0 0 0 1.5 12 L 4 12 L 4 20 C 4 20.552 4.448 21 5 21 L 9 21 C 9.552 21 10 20.552 10 20 L 10 14 L 14 14 L 14 20 C 14 20.552 14.448 21 15 21 L 19 21 C 19.552 21 20 20.552 20 20 L 20 12 L 22.5 12 A 0.5 0.5 0 0 0 23 11.5 A 0.5 0.5 0 0 0 22.796875 11.097656 L 12.716797 2.3027344 A 1 1 0 0 0 12.710938 2.296875 A 1 1 0 0 0 12 2 z"/></svg></div>
+}
+
+export default function Breadcrumbs({ links }: { links: { title: string, href?: string, target?: string }[] }) {
+  const current = links.at(-1);
+
+  return <div className="flex items-center uppercase font-black text-xs">
+    <Link className="flex items-center" href='/'><HomeIcon /></Link>
+
+    {/* {links.length > 1 && links.slice(0, -1).map((link) => {
+      return <>
+        <span className="mx-4">/</span>
+        <Link href={link.href}>{link.title}</Link>
+      </>
+    })} */}
+
+    <span className="mx-4">/</span>
+    <span>{current?.title}</span>
+  </div >
+}

examples/fiverthirtyeight-example/lib/octokit.ts

@@ -0,0 +1,38 @@
+import { Octokit } from 'octokit';
+
+export interface GithubProject {
+  owner: string;
+  repo: string;
+  branch: string;
+  files: string[];
+  readme: string;
+  description?: string;
+  name?: string;
+}
+
+export async function getProjectReadme(
+  owner: string,
+  repo: string,
+  branch: string,
+  readme: string,
+  github_pat?: string
+) {
+  const octokit = new Octokit({ auth: github_pat });
+  try {
+    const response = await octokit.rest.repos.getContent({
+      owner,
+      repo,
+      path: readme,
+      ref: branch,
+    });
+    const data = response.data as { content?: string };
+    const fileContent = data.content ? data.content : '';
+    if (fileContent === '') {
+      return null;
+    }
+    const decodedContent = Buffer.from(fileContent, 'base64').toString();
+    return decodedContent;
+  } catch (error) {
+    return null;
+  }
+}

examples/fiverthirtyeight-example/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  serverRuntimeConfig: {
+    github_pat: process.env.GITHUB_PAT ? process.env.GITHUB_PAT : null,
+  },
+}
+
+module.exports = nextConfig

examples/fiverthirtyeight-example/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "fiverthirtyeight-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@portaljs/components": "^0.1.0",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/node": "20.1.1",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.40.0",
+    "eslint-config-next": "13.4.1",
+    "next": "13.4.1",
+    "next-mdx-remote": "^4.4.1",
+    "next-seo": "^6.0.0",
+    "octokit": "^2.0.14",
+    "postcss": "8.4.23",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
+    "remark-code-frontmatter": "^1.0.0",
+    "remark-extract-frontmatter": "^3.2.0",
+    "remark-frontmatter": "^4.0.1",
+    "remark-gfm": "^3.0.1",
+    "tailwindcss": "3.3.2",
+    "timeago.js": "^4.0.2",
+    "typescript": "5.0.4"
+  }
+}

examples/fiverthirtyeight-example/pages/_app.tsx

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

examples/fiverthirtyeight-example/pages/_document.tsx

@@ -0,0 +1,38 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://projects.fivethirtyeight.com/shared/favicon.ico"
+        />
+      </Head>
+      <body>
+        <header className="max-w-5xl mx-auto mt-8 w-full">
+          <div className="border-b-2 pb-2.5 mx-2 border-zinc-800">
+            <h1>
+              <span className="sr-only">FiveThirtyEight</span>
+              <a
+                className="flex gap-x-2 items-center"
+                href="http://fivethirtyeight.com"
+              >
+                <img
+                  width="197"
+                  height="25"
+                  alt="FiveThirtyEight"
+                  src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjEgNTMuNzYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDEwMTAxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgOTU8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGgyNXY4SDl2MTBoMTV2OEg5djE3SDBWMHpNMzEgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdIMzF6bTUtMzZoOHY4aC04ek0xNzkgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdoLTE3em01LTM2aDh2OGgtOHpNMzE2IDM2aDVWMThoLTV2LThoMTN2MjZoNHY3aC0xN3ptNS0zNmg4djhoLTh6TTU0IDI3VjEwaDh2MTVsNCA5Ljk4aDFMNzEgMjVWMTBoOHYxN2wtNyAxNkg2MWwtNy0xNnpNMTExIDQzSDk3LjQyQzg5LjIzIDQzIDg1IDM5LjE5IDg1IDMxLjE3VjIyYzAtNy41NyA0LjMtMTMgMTMtMTMgOS4zMyAwIDEzIDUuMDcgMTMgMTR2N0g5NHYxLjc0YzAgMi42MiAxIDQuMjYgMy40MiA0LjI2SDExMXpNOTQgMjNoOHYtMS41NWMwLTIuNjItMS4wNi01LjQ1LTQuMTMtNS40NS0yLjc5IDAtMy44NyAyLjItMy44NyA1LjQ1ek0xMjUgOGgtMTBWMGgyOXY4aC0xMHYzNWgtOVY4ek0yMDIgNDNWMTBoOHY0YzEuMTQtMi40NSAzLjc1LTQgNy4yMi00SDIyMHY4aC02Yy0yLjg0IDAtNCAuOTQtNCAzLjlWNDN6TTI0NSA0M2gtNC44NEMyMzMuMDUgNDMgMjMwIDM5LjMxIDIzMCAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0gyNDV6TTQyMSA0M2gtNC44NEM0MDkuMDUgNDMgNDA2IDM5LjMxIDQwNiAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0g0MjF6TTI1NC4yNiA1My43Nmw0LjYxLTkuNUwyNTEgMjdWMTBoOHYxNWw0IDEwaDFsNC0xMFYxMGg4djE3bC0xMi4zIDI2Ljc2aC05LjQ0ek0yODQgMGgyNXY4aC0xNnY5aDE1djhoLTE1djEwaDE2djhoLTI1VjB6TTMzNyA0OHYtMmgxNi4xYzIgMCAyLjktLjE4IDIuOS0xLjI3di0uMzRjMC0xLjA4LS45MS0xLjM5LTIuOS0xLjM5SDM0MHYtNWw1LTVjLTUuMjktMS40OC04LTUuNDMtOC0xMXYtMWMwLTcuNTYgNC40NC0xMiAxNC0xMmEyMS45MyAyMS45MyAwIDAgMSA1Ljk1IDFMMzYxIDRsNSAzLTQgNmMxLjM3IDEuOTMgMyA0LjkzIDMgOHYxYzAgNy0zLjMgMTAuNjYtMTIgMTFsLTMgNGg2YzUuOTIgMCA5IDIuNjIgOSA3LjY4di4xMWMwIDUuMDYtMi43MSA4LjIxLTguNjIgOC4yMWgtMTNjLTQuMjkgMC02LjM4LTEuODQtNi4zOC01em0xOS0yNXYtM2MwLTMuMy0xLjMzLTQtNS00cy01IC43LTUgNHYzYzAgMy4zIDEuMzkgNCA1IDRzNS0uNyA1LTR6TTM4MCA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuNC00IDctNCA2LjI2IDAgOSAzLjA4IDkgMTAuNzZWNDNoLThWMjJjMC0zLjEzLTEuMDctNS00LTVzLTQgMS44Ny00IDV6TTE1NyA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuOTEtNCA3LjQ5LTQgNi4yNiAwIDguNTEgMy4xMyA4LjUxIDEwLjgxVjQzaC04VjIxYzAtMy4xMy0xLjA3LTQuNDQtNC00LjQ0cy00IDIuMjYtNCA1LjM5eiIvPjwvc3ZnPg=="
+                />{' '}
+                by PortalJS
+              </a>
+            </h1>
+          </div>
+        </header>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

examples/fiverthirtyeight-example/pages/datasets/[datasetName].tsx

@@ -0,0 +1,131 @@
+import { NextSeo } from 'next-seo';
+import { promises as fs } from 'fs';
+import path from 'path';
+import getConfig from 'next/config';
+import { getProjectReadme, GithubProject } from '@/lib/octokit';
+import remarkGfm from 'remark-gfm';
+import extract from 'remark-extract-frontmatter';
+import { Dataset } from '..';
+import { GetStaticProps } from 'next';
+import { Table } from '@portaljs/components';
+import Breadcrumbs from '@/components/Breadcrumbs';
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import remarkFrontmatter from 'remark-frontmatter';
+
+export default function DatasetPage({
+  dataset,
+}: {
+  dataset: Dataset & {
+    readme: string | null;
+  };
+}) {
+  return (
+    <>
+      <NextSeo title={`${dataset.name} page`} />
+      <main className="max-w-5xl px-2 prose mx-auto my-8 prose-thead:border-b-4 prose-table:max-w-5xl prose-table:overflow-scroll prose-thead:overflow-scroll prose-tbody:overflow-scroll prose-thead:pb-2 prose-thead:border-zinc-900 prose-th:uppercase prose-th:text-left prose-th:font-light prose-th:text-xs">
+        <Breadcrumbs links={[{ title: dataset.name, href: '' }]} />
+        <h1 className="uppercase mb-0 mt-16">{dataset.name}</h1>
+        <p className="mb-8">
+          <span className="font-semibold">Repository:</span>{' '}
+          <a target="_blank" href={dataset.url}>
+            {dataset.url}
+          </a>
+        </p>
+
+        <h2 className="mb-0 mt-10">FILES</h2>
+        <div className="inline-block min-w-full py-2 align-middle">
+          <table className="min-w-full divide-y divide-gray-300">
+            <thead className="border-b-4 pb-2 border-zinc-900">
+              <tr>
+                <th
+                  className="uppercase text-left font-light text-xs pb-3"
+                  scope="col"
+                >
+                  Name
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {dataset.files?.map((file) => (
+                <tr key={file}>
+                  <td className="whitespace-nowrap text-left py-4 text-sm text-gray-500">
+                    <a href={file}>{file.split('/').slice(-1)}</a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {dataset.files && dataset.files.length > 0 && (
+          <>
+            <h2 className="mb-0 mt-10">DATA PREVIEWS</h2>
+            {dataset.files?.map((file) => (
+              <div key={file} className="preview-table my-8">
+                <h3>{file.split('/').slice(-1)}</h3>
+                <Table url={file} />
+              </div>
+            ))}
+          </>
+        )}
+        {dataset.readme && (
+          <>
+            <h2 className="uppercase font-black">Readme</h2>
+            {dataset.readme && (
+              <ReactMarkdown
+                remarkPlugins={[
+                  remarkFrontmatter,
+                  remarkGfm,
+                  [extract, { remove: true }],
+                ]}
+              >
+                {dataset.readme}
+              </ReactMarkdown>
+            )}
+          </>
+        )}
+      </main>
+    </>
+  );
+}
+
+export async function getStaticPaths() {
+  const datasetsFile = path.join(process.cwd(), 'datasets.json');
+  const datasets = await fs.readFile(datasetsFile, 'utf8');
+
+  return {
+    paths: JSON.parse(datasets).map((dataset: Dataset) => {
+      return {
+        params: { datasetName: dataset.name },
+      };
+    }),
+    fallback: false, // can also be true or 'blocking'
+  };
+}
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const datasetsFile = path.join(process.cwd(), 'datasets.json');
+  const datasetsString = await fs.readFile(datasetsFile, 'utf8');
+  const datasets: Dataset[] = JSON.parse(datasetsString);
+  const dataset: Dataset | undefined = datasets.find(
+    (_dataset) => _dataset.name === params?.datasetName
+  );
+  const github_pat = getConfig().serverRuntimeConfig.github_pat;
+  const readmes = await Promise.all(['/README.md', '/readme.md', '/Readme.md'].map(async (readme) => await getProjectReadme(
+    'fivethirtyeight',
+    'data',
+    'master',
+    dataset?.name + readme,
+    github_pat
+  )));
+  const readme = readmes.find(item => item !== null)
+  if (!readme) console.log('Readme not found for ' + dataset?.name)
+  return {
+    props: {
+      dataset: {
+        ...dataset,
+        readme,
+        files: dataset && dataset.files ? dataset.files : null,
+      },
+    },
+  };
+};

examples/fiverthirtyeight-example/pages/index.tsx

@@ -0,0 +1,211 @@
+import Image from 'next/image';
+import { Inter } from 'next/font/google';
+import { format } from 'timeago.js';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export interface Article {
+  date: string;
+  title: string;
+  url: string;
+}
+
+export interface Dataset {
+  url: string;
+  name: string;
+  displayName: string;
+  articles: Article[];
+  files?: string[];
+}
+
+export function MobileItem({ dataset }: { dataset: Dataset }) {
+  return (
+    <div className="flex gap-x-2 pb-2 py-4 items-center justify-between border-b border-zinc-600">
+      <div className="flex flex-col">
+        <span className="font-light">{dataset.name}</span>
+        {dataset.articles.map((article) => (
+          <div key={article.title} className="py-1 flex flex-col">
+            <span className="font-bold hover:underline">{article.title}</span>
+            <span className="font-light text-base">
+              {format(article.date)}
+            </span>{' '}
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-col justify-start">
+        <a
+          className="border border-zinc-900 font-light px-4 py-1 text-sm transition hover:bg-zinc-900 hover:text-white"
+          href={dataset.url}
+          target="_blank"
+        >
+          info
+        </a>
+        <a
+          className="ml-2 border border-zinc-900 font-light px-4 py-1 text-sm transition hover:bg-zinc-900 hover:text-white"
+          href={`/datasets/${dataset.name}`}
+        >
+          explore
+        </a>
+        {/*
+                <button>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    className="w-12 h-12 text-blue-400 hover:text-blue-300 transition mt-1"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button> */}
+      </div>
+    </div>
+  );
+}
+
+export function DesktopItem({ dataset }: { dataset: Dataset }) {
+  return (
+    <>
+      {dataset.articles.map((article, index) => (
+        <tr
+          key={article.url}
+          className={`${
+            index === dataset.articles.length - 1 ? 'border-b' : ''
+          } border-zinc-400`}
+        >
+          <td className="py-8 font-light">{index === 0 ? dataset.name : ''}</td>
+          <td>
+            <a className="py-8 font-bold hover:underline" href={article.url}>
+              {article.title}
+            </a>
+          </td>
+          <td className="py-8 font-light text-base min-w-[120px]">
+            {format(article.date)}
+          </td>
+          <td className="py-8">
+            {index === 0 && (
+              <a
+                className="border border-zinc-900 font-light px-[25px] py-2.5 text-sm transition hover:bg-zinc-900 hover:text-white"
+                href={dataset.url}
+                target="_blank"
+              >
+                info
+              </a>
+            )}
+          </td>
+          <td className="py-8">
+            {index === 0 && (
+              <a
+                className="ml-2 border border-zinc-900 font-light px-[25px] py-2.5 text-sm transition hover:bg-zinc-900 hover:text-white"
+                href={`/datasets/${dataset.name}`}
+              >
+                explore
+              </a>
+            )}
+          </td>
+          {/*
+              <td>
+                <button>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    className="w-12 h-12 text-blue-400 hover:text-blue-300 transition mt-1"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </td>*/}
+        </tr>
+      ))}
+    </>
+  );
+}
+
+export async function getStaticProps() {
+  const jsonDirectory = path.join(process.cwd(), '/datasets.json');
+  const datasetString = await fs.readFile(jsonDirectory, 'utf8');
+  const datasets = JSON.parse(datasetString);
+  return {
+    props: { datasets },
+  };
+}
+
+export default function Home({ datasets }: { datasets: Dataset[] }) {
+  return (
+    <>
+      <main
+        className={`flex min-h-screen flex-col items-center max-w-5xl mx-auto pt-20 px-2.5 ${inter.className}`}
+      >
+        <div>
+          <h1 className="text-[40px] font-bold text-zinc-800 text-center">
+            Our Data
+          </h1>
+          <p className="max-w-2xl text-lg text-center text-zinc-700">
+            We’re sharing the data and code behind some of our articles and
+            graphics. We hope you’ll use it to check our work and to create
+            stories and visualizations of&nbsp;your&nbsp;own.
+          </p>
+        </div>
+        <article className="w-full px-2 md:hidden py-4">
+          {datasets.map((dataset) => (
+            <MobileItem key={dataset.name} dataset={dataset} />
+          ))}
+        </article>
+        <table className="w-full mt-10 mb-4 hidden md:table">
+          <thead className="border-b-4 pb-2 border-zinc-900">
+            <tr>
+              <th className="uppercase text-left font-light text-xs pb-3">
+                data set
+              </th>
+              <th className="uppercase text-left font-light text-xs pb-3">
+                related content
+              </th>
+              <th className="uppercase text-left font-light text-xs pb-3">
+                last updated
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {datasets.map((dataset) => (
+              <DesktopItem key={dataset.name} dataset={dataset} />
+            ))}
+          </tbody>
+        </table>
+        <p className="text-[13px] py-8">
+          Unless otherwise noted, our data sets are available under the{' '}
+          <a
+            className="text-blue-400 hover:underline"
+            href="http://creativecommons.org/licenses/by/4.0/"
+          >
+            Creative Commons Attribution 4.0 International license
+          </a>
+          , and the code is available under the{' '}
+          <a
+            className="text-blue-400 hover:underline"
+            href="http://opensource.org/licenses/MIT"
+          >
+            MIT license
+          </a>
+          . If you find this information useful, please{' '}
+          <a
+            className="text-blue-400 hover:underline"
+            href="mailto:data@fivethirtyeight.com"
+          >
+            let us know
+          </a>
+          .
+        </p>
+      </main>
+    </>
+  );
+}

examples/fiverthirtyeight-example/postcss.config.js

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

examples/fiverthirtyeight-example/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

examples/fiverthirtyeight-example/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

examples/fiverthirtyeight-example/styles/globals.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.preview-table > div {
+  overflow-x: scroll;
+  overflow-y: hidden;
+}

examples/fiverthirtyeight-example/tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

examples/fiverthirtyeight-example/tsconfig.json

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

packages/components/package.json

@@ -33,7 +33,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-vega": "^7.6.0",
-    "vega": "5.20.2",
+    "vega": "5.25.0",
     "vega-lite": "5.1.0"
   },
   "devDependencies": {

site/components/ButtonLink.tsx

@@ -18,7 +18,7 @@ export default function ButtonLink({
   return (
     <Link
       href={href}
-      className={`inline-block h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 ${styleClassName} ${className}`}
+      className={`inline-block px-4 py-2 border border-transparent text-base font-medium rounded-md focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 ${styleClassName} ${className}`}
     >
       {children}
     </Link>

site/components/Community.tsx

@@ -60,10 +60,13 @@ export default function Community() {
 
   return (
     <Container>
-      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark ">
+      <h2
+        className="text-3xl font-bold text-primary dark:text-primary-dark"
+        id="community"
+      >
         Community
       </h2>
-      <p className="text-lg mt-8 ">
+      <p className="text-lg mt-2">
         We are growing. Get in touch or become a contributor!
       </p>
       <div className="flex justify-center mt-12">

site/components/Features.tsx

@@ -40,17 +40,17 @@ const features: { title: string; description: string; icon: string }[] = [
 export default function Features() {
   return (
     <Container>
-      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark">
+      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark" id="how-portaljs-works">
         How PortalJS works?
       </h2>
-      <p className="text-lg mt-8">
+      <p className="text-lg mt-2">
         PortalJS is built in JavaScript and React on top of the popular Next.js
         framework, assuming a "decoupled" approach where the frontend is a
         separate service from the backend and interacts with backend(s) via an
         API. It can be used with any backend and has out of the box support for
         CKAN.
       </p>
-      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 ">
         {features.map((feature, i) => (
           <div
             key={`feature-${i}`}

site/components/GalleryItem.tsx

@@ -1,106 +0,0 @@
-const IconBeaker = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    className="w-6 h-6"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
-    />
-  </svg>
-);
-
-const IconDocs = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className="w-6 h-6"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
-    />
-  </svg>
-);
-
-const IconCode = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className="w-6 h-6"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
-    />
-  </svg>
-);
-
-const ActionButton = ({ title, Icon, href, className = '' }) => (
-  <a
-    title={title}
-    target="_blank"
-    href={href}
-    className={`rounded-full p-2 hover:bg-secondary transition-all duration-250 ${className}`}
-  >
-    <Icon />
-  </a>
-);
-
-export default function GalleryItem({ item }) {
-  return (
-    <a
-      className="rounded overflow-hidden group relative border-1 shadow-lg"
-      target="_blank"
-      href={item.href}
-    >
-      <div
-        className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
-        style={{ backgroundImage: `url(${item.image})` }}
-      >
-        <div className="w-full h-full bg-black opacity-0 group-hover:opacity-50 transition-all duration-200"></div>
-      </div>
-      <div>
-        <div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
-          <div className="text-center text-primary-dark">
-            <span className="text-xl font-semibold">{item.title}</span>
-            <p className="text-base font-medium">{item.description}</p>
-            <div className="flex justify-center mt-2">
-              <ActionButton Icon={IconBeaker} title="Demo" href={item.href} />
-              {item.docsUrl && (
-                <ActionButton
-                  Icon={IconDocs}
-                  title="Documentation"
-                  href={item.docsUrl}
-                  className="mx-5"
-                />
-              )}
-              {item.sourceUrl && (
-                <ActionButton
-                  Icon={IconCode}
-                  title="Source code"
-                  href={item.sourceUrl}
-                />
-              )}
-
-              {/* Maybe: Blog post */}
-            </div>
-          </div>
-        </div>
-      </div>
-    </a>
-  );
-}

site/components/Hero.tsx

@@ -1,8 +1,8 @@
-import clsx from 'clsx';
+import { useRef } from 'react';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import { Fragment, useRef } from 'react';
 import ButtonLink from './ButtonLink';
 import NewsletterForm from './NewsletterForm';
+import Image from 'next/image';
+import DatahubExampleImg from "@/public/images/showcases/datahub.png"
 
 const codeLanguage = 'javascript';
 const code = `export default {
@@ -39,10 +39,8 @@ export function Hero() {
     >
       <div className="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
         {/* Commented code on line 37, 39 and 113 will reenable the two columns hero */}
-        {/* <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"> */}
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
-        <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-4xl lg:grid-cols-1 lg:px-8 xl:gap-x-16 xl:px-12">
+          <div className="relative mb-10 lg:mb-0 md:text-center lg:text-left">
-          {/* <div className="relative mb-10 lg:mb-0 md:text-center lg:text-left"> */}
-          <div className="relative mb-10 lg:mb-0 md:text-center lg:text-center">
             <div role="heading">
               <h1 className="inline bg-gradient-to-r from-blue-500 via-blue-300 to-blue-500 bg-clip-text text-5xl tracking-tight text-transparent">
                 The JavaScript framework for data portals
@@ -56,7 +54,15 @@ export function Hero() {
               Get started
             </ButtonLink>
 
-            <div className="md:max-w-md mx-auto">
+            <ButtonLink
+              style="secondary"
+              className="mt-8 ml-3"
+              href="https://github.com/datopian/portaljs"
+            >
+              View on GitHub
+            </ButtonLink>
+
+            <div className="md:max-w-md mx-auto lg:mx-0 ">
               <NewsletterForm />
             </div>
             <p className="my-10 text-l tracking-wide">
@@ -75,84 +81,13 @@ export function Hero() {
               </a>
             </p>
           </div>
-          {/* <div className="relative">
+          <div className="relative">
             <div className="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
               <div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0" />
               <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0" />
-              <div className="pl-4 pt-4">
+                <Image src={DatahubExampleImg} alt="opendata.datahub.io" />
-                <TrafficLightsIcon className="h-2.5 w-auto stroke-slate-500/30" />
-                <div className="mt-4 flex space-x-2 text-xs">
-                  {tabs.map((tab) => (
-                    <div
-                      key={tab.name}
-                      className={clsx(
-                        'flex h-6 rounded-full',
-                        tab.isActive
-                          ? 'bg-gradient-to-r from-sky-400/30 via-sky-400 to-sky-400/30 p-px font-medium text-sky-300'
-                          : 'text-slate-500'
-                      )}
-                    >
-                      <div
-                        className={clsx(
-                          'flex items-center rounded-full px-2.5',
-                          tab.isActive && 'bg-slate-800'
-                        )}
-                      >
-                        {tab.name}
             </div>
           </div>
-                  ))}
-                </div>
-                <div className="mt-6 flex items-start px-1 text-sm">
-                  <div
-                    aria-hidden="true"
-                    className="select-none border-r border-slate-300/5 pr-4 font-mono text-slate-600"
-                  >
-                    {Array.from({
-                      length: code.split('\n').length,
-                    }).map((_, index) => (
-                      <Fragment key={index}>
-                        {(index + 1).toString().padStart(2, '0')}
-                        <br />
-                      </Fragment>
-                    ))}
-                  </div>
-                  <Highlight
-                    {...defaultProps}
-                    code={code}
-                    language={codeLanguage}
-                    theme={undefined}
-                  >
-                    {({
-                      className,
-                      style,
-                      tokens,
-                      getLineProps,
-                      getTokenProps,
-                    }) => (
-                      <pre
-                        className={clsx(className, 'flex overflow-x-auto pb-6')}
-                        style={style}
-                      >
-                        <code className="px-4">
-                          {tokens.map((line, lineIndex) => (
-                            <div key={lineIndex} {...getLineProps({ line })}>
-                              {line.map((token, tokenIndex) => (
-                                <span
-                                  key={tokenIndex}
-                                  {...getTokenProps({ token })}
-                                />
-                              ))}
-                            </div>
-                          ))}
-                        </code>
-                      </pre>
-                    )}
-                  </Highlight>
-                </div>
-              </div>
-            </div>
-          </div> */}
         </div>
       </div>
     </div>

site/components/Layout.tsx

@@ -5,7 +5,8 @@ import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 
 import Nav from './Nav';
-import { SiteToc } from '@/components/SiteToc';
+import { Hero } from './Hero';
+import { Navigation } from './Navigation';
 
 function useTableOfContents(tableOfContents) {
   const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
@@ -54,14 +55,15 @@ export default function Layout({
   children,
   title,
   tableOfContents = [],
-  urlPath,
+  isHomePage = false,
-  sidebarTree = []
+  sidebarTree = [],
 }: {
   children;
   title?: string;
   tableOfContents?;
   urlPath?: string;
   sidebarTree?: [];
+  isHomePage?: boolean;
 }) {
   // const { toc } = children.props;
   const { theme, setTheme } = useTheme();
@@ -83,8 +85,73 @@ export default function Layout({
       {title && <NextSeo title={title} />}
       <Nav />
       <div className="mx-auto p-6 bg-background dark:bg-background-dark">
+        {isHomePage && <Hero />}
+
+        <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
+          {!!sidebarTree.length && (
+            <div className="hidden lg:relative lg:block lg:flex-none">
+              <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
+              <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
+              <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
+              <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto overflow-x-hidden py-16 pl-0.5">
+                <Navigation
+                  navigation={sidebarTree}
+                  className="w-64 pr-8 xl:w-72 xl:pr-16"
+                />
+              </div>
+            </div>
+          )}
+          <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 ">
             {children}
           </div>
+          {/** TABLE OF CONTENTS */}
+          <div className="hidden xl:sticky xl:right-0 xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:mb-16">
+            {tableOfContents.length > 0 && siteConfig.tableOfContents && (
+              <nav aria-labelledby="on-this-page-title" className="w-56">
+                <h2 className="font-display text-sm font-medium text-primary dark:text-primary-dark">
+                  On this page
+                </h2>
+                <ol className="mt-4 space-y-4 text-sm">
+                  {tableOfContents.map((section) => (
+                    <li key={section.id}>
+                      <h3>
+                        <Link
+                          href={`#${section.id}`}
+                          className={
+                            isActive(section)
+                              ? 'text-secondary font-semibold'
+                              : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
+                          }
+                        >
+                          {section.title}
+                        </Link>
+                      </h3>
+                      {section.children && section.children.length > 0 && (
+                        <ol className="mt-4 space-y-4 pl-5 text-slate-500 dark:text-slate-400">
+                          {section.children.map((subSection) => (
+                            <li key={subSection.id}>
+                              <Link
+                                href={`#${subSection.id}`}
+                                className={
+                                  isActive(subSection)
+                                    ? 'text-secondary font-semibold'
+                                    : 'hover:text-slate-600 dark:hover:text-slate-300'
+                                }
+                              >
+                                {subSection.title}
+                              </Link>
+                            </li>
+                          ))}
+                        </ol>
+                      )}
+                    </li>
+                  ))}
+                </ol>
+              </nav>
+            )}
+          </div>
+        </div>
+      </div>
       <footer className="flex items-center justify-center w-full h-24 border-t dark:border-slate-900 bg-background dark:bg-background-dark">
         <a
           className="flex items-center justify-center"
@@ -104,58 +171,6 @@ export default function Layout({
           />
         </a>
       </footer>
-      {/** TABLE OF CONTENTS */}
-      {tableOfContents.length > 0 && siteConfig.tableOfContents && (
-        <div className="hidden xl:fixed xl:right-0 xl:top-[4.5rem] xl:block xl:w-1/5 xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6 xl:mb-16">
-          <nav aria-labelledby="on-this-page-title" className="w-56">
-            <h2 className="font-display text-md font-medium text-primary dark:text-primary-dark">
-              On this page
-            </h2>
-            <ol className="mt-4 space-y-3 text-sm">
-              {tableOfContents.map((section) => (
-                <li key={section.id}>
-                  <h3>
-                    <Link
-                      href={`#${section.id}`}
-                      className={
-                        isActive(section)
-                          ? 'text-secondary'
-                          : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
-                      }
-                    >
-                      {section.title}
-                    </Link>
-                  </h3>
-                  {section.children && section.children.length > 0 && (
-                    <ol className="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400">
-                      {section.children.map((subSection) => (
-                        <li key={subSection.id}>
-                          <Link
-                            href={`#${subSection.id}`}
-                            className={
-                              isActive(subSection)
-                                ? 'text-secondary'
-                                : 'hover:text-slate-600 dark:hover:text-slate-300'
-                            }
-                          >
-                            {subSection.title}
-                          </Link>
-                        </li>
-                      ))}
-                    </ol>
-                  )}
-                </li>
-              ))}
-            </ol>
-          </nav>
-        </div>
-      )}
-      {/* LHS NAVIGATION */}
-      {/* {showSidebar && ( */}
-        <div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto">
-          <SiteToc currentPath={urlPath} nav={sidebarTree} />
-        </div>
-      {/* )} */}
     </>
   );
 }

site/components/Nav.tsx

@@ -5,6 +5,7 @@ import { siteConfig } from '../config/siteConfig';
 import MobileNavigation from './MobileNavigation';
 import NavItem from './NavItem';
 import ThemeSelector from './ThemeSelector';
+import GitHubButton from 'react-next-github-btn';
 // import { SearchContext, SearchField } from "./search/index.jsx";
 
 // const Search = SearchContext(siteConfig.search?.provider);
@@ -110,16 +111,6 @@ export default function Nav() {
           </Search>
         )} */}
         <ThemeSelector />
-        {siteConfig.github && (
-          <Link
-            href={siteConfig.github}
-            target="_blank"
-            className="group"
-            aria-label="GitHub"
-          >
-            <GitHubIcon className="h-6 w-6 dark:fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
-          </Link>
-        )}
         {siteConfig.discord && (
           <Link
             href={siteConfig.discord}
@@ -130,6 +121,21 @@ export default function Nav() {
             <DiscordIcon className="h-8 w-8 dark:fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
           </Link>
         )}
+        {siteConfig.github && (
+          <div className="mt-1">
+            <
+              // @ts-ignore
+              GitHubButton
+              href={siteConfig.github}
+              data-color-scheme="no-preference: light; light: light; dark: dark;"
+              data-size="large"
+              data-show-count="true"
+              aria-label="Star PortalJS on GitHub"
+            >
+              Stars
+            </GitHubButton>
+          </div>
+        )}
       </div>
     </header>
   );

site/components/NavItem.tsx

@@ -1,8 +1,8 @@
-import { Menu, Transition } from "@headlessui/react";
+import { Menu, Transition } from '@headlessui/react';
-import Link from "next/link";
+import Link from 'next/link';
-import { Fragment, useRef, useState } from "react";
+import { Fragment, useRef, useState } from 'react';
 
-import BaseLink from "./BaseLink";
+import BaseLink from './BaseLink';
 
 export default function NavItem({ item }) {
   const dropdownRef = useRef(null);
@@ -21,14 +21,14 @@ export default function NavItem({ item }) {
 
   return (
     <Menu as="div" className="relative">
-      <Menu.Button
+      <Menu.Item>
-        onClick={() => setshowDropdown(!showDropdown)}
+        {Object.prototype.hasOwnProperty.call(item, 'href') ? (
-        onMouseEnter={openDropdown}
-        onMouseLeave={closeDropdown}
-      >
-        {Object.prototype.hasOwnProperty.call(item, "href") ? (
           <Link
             href={item.href}
+            onMouseEnter={openDropdown}
+            onMouseLeave={closeDropdown}
+            target={item.target || '_self'}
+            onClick={() => setshowDropdown(!showDropdown)}
             className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500"
           >
             {item.name}
@@ -38,9 +38,9 @@ export default function NavItem({ item }) {
             {item.name}
           </div>
         )}
-      </Menu.Button>
+      </Menu.Item>
 
-      {Object.prototype.hasOwnProperty.call(item, "subItems") && (
+      {Object.prototype.hasOwnProperty.call(item, 'subItems') && (
         <Transition
           as={Fragment}
           show={showDropdown}
@@ -58,11 +58,10 @@ export default function NavItem({ item }) {
             onMouseLeave={closeDropdown}
           >
             {item.subItems.map((subItem) => (
-              <Menu.Item
+              <Menu.Item key={subItem.name}>
-                key={subItem.name}
-                >
                 <BaseLink
                   href={subItem.href}
+                  target={item.target || '_self'}
                   className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
                   onClick={() => setshowDropdown(false)}
                 >

site/components/Navigation.jsx

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import clsx from 'clsx';
+
+export function Navigation({ navigation, className }) {
+  let router = useRouter();
+
+  const currentPath = router.asPath.split(/[#?]/)[0];
+
+  return (
+    <nav className={clsx('text-base lg:text-sm', className)}>
+      <ul role="list" className="space-y-9">
+        {navigation.map((section) => (
+          <li key={section.title}>
+            <h2 className="font-display font-medium text-primary dark:text-primary-dark">
+              {section.title}
+            </h2>
+            <ul
+              role="list"
+              className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200"
+            >
+              {section.links.map((link) => {
+                const linkPath = link.href.split(/[#?]/)[0];
+                return (
+                  <li key={link.href} className="relative">
+                    <Link
+                      href={link.href}
+                      className={clsx(
+                        'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
+                        linkPath === currentPath
+                          ? 'font-semibold text-secondary before:bg-secondary'
+                          : 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
+                      )}
+                    >
+                      {link.title}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

site/components/NewsletterForm.tsx

@@ -33,7 +33,7 @@ export default function NewsletterForm() {
                   type="email"
                   required
                   placeholder="Your email"
-                  className="input entry__field !w-full px-2 py-3 text-base rounded-md bg-slate-200 dark:bg-slate-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 focus:ring-offset-gray-900"
+                  className="input entry__field !w-full px-2 py-2 text-base rounded-md bg-slate-200 dark:bg-slate-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 focus:ring-offset-gray-900"
                 />
 
                 <label className="entry__error entry__error--primary px-2 text-red-400 text-sm"></label>
@@ -43,7 +43,7 @@ export default function NewsletterForm() {
             <input type="hidden" name="form-name" value="get-updates" />
             <button
               type="submit"
-              className="sib-form-block__button sib-form-block__button-with-loader h-12 flex-none mt-3 px-6 py-3 border border-transparent text-base font-medium rounded-md text-slate-900 bg-blue-400 hover:bg-blue-300 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 sm:mt-0 sm:ml-3"
+              className="sib-form-block__button sib-form-block__button-with-loader flex-none mt-3 px-4 py-2 border border-transparent text-base font-medium rounded-md text-slate-900 bg-blue-400 hover:bg-blue-300 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 sm:mt-0 sm:ml-3"
             >
               <svg
                 className="icon clickable__icon progress-indicator__icon sib-hide-loader-icon hidden"

site/components/Showcases.tsx

@@ -1,5 +1,5 @@
 import Container from './Container';
-import GalleryItem from './GalleryItem';
+import ShowcasesItem from './ShowcasesItem';
 
 const items = [
   {
@@ -27,39 +27,21 @@ const items = [
     image: '/images/showcases/datahub.png',
     description: 'Demo Data Portal by DataHub',
   },
-  {
-    title: 'Example: Simple Data Catalog',
-    href: 'https://example.portaljs.org/',
-    image: '/images/showcases/example-simple-catalog.png',
-    description: 'Simple data catalog',
-    sourceUrl:
-      'https://github.com/datopian/portaljs/tree/main/examples/simple-example',
-    docsUrl: '/docs/example-data-catalog',
-  },
-  {
-    title: 'Example: Portal with CKAN',
-    href: 'https://ckan-example.portaljs.org/',
-    image: '/images/showcases/example-ckan.png',
-    description: 'Simple portal with data coming from CKAN',
-    sourceUrl:
-      'https://github.com/datopian/portaljs/tree/main/examples/ckan-example',
-    docsUrl: '/docs/example-ckan',
-  },
 ];
 
-export default function Gallery() {
+export default function Showcases() {
   return (
     <Container>
       <h2
         className="text-3xl font-bold text-primary dark:text-primary-dark"
-        id="gallery"
+        id="showcases"
       >
-        Gallery
+        Showcases
       </h2>
-      <p className="text-lg mt-8">Discover what's being powered by PortalJS</p>
+      <p className="text-lg mt-2">Discover what's being powered by PortalJS</p>
-      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2">
         {items.map((item) => {
-          return <GalleryItem item={item} />;
+          return <ShowcasesItem item={item} />;
         })}
       </div>
     </Container>

site/components/ShowcasesItem.tsx

@@ -0,0 +1,24 @@
+export default function ShowcasesItem({ item }) {
+  return (
+    <a
+      className="rounded overflow-hidden group relative border-1 shadow-lg"
+      target="_blank"
+      href={item.href}
+    >
+      <div
+        className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
+        style={{ backgroundImage: `url(${item.image})` }}
+      >
+        <div className="w-full h-full bg-black opacity-0 group-hover:opacity-50 transition-all duration-200"></div>
+      </div>
+      <div>
+        <div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
+          <div className="text-center text-primary-dark">
+            <span className="text-xl font-semibold">{item.title}</span>
+            <p className="text-base font-medium">{item.description}</p>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+}

site/components/SiteToc.tsx

@@ -1,110 +0,0 @@
-import Link from 'next/link.js';
-import clsx from 'clsx';
-import { Disclosure, Transition } from '@headlessui/react';
-
-export interface NavItem {
-  name: string;
-  href: string;
-}
-
-export interface NavGroup {
-  name: string;
-  path: string;
-  level: number;
-  children: Array<NavItem | NavGroup>;
-}
-
-interface Props {
-  currentPath: string;
-  nav: Array<NavItem | NavGroup>;
-}
-
-function isNavGroup(item: NavItem | NavGroup): item is NavGroup {
-  return (item as NavGroup).children !== undefined;
-}
-
-function navItemBeforeNavGroup(a, b) {
-  if (isNavGroup(a) === isNavGroup(b)) {
-    return 0;
-  }
-  if (isNavGroup(a) && !isNavGroup(b)) {
-    return 1;
-  }
-  return -1;
-}
-
-function sortNavGroupChildren(items: Array<NavItem | NavGroup>) {
-  return items.sort(
-    (a, b) => navItemBeforeNavGroup(a, b) || a.name.localeCompare(b.name)
-  );
-}
-
-export const SiteToc: React.FC<Props> = ({ currentPath, nav }) => {
-  return (
-    <nav data-testid="lhs-sidebar" className="flex flex-col space-y-3 text-sm">
-      {/* {sortNavGroupChildren(nav).map((n) => ( */}
-      {nav.map((n) => (
-        <NavComponent item={n} currentPath={currentPath} />
-      ))}
-    </nav>
-  );
-};
-
-const NavComponent: React.FC<{
-  item: NavItem | NavGroup;
-  currentPath: string;
-}> = ({ item, currentPath }) => {
-  function isActiveItem(item: NavItem) {
-    return item.href === "/" + currentPath;
-  }
-
-  return !isNavGroup(item) ? (
-    <Link
-      key={item.name}
-      href={item.href}
-      className={clsx(
-        isActiveItem(item)
-          ? 'text-secondary'
-          : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
-        'block'
-      )}
-    >
-      {item.name}
-    </Link>
-  ) : (
-    <Disclosure as="div" key={item.name} className="flex flex-col space-y-3" defaultOpen={true}>
-      {({ open }) => (
-        <div>
-          <Disclosure.Button className="group w-full flex items-center text-left text-md font-medium text-slate-900 dark:text-white">
-            <svg
-              className={clsx(
-                open ? 'text-slate-400 rotate-90' : 'text-slate-300',
-                'h-3 w-3 mr-2 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-slate-400'
-              )}
-              viewBox="0 0 20 20"
-              aria-hidden="true"
-            >
-              <path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
-            </svg>
-            {item.name}
-          </Disclosure.Button>
-          <Transition
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            leaveTo="transform scale-95 opacity-0"
-          >
-            <Disclosure.Panel className="flex flex-col space-y-3 pl-5 mt-3">
-              {/* {sortNavGroupChildren(item.children).map((subItem) => ( */}
-              {item.children.map((subItem) => (
-                <NavComponent item={subItem} currentPath={currentPath} />
-              ))}
-            </Disclosure.Panel>
-          </Transition>
-        </div>
-      )}
-    </Disclosure>
-  );
-};

site/content/assets/sidebar.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Getting started",
+    "links": [
+      { "title": "Introduction", "href": "/#how-portaljs-works" },
+      { "title": "Setup", "href": "/docs" },
+      { "title": "Creating new datasets", "href": "/docs/creating-new-datasets" },
+      { "title": "Searching datasets", "href": "/docs/searching-datasets" },
+      { "title": "Showing metadata", "href": "/docs/showing-metadata" },
+      { "title": "Deploying your PortalJS app", "href": "/docs/deploying-your-portaljs-app" }
+
+    ]
+  }
+]

site/content/config.js

@@ -19,8 +19,8 @@ const config = {
     { name: "Docs", href: "/docs" },
     // { name: "Components", href: "/docs/components" },
     { name: "Blog", href: "/blog" },
-    { name: "Gallery", href: "/#gallery" },
+    { name: "Showcases", href: "/#showcases" },
-    // { name: "Data Literate", href: "/data-literate" },
+    { name: "Examples", href: "https://github.com/datopian/portaljs/tree/main/examples", target: "_blank" },
     // { name: "DL Demo", href: "/data-literate/demo" },
     // { name: "Excel Viewer", href: "/excel-viewer" },
   ],

site/content/docs/sidebar.json

@@ -1,44 +0,0 @@
-[
-  {
-    "name": "Getting started",
-    "children": [
-      {
-        "name": "Setup",
-        "href": "/docs"
-      },
-      {
-        "name": "Creating new datasets",
-        "href": "/docs/creating-new-datasets"
-      },
-      {
-        "name": "Searching datasets",
-        "href": "/docs/searching-datasets"
-      },
-      {
-        "name": "Showing metadata",
-        "href": "/docs/showing-metadata"
-      },
-      {
-        "name": "Deploying your PortalJS app",
-        "href": "/docs/deploying-your-portaljs-app"
-      }
-    ]
-  },
-  {
-    "name": "Components",
-    "href": "/docs/components"
-  },
-  {
-    "name": "Examples",
-    "children": [
-      {
-        "name": "Data Catalog w/ CKAN datasets",
-        "href": "/docs/examples/example-ckan"
-      },
-      {
-        "name": "Data Catalog w/ GitHub datasets",
-        "href": "/docs/examples/example-data-catalog"
-      }
-    ]
-  }
-]

site/pages/[...slug].tsx

@@ -65,7 +65,7 @@ export const getStaticProps: GetStaticProps = async ({
   // Temporary, docs pages should present the LHS sidebar
   if (dbFile.url_path.startsWith('docs')) {
     frontMatter.showSidebar = true;
-    frontMatter.sidebarTreeFile = 'content/docs/sidebar.json';
+    frontMatter.sidebarTreeFile = 'content/assets/sidebar.json';
   }
 
   const source = fs.readFileSync(filePath, { encoding: 'utf-8' });

site/pages/index.tsx

@@ -1,21 +1,46 @@
+import fs from 'fs';
+
 import Community from '@/components/Community';
 import Features from '@/components/Features';
-import Gallery from '@/components/Gallery';
+import Showcases from '@/components/Showcases';
-import { Hero } from '@/components/Hero';
-import { UnstyledLayout } from '@flowershow/core';
 import Layout from '../components/Layout';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { collectHeadings } from '@flowershow/core';
+
+export default function Home({ sidebarTree }) {
+  const router = useRouter();
+
+  const [tableOfContents, setTableOfContents] = useState([]);
+
+  useEffect(() => {
+    const headingNodes = document.querySelectorAll(
+      'h2,h3'
+    ) as NodeListOf<HTMLHeadingElement>;
+    const toc = collectHeadings(headingNodes);
+    setTableOfContents(toc ?? []);
+  }, [router.asPath]); // update table of contents on route change with next/link
 
-export default function Home() {
   return (
     <>
-      <Layout>
+      <Layout isHomePage={true} tableOfContents={tableOfContents} sidebarTree={sidebarTree} >
-        <UnstyledLayout>
-          <Hero />
         <Features />
-          <Gallery />
+        <Showcases />
         <Community />
-        </UnstyledLayout>
       </Layout>
     </>
   );
 }
+
+export function getStaticProps() {
+  const tree = fs.readFileSync('content/assets/sidebar.json', {
+    encoding: 'utf-8',
+  });
+  const sidebarTree = JSON.parse(tree);
+
+  return {
+    props: {
+      sidebarTree,
+    },
+  };
+}