[site][xs] - fix accessbiility

Bugfix/pdf styles

.changeset/cyan-donuts-travel.md

@@ -0,0 +1,5 @@
+---
+'@portaljs/components': patch
+---
+
+Fix missing CSS styles for PDF component

package-lock.json

@@ -8875,6 +8875,236 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@react-pdf-viewer/attachment": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/attachment/-/attachment-3.6.0.tgz",
+      "integrity": "sha512-etxzIQsssuUE0TYVScHDuL+AArQp3YbDTowGbpdCv8JqJFYzuGFV9+3uyvJ8QlGcPChhhr2CjHrbCTF2F2bw5w==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/bookmark": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/bookmark/-/bookmark-3.6.0.tgz",
+      "integrity": "sha512-HaAQjaDrzE6Lbt89f0B1Z+jst3moSG3pqok7aGO4PmclxH4mtbBGK+zyXpWdF5+8feEnAa7QP3nWod5uAhJUQw==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/core": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/core/-/core-3.6.0.tgz",
+      "integrity": "sha512-5tDBF+BafVLNULIJf1cej7nBegNrbYtdvoBKtRs9mLo3sGENIyeZuDsP4W+5mSKK84oxO3NY5MzkTkmnuu4R9g==",
+      "peerDependencies": {
+        "pdfjs-dist": "^2.6.347",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/default-layout": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/default-layout/-/default-layout-3.6.0.tgz",
+      "integrity": "sha512-68DjK+FB5+zyK5FKFYmIEcplq64Jejb3Y7tAVa9U/tEsoRnZt7C2mKW2e1IAEDZc+1ncdIboZvlFfRCSEDiG5A==",
+      "dependencies": {
+        "@react-pdf-viewer/attachment": "3.6.0",
+        "@react-pdf-viewer/bookmark": "3.6.0",
+        "@react-pdf-viewer/core": "3.6.0",
+        "@react-pdf-viewer/thumbnail": "3.6.0",
+        "@react-pdf-viewer/toolbar": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/full-screen": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/full-screen/-/full-screen-3.6.0.tgz",
+      "integrity": "sha512-SG5mpE/AZr6DtwP7soGFqfGoU5wbQvaBc2KTz+upqhgmUIEyE8AwGa+ozCgkGEqTvlJ4dP7D5Kku2BFsC6l3Cg==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/get-file": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/get-file/-/get-file-3.6.0.tgz",
+      "integrity": "sha512-cfMrig0Iu49yTePZSWwnyUMqu2F1pynP59snhTRoOg7RbpcAcppnDcYvVjThsE80wq1ltgMnufaVSsVoSbqIrQ==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/open": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/open/-/open-3.6.0.tgz",
+      "integrity": "sha512-l/fBEj/7KjYH/mLMukos0nYypIuhovq2dO3TkQBHzQPdwtBdUTr049+AiSZnMDx1CIpr8Oz3FjB5FSw+LZuUog==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/page-navigation": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/page-navigation/-/page-navigation-3.6.0.tgz",
+      "integrity": "sha512-YAfJ3Q6jEZ2ZtXwsdPSeCddrMvdtIG1bZidhujz47LRgZyr9ZmFVd5/D9aGm12sY5F/XB6V71SOnkww0aEOTqw==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/print": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/print/-/print-3.6.0.tgz",
+      "integrity": "sha512-bQSf+qsl1OZlB6Ft1ES5xjqTirIbF1m0pZD5KLRuxAAjqMyeTBZOLC3mpgRXg2nGJ0X3BcrDrurNIkXO/CE2SQ==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/properties": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/properties/-/properties-3.6.0.tgz",
+      "integrity": "sha512-J0tQxYK3ql3dXgjtiqOH1gU3ajUMWE5O6BNxFqE0zvE7BsnDZH6wfCVi8okkbivp0oEKC4TjSxF+KkHa9HZlPw==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/rotate": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/rotate/-/rotate-3.6.0.tgz",
+      "integrity": "sha512-E1LZhWdj5dGwwZ3VreC32eT0VesniOTp1zDeZVX3Tom8XXxc9+A5/H/+DTY0/v1wimR5afB2aqCtQIjcQVupeQ==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/scroll-mode": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/scroll-mode/-/scroll-mode-3.6.0.tgz",
+      "integrity": "sha512-KBIdCZsJxbtOAlSOgw1IpGdS5txboHXPheRnjWtjNpOCWAhkYwKV4YNRAdTATPxb+zcOrkWmiU4sHgj9m4kQLw==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/search": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/search/-/search-3.6.0.tgz",
+      "integrity": "sha512-VxqUfws400C2FwaOzKTvgZgI8bhQ0Hx4aL/Ada42WbUmnySm+SGSM+l7Snj3q5pbYd3svcyz9xTlVrJDfXQ4IQ==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/selection-mode": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/selection-mode/-/selection-mode-3.6.0.tgz",
+      "integrity": "sha512-To8Sev/30eQMDzVofPfwWXoEUfWUizqD7O67VCG+oaP6yc640y/MX4nVsP9kg+u2Git3CFSolaHgEWg/sOY60A==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/theme": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/theme/-/theme-3.6.0.tgz",
+      "integrity": "sha512-IfLLKvKeuIK0dqL9YcSjSsopvhYKBEQLoDHc1lZ/XZGXANbqExFwOCeklPx40HwgUm8LL/arJNoLrbrGrGMCCA==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/thumbnail": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/thumbnail/-/thumbnail-3.6.0.tgz",
+      "integrity": "sha512-fd0SERR9yPfWN5cpnhiJ3qp9KG7hR1FJkJ8S5KgDbl3AObn1tOM9Kw8m4Qw8Od5GIrsxxhdTUdw4esup5n2RBg==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/toolbar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/toolbar/-/toolbar-3.6.0.tgz",
+      "integrity": "sha512-Efz8hNsmes7A2kHVBZkXsWwrYsjybUDOf+Y69LRWilpNij4D/jtVdysQ0uSoeZYYT4P0OfNnxB5ZcdHZCn6PXg==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0",
+        "@react-pdf-viewer/full-screen": "3.6.0",
+        "@react-pdf-viewer/get-file": "3.6.0",
+        "@react-pdf-viewer/open": "3.6.0",
+        "@react-pdf-viewer/page-navigation": "3.6.0",
+        "@react-pdf-viewer/print": "3.6.0",
+        "@react-pdf-viewer/properties": "3.6.0",
+        "@react-pdf-viewer/rotate": "3.6.0",
+        "@react-pdf-viewer/scroll-mode": "3.6.0",
+        "@react-pdf-viewer/search": "3.6.0",
+        "@react-pdf-viewer/selection-mode": "3.6.0",
+        "@react-pdf-viewer/theme": "3.6.0",
+        "@react-pdf-viewer/zoom": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@react-pdf-viewer/zoom": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/zoom/-/zoom-3.6.0.tgz",
+      "integrity": "sha512-EEmYtC07UVK1c8wLyL1fH4PszCsi8r0smPtuuiKN0AMR40ac4GcjiqxmJppgP7HOLexCk38lgg+SpIDGuLCV4Q==",
+      "dependencies": {
+        "@react-pdf-viewer/core": "3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -13812,6 +14042,33 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/ag-grid-community": {
+      "version": "30.0.3",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-30.0.3.tgz",
+      "integrity": "sha512-agfRVHELQqhnMfRplmYEYdxMxw3c8l5Bu7lNaCfIVOasyRlSAvH4Na8qru0ORaOUN3ClulfvKIuLSWwgGSwJJQ==",
+      "peer": true
+    },
+    "node_modules/ag-grid-react": {
+      "version": "30.0.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-30.0.4.tgz",
+      "integrity": "sha512-6N3O0avco1BVt5jLe6tD3GepvsmoxV4gvqHQ4SguYwqkfvO9IzN8GEOiVScLlAn1zvWjhCeSpnIYRi44bP3wqQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "ag-grid-community": "~30.0.3",
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -15480,6 +15737,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chai": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
@@ -15803,6 +16072,14 @@
       "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==",
       "dev": true
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -16291,6 +16568,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -16621,6 +16909,11 @@
       "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==",
       "dev": true
     },
+    "node_modules/cuint": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
+      "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw=="
+    },
     "node_modules/cypress": {
       "version": "12.9.0",
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.9.0.tgz",
@@ -17885,6 +18178,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==",
+      "deprecated": "dommatrix is no longer maintained. Please use @thednp/dommatrix."
+    },
     "node_modules/dompurify": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
@@ -20129,6 +20428,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -28238,7 +28545,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -31425,6 +31731,23 @@
         "pbf": "bin/pbf"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "2.15.349",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.15.349.tgz",
+      "integrity": "sha512-EeCfqj6xi4/aegKNS7Bs+TCg3Y5gmKmG0s/5xXI0PqWW66x+Nm7iFXBpVcup7HnR8sNDm+5NESfFr8T6DeWp9Q==",
+      "dependencies": {
+        "dommatrix": "^1.0.3",
+        "web-streams-polyfill": "^3.2.1"
+      },
+      "peerDependencies": {
+        "worker-loader": "^3.0.8"
+      },
+      "peerDependenciesMeta": {
+        "worker-loader": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -32166,6 +32489,34 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-url": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
+      "integrity": "sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==",
+      "dependencies": {
+        "make-dir": "~3.1.0",
+        "mime": "~2.5.2",
+        "minimatch": "~3.0.4",
+        "xxhashjs": "~0.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-url/node_modules/mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -34352,7 +34703,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -34962,6 +35312,17 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -38660,6 +39021,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/web-worker": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
@@ -38957,6 +39326,22 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -39063,6 +39448,26 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -39091,6 +39496,14 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/xxhashjs": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
+      "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==",
+      "dependencies": {
+        "cuint": "^0.2.2"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -39635,18 +40048,23 @@
     },
     "packages/components": {
       "name": "@portaljs/components",
-      "version": "0.1.12",
+      "version": "0.2.0",
       "dependencies": {
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",
         "@planet/maps": "^8.1.0",
+        "@react-pdf-viewer/core": "3.6.0",
+        "@react-pdf-viewer/default-layout": "3.6.0",
         "@tanstack/react-table": "^8.8.5",
+        "ag-grid-react": "^30.0.4",
         "chroma-js": "^2.4.2",
         "flexsearch": "0.7.21",
         "leaflet": "^1.9.4",
         "next-mdx-remote": "^4.4.1",
         "ol": "^7.4.0",
         "papaparse": "^5.4.1",
+        "pdfjs-dist": "2.15.349",
+        "postcss-url": "^10.1.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
@@ -39655,7 +40073,8 @@
         "react-vega": "^7.6.0",
         "vega": "5.25.0",
         "vega-lite": "5.1.0",
-        "vitest": "^0.31.4"
+        "vitest": "^0.31.4",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@storybook/addon-essentials": "^7.0.7",
@@ -46849,6 +47268,8 @@
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",
         "@planet/maps": "^8.1.0",
+        "@react-pdf-viewer/core": "3.6.0",
+        "@react-pdf-viewer/default-layout": "3.6.0",
         "@storybook/addon-essentials": "^7.0.7",
         "@storybook/addon-interactions": "^7.0.7",
         "@storybook/addon-links": "^7.0.7",
@@ -46867,6 +47288,7 @@
         "@typescript-eslint/parser": "^5.57.1",
         "@vitejs/plugin-react": "^4.0.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
+        "ag-grid-react": "^30.0.4",
         "autoprefixer": "^10.4.14",
         "chroma-js": "^2.4.2",
         "eslint": "^8.38.0",
@@ -46879,9 +47301,11 @@
         "next-mdx-remote": "^4.4.1",
         "ol": "^7.4.0",
         "papaparse": "^5.4.1",
+        "pdfjs-dist": "2.15.349",
         "postcss": "^8.4.23",
         "postcss-import": "^15.1.0",
         "postcss-import-url": "^7.2.0",
+        "postcss-url": "^10.1.3",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -46897,7 +47321,8 @@
         "vite": "^4.3.2",
         "vite-plugin-dts": "^2.3.0",
         "vite-plugin-swc-only": "^0.1.18",
-        "vitest": "^0.31.4"
+        "vitest": "^0.31.4",
+        "xlsx": "^0.18.5"
       },
       "dependencies": {
         "@eslint/eslintrc": {
@@ -47256,6 +47681,164 @@
       "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
       "requires": {}
     },
+    "@react-pdf-viewer/attachment": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/attachment/-/attachment-3.6.0.tgz",
+      "integrity": "sha512-etxzIQsssuUE0TYVScHDuL+AArQp3YbDTowGbpdCv8JqJFYzuGFV9+3uyvJ8QlGcPChhhr2CjHrbCTF2F2bw5w==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/bookmark": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/bookmark/-/bookmark-3.6.0.tgz",
+      "integrity": "sha512-HaAQjaDrzE6Lbt89f0B1Z+jst3moSG3pqok7aGO4PmclxH4mtbBGK+zyXpWdF5+8feEnAa7QP3nWod5uAhJUQw==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/core": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/core/-/core-3.6.0.tgz",
+      "integrity": "sha512-5tDBF+BafVLNULIJf1cej7nBegNrbYtdvoBKtRs9mLo3sGENIyeZuDsP4W+5mSKK84oxO3NY5MzkTkmnuu4R9g==",
+      "requires": {}
+    },
+    "@react-pdf-viewer/default-layout": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/default-layout/-/default-layout-3.6.0.tgz",
+      "integrity": "sha512-68DjK+FB5+zyK5FKFYmIEcplq64Jejb3Y7tAVa9U/tEsoRnZt7C2mKW2e1IAEDZc+1ncdIboZvlFfRCSEDiG5A==",
+      "requires": {
+        "@react-pdf-viewer/attachment": "3.6.0",
+        "@react-pdf-viewer/bookmark": "3.6.0",
+        "@react-pdf-viewer/core": "3.6.0",
+        "@react-pdf-viewer/thumbnail": "3.6.0",
+        "@react-pdf-viewer/toolbar": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/full-screen": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/full-screen/-/full-screen-3.6.0.tgz",
+      "integrity": "sha512-SG5mpE/AZr6DtwP7soGFqfGoU5wbQvaBc2KTz+upqhgmUIEyE8AwGa+ozCgkGEqTvlJ4dP7D5Kku2BFsC6l3Cg==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/get-file": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/get-file/-/get-file-3.6.0.tgz",
+      "integrity": "sha512-cfMrig0Iu49yTePZSWwnyUMqu2F1pynP59snhTRoOg7RbpcAcppnDcYvVjThsE80wq1ltgMnufaVSsVoSbqIrQ==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/open": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/open/-/open-3.6.0.tgz",
+      "integrity": "sha512-l/fBEj/7KjYH/mLMukos0nYypIuhovq2dO3TkQBHzQPdwtBdUTr049+AiSZnMDx1CIpr8Oz3FjB5FSw+LZuUog==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/page-navigation": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/page-navigation/-/page-navigation-3.6.0.tgz",
+      "integrity": "sha512-YAfJ3Q6jEZ2ZtXwsdPSeCddrMvdtIG1bZidhujz47LRgZyr9ZmFVd5/D9aGm12sY5F/XB6V71SOnkww0aEOTqw==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/print": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/print/-/print-3.6.0.tgz",
+      "integrity": "sha512-bQSf+qsl1OZlB6Ft1ES5xjqTirIbF1m0pZD5KLRuxAAjqMyeTBZOLC3mpgRXg2nGJ0X3BcrDrurNIkXO/CE2SQ==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/properties": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/properties/-/properties-3.6.0.tgz",
+      "integrity": "sha512-J0tQxYK3ql3dXgjtiqOH1gU3ajUMWE5O6BNxFqE0zvE7BsnDZH6wfCVi8okkbivp0oEKC4TjSxF+KkHa9HZlPw==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/rotate": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/rotate/-/rotate-3.6.0.tgz",
+      "integrity": "sha512-E1LZhWdj5dGwwZ3VreC32eT0VesniOTp1zDeZVX3Tom8XXxc9+A5/H/+DTY0/v1wimR5afB2aqCtQIjcQVupeQ==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/scroll-mode": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/scroll-mode/-/scroll-mode-3.6.0.tgz",
+      "integrity": "sha512-KBIdCZsJxbtOAlSOgw1IpGdS5txboHXPheRnjWtjNpOCWAhkYwKV4YNRAdTATPxb+zcOrkWmiU4sHgj9m4kQLw==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/search": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/search/-/search-3.6.0.tgz",
+      "integrity": "sha512-VxqUfws400C2FwaOzKTvgZgI8bhQ0Hx4aL/Ada42WbUmnySm+SGSM+l7Snj3q5pbYd3svcyz9xTlVrJDfXQ4IQ==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/selection-mode": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/selection-mode/-/selection-mode-3.6.0.tgz",
+      "integrity": "sha512-To8Sev/30eQMDzVofPfwWXoEUfWUizqD7O67VCG+oaP6yc640y/MX4nVsP9kg+u2Git3CFSolaHgEWg/sOY60A==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/theme": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/theme/-/theme-3.6.0.tgz",
+      "integrity": "sha512-IfLLKvKeuIK0dqL9YcSjSsopvhYKBEQLoDHc1lZ/XZGXANbqExFwOCeklPx40HwgUm8LL/arJNoLrbrGrGMCCA==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/thumbnail": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/thumbnail/-/thumbnail-3.6.0.tgz",
+      "integrity": "sha512-fd0SERR9yPfWN5cpnhiJ3qp9KG7hR1FJkJ8S5KgDbl3AObn1tOM9Kw8m4Qw8Od5GIrsxxhdTUdw4esup5n2RBg==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/toolbar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/toolbar/-/toolbar-3.6.0.tgz",
+      "integrity": "sha512-Efz8hNsmes7A2kHVBZkXsWwrYsjybUDOf+Y69LRWilpNij4D/jtVdysQ0uSoeZYYT4P0OfNnxB5ZcdHZCn6PXg==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0",
+        "@react-pdf-viewer/full-screen": "3.6.0",
+        "@react-pdf-viewer/get-file": "3.6.0",
+        "@react-pdf-viewer/open": "3.6.0",
+        "@react-pdf-viewer/page-navigation": "3.6.0",
+        "@react-pdf-viewer/print": "3.6.0",
+        "@react-pdf-viewer/properties": "3.6.0",
+        "@react-pdf-viewer/rotate": "3.6.0",
+        "@react-pdf-viewer/scroll-mode": "3.6.0",
+        "@react-pdf-viewer/search": "3.6.0",
+        "@react-pdf-viewer/selection-mode": "3.6.0",
+        "@react-pdf-viewer/theme": "3.6.0",
+        "@react-pdf-viewer/zoom": "3.6.0"
+      }
+    },
+    "@react-pdf-viewer/zoom": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf-viewer/zoom/-/zoom-3.6.0.tgz",
+      "integrity": "sha512-EEmYtC07UVK1c8wLyL1fH4PszCsi8r0smPtuuiKN0AMR40ac4GcjiqxmJppgP7HOLexCk38lgg+SpIDGuLCV4Q==",
+      "requires": {
+        "@react-pdf-viewer/core": "3.6.0"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -50929,6 +51512,25 @@
       "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
       "dev": true
     },
+    "adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
+    },
+    "ag-grid-community": {
+      "version": "30.0.3",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-30.0.3.tgz",
+      "integrity": "sha512-agfRVHELQqhnMfRplmYEYdxMxw3c8l5Bu7lNaCfIVOasyRlSAvH4Na8qru0ORaOUN3ClulfvKIuLSWwgGSwJJQ==",
+      "peer": true
+    },
+    "ag-grid-react": {
+      "version": "30.0.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-30.0.4.tgz",
+      "integrity": "sha512-6N3O0avco1BVt5jLe6tD3GepvsmoxV4gvqHQ4SguYwqkfvO9IzN8GEOiVScLlAn1zvWjhCeSpnIYRi44bP3wqQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -52180,6 +52782,15 @@
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
       "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="
     },
+    "cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "requires": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      }
+    },
     "chai": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
@@ -52403,6 +53014,11 @@
       "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==",
       "dev": true
     },
+    "codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
+    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -52804,6 +53420,11 @@
         "yaml": "^1.10.0"
       }
     },
