Initial commit

overshard · Jul 8, 2019 · 2f4794c · 2f4794c
commit 2f4794c
Show file tree

Hide file tree

Showing 18 changed files with 7,136 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,17 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# Top-most EditorConfig file
+root = true
+
+# Default configuration for all file types
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Markdown files use trailing whitespace for line breaks
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly"
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 2018,
+    sourceType: "module"
+  },
+  plugins: ["react", "prettier"],
+  rules: {
+    "prettier/prettier": "error",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error"
+  }
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# next
+.next
+
+# node
+node_modules
diff --git a/.nowignore b/.nowignore
@@ -0,0 +1,14 @@
+# next
+.next
+
+# node
+node_modules
+
+# git
+.gitignore
+
+# eslint
+.eslintrc.js
+
+# editorconfig
+.editorconfig
diff --git a/components/grid.js b/components/grid.js
@@ -0,0 +1,79 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Grid = props => {
+  return (
+    <>
+      <div className="grid grid-lines">
+        <div className="grid-column grid-column-1" />
+        <div className="grid-column grid-column-2" />
+        <div className="grid-column grid-column-3" />
+        <div className="grid-column grid-column-4" />
+        <div className="grid-column grid-column-5" />
+        <div className="grid-column grid-column-6" />
+      </div>
+      <div className="grid">{props.children}</div>
+      <style jsx>{`
+        .grid {
+          min-height: 100vh;
+          display: grid;
+          grid-template-columns: 60px 15% auto auto 15% 60px;
+          grid-template-rows: auto auto auto;
+          grid-template-areas:
+            ". . .    .    . sidebar"
+            ". . main main . sidebar"
+            ". . .    .    . sidebar";
+          grid-column-start: 3;
+          grid-column-end: 5;
+          grid-row-start: 2;
+          grid-row-end: 2;
+        }
+
+        .grid-lines {
+          position: fixed;
+          width: 100%;
+          height: 100vh;
+          pointer-events: none;
+        }
+
+        .grid-column {
+          border-right: 1px solid rgba(255, 255, 255, 0.1);
+          grid-row: 1 / -1;
+        }
+
+        .grid-column-1 {
+          grid-column 1;
+        }
+
+        .grid-column-2 {
+          grid-column 2;
+        }
+
+        .grid-column-3 {
+          grid-column 3;
+        }
+
+        .grid-column-4 {
+          grid-column 4;
+        }
+
+        .grid-column-5 {
+          grid-column 5;
+        }
+
+        .grid-column-6 {
+          grid-column 6;
+        }
+      `}</style>
+    </>
+  );
+};
+
+Grid.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ])
+};
+
+export default Grid;
diff --git a/components/page.js b/components/page.js
@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import Head from "next/head";
+import PropTypes from "prop-types";
+
+const Page = props => {
+  const baseTitle = "Timelite";
+
+  useEffect(() => {
+    window.scrollTo = 0;
+  });
+
+  return (
+    <>
+      <Head>
+        <title>
+          {props.title ? `${props.title} — ${baseTitle}` : baseTitle}
+        </title>
+      </Head>
+      {props.children}
+    </>
+  );
+};
+
+Page.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ])
+};
+
+export default Page;
diff --git a/components/sidebar.js b/components/sidebar.js
@@ -0,0 +1,94 @@
+import React from "react";
+import { withRouter } from "next/router";
+import Link from "next/link";
+import ReactTooltip from "react-tooltip";
+import PropTypes from "prop-types";
+
+const Sidebar = ({ router }) => {
+  return (
+    <div className="sidebar">
+      <div className="sidebar__title">Timelite</div>
+      <div className="sidebar__pages">
+        <ReactTooltip place="left" effect="solid" />
+        <Link href="/">
+          <a
+            className={
+              "sidebar__page " +
+              (router.pathname === "/" ? "sidebar__page--active" : "")
+            }
+            data-tip="Timer"
+          />
+        </Link>
+        <Link href="/log">
+          <a
+            className={
+              "sidebar__page " +
+              (router.pathname === "/log" ? "sidebar__page--active" : "")
+            }
+            data-tip="Log"
+          />
+        </Link>
+      </div>
+      <Link href="/about">
+        <a className="sidebar__whodis">?</a>
+      </Link>
+      <style jsx>{`
+        .sidebar {
+          position: fixed;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 60px;
+          grid-area: sidebar;
+          background-color: #ffffff;
+          display: flex;
+          justify-content: space-between;
+          flex-direction: column;
+        }
+        .sidebar__title {
+          color: #000000;
+          font-size: 1.5em;
+          font-weight: bolder;
+          transform: rotate(-90deg) translateX(-70px);
+        }
+        .sidebar__pages {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+        .sidebar__page {
+          position: relative;
+          content: "";
+          width: 10px;
+          height: 45px;
+          background-color: rgba(0, 0, 0, 0.5);
+          display: block;
+          margin-bottom: 15px;
+          transition: background-color 200ms;
+        }
+        .sidebar__page:hover {
+          background-color: rgba(0, 0, 0, 1);
+        }
+        .sidebar__page--active {
+          background-color: rgba(0, 0, 0, 1);
+        }
+        .sidebar__whodis {
+          background: #000000;
+          text-align: center;
+          padding: 5px 0;
+          display: block;
+          color: white;
+          text-decoration: none;
+          font-family: monospace;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+Sidebar.propTypes = {
+  router: PropTypes.object
+};
+
+export default withRouter(Sidebar);