Add esp-web-install-button

zomco · Jan 15, 2024 · 09d9655 · 09d9655
1 parent 23950b3
commit 09d9655
Show file tree

Hide file tree

Showing 30 changed files with 323 additions and 157 deletions.
diff --git a/app/api/upload/route.ts b/app/api/upload/route.ts
@@ -0,0 +1,21 @@
+import { put } from '@vercel/blob'
+import { NextResponse } from 'next/server'
+import { customAlphabet } from 'nanoid'
+
+export const runtime = 'edge'
+
+const nanoid = customAlphabet(
+  '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+  7
+) // 7-character random string
+export async function POST(req: Request) {
+  const file = req.body || ''
+  const contentType = req.headers.get('content-type') || 'text/plain'
+  const filename = `${nanoid()}.${contentType.split('/')[1]}`
+  const blob = await put(filename, file, {
+    contentType,
+    access: 'public',
+  })
+
+  return NextResponse.json(blob)
+}
diff --git a/src/app/globals.css → app/globals.css b/src/app/globals.css → app/globals.css
@@ -8,14 +8,6 @@
   --background-end-rgb: 255, 255, 255;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,34 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+export const metadata = {
+  title: 'owkor',
+  description: 'owkor',
+  manifest: 'site.webmanifest',
+  icons: {
+    icon: ['/favicon-32x32.png', '/favicon-16x16.png'],
+    apple: '/apple-touch-icon.png',
+    other: {
+      rel: 'mask-icon',
+      url: '/safari-pinned-tab.svg',
+    },
+  },
+}
+
+const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.variable}>{children}</body>
+    </html>
+  )
+}
diff --git a/app/page.module.css b/app/page.module.css
@@ -0,0 +1,7 @@
+.steps {
+  list-style: number;
+}
+
+.connect {
+  margin-top: 20px;
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,47 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import Script from 'next/script'
+import * as React from 'react'
+import styles from './page.module.css'
+
+
+export default function Home() {
+  return (
+    <main className="relative flex min-h-screen flex-col items-center justify-center">
+      <div className="bg-white/30 p-12 shadow-xl ring-1 ring-gray-900/5 rounded-lg backdrop-blur-lg max-w-xl mx-auto w-full">
+        <ol className={styles.steps}>
+          <li>Plug in your devices to a USB port. We will install firmware to it.</li>
+          <li id="coms">Hit &lsquo;Connect&rsquo; and select the correct COM port.</li>
+          <li>Get firmware installed and connected in less than 3 minutes!</li>
+        </ol>
+        <div className={styles.connect}>
+          <esp-web-install-button manifest="https://firmware.esphome.io/esphome-web/manifest.json" />
+        </div>
+      </div>
+      <div className="sm:absolute sm:bottom-0 w-full px-20 py-10 flex justify-between">
+        <Link href="https://owkor.com">
+          <Image
+            src="/owkor.svg"
+            alt="Owkor Logo"
+            width={24}
+            height={24}
+            priority
+          />
+        </Link>
+        <Link
+          href="https://github.com/zomco/owkor"
+          className="flex items-center space-x-2"
+        >
+          <Image
+            src="/github.svg"
+            alt="GitHub Logo"
+            width={24}
+            height={24}
+            priority
+          />
+        </Link>
+      </div>
+      <Script src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module" />
+    </main>
+  )
+}
diff --git a/components/loading-dots.module.css b/components/loading-dots.module.css
@@ -0,0 +1,40 @@
+.loading {
+  display: inline-flex;
+  align-items: center;
+}
+
+.loading .spacer {
+  margin-right: 2px;
+}
+
+.loading span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+
+.loading span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+
+.loading span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
diff --git a/components/loading-dots.tsx b/components/loading-dots.tsx
@@ -0,0 +1,13 @@
+import styles from './loading-dots.module.css'
+
+const LoadingDots = ({ color = '#000' }: { color?: string }) => {
+  return (
+    <span className={styles.loading}>
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+    </span>
+  )
+}
+
+export default LoadingDots
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4"
+    "typescript": "^5"
   }
 }
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/github.svg b/public/github.svg
diff --git a/public/manifest_owcare.json b/public/manifest_owcare.json
@@ -0,0 +1,27 @@
+{
+    "name": "Owcare",
+    "version": "0.1.0",
+    "home_assistant_domain": "owcare",
+    "funding_url": "https://owkor.com/guides/supporters.html",
+    "new_install_prompt_erase": false,
+    "builds": [
+      {
+        "chipFamily": "ESP32C3",
+        "parts": [
+            { "path": "bootloader_dout_40m.bin", "offset": 0 },
+            { "path": "partitions.bin", "offset": 32768 },
+            { "path": "boot_app0.bin", "offset": 57344 },
+            { "path": "esp32-c3.bin", "offset": 65536 }
+          ]
+      },
+      {
+        "chipFamily": "ESP32-S3",
+        "parts": [
+          { "path": "bootloader_dout_40m.bin", "offset": 4096 },
+          { "path": "partitions.bin", "offset": 32768 },
+          { "path": "boot_app0.bin", "offset": 57344 },
+          { "path": "esp32-s3.bin", "offset": 65536 }
+        ]
+      }
+    ]
+  }
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/owkor.svg b/public/owkor.svg
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "owkor",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/public/vercel.svg b/public/vercel.svg