refactor: switch css framework to tailwind

.gitignore

@@ -133,3 +133,4 @@ worker/
 .direnv/
 out/
 package-lock.json
+public/style.css

index.js

@@ -10,7 +10,7 @@ import { processCronTrigger } from './src/functions/cronTrigger'
  */
 const DEBUG = false
 
-addEventListener('fetch', event => {
+addEventListener('fetch', (event) => {
   try {
     event.respondWith(
       handleEvent(event, require.context('./pages/', true, /\.js$/), DEBUG),
@@ -27,6 +27,6 @@ addEventListener('fetch', event => {
   }
 })
 
-addEventListener('scheduled', event => {
+addEventListener('scheduled', (event) => {
   event.waitUntil(processCronTrigger(event))
 })

package.json

@@ -7,21 +7,26 @@
   "private": true,
   "scripts": {
     "dev": "flareact dev",
-    "build": "flareact build",
-    "deploy": "flareact publish",
+    "build": "yarn css && flareact build",
+    "deploy": "yarn build && flareact publish",
     "kv-gc": "node ./src/cli/gcMonitors.js",
-    "format": "prettier --write '**/*.{js,css,json,md}'"
+    "format": "prettier --write '**/*.{js,css,json,md}'",
+    "css": "postcss public/tailwind.css -o public/style.css"
   },
   "dependencies": {
     "flareact": "^0.9.0",
     "laco": "^1.2.1",
     "laco-react": "^1.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
+    "autoprefixer": "^10.0.2",
     "node-fetch": "^2.6.1",
-    "prettier": "^1.18.2",
+    "postcss": "^8.1.8",
+    "postcss-cli": "^8.3.0",
+    "prettier": "^2.2.0",
+    "tailwindcss": "^2.0.1",
     "yaml-loader": "^0.6.0"
   }
 }

pages/api/triggerCron.js

@@ -1,6 +1,6 @@
 import { processCronTrigger } from '../../src/functions/cronTrigger'
 
-export default async event => {
+export default async (event) => {
   // used only for local debugging
   //return processCronTrigger(event)
 }

pages/index.js

@@ -1,115 +1,97 @@
+import { Store } from 'laco'
+import { useStore } from 'laco-react'
 import Head from 'flareact/head'
-import MonitorHistogram from '../src/components/monitorHistogram'
-
-import {
-  getMonitors,
-  useKeyPress,
-} from '../src/functions/helpers'
 
+import { getMonitors, useKeyPress, switchTheme } from '../src/functions/helpers'
 import config from '../config.yaml'
-import MonitorStatusLabel from '../src/components/monitorStatusLabel'
-import MonitorStatusHeader from '../src/components/monitorStatusHeader'
+import MonitorCard from '../src/components/monitorCard'
 import MonitorFilter from '../src/components/monitorFilter'
+import MonitorStatusHeader from '../src/components/monitorStatusHeader'
+import ThemeSwitcher from '../src/components/themeSwitcher'
 
-import { Store } from 'laco'
-import { useStore } from 'laco-react'
+const MonitorStore = new Store({
+  monitors: config.monitors,
+  visible: config.monitors,
+  activeFilter: false,
+})
 
-const MonitorStore = new Store(
-  {
-    monitors: config.monitors,
-    visible: config.monitors,
-    activeFilter: false
-  }
-)
-
-const filterByTerm = (term) => MonitorStore.set(
-  state => ({ visible: state.monitors.filter((monitor) => monitor.name.toLowerCase().includes(term)) })
-)
+const filterByTerm = (term) =>
+  MonitorStore.set((state) => ({
+    visible: state.monitors.filter((monitor) =>
+      monitor.name.toLowerCase().includes(term),
+    ),
+  }))
 
 export async function getEdgeProps() {
   // get KV data
-  const {value: kvMonitors, metadata: kvMonitorsMetadata } = await getMonitors()
+  const {
+    value: kvMonitors,
+    metadata: kvMonitorsMetadata,
+  } = await getMonitors()
 
   return {
     props: {
       config,
       kvMonitors: kvMonitors || {},
-      kvMonitorsMetadata: kvMonitorsMetadata || {}
+      kvMonitorsMetadata: kvMonitorsMetadata || {},
     },
     // Revalidate these props once every x seconds
     revalidate: 5,
   }
 }
 
-export default function Index({
-  config,
-  kvMonitors,
-  kvMonitorsMetadata,
-}) {
+export default function Index({ config, kvMonitors, kvMonitorsMetadata }) {
   const state = useStore(MonitorStore)
   const slash = useKeyPress('/')
 
   return (
-    <div>
+    <div className="min-h-screen">
       <Head>
         <title>{config.settings.title}</title>
-        <link
-          rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css"
-          crossOrigin="anonymous"
-        />
-        <link rel="stylesheet" href="./main.css" />
+        <link rel="stylesheet" href="./style.css" />
+        <script>
+          {`
+          function setTheme(theme) {
+            document.documentElement.classList.remove("dark", "light")
+            document.documentElement.classList.add(theme)
+            localStorage.theme = theme
+          }
+          (() => {
+            const query = window.matchMedia("(prefers-color-scheme: dark)")
+            query.addListener(() => {
+              setTheme(query.matches ? "dark" : "light")
+            })
+            if (["dark", "light"].includes(localStorage.theme)) {
+              setTheme(localStorage.theme)
+            } else {
+              setTheme(query.matches ? "dark" : "light")
+            }
+          })()
+          `}
+        </script>
       </Head>
-      <div className="ui basic segment container">
-        <div className="horizontal flex between">
-          <h1 className="ui huge marginless title header">
-            <img
-              className="ui middle aligned tiny image"
-              src={config.settings.logo}
-            />
-            {config.settings.title}
-          </h1>
-          <MonitorFilter
-            active={slash}
-            callback={filterByTerm}
-          />
+      <div className="container mx-auto px-4">
+        <div className="flex flex-row justify-between items-center p-4">
+          <div className="flex flex-row items-center">
+            <img className="h-8 w-auto" src={config.settings.logo} />
+            <h1 className="ml-4 text-3xl">{config.settings.title}</h1>
+          </div>
+          <div className="flex flex-row items-center">
+            {typeof window !== 'undefined' && <ThemeSwitcher />}
+            <MonitorFilter active={slash} callback={filterByTerm} />
+          </div>
         </div>
-        <MonitorStatusHeader
-          kvMonitorsMetadata={kvMonitorsMetadata}
-        />
+        <MonitorStatusHeader kvMonitorsMetadata={kvMonitorsMetadata} />
         {state.visible.map((monitor, key) => {
           return (
-            <div key={key} className="ui segment">
-              <div
-                className="ui horizontal flex between"
-                style={{ marginBottom: '8px' }}
-              >
-                <div className="ui marginless header">
-                  {monitor.description && (
-                    <span data-tooltip={monitor.description}>
-                      <i className="blue small info circle icon" />
-                    </span>
-                  )}
-                  <div className="content">{monitor.name}</div>
-                </div>
-                <MonitorStatusLabel
-                  kvMonitor={kvMonitors[monitor.id]}
-                />
-              </div>
-
-              <MonitorHistogram
-                monitorId={monitor.id}
-                kvMonitor={kvMonitors[monitor.id]}
-              />
-
-              <div className="horizontal flex between grey-text">
-                <div>{config.settings.daysInHistogram} days ago</div>
-                <div>Today</div>
-              </div>
-            </div>
+            <MonitorCard
+              key={key}
+              monitor={monitor}
+              data={kvMonitors[monitor.id]}
+            />
           )
         })}
-        <div className="horizontal flex between grey-text">
+        <div className="flex flex-row justify-between mt-4 text-sm">
           <div>
             Powered by{' '}
             <a href="https://workers.cloudflare.com/" target="_blank">
@@ -129,6 +111,15 @@ export default function Index({
             </a>
           </div>
         </div>
+        <script>
+          {`
+          function setTheme(theme) {
+            document.documentElement.classList.remove("dark", "light")
+            document.documentElement.classList.add(theme)
+            localStorage.theme = theme
+          }
+          `}
+        </script>
       </div>
     </div>
   )

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}