Allow installing this app as a Web App (#419)

* added an icon of 512x512 for the manifest

* added a web app manifest

* added a screenshot for richer install on mobile

* added a screenshot for richer install ui on desktop

* added a document to include the manifest

* fixed the command to generate a better auth secret

* moved the link tag directly into the PageHead component

.env.example

@@ -2,7 +2,7 @@
 
 # Required environment variables
 NEXT_PUBLIC_BASE_URL= # e.g. https://kan.bn
-BETTER_AUTH_SECRET= # Random 32+ char string (can gen with: openssl rand -base64 24 | tr -dc 'a-zA-Z0-9' | head -c 32)
+BETTER_AUTH_SECRET= # Random 32+ char string (can gen with: openssl rand -base64 26 | tr -dc 'a-zA-Z0-9' | head -c 32)
 
 # Fill if you want to use an external database
 POSTGRES_URL= # e.g. postgresql://kan:your_password@your_host:5432/kan

apps/web/public/manifest.json

@@ -0,0 +1,39 @@
+{
+  "background_color": "#000000",
+  "categories": [
+    "business",
+    "productivity",
+    "utilities"
+  ],
+  "description": "The open source Trello alternative.",
+  "display": "standalone",
+  "icons": [
+    {
+      "sizes": "512x512",
+      "src": "/icon-512.png",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "id": "/",
+  "screenshots": [
+    {
+      "sizes": "1624x1561",
+      "src": "/screenshot-wide.png",
+      "type": "image/png",
+      "form_factor": "wide"
+    },
+    {
+      "sizes": "1290x2796",
+      "src": "/screenshot-narrow.png",
+      "type": "image/png",
+      "form_factor": "narrow"
+    }
+  ],
+  "orientation": "portrait-primary",
+  "name": "Kan.bn | The open source alternative to Trello",
+  "scope": "/",
+  "short_name": "Kan.bn",
+  "start_url": "/",
+  "theme_color": "#000000"
+}

apps/web/src/components/PageHead.tsx

@@ -8,6 +8,7 @@ export const PageHead = ({ title }: { title: string }) => {
         name="viewport"
         content="width=device-width, initial-scale=1, maximum-scale=1"
       />
+      <link rel="manifest" href="/manifest.json" />
     </Head>
   );
 };