style: fix PWA basic styling

Technoculture · Dec 11, 2023 · 629817d · 629817d · vercel · Dec 11, 2023
1 parent 547022e
commit 629817d
Show file tree

Hide file tree

Showing 46 changed files with 242 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "migrate:gen": "drizzle-kit generate:sqlite --out src/lib/db/migrations --schema src/lib/db/schema.ts",
     "migrate:push": "node -r esbuild-register src/lib/db/migrate.ts",
     "migrations:drop": "drizzle-kit drop --config=drizzle.config.ts",
-    "pre-commit": "yarn format && yarn lint:fix && yarn type-check"
+    "pre-commit": "yarn format && yarn lint:fix && yarn type-check",
+    "assets": "npx pwa-asset-generator echoes.png --padding \"calc(50vh - 25%) calc(50vw - 25%)\" -q 100 --dark-mode --background \"#03050A\" -m ./manifest.json --favicon"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.449.0",
@@ -105,6 +106,7 @@
     "eslint-plugin-unused-imports": "3.0.0",
     "path": "0.12.7",
     "postcss": "8.4.21",
+    "pwa-asset-generator": "^6.3.1",
     "tailwindcss": "3.3.1",
     "ts-node": "10.9.1",
     "webpack": "^5.89.0"

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/apple-icon-180.png b/public/apple-icon-180.png
diff --git a/public/apple-splash-dark-1125-2436.jpg b/public/apple-splash-dark-1125-2436.jpg
diff --git a/public/apple-splash-dark-1136-640.jpg b/public/apple-splash-dark-1136-640.jpg
diff --git a/public/apple-splash-dark-1170-2532.jpg b/public/apple-splash-dark-1170-2532.jpg
diff --git a/public/apple-splash-dark-1179-2556.jpg b/public/apple-splash-dark-1179-2556.jpg
diff --git a/public/apple-splash-dark-1242-2208.jpg b/public/apple-splash-dark-1242-2208.jpg
diff --git a/public/apple-splash-dark-1242-2688.jpg b/public/apple-splash-dark-1242-2688.jpg
diff --git a/public/apple-splash-dark-1284-2778.jpg b/public/apple-splash-dark-1284-2778.jpg
diff --git a/public/apple-splash-dark-1290-2796.jpg b/public/apple-splash-dark-1290-2796.jpg
diff --git a/public/apple-splash-dark-1334-750.jpg b/public/apple-splash-dark-1334-750.jpg
diff --git a/public/apple-splash-dark-1536-2048.jpg b/public/apple-splash-dark-1536-2048.jpg
diff --git a/public/apple-splash-dark-1620-2160.jpg b/public/apple-splash-dark-1620-2160.jpg
diff --git a/public/apple-splash-dark-1668-2224.jpg b/public/apple-splash-dark-1668-2224.jpg
diff --git a/public/apple-splash-dark-1668-2388.jpg b/public/apple-splash-dark-1668-2388.jpg
diff --git a/public/apple-splash-dark-1792-828.jpg b/public/apple-splash-dark-1792-828.jpg
diff --git a/public/apple-splash-dark-2048-1536.jpg b/public/apple-splash-dark-2048-1536.jpg
diff --git a/public/apple-splash-dark-2048-2732.jpg b/public/apple-splash-dark-2048-2732.jpg
diff --git a/public/apple-splash-dark-2160-1620.jpg b/public/apple-splash-dark-2160-1620.jpg
diff --git a/public/apple-splash-dark-2208-1242.jpg b/public/apple-splash-dark-2208-1242.jpg
diff --git a/public/apple-splash-dark-2224-1668.jpg b/public/apple-splash-dark-2224-1668.jpg
diff --git a/public/apple-splash-dark-2388-1668.jpg b/public/apple-splash-dark-2388-1668.jpg
diff --git a/public/apple-splash-dark-2436-1125.jpg b/public/apple-splash-dark-2436-1125.jpg
diff --git a/public/apple-splash-dark-2532-1170.jpg b/public/apple-splash-dark-2532-1170.jpg
diff --git a/public/apple-splash-dark-2556-1179.jpg b/public/apple-splash-dark-2556-1179.jpg
diff --git a/public/apple-splash-dark-2688-1242.jpg b/public/apple-splash-dark-2688-1242.jpg
diff --git a/public/apple-splash-dark-2732-2048.jpg b/public/apple-splash-dark-2732-2048.jpg
diff --git a/public/apple-splash-dark-2778-1284.jpg b/public/apple-splash-dark-2778-1284.jpg
diff --git a/public/apple-splash-dark-2796-1290.jpg b/public/apple-splash-dark-2796-1290.jpg
diff --git a/public/apple-splash-dark-640-1136.jpg b/public/apple-splash-dark-640-1136.jpg
diff --git a/public/apple-splash-dark-750-1334.jpg b/public/apple-splash-dark-750-1334.jpg
diff --git a/public/apple-splash-dark-828-1792.jpg b/public/apple-splash-dark-828-1792.jpg
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/echoes.png b/public/echoes.png
diff --git a/public/favicon-196.png b/public/favicon-196.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/manifest-icon-192.maskable.png b/public/manifest-icon-192.maskable.png
diff --git a/public/manifest-icon-512.maskable.png b/public/manifest-icon-512.maskable.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -5,24 +5,28 @@
   "description": "Collaborative Platform for Researchers. Designed for Humans and AIs.",
   "icons": [
     {
-      "src": "./logo72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
+      "src": "manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
     },
     {
-      "src": "./logo192x192.png",
+      "src": "manifest-icon-192.maskable.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "./logo384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
+      "src": "manifest-icon-512.maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
     },
     {
-      "src": "./logo512x512.png",
+      "src": "manifest-icon-512.maskable.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "theme_color": "#03050A",
@@ -31,4 +35,4 @@
   "scope": ".",
   "display": "standalone",
   "orientation": "portrait"
-}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,7 +12,7 @@ export const metadata = {
   description: "Seek using Research Agents",
   manifest: "/manifest.json",
   viewport:
-    "minimum-scale=1.0, initial-scale=1.0, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+    "minimum-scale=1.0, initial-scale=1.0, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover",
 };
 
 export default function RootLayout({
@@ -35,56 +35,224 @@ export default function RootLayout({
         className={`${inter.className} dark h-full scroll-smooth antialiased`}
       >
         <head>
-          <link rel="icon" href="/favicon.ico" sizes="any" />
           <link
-            rel="apple-touch-icon"
-            href="/apple-touch-icon.png"
+            rel="icon"
             type="image/png"
-            sizes="128x128"
+            sizes="196x196"
+            href=" /favicon-196.png"
           />
-          <meta name="application-name" content="Echoes" />
+          <link rel="apple-touch-icon" href="/apple-icon-180.png" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
-          <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-          <meta name="apple-mobile-web-app-title" content="Echoes" />
-          <meta name="description" content="Collaborative Platform for Researchers. Designed for Humans and AIs." />
-          <meta name="format-detection" content="telephone=no" />
           <meta name="mobile-web-app-capable" content="yes" />
-          <meta name="msapplication-config" content="/icons/browserconfig.xml" />
-          <meta name="msapplication-TileColor" content="#2B5797" />
-          <meta name="msapplication-tap-highlight" content="no" />
-          <meta name="theme-color" content="#000000" />
 
-          <link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" />
-          <link rel="apple-touch-icon" sizes="152x152" href="/icons/touch-icon-ipad.png" />
-          <link rel="apple-touch-icon" sizes="180x180" href="/icons/touch-icon-iphone-retina.png" />
-          <link rel="apple-touch-icon" sizes="167x167" href="/icons/touch-icon-ipad-retina.png" />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2048-2732.jpg"
+            media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2732-2048.jpg"
+            media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1668-2388.jpg"
+            media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2388-1668.jpg"
+            media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1536-2048.jpg"
+            media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2048-1536.jpg"
+            media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1668-2224.jpg"
+            media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2224-1668.jpg"
+            media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1620-2160.jpg"
+            media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2160-1620.jpg"
+            media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1290-2796.jpg"
+            media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2796-1290.jpg"
+            media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1179-2556.jpg"
+            media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2556-1179.jpg"
+            media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1284-2778.jpg"
+            media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2778-1284.jpg"
+            media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1170-2532.jpg"
+            media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2532-1170.jpg"
+            media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1125-2436.jpg"
+            media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2436-1125.jpg"
+            media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1242-2688.jpg"
+            media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2688-1242.jpg"
+            media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-828-1792.jpg"
+            media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1792-828.jpg"
+            media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1242-2208.jpg"
+            media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-2208-1242.jpg"
+            media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-750-1334.jpg"
+            media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1334-750.jpg"
+            media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-640-1136.jpg"
+            media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+          />
+          <link
+            rel="apple-touch-startup-image"
+            href="/apple-splash-1136-640.jpg"
+            media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+          />
 
-          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+          <meta name="application-name" content="Echoes" />
+          <meta name="mobile-web-app-capable" content="yes" />
+          <meta
+            name="apple-mobile-web-app-status-bar-style"
+            content="black-translucent"
+          />
+          <meta name="apple-mobile-web-app-title" content="Echoes" />
+          <meta
+            name="description"
+            content="Collaborative Platform for Researchers. Designed for Humans and AIs."
+          />
+          <meta name="format-detection" content="telephone=no" />
+          <meta name="msapplication-TileColor" content="#03050A" />
+          <meta name="msapplication-tap-highlight" content="no" />
+          <meta
+            name="theme-color"
+            media="(prefers-color-scheme: dark)"
+            content="black"
+          />
 
-          <link rel="manifest" href="/manifest.json" />
-          <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
-          <link rel="shortcut icon" href="/favicon.ico" />
-          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
+          />
 
           <meta name="twitter:card" content="summary" />
           <meta name="twitter:url" content="https://echoes.team" />
           <meta name="twitter:title" content="Echoes" />
-          <meta name="twitter:description" content="Collaborative Platform for Researchers. Designed for Humans and AIs." />
-          <meta name="twitter:image" content="https://echoes.team/android-chrome-192x192.png" />
+          <meta
+            name="twitter:description"
+            content="Collaborative Platform for Researchers. Designed for Humans and AIs."
+          />
+          <meta
+            name="twitter:image"
+            content="https://echoes.team/android-chrome-192x192.png"
+          />
           <meta name="twitter:creator" content="@satiyum" />
           <meta property="og:type" content="website" />
           <meta property="og:title" content="Echoes" />
-          <meta property="og:description" content="Collaborative Platform for Researchers. Designed for Humans and AIs." />
+          <meta
+            property="og:description"
+            content="Collaborative Platform for Researchers. Designed for Humans and AIs."
+          />
           <meta property="og:site_name" content="Echoes" />
           <meta property="og:url" content="https://echoes.team" />
-          <meta property="og:image" content="https://echoes.team/apple-touch-icon.png" />
+          <meta
+            property="og:image"
+            content="https://echoes.team/apple-icon-180.png"
+          />
 
           <title>Echoes</title>
         </head>
         <body className="bg-background">
           <Providers>
-            <div className="flex-col flex-grow">{children}</div>
+            <div 
+              style = {{ WebkitTapHighlightColor: "transparent" }}
+              className="flex-col flex-grow">{children}</div>
           </Providers>
         </body>
       </html>