chore: add rone site to examples

.env.example

@@ -1,20 +1,11 @@
-AIRTABLE_API_KEY=your_api_key_here
-BASE_ID=base_id_here
-# table id also works. must be between quotation marks (" ") if the name is more than one word
-TABLE_ID="Table ID here"
-# name or id of view (optional). must be between quotation marks (" ") if the name is more than one word
-VIEW="Grid view here"
-# Determines the order in which fields will be displayed on the page for an individual row.
-# If a field isn't contained in this variable, it will not be displayed at all.
-FIELD_ORDER="Field1,Field2,Etc,Here"
-# Determines the order in which fields will be displayed for each row on the homepage.
-# If a field isn't contained in this variable, it will not be displayed at all.
-HOMEPAGE_FIELD_ORDER="Field1,Field2,Etc,Here"
-# title for header that will appear at the top of each page
-HEADER_TITLE="Header Title"
-# title for the website, which will be displayed in the browser tab
-PAGE_TITLE_FIELD="Name"
-# any fields listed here will be rendered in markdown if possible
-SITE_TITLE="Site Title"
-# if present, values from this column of your table will be used to populate the page title in the form `Page Title – Site Title`
-MARKDOWN_FIELDS="Field1,Field2,Etc,Here"
+AIRTABLE_API_KEY="keyacWNmaPG1VwR7Z"
+BASE_ID="app6nKJvmX9gT0ENu"
+TABLE_ID="tbl0vTn0brhpL6k9g"
+VIEW="viwsti0b5uIN76xTu"
+HOMEPAGE_FIELD_ORDER="LedeImage,Category,Name,Dek,Author"
+FIELD_ORDER="LedeImage,Category,Name,Dek,Author,Body"
+HEADER_TITLE="TRACK CHANGES"
+PAGE_TITLE_COLUMN="Name"
+SITE_TITLE="TRACK CHANGES"
+MARKDOWN_FIELDS="Name,Body"
+SITE_DESCRIPTION="Welcome to Track Changes, Postlight's official publication and podcast covering the forces shaping technology today."

examples/roni-rony-rone/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

examples/roni-rony-rone/.eslintignore

@@ -0,0 +1 @@
+dist

examples/roni-rony-rone/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["airbnb", "prettier"],
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "no-underscore-dangle": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+  }
+}

examples/roni-rony-rone/.nvmrc

@@ -0,0 +1 @@
+v10.16

examples/roni-rony-rone/build.js

