Merge branch 'main' of github.com:datopian/portal.js into feature/lhs-navigation

examples/alan-turing-portal/package.json

@@ -27,13 +27,8 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.4",
     "@tanstack/react-table": "^8.8.5",
-    "@types/node": "18.16.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
     "autoprefixer": "^10.4.12",
     "clsx": "^1.2.1",
-    "eslint": "8.39.0",
-    "eslint-config-next": "13.3.1",
     "fast-glob": "^3.2.11",
     "feed": "^4.2.2",
     "flexsearch": "^0.7.31",
@@ -68,6 +63,9 @@
     "eslint": "8.26.0",
     "eslint-config-next": "13.0.2",
     "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.6"
+    "prettier-plugin-tailwindcss": "^0.2.6",
+    "@types/node": "18.16.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0"
   }
 }

examples/ckan-example/package.json

@@ -10,24 +10,24 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.17",
-    "@types/node": "18.16.0",
-    "@types/react": "18.0.38",
-    "@types/react-dom": "18.0.11",
-    "eslint": "8.39.0",
-    "eslint-config-next": "13.3.1",
     "next": "13.3.1",
     "next-seo": "^6.0.0",
     "octokit": "^2.0.14",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.7",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^3.0.1"
-    "typescript": "5.0.4"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.1"
+    "tailwindcss": "^3.3.1",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
+    "typescript": "5.0.4",
+    "@types/node": "18.16.0",
+    "@types/react": "18.0.38",
+    "@types/react-dom": "18.0.11"
   }
 }

examples/learn-example/package.json

@@ -19,12 +19,8 @@
     "@flowershow/remark-wiki-link": "^1.1.2",
     "@heroicons/react": "^2.0.17",
     "@opentelemetry/api": "^1.4.0",
+    "@portaljs/components": "^0.1.0",
     "@tanstack/react-table": "^8.8.5",
-    "@types/node": "18.16.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
-    "eslint": "8.39.0",
-    "eslint-config-next": "13.3.1",
     "flexsearch": "0.7.21",
     "gray-matter": "^4.0.3",
     "hastscript": "^7.2.0",
@@ -44,13 +40,17 @@
     "remark-math": "^5.1.1",
     "remark-smartypants": "^2.0.0",
     "remark-toc": "^8.0.1",
-    "typescript": "5.0.4",
+    "typescript": "5.0.4"
-    "@portaljs/components": "^0.1.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "@types/flexsearch": "^0.7.3",
+    "@types/node": "18.16.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "autoprefixer": "^10.4.14",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
     "postcss": "^8.4.23",
     "tailwindcss": "^3.3.1"
   }

examples/learn-example/pages/[[...path]].tsx

