[example/538] - fix typo

[examples/538][m] - changes after ola comments
[examples/538] - change banner background
2023-05-15 12:36:02 -03:00 · 2023-05-15 12:32:56 -03:00 · 2023-05-15 12:16:05 -03:00 · 2023-05-15 10:22:47 -03:00 · 2023-05-12 14:50:31 -03:00 · 2023-05-12 14:25:02 -03:00
4 changed files with 49 additions and 18 deletions
--- a/examples/fivethirtyeight/README.md
+++ b/examples/fivethirtyeight/README.md
@@ -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

--- a/examples/fivethirtyeight/pages/_document.tsx
+++ b/examples/fivethirtyeight/pages/_document.tsx
@@ -9,10 +9,36 @@ 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" />
+        <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">
@@ -23,18 +49,16 @@ export default function Document() {
                alt="FiveThirtyEight"
                src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjEgNTMuNzYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDEwMTAxO308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgOTU8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGgyNXY4SDl2MTBoMTV2OEg5djE3SDBWMHpNMzEgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdIMzF6bTUtMzZoOHY4aC04ek0xNzkgMzZoNVYxOGgtNXYtOGgxM3YyNmg0djdoLTE3em01LTM2aDh2OGgtOHpNMzE2IDM2aDVWMThoLTV2LThoMTN2MjZoNHY3aC0xN3ptNS0zNmg4djhoLTh6TTU0IDI3VjEwaDh2MTVsNCA5Ljk4aDFMNzEgMjVWMTBoOHYxN2wtNyAxNkg2MWwtNy0xNnpNMTExIDQzSDk3LjQyQzg5LjIzIDQzIDg1IDM5LjE5IDg1IDMxLjE3VjIyYzAtNy41NyA0LjMtMTMgMTMtMTMgOS4zMyAwIDEzIDUuMDcgMTMgMTR2N0g5NHYxLjc0YzAgMi42MiAxIDQuMjYgMy40MiA0LjI2SDExMXpNOTQgMjNoOHYtMS41NWMwLTIuNjItMS4wNi01LjQ1LTQuMTMtNS40NS0yLjc5IDAtMy44NyAyLjItMy44NyA1LjQ1ek0xMjUgOGgtMTBWMGgyOXY4aC0xMHYzNWgtOVY4ek0yMDIgNDNWMTBoOHY0YzEuMTQtMi40NSAzLjc1LTQgNy4yMi00SDIyMHY4aC02Yy0yLjg0IDAtNCAuOTQtNCAzLjlWNDN6TTI0NSA0M2gtNC44NEMyMzMuMDUgNDMgMjMwIDM5LjMxIDIzMCAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0gyNDV6TTQyMSA0M2gtNC44NEM0MDkuMDUgNDMgNDA2IDM5LjMxIDQwNiAzMS44NVYxOGgtNnYtOGg2VjNoOHY3aDd2OGgtN2wtLjA3IDEzLjkzYzAgMi4yMi45MyA0LjA3IDMuNjYgNC4wN0g0MjF6TTI1NC4yNiA1My43Nmw0LjYxLTkuNUwyNTEgMjdWMTBoOHYxNWw0IDEwaDFsNC0xMFYxMGg4djE3bC0xMi4zIDI2Ljc2aC05LjQ0ek0yODQgMGgyNXY4aC0xNnY5aDE1djhoLTE1djEwaDE2djhoLTI1VjB6TTMzNyA0OHYtMmgxNi4xYzIgMCAyLjktLjE4IDIuOS0xLjI3di0uMzRjMC0xLjA4LS45MS0xLjM5LTIuOS0xLjM5SDM0MHYtNWw1LTVjLTUuMjktMS40OC04LTUuNDMtOC0xMXYtMWMwLTcuNTYgNC40NC0xMiAxNC0xMmEyMS45MyAyMS45MyAwIDAgMSA1Ljk1IDFMMzYxIDRsNSAzLTQgNmMxLjM3IDEuOTMgMyA0LjkzIDMgOHYxYzAgNy0zLjMgMTAuNjYtMTIgMTFsLTMgNGg2YzUuOTIgMCA5IDIuNjIgOSA3LjY4di4xMWMwIDUuMDYtMi43MSA4LjIxLTguNjIgOC4yMWgtMTNjLTQuMjkgMC02LjM4LTEuODQtNi4zOC01em0xOS0yNXYtM2MwLTMuMy0xLjMzLTQtNS00cy01IC43LTUgNHYzYzAgMy4zIDEuMzkgNCA1IDRzNS0uNyA1LTR6TTM4MCA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuNC00IDctNCA2LjI2IDAgOSAzLjA4IDkgMTAuNzZWNDNoLThWMjJjMC0zLjEzLTEuMDctNS00LTVzLTQgMS44Ny00IDV6TTE1NyA0M2gtOFYwaDh2MTRjMS4xNC0yLjY3IDMuOTEtNCA3LjQ5LTQgNi4yNiAwIDguNTEgMy4xMyA4LjUxIDEwLjgxVjQzaC04VjIxYzAtMy4xMy0xLjA3LTQuNDQtNC00LjQ0cy00IDIuMjYtNCA1LjM5eiIvPjwvc3ZnPg=="
              />{' '}
-              <span className="-mb-0.5 text-[#3c3c3c]">
-                tribute by PortalJS
-              </span>
+              <span className="-mb-0.5 text-[#3c3c3c]">replica</span>
            </h1>
-            <div className='md:flex items-center gap-x-3 text-[#3c3c3c] -mb-1 hidden'>
+            <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>
+              <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"
--- a/examples/fivethirtyeight/pages/index.tsx
+++ b/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,9 +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">
-            {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>
@@ -83,7 +82,7 @@ export function DesktopItem({ dataset }: { dataset: Dataset }) {
          } border-zinc-400`}
        >
          <td className="py-8 font-light font-mono text-[13px] text-zinc-700">
-              {index === 0 ? dataset.name : ''}
+            {index === 0 ? dataset.name : ''}
          </td>
          <td>
            <a
@@ -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}`}
      >
--- a/site/components/Layout.tsx
+++ b/site/components/Layout.tsx
@@ -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>
Author	SHA1	Message	Date
Luccas Mateus de Medeiros Gomes	f76ab6fe43	[example/538] - fix typo	2023-05-15 12:36:02 -03:00
Luccas Mateus de Medeiros Gomes	e011d6cbf7	[examples/538][m] - changes after ola comments	2023-05-15 12:32:56 -03:00
Luccas Mateus de Medeiros Gomes	915d260c2f	[examples/538] - change banner background	2023-05-15 12:16:05 -03:00
Luccas Mateus de Medeiros Gomes	c756d73e33	[examples/538][xs] - change banner position + text + change README	2023-05-15 10:22:47 -03:00
Luccas Mateus	1af24ef57e	538 banner (#873 ) * [example/538] - banner * [example/538] - title on head	2023-05-12 14:50:31 -03:00
Luccas Mateus de Medeiros Gomes	698c06efda	[site][xs] - fix logo on dark mode	2023-05-12 14:25:02 -03:00