+    "crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
+    },
     "create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -53065,6 +53686,11 @@
       "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==",
       "dev": true
     },
+    "cuint": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
+      "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw=="
+    },
     "cypress": {
       "version": "12.9.0",
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.9.0.tgz",
@@ -54004,6 +54630,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
+    },
     "dompurify": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
@@ -55765,6 +56396,11 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -61973,7 +62609,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
       "requires": {
         "semver": "^6.0.0"
       }
@@ -64240,6 +64875,15 @@
         "resolve-protobuf-schema": "^2.1.0"
       }
     },
+    "pdfjs-dist": {
+      "version": "2.15.349",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.15.349.tgz",
+      "integrity": "sha512-EeCfqj6xi4/aegKNS7Bs+TCg3Y5gmKmG0s/5xXI0PqWW66x+Nm7iFXBpVcup7HnR8sNDm+5NESfFr8T6DeWp9Q==",
+      "requires": {
+        "dommatrix": "^1.0.3",
+        "web-streams-polyfill": "^3.2.1"
+      }
+    },
     "peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -64714,6 +65358,24 @@
         "postcss-selector-parser": "^6.0.5"
       }
     },
+    "postcss-url": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
+      "integrity": "sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==",
+      "requires": {
+        "make-dir": "~3.1.0",
+        "mime": "~2.5.2",
+        "minimatch": "~3.0.4",
+        "xxhashjs": "~0.2.2"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+          "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg=="
+        }
+      }
+    },
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -66346,8 +67008,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-      "dev": true
     },
     "send": {
       "version": "0.18.0",
@@ -66857,6 +67518,14 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -69648,6 +70317,11 @@
       "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
       "devOptional": true
     },
