[example/538] - title on head

examples/fivethirtyeight/datasets.json

@@ -211,18 +211,6 @@
       "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",
@@ -239,18 +227,6 @@
       "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",
@@ -371,18 +347,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -407,42 +371,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -475,18 +403,6 @@
       "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",
@@ -557,18 +473,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -608,18 +512,6 @@
       "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",
@@ -711,18 +603,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -763,18 +643,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -957,18 +825,6 @@
       "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",
@@ -1179,18 +1035,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -1620,37 +1464,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -2169,18 +1982,6 @@
       }
     ]
   },
-  {
-    "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",
@@ -2350,4 +2151,4 @@
       }
     ]
   }
-]
+]

examples/fivethirtyeight/pages/_document.tsx

@@ -9,33 +9,57 @@ export default function Document() {
           type="image/x-icon"
           href="https://projects.fivethirtyeight.com/shared/favicon.ico"
         />
+        <meta property="og:image" content="https://portaljs-fivethirtyeight.vercel.app/share_image.png" />
+        <meta property="twitter:image" content="https://portaljs-fivethirtyeight.vercel.app/share_image.png" />
       </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>
+          <div className="border-b-2 pb-2.5 mx-2 border-zinc-800 flex justify-between">
+            <h1 className="flex gap-x-1 items-end">
               <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>
+              <img
+                width="197"
+                height="25"
+                alt="FiveThirtyEight"
+                src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjEgNTMuNzYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDEwMTAxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgOTU8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGgyNXY4SDl2MTBoMTV2OEg5djE3SDBWMHpNMzEgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdIMzF6bTUtMzZoOHY4aC04ek0xNzkgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdoLTE3em01LTM2aDh2OGgtOHpNMzE2IDM2aDVWMThoLTV2LThoMTN2MjZoNHY3aC0xN3ptNS0zNmg4djhoLTh6TTU0IDI3VjEwaDh2MTVsNCA5Ljk4aDFMNzEgMjVWMTBoOHYxN2wtNyAxNkg2MWwtNy0xNnpNMTExIDQzSDk3LjQyQzg5LjIzIDQzIDg1IDM5LjE5IDg1IDMxLjE3VjIyYzAtNy41NyA0LjMtMTMgMTMtMTMgOS4zMyAwIDEzIDUuMDcgMTMgMTR2N0g5NHYxLjc0YzAgMi42MiAxIDQuMjYgMy40MiA0LjI2SDExMXpNOTQgMjNoOHYtMS41NWMwLTIuNjItMS4wNi01LjQ1LTQuMTMtNS40NS0yLjc5IDAtMy44NyAyLjItMy44NyA1LjQ1ek0xMjUgOGgtMTBWMGgyOXY4aC0xMHYzNWgtOVY4ek0yMDIgNDNWMTBoOHY0YzEuMTQtMi40NSAzLjc1LTQgNy4yMi00SDIyMHY4aC02Yy0yLjg0IDAtNCAuOTQtNCAzLjlWNDN6TTI0NSA0M2gtNC44NEMyMzMuMDUgNDMgMjMwIDM5LjMxIDIzMCAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0gyNDV6TTQyMSA0M2gtNC44NEM0MDkuMDUgNDMgNDA2IDM5LjMxIDQwNiAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0g0MjF6TTI1NC4yNiA1My43Nmw0LjYxLTkuNUwyNTEgMjdWMTBoOHYxNWw0IDEwaDFsNC0xMFYxMGg4djE3bC0xMi4zIDI2Ljc2aC05LjQ0ek0yODQgMGgyNXY4aC0xNnY5aDE1djhoLTE1djEwaDE2djhoLTI1VjB6TTMzNyA0OHYtMmgxNi4xYzIgMCAyLjktLjE4IDIuOS0xLjI3di0uMzRjMC0xLjA4LS45MS0xLjM5LTIuOS0xLjM5SDM0MHYtNWw1LTVjLTUuMjktMS40OC04LTUuNDMtOC0xMXYtMWMwLTcuNTYgNC40NC0xMiAxNC0xMmEyMS45MyAyMS45MyAwIDAgMSA1Ljk1IDFMMzYxIDRsNSAzLTQgNmMxLjM3IDEuOTMgMyA0LjkzIDMgOHYxYzAgNy0zLjMgMTAuNjYtMTIgMTFsLTMgNGg2YzUuOTIgMCA5IDIuNjIgOSA3LjY4di4xMWMwIDUuMDYtMi43MSA4LjIxLTguNjIgOC4yMWgtMTNjLTQuMjkgMC02LjM4LTEuODQtNi4zOC01em0xOS0yNXYtM2MwLTMuMy0xLjMzLTQtNS00cy01IC43LTUgNHYzYzAgMy4zIDEuMzkgNCA1IDRzNS0uNyA1LTR6TTM4MCA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuNC00IDctNCA2LjI2IDAgOSAzLjA4IDkgMTAuNzZWNDNoLThWMjJjMC0zLjEzLTEuMDctNS00LTVzLTQgMS44Ny00IDV6TTE1NyA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuOTEtNCA3LjQ5LTQgNi4yNiAwIDguNTEgMy4xMyA4LjUxIDEwLjgxVjQzaC04VjIxYzAtMy4xMy0xLjA3LTQuNDQtNC00LjQ0cy00IDIuMjYtNCA1LjM5eiIvPjwvc3ZnPg=="
+              />{' '}
+              <span className="-mb-0.5 text-[#3c3c3c]">
+                tribute by PortalJS
+              </span>
             </h1>
+            <div className='md:flex items-center gap-x-3 text-[#3c3c3c] -mb-1 hidden'>
+              <a
+                className="hover:opacity-75 transition"
+                href="https://portaljs.org"
+              >
+                Built with 🌀PortalJS
+              </a>
+              <hr className='h-[80%] border border-[#3c3c3c] opacity-75 my-2'></hr>
+              <a
+                className="hover:opacity-75 transition"
+                href="https://github.com/datopian/portaljs/tree/main/examples/fivethirtyeight"
+              >
+                Github
+              </a>
+            </div>
           </div>
-          <div className="mx-2 py-1.5 text-[14px] text-[#3c3c3c]">
-            <ul className='flex gap-x-4'>
+          <div className="mx-2 py-1.5 text-[14px] text-[#3c3c3c] md:hidden">
+            <ul className="flex gap-x-4">
               <li>
-                <a className='hover:opacity-75 transition' href="https://portaljs.org">PortalJS</a>
+                <a
+                  className="hover:opacity-75 transition"
+                  href="https://portaljs.org"
+                >
+                  PortalJS
+                </a>
               </li>
               <li>
-                <a className='hover:opacity-75 transition' href="https://github.com/datopian/portaljs/tree/main/examples/fivethirtyeight">View on Github</a>
+                <a
+                  className="hover:opacity-75 transition"
+                  href="https://github.com/datopian/portaljs/tree/main/examples/fivethirtyeight"
+                >
+                  View on Github
+                </a>
               </li>
             </ul>
           </div>

examples/fivethirtyeight/pages/index.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import { format } from 'timeago.js';
 import { promises as fs } from 'fs';
 import path from 'path';
+import { NextSeo } from 'next-seo';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -31,11 +32,7 @@ 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-mono font-light">
-          <a className="underline" href={dataset.url} target="_blank">
-            {dataset.name}
-          </a>
-        </span>
+        <span className="font-mono font-light">{dataset.name}</span>
         {dataset.articles.map((article) => (
           <div key={article.title} className="py-1 flex flex-col">
             <span className="font-bold hover:underline">{article.title}</span>
@@ -50,9 +47,9 @@ export function MobileItem({ dataset }: { dataset: Dataset }) {
       <div className="flex flex-col justify-start">
         <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}`}
+          href={dataset.url}
         >
-          explore
+          info
         </a>
         {/*
                 <button>
@@ -84,10 +81,8 @@ export function DesktopItem({ dataset }: { dataset: Dataset }) {
             index === dataset.articles.length - 1 ? 'border-b' : ''
           } border-zinc-400`}
         >
-          <td className="py-8 font-light font-mono text-[14px] text-zinc-700">
-            <a className="underline" href={dataset.url} target="_blank">
-              {index === 0 ? dataset.name : ''}
-            </a>
+          <td className="py-8 font-light font-mono text-[13px] text-zinc-700">
+            {index === 0 ? dataset.name : ''}
           </td>
           <td>
             <a
@@ -106,9 +101,9 @@ export function DesktopItem({ dataset }: { dataset: Dataset }) {
             {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}`}
+                href={dataset.url}
               >
-                explore
+                info
               </a>
             )}
           </td>
@@ -147,6 +142,20 @@ export async function getStaticProps() {
 export default function Home({ datasets }: { datasets: Dataset[] }) {
   return (
     <>
+      <NextSeo title="FiveThirtyEight tribute by PortalJS" />
+      <div className="max-w-5xl mx-auto mt-2 px-2 text-[#3c3c3c]">
+        <div className="border border-zinc-600 p-4 text-left">
+          This page is a tribute to the{' '}
+          <a className='hover:underline font-bold' href="https://data.fivethirtyeight.com">
+            data.fivethirtyeight.com
+          </a>{' '}
+          website  made by the amazing 538 team. All content is credited to the original creators, intended for
+          educational purposes only. Visit their{' '}
+          <a className='hover:underline font-bold' href="https://fivethirtyeight.com/">website</a> for in-depth analyses
+          on politics, sports, culture, and more. No copyright infringement
+          intended.
+        </div>
+      </div>
       <main
         className={`flex min-h-screen flex-col items-center max-w-5xl mx-auto pt-20 px-2.5 ${inter.className}`}
       >

examples/turing/components/Header.jsx

@@ -140,7 +140,7 @@ function MobileNavigation(props) {
             </div>
             <nav className="mt-6">
               <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
-                <MobileNavItem href="https://github.com/leondz/hatespeechdata">
+                <MobileNavItem href="https://github.com/datopian/portaljs/tree/main/examples/turing">
                   View on Github <GithubIcon />
                 </MobileNavItem>
               </ul>
@@ -179,7 +179,7 @@ function DesktopNavigation(props) {
   return (
     <nav {...props}>
       <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
-        <NavItem href="https://github.com/leondz/hatespeechdata">
+        <NavItem href="https://github.com/datopian/portaljs/tree/main/examples/turing">
           View on Github <GithubIcon />
         </NavItem>
       </ul>

examples/turing/pages/[...slug].jsx

@@ -6,7 +6,6 @@ import { Card } from '../components/Card'
 import Head from 'next/head'
 import parse from '../lib/markdown'
 import { Mermaid } from '@flowershow/core';
-import { Header } from '../components/Header';
 
 export const getStaticProps = async ({ params }) => {
   const urlPath = params.slug ? params.slug.join('/') : ''
@@ -82,15 +81,13 @@ export default function DRDPage({ mdxSource }) {
   )
   return (
     <>
-      <Header />
       <Head>
         <title>{meta.title}</title>
       </Head>
-      <Container className="mt-16 lg:mt-32 relative">
-        <Header />
+      <Container className="mt-9 relative">
         <article>
           <header className="flex flex-col">
-            <h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+            <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
               {meta.title}
             </h1>
             <Card as="article">