[#810, github-backed example][xl]: improve looks, improve README, rename from simple-example to github-backed

examples/fiverthirtyeight-example/components/Breadcrumbs.tsx

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

examples/fiverthirtyeight-example/datasets.json

@@ -211,6 +211,18 @@
       "https://projects.fivethirtyeight.com/nfl-api/nfl_elo_latest.csv"
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/checking-our-work-data",
+    "name": "checking-our-work-data",
+    "displayName": "checking-our-work-<span class=\"lastword\">data</span>",
+    "articles": [
+      {
+        "date": "2023-02-02T16:30:00.000Z",
+        "title": "How Good Are FiveThirtyEight Forecasts?",
+        "url": "https://projects.fivethirtyeight.com/checking-our-work/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/world-cup-2022",
     "name": "world-cup-2022",
@@ -227,6 +239,18 @@
       "https://projects.fivethirtyeight.com/soccer-api/international/2022/wc_forecasts.csv"
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/covid-19-polls",
+    "name": "covid-19-polls",
+    "displayName": "covid-19-<span class=\"lastword\">polls</span>",
+    "articles": [
+      {
+        "date": "2022-11-29T20:20:08.000Z",
+        "title": "How Americans View Biden’s Response To The Coronavirus Crisis",
+        "url": "https://projects.fivethirtyeight.com/coronavirus-polls/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/election-deniers",
     "name": "election-deniers",
@@ -347,6 +371,18 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/nfl-elo-game",
+    "name": "nfl-elo-game",
+    "displayName": "nfl-elo-<span class=\"lastword\">game</span>",
+    "articles": [
+      {
+        "date": "2022-02-14T03:03:26.000Z",
+        "title": "Can You Beat FiveThirtyEight’s NFL Forecasts?",
+        "url": "https://projects.fivethirtyeight.com/2021-nfl-forecasting-game/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/redlining",
     "name": "redlining",
@@ -371,6 +407,42 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/negro-leagues-player-ratings",
+    "name": "negro-leagues-player-ratings",
+    "displayName": "negro-leagues-player-<span class=\"lastword\">ratings</span>",
+    "articles": [
+      {
+        "date": "2021-02-25T11:00:00.000Z",
+        "title": "The Negro League Stars That MLB Kept Out — And Is Finally Recognizing",
+        "url": "https://projects.fivethirtyeight.com/negro-leagues-mlb/"
+      }
+    ]
+  },
+  {
+    "url": "https://github.com/fivethirtyeight/police-settlements",
+    "name": "police-settlements",
+    "displayName": "police-<span class=\"lastword\">settlements</span>",
+    "articles": [
+      {
+        "date": "2021-02-22T11:00:49.000Z",
+        "title": "Cities Spend Millions On Police Misconduct Every Year. Here’s Why It’s So Difficult to Hold Departments Accountable.",
+        "url": "https://fivethirtyeight.com/features/police-misconduct-costs-cities-millions-every-year-but-thats-where-the-accountability-ends/"
+      }
+    ]
+  },
+  {
+    "url": "https://github.com/fivethirtyeight/superbowl-ads",
+    "name": "superbowl-ads",
+    "displayName": "superbowl-<span class=\"lastword\">ads</span>",
+    "articles": [
+      {
+        "date": "2021-02-04T16:11:00.000Z",
+        "title": "According To Super Bowl Ads, Americans Love America, Animals And Sex",
+        "url": "https://projects.fivethirtyeight.com/super-bowl-ads/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/trump-approval-ratings",
     "name": "trump-approval-ratings",
@@ -403,6 +475,18 @@
       "https://projects.fivethirtyeight.com/congress-tracker-data/csv/vote_predictions.csv"
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/election-results",
+    "name": "election-results",
+    "displayName": "election-<span class=\"lastword\">results</span>",
+    "articles": [
+      {
+        "date": "2020-11-03T05:33:43.000Z",
+        "title": "2020 Election Forecast",
+        "url": "https://projects.fivethirtyeight.com/2020-election-forecast/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/election-forecasts-2020",
     "name": "election-forecasts-2020",
@@ -473,6 +557,18 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/WNBA-stats",
+    "name": "WNBA-stats",
+    "displayName": "WNBA-<span class=\"lastword\">stats</span>",
+    "articles": [
+      {
+        "date": "2020-05-27T19:06:43.000Z",
+        "title": "It’s Time To Give Basketball’s Other GOAT Her Due",
+        "url": "https://fivethirtyeight.com/features/its-time-to-give-basketballs-other-goat-her-due/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/covid-geography",
     "name": "covid-geography",
@@ -512,6 +608,18 @@
       "https://projects.fivethirtyeight.com/endorsements-2020-data/endorsements-2020.csv"
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/nba-player-advanced-metrics",
+    "name": "nba-player-advanced-metrics",
+    "displayName": "nba-player-advanced-<span class=\"lastword\">metrics</span>",
+    "articles": [
+      {
+        "date": "2020-03-09T15:27:37.000Z",
+        "title": "Luka Dončić And The Mavs Are Pushing The Limits Of Offensive Efficiency",
+        "url": "https://fivethirtyeight.com/features/luka-doncic-and-the-mavs-are-pushing-the-limits-of-offensive-efficiency/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/impeachment-polls",
     "name": "impeachment-polls",
@@ -603,6 +711,18 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/candidate-emails",
+    "name": "candidate-emails",
+    "displayName": "candidate-<span class=\"lastword\">emails</span>",
+    "articles": [
+      {
+        "date": "2019-07-11T15:33:15.000Z",
+        "title": "What Our Inbox Tells Us About How Democrats Are Tackling Trump",
+        "url": "https://fivethirtyeight.com/features/which-democrats-are-campaigning-on-trump/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/nba-draymond",
     "name": "nba-draymond",
@@ -643,6 +763,18 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/twitter-overlap",
+    "name": "twitter-overlap",
+    "displayName": "twitter-<span class=\"lastword\">overlap</span>",
+    "articles": [
+      {
+        "date": "2019-06-12T15:24:07.000Z",
+        "title": "Which 2020 Candidates Have The Most In Common … On Twitter?",
+        "url": "https://fivethirtyeight.com/features/which-2020-candidates-have-the-most-in-common-on-twitter/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/trump-lawsuits",
     "name": "trump-lawsuits",
@@ -825,6 +957,18 @@
       "https://projects.fivethirtyeight.com/congress-model-2018/governor_state_forecast.csv"
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/actblue-analysis",
+    "name": "actblue-analysis",
+    "displayName": "actblue-<span class=\"lastword\">analysis</span>",
+    "articles": [
+      {
+        "date": "2018-10-25T17:31:42.000Z",
+        "title": "How ActBlue Is Trying To Turn Small Donations Into A Blue Wave",
+        "url": "https://fivethirtyeight.com/features/how-actblue-is-trying-to-turn-small-donations-into-a-blue-wave"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/primary-candidates-2018",
     "name": "primary-candidates-2018",
@@ -1035,6 +1179,18 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/redistricting-atlas-data",
+    "name": "redistricting-atlas-data",
+    "displayName": "redistricting-atlas-<span class=\"lastword\">data</span>",
+    "articles": [
+      {
+        "date": "2018-01-25T11:00:00.000Z",
+        "title": "The Atlas Of Redistricting",
+        "url": "https://projects.fivethirtyeight.com/redistricting-maps/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/next-bechdel",
     "name": "next-bechdel",
@@ -1464,6 +1620,37 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/uber-tlc-foil-response",
+    "name": "uber-tlc-foil-response",
+    "displayName": "uber-tlc-foil-<span class=\"lastword\">response</span>",
+    "articles": [
+      {
+        "date": "2015-12-09T16:19:40.000Z",
+        "title": "Is Uber Making NYC Rush-Hour Traffic Worse?",
+        "rowspan": 4,
+        "url": "https://fivethirtyeight.com/features/is-uber-making-nyc-rush-hour-traffic-worse/"
+      },
+      {
+        "date": "2015-10-13T20:44:12.000Z",
+        "title": "Uber Is Taking Millions Of Manhattan Rides Away From Taxis",
+        "rowspan": 0,
+        "url": "https://fivethirtyeight.com/features/uber-is-taking-millions-of-manhattan-rides-away-from-taxis/"
+      },
+      {
+        "date": "2015-08-28T10:30:36.000Z",
+        "title": "Public Transit Should Be Uber’s New Best Friend",
+        "rowspan": 0,
+        "url": "https://fivethirtyeight.com/features/public-transit-should-be-ubers-new-best-friend/"
+      },
+      {
+        "date": "2015-08-10T18:06:17.000Z",
+        "title": "Uber Is Serving New York’s Outer Boroughs More Than Taxis Are",
+        "rowspan": 0,
+        "url": "https://fivethirtyeight.com/features/uber-is-serving-new-yorks-outer-boroughs-more-than-taxis-are/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/tarantino",
     "name": "tarantino",
@@ -1982,6 +2169,18 @@
       }
     ]
   },
+  {
+    "url": "https://github.com/fivethirtyeight/data/tree/master/comma-survey-data",
+    "name": "comma-survey-data",
+    "displayName": "comma-survey-<span class=\"lastword\">data</span>",
+    "articles": [
+      {
+        "date": "2014-06-17T16:28:55.000Z",
+        "title": "Elitist, Superfluous, Or Popular? We Polled Americans on the Oxford Comma",
+        "url": "http://fivethirtyeight.com/features/elitist-superfluous-or-popular-we-polled-americans-on-the-oxford-comma/"
+      }
+    ]
+  },
   {
     "url": "https://github.com/fivethirtyeight/data/tree/master/world-cup-predictions",
     "name": "world-cup-predictions",

examples/fiverthirtyeight-example/lib/octokit.ts

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

examples/fiverthirtyeight-example/next.config.js

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

examples/fiverthirtyeight-example/package.json

@@ -9,8 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@portaljs/components": "^0.1.0",
-    "@tailwindcss/typography": "^0.5.9",
     "@types/node": "20.1.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
@@ -18,17 +16,9 @@
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.1",
     "next": "13.4.1",
-    "next-mdx-remote": "^4.4.1",
-    "next-seo": "^6.0.0",
-    "octokit": "^2.0.14",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-markdown": "^8.0.7",
-    "remark-code-frontmatter": "^1.0.0",
-    "remark-extract-frontmatter": "^3.2.0",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
     "tailwindcss": "3.3.2",
     "timeago.js": "^4.0.2",
     "typescript": "5.0.4"

examples/fiverthirtyeight-example/pages/_app.tsx

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

examples/fiverthirtyeight-example/pages/_document.tsx

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

examples/fiverthirtyeight-example/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

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

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

examples/fiverthirtyeight-example/pages/index.tsx

@@ -1,36 +1,33 @@
 import Image from 'next/image';
 import { Inter } from 'next/font/google';
-import { format } from 'timeago.js';
+import { format } from 'timeago.js'
 import { promises as fs } from 'fs';
 import path from 'path';
 
 const inter = Inter({ subsets: ['latin'] });
 
-export interface Article {
+interface Article {
   date: string;
   title: string;
   url: string;
 }
 
-export interface Dataset {
+interface Dataset {
   url: string;
   name: string;
   displayName: string;
   articles: Article[];
-  files?: string[];
 }
 
-export function MobileItem({ dataset }: { dataset: Dataset }) {
+export function MobileItem({dataset} : { dataset: Dataset}) {
   return (
     <div className="flex gap-x-2 pb-2 py-4 items-center justify-between border-b border-zinc-600">
       <div className="flex flex-col">
         <span className="font-light">{dataset.name}</span>
         {dataset.articles.map((article) => (
-          <div key={article.title} className="py-1 flex flex-col">
+          <div className='py-1 flex flex-col'>
             <span className="font-bold hover:underline">{article.title}</span>
-            <span className="font-light text-base">
+            <span className="font-light text-base">{format(article.date)}</span>{' '}
-              {format(article.date)}
-            </span>{' '}
           </div>
         ))}
       </div>
@@ -42,12 +39,6 @@ export function MobileItem({ dataset }: { dataset: Dataset }) {
         >
           info
         </a>
-        <a
-          className="ml-2 border border-zinc-900 font-light px-4 py-1 text-sm transition hover:bg-zinc-900 hover:text-white"
-          href={`/datasets/${dataset.name}`}
-        >
-          explore
-        </a>
         {/*
                 <button>
                   <svg
@@ -68,25 +59,18 @@ export function MobileItem({ dataset }: { dataset: Dataset }) {
   );
 }
 
-export function DesktopItem({ dataset }: { dataset: Dataset }) {
+export function DesktopItem({dataset} : { dataset: Dataset}) {
   return (
     <>
       {dataset.articles.map((article, index) => (
-        <tr
+        <tr className={`${index === (dataset.articles.length - 1) ? 'border-b' : ''} border-zinc-400`}>
-          key={article.url}
-          className={`${
-            index === dataset.articles.length - 1 ? 'border-b' : ''
-          } border-zinc-400`}
-        >
           <td className="py-8 font-light">{index === 0 ? dataset.name : ''}</td>
           <td>
             <a className="py-8 font-bold hover:underline" href={article.url}>
               {article.title}
             </a>
           </td>
-          <td className="py-8 font-light text-base min-w-[120px]">
+          <td className="py-8 font-light text-base min-w-[120px]">{format(article.date)}</td>
-            {format(article.date)}
-          </td>
           <td className="py-8">
             {index === 0 && (
               <a
@@ -98,16 +82,6 @@ export function DesktopItem({ dataset }: { dataset: Dataset }) {
               </a>
             )}
           </td>
-          <td className="py-8">
-            {index === 0 && (
-              <a
-                className="ml-2 border border-zinc-900 font-light px-[25px] py-2.5 text-sm transition hover:bg-zinc-900 hover:text-white"
-                href={`/datasets/${dataset.name}`}
-              >
-                explore
-              </a>
-            )}
-          </td>
           {/*
               <td>
                 <button>
@@ -132,17 +106,35 @@ export function DesktopItem({ dataset }: { dataset: Dataset }) {
 }
 
 export async function getStaticProps() {
-  const jsonDirectory = path.join(process.cwd(), '/datasets.json');
+  const jsonDirectory = path.join(
+    process.cwd(),
+    '/datasets.json'
+  );
   const datasetString = await fs.readFile(jsonDirectory, 'utf8');
-  const datasets = JSON.parse(datasetString);
+  const datasets = JSON.parse(datasetString)
   return {
     props: { datasets },
   };
 }
 
-export default function Home({ datasets }: { datasets: Dataset[] }) {
+export default function Home( { datasets }: { datasets: Dataset[] }) {
   return (
     <>
+      <header className="max-w-5xl mx-auto mt-8 w-full">
+        <div className="border-b-2 pb-2.5 mx-2 border-zinc-800">
+          <h1>
+            <span className="sr-only">FiveThirtyEight</span>
+            <a className='flex gap-x-2 items-center' href="http://fivethirtyeight.com">
+              <img
+                width="197"
+                height="25"
+                alt="FiveThirtyEight"
+                src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjEgNTMuNzYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDEwMTAxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgOTU8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGgyNXY4SDl2MTBoMTV2OEg5djE3SDBWMHpNMzEgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdIMzF6bTUtMzZoOHY4aC04ek0xNzkgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdoLTE3em01LTM2aDh2OGgtOHpNMzE2IDM2aDVWMThoLTV2LThoMTN2MjZoNHY3aC0xN3ptNS0zNmg4djhoLTh6TTU0IDI3VjEwaDh2MTVsNCA5Ljk4aDFMNzEgMjVWMTBoOHYxN2wtNyAxNkg2MWwtNy0xNnpNMTExIDQzSDk3LjQyQzg5LjIzIDQzIDg1IDM5LjE5IDg1IDMxLjE3VjIyYzAtNy41NyA0LjMtMTMgMTMtMTMgOS4zMyAwIDEzIDUuMDcgMTMgMTR2N0g5NHYxLjc0YzAgMi42MiAxIDQuMjYgMy40MiA0LjI2SDExMXpNOTQgMjNoOHYtMS41NWMwLTIuNjItMS4wNi01LjQ1LTQuMTMtNS40NS0yLjc5IDAtMy44NyAyLjItMy44NyA1LjQ1ek0xMjUgOGgtMTBWMGgyOXY4aC0xMHYzNWgtOVY4ek0yMDIgNDNWMTBoOHY0YzEuMTQtMi40NSAzLjc1LTQgNy4yMi00SDIyMHY4aC02Yy0yLjg0IDAtNCAuOTQtNCAzLjlWNDN6TTI0NSA0M2gtNC44NEMyMzMuMDUgNDMgMjMwIDM5LjMxIDIzMCAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0gyNDV6TTQyMSA0M2gtNC44NEM0MDkuMDUgNDMgNDA2IDM5LjMxIDQwNiAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0g0MjF6TTI1NC4yNiA1My43Nmw0LjYxLTkuNUwyNTEgMjdWMTBoOHYxNWw0IDEwaDFsNC0xMFYxMGg4djE3bC0xMi4zIDI2Ljc2aC05LjQ0ek0yODQgMGgyNXY4aC0xNnY5aDE1djhoLTE1djEwaDE2djhoLTI1VjB6TTMzNyA0OHYtMmgxNi4xYzIgMCAyLjktLjE4IDIuOS0xLjI3di0uMzRjMC0xLjA4LS45MS0xLjM5LTIuOS0xLjM5SDM0MHYtNWw1LTVjLTUuMjktMS40OC04LTUuNDMtOC0xMXYtMWMwLTcuNTYgNC40NC0xMiAxNC0xMmEyMS45MyAyMS45MyAwIDAgMSA1Ljk1IDFMMzYxIDRsNSAzLTQgNmMxLjM3IDEuOTMgMyA0LjkzIDMgOHYxYzAgNy0zLjMgMTAuNjYtMTIgMTFsLTMgNGg2YzUuOTIgMCA5IDIuNjIgOSA3LjY4di4xMWMwIDUuMDYtMi43MSA4LjIxLTguNjIgOC4yMWgtMTNjLTQuMjkgMC02LjM4LTEuODQtNi4zOC01em0xOS0yNXYtM2MwLTMuMy0xLjMzLTQtNS00cy01IC43LTUgNHYzYzAgMy4zIDEuMzkgNCA1IDRzNS0uNyA1LTR6TTM4MCA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuNC00IDctNCA2LjI2IDAgOSAzLjA4IDkgMTAuNzZWNDNoLThWMjJjMC0zLjEzLTEuMDctNS00LTVzLTQgMS44Ny00IDV6TTE1NyA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuOTEtNCA3LjQ5LTQgNi4yNiAwIDguNTEgMy4xMyA4LjUxIDEwLjgxVjQzaC04VjIxYzAtMy4xMy0xLjA3LTQuNDQtNC00LjQ0cy00IDIuMjYtNCA1LjM5eiIvPjwvc3ZnPg=="
+              /> by PortalJS
+            </a>
+          </h1>
+        </div>
+      </header>
       <main
         className={`flex min-h-screen flex-col items-center max-w-5xl mx-auto pt-20 px-2.5 ${inter.className}`}
       >
@@ -156,11 +148,7 @@ export default function Home({ datasets }: { datasets: Dataset[] }) {
             stories and visualizations of&nbsp;your&nbsp;own.
           </p>
         </div>
-        <article className="w-full px-2 md:hidden py-4">
+        <article className="w-full px-2 md:hidden py-4">{datasets.map(dataset => <MobileItem dataset={dataset} />)}</article>
-          {datasets.map((dataset) => (
-            <MobileItem key={dataset.name} dataset={dataset} />
-          ))}
-        </article>
         <table className="w-full mt-10 mb-4 hidden md:table">
           <thead className="border-b-4 pb-2 border-zinc-900">
             <tr>
@@ -175,11 +163,7 @@ export default function Home({ datasets }: { datasets: Dataset[] }) {
               </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody>{datasets.map(dataset => <DesktopItem dataset={dataset} />)}</tbody>
-            {datasets.map((dataset) => (
-              <DesktopItem key={dataset.name} dataset={dataset} />
-            ))}
-          </tbody>
         </table>
         <p className="text-[13px] py-8">
           Unless otherwise noted, our data sets are available under the{' '}

examples/fiverthirtyeight-example/styles/globals.css

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

examples/fiverthirtyeight-example/tailwind.config.js

@@ -14,5 +14,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [],
-};
+}

examples/github-backed-catalog/README.md

@@ -0,0 +1,102 @@
+# A data catalog with data on GitHub
+
+This example showcases a simple data catalog that get its data from a list of GitHub repos that serve as datasets.
+
+A `datasets.json` file is used to specify which datasets are going to be part of the data catalog.
+
+The application contains an index page, which lists all the datasets specified in the `datasets.json` file, and users can see more information about each dataset, such as the list of data files in it and the README, by clicking the "info" button on the list.
+
+You can read more about it on the [Data catalog with data on GitHub](https://portaljs.org/docs/examples/github-backed-catalog) blog post.
+
+## Demo
+
+https://example.portaljs.org/
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fgithub-backed-catalog)
+
+By clicking on this button, you will be redirected to a page which will allow you to clone the content into your own GitHub/GitLab/Bitbucket account and automatically deploy everything.
+
+## How to use
+
+### Install
+
+Execute `create-next-app` to bootstrap the example:
+
+```
+npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/github-backed-catalog
+cd <app-name>
+```
+
+### Set environment variables
+
+This project uses the GitHub API, which for anonymous users will cap at 50 requests per hour, so you might want to get a [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) and add it to a `.env` file inside the folder like so
+
+```
+GITHUB_PAT=<github token>
+```
+
+### Change datasets
+
+You can change the datasets that will be displayed in the data catalog by editing the file `datasets.json`. Some examples can be found inside [this repo](https://github.com/datasets).
+
+### Run in development mode
+
+Run the app using:
+
+```
+npm run dev
+```
+
+Open http://localhost:3000 from your browser. You should see something similar to this:
+
+![](https://i.imgur.com/jAljJ9C.png)
+
+If click on the `info` button for a dataset you will see a page similar to this:
+
+![](https://i.imgur.com/AoJd4O0.png)
+
+## Notes
+
+### Structure of `datasets.json`
+
+The `datasets.json` file is simply a list of datasets, below you can see a minimal example of a dataset:
+
+```json
+{
+  "owner": "fivethirtyeight",
+  "repo": "data",
+  "branch": "master",
+  "files": ["nba-raptor/historical_RAPTOR_by_player.csv", "nba-raptor/historical_RAPTOR_by_team.csv"],
+  "readme": "nba-raptor/README.md"
+}
+```
+
+It has:
+
+- A `owner` which is going to be the github repo owner
+- A `repo` which is going to be the github repo name
+- A `branch` which is going to be the branch to which we need to get the files and the readme
+- A list of `files` which is going to be a list of paths with files that you want to show to the world
+- A `readme` which is going to be the path to your data description, it can also be a subpath eg: `example/README.md`
+
+You can also add:
+
+- A `description` which is useful if you have more than one dataset for each repo, if not provided we are just going to use the repo description
+- A `Name` which is useful if you want to give your dataset a nice name, if not provided we are going to use the junction of the `owner` the `repo` + the path of the README, in the exaple above it will be `fivethirtyeight/data/nba-raptor`
+
+### Extra commands
+
+You can also build the project for production with:
+
+```
+npm run build
+```
+
+And run the production build with:
+
+```
+npm run start
+```
+

examples/github-backed-catalog/components/_shared/Breadcrumbs.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+import HomeIcon from "../icons/HomeIcon";
+
+export default function Breadcrumbs({ links }: { links: { title: string, href?: string, target?: string }[] }) {
+  const current = links.at(-1);
+
+  return <div className="flex items-center uppercase font-black text-xs">
+    <Link className="flex items-center" href='/'><HomeIcon /></Link>
+
+    {/* {links.length > 1 && links.slice(0, -1).map((link) => {
+      return <>
+        <span className="mx-4">/</span>
+        <Link href={link.href}>{link.title}</Link>
+      </>
+    })} */}
+
+    <span className="mx-4">/</span>
+    <span>{current.title}</span>
+  </div >
+}

examples/github-backed-catalog/components/icons/ExternalLinkIcon.tsx

@@ -0,0 +1,3 @@
+export default function ExternalLinkIcon({ className = "" }) {
+  return <div className={`inline-block w-4 ${className}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentColor"><path d="M 40 10 C 38.896 10 38 10.896 38 12 C 38 13.104 38.896 14 40 14 L 47.171875 14 L 30.585938 30.585938 C 29.804938 31.366938 29.804938 32.633063 30.585938 33.414062 C 30.976938 33.805063 31.488 34 32 34 C 32.512 34 33.023063 33.805062 33.414062 33.414062 L 50 16.828125 L 50 24 C 50 25.104 50.896 26 52 26 C 53.104 26 54 25.104 54 24 L 54 12 C 54 10.896 53.104 10 52 10 L 40 10 z M 18 12 C 14.691 12 12 14.691 12 18 L 12 46 C 12 49.309 14.691 52 18 52 L 46 52 C 49.309 52 52 49.309 52 46 L 52 34 C 52 32.896 51.104 32 50 32 C 48.896 32 48 32.896 48 34 L 48 46 C 48 47.103 47.103 48 46 48 L 18 48 C 16.897 48 16 47.103 16 46 L 16 18 C 16 16.897 16.897 16 18 16 L 30 16 C 31.104 16 32 15.104 32 14 C 32 12.896 31.104 12 30 12 L 18 12 z"/></svg></div>
+}

examples/github-backed-catalog/components/icons/HomeIcon.tsx

@@ -0,0 +1,3 @@
+export default function HomeIcon({ className = "" }) {
+  return <div className={`inline-block w-4 ${className}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">    <path d="M 12 2 A 1 1 0 0 0 11.289062 2.296875 L 1.203125 11.097656 A 0.5 0.5 0 0 0 1 11.5 A 0.5 0.5 0 0 0 1.5 12 L 4 12 L 4 20 C 4 20.552 4.448 21 5 21 L 9 21 C 9.552 21 10 20.552 10 20 L 10 14 L 14 14 L 14 20 C 14 20.552 14.448 21 15 21 L 19 21 C 19.552 21 20 20.552 20 20 L 20 12 L 22.5 12 A 0.5 0.5 0 0 0 23 11.5 A 0.5 0.5 0 0 0 22.796875 11.097656 L 12.716797 2.3027344 A 1 1 0 0 0 12.710938 2.296875 A 1 1 0 0 0 12 2 z"/></svg></div>
+}

examples/github-backed-catalog/package-lock.json

@@ -19,6 +19,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-markdown": "^8.0.7",
+        "react-timeago": "^7.1.0",
         "remark-gfm": "^3.0.1",
         "typescript": "5.0.4"
       },
@@ -4797,6 +4798,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-timeago": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-7.1.0.tgz",
+      "integrity": "sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

examples/github-backed-catalog/package.json

@@ -20,6 +20,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.7",
+    "react-timeago": "^7.1.0",
     "remark-gfm": "^3.0.1",
     "typescript": "5.0.4"
   },

examples/github-backed-catalog/pages/@org/[org]/[...path].tsx

@@ -1,6 +1,3 @@
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-
 import { NextSeo } from 'next-seo';
 import { promises as fs } from 'fs';
 import path from 'path';
@@ -8,15 +5,20 @@ import getConfig from 'next/config';
 import { getProject, GithubProject } from '../../../lib/octokit';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import Link from 'next/link';
+import Breadcrumbs from '../../../components/_shared/Breadcrumbs';
 
 export default function ProjectPage({ project }) {
+  const repoId = `@${project.repo_config.owner}/${project.repo_config.repo}`
+
   return (
     <>
-      <NextSeo title={`PortalJS - @${project.repo_config.owner}/${project.repo_config.repo}${project.base_path !== '/' ? '/' + project.base_path : ''}`} />
+      <NextSeo title={`${repoId}${project.base_path !== '/' ? '/' + project.base_path : ''} - GitHub Datasets`} />
       <main className="prose mx-auto my-8">
-        <Link href='/'>Back to homepage</Link>
+        <Breadcrumbs links={[{ title: repoId, href: "" }]} />
-        <h1 className="mb-0">Data</h1>
+        <h1 className="mb-0 mt-16">{project.repo_config.name || repoId}</h1>
+        <p className='mb-8'><span className='font-semibold'>Repository:</span> <a target="_blank" href={project.html_url}>{project.html_url}</a></p>
+
+        <h2 className="mb-0 mt-10">Files</h2>
         <div className="inline-block min-w-full py-2 align-middle">
           <table className="min-w-full divide-y divide-gray-300">
             <thead>
@@ -50,7 +52,9 @@ export default function ProjectPage({ project }) {
           </table>
         </div>
 
-        <h1>Readme</h1>
+        <hr />
+
+        <h2 className='uppercase font-black'>Readme</h2>
         <ReactMarkdown remarkPlugins={[remarkGfm]}>
           {project.readmeContent}
         </ReactMarkdown>

examples/github-backed-catalog/pages/_app.tsx

@@ -6,7 +6,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
-        <title>Welcome to simple-example!</title>
+        <title>GitHub Datasets</title>
       </Head>
       <main className="app">
         <Component {...pageProps} />

examples/github-backed-catalog/pages/index.tsx

@@ -2,6 +2,9 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import { getProject } from '../lib/octokit';
 import getConfig from 'next/config';
+import ExternalLinkIcon from '../components/icons/ExternalLinkIcon';
+import TimeAgo from 'react-timeago';
+import Link from 'next/link';
 
 export async function getStaticProps() {
   const jsonDirectory = path.join(
@@ -24,26 +27,18 @@ export async function getStaticProps() {
   };
 }
 
-const formatter = new Intl.DateTimeFormat('en-US', {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric',
-  timeZone: 'UTC',
-});
-
 export function Datasets({ projects }) {
   return (
-    <div className="bg-white">
+    <div className="bg-white min-h-screen">
       <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
-        <h2 className="text-2xl font-bold leading-10 tracking-tight">
+        <div className='text-center'>
-          My Datasets
+          <h2 className="text-3xl font-bold leading-10 tracking-tight">
-        </h2>
+            GitHub Datasets
-        <p className="mt-6 max-w-2xl text-base leading-7 text-gray-600">
+          </h2>
-          Here is a list of all my datasets for easy access and sharing
+          <p className="mt-3 mx-auto max-w-2xl text-base leading-7 text-gray-500">
-        </p>
+            Data catalog with datasets hosted on GitHub by <Link target="_blank" className='underline' href="https://portaljs.org/">🌀 PortalJS</Link>
+          </p>
+        </div>
         <div className="mt-20">
           <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@@ -60,7 +55,7 @@ export function Datasets({ projects }) {
                       scope="col"
                       className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                     >
-                      Repo
+                      Repository
                     </th>
                     <th
                       scope="col"
@@ -83,27 +78,28 @@ export function Datasets({ projects }) {
                 <tbody className="divide-y divide-gray-200">
                   {projects.map((project) => (
                     <tr key={project.id}>
-                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
                         {project.repo_config.name
                           ? project.repo_config.name
                           : project.full_name + (project.base_path === '/' ? '' : '/' + project.base_path)}
                       </td>
-                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <td className="whitespace-nowrap px-3 py-6 text-sm group text-gray-500 hover:text-gray-900 transition-all duration-250">
-                        <a href={project.html_url}>{project.full_name}</a>
+                        <a href={project.html_url} target="_blank" className='flex items-center'>@{project.full_name} <ExternalLinkIcon className='ml-1' /></a>
                       </td>
                       <td className="px-3 py-4 text-sm text-gray-500">
                         {project.repo_config.description
                           ? project.repo_config.description
                           : project.description}
                       </td>
-                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
-                        {formatter.format(new Date(project.last_updated))}
+                        <TimeAgo date={new Date(project.last_updated)} />
                       </td>
-                      <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
+                      <td className="relative whitespace-nowrap py-6 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                         <a
                           href={`/@${project.repo_config.owner}/${project.repo_config.repo}/${project.base_path === '/' ? '' : project.base_path}`}
+                          className='border border-gray-900 text-gray-900 px-4 py-2 transition-all hover:bg-gray-900 hover:text-white'
                         >
-                          More info
+                          info
                         </a>
                       </td>
                     </tr>

examples/github-backed-catalog/pages/styles.css

@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+html {
+  -webkit-text-size-adjust: 100%;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  line-height: 1.5;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+body {
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+h1,
+h2,
+p,
+pre {
+  margin: 0;
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+h1,
+h2 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+}
+svg {
+  display: block;
+  vertical-align: middle;
+  shape-rendering: auto;
+  text-rendering: optimizeLegibility;
+}
+pre {
+  background-color: rgba(55, 65, 81, 1);
+  border-radius: 0.25rem;
+  color: rgba(229, 231, 235, 1);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    Liberation Mono, Courier New, monospace;
+  overflow: scroll;
+  padding: 0.5rem 0.75rem;
+}
+
+.shadow {
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.rounded {
+  border-radius: 1.5rem;
+}
+.wrapper {
+  width: 100%;
+}
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 768px;
+  padding-bottom: 3rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  color: rgba(55, 65, 81, 1);
+  width: 100%;
+}

examples/simple-example/README.md

@@ -1,75 +0,0 @@
-This is a repo intended to serve as a simple example of a data catalog that get its data from a series of github repos, you can init an example just like this one by.
-
-- Creating a new project with `create-next-app` like so:
-
-```
-npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/simple-example
-cd <app-name>
-```
-
-- This project uses the github api, which for anonymous users will cap at 50 requests per hour, so you might want to get a [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) and add it to a `.env` file inside the folder like so
-
-```
-GITHUB_PAT=<github token>
-```
-
-- Edit the file `datasets.json` to your liking, some examples can be found inside this [repo](https://github.com/datasets)
-- Run the app using:
-
-```
-npm run dev
-```
-
-Congratulations, you now have something similar to this running on `http://localhost:3000`
-![](https://i.imgur.com/jAljJ9C.png)
-If yo go to any one of those pages by clicking on `More info` you will see something similar to this
-![](https://i.imgur.com/AoJd4O0.png)
-
-## Deployment
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fsimple-example)
-
-By clicking on this button, you will be redirected to a page which will allow you to clone the content into your own github/gitlab/bitbucket account and automatically deploy everything.
-
-
-## Structure of `datasets.json`
-
-The `datasets.json` file is simply a list of datasets, below you can see a minimal example of a dataset
-
-```json
-{
-  "owner": "fivethirtyeight",
-  "repo": "data",
-  "branch": "master",
-  "files": ["nba-raptor/historical_RAPTOR_by_player.csv", "nba-raptor/historical_RAPTOR_by_team.csv"],
-  "readme": "nba-raptor/README.md"
-}
-```
-
-It has
-
-- A `owner` which is going to be the github repo owner
-- A `repo` which is going to be the github repo name
-- A `branch` which is going to be the branch to which we need to get the files and the readme
-- A list of `files` which is going to be a list of paths with files that you want to show to the world
-- A `readme` which is going to be the path to your data description, it can also be a subpath eg: `example/README.md`
-
-You can also add
-
-- A `description` which is useful if you have more than one dataset for each repo, if not provided we are just going to use the repo description
-- A `Name` which is useful if you want to give your dataset a nice name, if not provided we are going to use the junction of the `owner` the `repo` + the path of the README, in the exaple above it will be `fivethirtyeight/data/nba-raptor`
-
-## Extra commands
-
-You can also build the project for production with
-
-```
-npm run build
-```
-
-And run using the production build like so:
-
-```
-npm run start
-```
-

examples/simple-example/pages/styles.css

@@ -1,403 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-html {
-  -webkit-text-size-adjust: 100%;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
-    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-  line-height: 1.5;
-  tab-size: 4;
-  scroll-behavior: smooth;
-}
-body {
-  font-family: inherit;
-  line-height: inherit;
-  margin: 0;
-}
-h1,
-h2,
-p,
-pre {
-  margin: 0;
-}
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
-}
-h1,
-h2 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    Liberation Mono, Courier New, monospace;
-}
-svg {
-  display: block;
-  vertical-align: middle;
-  shape-rendering: auto;
-  text-rendering: optimizeLegibility;
-}
-pre {
-  background-color: rgba(55, 65, 81, 1);
-  border-radius: 0.25rem;
-  color: rgba(229, 231, 235, 1);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    Liberation Mono, Courier New, monospace;
-  overflow: scroll;
-  padding: 0.5rem 0.75rem;
-}
-
-.shadow {
-  box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-.rounded {
-  border-radius: 1.5rem;
-}
-.wrapper {
-  width: 100%;
-}
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 768px;
-  padding-bottom: 3rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  color: rgba(55, 65, 81, 1);
-  width: 100%;
-}
-#welcome {
-  margin-top: 2.5rem;
-}
-#welcome h1 {
-  font-size: 3rem;
-  font-weight: 500;
-  letter-spacing: -0.025em;
-  line-height: 1;
-}
-#welcome span {
-  display: block;
-  font-size: 1.875rem;
-  font-weight: 300;
-  line-height: 2.25rem;
-  margin-bottom: 0.5rem;
-}
-#hero {
-  align-items: center;
-  background-color: hsla(214, 62%, 21%, 1);
-  border: none;
-  box-sizing: border-box;
-  color: rgba(55, 65, 81, 1);
-  display: grid;
-  grid-template-columns: 1fr;
-  margin-top: 3.5rem;
-}
-#hero .text-container {
-  color: rgba(255, 255, 255, 1);
-  padding: 3rem 2rem;
-}
-#hero .text-container h2 {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  position: relative;
-}
-#hero .text-container h2 svg {
-  color: hsla(162, 47%, 50%, 1);
-  height: 2rem;
-  left: -0.25rem;
-  position: absolute;
-  top: 0;
-  width: 2rem;
-}
-#hero .text-container h2 span {
-  margin-left: 2.5rem;
-}
-#hero .text-container a {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 0.75rem;
-  color: rgba(55, 65, 81, 1);
-  display: inline-block;
-  margin-top: 1.5rem;
-  padding: 1rem 2rem;
-  text-decoration: inherit;
-}
-#hero .logo-container {
-  display: none;
-  justify-content: center;
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-#hero .logo-container svg {
-  color: rgba(255, 255, 255, 1);
-  width: 66.666667%;
-}
-#middle-content {
-  align-items: flex-start;
-  display: grid;
-  gap: 4rem;
-  grid-template-columns: 1fr;
-  margin-top: 3.5rem;
-}
-#learning-materials {
-  padding: 2.5rem 2rem;
-}
-#learning-materials h2 {
-  font-weight: 500;
-  font-size: 1.25rem;
-  letter-spacing: -0.025em;
-  line-height: 1.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.list-item-link {
-  align-items: center;
-  border-radius: 0.75rem;
-  display: flex;
-  margin-top: 1rem;
-  padding: 1rem;
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  width: 100%;
-}
-.list-item-link svg:first-child {
-  margin-right: 1rem;
-  height: 1.5rem;
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  width: 1.5rem;
-}
-.list-item-link > span {
-  flex-grow: 1;
-  font-weight: 400;
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.list-item-link > span > span {
-  color: rgba(107, 114, 128, 1);
-  display: block;
-  flex-grow: 1;
-  font-size: 0.75rem;
-  font-weight: 300;
-  line-height: 1rem;
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.list-item-link svg:last-child {
-  height: 1rem;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  width: 1rem;
-}
-.list-item-link:hover {
-  color: rgba(255, 255, 255, 1);
-  background-color: hsla(162, 47%, 50%, 1);
-}
-.list-item-link:hover > span {
-}
-.list-item-link:hover > span > span {
-  color: rgba(243, 244, 246, 1);
-}
-.list-item-link:hover svg:last-child {
-  transform: translateX(0.25rem);
-}
-#other-links {
-}
-.button-pill {
-  padding: 1.5rem 2rem;
-  transition-duration: 300ms;
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  align-items: center;
-  display: flex;
-}
-.button-pill svg {
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  flex-shrink: 0;
-  width: 3rem;
-}
-.button-pill > span {
-  letter-spacing: -0.025em;
-  font-weight: 400;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.button-pill span span {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 300;
-  line-height: 1.25rem;
-}
-.button-pill:hover svg,
-.button-pill:hover {
-  color: rgba(255, 255, 255, 1) !important;
-}
-#nx-console:hover {
-  background-color: rgba(0, 122, 204, 1);
-}
-#nx-console svg {
-  color: rgba(0, 122, 204, 1);
-}
-#nx-repo:hover {
-  background-color: rgba(24, 23, 23, 1);
-}
-#nx-repo svg {
-  color: rgba(24, 23, 23, 1);
-}
-#nx-cloud {
-  margin-bottom: 2rem;
-  margin-top: 2rem;
-  padding: 2.5rem 2rem;
-}
-#nx-cloud > div {
-  align-items: center;
-  display: flex;
-}
-#nx-cloud > div svg {
-  border-radius: 0.375rem;
-  flex-shrink: 0;
-  width: 3rem;
-}
-#nx-cloud > div h2 {
-  font-size: 1.125rem;
-  font-weight: 400;
-  letter-spacing: -0.025em;
-  line-height: 1.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-#nx-cloud > div h2 span {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 300;
-  line-height: 1.25rem;
-}
-#nx-cloud p {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  margin-top: 1rem;
-}
-#nx-cloud pre {
-  margin-top: 1rem;
-}
-#nx-cloud a {
-  color: rgba(107, 114, 128, 1);
-  display: block;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  margin-top: 1.5rem;
-  text-align: right;
-}
-#nx-cloud a:hover {
-  text-decoration: underline;
-}
-#commands {
-  padding: 2.5rem 2rem;
-  margin-top: 3.5rem;
-}
-#commands h2 {
-  font-size: 1.25rem;
-  font-weight: 400;
-  letter-spacing: -0.025em;
-  line-height: 1.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-#commands p {
-  font-size: 1rem;
-  font-weight: 300;
-  line-height: 1.5rem;
-  margin-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-details {
-  align-items: center;
-  display: flex;
-  margin-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  width: 100%;
-}
-details pre > span {
-  color: rgba(181, 181, 181, 1);
-  display: block;
-}
-summary {
-  border-radius: 0.5rem;
-  display: flex;
-  font-weight: 400;
-  padding: 0.5rem;
-  cursor: pointer;
-  transition-property: background-color, border-color, color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter,
-    -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-summary:hover {
-  background-color: rgba(243, 244, 246, 1);
-}
-summary svg {
-  height: 1.5rem;
-  margin-right: 1rem;
-  width: 1.5rem;
-}
-#love {
-  color: rgba(107, 114, 128, 1);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  margin-top: 3.5rem;
-  opacity: 0.6;
-  text-align: center;
-}
-#love svg {
-  color: rgba(252, 165, 165, 1);
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline;
-  margin-top: -0.25rem;
-}
-@media screen and (min-width: 768px) {
-  #hero {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  #hero .logo-container {
-    display: flex;
-  }
-  #middle-content {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}

site/content/docs/examples/example-ckan.md

@@ -1,5 +1,5 @@
 ---
-title: "Example: Data catalog with data coming from CKAN"
+title: "Example: Data catalog with data on CKAN"
 authors: ['Luccas Mateus']
 date: 2023-04-20
 filetype: blog

site/content/docs/examples/github-backed-catalog.md

@@ -1,11 +1,11 @@
 ---
-title: "Example: Simple data catalog"
+title: "Example: Data catalog with data on GitHub"
 authors: ['Luccas Mateus']
 date: 2023-04-20
 filetype: blog
 ---
 
-The simple-example added to PortalJS is intended to provide users with an easy way to set up a data catalog that can be used to display and share data stores stored in GitHub repositories. With this example, users can quickly set up a web-based portal that allows them to showcase their data and make it accessible to others, all this being done thru the configuration of a simple `datasets.json` file.
+The github-backed example added to PortalJS is intended to provide users with an easy way to set up a data catalog that can be used to display and share data stored in GitHub repositories. With this example, users can quickly set up a web-based portal that allows them to showcase their data and make it accessible to others, all this being done thru the configuration of a simple `datasets.json` file.
 
 ## Demo
 
@@ -25,7 +25,7 @@ Below are some screenshots:
 
 - Create a new app with `create-next-app`:
 ```
-npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/simple-example
+npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/github-backed-catalog
 cd <app-name>
 ```
 
@@ -46,7 +46,7 @@ Congratulations, you now have something similar to this running on `http://local
 
 ## Deployment
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fsimple-example)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdatopian%2Fportaljs%2Ftree%2Fmain%2Fexamples%2Fgithub-backed-catalog)
 
 By clicking on this button, you will be redirected to a page which will allow you to clone the content into your own github/gitlab/bitbucket account and automatically deploy everything.
 
@@ -94,5 +94,5 @@ npm run start
 
 ## Links
 
-- [Repo](https://github.com/datopian/portaljs/tree/main/examples/simple-example)  
+- [Repo](https://github.com/datopian/portaljs/tree/main/examples/github-backed-catalog)  
 - [Live Demo](https://example.portaljs.org)