+    "web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
+    },
     "web-worker": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
@@ -69873,6 +70547,16 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -69946,6 +70630,20 @@
       "devOptional": true,
       "requires": {}
     },
+    "xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "requires": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      }
+    },
     "xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -69968,6 +70666,14 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
+    "xxhashjs": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
+      "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==",
+      "requires": {
+        "cuint": "^0.2.2"
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

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

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

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @portaljs/components
 
+## 0.3.0
+
+### Minor Changes
+
+- [`2e13c1b7`](https://github.com/datopian/portaljs/commit/2e13c1b738ddac91a9419f5c0484406328bd1cd3) Thanks [@demenech](https://github.com/demenech)! - PDF and Excel components
+
+- [#973](https://github.com/datopian/portaljs/pull/973) [`f3c2a2ff`](https://github.com/datopian/portaljs/commit/f3c2a2ffa7dcf9693bd25318c719ce58d27070b8) Thanks [@demenech](https://github.com/demenech)! - Implement <Excel /> component
+
 ## 0.2.0
 
 ### Minor Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [
@@ -17,7 +17,7 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/styles.css --minify",
+    "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/style.css --minify",
     "prepare": "npm run build",
     "fix-leaflet": "node ./scripts/fix-leaflet.cjs"
   },
@@ -30,12 +30,14 @@
     "@heroicons/react": "^2.0.17",
     "@planet/maps": "^8.1.0",
     "@tanstack/react-table": "^8.8.5",
+    "ag-grid-react": "^30.0.4",
     "chroma-js": "^2.4.2",
     "flexsearch": "0.7.21",
     "leaflet": "^1.9.4",
     "next-mdx-remote": "^4.4.1",
     "ol": "^7.4.0",
     "papaparse": "^5.4.1",
+    "postcss-url": "^10.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
@@ -44,7 +46,11 @@
     "react-vega": "^7.6.0",
     "vega": "5.25.0",
     "vega-lite": "5.1.0",
-    "vitest": "^0.31.4"
+    "vitest": "^0.31.4",
+    "@react-pdf-viewer/core": "3.6.0",
+    "@react-pdf-viewer/default-layout": "3.6.0",
+    "pdfjs-dist": "2.15.349",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.7",
@@ -93,7 +99,7 @@
       "require": "./dist/components.umd.js"
     },
     "./styles.css": {
-      "import": "./dist/styles.css"
+      "import": "./dist/style.css"
     }
   },
   "publishConfig": {

packages/components/postcss.config.js

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

packages/components/src/components/Excel.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react';
+import LoadingSpinner from './LoadingSpinner';
+import { read, utils } from 'xlsx';
+import { AgGridReact } from 'ag-grid-react';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+
+export type ExcelProps = {
+  url: string;
+};
+
+export function Excel({ url }: ExcelProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [activeSheetName, setActiveSheetName] = useState<string>();
+  const [workbook, setWorkbook] = useState<any>();
+  const [rows, setRows] = useState<any>();
+  const [cols, setCols] = useState<any>();
+
+  const loadSpreadsheet = (wb: any, name: string) => {
+    setActiveSheetName(name);
+    const ws = wb.Sheets[name];
+
+    const range = utils.decode_range(ws['!ref'] || 'A1');
+    const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({
+      field: utils.encode_col(i),
+    }));
+
+    const rowsAr = utils.sheet_to_json(ws, { header: 1 });
+    const rows = rowsAr.map((row) => {
+      const obj = {};
+      columns.forEach((col, i) => {
+        obj[col.field] = row[i];
+      });
+      return obj;
+    });
+
+    setRows(rows);
+    setCols(columns);
+  };
+
+  useEffect(() => {
+    setIsLoading(true);
+
+    fetch(url)
+      .then((res) => res.arrayBuffer())
+      .then((f) => {
+        const wb = read(f);
+        setWorkbook(wb);
+        loadSpreadsheet(wb, wb.SheetNames[0]);
+        setIsLoading(false);
+      });
+  }, [url]);
+
+  return isLoading ? (
+    <div className="w-full flex items-center justify-center w-[600px] h-[300px]">
+      <LoadingSpinner />
+    </div>
+  ) : (
+    <>
+      {cols && rows && (
+        <div>
+          <div
+            className="ag-theme-alpine"
+            style={{ height: 400, width: '100%' }}
+          >
+            <AgGridReact
+              rowData={rows}
+              columnDefs={cols}
+              defaultColDef={{
+                resizable: true,
+                minWidth: 200,
+                flex: 1,
+                sortable: true,
+                filter: true,
+              }}
+            ></AgGridReact>
+          </div>
+          <div className="border-t">
+            {workbook.SheetNames.map((name: string, idx: number) => {
+              return (
+                <>
+                  <button
+                    key={idx}
+                    className={`text-sm px-3 pb-2 pt-4 border-b border-l border-r ${
+                      name == activeSheetName ? 'font-semibold' : ''
+                    }`}
+                    onClick={() => loadSpreadsheet(workbook, name)}
+                  >
+                    {name}
+                  </button>
+                </>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

packages/components/src/components/Map.tsx

@@ -6,9 +6,10 @@ import {
   MapContainer,
   TileLayer,
   GeoJSON as GeoJSONLayer,
-  LayersControl
+  LayersControl,
 } from 'react-leaflet';
 
+import 'leaflet/dist/leaflet.css';
 import * as L from 'leaflet';
 
 export type MapProps = {
@@ -131,6 +132,27 @@ export function Map({
               <LayersControl.Overlay key={layer.name} checked name={layer.name}>
                 <GeoJSONLayer
                   data={data}
+                  //  @ts-ignore
+                  pointToLayer={(feature, latlng) => {
+                    //  This resolver an issue in which the bundled map was
+                    //  not finding the images
+                    const leafletBase =
+                      'https://unpkg.com/leaflet@1.9.4/dist/images/';
+
+                    const icon = new L.Icon({
+                      iconUrl: leafletBase + 'marker-icon.png',
+                      iconRetinaUrl: leafletBase + 'marker-icon-2x.png',
+                      shadowUrl: leafletBase + 'marker-shadow.png',
+                      iconSize: [25, 41],
+                      iconAnchor: [12, 41],
+                      popupAnchor: [1, -34],
+                      tooltipAnchor: [16, -28],
+                      shadowSize: [41, 41],
+                    });
+
+                    const iconMarker = L.marker(latlng, { icon });
+                    return iconMarker;
+                  }}
                   style={(geoJsonFeature: any) => {
                     //  Set the fill color of each feature when appliable
                     if (

packages/components/src/components/PdfViewer.tsx

@@ -0,0 +1,32 @@
+// Core viewer
+import { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+
+// Import styles
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+
+export interface PdfViewerProps {
+  url: string;
+  layout: boolean;
+  parentClassName?: string;
+}
+
+export function PdfViewer({
+  url,
+  layout = false,
+  parentClassName,
+}: PdfViewerProps) {
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
+  return (
+    <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
+      <div className={parentClassName}>
+        <Viewer
+          defaultScale={SpecialZoomLevel.PageWidth}
+          fileUrl={url}
+          plugins={layout ? [defaultLayoutPluginInstance] : []}
+        />
+      </div>
+    </Worker>
+  );
+}

packages/components/src/index.css

@@ -1,7 +1,11 @@
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import "leaflet";
 @import "include";
+@import "leaflet";
+@import '@react-pdf-viewer/core/lib/styles/index.css';
+@import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-alpine.css';
 @import "tailwindcss/utilities";
 

packages/components/src/index.ts

@@ -1,8 +1,10 @@
-export * from "./components/Table";
+export * from './components/Table';
-export * from "./components/Catalog";
+export * from './components/Catalog';
-export * from "./components/LineChart";
+export * from './components/LineChart';
-export * from "./components/Vega";
+export * from './components/Vega';
-export * from "./components/VegaLite";
+export * from './components/VegaLite';
-export * from "./components/FlatUiTable";
+export * from './components/FlatUiTable';
 export * from './components/OpenLayers/OpenLayers';
-export * from "./components/Map";
+export * from './components/Map';
+export * from './components/PdfViewer';
+export * from "./components/Excel";

packages/components/stories/Excel.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Excel, ExcelProps } from '../src/components/Excel';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/Excel',
+  component: Excel,
+  tags: ['autodocs'],
+  argTypes: {
+    url: {
+      description:
+        'Url of the file to be displayed e.g.: "https://url.to/data.csv"',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ExcelProps>;
+
+export const SingleSheet: Story = {
+  name: 'Excel file with just one sheet',
+  args: {
+    url: 'https://sheetjs.com/pres.xlsx',
+  },
+};
+
+export const MultipleSheet: Story = {
+  name: 'Excel file with multiple sheets',
+  args: {
+    url: 'https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx',
+  },
+};

packages/components/stories/PdfViewer.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PdfViewer, PdfViewerProps } from '../src/components/PdfViewer';
+
+const meta: Meta = {
+  title: 'Components/PdfViewer',
+  component: PdfViewer,
+  tags: ['autodocs'],
+  argTypes: {
+    url: {
+      description: 'URL to PDF file',
+    },
+    parentClassName: {
+      description: 'Classname for the parent div of the pdf viewer',
+    },
+    layour: {
+      description:
+        'Set to true if you want to have a layout with zoom level, page count, printing button etc',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PdfViewerProps>;
+
+export const PdfViewerStory: Story = {
+  name: 'PdfViewer',
+  args: {
+    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+  },
+};
+
+export const PdfViewerStoryWithLayout: Story = {
+  name: 'PdfViewer with the default layout',
+  args: {
+    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    layout: true,
+  },
+};
+
+export const PdfViewerStoryWithHeight: Story = {
+  name: 'PdfViewer with a custom height',
+  args: {
+    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    parentClassName: 'h-96',
+    layout: true,
+  },
+};

packages/components/tailwind.config.js

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

packages/components/vite.config.ts

@@ -4,7 +4,6 @@ import { defineConfig } from 'vitest/config';
 import dts from 'vite-plugin-dts';
 import tailwindcss from 'tailwindcss';
 import { UserConfigExport } from 'vite';
-import replace from 'rollup-plugin-re';
 
 const app = async (): Promise<UserConfigExport> => {
   return defineConfig({
@@ -37,7 +36,7 @@ const app = async (): Promise<UserConfigExport> => {
           'vega',
           'react-vega',
           'ol',
-          'leaflet'
+          'leaflet',
         ],
         output: {
           manualChunks: undefined,
@@ -48,7 +47,7 @@ const app = async (): Promise<UserConfigExport> => {
             'react-vega': 'react-vega',
             'react-dom': 'ReactDOM',
             tailwindcss: 'tailwindcss',
-            leaflet: 'leaflet'
+            leaflet: 'leaflet',
           },
         },
       },

site/components/Hero.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import ButtonLink from './ButtonLink';
 import NewsletterForm from './NewsletterForm';
 import Image from 'next/image';
-import DatahubExampleImg from "@/public/images/showcases/datahub.png"
+import DatahubExampleImg from '@/public/images/showcases/datahub.webp';
 
 const codeLanguage = 'javascript';
 const code = `export default {
@@ -41,7 +41,7 @@ export function Hero() {
         {/* 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 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="relative mb-10 lg:mb-0 md:text-center lg:text-left">
-            <div role="heading">
+            <div>
               <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
               </h1>
@@ -72,9 +72,11 @@ export function Hero() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <img
+                <Image
                   src="/images/datopian_logo.png"
                   alt="Datopian"
+                  width={24}
+                  height={20}
                   className="mx-2 mb-1 h-6 inline bg-black rounded-full"
                 />
                 <span>Datopian</span>
@@ -85,7 +87,12 @@ export function Hero() {
             <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" />
-                <Image src={DatahubExampleImg} alt="opendata.datahub.io" />
+              <Image
+                height={400}
+                width={600}
+                src={DatahubExampleImg}
+                alt="opendata.datahub.io"
+              />
             </div>
           </div>
         </div>

site/components/NavItem.tsx

@@ -20,7 +20,7 @@ export default function NavItem({ item }) {
   };
 
   return (
-    <Menu as="div" className="relative">
+    <Menu as="div" role="menu" className="relative">
       <Menu.Item>
         {Object.prototype.hasOwnProperty.call(item, 'href') ? (
           <Link

site/components/NewsletterForm.tsx

@@ -3,10 +3,6 @@ import Script from 'next/script';
 export default function NewsletterForm() {
   return (
     <div>
-      <link
-        rel="stylesheet"
-        href="https://sibforms.com/forms/end-form/build/sib-styles.css"
-      />
       <div
         id="sib-form-container"
         className="mt-8 sm:mx-auto sm:text-center lg:text-left lg:mx-0"
@@ -119,6 +115,7 @@ export default function NewsletterForm() {
         }}
       />
       <Script
+        strategy="worker"
         id="newsletter-submit-form"
         src="https://sibforms.com/forms/end-form/build/main.js"
       />

site/components/Showcases.tsx

@@ -5,26 +5,26 @@ const items = [
   {
     title: 'Open Data Northern Ireland',
     href: 'https://www.opendatani.gov.uk/',
-    image: '/images/showcases/odni.png',
+    image: '/images/showcases/odni.webp',
     description: 'Government Open Data Portal',
   },
   {
     title: 'Birmingham City Observatory',
     href: 'https://www.cityobservatory.birmingham.gov.uk/',
-    image: '/images/showcases/birmingham.png',
+    image: '/images/showcases/birmingham.webp',
     description: 'Government Open Data Portal',
   },
   {
     title: 'UAE Open Data',
     href: 'https://opendata.fcsc.gov.ae/',
-    image: '/images/showcases/uae.png',
+    image: '/images/showcases/uae.webp',
     description: 'Government Open Data Portal',
     sourceUrl: 'https://github.com/FCSCOpendata/frontend',
   },
   {
     title: 'Datahub Open Data',
     href: 'https://opendata.datahub.io/',
-    image: '/images/showcases/datahub.png',
+    image: '/images/showcases/datahub.webp',
     description: 'Demo Data Portal by DataHub',
   },
 ];

site/content/config.js

@@ -1,61 +1,68 @@
 const config = {
-  title:
+  title: 'PortalJS',
-    "PortalJS",
   description:
-    "PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach. PortalJS can be used to present a single dataset or build a full-scale data catalog/portal.",
+    'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach. PortalJS can be used to present a single dataset or build a full-scale data catalog/portal.',
   theme: {
-    default: "dark",
+    default: 'dark',
-    toggleIcon: "/images/theme-button.svg",
+    toggleIcon: '/images/theme-button.svg',
   },
-  author: "Datopian",
+  author: 'Datopian',
-  authorLogo: "/datopian-logo.png",
+  authorLogo: '/datopian-logo.webp',
-  authorUrl: "https://datopian.com/",
+  authorUrl: 'https://datopian.com/',
   navbarTitle: {
     // logo: "/images/logo.svg",
-    text: "🌀 PortalJS",
+    text: '🌀 PortalJS',
     // version: "Alpha",
   },
   navLinks: [
-    { name: "Docs", href: "/docs" },
+    { name: 'Docs', href: '/docs' },
     // { name: "Components", href: "/docs/components" },
-    { name: "Blog", href: "/blog" },
+    { name: 'Blog', href: '/blog' },
-    { name: "Showcases", href: "/#showcases" },
+    { name: 'Showcases', href: '/#showcases' },
-    { name: "Howtos", href: "/howtos" },
+    { name: 'Howtos', href: '/howtos' },
-    { name: "Guide", href: "/guide" },
+    { name: 'Guide', href: '/guide' },
-    { name: "Examples", href: "https://github.com/datopian/portaljs/tree/main/examples", target: "_blank" },
+    {
-    { name: "Components", href: "https://storybook.portaljs.org", target: "_blank" },
+      name: 'Examples',
+      href: 'https://github.com/datopian/portaljs/tree/main/examples',
+      target: '_blank',
+    },
+    {
+      name: 'Components',
+      href: 'https://storybook.portaljs.org',
+      target: '_blank',
+    },
     // { name: "DL Demo", href: "/data-literate/demo" },
     // { name: "Excel Viewer", href: "/excel-viewer" },
   ],
   footerLinks: [],
   nextSeo: {
     openGraph: {
-      type: "website",
+      type: 'website',
       title:
-        "PortalJS - rapidly build rich data portals using a modern frontend framework.",
+        'PortalJS - rapidly build rich data portals using a modern frontend framework.',
       description:
-        "PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach. PortalJS can be used to present a single dataset or build a full-scale data catalog and portal.",
+        'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach. PortalJS can be used to present a single dataset or build a full-scale data catalog and portal.',
-      locale: "en_US",
+      locale: 'en_US',
       images: [
         {
-          url: "/homepage-screenshot.png",  //  TODO
+          url: '/homepage-screenshot.png', //  TODO
-          alt: "PortalJS - rapidly build rich data portals using a modern frontend framework.",
+          alt: 'PortalJS - rapidly build rich data portals using a modern frontend framework.',
           width: 1280,
           height: 720,
-          type: "image/jpg",
+          type: 'image/jpg',
         },
       ],
     },
     twitter: {
-      handle: "@datopian",
+      handle: '@datopian',
-      site: "https://datopian.com/",
+      site: 'https://datopian.com/',
-      cardType: "summary_large_image",
+      cardType: 'summary_large_image',
     },
   },
-  github: "https://github.com/datopian/portaljs",
+  github: 'https://github.com/datopian/portaljs',
-  discord: "https://discord.gg/EeyfGrGu4U",
+  discord: 'https://discord.gg/EeyfGrGu4U',
   tableOfContents: true,
-  analytics: "G-96GWZHMH57",
+  analytics: 'G-96GWZHMH57',
   // editLinkShow: true,
 };
 export default config;

site/content/docs/index.md

@@ -38,7 +38,7 @@ Let's check it's working and what we have! Open http://localhost:3000 from your
 
 You should see a page like this when you access http://localhost:3000. This is the starter template page which shows the most simple data portal you could have: a simple README plus csv file.
 
-<img src="/assets/examples/basic-example.png" />
+<img src="/assets/examples/basic-example.png" alt="Basic example" />
 
 ### Editing the Page
 
@@ -51,7 +51,7 @@ Let’s try editing the starter page.
 
 After refreshing the page, you should see the new text:
 
-<img src="/assets/docs/editing-the-page-1.png" />
+<img src="/assets/docs/editing-the-page-1.png" alt="Editing base example" />
 
 Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets.
 

site/lib/markdown.mjs

@@ -1,21 +1,21 @@
-import { h } from "hastscript";
+import { h } from 'hastscript';
-import matter from "gray-matter";
+import matter from 'gray-matter';
-import mdxmermaid from "mdx-mermaid";
+import mdxmermaid from 'mdx-mermaid';
-import remarkCallouts from "@portaljs/remark-callouts";
+import remarkCallouts from '@portaljs/remark-callouts';
-import remarkEmbed from "@portaljs/remark-embed";
+import remarkEmbed from '@portaljs/remark-embed';
-import remarkGfm from "remark-gfm";
+import remarkGfm from 'remark-gfm';
-import remarkMath from "remark-math";
+import remarkMath from 'remark-math';
-import remarkSmartypants from "remark-smartypants";
+import remarkSmartypants from 'remark-smartypants';
-import remarkToc from "remark-toc";
+import remarkToc from 'remark-toc';
-import remarkWikiLink, { getPermalinks } from "@portaljs/remark-wiki-link";
+import remarkWikiLink, { getPermalinks } from '@portaljs/remark-wiki-link';
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeKatex from "rehype-katex";
+import rehypeKatex from 'rehype-katex';
-import rehypeSlug from "rehype-slug";
+import rehypeSlug from 'rehype-slug';
-import rehypePrismPlus from "rehype-prism-plus";
+import rehypePrismPlus from 'rehype-prism-plus';
-import { serialize } from "next-mdx-remote/serialize";
+import { serialize } from 'next-mdx-remote/serialize';
 
-import * as tw from "../tailwind.config";
+import * as tw from '../tailwind.config';
-import { siteConfig } from "../config/siteConfig";
+import { siteConfig } from '../config/siteConfig';
 
 /**
  * Parse a markdown or MDX file to an MDX source form + front matter data
@@ -36,14 +36,14 @@ const parse = async function (source, format, scope) {
         remarkPlugins: [
           remarkEmbed,
           remarkGfm,
-          [remarkSmartypants, { quotes: false, dashes: "oldschool" }],
+          [remarkSmartypants, { quotes: false, dashes: 'oldschool' }],
           remarkMath,
           remarkCallouts,
-          [remarkWikiLink, { permalinks, pathFormat: "obsidian-short" }],
+          [remarkWikiLink, { permalinks, pathFormat: 'obsidian-short' }],
           [
             remarkToc,
             {
-              heading: "Table of contents",
+              heading: 'Table of contents',
               tight: true,
             },
           ],
@@ -54,29 +54,36 @@ const parse = async function (source, format, scope) {
           [
             rehypeAutolinkHeadings,
             {
-              properties: { className: "heading-link" },
+              properties: { className: 'heading-link' },
               test(element) {
                 return (
-                  ["h2", "h3", "h4", "h5", "h6"].includes(element.tagName) &&
+                  ['h2', 'h3', 'h4', 'h5', 'h6'].includes(element.tagName) &&
-                  element.properties?.id !== "table-of-contents" &&
+                  element.properties?.id !== 'table-of-contents' &&
-                  element.properties?.className !== "blockquote-heading"
+                  element.properties?.className !== 'blockquote-heading'
                 );
               },
-              content() {
+              content(node) {
                 return [
                   h(
-                    "svg",
+                    'span.invisible.block.h-0.w-0',
+                    { ariaLabel: node.properties.id },
+                    'Read the “',
+                    node.properties.id,
+                    '” section'
+                  ),
+                  h(
+                    'svg',
                     {
-                      xmlns: "http:www.w3.org/2000/svg",
+                      xmlns: 'http:www.w3.org/2000/svg',
                       fill: tw.theme.extend.colors.secondary.DEFAULT,
-                      viewBox: "0 0 20 20",
+                      viewBox: '0 0 20 20',
-                      className: "w-5 h-5",
+                      className: 'w-5 h-5',
                     },
                     [
-                      h("path", {
+                      h('path', {
-                        fillRule: "evenodd",
+                        fillRule: 'evenodd',
-                        clipRule: "evenodd",
+                        clipRule: 'evenodd',
-                        d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z",
+                        d: 'M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z',
                       }),
                     ]
                   ),
@@ -84,7 +91,7 @@ const parse = async function (source, format, scope) {
               },
             },
           ],
-          [rehypeKatex, { output: "mathml" }],
+          [rehypeKatex, { output: 'mathml' }],
           [rehypePrismPlus, { ignoreMissing: true }],
         ],
         format,

site/pages/_app.tsx

@@ -1,14 +1,15 @@
-import "../styles/globals.css";
+import '../styles/globals.css';
-import "../styles/tailwind.css";
+import '../styles/tailwind.css';
+import '../styles/sib-form.css';
 
-import Script from "next/script";
+import Script from 'next/script';
 
-import { DefaultSeo } from "next-seo";
+import { DefaultSeo } from 'next-seo';
 
-import { NavGroup, NavItem, pageview, ThemeProvider } from "@portaljs/core";
+import { NavGroup, NavItem, pageview, ThemeProvider } from '@portaljs/core';
-import { siteConfig } from "../config/siteConfig";
+import { siteConfig } from '../config/siteConfig';
-import { useEffect } from "react";
+import { useEffect } from 'react';
-import { useRouter } from "next/dist/client/router";
+import { useRouter } from 'next/dist/client/router';
 
 export interface CustomAppProps {
   meta: {
@@ -32,9 +33,9 @@ function MyApp({ Component, pageProps }) {
       const handleRouteChange = (url) => {
         pageview(url);
       };
-      router.events.on("routeChangeComplete", handleRouteChange);
+      router.events.on('routeChangeComplete', handleRouteChange);
       return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
+        router.events.off('routeChangeComplete', handleRouteChange);
       };
     }
   }, [router.events]);
@@ -44,7 +45,7 @@ function MyApp({ Component, pageProps }) {
       disableTransitionOnChange
       attribute="class"
       defaultTheme={siteConfig.theme.default}
-      forcedTheme={siteConfig.theme.default ? null : "light"}
+      forcedTheme={siteConfig.theme.default ? null : 'light'}
     >
       <DefaultSeo defaultTitle={siteConfig.title} {...siteConfig.nextSeo} />
 
@@ -73,7 +74,12 @@ function MyApp({ Component, pageProps }) {
       )}
 
       {/* Umami Analytics */}
-      <Script async defer data-website-id="061e14c1-6157-4a93-820c-777c7a937c12" src="https://analytics.datopian.com/umami.js" />
+      <Script
+        async
+        defer
+        data-website-id="061e14c1-6157-4a93-820c-777c7a937c12"
+        src="https://analytics.datopian.com/umami.js"
+      />
 
       <Component {...pageProps} />
     </ThemeProvider>

site/pages/index.tsx

@@ -7,6 +7,7 @@ import Layout from '../components/Layout';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { collectHeadings } from '@portaljs/core';
+import Head from 'next/head';
 
 export default function Home({ sidebarTree }) {
   const router = useRouter();
@@ -23,7 +24,11 @@ export default function Home({ sidebarTree }) {
 
   return (
     <>
-      <Layout isHomePage={true} tableOfContents={tableOfContents} sidebarTree={sidebarTree} >
+      <Layout
+        isHomePage={true}
+        tableOfContents={tableOfContents}
+        sidebarTree={sidebarTree}
+      >
         <Features />
         <Showcases />
         <Community />

site/styles/globals.css

@@ -1,4 +1,4 @@
-@import "@portaljs/remark-callouts/styles.css";
+@import '@portaljs/remark-callouts/styles.css';
 @import './prism.css';
 
 html,
@@ -31,7 +31,7 @@ html {
 
 /* tooltip fade-out clip */
 .tooltip-body::after {
-  content: "";
+  content: '';
   position: absolute;
   right: 0;
   top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */