Added pwa manifest

.github/workflows/firebase-hosting-merge.yml

@@ -15,7 +15,7 @@ env:
   VITE_OPENAI_API_KEY: ${{ secrets.VITE_OPENAI_API_KEY }}
   VITE_ADMIN_UID: ${{ secrets.VITE_ADMIN_UID }}
   VITE_ADMIN_PIN: ${{ secrets.VITE_ADMIN_PIN }}
-  VITE_PROCESS_ENV: ${{ vars.VITE_PROCESS_ENV }}
+  VITE_PROCESS_ENV: ${{ vars.VITE_PROD_PROCESS_ENV }}
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest

.github/workflows/firebase-hosting-pull-request.yml

@@ -12,7 +12,7 @@ env:
   VITE_OPENAI_API_KEY: ${{ secrets.VITE_OPENAI_API_KEY }}
   VITE_ADMIN_UID: ${{ secrets.VITE_ADMIN_UID }}
   VITE_ADMIN_PIN: ${{ secrets.VITE_ADMIN_PIN }}
-  VITE_PROCESS_ENV: ${{ vars.VITE_PROCESS_ENV }}
+  VITE_PROCESS_ENV: ${{ vars.VITE_DEV_PROCESS_ENV }}
 jobs:
   build_and_preview:
     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'

package.json

@@ -49,6 +49,8 @@
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.5",
     "vite": "^4.1.4",
-    "vite-tsconfig-paths": "^4.0.5"
+    "vite-plugin-pwa": "^0.16.4",
+    "vite-tsconfig-paths": "^4.0.5",
+    "workbox-window": "^7.0.0"
   }
 }

src/components/post/TagInput.tsx

