V1 render db upgrade

.env.example

@@ -0,0 +1,4 @@
+DATABASE_URL=""
+FATHOM=""
+NOTION_TOKEN=
+NOTION_DATABASE_ID=

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+yarn.lock
 /node_modules
 /.pnp
 .pnp.js
@@ -19,14 +20,18 @@
 .DS_Store
 *.pem
 
+# ide
+.idea
+
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-yarn.lock
 
 # local env files
+.env
 .env.local
+.env.build
 .env.development.local
 .env.test.local
 .env.production.local

FUNDING.yml

@@ -1 +1,2 @@
-github: [gndclouds, satyak450]
+github: [gndclouds]
+custom: ["https://gitcoin.co/grants/7807/earth-api"]

components/footer.js

@@ -6,61 +6,56 @@ import CCLogo from "../public/ccLogo.png";
 
 const FooterLinks = [
   {
-    title: "Data Sources",
+    title: "Company",
     links: [
       {
-        name: "CO₂ Data",
-        href: "https://github.com/Anthropogenic/earth.api/tree/main/data",
+        name: "Blog",
+        href: "https://blog.hge.earth",
         fathomEventCode: "",
       },
       {
-        name: "N₂0 Data",
-        href: "https://github.com/Anthropogenic/earth.api/tree/main/data",
+        name: "Analytics",
+        href: "https://app.usefathom.com/share/cysaygvg/earth+api",
         fathomEventCode: "",
       },
       {
-        name: "SF₆ Data",
-        href: "https://github.com/Anthropogenic/earth.api/tree/main/data",
+        name: "Status",
+        href: "https://status.hge.earth",
         fathomEventCode: "",
       },
       {
-        name: "CH₄ Data",
-        href: "https://github.com/Anthropogenic/earth.api/tree/main/data",
+        name: "Anthropogenic",
+        href: "https://status.hge.earth",
         fathomEventCode: "",
       },
     ],
   },
   {
-    title: "Open Source",
+    title: "Community",
     links: [
       {
         name: "Contribute",
         href: "https://github.com/Anthropogenic/earth.api",
         fathomEventCode: "",
       },
       {
-        name: "Github",
-        href: "https://github.com/Anthropogenic/earth.api",
+        name: "Discord",
+        href: "https://discord.gg/a7HjzV9FS4",
         fathomEventCode: "",
       },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
       {
-        name: "Blog",
-        href: "https://blog.anthropogenic.com",
+        name: "Github",
+        href: "https://github.com/Anthropogenic/earth.api",
         fathomEventCode: "",
       },
       {
-        name: "Analytics",
-        href: "https://app.usefathom.com/share/cysaygvg/earth+api",
+        name: "Sponsor",
+        href: "https://github.com/sponsors/Anthropogenic",
         fathomEventCode: "",
       },
       {
-        name: "Status",
-        href: "https://status.hge.earth",
+        name: "Gitcoin Grant",
+        href: "https://gitcoin.co/grants/7807/earth-api",
         fathomEventCode: "",
       },
     ],

lib/prisma.ts

@@ -0,0 +1,15 @@
+// lib/prisma.ts
+import { PrismaClient } from "@prisma/client";
+
+let prisma: PrismaClient;
+
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient();
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient();
+  }
+  prisma = global.prisma;
+}
+
+export default prisma;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -9,13 +9,15 @@
   "dependencies": {
     "@headlessui/react": "^1.6.0",
     "@heroicons/react": "^1.0.6",
+    "@prisma/client": "^4.1.1",
     "@sentry/nextjs": "^7.7.0",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.1",
     "@tailwindcss/typography": "^0.5.2",
     "fathom-client": "^3.4.1",
     "highlight.js": "^11.5.1",
     "next": "^12.1.5",
+    "prisma": "^4.1.1",
     "react": "^17.0.2",
     "react-code-blocks": "^0.0.9-0",
     "react-dom": "^17.0.2",
@@ -24,12 +26,15 @@
     "swr": "^1.0.1"
   },
   "devDependencies": {
+    "@types/node": "^18.7.18",
     "autoprefixer": "^10.4.4",
     "eslint": "8.12.0",
     "eslint-config-next": "12.1.4",
     "lru-cache": "^7.7.1",
     "postcss": "^8.4.12",
+    "prisma": "^4.1.1",
     "tailwindcss": "^3.0.23",
+    "typescript": "^4.8.3",
     "uuid": "^8.3.2"
   }
 }

pages/ch4 2/[id].js

