redesign

.eslintrc

@@ -1,13 +1,15 @@
 {
   "extends": [
     "@nuxtjs/eslint-config-typescript",
-    "plugin:unicorn/all"
+    "plugin:unicorn/all",
+    "plugin:tailwindcss/recommended"
   ],
   "env": {
     "es2022": true
   },
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
-  }
+  },
+  "plugins": ["tailwindcss"]
 }

.github/workflows/publish-docker-image.yml

@@ -22,7 +22,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v4
         with:
-          images: misaon/uptime-next
+          images: misaon/uptime-nuxt
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v3
@@ -35,6 +35,6 @@ jobs:
       - name: Docker Hub Description
         uses: peter-evans/dockerhub-description@v3
         with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-          repository: misaon/uptime-next
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          repository: misaon/uptime-nuxt

.gitignore

@@ -14,4 +14,4 @@ dist
 # app
 .idea
 !.gitkeep
-data/
+server/data/

Dockerfile

@@ -16,7 +16,7 @@ WORKDIR /app
 
 COPY --from=build /app/.output /app/.output
 
-RUN mkdir -p /app/data
+RUN mkdir -p /app/server /app/server/data
 
 ENV HOST=0.0.0.0
 ENV PORT=80

README.md

@@ -1,10 +1,10 @@
 # Uptime Nuxt
 
-<a target="_blank" href="https://github.com/misaon/uptime-next"><img src="https://img.shields.io/github/stars/misaon/uptime-next" /></a> <a target="_blank" href="https://hub.docker.com/r/misaon/uptime-next"><img src="https://img.shields.io/docker/pulls/misaon/uptime-next" /></a> <a target="_blank" href="https://hub.docker.com/r/misaon/uptime-next"><img src="https://img.shields.io/docker/v/misaon/uptime-next/latest?label=docker%20image%20ver." /></a> <a target="_blank" href="https://github.com/misaon/uptime-next"><img src="https://img.shields.io/github/last-commit/misaon/uptime-next" /></a>
+<a target="_blank" href="https://github.com/misaon/uptime-nuxt"><img src="https://img.shields.io/github/stars/misaon/uptime-nuxt" /></a> <a target="_blank" href="https://hub.docker.com/r/misaon/uptime-nuxt"><img src="https://img.shields.io/docker/pulls/misaon/uptime-nuxt" /></a> <a target="_blank" href="https://hub.docker.com/r/misaon/uptime-nuxt"><img src="https://img.shields.io/docker/v/misaon/uptime-nuxt/latest?label=docker%20image%20ver." /></a> <a target="_blank" href="https://github.com/misaon/uptime-nuxt"><img src="https://img.shields.io/github/last-commit/misaon/uptime-nuxt" /></a>
 
 <br />
 <div align="center" width="100%">
-    <img src="./assets/images/uptime-next.png" width="200" alt="logo" />
+    <img src="./assets/images/uptime-nuxt.png" width="200" alt="logo" />
 </div>
 <br />
 
@@ -19,7 +19,7 @@ A fast, minimalistic, and powerful self-hosted monitoring tool built on modern t
 ### 🐳 Docker
 
 ```bash
-docker run -p 80:80 -v uptime-next:/app/data misaon/uptime-next:1.0.0
+docker run -p 80:80 -v uptime-nuxt:/app/server/data misaon/uptime-nuxt:latest
 ```
 
 Browse to http://localhost:80 after starting.

app.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="flex flex-col h-full dark:text-white">
     <NuxtLayout>
-      <header class="flex justify-between items-center dark:bg-neutral-800 bg-neutral-200 p-3">
-        <NuxtLink class="flex items-center gap-1 text-2xl" to="/">
+      <header class="flex justify-between items-center p-3 bg-slate-200 dark:bg-slate-800">
+        <NuxtLink class="flex gap-1 items-center text-2xl" to="/">
           <IconApp />
-          <span>Uptime</span>
+          <span class="font-medium">Uptime<span class="font-light">Nuxt</span></span>
         </NuxtLink>
 
-        <div class="flex items-center gap-3">
+        <div class="flex gap-3 items-center">
           <div class="flex gap-3 items-center">
             <button class="btn" type="button" @click="handleDarkModeSwitch">
               <IconDark class="w-6 h-auto" />
@@ -20,11 +20,11 @@
         </div>
       </header>
 
