[site/content/guide][m]: tutorial 3 overview

Site/minor fixes

.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",
@@ -39787,11 +40048,13 @@
     },
     "packages/components": {
       "name": "@portaljs/components",
-      "version": "0.2.0",
+      "version": "0.3.1",
       "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",
@@ -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",

package.json

@@ -1,6 +1,8 @@
 {
   "name": "portaljs",
-  "workspaces": ["./packages/*"],
+  "workspaces": [
+    "./packages/*"
+  ],
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {

packages/components/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @portaljs/components
 
+## 0.3.1
+
+### Patch Changes
+
+- [#980](https://github.com/datopian/portaljs/pull/980) [`38738525`](https://github.com/datopian/portaljs/commit/3873852567b1aab4827a716bd588bd5de3223e2b) Thanks [@demenech](https://github.com/demenech)! - Fix missing CSS styles for PDF component
+
+## 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.1",
   "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/.gitignore

@@ -35,3 +35,8 @@ yarn-error.log*
 
 # markdowndb
 markdown.db
+
+# seo
+robots.txt
+sitemap-0.xml
+sitemap.xml

site/components/Features.tsx

@@ -58,7 +58,7 @@ export default function Features() {
           >
             <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.blue.300),theme(colors.blue.400),theme(colors.blue.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
             <div className="relative overflow-hidden rounded-xl p-6">
-              <img src={feature.icon} alt="" className="h-24 w-auto" />
+              <img src={feature.icon} alt={feature.title} className="h-24 w-auto" />
               <h2 className="mt-4 font-display text-base text-primary dark:text-primary-dark">
                 <span className="absolute -inset-px rounded-xl" />
                 {feature.title}

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/JSONLD.tsx

@@ -0,0 +1,65 @@
+import { ArticleJsonLd } from 'next-seo';
+import { useRouter } from 'next/router';
+
+export default function JSONLD({
+  meta,
+  source,
+}: {
+  meta: any;
+  source: string;
+}): JSX.Element {
+  if (!source) {
+    return <></>;
+  }
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://portaljs.org';
+  const pageUrl = `${baseUrl}/${meta.urlPath}`;
+
+  const imageMatches = source.match(
+    /(?<=src: ")(.*)\.((png)|(jpg)|(jpeg))(?=")/g
+  );
+  let images = [];
+  if (imageMatches) {
+    images = [...imageMatches];
+    images = images.map((img) =>
+      img.startsWith('http')
+        ? img
+        : `${baseUrl}${img.startsWith('/') ? '' : '/'}${img}`
+    );
+  }
+
+  let Component: JSX.Element;
+
+  const isBlog: boolean =
+    /^blog\/.*/.test(meta.urlPath) || meta.filetype === 'blog';
+  const isDoc: boolean = /^((docs)|(howtos\/)|(guide\/)).*/.test(meta.urlPath);
+
+  if (isBlog) {
+    Component = (
+      <ArticleJsonLd
+        type="BlogPosting"
+        url={pageUrl}
+        title={meta.title}
+        datePublished={meta.date}
+        dateModified={meta.date}
+        authorName={meta.authors.length ? meta.authors[0].name : 'PortalJS'}
+        description={meta.description}
+        images={images}
+      />
+    );
+  } else if (isDoc) {
+    Component = (
+      <ArticleJsonLd
+        url={pageUrl}
+        title={meta.title}
+        images={images}
+        datePublished={meta.date}
+        dateModified={meta.date}
+        authorName={meta.authors.length ? meta.authors[0].name : 'PortalJS'}
+        description={meta.description}
+      />
+    );
+  }
+
+  return Component;
+}

site/components/Layout.tsx

@@ -54,12 +54,14 @@ function useTableOfContents(tableOfContents) {
 export default function Layout({
   children,
   title,
+  description,
   tableOfContents = [],
   isHomePage = false,
   sidebarTree = [],
 }: {
   children;
   title?: string;
+  description?: string;
   tableOfContents?;
   urlPath?: string;
   sidebarTree?: [];
@@ -82,7 +84,7 @@ export default function Layout({
 
   return (
     <>
-      {title && <NextSeo title={title} />}
+      {title && <NextSeo title={title} description={description} />}
       <Nav />
       <div className="mx-auto p-6 bg-background dark:bg-background-dark">
         {isHomePage && <Hero />}

site/components/MDXPage.tsx

@@ -12,7 +12,6 @@ export default function MDXPage({ source, frontMatter }) {
         return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
     };
 
-
     return (
         <Layout>
             <MDXRemote {...source} components={{ DocsPagination, NextSeo, Hero }} />

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/blog/enhancing-geospatial-data-visualization-with-portaljs.md

@@ -0,0 +1,64 @@
+---
+title: 'Enhancing Geospatial Data Visualization with PortalJS'
+date: 2023-07-18
+authors: ['João Demenech', 'Luccas Mateus', 'Yoana Popova']
+filetype: 'blog'
+---
+
+Are you keen on building rich and interactive data portals? Do you find value in the power and flexibility of JavaScript, Nextjs, and React? In that case, allow us to introduce you to [PortalJS](https://portaljs.org/), a state-of-the-art framework leveraging these technologies to help you build amazing data portals.
+
+Perhaps you already understand that the effective data visualization lies in the adept utilization of various data components. Within [PortalJS](https://portaljs.org/), we take data visualization a step further. It's not just about displaying data - it's about telling a captivating story through the strategic orchestration of a diverse array of data components.
+
+We are now eager to share our latest enhancement to [PortalJS](https://portaljs.org/): maps, a powerful tool for visualizing geospatial data. In this post, we will to take you on a tour of our experiments and progress in enhancing map functionalities on [PortalJS](https://portaljs.org/). Our journey into this innovative feature is still in its early stages, with new facets being unveiled and refined as we perfect our API. Still, this exciting development opens a new avenue for visualizing data, enhancing your ability to convey complex geospatial information with clarity and precision.
+
+## Exploring Map Formats
+
+Maps play a crucial role in geospatial data visualization. Several formats exist for storing and sharing this type of data, with GeoJSON, KML, and shapefiles being among the most popular. As a prominent figure in the field of open-source data portal platforms, [PortalJS](https://portaljs.org/) strives to support as many map formats as possible.
+
+Taking inspiration from the ckanext-geoview extension, we currently support KML and GeoJSON formats in [PortalJS](https://portaljs.org/). This remarkable extension is a plugin for CKAN, the world’s leading open source data management system, that enables users to visualize geospatial data in diverse formats on an interactive map. Apart from KML and GeoJSON formats support, our roadmap entails extending compatibility to encompass all other formats supported by ckanext-geoview. Rest assured, we are committed to empowering users with a wide array of map format options in the future.
+
+So, what makes these formats special?
+
+- **GeoJSON**: This format uses JSON to depict simple geographic features and their associated attributes. It's often hailed as the most popular choice in the field.
+- **KML**: An XML-based format, KML can store details like placemarks, paths, polygons, and styles.
+- **Shapefiles**: These are file collections that store vector data—points, lines, and polygons—and their attributes.
+
+## Unveiling the Power of Leaflet and OpenLayers
+
+To display maps in [PortalJS](https://portaljs.org/), we utilize two powerful JavaScript libraries for creating interactive maps based on different layers: Leaflet and OpenLayers. Each offers distinct advantages (and disadvantages), inspiring us to integrate both and give users the flexibility to choose.
+
+Leaflet is the leading open-source JavaScript library known for its mobile-friendly, interactive maps. With its compact size (just 42 KB of JS), it provides all the map features most developers need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms.
+
+OpenLayers is a high-performance library packed with features for creating interactive web maps. OpenLayers can display map tiles, vector data, and markers sourced from anywhere on any webpage. It's an excellent tool for leveraging geographic information of all kinds.
+
+## Introducing Map Feature
+
+Both components have some similar features and props, such as:
+
+### Polygons and points
+
+![Map with polygons and points](/assets/blog/2023-07-18-map-polygons-and-points.png)
+
+Our initial version enables the use of both vectors and points to display information. Points are simpler and faster to render than vectors, but they have less detail and interactivity. For example, if you have data that is represented by coordinates or addresses, you can use points to show them on the map. This way, you can avoid time-consuming loading and rendering complex vector shapes that may slow down your map.
+
+### Tooltips
+
+![Map with tooltips](/assets/blog/2023-07-18-map-tooltips.png)
+
+We have implemented an exciting feature that enhances the usability of our map component: tooltips. When you hover over a polygon or point on the map, a small pop-up window, known as a tooltip, appears. This tooltip provides relevant details about the feature under your cursor, according to what features the map creator wants to highlight. For example, when exploring countries, you can effortlessly discover their name, population, and area by hovering over them. Similarly, hovering over cities reveals useful information like their name, temperature, and elevation. To enable this handy tooltip functionality on our map, simply include a tooltip prop when using the map component.
+
+### Focus
+
+![Map with polygons over a region](/assets/blog/2023-07-18-map-polygons-on-region.png)
+
+Users can also choose a region of focus, which will depend on the data, by setting initial center coordinates and zoom level. This is especially helpful for maps that are not global, such as the ones that use data from a specific country, city or region.
+
+## Mapping the Future with PortalJS
+
+Through our ongoing enhancements to the [PortalJS library](https://storybook.portaljs.org/), we aim to empower users to create engaging and informative data portals featuring diverse map formats and data components.
+
+Why not give [PortalJS](https://portaljs.org/) a try today and discover the possibilities for your own data portals? To get started, check out our comprehensive documentation here: [PortalJS Documentation](https://portaljs.org/docs).
+
+Have questions or comments about using [PortalJS](https://portaljs.org/) for your data portals? Feel free to share your thoughts on our [Discord channel](https://discord.com/invite/EeyfGrGu4U). We're here to help you make the most of your data.
+
+Stay tuned for more exciting developments as we continue to enhance [PortalJS](https://portaljs.org/)!

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

@@ -264,7 +264,7 @@ The above script will output the following to the terminal:
 
 ## Done!
 
-That's it! We've just created a simple catalog of our GitHub projects using markdown files and the MarkdownDB package. You can find the full code for this tutorial [here](https://github.com/datopian/markdowndb/tree/main/examples/basic-example).
+That's it! We've just created a simple catalog of our GitHub projects using markdown files and the MarkdownDB package. You can find the [full code for this tutorial here](https://github.com/datopian/markdowndb/tree/main/examples/basic-example).
 
 We look forward to seeing the amazing applications you'll build with this tool!
 

site/content/config.js

@@ -1,61 +1,72 @@
 const config = {
-  title:
-    "PortalJS",
+  title: 'PortalJS - The JavaScript framework for data portals.',
   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 JavaScript framework for rapidly building rich data portal frontends using a modern frontend approach.',
   theme: {
-    default: "dark",
-    toggleIcon: "/images/theme-button.svg",
+    default: 'dark',
+    toggleIcon: '/images/theme-button.svg',
   },
-  author: "Datopian",
-  authorLogo: "/datopian-logo.png",
-  authorUrl: "https://datopian.com/",
+  author: 'Datopian',
+  authorLogo: '/datopian-logo.webp',
+  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: "Showcases", href: "/#showcases" },
-    { name: "Howtos", href: "/howtos" },
-    { name: "Guide", href: "/guide" },
-    { name: "Examples", href: "https://github.com/datopian/portaljs/tree/main/examples", target: "_blank" },
-    { name: "Components", href: "https://storybook.portaljs.org", target: "_blank" },
+    { name: 'Blog', href: '/blog' },
+    { name: 'Showcases', href: '/#showcases' },
+    { name: 'Howtos', href: '/howtos' },
+    { name: 'Guide', href: '/guide' },
+    {
+      name: 'Examples',
+      href: 'https://github.com/datopian/portaljs/tree/main/examples',
+      target: '_blank',
+    },
+    {
+      name: 'Components',
+      href: 'https://storybook.portaljs.org',
+      target: '_blank',
+    },
     // { name: "DL Demo", href: "/data-literate/demo" },
     // { name: "Excel Viewer", href: "/excel-viewer" },
   ],
   footerLinks: [],
   nextSeo: {
+    additionalLinkTags: [
+      { rel: 'icon', href: '/favicon.ico' },
+      { rel: 'apple-touch-icon', href: '/icon.png', sizes: '120x120' },
+    ],
     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.",
-      locale: "en_US",
+        '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',
       images: [
         {
-          url: "/homepage-screenshot.png",  //  TODO
-          alt: "PortalJS - rapidly build rich data portals using a modern frontend framework.",
+          url: '/homepage-screenshot.png', //  TODO
+          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",
-      site: "https://datopian.com/",
-      cardType: "summary_large_image",
+      handle: '@datopian',
+      site: 'https://datopian.com/',
+      cardType: 'summary_large_image',
     },
   },
-  github: "https://github.com/datopian/portaljs",
-  discord: "https://discord.gg/EeyfGrGu4U",
+  github: 'https://github.com/datopian/portaljs',
+  discord: 'https://discord.gg/EeyfGrGu4U',
   tableOfContents: true,
-  analytics: "G-96GWZHMH57",
+  analytics: 'G-96GWZHMH57',
   // editLinkShow: true,
 };
 export default config;

site/content/docs/creating-new-datasets.md

@@ -1,6 +1,7 @@
-<NextSeo title="Creating new datasets - PortalJS" />
-
-# Creating new datasets
+---
+title: 'Creating new datasets'
+description: 'PortalJS Tutorial II - Learn how to create new datasets on a data portal'
+---
 
 So far, the PortalJS app we created only has a single page displaying a dataset. Data catalogs and data portals generally showcase many different datasets.
 
@@ -42,7 +43,7 @@ Year,Population (mi)
 
 Note that pages are associated with a route based on their pathname, so, to see the new data page, access http://localhost:3000/my-incredible-dataset from the browser. You should see the following:
 
-<img src="/assets/docs/my-incredible-dataset.png" />
+<img src="/assets/docs/my-incredible-dataset.png" alt="Page of a new dataset created on a PortalJS data portal" />
 
 > [!tip]
 > In this tutorial we opted for storing content as markdown files and data as CSV files in the app, but PortalJS can have metadata, data and content stored anywhere.
@@ -58,12 +59,11 @@ List of available datasets:
 
 - [My Awesome Dataset](/my-awesome-dataset)
 - [My Incredible Dataset](/my-incredible-dataset)
-
 ```
 
 From the browser, access http://localhost:3000. You should see the following:
 
-<img src="/assets/docs/datasets-index-page.png" />
+<img src="/assets/docs/datasets-index-page.png" alt="PortalJS data portal with multiple datasets" />
 
 At this point, the app has multiple datasets, and users can find and navigate to any dataset they want. In the next lesson, you are going to learn how to improve this experience with search.
 

site/content/docs/index.md

@@ -1,6 +1,7 @@
-<NextSeo title="Getting Started - PortalJS" />
-
-# Getting Started
+---
+title: Getting Started
+description: 'Getting started guide and tutorial about data portal-building with PortalJS'
+---
 
 Welcome to the PortalJS documentation!
 
@@ -38,7 +39,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="Initial state of the PortalJS tutorial project" />
 
 ### Editing the Page
 
@@ -51,7 +52,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="PortalJS tutorial project after a simple change is made by a user" />
 
 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/content/docs/searching-datasets.md

@@ -26,7 +26,7 @@ This example makes use of the [markdowndb](https://github.com/datopian/markdownd
 
 From the browser, access http://localhost:3000. You should see the following, you now have a searchable automatic list of your datasets:
 
-![](https://i.imgur.com/9HfSPIx.png)
+![Simple data catalog built with PortalJS](https://i.imgur.com/9HfSPIx.png)
 
 To make this catalog look even better, we can change the text that is being displayed for each dataset to a title. Let's do that by adding the "title" [frontmatter field](https://daily-dev-tips.com/posts/what-exactly-is-frontmatter/) to the first dataset in the list. Change `content/my-awesome-dataset/index.md` to the following:
 
@@ -46,7 +46,7 @@ Built with PortalJS
 
 Rerun `npm run mddb` and, from the browser, access http://localhost:3000. You should see the title appearing instead of the folder name:
 
-![](https://i.imgur.com/nvmSnJ5.png)
+![Example of a newly added dataset on a data catalog built with PortalJS](https://i.imgur.com/nvmSnJ5.png)
 
 Any frontmatter attribute that you add will automatically get indexed and be usable in the search box.
 
@@ -102,7 +102,7 @@ List of available datasets:
 
 You now have a filter in your page with all possible values automatically added to it.
 
-![](https://i.imgur.com/p2miSdg.png)
+![Data catalog with facets built with PortalJS](https://i.imgur.com/p2miSdg.png)
 
 In the next lesson, you are going to learn how to display metadata on the dataset page.
 

site/content/docs/showing-metadata.md

@@ -4,7 +4,7 @@
 
 If you go now to `http://localhost:3000/my-awesome-dataset`, you will see that we now have two titles on the page. That's because `title` is one of the default metadata fields supported by PortalJS.
 
-![](https://i.imgur.com/O145uuc.png)
+![Example of a page displaying the title metadata twice](https://i.imgur.com/O145uuc.png)
 
 Change the content inside `/content/my-awesome-dataset/index.md` to this.
 
@@ -15,7 +15,7 @@ author: 'Rufus Pollock'
 description: 'An awesome dataset displaying some awesome data'
 modified: '2023-05-04'
 files: ['data.csv']
-groups: ['Awesome']
+group: 'Awesome'
 ---
 
 Built with PortalJS
@@ -27,7 +27,7 @@ Built with PortalJS
 
 Once you refresh the page at `http://localhost:3000/my-awesome-dataset` you should see something like this at the top:
 
-![](https://i.imgur.com/nvDYJQT.png)
+![Example of a dataset page displaying metadata](https://i.imgur.com/nvDYJQT.png)
 
 These are the standard metadata fields that will be shown at the top of the page if you add them.
 

site/content/guide/index.md

@@ -1,11 +1,16 @@
 ---
 showToc: false
 showSidebar: false
+title: 'Markdown-based Websites Guide'
+disableTitle: true
+description: Create markdown-based websites and data portals, update it, add collaborators and discover markdown superpowers with Flowershow and PortalJS
 ---
 
 <Hero title="Markdown-based Websites" subtitle="Create markdown-based website, update it, add collaborators and discover markdown superpowers" />
 
-# Tutorial 1: Create a website from scratch using markdown and PortalJS
+## Tutorials
+
+### Tutorial 1: Create a website from scratch using markdown and PortalJS
 
 In this tutorial we will walk you through creating an elegant, fully functional website written in simple markdown and published with PortalJS.
 
@@ -17,7 +22,7 @@ By the end of this tutorial you will:
 Below is a screenshot of how the final website will look like:
 ![[tutorial-1-result.png]]
 
-### Setup a sandbox website including live publishing
+#### Setup a sandbox website including live publishing
 
 - Prerequisites: sign up for GitHub and Vercel
 - Navigate to [datopian/flowershow repository](https://github.com/datopian/flowershow)
@@ -25,14 +30,14 @@ Below is a screenshot of how the final website will look like:
 - Let the site build on Vercel
 - Visit the site! Yay! Your site is working! 🎉
 
-### Now, let's edit the front page
+#### Now, let's edit the front page
 
 - Navigate to `content/index.md` file in the site repository
 - Add some text to it
 - Save and watch the site redeploy
 - Visit the site! Yay! Your changes are live! 🎉
 
-### Let's add a page: e.g. about page
+#### Let's add a page: e.g. about page
 
 - Navigate to the `content` folder in the site repository
 - Add `about.md` file with some text
@@ -42,7 +47,7 @@ Below is a screenshot of how the final website will look like:
 > [!tip]
 > Read full tutorial [[create-a-website-from-scratch|here!]]
 
-# Tutorial 2: Editing your site locally on your computer
+### Tutorial 2: Editing your site locally on your computer
 
 In this tutorial, we will walk you through the process of editing your Flowershow website locally on your computer.
 
@@ -58,20 +63,20 @@ Below is a screenshot of how the final website will look like:
 
 ![[tutorial-2-result.png]]
 
-### Clone the repository to your computer
+#### Clone the repository to your computer
 
 - Setup GitHub Desktop app with your GitHub account
 - Grab your site's repository URL
 - Open GitHub Desktop app and clone the repository
 - Yay! You have a copy of your website's repository on your computer! 🎉
 
-### Now, let's edit in Obsidian
+#### Now, let's edit in Obsidian
 
 - Open the `/content` folder of the cloned repository in Obsidian
 - Edit the home page and the about page
 - Create a folder with the reviews of books you've read
 
-### Commit your changes
+#### Commit your changes
 
 - Commit the changes in GitHub Desktop app
 - Push the changes to the remote repository
@@ -80,3 +85,62 @@ Below is a screenshot of how the final website will look like:
 
 > [!tip]
 > Read full tutorial [[edit-a-website-locally|here!]]
+
+### Tutorial 3: Collaborating with others on your website project
+
+In this tutorial, we will guide you through collaborating with others on the same website project using GitHub. 
+
+By the end of this tutorial, you will:
+
+- Understand what a branch is and how to create one.
+- Understand what a pull request (PR) is and how to create one.
+- Learn how to review and merge a PR.
+- Know how to resolve conflicts if they arise.
+- Collaborate with others using GitHub, following best practices.
+
+#### Create a new branch
+
+- Navigate to your site's repository on GitHub
+- Click on the 'Branch' dropdown menu, type a new branch name and press Enter
+- Yay! You've created a new branch! 🎉
+
+#### Now, let's make changes in the new branch
+
+- Switch to the new branch in GitHub Desktop
+- Open the `/content` folder of the repository in Obsidian
+- Edit the `about` page
+- Commit the changes in GitHub Desktop app and push them to the remote repository on GitHub
+
+#### Create a pull request (PR)
+
+- Go back to your site's repository on GitHub
+- Click on 'New pull request'
+- Select your branch from the dropdown menu
+- Write a brief description of your changes, then click on 'Create pull request'
+- Yay! Your changes are ready to be reviewed! 🎉
+
+#### Review and merge a pull request
+
+- Navigate to the 'Pull requests' tab in your repository
+- Open the newly created pull request
+- Review the changes, add comments if necessary
+- If everything is in order, click 'Merge pull request', then 'Confirm merge'
+- Yay! You've merged your changes into the main branch! 🎉
+
+#### Resolving conflicts
+
+- In case of conflicts between your changes and those on the main branch, GitHub will alert you
+- Follow the on-screen instructions to resolve the conflicts and merge your changes
+
+> [!tip]
+> Read full tutorial [[collaborate-on-website-project|here!]] (TBD)
+
+## Howtos
+
+- [[quickly-create-a-sandbox-website|How to quickly create a sandbox website]]
+- [[edit-text-on-a-single-md-page|How to quickly edit text on a single Markdown-based page]]
+- [[add-a-simple-md-page|How to add a simple Markdown page]]
+- [[edit-or-add-md-pages-locally|How to edit or add Markdown-based pages locally on your computer]]
+- [[how-to-add-images-to-a-md-page|How to add images to a Markdown-based page]]
+- [[publish-obsidian-vault-to-github|How to push an Obsidian vault to a GitHub repository]]
+- [[create-a-simple-catalog-of-anything|How to create a simple catalog of anything in Obsidian]]

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

@@ -1,13 +1,16 @@
 ---
 title: How to quickly add a simple Markdown-based page
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
-Welcome to this tutorial on how to quickly add a simple Markdown-based page to your website.  The steps here are designed for non-technical contributors. There's no need to know how to code!
+Welcome to this howto on how to quickly add a simple Markdown-based page to your website. The steps here are designed for non-technical contributors. There's no need to know how to code!
 
 > [!important]
 > This "How to" is only recommended for very simple Markdown pages, e.g. those without images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode.
 
->[!tip]
+> [!tip]
 > If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements.
 
 ## Steps
@@ -22,8 +25,8 @@ Welcome to this tutorial on how to quickly add a simple Markdown-based page to y
 
 5. Paste or write the contents of the file in Markdown format.
 6. (Optionally) Switch to the "Preview" mode, by toggling from "Edit" -> "Preview" at the top of the file content, to see a rough visualisation of your changes. Keep in mind though, that the actual website may have different styling and may support additional Markdown elements that GitHub doesn't render on the preview.
-5. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes."
-6. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live.
+7. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes."
+8. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live.
 
 ## Summary
 

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

@@ -3,13 +3,6 @@ title: How to add or edit content on the Life Itself ecosystem page
 isDraft: true
 ---
 
-## Contents
-
-1. [Introduction](#introduction)
-2. [How to edit and add to the site](#how-to-edit-and-add-to-the-site)
-3. [Glossary](#glossary)
-4. [Contact](#contact)
-
 ## Introduction
 
 From the outset, we have argued that any successful mapping effort must be collaborative and participatory. To make it as simple as possible to contribute, we have opened up the site, giving it a wiki-like structure, meaning people can contribute and add items directly - no coding required. We hope this can support the ongoing growth of our contributor community, and empower users to continue in collective efforts to make the map ever more useful and informative.

site/content/howtos/analytics.md

@@ -1,4 +1,7 @@
-# How to add Google Analytics?
+---
+title: How to add Google Analytics?
+description: Learn to implement Google Analytics on PortalJS data portals
+---
 
 >[!todo] Prerequisites
 >- [Google Analytics account](https://support.google.com/analytics/answer/9304153?hl=en)

site/content/howtos/blog.md

@@ -1,4 +1,7 @@
-# How to add a simple blog?
+---
+title: How to add a simple blog?
+description: How to add a simple blog on a PortalJS data portal
+---
 
 ## Setup
 

site/content/howtos/comments.md

@@ -1,4 +1,7 @@
-# How to add user comments?
+---
+title: How to add user comments?
+description: Learn how to add user comments on a PortalJS data portal
+---
 
 ![[comments-example.png]]
 

site/content/howtos/drd.md

@@ -1,4 +1,7 @@
-# How to create data-rich documents with charts and tables?
+---
+title: How to create data-rich documents with charts and tables?
+description: Learn how to create a data-rich document with charts and tables on a PortalJS data portal
+---
 
 > [!info] Prerequisites
 > If you want to enrich your markdown content with charts and tables, you first need to add support for rendering markdown files in your PortalJS app. Follow [[markdown|this guide]] to learn how to do this.
@@ -15,12 +18,12 @@ Now, in order to use these components in your markdown files, we need to pass th
 
 ```tsx
 // e.g. /blog/[[...slug]].tsx
-import fs from "fs";
-import { LineChart, Table, Catalog, Vega, VegaLite } from "@portaljs/components";
+import fs from 'fs';
+import { LineChart, Table, Catalog, Vega, VegaLite } from '@portaljs/components';
 
-import { MdxRemote } from "next-mdx-remote";
-import clientPromise from "@/lib/mddb.mjs";
-import parse from "@/lib/markdown";
+import { MdxRemote } from 'next-mdx-remote';
+import clientPromise from '@/lib/mddb.mjs';
+import parse from '@/lib/markdown';
 
 const components = {
   Table: Table,
@@ -29,37 +32,35 @@ const components = {
   LineChart: LineChart,
 };
 
-
 export default function Page({ source }) {
-    source = JSON.parse(source);
+  source = JSON.parse(source);
 
-    return (
-        <>
-            <MdxRemote source={source} components={components} />
-        </>
-    );
+  return (
+    <>
+      <MdxRemote source={source} components={components} />
+    </>
+  );
 }
 
 // Import metadata of a file matching the static path and return its parsed source and frontmatter object
 export const getStaticProps = async ({ params }) => {
-    const urlPath = params?.slug ? (params.slug as string[]).join("/") : "/";
+  const urlPath = params?.slug ? (params.slug as string[]).join('/') : '/';
 
-    const mddb = await clientPromise;
-    const dbFile = await mddb.getFileByUrl(urlPath);
-    const filePath = dbFile!.file_path;
-    // const frontMatter = dbFile!.metadata ?? {};
+  const mddb = await clientPromise;
+  const dbFile = await mddb.getFileByUrl(urlPath);
+  const filePath = dbFile!.file_path;
+  // const frontMatter = dbFile!.metadata ?? {};
 
-    const source = fs.readFileSync(filePath, { encoding: "utf-8" });
-    const { mdxSource } = await parse(source, "mdx", {});
+  const source = fs.readFileSync(filePath, { encoding: 'utf-8' });
+  const { mdxSource } = await parse(source, 'mdx', {});
 
-    return {
-        props: {
-            source: JSON.stringify(mdxSource),
-            // frontMatter
-        },
-    };
+  return {
+    props: {
+      source: JSON.stringify(mdxSource),
+      // frontMatter
+    },
+  };
 };
-
 ```
 
 You can now use these components in your markdown, like so:
@@ -93,39 +94,39 @@ Example usage:
   cols={[
     {
       key: 'id',
-      name: 'ID'
+      name: 'ID',
     },
     {
       key: 'firstName',
-      name: 'First name'
+      name: 'First name',
     },
     {
       key: 'lastName',
-      name: 'Last name'
+      name: 'Last name',
     },
     {
       key: 'age',
-      name: 'Age'
-    }
+      name: 'Age',
+    },
   ]}
   data={[
     {
       age: 35,
       firstName: 'Jon',
       id: 1,
-      lastName: 'Snow'
+      lastName: 'Snow',
     },
     {
       age: 42,
       firstName: 'Cersei',
       id: 2,
-      lastName: 'Lannister'
-    }
+      lastName: 'Lannister',
+    },
   ]}
 />
 ```
 
->[!info]
+> [!info]
 > More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-table--docs)
 
 ### Linechart
@@ -139,31 +140,16 @@ Example usage:
 ```js
 <LineChart
   data={[
-    [
-      '1850',
-      -0.41765878
-    ],
-    [
-      '1851',
-      -0.2333498
-    ],
-    [
-      '1852',
-      -0.22939907
-    ],
-    [
-      '1853',
-      -0.27035445
-    ],
-    [
-      '1854',
-      -0.29163003
-    ]
+    ['1850', -0.41765878],
+    ['1851', -0.2333498],
+    ['1852', -0.22939907],
+    ['1853', -0.27035445],
+    ['1854', -0.29163003],
   ]}
- />
+/>
 ```
 
->[!info]
+> [!info]
 > More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-linechart--docs)
 
 ### Vega chart
@@ -179,30 +165,30 @@ Example usage:
     table: [
       {
         x: 1850,
-        y: -0.418
+        y: -0.418,
       },
       {
         x: 2020,
-        y: 0.923
-      }
-    ]
+        y: 0.923,
+      },
+    ],
   }}
   spec={{
     $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
     data: {
-      name: 'table'
+      name: 'table',
     },
     encoding: {
       x: {
         field: 'x',
-        type: 'ordinal'
+        type: 'ordinal',
       },
       y: {
         field: 'y',
-        type: 'quantitative'
-      }
+        type: 'quantitative',
+      },
     },
-    mark: 'bar'
+    mark: 'bar',
   }}
 />
 ```
@@ -222,35 +208,35 @@ Example usage:
     table: [
       {
         x: 1850,
-        y: -0.418
+        y: -0.418,
       },
       {
         x: 2020,
-        y: 0.923
-      }
-    ]
+        y: 0.923,
+      },
+    ],
   }}
   spec={{
     $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
     data: {
-      name: 'table'
+      name: 'table',
     },
     encoding: {
       x: {
         field: 'x',
-        type: 'ordinal'
+        type: 'ordinal',
       },
       y: {
         field: 'y',
-        type: 'quantitative'
-      }
+        type: 'quantitative',
+      },
     },
-    mark: 'bar'
+    mark: 'bar',
   }}
 />
 ```
 
->[!info]
+> [!info]
 > More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-vegalite--docs)
 
 ### Catalog
@@ -269,28 +255,21 @@ Example usage:
       metadata: {
         'details-of-task': 'Detect and categorise abusive language in social media data',
         language: 'Albanian',
-        'level-of-annotation': [
-          'Posts'
-        ],
+        'level-of-annotation': ['Posts'],
         'link-to-data': 'https://doi.org/10.6084/m9.figshare.19333298.v1',
         'link-to-publication': 'https://arxiv.org/abs/2107.13592',
-        medium: [
-          'Text'
-        ],
+        medium: ['Text'],
         'percentage-abusive': 13.2,
-        platform: [
-          'Instagram',
-          'Youtube'
-        ],
+        platform: ['Instagram', 'Youtube'],
         reference: 'Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592',
         'size-of-dataset': 11874,
         'task-description': 'Hierarchical (offensive/not; untargeted/targeted; person/group/other)',
-        title: 'Detecting Abusive Albanian'
+        title: 'Detecting Abusive Albanian',
       },
-      url_path: 'dataset-4'
+      url_path: 'dataset-4',
     },
   ]}
- />
+/>
 ```
 
 You can also add facets that are going to act as filters for your metadata.
@@ -305,30 +284,23 @@ You can also add facets that are going to act as filters for your metadata.
       metadata: {
         'details-of-task': 'Detect and categorise abusive language in social media data',
         language: 'Albanian',
-        'level-of-annotation': [
-          'Posts'
-        ],
+        'level-of-annotation': ['Posts'],
         'link-to-data': 'https://doi.org/10.6084/m9.figshare.19333298.v1',
         'link-to-publication': 'https://arxiv.org/abs/2107.13592',
-        medium: [
-          'Text'
-        ],
+        medium: ['Text'],
         'percentage-abusive': 13.2,
-        platform: [
-          'Instagram',
-          'Youtube'
-        ],
+        platform: ['Instagram', 'Youtube'],
         reference: 'Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592',
         'size-of-dataset': 11874,
         'task-description': 'Hierarchical (offensive/not; untargeted/targeted; person/group/other)',
-        title: 'Detecting Abusive Albanian'
+        title: 'Detecting Abusive Albanian',
       },
-      url_path: 'dataset-4'
+      url_path: 'dataset-4',
     },
   ]}
   facets={['platform', 'language']}
- />
+/>
 ```
 
->[!info]
+> [!info]
 > More info on the [storybook page](https://storybook.portaljs.org/?path=/docs/components-catalog--docs)

site/content/howtos/edit-a-page-with-code-editor-or-obsidian.md

@@ -1,5 +1,8 @@
 ---
-title: "How to edit a page with a code editor or Obsidian"
+title: 'How to edit a page with a code editor or Obsidian'
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 isDraft: true
 ---
 

site/content/howtos/edit-or-add-md-pages-locally.md

@@ -1,5 +1,8 @@
 ---
 title: How to edit or add Markdown-based pages locally on your computer
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 ## Intro

site/content/howtos/edit-text-on-a-single-md-page.md

@@ -1,13 +1,16 @@
 ---
-title: How to quickly edit text content on a single Markdown-based page
+title: How to quickly edit text on a single Markdown-based page
+date: 2023-07-27
+authors: ['Ola Rubaj']
+filetype: 'blog'
 ---
 
-Welcome to this tutorial on how to quickly edit text content on a single Markdown-based page.  The steps here are designed for non-technical contributors. There's no need to know how to code!
+Welcome to this tutorial on how to quickly edit text content on a single Markdown-based page. The steps here are designed for non-technical contributors. There's no need to know how to code!
 
 > [!important]
 > This "How to" is only recommended for text changes only, e.g. those that don't include adding images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode.
 
->[!tip]
+> [!tip]
 > If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements.
 
 ## Steps

site/content/howtos/how-to-add-images-to-a-md-page.md

@@ -0,0 +1,45 @@
+---
+title: How to add images to a Markdown-based page
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
+---
+
+## Intro
+
+Here, you will learn how to add images to a Markdown-based page. These instructions show how to add these images locally, on your computer, so first you need to know how to work locally with GitHub Desktop app and Obsidian. If you're new to these tools, we recommend reading this howto first:
+
+- [[blog/edit-or-add-md-pages-locally|How to edit or add Markdown pages locally]]
+
+Or you can follow these two tutorials to start from scratch:
+
+- [[create-a-website-from-scratch|Tutorial 1: Create a Markdown based website from scratch]]
+- [[edit-a-website-locally|Tutorial 2: Edit your website locally on your computer]]
+
+## Prerequisites
+
+- A GitHub account
+- A GitHub Desktop app
+- Obsidian
+
+## Steps
+
+### Step 1: Set the assets folder as an attachment folder
+
+In Obsidian, in the root of your vault, create a new folder called 'assets'. Then, right click on and select "set as attachment folder". By doing so, all the images you paste into your note will automatically be saved to this folder (instead of being saved to the root, next to all your notes). This is necessary for your website to display embedded images.
+
+### Step 2: Copy and paste your image
+
+Copy whichever image you would like to add and paste it directly into your Obsidian note. You can check that it has been saved to the "assets" folder.
+
+### Step 3: Commit and push
+
+To learn more about this step, see the howto or the tutorials listed in the intro section.
+
+## Summary
+
+Congratulations, you've now learned how to add an image to your Markdown page!
+
+If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know.
+
+Happy editing!

site/content/howtos/how-to-format-a-perfect-markdown-based-page.md

@@ -0,0 +1,33 @@
+---
+title: How to format a perfect Markdown-based page
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
+isDraft: true
+---
+
+Welcome to this information guide to help you understand how to format the perfect Markdown-based page for your website. The information here is designed to give you an overview.
+
+## Types of Markdown Styles
+
+There are three types of Markdown options that are supported by Flowershow.
+
+- CommonMark
+- GitHub Flavored Markdown (GFM) - a superset of CommonMark
+- Obsidian Flavored Markdown - a superset of CommonMark with most GFM functionalities plus its own syntax elements, such as wikilinks, callouts, LaTeX, mermaid diagrams, and more.
+
+Each one has extra functionalities building on top of the previous Markdown option.
+
+Flowershow aims to be fully Obsidian compatible since it supports most Obsidian Flavored Markdown syntax elements and therefore, it is the best to use as an editor.
+
+## Useful Links
+
+It would be too complicated (and long) to explain all of the formatting aspects here, so we have included the links below to provide you with this information and more!
+[Flowershow Documents Page](https://flowershow.app/docs/syntax) - Use this page to see all of the useful key elements that are frequently required on Flowershow pages.
+[Obsidian help pages](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown) - Use this to get more information on Obsidian's supported syntax
+[GFM cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - Use this as a quick guide to using Markdown for Github
+
+## Other useful pages
+
+[How to quickly add a simple Markdown-based page](https://guide.portaljs.org/guides/add-a-simple-md-page)
+[How to quickly edit text content on a single Markdown-based page](https://guide.portaljs.org/guides/edit-text-on-a-single-md-page)

site/content/howtos/index.md

@@ -1,4 +1,7 @@
-# Guides and tutorials
+---
+title: Guides and Tutorials
+description: Learn more about how you can achieve different data portal features with PortalJS
+---
 
 - [[howtos/analytics|How to add web analytics?]]
 - [[howtos/seo|How to customize page metadata for SEO?]]

site/content/howtos/markdown.md

@@ -1,4 +1,7 @@
-# How to add markdown-based content pages?
+---
+title: How to add markdown-based content pages?
+description: Learn how to add markdown-based content pages on PortalJS data portals
+---
 
 ## Add content layer to your app
 

site/content/howtos/publish-obsidian-vault-to-github.md

@@ -1,5 +1,8 @@
 ---
 title: How to push an Obsidian vault to a GitHub repository
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 This howto walks you through the process of setting up your Obsidian vault as a GitHub repository. Here are some of the benefits of doing so:
@@ -34,7 +37,7 @@ In this howto, we will use the GitHub Desktop application, an easy-to-use interf
 
 2.6. Add an optional description.
 
-2.7. Make sure the checkbox "Initialize this repository with a README" is unchecked, and "Git Ignore" and "License" are set to "None".
+2.7. Make sure the checkbox "Initialise this repository with a README" is unchecked, and "Git Ignore" and "License" are set to "None".
 
 2.8. Click on "Create Repository".
 

site/content/howtos/quickly-create-a-sandbox-website.md

@@ -1,5 +1,8 @@
 ---
 title: How to quickly create a sandbox website
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 By the end of this guide you will have a working markdown site you can edit, which gets published automatically online 🎉
@@ -22,13 +25,8 @@ The website will then be deployed. This takes approximately 1 minute.
 
 Once you are on the Congratulations screen, click on the preview of your sandbox website to see the live/published version.
 
-For instructions on how to add and edit pages, we recommend these tutorials:
+For instructions on how to add and edit pages, we recommend these howtos:
 
-- [[edit-a-page-with-code-editor-or-obsidian|How to edit text content on a single Markdown-based page]]
-- [[add-a-simple-md-page|How to add a simple Markdown-based page]]
-
-Here are some other links Vercel links that might be useful for you:
-
-- [Dashboard Features Overview](https://vercel.com/docs/concepts/dashboard-features/overview)
-- [Dashboard Features](https://vercel.com/docs/concepts/dashboard-features)
-- [Projects](https://vercel.com/docs/concepts/projects/project-dashboard)
+- [[howtos/add-a-simple-md-page|How to add a simple markdown page]]
+- [[howtos/edit-text-on-a-single-md-page|How to edit text on a single markdown-based page]]
+- [[howtos/edit-or-add-md-pages-locally|How to edit or add a markdown page locally on your computer]]

site/content/howtos/seo.md

@@ -1,4 +1,7 @@
-# How to customize page metadata for SEO?
+---
+title: How to customize page metadata for SEO?
+description: Learn to customize page metadata for SEO on data portals with PortalJS
+---
 
 >[!info]
 >See [`next-seo` documentation](https://github.com/garmeeh/next-seo) to learn more.

site/content/howtos/sitemap.md

@@ -1,4 +1,7 @@
-# How to build a sitemap?
+---
+title: How to build a sitemap?
+description: Learn how to build a sitemap for a data portal with PortalJS
+---
 
 ## Setup
 

site/content/howtos/why-use-these-tools-to-create-a-catalog.md

@@ -1,5 +1,6 @@
 ---
 title: "Why use these tools to create a catalog?"
+isDraft: true
 ---
 
 On this site, we offer a “recipe” which uses a combination of free tools to easily create a directory of information that can be used for multiple purposes. With this method, you can start capturing information quickly and intuitively in a format that is flexible and usable later for various needs. Why does this help us? Because to map information – to collect, organise, structure, and classify it – and present it clearly is a way to make more sense of it and therefore of the world around us. 

site/layouts/default.tsx

@@ -6,7 +6,7 @@ export default function DefaultLayout({ children, ...frontMatter }) {
           {/* Default layout */}
           {!frontMatter.layout && (
             <>
-              <h1>{frontMatter.title}</h1>
+              {!frontMatter.disableTitle && <h1>{frontMatter.title}</h1>}
               {frontMatter.author && (
                 <div className="-mt-6">
                   <p className="opacity-60 pl-1">{frontMatter.author}</p>

site/layouts/docs.tsx

@@ -13,7 +13,7 @@ export const DocsLayout: React.FC<any> = ({ children, ...frontMatter }) => {
               <time dateTime={created}>{formatDate(created)}</time>
             </p>
           )}
-          {title && <h1>{title}</h1>}
+          {!frontMatter.disableTitle && title && <h1>{title}</h1>}
         </div>
       </header>
       <section>{children}</section>

site/lib/markdown.mjs

@@ -1,21 +1,21 @@
-import { h } from "hastscript";
-import matter from "gray-matter";
-import mdxmermaid from "mdx-mermaid";
-import remarkCallouts from "@portaljs/remark-callouts";
-import remarkEmbed from "@portaljs/remark-embed";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import remarkSmartypants from "remark-smartypants";
-import remarkToc from "remark-toc";
-import remarkWikiLink, { getPermalinks } from "@portaljs/remark-wiki-link";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeKatex from "rehype-katex";
-import rehypeSlug from "rehype-slug";
-import rehypePrismPlus from "rehype-prism-plus";
-import { serialize } from "next-mdx-remote/serialize";
+import { h } from 'hastscript';
+import matter from 'gray-matter';
+import mdxmermaid from 'mdx-mermaid';
+import remarkCallouts from '@portaljs/remark-callouts';
+import remarkEmbed from '@portaljs/remark-embed';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkSmartypants from 'remark-smartypants';
+import remarkToc from 'remark-toc';
+import remarkWikiLink, { getPermalinks } from '@portaljs/remark-wiki-link';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeKatex from 'rehype-katex';
+import rehypeSlug from 'rehype-slug';
+import rehypePrismPlus from 'rehype-prism-plus';
+import { serialize } from 'next-mdx-remote/serialize';
 
-import * as tw from "../tailwind.config";
-import { siteConfig } from "../config/siteConfig";
+import * as tw from '../tailwind.config';
+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,29 @@ 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) &&
-                  element.properties?.id !== "table-of-contents" &&
-                  element.properties?.className !== "blockquote-heading"
+                  ['h2', 'h3', 'h4', 'h5', 'h6'].includes(element.tagName) &&
+                  element.properties?.id !== 'table-of-contents' &&
+                  element.properties?.className !== 'blockquote-heading'
                 );
               },
-              content() {
+              content(node) {
                 return [
                   h(
-                    "svg",
+                    '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",
-                      className: "w-5 h-5",
+                      viewBox: '0 0 20 20',
+                      className: 'w-5 h-5',
                     },
                     [
-                      h("path", {
-                        fillRule: "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",
+                      h('path', {
+                        fillRule: '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',
                       }),
                     ]
                   ),
@@ -84,7 +84,7 @@ const parse = async function (source, format, scope) {
               },
             },
           ],
-          [rehypeKatex, { output: "mathml" }],
+          [rehypeKatex, { output: 'mathml' }],
           [rehypePrismPlus, { ignoreMissing: true }],
         ],
         format,

site/next-sitemap.config.js

@@ -0,0 +1,5 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.SITE_URL || 'https://portaljs.org',
+  generateRobotsTxt: true,
+}

site/package-lock.json

@@ -50,6 +50,7 @@
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.9",
         "autoprefixer": "^10.4.14",
+        "next-sitemap": "^4.1.8",
         "postcss": "^8.4.22",
         "prettier": "^2.8.7",
         "remark": "^14.0.2",
@@ -229,6 +230,12 @@
       "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz",
       "integrity": "sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg=="
     },
+    "node_modules/@corex/deepmerge": {
+      "version": "4.0.43",
+      "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz",
+      "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==",
+      "dev": true
+    },
     "node_modules/@docsearch/css": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.0.tgz",
@@ -7087,6 +7094,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
@@ -7330,6 +7346,39 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "node_modules/next-sitemap": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/next-sitemap/-/next-sitemap-4.1.8.tgz",
+      "integrity": "sha512-XAXpBHX4o89JfMgvrm0zimlZwpu2iBPXHpimJMUrqOZSc4C2oB1Lv89mxuVON9IE8HOezaM+w4GjJxcYCuGPTQ==",
+      "dev": true,
+      "funding": [
+        {
+          "url": "https://github.com/iamvishnusankar/next-sitemap.git"
+        }
+      ],
+      "dependencies": {
+        "@corex/deepmerge": "^4.0.43",
+        "@next/env": "^13.4.3",
+        "fast-glob": "^3.2.12",
+        "minimist": "^1.2.8"
+      },
+      "bin": {
+        "next-sitemap": "bin/next-sitemap.mjs",
+        "next-sitemap-cjs": "bin/next-sitemap.cjs"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "peerDependencies": {
+        "next": "*"
+      }
+    },
+    "node_modules/next-sitemap/node_modules/@next/env": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.10.tgz",
+      "integrity": "sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ==",
+      "dev": true
+    },
     "node_modules/next-themes": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",

site/package.json

@@ -6,6 +6,7 @@
     "dev": "npm run mddb && next dev",
     "build": "next build",
     "prebuild": "npm run mddb && node ./scripts/fix-symlinks.mjs",
+    "postbuild": "next-sitemap",
     "start": "next start",
     "mddb": "mddb content"
   },
@@ -52,6 +53,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
+    "next-sitemap": "^4.1.8",
     "postcss": "^8.4.22",
     "prettier": "^2.8.7",
     "remark": "^14.0.2",

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

@@ -12,6 +12,7 @@ import { GetStaticProps, GetStaticPropsResult } from 'next';
 import { CustomAppProps } from './_app.jsx';
 import computeFields from '@/lib/computeFields';
 import { getAuthorsDetails } from '@/lib/getAuthorsDetails';
+import JSONLD from '@/components/JSONLD';
 
 export default function Page({ source, meta, sidebarTree }) {
   source = JSON.parse(source);
@@ -29,14 +30,18 @@ export default function Page({ source, meta, sidebarTree }) {
   }, [router.asPath]); // update table of contents on route change with next/link
 
   return (
-    <Layout
-      tableOfContents={tableOfContents}
-      title={meta.title}
-      sidebarTree={sidebarTree}
-      urlPath={meta.urlPath}
-    >
-      <MDXPage source={source} frontMatter={meta} />
-    </Layout>
+    <>
+      <JSONLD meta={meta} source={source.compiledSource} />
+      <Layout
+        tableOfContents={tableOfContents}
+        title={meta.title}
+        description={meta.description}
+        sidebarTree={sidebarTree}
+        urlPath={meta.urlPath}
+      >
+        <MDXPage source={source} frontMatter={meta} />
+      </Layout>
+    </>
   );
 }
 

site/pages/_app.tsx

@@ -1,14 +1,15 @@
-import "../styles/globals.css";
-import "../styles/tailwind.css";
+import '../styles/globals.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 { siteConfig } from "../config/siteConfig";
-import { useEffect } from "react";
-import { useRouter } from "next/dist/client/router";
+import { NavGroup, NavItem, pageview, ThemeProvider } from '@portaljs/core';
+import { siteConfig } from '../config/siteConfig';
+import { useEffect } from 'react';
+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,9 +45,14 @@ 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} />
+      <DefaultSeo
+        defaultTitle={siteConfig.title}
+        description={siteConfig.description}
+        titleTemplate="PortalJS - %s"
+        {...siteConfig.nextSeo}
+      />
 
       {/* Global Site Tag (gtag.js) - Google Analytics */}
       {siteConfig.analytics && (
@@ -57,7 +63,7 @@ function MyApp({ Component, pageProps }) {
           />
           <Script
             id="gtag-init"
-            strategy="afterInteractive"
+            strategy="lazyOnload"
             dangerouslySetInnerHTML={{
               __html: `
           window.dataLayer = window.dataLayer || [];
@@ -73,7 +79,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/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

site/pages/blog.tsx

@@ -3,10 +3,15 @@ import computeFields from '@/lib/computeFields';
 import clientPromise from '@/lib/mddb';
 import { BlogsList, SimpleLayout } from '@portaljs/core';
 import * as fs from 'fs';
+import { NextSeo } from 'next-seo';
 
 export default function Blog({ blogs }) {
   return (
     <>
+      <NextSeo
+        title="Blog posts"
+        description="Find news and more information about rapidly building rich data portals using a modern frontend framework in the PortalJS blog"
+      />
       <Layout>
         <SimpleLayout title="Blog posts">
           <BlogsList blogs={blogs} />
@@ -48,12 +53,9 @@ export async function getStaticProps() {
   const blogList = await Promise.all(blogsWithComputedFields);
 
   const blogsSorted = blogList.sort(
-    (a, b) =>
-      new Date(b?.date).getTime() -
-      new Date(a?.date).getTime()
+    (a, b) => new Date(b?.date).getTime() - new Date(a?.date).getTime()
   );
 
-
   return {
     props: {
       blogs: blogsSorted,

site/pages/index.tsx

@@ -7,6 +7,8 @@ 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';
+import { LogoJsonLd } from 'next-seo';
 
 export default function Home({ sidebarTree }) {
   const router = useRouter();
@@ -23,7 +25,15 @@ export default function Home({ sidebarTree }) {
 
   return (
     <>
-      <Layout isHomePage={true} tableOfContents={tableOfContents} sidebarTree={sidebarTree} >
+      <LogoJsonLd
+        url="https://portaljs.org"
+        logo="https://portaljs.org/icon.png"
+      />
+      <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) */