[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

.changeset/shiny-parents-shop.md

@@ -1,5 +0,0 @@
----
-'@portaljs/components': minor
----
-
-Implement <Excel /> 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",
@@ -17948,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",
@@ -31495,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",
@@ -38768,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",
@@ -39792,6 +40053,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",
         "@tanstack/react-table": "^8.8.5",
         "ag-grid-react": "^30.0.4",
         "chroma-js": "^2.4.2",
@@ -39800,6 +40063,7 @@
         "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",
@@ -47004,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",
@@ -47035,10 +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": "*",
+        "postcss-url": "^10.1.3",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -47414,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",
@@ -54205,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",
@@ -64445,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",
@@ -69878,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",

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": [

packages/components/src/index.css

@@ -3,6 +3,8 @@
 @import "tailwindcss/components";
 @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";

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,8 +51,8 @@ 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. 
+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.
 
 <DocsPagination next="/docs/creating-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} />
 
@@ -71,10 +72,15 @@ 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) */