@@ -50,25 +50,70 @@ export const getStaticProps = async (context) => {
   return {
     props: {
       mdxSource,
-      frontMatter,
+      frontMatter: JSON.stringify(frontMatter),
     },
   };
 };
 
 export default function DatasetPage({ mdxSource, frontMatter }) {
+  frontMatter = JSON.parse(frontMatter);
   return (
-    <div className="prose dark:prose-invert mx-auto">
+    <div className="prose dark:prose-invert mx-auto py-8">
       <header>
         <div className="mb-6">
           <>
-            <h1>{frontMatter.title}</h1>
+            <h1 className="mb-2">{frontMatter.title}</h1>
             {frontMatter.author && (
-              <div className="-mt-6">
+              <p className="my-0">
-                <p className="opacity-60 pl-1">{frontMatter.author}</p>
+                <span className="font-semibold">Author: </span>
-              </div>
+                <span className="my-0">{frontMatter.author}</span>
+              </p>
             )}
             {frontMatter.description && (
-              <p className="description">{frontMatter.description}</p>
+              <p className="my-0">
+                <span className="font-semibold">Description: </span>
+                <span className="description my-0">
+                  {frontMatter.description}
+                </span>
+              </p>
+            )}
+            {frontMatter.modified && (
+              <p className="my-0">
+                <span className="font-semibold">Modified: </span>
+                <span className="description my-0">
+                  {new Date(frontMatter.modified).toLocaleDateString()}
+                </span>
+              </p>
+            )}
+            {frontMatter.files && (
+              <section className="py-6">
+                <h2 className="mt-0">Data files</h2>
+                <table className="table-auto">
+                  <thead>
+                    <tr>
+                      <th>File</th>
+                      <th>Format</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {frontMatter.files.map((f) => {
+                      const fileName = f.split('/').slice(-1);
+                      return (
+                        <tr key={`resources-list-${f}`}>
+                          <td>
+                            <a target="_blank" href={f}>
+                              {fileName}
+                            </a>
+                          </td>
+                          <td>
+                            {fileName[0].split('.').slice(-1)[0].toUpperCase()}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </section>
             )}
           </>
         </div>

packages/components/package.json

@@ -26,7 +26,6 @@
   "dependencies": {
     "@heroicons/react": "^2.0.17",
     "@tanstack/react-table": "^8.8.5",
-    "@types/flexsearch": "^0.7.3",
     "flexsearch": "0.7.21",
     "next-mdx-remote": "^4.4.1",
     "papaparse": "^5.4.1",
@@ -38,6 +37,7 @@
     "vega-lite": "5.1.0"
   },
   "devDependencies": {
+    "@types/flexsearch": "^0.7.3",
     "@storybook/addon-essentials": "^7.0.7",
     "@storybook/addon-interactions": "^7.0.7",
     "@storybook/addon-links": "^7.0.7",

site/content/docs/index.md

@@ -172,12 +172,12 @@ Any frontmatter attribute that you add will automatically get indexed and be usa
 
 ### Adding filters
 
-Sometimes contextual search is not enough. Let's add a filter. To do so, add a title to your `content/my-incredible-dataset/index.md` like so:
+Sometimes contextual search is not enough. Let's add a filter. To do so, lets add a new metadata field called "group", add it to your `content/my-incredible-dataset/index.md` like so:
 
 
 ```
 ---
-title: 'My incredible dataset'
+group: 'Incredible'
 ---
 
 # My Incredible Dataset
@@ -194,6 +194,23 @@ This is my incredible dataset.
 />
 ```
 
+Also add it to your `content/my-awesome-dataset/index.md` like so:
+
+```
+---
+title: 'My awesome dataset'
+group: 'Awesome'
+---
+
+# My Awesome Dataset
+
+Built with PortalJS 
+
+## Table 
+
+<Table url="data.csv" />
+```
+
 Now on your `content/index.md` you can add a "facet" to the `Catalog` component, like so:
 
 ```
@@ -201,12 +218,47 @@ Now on your `content/index.md` you can add a "facet" to the `Catalog` component,
 
 List of available datasets:
 
-<Catalog datasets={datasets} facets={['title']}/>
+<Catalog datasets={datasets} facets={['group']}/>
 ```
 
 You now have a filter in your page with all possible values automatically added to it.
 
-![](https://i.imgur.com/vAzJ47h.png)
+![](https://i.imgur.com/p2miSdg.png)
+
+## Showing metadata
+
+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)
+
+Change the content inside `/content/my-awesome-dataset/index.md` to this.
+
+```
+---
+title: 'My awesome dataset'
+author: 'Rufus Pollock'
+description: 'An awesome dataset displaying some awesome data'
+modified: '2023-05-04'
+files: ['data.csv']
+groups: ['Awesome']
+---
+
+Built with PortalJS 
+
+## Table 
+
+<Table url="data.csv" />
+```
+
+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)
+
+These are the standard metadata fields that will be shown at the top of the page if you add them.
+
+- `title` that gets displayed as a big header at the top of the page
+- `author`, `description`, and `modified` which gets displayed below the title
+- `files` that get displayed as a table with two columns: `File` which is linked directly to the file, and `Format` which show the file format. 
 
 ## Deploying your PortalJS app