@@ -0,0 +1,172 @@
+/* eslint-disable no-console */
+
+import formatAirtableRowData from "./src/utils/formatAirtableRowData";
+
+require("dotenv").config();
+
+const React = require("react");
+const fs = require("fs");
+const Airtable = require("airtable");
+const https = require("https");
+
+const trimFieldOrder = require("./src/utils/trimFieldOrder");
+const Index = require("./src/components/Index").default;
+const RowPage = require("./src/components/RowPage").default;
+const tableHasPublishedColumn = require("./src/utils/tableHasPublishedColumn")
+  .default;
+
+process.env.FIELD_ORDER = trimFieldOrder(process.env.FIELD_ORDER);
+process.env.HOMEPAGE_FIELD_ORDER = trimFieldOrder(
+  process.env.HOMEPAGE_FIELD_ORDER
+);
+
+const renderAsHTMLPage = require(`./src/utils/renderAsHTMLPage`).default;
+
+const { AIRTABLE_API_KEY, BASE_ID, TABLE_ID, VIEW } = process.env;
+
+const base = new Airtable({ apiKey: AIRTABLE_API_KEY }).base(BASE_ID);
+
+const allRows = [[]];
+
+const downloadFile = (url, filepath, onSuccess, onError) => {
+  const file = fs.createWriteStream(filepath);
+  https
+    .get(url, response => {
+      response.pipe(file);
+      file.on("finish", () => {
+        file.close();
+        onSuccess && onSuccess();
+      });
+    })
+    .on("error", fileErr => {
+      console.log(fileErr);
+      fs.unlink(filepath, error => onError && onError(error));
+    });
+};
+
+// used to make sure multiple pages aren't created for same slug
+const alreadySeenSlugs = {};
+
+const alreadyDownloadedAttachments = {};
+
+let currentPage = 0;
+let recordsOnCurrentPage = 0;
+tableHasPublishedColumn(base, includePublished =>
+  base(TABLE_ID)
+    .select({
+      view: VIEW,
+      ...(includePublished ? { filterByFormula: "{Published}" } : {})
+    })
+    .eachPage(
+      function page(records, fetchNextPage) {
+        records.forEach(row => {
+          if (!allRows[currentPage]) {
+            allRows.push([]);
+          }
+          const formattedRow = formatAirtableRowData(row);
+
+          const attachmentFields = formattedRow.fields.filter(
+            field =>
+              Array.isArray(field.value) &&
+              field.value[0] &&
+              field.value[0].size
+          );
+
+          attachmentFields.forEach(attachmentField => {
+            attachmentField.value.forEach(attachment => {
+              if (!alreadyDownloadedAttachments[attachment.url]) {
+                const newUrl = `/assets/${attachment.id}-${attachment.filename}`;
+                downloadFile(attachment.url, `dist${newUrl}`);
+                alreadyDownloadedAttachments[attachment.url] = true;
+                attachment.url = newUrl;
+              }
+            });
+          });
+
+          const slugFieldValue = row.fields.Slug;
+          const slug =
+            slugFieldValue !== undefined && !alreadySeenSlugs[slugFieldValue]
+              ? slugFieldValue
+              : formattedRow.id;
+          alreadySeenSlugs[slug] = true;
+
+          const pageTitle = row.fields[process.env.PAGE_TITLE_COLUMN];
+
+          const filepath = `dist/${slug}.html`;
+          allRows[currentPage].push(formattedRow);
+          recordsOnCurrentPage += 1;
+          if (recordsOnCurrentPage >= 10) {
+            recordsOnCurrentPage = 0;
+            currentPage += 1;
+          }
+
+          // write individual resource page files
+          fs.writeFile(
+            filepath,
+            renderAsHTMLPage(<RowPage rowData={formattedRow} />, pageTitle),
+            error => {
+              if (error) {
+                console.error(`Error writing ${filepath}`);
+              } else {
+                console.log(`${filepath} written`);
+              }
+            }
+          );
+        });
+
+        // calls page function again while there are still pages left
+        fetchNextPage();
+      },
+      err => {
+        if (err) {
+          console.log(err);
+        }
+
+        const writeFile = (idx, filepath, pagination) =>
+          fs.writeFile(
+            filepath,
+            renderAsHTMLPage(
+              <Index rows={allRows[idx]} pagination={pagination} />
+            ),
+            error => {
+              if (error) {
+                console.error(`Error writing ${filepath}`);
+              }
+            }
+          );
+
+        allRows.forEach((row, idx) => {
+          const pageFilepath = `dist/page/${idx + 1}.html`;
+          const indexFilepath = `dist/index.html`;
+          const pagination = {
+            back: idx > 0 ? `/page/${idx}.html` : null,
+            next: idx < allRows.length - 1 ? `/page/${idx + 2}.html` : null
+          };
+          if (idx === 0) {
+            // write index page at /
+            writeFile(idx, indexFilepath, pagination);
+          }
+          // write page files for pagination
+          writeFile(idx, pageFilepath, pagination);
+        });
+      }
+    )
+);
+
+fs.copyFile("public/default.css", "dist/main.css", () =>
+  fs.readFile("custom/styles.css", "utf-8", (err, data) => {
+    fs.writeFile("dist/main.css", data, { flag: "a" }, error => {
+      if (error) {
+        console.error("Error writing custom CSS to dist/main.css");
+      } else {
+        console.log("custom CSS appended to /dist/main.css");
+      }
+    });
+  })
+);
+
+fs.copyFile("custom/favicon.ico", "dist/favicon.ico", err => {
+  if (err) {
+    console.log("No favicon.ico file found");
+  }
+});

examples/roni-rony-rone/custom/renderers/Author.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+const Author = ({ value, name }) => {
+  const authors = value.join(", ");
+  return (
+    <div className="Author">
+      <p>An Investigation by {authors}</p>
+    </div>
+  );
+};
+
+export default Author;

examples/roni-rony-rone/custom/renderers/GoogleMap.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+const GoogleMap = ({ value, name }) => {
+  return (
+    <div
+      className={name.replace(" ", "")}
+      dangerouslySetInnerHTML={{ __html: value }}
+    />
+  );
+};
+
+export default GoogleMap;

examples/roni-rony-rone/custom/renderers/LedeImage.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const LedeImage = attachment => {
+  const src = attachment.value[0].url;
+  return (
+    <div className="LedeImage" style={{ backgroundImage: `url(${src})` }} />
+  );
+};
+
+export default LedeImage;

examples/roni-rony-rone/custom/renderers/LedeThumb.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const LedeThumb = attachment => {
+  const src = attachment.value[0].url;
+  return (
+    <div className="LedeImage" style={{ backgroundImage: `url(${src})` }} />
+  );
+};
+
+export default LedeThumb;

examples/roni-rony-rone/custom/renderers/LiftoffHero.js

