updates

.drone.yml

@@ -1,32 +0,0 @@
-kind: pipeline
-name: default
-
-steps:
-  - name: build
-    image: node:12-alpine
-    pull: always
-    commands:
-      - node -v
-      - npm -v
-      - yarn
-      - yarn run build
-
-  - name: deploy
-    image: cupcakearmy/drone-deploy
-    pull: always
-    settings:
-      host: nicco.io
-      user: root
-      key:
-        from_secret: ssh_key
-      port: 1312
-      target: /srv/web/rauchmelder
-      sources:
-        - ./dist
-        - ./docker-compose.prod.yml
-      commands:
-        - docker-compose -f docker-compose.prod.yml down
-        - docker-compose -f docker-compose.prod.yml up -d
-    when:
-      event: push
-      branch: master

.gitignore

@@ -7,3 +7,4 @@ dist
 
 .idea
 .vscode
+.vercel

docker-compose.prod.yml

@@ -1,22 +0,0 @@
-version: '3.6'
-
-services:
-  home:
-    image: nginx:alpine
-    restart: always
-    ports:
-      - 80
-    volumes:
-      - ./dist:/usr/share/nginx/html:ro
-    networks:
-      - traefik
-    labels:
-      - traefik.enable=true
-      - traefik.port=80
-      - traefik.docker.network=traefik
-      - traefik.backend=rauchmelder
-      - traefik.frontend.rule=Host:rauchmelder.nicco.io
-
-networks:
-  traefik:
-    external: true

docker-compose.yml

@@ -1,10 +0,0 @@
-version: '3'
-
-services:
-  home:
-    image: nginx:alpine
-    restart: always
-    ports:
-      - 80
-    volumes:
-      - ./public:/usr/share/nginx/html:ro

package.json

@@ -7,18 +7,18 @@
   ],
   "scripts": {
     "dev": "parcel ./src/index.html",
-    "build": "parcel build ./src/index.html"
+    "build": "parcel build --no-source-maps ./src/index.html"
   },
   "dependencies": {
-    "moment": "^2.24.0",
+    "dayjs": "^1.10.4",
     "react": "16.9",
     "react-dom": "16.9"
   },
   "devDependencies": {
     "@types/react": "16.9",
     "@types/react-dom": "16.9",
-    "stylus": "^0.54.7",
     "parcel-bundler": "^1.12.4",
+    "stylus": "^0.54.7",
     "typescript": "^3.7"
   }
 }

src/Components/App.tsx

@@ -1,35 +1,41 @@
 import React, { useState, useCallback } from 'react'
-import moment from 'moment'
+import Duration from 'dayjs/plugin/duration'
+import RelativeTime from 'dayjs/plugin/relativeTime'
+import dj from 'dayjs'
+
+dj.extend(Duration)
+dj.extend(RelativeTime)
 
 import ShowTime from './ShowTime'
 import Switcher from './Switcher'
 
 export const Glories = {
-	Cosi: moment('2019-02-12').unix(),
-	Georg: moment('2019-11-08').unix()
+  Cosi: dj('2019-02-12').unix(),
+  Georg: dj('2019-11-08').unix(),
 }
 
 export type Person = keyof typeof Glories
 
-const init: Person = window.localStorage.getItem('selected') as Person || 'Cosi'
+const init: Person = (window.localStorage.getItem('selected') as Person) || 'Cosi'
 
 const App: React.FC = () => {
+  const [person, setPerson] = useState(init)
 
-	const [person, setPerson] = useState(init)
+  const _set = useCallback((p: Person) => {
+    window.localStorage.setItem('selected', p)
+    setPerson(p)
+  }, [])
 
-	const _set = useCallback((p: Person) => {
-		window.localStorage.setItem('selected', p)
-		setPerson(p)
-	}, [])
-
-	return <div id="app">
-		<Switcher onChange={_set} />
-		<div>
-			<div id={'title'}>💨 Rauchmelder 💨</div>
-			<br />
-			<ShowTime glory={Glories[person]} />
-		</div>
-	</div>
+  return (
+    <div id="app">
+      <Switcher onChange={_set} />
+      <div>
+        <div id={'title'}>💨 Rauchmelder 💨</div>
+        <br />
+        <ShowTime glory={Glories[person]} />
+      </div>
+    </div>
+  )
 }
 
 export default App

src/Components/ShowTime.tsx

@@ -1,26 +1,27 @@
 import React, { useEffect, useState } from 'react'
-import moment from 'moment'
+import dj from 'dayjs'
 
 type Props = {
-    glory: number
+  glory: number
 }
 
 const ShowTime: React.FC<Props> = ({ glory }) => {
-    const [refresh, setRefresh] = useState(0)
+  const [refresh, setRefresh] = useState(0)
 
+  const now = (Date.now() / 1000) | 0
+  const delta = dj.duration(now - glory, 'seconds')
 
-    const now = Date.now() / 1000 | 0
-    const delta = moment.duration(now - glory, 'seconds')
+  useEffect(() => {
+    setTimeout(() => setRefresh(refresh + 1), 1000)
+  }, [refresh])
 
-    useEffect(() => {
-        setTimeout(() => setRefresh(refresh + 1), 1000)
-    }, [refresh])
-
-    return <div id={'text'}>
-        {delta.humanize()}
-        <br />
-        {delta.asSeconds()}
+  return (
+    <div id={'text'}>
+      {delta.humanize()}
+      <br />
+      {delta.asSeconds()}
     </div>
+  )
 }
 
 export default ShowTime

src/Components/Switcher.tsx

@@ -1,20 +1,20 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Glories, Person } from './App'
 
 type Props = {
-    onChange: (p: Person) => void,
+  onChange: (p: Person) => void
 }
 
 const Switcher: React.FC<Props> = ({ onChange }) => {
-    return <div id={'switcher'}>
-        {Object.keys(Glories).map((glory, i) => <span
-            key={i}
-            onClick={() => onChange(glory as Person)}
-        >
-            {glory}
+  return (
+    <div id="switcher">
+      {Object.keys(Glories).map((glory, i) => (
+        <span key={i} onClick={() => onChange(glory as Person)}>
+          {glory}
         </span>
-        )}
+      ))}
     </div>
+  )
 }
 
 export default Switcher

src/index.html

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <title>💨</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet" />
+  </head>
 
-<head>
-  <title>💨</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet">
-</head>
-
-<body>
-  <main id="root"></main>
-  <script src="./main.tsx"></script>
-</body>
-
+  <body>
+    <main id="root"></main>
+    <script src="./main.tsx"></script>
+  </body>
 </html>

src/main.styl

@@ -7,7 +7,7 @@ html, body, #root
 	width 100%
 	height 100%
 	overflow hidden
-	font-family 'PT Sans', sans-serif
+	font-family: 'Inconsolata', monospace
 	font-weight bold
 
 #app

src/main.tsx

@@ -4,5 +4,4 @@ import * as ReactDOM from 'react-dom'
 import './main.styl'
 import App from './Components/App'
 
-
 ReactDOM.render(<App />, document.getElementById('root'))