Compare commits
13 Commits
fivethirty
...
538-change
| Author | SHA1 | Date | |
|---|---|---|---|
|
f76ab6fe43 | ||
|
|
e011d6cbf7 | ||
|
|
915d260c2f | ||
|
|
c756d73e33 | ||
|
|
1af24ef57e | ||
|
|
698c06efda | ||
|
|
8792f295b0 | ||
|
|
3e6d01c4c7 | ||
|
|
7c943c1b31 | ||
|
|
7197a6686e | ||
|
|
7822440f0d | ||
|
|
82773b5e8a | ||
|
|
1cfc4db528 |
Binary file not shown.
@@ -1,38 +0,0 @@
|
||||
import { Html, Head, Main, NextScript } from 'next/document';
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,10 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
This is a replica of the awesome data.fivethirtyeight.com using PortalJS.
|
||||
|
||||
You might be asking why we did that, there are three main reasons:
|
||||
|
||||
- The website has a great UI, with multiple datasets being displayed elegantly and with simplicity.
|
||||
- PortalJS allows us to add more functionality to it e.g dataset previews and search functionality.
|
||||
- The project follows our same principles of open sourcing and free data, with every dataset being publicly available on Github.
|
||||
|
||||
## Getting Started
|
||||
|
||||
@@ -1,46 +1,11 @@
|
||||
[
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/nba-forecasts",
|
||||
"name": "nba-forecasts",
|
||||
"displayName": "nba-<span class=\"lastword\">forecasts</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-08T22:33:43.000Z",
|
||||
"title": "2022-23 NBA Predictions",
|
||||
"url": "https://projects.fivethirtyeight.com/2023-nba-predictions/"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"https://projects.fivethirtyeight.com/nba-model/nba_elo.csv",
|
||||
"https://projects.fivethirtyeight.com/nba-model/nba_elo_latest.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/soccer-spi",
|
||||
"name": "soccer-spi",
|
||||
"displayName": "soccer-<span class=\"lastword\">spi</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-08T22:17:18.000Z",
|
||||
"title": "Club Soccer Predictions",
|
||||
"url": "https://projects.fivethirtyeight.com/soccer-predictions/"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"https://projects.fivethirtyeight.com/soccer-api/club/spi_matches.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/club/spi_matches_latest.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/club/spi_global_rankings.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/international/spi_matches_intl.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/international/spi_global_rankings_intl.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/polls",
|
||||
"name": "polls",
|
||||
"displayName": "<span class=\"lastword\">polls</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-08T20:36:59.000Z",
|
||||
"date": "2023-05-11T14:35:40.000Z",
|
||||
"title": "Latest Polls",
|
||||
"url": "https://projects.fivethirtyeight.com/polls/"
|
||||
}
|
||||
@@ -63,13 +28,45 @@
|
||||
"https://projects.fivethirtyeight.com/2020-general-data/presidential_poll_averages_2020.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/congress-generic-ballot",
|
||||
"name": "congress-generic-ballot",
|
||||
"displayName": "congress-generic-<span class=\"lastword\">ballot</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-11T14:35:40.000Z",
|
||||
"title": "Do Voters Want Democrats Or Republicans In Congress?",
|
||||
"url": "https://projects.fivethirtyeight.com/congress-generic-ballot-polls/"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"https://projects.fivethirtyeight.com/generic-ballot-data/generic_polllist.csv",
|
||||
"https://projects.fivethirtyeight.com/polls/data/generic_ballot_averages.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/nba-forecasts",
|
||||
"name": "nba-forecasts",
|
||||
"displayName": "nba-<span class=\"lastword\">forecasts</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-11T11:15:46.000Z",
|
||||
"title": "2022-23 NBA Predictions",
|
||||
"url": "https://projects.fivethirtyeight.com/2023-nba-predictions/"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"https://projects.fivethirtyeight.com/nba-model/nba_elo.csv",
|
||||
"https://projects.fivethirtyeight.com/nba-model/nba_elo_latest.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/nba-raptor",
|
||||
"name": "nba-raptor",
|
||||
"displayName": "nba-<span class=\"lastword\">raptor</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-08T11:15:48.000Z",
|
||||
"date": "2023-05-11T11:13:20.000Z",
|
||||
"title": "The Best NBA Players, According To RAPTOR",
|
||||
"rowspan": 3,
|
||||
"url": "https://projects.fivethirtyeight.com/nba-player-ratings/"
|
||||
@@ -92,13 +89,32 @@
|
||||
"https://projects.fivethirtyeight.com/nba-model/2023/latest_RAPTOR_by_player.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/soccer-spi",
|
||||
"name": "soccer-spi",
|
||||
"displayName": "soccer-<span class=\"lastword\">spi</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-11T05:25:51.000Z",
|
||||
"title": "Club Soccer Predictions",
|
||||
"url": "https://projects.fivethirtyeight.com/soccer-predictions/"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"https://projects.fivethirtyeight.com/soccer-api/club/spi_matches.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/club/spi_matches_latest.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/club/spi_global_rankings.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/international/spi_matches_intl.csv",
|
||||
"https://projects.fivethirtyeight.com/soccer-api/international/spi_global_rankings_intl.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/nhl-forecasts",
|
||||
"name": "nhl-forecasts",
|
||||
"displayName": "nhl-<span class=\"lastword\">forecasts</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-08T04:18:20.000Z",
|
||||
"date": "2023-05-11T04:53:22.000Z",
|
||||
"title": "2022-23 NHL Predictions",
|
||||
"url": "https://projects.fivethirtyeight.com/2023-nhl-predictions/"
|
||||
}
|
||||
@@ -114,7 +130,7 @@
|
||||
"displayName": "mlb-<span class=\"lastword\">elo</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-08T02:25:55.000Z",
|
||||
"date": "2023-05-11T02:35:49.000Z",
|
||||
"title": "2023 MLB Predictions",
|
||||
"url": "https://projects.fivethirtyeight.com/2023-mlb-predictions/"
|
||||
}
|
||||
@@ -124,22 +140,6 @@
|
||||
"https://projects.fivethirtyeight.com/mlb-api/mlb_elo_latest.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/congress-generic-ballot",
|
||||
"name": "congress-generic-ballot",
|
||||
"displayName": "congress-generic-<span class=\"lastword\">ballot</span>",
|
||||
"articles": [
|
||||
{
|
||||
"date": "2023-05-02T13:48:41.000Z",
|
||||
"title": "Do Voters Want Democrats Or Republicans In Congress?",
|
||||
"url": "https://projects.fivethirtyeight.com/congress-generic-ballot-polls/"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"https://projects.fivethirtyeight.com/generic-ballot-data/generic_polllist.csv",
|
||||
"https://projects.fivethirtyeight.com/polls/data/generic_ballot_averages.csv"
|
||||
]
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fivethirtyeight/data/tree/master/congress-demographics",
|
||||
"name": "congress-demographics",
|
||||
@@ -16,6 +16,7 @@
|
||||
"autoprefixer": "10.4.14",
|
||||
"eslint": "8.40.0",
|
||||
"eslint-config-next": "13.4.1",
|
||||
"flexsearch": "^0.7.31",
|
||||
"next": "13.4.1",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"next-seo": "^6.0.0",
|
||||
@@ -2610,6 +2611,11 @@
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
|
||||
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
|
||||
},
|
||||
"node_modules/flexsearch": {
|
||||
"version": "0.7.31",
|
||||
"resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.7.31.tgz",
|
||||
"integrity": "sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA=="
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@@ -17,6 +17,7 @@
|
||||
"autoprefixer": "10.4.14",
|
||||
"eslint": "8.40.0",
|
||||
"eslint-config-next": "13.4.1",
|
||||
"flexsearch": "^0.7.31",
|
||||
"next": "13.4.1",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"next-seo": "^6.0.0",
|
||||
96
examples/fivethirtyeight/pages/_document.tsx
Normal file
96
examples/fivethirtyeight/pages/_document.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { Html, Head, Main, NextScript } from 'next/document';
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<link
|
||||
rel="icon"
|
||||
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>
|
||||
<div className="px-2 max-w-5xl mx-auto pb-2">
|
||||
<div className="mt-2 px-2 bg-[#3c3c3c] text-white">
|
||||
<div className="p-2 text-center">
|
||||
This is a replica to the awesome{' '}
|
||||
<a
|
||||
className="hover:underline font-bold"
|
||||
href="https://data.fivethirtyeight.com"
|
||||
>
|
||||
data.fivethirtyeight.com
|
||||
</a>{' '}
|
||||
website.{' '}
|
||||
<a
|
||||
className="hover:underline font-bold"
|
||||
href="https://github.com/datopian/portaljs/tree/main/examples/fivethirtyeight"
|
||||
>
|
||||
Read more here
|
||||
</a>{' '}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<header className="max-w-5xl mx-auto mt-8 w-full">
|
||||
<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>
|
||||
<img
|
||||
width="197"
|
||||
height="25"
|
||||
alt="FiveThirtyEight"
|
||||
src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjEgNTMuNzYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDEwMTAxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgOTU8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGgyNXY4SDl2MTBoMTV2OEg5djE3SDBWMHpNMzEgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdIMzF6bTUtMzZoOHY4aC04ek0xNzkgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdoLTE3em01LTM2aDh2OGgtOHpNMzE2IDM2aDVWMThoLTV2LThoMTN2MjZoNHY3aC0xN3ptNS0zNmg4djhoLTh6TTU0IDI3VjEwaDh2MTVsNCA5Ljk4aDFMNzEgMjVWMTBoOHYxN2wtNyAxNkg2MWwtNy0xNnpNMTExIDQzSDk3LjQyQzg5LjIzIDQzIDg1IDM5LjE5IDg1IDMxLjE3VjIyYzAtNy41NyA0LjMtMTMgMTMtMTMgOS4zMyAwIDEzIDUuMDcgMTMgMTR2N0g5NHYxLjc0YzAgMi42MiAxIDQuMjYgMy40MiA0LjI2SDExMXpNOTQgMjNoOHYtMS41NWMwLTIuNjItMS4wNi01LjQ1LTQuMTMtNS40NS0yLjc5IDAtMy44NyAyLjItMy44NyA1LjQ1ek0xMjUgOGgtMTBWMGgyOXY4aC0xMHYzNWgtOVY4ek0yMDIgNDNWMTBoOHY0YzEuMTQtMi40NSAzLjc1LTQgNy4yMi00SDIyMHY4aC02Yy0yLjg0IDAtNCAuOTQtNCAzLjlWNDN6TTI0NSA0M2gtNC44NEMyMzMuMDUgNDMgMjMwIDM5LjMxIDIzMCAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0gyNDV6TTQyMSA0M2gtNC44NEM0MDkuMDUgNDMgNDA2IDM5LjMxIDQwNiAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0g0MjF6TTI1NC4yNiA1My43Nmw0LjYxLTkuNUwyNTEgMjdWMTBoOHYxNWw0IDEwaDFsNC0xMFYxMGg4djE3bC0xMi4zIDI2Ljc2aC05LjQ0ek0yODQgMGgyNXY4aC0xNnY5aDE1djhoLTE1djEwaDE2djhoLTI1VjB6TTMzNyA0OHYtMmgxNi4xYzIgMCAyLjktLjE4IDIuOS0xLjI3di0uMzRjMC0xLjA4LS45MS0xLjM5LTIuOS0xLjM5SDM0MHYtNWw1LTVjLTUuMjktMS40OC04LTUuNDMtOC0xMXYtMWMwLTcuNTYgNC40NC0xMiAxNC0xMmEyMS45MyAyMS45MyAwIDAgMSA1Ljk1IDFMMzYxIDRsNSAzLTQgNmMxLjM3IDEuOTMgMyA0LjkzIDMgOHYxYzAgNy0zLjMgMTAuNjYtMTIgMTFsLTMgNGg2YzUuOTIgMCA5IDIuNjIgOSA3LjY4di4xMWMwIDUuMDYtMi43MSA4LjIxLTguNjIgOC4yMWgtMTNjLTQuMjkgMC02LjM4LTEuODQtNi4zOC01em0xOS0yNXYtM2MwLTMuMy0xLjMzLTQtNS00cy01IC43LTUgNHYzYzAgMy4zIDEuMzkgNCA1IDRzNS0uNyA1LTR6TTM4MCA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuNC00IDctNCA2LjI2IDAgOSAzLjA4IDkgMTAuNzZWNDNoLThWMjJjMC0zLjEzLTEuMDctNS00LTVzLTQgMS44Ny00IDV6TTE1NyA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuOTEtNCA3LjQ5LTQgNi4yNiAwIDguNTEgMy4xMyA4LjUxIDEwLjgxVjQzaC04VjIxYzAtMy4xMy0xLjA3LTQuNDQtNC00LjQ0cy00IDIuMjYtNCA1LjM5eiIvPjwvc3ZnPg=="
|
||||
/>{' '}
|
||||
<span className="-mb-0.5 text-[#3c3c3c]">replica</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] md:hidden">
|
||||
<ul className="flex gap-x-4">
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
@@ -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'] });
|
||||
|
||||
@@ -20,34 +21,36 @@ export interface Dataset {
|
||||
files?: string[];
|
||||
}
|
||||
|
||||
// Request a weekday along with a long date
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
} as const;
|
||||
|
||||
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>
|
||||
<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>
|
||||
<span className="font-light text-base">
|
||||
{format(article.date)}
|
||||
{format(article.date).includes('years')
|
||||
? new Date(article.date).toLocaleString('en-US', options)
|
||||
: format(article.date)}
|
||||
</span>{' '}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col justify-start">
|
||||
<a
|
||||
className="border border-zinc-900 font-light px-4 py-1 text-sm transition hover:bg-zinc-900 hover:text-white"
|
||||
className="ml-2 border border-zinc-900 font-light px-4 py-1 text-sm transition hover:bg-zinc-900 hover:text-white"
|
||||
href={dataset.url}
|
||||
target="_blank"
|
||||
>
|
||||
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
|
||||
@@ -78,33 +81,29 @@ export function DesktopItem({ dataset }: { dataset: Dataset }) {
|
||||
index === dataset.articles.length - 1 ? 'border-b' : ''
|
||||
} border-zinc-400`}
|
||||
>
|
||||
<td className="py-8 font-light">{index === 0 ? dataset.name : ''}</td>
|
||||
<td className="py-8 font-light font-mono text-[13px] text-zinc-700">
|
||||
{index === 0 ? dataset.name : ''}
|
||||
</td>
|
||||
<td>
|
||||
<a className="py-8 font-bold hover:underline" href={article.url}>
|
||||
<a
|
||||
className="py-8 font-bold hover:underline pr-2"
|
||||
href={article.url}
|
||||
>
|
||||
{article.title}
|
||||
</a>
|
||||
</td>
|
||||
<td className="py-8 font-light text-base min-w-[120px]">
|
||||
{format(article.date)}
|
||||
</td>
|
||||
<td className="py-8">
|
||||
{index === 0 && (
|
||||
<a
|
||||
className="border border-zinc-900 font-light px-[25px] py-2.5 text-sm transition hover:bg-zinc-900 hover:text-white"
|
||||
href={dataset.url}
|
||||
target="_blank"
|
||||
>
|
||||
info
|
||||
</a>
|
||||
)}
|
||||
<td className="py-8 font-light text-[14px] min-w-[138px] font-mono text-[#999]">
|
||||
{format(article.date).includes('years')
|
||||
? new Date(article.date).toLocaleString('en-US', options)
|
||||
: format(article.date)}
|
||||
</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}`}
|
||||
href={dataset.url}
|
||||
>
|
||||
explore
|
||||
info
|
||||
</a>
|
||||
)}
|
||||
</td>
|
||||
@@ -143,6 +142,7 @@ export async function getStaticProps() {
|
||||
export default function Home({ datasets }: { datasets: Dataset[] }) {
|
||||
return (
|
||||
<>
|
||||
<NextSeo title="FiveThirtyEight tribute by PortalJS" />
|
||||
<main
|
||||
className={`flex min-h-screen flex-col items-center max-w-5xl mx-auto pt-20 px-2.5 ${inter.className}`}
|
||||
>
|
||||
@@ -150,7 +150,7 @@ export default function Home({ datasets }: { datasets: Dataset[] }) {
|
||||
<h1 className="text-[40px] font-bold text-zinc-800 text-center">
|
||||
Our Data
|
||||
</h1>
|
||||
<p className="max-w-2xl text-lg text-center text-zinc-700">
|
||||
<p className="max-w-[600px] text-[17px] text-center text-[#6d6f71]">
|
||||
We’re sharing the data and code behind some of our articles and
|
||||
graphics. We hope you’ll use it to check our work and to create
|
||||
stories and visualizations of your own.
|
||||
@@ -164,13 +164,13 @@ export default function Home({ datasets }: { datasets: Dataset[] }) {
|
||||
<table className="w-full mt-10 mb-4 hidden md:table">
|
||||
<thead className="border-b-4 pb-2 border-zinc-900">
|
||||
<tr>
|
||||
<th className="uppercase text-left font-light text-xs pb-3">
|
||||
<th className="uppercase text-left font-normal text-xs pb-3">
|
||||
data set
|
||||
</th>
|
||||
<th className="uppercase text-left font-light text-xs pb-3">
|
||||
<th className="uppercase text-left font-normal text-xs pb-3">
|
||||
related content
|
||||
</th>
|
||||
<th className="uppercase text-left font-light text-xs pb-3">
|
||||
<th className="uppercase text-left font-normal text-xs pb-3">
|
||||
last updated
|
||||
</th>
|
||||
</tr>
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
BIN
examples/fivethirtyeight/public/share_image.png
Normal file
BIN
examples/fivethirtyeight/public/share_image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 629 B After Width: | Height: | Size: 629 B |
@@ -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>
|
||||
@@ -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">
|
||||
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 566 B |
@@ -161,13 +161,14 @@ export default function Layout({
|
||||
>
|
||||
Built by{' '}
|
||||
<img
|
||||
src={
|
||||
theme === 'dark'
|
||||
? '/images/datopian-light-logotype.svg'
|
||||
: '/images/datopian-dark-logotype.svg'
|
||||
}
|
||||
src="/images/datopian-light-logotype.svg"
|
||||
alt="Datopian Logo"
|
||||
className="h-6 ml-2"
|
||||
className="h-6 ml-2 hidden dark:block"
|
||||
/>
|
||||
<img
|
||||
src="/images/datopian-dark-logotype.svg"
|
||||
alt="Datopian Logo"
|
||||
className="h-6 ml-2 dark:hidden"
|
||||
/>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user