Web App Manifest - Save as desktop or mobile app (LAION-AI#3632)

sun-jay · web-flow · commit 9a208ea37493 · 2023-08-08T17:04:18.000+02:00
From issue LAION-AI#3548 This commit adds a manifest file that allows users to save the website on desktop or mobile, see [this documentation](https://developer.mozilla.org/en-US/docs/Web/Manifest). It makes an icon that can be added to dock, mobile homescreen, etc. Changes in this PR: - Add a smaller logo file for certain mobile platforms - Add manifest.json that contains logos, titles, descriptions, etc. - Add a link to manifest.json in _document.tsx <img width="700" alt="Screenshot 2023-08-03 at 8 23 43 PM" src="https://github.com/LAION-AI/Open-Assistant/assets/80140457/f86946cb-62d7-42a6-a9ed-4a493b91d1da"> <img width = "300" alt ="mobile icon" src = "https://github.com/LAION-AI/Open-Assistant/assets/80140457/8f81a8ba-3c57-4fb1-98a0-b20a37a188bd"/>
diff --git a/website/public/images/logos/logo_192x192.png b/website/public/images/logos/logo_192x192.png
diff --git a/website/public/manifest.json b/website/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "Open Assistant",
+  "short_name": "Open Assistant",
+  "description": "Open Assistant is a project meant to give everyone access to a great chat based large language model.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3182CE",
+  "icons": [
+    {
+      "src": "/images/logos/logo.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/logos/logo_192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx
@@ -4,6 +4,7 @@ export default function Document() {
   return (
     <Html className="h-full antialiased" lang="en">
       <Head>
+        <link rel="manifest" href="/manifest.json" />
         <link rel="shortcut icon" type="image/png" href="/images/logos/favicon.png" />
       </Head>
       <body className="flex h-full flex-col">
