initial starter commit

Author: jimmylee

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "~": "./"
+        }
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,19 @@
+.next
+.nova
+.env
+.env.local
+.env-custom-development
+.env-development
+.env-textile
+.env-production
+.DS_STORE
+DS_STORE
+yarn.lock
+node_modules
+dist
+analytics.txt
+
+/**/*/.DS_STORE
+/**/*/node_modules
+/**/*/.next
+/**/*/.data

README.md

@@ -0,0 +1,19 @@
+# NEXT-SASS
+
+Why would I use this, Jim?
+
+* You have a really simple website you need to build and you don't want minimal dependencies and a small package.json
+* Maybe you're tired of using CSS-in-JS.
+
+### Setup (MacOS)
+
+Start by cloning the repository, or by clicking on **Use this template** above.
+
+Then run the server
+
+```sh
+npm install
+npm run dev
+```
+
+Go to `http://localhost:3005` in your browser of choice. Enjoy!

common/requests.js

@@ -0,0 +1,14 @@
+export async function onRootCall(options = {}) {
+  const response = await fetch("/api", {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(options),
+  });
+
+  const json = await response.json();
+  console.log(json);
+  return json;
+}

common/server.js

@@ -0,0 +1,19 @@
+import Cors from "cors";
+
+export function initMiddleware(middleware) {
+  return (req, res) =>
+    new Promise((resolve, reject) => {
+      middleware(req, res, (result) => {
+        if (result instanceof Error) {
+          return reject(result);
+        }
+        return resolve(result);
+      });
+    });
+}
+
+export const cors = initMiddleware(
+  Cors({
+    methods: ["GET", "POST", "OPTIONS"],
+  })
+);

common/utilities.js

@@ -0,0 +1,89 @@
+const MINUTE = 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const WEEK = DAY * 7;
+const MONTH = (DAY * 365) / 12;
+const YEAR = DAY * 365;
+
+export const toDateISOString = (data) => {
+  const date = new Date(data);
+  return date.toLocaleDateString("en-US", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    hour12: true,
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+};
+
+export const bytesToSize = (bytes, decimals = 2) => {
+  if (bytes === 0) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${(bytes / Math.pow(k, i)).toFixed(dm)} ${sizes[i]}`;
+};
+
+export const isEmpty = (string) => {
+  // NOTE(jim): If a number gets passed in, it isn't considered empty for zero.
+  if (string === 0) {
+    return false;
+  }
+
+  if (!string) {
+    return true;
+  }
+
+  if (typeof string === "object") {
+    return true;
+  }
+
+  if (string.length === 0) {
+    return true;
+  }
+
+  string = string.toString();
+
+  return !string.trim();
+};
+
+export function classNames() {
+  var classes = [];
+
+  for (var i = 0; i < arguments.length; i++) {
+    var arg = arguments[i];
+    if (!arg) continue;
+
+    var argType = typeof arg;
+
+    if (argType === "string" || argType === "number") {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        var inner = classNames.apply(null, arg);
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (argType === "object") {
+      if (arg.toString !== Object.prototype.toString) {
+        classes.push(arg.toString());
+      } else {
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes.push(key);
+          }
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}

components/App.js

@@ -0,0 +1,8 @@
+import styles from "~/components/App.module.scss";
+import pkg from "~/package.json";
+
+import * as React from "react";
+
+export default function App(props) {
+  return <React.Fragment>{props.children}</React.Fragment>;
+}

components/App.module.scss

@@ -0,0 +1,17 @@
+.center {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.paragraph {
+  font-family: "Body";
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 24px;
+  width: 100%;
+  max-width: 288px;
+  text-align: center;
+}

global.scss

@@ -0,0 +1,123 @@
+@font-face {
+  font-family: "Body";
+  src: url("/BodyText-Regular.woff") format("woff");
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  box-sizing: border-box;
+  vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+html,
+body {
+  --color-background: #000000;
+  --color-text: #ffffff;
+
+  font-size: 14px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, sans-serif;
+  scrollbar-width: none;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}