[DRAFT - experimental] Migrate from next12 pages to next13 app dir

app/about/layout.js

@@ -0,0 +1,11 @@
+import Navbar from '../../components/Navbar';
+import '../../styles/globals.css';
+
+export default async function Layout({ children }) {
+  return (
+    <div className='container' data-template='AboutPage'>
+      <Navbar />
+      {children}
+    </div>
+  );
+}

pages/about.js → app/about/page.js

@@ -1,26 +1,23 @@
+import AboutSection from '../../components/AboutSection';
+import content from '../../content';
 
-import AboutSection from '../components/AboutSection'
-import content from '../content'
-
-const AboutPage = () => {
+const About = () => {
   const aboutSection = (section, index) => (
     <>
       <AboutSection side={index % 2 === 0 ? 'left' : 'right'} {...section} />
     </>
-  )
+  );
 
   return (
     <main className='page' data-template='about'>
       {content.about.sections.map(aboutSection)}
       <section className='about-credits'>
-        <div className='about-credits__wrapper'>
-          {content.about.credits}
-        </div>
+        <div className='about-credits__wrapper'>{content.about.credits}</div>
       </section>
     </main>
-  )
-}
+  );
+};
 
-AboutPage.displayName = 'AboutPage'
+About.displayName = 'AboutPage';
 
-export default AboutPage
+export default About;

app/dashboard/layout.js

@@ -0,0 +1,11 @@
+import Navbar from '../../components/Navbar';
+import '../../styles/globals.css';
+
+export default async function Layout({ children }) {
+  return (
+    <div id='IndexPage' data-template='IndexPage' className='container'>
+      <Navbar />
+      {children}
+    </div>
+  );
+}

app/dashboard/page.js

@@ -0,0 +1,58 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import Databar from '../../components/Databar';
+import DataRangePicker from '../../components/DataRangePicker';
+import TitleText from '../../components/TitleText';
+import SvgVisualization from '../../components/SvgVisualization';
+import Tooltip from '../../components/Tooltip';
+
+import { useSample } from '../../hooks/useSamples';
+import { useDataContext } from '../../providers/DataProvider';
+
+const Dashboard = () => {
+  const { samples, sources, units } = useDataContext();
+
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [tooltipSlug, setTooltipSlug] = useState();
+
+  const [sample, range, timestamp, setTimestamp] = useSample(samples);
+  const [showBanner, setShowBanner] = useState(true);
+
+  const hideBanner = () => setShowBanner(false);
+
+  const openTooltip = (slug) => {
+    setTooltipSlug(slug);
+    setTooltipOpen(true);
+  };
+  const closeTooltip = () => setTooltipOpen(false);
+
+  return (
+    <main className='page' data-template='index' data-show-banner={showBanner}>
+      <Tooltip
+        open={tooltipOpen}
+        slug={tooltipSlug}
+        sample={sample}
+        closeTooltip={closeTooltip}
+        sources={sources}
+        units={units}
+      />
+      <TitleText
+        timestamp={timestamp}
+        sample={sample}
+        showBanner={showBanner}
+        onClick={hideBanner}
+      />
+      <DataRangePicker
+        setTimestamp={setTimestamp}
+        timestamp={timestamp}
+        range={range}
+      />
+      <Databar openTooltip={openTooltip} sample={sample} />
+      <SvgVisualization sample={sample} />
+    </main>
+  );
+};
+
+export default Dashboard;

app/data/layout.js

@@ -0,0 +1,11 @@
+import Navbar from '../../components/Navbar';
+import '../../styles/globals.css';
+
+export default async function Layout({ children }) {
+  return (
+    <div className='container' data-template='DataPage'>
+      <Navbar />
+      {children}
+    </div>
+  );
+}

app/data/page.js

