WIP date landing page

.gitmodules

@@ -1,6 +1,3 @@
-[submodule "data"]
-	path = data
-	url = https://github.com/co2birthdate/dataops.git
 [submodule "dataops"]
 	path = dataops
 	url = https://github.com/co2birthdate/dataops.git

README.md

@@ -7,7 +7,9 @@
 ## About this project
 
 This is the respository where CO2Birthdate's website lives.  
-HTML, CSS, and JS powered documents, generated using Python.
+The website lets you know the difference of atmospheric carbon dioxide (CO₂) measurement on date of your birth and nowadays.
+
+## Developer's notes
 
 Once you've forked/cloned/downloaded/etc the repository, install project dependencies with
 ```
@@ -19,3 +21,9 @@ npm run dev
 ```
 which will get a localhost up and running for development.  
 Navigate to localhost:3000 in your browser of choice to see it in action/develop in the browser.
+
+To preview the website as static resources
+```
+npm export
+npm start
+```

assets/jss/styles.js

@@ -20,6 +20,13 @@ const CssStyles = () => {
         minHeight: '100vh',
       },
 
+      'main > h1': {
+        textAlign: 'center',
+        [theme.breakpoints.up('sm')]: {
+          textAlign: 'left',
+        },
+      },
+
       'main > section': {
         paddingBottom: theme.spacing(3),
         textAlign: 'center',

components/shield.js

@@ -0,0 +1,52 @@
+const Shield = ({ birthvalue, currentvalue, percentchange }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="427"
+    height="20"
+    role="img"
+    aria-label={`born ${birthvalue} ppm CO₂: today we are ${percentchange}% higher`}
+  >
+    <title>CO₂ birthdate: {birthvalue} ppm: today we are {percentchange}% higher</title>
+    <linearGradient id="s" x2="0" y2="100%">
+      <stop offset="0" stopColor="#bbb" stopOpacity=".1" />
+      <stop offset="1" stopOpacity=".1" />
+    </linearGradient>
+    <clipPath id="r">
+      <rect width="427" height="20" rx="3" fill="#fff" />
+    </clipPath>
+    <g clipPath="url(#r)">
+      <rect width="125" height="20" fill="#555" />
+      <rect x="125" width="151" height="20" fill="#97ca00" />
+      <rect x="275" width="151" height="20" fill="#555" />
+      <rect width="427" height="20" fill="url(#s)" />
+    </g>
+    <g
+      fill="#fff"
+      textAnchor="middle"
+      fontFamily="Verdana,Geneva,DejaVu Sans,sans-serif"
+      textRendering="geometricPrecision"
+      fontSize="110"
+    >
+      <text aria-hidden="true" x="635" y="150" fill="#010101" fillOpacity=".3" transform="scale(.1)" textLength="1150">
+        Born at {birthvalue} ppm CO₂
+      </text>
+      <text x="635" y="140" transform="scale(.1)" fill="#fff" textLength="1150">
+        Born at {birthvalue} ppm CO₂
+      </text>
+      <text aria-hidden="true" x="1995" y="150" fill="#010101" fillOpacity=".3" transform="scale(.1)" textLength="1410">
+        We are {percentchange}% higher
+      </text>
+      <text x="1995" y="140" transform="scale(.1)" fill="#fff" textLength="1410">
+        We are {percentchange}% higher
+      </text>
+      <text aria-hidden="true" x="3490" y="150" fill="#010101" fillOpacity=".3" transform="scale(.1)" textLength="1440">
+        Current: {currentvalue} ppm CO₂
+      </text>
+      <text x="3490" y="140" transform="scale(.1)" fill="#fff" textLength="1440">
+        Most recent: {currentvalue} ppm CO₂
+      </text>
+    </g>
+  </svg>
+)
+
+export default Shield

lib/api.js

@@ -1,8 +1,8 @@
 import { parse, isEqual } from 'date-fns'
 import { DATE_FORMAT } from './constants'
 
-import co2Data from '../data/co2.json'
-import latestCo2Data from '../data/latest.json'
+import co2Data from '../dataops/output_data/co2.json'
+import latestCo2Data from '../dataops/output_data/latest.json'
 
 export const getCo2Dates = async () => co2Data
 

package.json

@@ -3,13 +3,15 @@
   "version": "1.0.0",
   "private": true,
   "license": "LICENSE",
+  "engines": {
+    "node": ">=14"
+  },
   "scripts": {
+    "start": "serve -l 3000 out",
     "clean": "rimraf out/ .next/ node_modules/.cache",
     "build": "next build",
     "export": "next export && echo > out/.nojekyll",
-    "prestart": "run-s clean build export",
-    "start": "serve -l 3000 out",
-    "predeploy": "run-s prestart",
+    "preexport": "run-s clean build",
     "deploy": "git add out/ && git commit -m \"Deploy to gh-pages\" && git subtree push --prefix out origin gh-pages",
     "dev": "next",
     "test": "echo 'Error: no test specified'"

pages/co2/[date].js

@@ -1,21 +1,109 @@
-import Head from 'next/head'
+import Box from '@material-ui/core/Box'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemText from '@material-ui/core/ListItemText'
+import Typography from '@material-ui/core/Typography'
 import { parse, format } from 'date-fns'
 
 import Layout from '../../layouts/layout'
+import Shield from '../../components/shield'
 import { getCo2ByDate, getCo2Dates } from '../../lib/api'
-import { DATE_FORMAT, DEFAULT_DATE } from '../../lib/constants'
+import { DATE_FORMAT, DEFAULT_DATE, WEBSITE_URL } from '../../lib/constants'
 
 const CO2Page = ({ date, ppm, difference, latest }) => (
   <>
-    <Head>
-      <meta name="robots" content="noindex" />
-    </Head>
-
-    <Layout title={`CO₂ on ${date}`}>
-      <p>Date: <time dateTime={date}>{date}</time></p>
-      <p>On this date: <b>{ppm}</b> ppm CO<sub>2</sub></p>
-      <p>Most recent measurement: <b>{latest.ppm}</b> ppm CO<sub>2</sub> on <time dateTime={latest.date}>{latest.date}</time></p>
-      <p>That's a change of <b>{(difference > 0) && '+'}{difference}</b>%</p>
+    <Layout
+      title={`CO₂ Birthdate for ${date}`}
+      meta={[
+        { name: 'description', content: 'Get know the atmospheric carbon dioxide (CO₂) measurement on date of your birth and nowadays.' },
+        { property: 'og:type', content: 'website' },
+        { property: 'og:url', content: `${WEBSITE_URL}/co2/${date}` },
+        { property: 'og:image', content: `${WEBSITE_URL}/img/co2birthdate-logo-x512.png` },
+        { property: 'og:title', content: `CO₂ Birthdate for ${date}` },
+        { property: 'og:description', content: `CO₂ Birthdate for ${date} shows the amount of CO₂ in the atmosphere on ${date}, the amount of CO₂ in the atmosphere today, and the amount of CO₂ added to the atmosphere since this ${date}` },
+      ]}
+    >
+      <Typography component="h1" variant="h3" gutterBottom>
+        <time dateTime={date}>{date}</time>&nbsp;
+        CO<sub>2</sub> Birthdate!
+      </Typography>
+
+      <Box component="section" my={3}>
+        <List>
+          <ListItem>
+            <Box pr={2}>
+              <Typography component="span" variant="h5">
+                {ppm}
+              </Typography>
+            </Box>
+            <ListItemText
+              primary={<>ppm CO<sub>2</sub></>}
+              secondary={'on this date'}
+            />
+          </ListItem>
+
+          <ListItem>
+            <Box pr={2}>
+              <Typography component="span" variant="h5">
+                {latest.ppm}
+              </Typography>
+            </Box>
+            <ListItemText
+              primary={<>ppm CO<sub>2</sub></>}
+              secondary={'most recent measurement'}
+            />
+          </ListItem>
+
+          <ListItem>
+            <Box pr={2}>
+              <span>{(difference > 0) && '+'}</span>
+              <Typography component="span" variant="h5">
+                {difference}
+              </Typography>
+              <span>%</span>
+            </Box>
+            <ListItemText>
+              that's a change
+            </ListItemText>
+          </ListItem>
+        </List>
+
+        <Typography variant="h5">
+          Get your shield!
+        </Typography>
+        <Typography>
+          Right click to copy URL
+        </Typography>
+
+        <Box my={2}>
+          <Shield
+            birthvalue={ppm}
+            currentvalue={latest.ppm}
+            percentchange={difference}
+          />
+        </Box>
+
+        <Box my={1}>
+          <Typography variant="h5">
+            HTML
+          </Typography>
+          <textarea defaultValue="HTML code" />
+        </Box>
+
+        <Box my={1}>
+          <Typography variant="h5">
+            Markdown
+          </Typography>
+          <textarea defaultValue="Markdown" />
+        </Box>
+
+        <Box my={1}>
+          <Typography variant="h5">
+            Share on social media!
+          </Typography>
+          tw fb in link
+        </Box>
+      </Box>
     </Layout>
   </>
 )