feat: added manifest and necessary icons for pwa

README.md

@@ -0,0 +1,90 @@
+
+# job-search-portal (Jobber)
+
+[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
+
+This project is a job search portal that allows users to search for jobs and apply for them.
+
+The generic name *job-search-portal* was the initial project name. During development, the more brand-ready name *Jobber* was born.
+
+## Demo
+
+Deployment should be available at: [Jobber](https://jobber.benelfen.com)
+
+## Tech Stack
+
+**Client:** Ionic, React, Auth0
+
+**Server:** TRPC, Prisma, PostgreSQL
+
+**Deployment:** Docker, Compose
+
+## Run Locally
+
+Clone the project
+
+```bash
+git clone https://github.com/ElfenB/job-search-portal.git
+```
+
+Go to the project directory
+
+```bash
+cd job-search-portal
+```
+
+Make sure, environment variables are specified
+
+```bash
+cp .env.example .env
+  # Edit as required
+```
+
+Setup database if required
+
+```bash
+# Install Postgres Helm Chart
+task -d postgres prepare
+
+# Deploy database to K8s cluster (e.g. with Docker Desktop or Minikube)
+task -d postgres deploy
+
+# Get Postgres password
+task -d posgres get-pass
+
+# Tunnel database
+task -d postgres port-forward
+```
+
+Start the server (dependencies should be automatically installed by predev script)
+
+```bash
+# Frontend
+npm run dev
+
+# Migrate database
+npm run db:migrate-dev
+
+# Backend
+npm run dev:server
+```
+
+## Deployment
+
+To deploy this project run
+
+```bash
+docker compose up -d --build
+```
+
+## Authors
+
+- [@ElfenB](https://www.github.com/ElfenB)
+
+## Acknowledgements
+
+This README was generated using [readme.so](https://readme.so/)
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

index.html

@@ -14,9 +14,16 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
 
-    <link rel="manifest" href="/manifest.json" />
+    <!-- Generated using https://realfavicongenerator.net/ -->
+    <meta name="msapplication-TileColor" content="#038260" />
+    <meta name="theme-color" content="#038260" />
 
-    <link rel="shortcut icon" type="image/png" href="/jobber-dark.svg" />
+    <!-- Generated using https://realfavicongenerator.net/ -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#038260" />
 
     <!-- add to home screen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#038260</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "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": "#038260",
+    "background_color": "#038260",
+    "display": "standalone"
+}

src/components/ChatList.consts.ts

@@ -1,2 +1,2 @@
 // Source: https://ionicframework.com/docs/img/demos/avatar.svg
-export const fallbackUserImage = './avatar.svg';
+export const fallbackUserImage = './assets/avatar.svg';

src/components/Logo.tsx

@@ -36,7 +36,7 @@ export function Logo({ slot, style }: Props) {
     >
       <img
         alt="Jobber logo"
-        src={darkMode ? '/jobber-dark.svg' : '/jobber.svg'}
+        src={darkMode ? '/assets/jobber-dark.svg' : '/assets/jobber.svg'}
         style={{ height: '3rem', rotate: rotate ? '30deg' : undefined, transition: 'rotate 0.25s ease', ...style }}
       />
     </span>

src/components/UserProfile.tsx

@@ -14,17 +14,15 @@ import {
   IonListHeader,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
+import { fallbackUserImage } from './ChatList.consts';
 import { Rating } from './Rating';
 
 export function UserProfile() {
   const { t } = useTranslation();
   const { isLoading, user } = useAuth0();
 
   const userImage = useMemo(
-    () =>
-      !user?.picture || user.picture.length === 0
-        ? 'https://ionicframework.com/docs/img/demos/avatar.svg'
-        : user.picture,
+    () => (!user?.picture || user.picture.length === 0 ? fallbackUserImage : user.picture),
     [user?.picture],
   );
 

src/main.tsx

@@ -24,7 +24,6 @@ root.render(
 );
 
 // FOCUS:
-// - Add feedback button inside app (e.g. mailto:[email protected] ==> check mail settings)
 // - Add possibility to accept jobs
 
 // TODO: Add chat functionality (BE and FE) ==> Look for libraries

vite.config.ts

@@ -1,3 +1,5 @@
+/* eslint-disable camelcase -- Manifest naming convention */
+
 import legacy from '@vitejs/plugin-legacy';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
@@ -11,6 +13,25 @@ export default defineConfig({
   plugins: [react(), legacy(), VitePWA({
     devOptions: {
       enabled: true
-    }, registerType: 'autoUpdate'
+    },
+    manifest: {
+      description: 'Job Search Portal',
+      icons: [
+        {
+          sizes: '192x192',
+          src: 'android-chrome-192x192.png',
+          type: 'image/png'
+        },
+        {
+          sizes: '512x512',
+          src: 'android-chrome-512x512.png',
+          type: 'image/png'
+        }
+      ],
+      name: 'Jobber',
+      short_name: 'Jobber',
+      theme_color: '#038260'
+    },
+    registerType: 'autoUpdate'
   })],
 });