-      <main class="flex-1 p-3 bg-white dark:bg-neutral-900">
+      <main class="flex-1 p-3 bg-white dark:bg-slate-900">
         <NuxtPage />
       </main>
 
-      <footer class="flex justify-between p-3 bg-neutral-200 dark:bg-neutral-800">
+      <footer class="flex justify-between p-3 bg-slate-200 dark:bg-slate-800">
         <p>
           Made with ❤ by
           <NuxtLink target="_blank" to="https://github.com/misaon">

assets/css/tailwind.css

@@ -10,20 +10,20 @@
     }
 
     p > a {
-        @apply underline;
+        @apply hover:underline;
     }
 }
 
 @layer components {
     .btn {
-        @apply flex gap-1 items-center rounded bg-white dark:bg-neutral-700 py-2 px-3 hover:opacity-80;
+        @apply flex gap-1 items-center rounded bg-gradient-to-r bg-slate-300 dark:from-slate-700 dark:to-slate-600 py-2 px-3 hover:opacity-80;
     }
 
     .btn > svg {
         @apply w-6 h-auto;
     }
 
     .input {
-        @apply rounded bg-white dark:bg-neutral-700 py-2 px-3 appearance-none;
+        @apply rounded bg-white dark:bg-slate-700 py-2 px-3 appearance-none;
     }
 }

nuxt.config.ts

@@ -17,5 +17,10 @@ export default defineNuxtConfig({
         compiler: 'vue3'
       })
     ]
+  },
+  nitro: {
+    plugins: [
+      '~/server/plugins/database'
+    ]
   }
 })

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "uptime-next",
+  "name": "uptime-nuxt",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -16,6 +16,7 @@
     "@nuxtjs/tailwindcss": "^5.1.2",
     "@tailwindcss/forms": "^0.5.2",
     "eslint": "^8.18.0",
+    "eslint-plugin-tailwindcss": "^3.5.2",
     "nuxt": "3.0.0-rc.4",
     "typescript": "^4.7.4",
     "unplugin-icons": "^0.14.5"

pages/index.vue

@@ -1,72 +1,30 @@
 <template>
-  <div class="flex gap-3">
-    <aside class="w-72 p-3 bg-neutral-100 dark:bg-neutral-800 rounded">
-      <div class="flex flex-col gap-3">
-        <div class="flex gap-1 items-center">
-          <IconList class="w-6 h-auto" />
-          <span class="font-bold">Monitoring list</span>
+  <section class="p-3 bg-slate-100 dark:bg-slate-800 rounded-md">
+    <div class="flex flex-col divide-y-2 dark:divide-slate-700">
+      <div
+        v-for="(monitoring, index) in monitoringList"
+        :key="index"
+        class="flex items-center p-3"
+      >
+        <span class="grow font-medium">{{ monitoring.url }}</span>
+        <div class="flex items-center">
+          <span
+            class="p-1 text-white rounded-full"
+            :class="{'bg-lime-600': monitoring.status === 'OK', 'bg-orange-600': monitoring.status === 'ERROR'}"
+          >
+            <IconOK v-if="monitoring.status === 'OK'" class="w-6 h-auto" />
+            <IconError v-else class="w-6 h-auto" />
+          </span>
         </div>
-        <nav class="flex flex-col gap-3">
-          <NuxtLink v-for="(monitoring, index) in monitoringList" :key="index" class="btn pl-1" to="">
-            <IconArrowRight class="w-6 h-auto" />
-            <span>{{ monitoring.url }}</span>
-          </NuxtLink>
-        </nav>
       </div>
-    </aside>
-
-    <section class="flex-grow p-3 gap-3 bg-neutral-100 dark:bg-neutral-800 rounded">
-      <table class="w-full text-left table-auto rounded overflow-hidden">
-        <thead class="uppercase bg-neutral-200 dark:bg-neutral-700">
-          <tr>
-            <th class="p-3">
-              URL
-            </th>
-            <th class="p-3">
-              Status
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(monitoring, index) in monitoringList"
-            :key="index"
-            class="dark:border-neutral-600"
-            :class="{'border-b': index !== Object.keys(monitoringList).length - 1}"
-          >
-            <td class="p-3 font-bold">
-              {{ monitoring.url }}
-            </td>
-            <td class="p-3 whitespace-nowrap w-px text-center">
-              <span
-                class="inline-flex rounded-full text-white font-bold px-2 py-1"
-                :class="{'bg-green-800': monitoring.status === 'OK', 'bg-red-800': monitoring.status === 'ERROR'}"
-              >
-                <template v-if="monitoring.status === 'OK'">
-                  <IconOK class="w-6 h-auto" />
-                </template>
-                <template v-else>
-                  <IconError class="w-6 h-auto" />
-                </template>
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <p class="text-right font-light text-sm">
-        Automatically refreshed every 10 seconds
-      </p>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script lang="ts" setup>
 import { useFetch } from '#imports'