@@ -0,0 +1,68 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import Image from "next/image";
+import useSWR from "swr";
+import Layout from "../../components/layout";
+import { Button, BreakCrumbButton } from "../../components/button";
+import { EmissionsSummary } from "../../components/emissionsPage";
+
+import co2HeroImage from "../../public/assets/emissions/co2@2x.png";
+
+const fetcher = async (url) => {
+  const res = await fetch(url);
+  const data = await res.json();
+
+  if (res.status !== 200) {
+    throw new Error(data.message);
+  }
+  return data;
+};
+
+export default function EmissionsCh4() {
+  const { query, asPath, pathname } = useRouter();
+  const APIPath = "/api/" + asPath.substring(1);
+
+  const { data, error } = useSWR(
+    () => query.id && `/api/ch4/${query.id}`,
+    fetcher
+  );
+
+  if (error) return <Layout>{error.message}</Layout>;
+  if (!data)
+    return (
+      <Layout>
+        <button type="button" className="bg-indigo-500 ..." disabled>
+          <svg
+            className="animate-spin h-5 w-5 mr-3 ..."
+            viewBox="0 0 24 24"
+          ></svg>
+          Loading...
+        </button>
+      </Layout>
+    );
+
+  return (
+    <Layout>
+      <div className="font-mono">
+        <div className="pb-4 uppercase">
+          <BreakCrumbButton text="CH₄" href="/ch4" />
+        </div>
+        {/* FIX: @gndclouds Make this a component */}
+
+        <EmissionsSummary
+          image={co2HeroImage}
+          measurement={data.measurement}
+          unit={data.unit}
+          date={data.year + "-" + data.month}
+          tdate={data.year + "-" + data.month}
+          tmean={data.trend}
+          tunc={data.unc}
+          ttrendunc={data.trend_unc}
+          terror="tbd"
+          tsource="NOAA"
+          apiHref={APIPath}
+        />
+      </div>
+    </Layout>
+  );
+}

pages/ch4 2/index.js

@@ -0,0 +1,58 @@
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import Layout from "../../components/layout";
+import RequestAccess from "../../components/request";
+import { PageHero, EmissionsTable } from "../../components/emissionsPage";
+import DataTableTabs from "../../components/tables";
+
+import Co2HeroImage from "../../public/assets/emissions/ch4Banner.png";
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+export default function Index() {
+  const { data, error } = useSWR("/api/ch4/monthly", fetcher);
+  const { asPath } = useRouter();
+  const DataRouteURL = asPath.substring(1);
+
+  if (error) return <div>Failed to load</div>;
+  if (!data) return <div>Loading...</div>;
+
+  return (
+    <Layout>
+      <div className="bg-[#17253D] p-9">
+        <PageHero
+          title="CH₄"
+          description="Methane is a chemical compound with the chemical formula CH₄. It is a group-14 hydride, the simplest alkane, and the main constituent of natural gas. The relative abundance of methane on Earth makes it an economically attractive fuel, although capturing and storing it poses technical challenges due to its gaseous state under normal conditions for temperature and pressure. ~ Wikipedia"
+          type="Emissions Data"
+          image={Co2HeroImage}
+          color="bg-[#DF775E]"
+        />
+      </div>
+      <div className="flex bg-[#17253D] p-9">
+        <div className="w-full">
+          <div className="mt-8 flex flex-col">
+            <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+              <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                  <EmissionsTable
+                    key={data}
+                    data={data}
+                    source={data.source}
+                    apiHref={DataRouteURL}
+                    ftpHref={DataRouteURL}
+                    childHref={DataRouteURL}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex">
+        <RequestAccess />
+      </div>
+    </Layout>
+  );
+}

pages/ch4 2/monthly.js

@@ -0,0 +1,65 @@
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import Layout from "../../components/layout";
+import RequestAccess from "../../components/request";
+import { PageHero, EmissionsTable } from "../../components/emissionsPage";
+import DataTableTabs from "../../components/tables";
+
+import Co2HeroImage from "../../public/assets/emissions/co2Banner.png";
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+export default function Index() {
+  const { data, error } = useSWR("/api/ch4/monthly", fetcher);
+  const { asPath } = useRouter();
+  const DataRouteURL = asPath.substring(1);
+
+  if (error) return <div>Failed to load</div>;
+  if (!data) return <div>Loading...</div>;
+
+  return (
+    <Layout>
+      <div className="bg-[#17253D] p-9">
+        <PageHero
+          title="CH₄"
+          description="Methane is a chemical compound with the chemical formula CH₄. It is a group-14 hydride, the simplest alkane, and the main constituent of natural gas. The relative abundance of methane on Earth makes it an economically attractive fuel, although capturing and storing it poses technical challenges due to its gaseous state under normal conditions for temperature and pressure. ~ Wikipedia"
+          type="Emissions Data"
+          image={Co2HeroImage}
+          color="bg-[#DF775E]"
+        />
+      </div>
+      <div className="flex bg-[#17253D] p-9">
+        <div className="w-full">
+          <div className="mt-8 flex flex-col">
+            <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+              <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                <DataTableTabs
+                  YearHref="/ch4/yearly"
+                  MonthHref="/ch4/monthly"
+                  WeekHref=""
+                  DayHref=""
+                />
+
+                <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                  <EmissionsTable
+                    key={data}
+                    data={data}
+                    source={data.source}
+                    apiHref={DataRouteURL}
+                    ftpHref={DataRouteURL}
+                    childHref={DataRouteURL}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex">
+        <RequestAccess />
+      </div>
+    </Layout>
+  );
+}