@@ -0,0 +1,100 @@
+import * as React from "react";
+
+const LiftoffHero = () => {
+  return (
+    <div className="title">
+      <h1 className="index-page__title">{process.env.HEADER_TITLE}</h1>
+      <h3>The Pizza Examiners</h3>
+      <div className="pizza-box">
+        <svg viewBox="0 0 170 51" xmlns="http://www.w3.org/2000/svg">
+          <g fill="#f54600" fillRule="evenodd">
+            <path
+              d="m14 46.9517619c1.1045695 0 2 .8954305 2 2s-.8954305 2-2 2-2-.8954305-2-2 .8954305-2 2-2zm-.4104944-38.86261548c9.6163952 4.69022938 15.7188734 13.69717378 17.112128 23.54941048l-7.7016336 1.0814431v2.2317619c0 1.1045695-.8954305 2-2 2s-2-.8954305-2-2v-3l-.0068666-.1444601c-.0726847-.7606519-.7134373-1.3555399-1.4931334-1.3555399-.7309651 0-1.3398119.5228508-1.4729528 1.214965l-.0201806.1405749-.0068666.1444601v11c0 1.1045695-.8954305 2-2 2s-2-.8954305-2-2l.0010775-3.2681882c-.2944167.1705558-.6363455.2681882-1.0010775.2681882-1.1045695 0-2-.8954305-2-2v-3.2647619l-9 1.2647619zm3.9453403-8.08914642c12.4080076 6.05178966 20.2821073 17.6733149 22.080059 30.3855852l-5.9420968.8359089c-1.5055218-10.6469044-8.025325-20.3938011-18.3053794-25.59872121l-.4628097-.23000861zm-5.3204481 25.5718191c-1.25135-.5835141-2.73880112-.0421261-3.32231517 1.2092238s-.04212611 2.738801 1.20922377 3.3223151c1.25135.583514 2.7388011.0421261 3.3223152-1.2092238.583514-1.2513499.0421261-2.7388011-1.2092238-3.3223151zm10.7195716-2.2886122c-1.2513499-.583514-2.738801-.0421261-3.3223151 1.2092238-.583514 1.2513499-.0421261 2.7388011 1.2092238 3.3223151 1.25135.5835141 2.7388011.0421261 3.3223152-1.2092238.583514-1.2513499.0421261-2.738801-1.2092239-3.3223151zm-5.4497103-7.4393624c-1.2513499-.5835141-2.738801-.0421261-3.3223151 1.2092238-.583514 1.2513499-.0421261 2.7388011 1.2092238 3.3223151 1.25135.5835141 2.7388011.0421261 3.3223152-1.2092238.583514-1.2513499.0421261-2.7388011-1.2092239-3.3223151z"
+              transform="translate(65)"
+            />
+            <rect height="4" rx="2" width="32" x="16" y="23" />
+            <rect height="4" rx="2" width="12" y="23" />
+            <rect height="4" rx="2" width="8" x="44" y="17" />
+            <rect height="4" rx="2" width="4" x="37" y="17" />
+            <rect height="4" rx="2" width="8" x="44" y="29" />
+            <rect height="4" rx="2" width="4" x="37" y="29" />
+            <rect
+              height="4"
+              rx="2"
+              transform="matrix(-1 0 0 1 276 0)"
+              width="32"
+              x="122"
+              y="23"
+            />
+            <rect
+              height="4"
+              rx="2"
+              transform="matrix(-1 0 0 1 328 0)"
+              width="12"
+              x="158"
+              y="23"
+            />
+            <rect
+              height="4"
+              rx="2"
+              transform="matrix(-1 0 0 1 244 0)"
+              width="8"
+              x="118"
+              y="17"
+            />
+            <rect
+              height="4"
+              rx="2"
+              transform="matrix(-1 0 0 1 262 0)"
+              width="4"
+              x="129"
+              y="17"
+            />
+            <rect
+              height="4"
+              rx="2"
+              transform="matrix(-1 0 0 1 244 0)"
+              width="8"
+              x="118"
+              y="29"
+            />
+            <rect
+              height="4"
+              rx="2"
+              transform="matrix(-1 0 0 1 262 0)"
+              width="4"
+              x="129"
+              y="29"
+            />
+          </g>
+        </svg>
+      </div>
+      <p>
+        Top-notch, totally-not-made-up pizza reviews from the heart of the Big
+        Apple.
+      </p>
+
+      <p>
+        Built with{" "}
+        <a
+          href="https://www.github.com/postlight/liftoff"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Liftoff
+        </a>{" "}
+        by your friends at{" "}
+        <a
+          href="https://www.postlight.com"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Postlight
+        </a>
+        .
+      </p>
+    </div>
+  );
+};
+
+export default LiftoffHero;

examples/roni-rony-rone/custom/renderers/RRRSoundtrack.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+const RRRSountrack = ({ value, name }) => {
+  const className = name.replace(" ", "");
+  return (
+    <div className={className}>
+      <h1>
+        <span>RRR</span>
+        SOUNDTRACK
+      </h1>
+      <p>{value}</p>
+    </div>
+  );
+};
+
+export default RRRSountrack;