@@ -8,75 +8,70 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 interface TagInputProps {
-   tagName: Tag[];
-   handleChangeCB: (e: SelectChangeEvent<Tag[]>) => void;
+  tagName: Tag[];
+  handleChangeCB: (e: SelectChangeEvent<Tag[]>) => void;
 }
 
 export default function TagInput(props: TagInputProps) {
-   const {tagName, handleChangeCB} = props;
+  const { tagName, handleChangeCB } = props;
 
-   return (
-      <div className="w-full mt-4">
-         <FormControl sx={{ width: '100%' }}>
-            <InputLabel id="post-tags">Add Tags</InputLabel>
-            <Select
-               labelId="post-tags"
-               id="post-tag"
-               multiple
-               value={tagName}
-               onChange={handleChangeCB}
-               input={<OutlinedInput id="select-multiple-tags" label="Add Tags" />}
-               renderValue={(selected) => (
-                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                  {selected.map((value) => (
-                     <NormalChip key={value} title={value} color="secondary" />
-                  ))}
-                  </Box>
-               )}
-               MenuProps={MenuProps}
-            >
-               {names.map((name) => (
-                  <MenuItem
-                  key={name}
-                  value={name}
-                  style={getStyles(name, tagName)}
-                  >
-                  {name}
-                  </MenuItem>
-               ))}
-            </Select>
-         </FormControl>
-      </div>
-   )
+  return (
+    <div className="w-full mt-4">
+      <FormControl sx={{ width: '100%' }}>
+        <InputLabel id="post-tags">Add Tags</InputLabel>
+        <Select
+          labelId="post-tags"
+          id="post-tag"
+          multiple
+          value={tagName}
+          onChange={handleChangeCB}
+          input={<OutlinedInput id="select-multiple-tags" label="Add Tags" />}
+          renderValue={(selected) => (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {selected.map((value) => (
+                <NormalChip key={value} title={value} color="secondary" />
+              ))}
+            </Box>
+          )}
+          MenuProps={MenuProps}
+        >
+          {names.map((name) => (
+            <MenuItem key={name} value={name} style={getStyles(name, tagName)}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
 }
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
 
 const MenuProps = {
-   PaperProps: {
-      style: {
-         maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-         width: 250,
-      },
-   },
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
 };
 
 const names: Tag[] = [
-   "college",
-   "confession",
-   "farewell",
-   "farewell2023",
-   "friendship",
-   "love",
-   "shayari",
+  'college',
+  'confession',
+  'farewell',
+  'friendship',
+  'love',
+  'shayari',
+  'breakup',
+  'cutie',
+  'soulmate',
 ];
 
 function getStyles(tagName: string, tags: readonly string[]) {
-   return {
-     fontWeight:
-       tags.indexOf(tagName) === -1
-         ? 500
-         : 700,
-   };
+  return {
+    fontWeight: tags.indexOf(tagName) === -1 ? 500 : 700,
+  };
 }

src/types/post.ts

@@ -1,49 +1,59 @@
-import { College } from "~/utils/CollegeData";
+import { College } from '~/utils/CollegeData';
 
-export type PostStatus = "approved" | "rejected" | "pending";
+export type PostStatus = 'approved' | 'rejected' | 'pending';
 
 export type PendingPostAttr = {
-   statusId: string;
-   status: PostStatus;
-}
+  statusId: string;
+  status: PostStatus;
+};
 
 export type Post = {
-   id?: string;
-   collegeData: College | null;
-   confession: string;
-   likesCount: number;
-   likes?: { [key: string]: boolean };
-   createdAt?: string;
-   reportCounts?: number;
-   commentsCount?: number;
-   isAdmin?: boolean;
-   tags?: Tag[];
-}
+  id?: string;
+  collegeData: College | null;
+  confession: string;
+  likesCount: number;
+  likes?: { [key: string]: boolean };
+  createdAt?: string;
+  reportCounts?: number;
+  commentsCount?: number;
+  isAdmin?: boolean;
+  tags?: Tag[];
+};
 
 export type PostWithStatus = Post & PendingPostAttr;
 
 export type TextModerationResult = {
-   "hate": boolean;
-   "hate/threatening": boolean;
-   "self-harm": false,
-   "sexual": false,
-   "sexual/minors": false,
-   "violence": false,
-   "violence/graphic": false
-}
+  hate: boolean;
+  'hate/threatening': boolean;
+  'self-harm': false;
+  sexual: false;
+  'sexual/minors': false;
+  violence: false;
+  'violence/graphic': false;
+};
 
 export type TextModerationReturnType = {
-   isViolatingContent: boolean;
-   message: string | undefined;
-   error?: boolean;
-}
+  isViolatingContent: boolean;
+  message: string | undefined;
+  error?: boolean;
+};
 
 export type PostComment = {
-   id?: string;
-   comment: string;
-   authorName: string;
-   authorPhotoUrl: string;
-   createdAt: string;
-}
-
-export type Tag = "college" | "confession" | "farewell" | "farewell2023" | "friendship" | "love" | "shayari";
+  id?: string;
+  comment: string;
+  authorName: string;
+  authorPhotoUrl: string;
+  createdAt: string;
+};
+
+export type Tag =
+  | 'college'
+  | 'confession'
+  | 'farewell'
+  | 'farewell2023'
+  | 'friendship'
+  | 'love'
+  | 'shayari'
+  | 'breakup'
+  | 'cutie'
+  | 'soulmate';

vite.config.ts

@@ -1,8 +1,44 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa';
+import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+const manifestForPlugin: Partial<VitePWAOptions> = {
+  registerType: 'prompt',
+  includeAssets: ['confess-me-logo.png'],
+  manifest: {
+    name: 'Secret confession application',
+    short_name: 'secret confession',
+    description:
+      'Share your secret crush or love anonymously on Secret Confession, the safe and supportive platform for sharing your deepest feelings.',
+    icons: [
+      {
+        src: './assets/confess-me-logo.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: './assets/confess-me-logo.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+      {
+        src: './assets/confess-me-logo.png',
+        sizes: '225x225',
+        type: 'image/png',
+        purpose: 'any maskable',
+      },
+    ],
+    orientation: 'portrait',
+    display: 'standalone',
+    scope: '/',
+    start_url: '/',
+    theme_color: '#333346',
+    background_color: '#6d6d86',
+  },
+};
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()]
-})
+  plugins: [react(), tsconfigPaths(), VitePWA(manifestForPlugin)],
+});