@@ -0,0 +1,39 @@
+'use client';
+
+import React, { useState, useContext } from 'react';
+import Graphs from '../../components/Graphs';
+import Tooltip from '../../components/Tooltip';
+import { DataContext } from '../../providers/DataProvider';
+
+const Data = () => {
+  const { samples, sources, units } = useContext(DataContext);
+
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [tooltipSlug, setTooltipSlug] = useState(null);
+
+  const openTooltip = (slug) => {
+    setTooltipSlug(slug);
+    setTooltipOpen(true);
+  };
+
+  const closeTooltip = () => setTooltipOpen(false);
+
+  return (
+    <main className='page' data-template='data'>
+      <Tooltip
+        open={tooltipOpen}
+        slug={tooltipSlug}
+        closeTooltip={closeTooltip}
+        sources={sources}
+        units={units}
+      />
+      <div className='page__body'>
+        <Graphs openTooltip={openTooltip} samples={samples} units={units} />
+      </div>
+    </main>
+  );
+};
+
+Data.displayName = 'Data';
+
+export default Data;

app/head.js

@@ -0,0 +1,28 @@
+import content from '../content/index.js';
+
+export default function Head() {
+  return (
+    <>
+      <title>{content.social.title}</title>
+      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+      <link rel='shortcut icon' href='/static/favicon.ico' />
+      <link rel='icon' href='/static/favicon.ico' />
+
+      <meta property='og:type' content='website' />
+      <meta property='og:url' content={content.social.url} />
+      <meta property='og:title' content={content.social.title} />
+      <meta property='og:description' content={content.social.description} />
+      <meta property='og:image' content={content.social.imageUrl} />
+
+      {/* Twitter meta tags */}
+      <meta property='twitter:card' content='summary_large_image' />
+      <meta property='twitter:url' content={content.social.url} />
+      <meta property='twitter:title' content={content.social.title} />
+      <meta
+        property='twitter:description'
+        content={content.social.description}
+      />
+      <meta property='twitter:image' content={content.social.imageUrl} />
+    </>
+  );
+}

app/layout.js

@@ -0,0 +1,38 @@
+import { GA_TRACKING_ID } from '../helpers/constants';
+import Script from 'next/script';
+
+import DataContextProvider from '../providers/DataProvider';
+import { getData } from '../helpers/dataLoader';
+
+import '../styles/globals.css';
+
+const GoogleAnalytics = () => (
+  <>
+    <Script
+      async
+      src='https://www.googletagmanager.com/gtag/js?id=UA-17668746-5'
+      strategy='afterInteractive'
+    />
+    <Script id='google-analytics' strategy='afterInteractive'>
+      {`
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${GA_TRACKING_ID}');
+    `}
+    </Script>
+  </>
+);
+
+export default async function RootLayout({ children }) {
+  let data = await getData();
+  return (
+    <html>
+      <GoogleAnalytics />
+      <head />
+      <body>
+        <DataContextProvider data={data}>{children}</DataContextProvider>
+      </body>
+    </html>
+  );
+}

app/loading.js

@@ -0,0 +1,11 @@
+import ProgressBar from '../components/ProgressBar';
+import Navbar from '../components/Navbar';
+
+export default function Loading() {
+  return (
+    <div>
+      <Navbar />
+      <ProgressBar />
+    </div>
+  );
+}

app/page.js

@@ -0,0 +1,7 @@
+import { redirect } from 'next/navigation';
+
+const Index = () => {
+  redirect('/dashboard');
+};
+
+export default Index;

components/Carousel/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import {
   CarouselProvider,

components/DataDisclaimer/DataDisclaimer.module.css

@@ -0,0 +1,16 @@
+.container {
+    text-align: center;
+    flex-grow: 1;
+    width: 100%;
+    margin-top: 20px;
+}
+
+@media (max-width: 600px) {
+    .container {
+        font-size: 14px;
+    }
+}
+
+.note {
+    display: inline;
+}

components/DataDisclaimer/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './DataDisclaimer.module.css';
+import { DATA_DISCLAIMER } from '../../helpers/constants';
+
+const DataDisclaimer = () => {
+  return (
+    <div className={styles.container}>
+      <p role="note" className={styles.note}>{DATA_DISCLAIMER}</p>
+    </div>
+  )
+}
+
+export default DataDisclaimer;