1. added logos for manifest and other pwa optimisations

2. added CD for frontend
shlok-007 · Jun 4, 2024 · fbf279c · fbf279c
1 parent d16e907
commit fbf279c
Show file tree

Hide file tree

Showing 18 changed files with 103 additions and 33 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -22,3 +22,8 @@ jobs:
           cd server
           npm install --only=prod
           pm2 restart gotoServer
+
+          cd ../client
+          npm install --only=prod
+          npm run build
+          pm2 restart gotoFrontend
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,5 @@ temp.txt
 client/src/pages/PrevLoginPage.tsx
 
 server/jwk.json
+
+/zz_icons
diff --git a/client/package.json b/client/package.json
@@ -21,7 +21,8 @@
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "universal-cookie": "^7.1.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -46,8 +47,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/icons/apple-icon-180.png b/client/public/icons/apple-icon-180.png
diff --git a/client/public/icons/manifest-icon-192.maskable.png b/client/public/icons/manifest-icon-192.maskable.png
diff --git a/client/public/icons/manifest-icon-512.maskable.png b/client/public/icons/manifest-icon-512.maskable.png
diff --git a/client/public/index.html b/client/public/index.html
@@ -3,11 +3,15 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
+    <link rel="apple-touch-icon" href="icons/apple-icon-180.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A travel companion matching application that allows users to find travel companions for their desired destinations and dates designed especially for IIT BBS."
     />
     <!-- link css file -->
     <link rel="stylesheet" href="/index_style.css">
@@ -41,5 +45,10 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script>
+      if(ServiceWorker in navigator){
+        navigator.serviceWorker.register('/service-worker.js');
+      }
+    </script>
   </body>
 </html>
diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -1,21 +1,31 @@
 {
   "short_name": "GoTo",
   "name": "GoTogether",
-  "icons": [
+  "icons": 
+  [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "icons/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "logo192.png",
+      "src": "icons/manifest-icon-512.maskable.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "sizes": "192x192"
+      "purpose": "any"
     },
     {
-      "src": "logo512.png",
+      "src": "icons/manifest-icon-512.maskable.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "sizes": "512x512"
+      "purpose": "maskable"
     }
   ],
   "start_url": ".",

diff --git a/client/public/service-worker.js b/client/public/service-worker.js
@@ -1,5 +1,3 @@
-// service-worker.js
-
 self.addEventListener('push', event => {
   const payload = event.data ? event.data.json() : { name: '', destination: '', date: '', time: '' };
   let message;
@@ -9,7 +7,7 @@ self.addEventListener('push', event => {
     message = `${payload.name} is returning from ${payload.destination} on ${payload.date} at ${payload.time}. Click here to get contact details!`
   const notificationOptions = {
     body: message,
-    icon:"/logo192.png",
+    icon:"icons/manifest-icon-192.maskable.png",
     data: {
       destination: payload.destination,
       date: payload.date,
@@ -27,9 +25,24 @@ self.addEventListener('notificationclick', event => {
   event.notification.close();
 
   const payload = event.notification.data;
-  const url = `https://goto-iitbbs.vercel.app/showCompanions/${payload.destination}/${payload.date}/${payload.time}/${payload.dir}`;
+  const url = `https://goto.webnd-iitbbs.org/showCompanions/${payload.destination}/${payload.date}/${payload.time}/${payload.dir}`;
 
   event.waitUntil(
     clients.openWindow(url)
   );
 });
+
+importScripts(
+  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
+);
+
+workbox.routing.registerRoute(
+  ({request}) => request.destination === 'image',
+  new workbox.strategies.CacheFirst()
+);
+
+workbox.routing.registerRoute(
+  ({url}) => url.origin === 'https://fonts.googleapis.com' ||
+              url.origin === 'https://fonts.gstatic.com',
+  new workbox.strategies.StaleWhileRevalidate()
+);
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -10,6 +10,8 @@ import { useLocation } from "react-router-dom"
 import { useEffect } from "react"
 import { useToast } from "../utils/ToastContext"
 
+import logo from "../logo.png"
+
 const Navbar: React.FC<navbarProps> = ({isLogged, profile, siteName, onLogout}) => {
   const navigate = useNavigate();
   // const openTripsDialogButton = useRef<HTMLButtonElement>(null);
@@ -140,14 +142,27 @@ const Navbar: React.FC<navbarProps> = ({isLogged, profile, siteName, onLogout})
       </dialog>
 
       <nav className="navbar">
-
-        <div className="navbar__site-name" onClick={()=> navigate("/home")}>
-          {window.screen.width>window.screen.height || !isLogged?"GoTogether":"GoTo"}
+
+        <div className="navbar__left" onClick={()=> navigate("/home")}>
+
+          <img src={logo} alt="GoTogether" className="navbar__logo"/>
+
+          <div className="navbar__site-name">
+            {window.screen.width>window.screen.height || !isLogged?"GoTogether":"GoTo"}
+          </div>
+
         </div>
+
         {isLogged &&
         <div className="navbar__user">
 
-          <button className="user-trips" onClick={openTripsDialog}>Your Trips</button>
+          <button className="user-trips" onClick={openTripsDialog}>
+            {window.screen.width>window.screen.height?
+              "Your Trips":
+              <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 576 512"><path d="M346.3 271.8l-60.1-21.9L214 448H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H282.1l64.1-176.2zm121.1-.2l-3.3 9.1 67.7 24.6c18.1 6.6 38-4.2 39.6-23.4c6.5-78.5-23.9-155.5-80.8-208.5c2 8 3.2 16.3 3.4 24.8l.2 6c1.8 57-7.3 113.8-26.8 167.4zM462 99.1c-1.1-34.4-22.5-64.8-54.4-77.4c-.9-.4-1.9-.7-2.8-1.1c-33-11.7-69.8-2.4-93.1 23.8l-4 4.5C272.4 88.3 245 134.2 226.8 184l-3.3 9.1L434 269.7l3.3-9.1c18.1-49.8 26.6-102.5 24.9-155.5l-.2-6zM107.2 112.9c-11.1 15.7-2.8 36.8 15.3 43.4l71 25.8 3.3-9.1c19.5-53.6 49.1-103 87.1-145.5l4-4.5c6.2-6.9 13.1-13 20.5-18.2c-79.6 2.5-154.7 42.2-201.2 108z"/></svg>
+
+            }
+          </button>
 
 
           <button ref={openUserMenuBtn} onClick={openUserMenu} className="navbar__avatar-frame">

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -5,13 +5,13 @@ import App from './App';
 // import reportWebVitals from './reportWebVitals';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import { BrowserRouter } from 'react-router-dom';
-// import ReactGA from 'react-ga4';
+import ReactGA from 'react-ga4';
 import { ToastProvider } from './utils/ToastContext';
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { inject } from '@vercel/analytics';
+// import { inject } from '@vercel/analytics';
 // import { injectSpeedInsights } from '@vercel/speed-insights/*';
 
-// ReactGA.initialize(process.env.REACT_APP_GA_MEASUREMENT_ID || "" );
+ReactGA.initialize(process.env.REACT_APP_GA_MEASUREMENT_ID || "" );
 
 const queryClient = new QueryClient();
 const root = ReactDOM.createRoot(
@@ -32,7 +32,7 @@ root.render(
   </GoogleOAuthProvider>
 );
 
-inject();
+// inject();
 // injectSpeedInsights
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/client/src/logo.png b/client/src/logo.png
diff --git a/client/src/logo.svg b/client/src/logo.svg
diff --git a/client/src/styles/footer.css b/client/src/styles/footer.css
@@ -57,10 +57,10 @@ h4 {
   height: 32px;
 }
 
-.dev-social > a > svg, .contribute > a > svg {
-  /* width: 100%; */
-  /* height: 100%; */
-}
+/* .dev-social > a > svg, .contribute > a > svg {
+  width: 100%;
+  height: 100%;
+} */
 
 .powered-by {
   text-align: center;
@@ -119,4 +119,8 @@ h4 {
   h4{
     text-align: center;
   }
+
+  .user-trips{
+    padding: 0.4rem;
+  }
 }
diff --git a/client/src/styles/navbarStyle.css b/client/src/styles/navbarStyle.css
@@ -9,7 +9,6 @@
   .navbar__site-name {
     font-size: 40px;
     font-weight: bold;
-    cursor: pointer;
 
     background-color: var(--text);
     background-image: linear-gradient(120deg, var(--primary), var(--accent));
@@ -23,6 +22,20 @@
     transition: 500ms ease-in-out;
   }
 
+  .navbar__logo{
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+
+  .navbar__left{
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+  }
+
   .navbar__site-name:hover{
     background-image: linear-gradient(240deg, var(--primary), var(--accent));
   }
@@ -62,6 +75,8 @@
     cursor: pointer;
     transition: 250ms ease-in-out;
     height: 40px;
+    display: flex;
+    align-items: center;
   }
 
   .user-trips-title{

diff --git a/client/src/utils/getSubscriptionObject.ts b/client/src/utils/getSubscriptionObject.ts
@@ -2,7 +2,7 @@ export default async function getSubscriptionObject(email: string) {
   if ('serviceWorker' in navigator && 'PushManager' in window) {
     try {
       // Register a service worker
-      let registration = await navigator.serviceWorker.register('service-worker.js', { scope: '/' });
+      let registration = await navigator.serviceWorker.register('/service-worker.js', { scope: '/' });
 
       // Update the service worker and get the subscription
       // const subscription = await registration.update().then(registration => registration.pushManager.getSubscription());

diff --git a/server/server.js b/server/server.js
@@ -33,7 +33,7 @@ app.use(cookieParser());
 
 const limiter = rateLimit({
   windowMs: 1*60*1000,
-  max: process.env.NODE_ENV === 'production' ? 60 : 1000,
+  max: process.env.NODE_ENV === 'production' ? 30 : 1000,
   keyGenerator: (req) => {
     const authToken = req.cookies.jwt_auth_token;
     if (authToken) {