-import IconList from '~icons/material-symbols/list-alt-outline'
-import IconArrowRight from '~icons/material-symbols/chevron-right-rounded'
 import IconOK from '~icons/material-symbols/done'
-import IconError from '~icons/material-symbols/dangerous-outline-rounded'
+import IconError from '~icons/material-symbols/close'
 
 const { refresh: refreshStates } = await useFetch('/api/state-resolver')
 const { data: monitoringList, refresh: refreshList } = await useFetch('/api/monitoring')

pages/monitoring/create.vue

@@ -1,6 +1,6 @@
 <template>
   <form
-    class="flex flex-col gap-3 bg-neutral-100 dark:bg-neutral-800 p-3 rounded"
+    class="flex flex-col gap-3 p-3 bg-slate-100 dark:bg-slate-800 rounded-md"
     @submit.prevent="handleFormSubmit"
   >
     <div class="flex flex-col gap-1">
@@ -9,7 +9,7 @@
     </div>
 
     <div class="self-end">
-      <button class="btn rounded bg-white py-2 px-3" type="submit">
+      <button class="btn" type="submit">
         <IconOK />
         <span>Add</span>
       </button>

server/api/monitoring/index.get.ts

@@ -1,7 +1,9 @@
-import db from '~/service/database'
+// @ts-expect-error missing import
+// eslint-disable-next-line import/named
+import { useNitroApp } from '#imports'
 
-export default defineEventHandler(async () => {
-  const $database = await db()
+export default defineEventHandler(() => {
+  const { db } = useNitroApp()
 
-  return $database.data.monitoring
+  return db.data.monitoring
 })

server/api/monitoring/index.post.ts

@@ -1,15 +1,17 @@
-import db from '~/service/database'
+// @ts-expect-error missing import
+// eslint-disable-next-line import/named
+import { useNitroApp } from '#imports'
 
 export default defineEventHandler(async (event) => {
+  const { db } = useNitroApp()
   const { url } = await useBody(event)
-  const $database = await db()
 
-  $database.data.monitoring.push({
+  db.data.monitoring.push({
     url,
     status: 'PENDING'
   })
 
-  await $database.write()
+  await db.write()
 
   return {
     status: 'ok'

server/api/state-resolver/index.get.ts

@@ -1,8 +1,10 @@
-import db from '~/service/database'
+// @ts-expect-error missing import
+// eslint-disable-next-line import/named
+import { useNitroApp } from '#imports'
 
 export default defineEventHandler(async () => {
-  const $database = await db()
-  const monitoringList = $database.data.monitoring
+  const { db } = useNitroApp()
+  const monitoringList = db.data.monitoring
 
   const promiseList = []
   for (const monitoring of monitoringList) {
@@ -13,12 +15,12 @@ export default defineEventHandler(async () => {
 
   for (const [index, state] of states.entries()) {
     const monitoring = monitoringList[index]
-    const databaseRow = $database.data.monitoring.find(({ url }) => url === monitoring.url)
+    const databaseRow = db.data.monitoring.find(({ url }) => url === monitoring.url)
 
     databaseRow.status = state.status === 'fulfilled' ? 'OK' : 'ERROR'
   }
 
-  await $database.write()
+  await db.write()
 
   return {}
 })

server/plugins/database.ts

@@ -0,0 +1,19 @@
+import { dirname, resolve } from 'node:path'
+import { JSONFile, Low } from 'lowdb'
+
+type Data = {
+  monitoring: {url: string, status: string}[]
+}
+
+export default defineNitroPlugin(async (nitroApp) => {
+  const databaseFile = resolve(dirname(''), 'server/data/db.json')
+
+  const adapter = new JSONFile<Data>(databaseFile)
+  const database = new Low(adapter)
+
+  await database.read()
+
+  database.data ||= { monitoring: [] }
+
+  nitroApp.db = database
+})