style: added metadata and improved loading screen

GDGVIT · Dec 31, 2023 · 97a4826 · 97a4826
1 parent 865b9c4
commit 97a4826
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -2,11 +2,46 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="description" content="With VITTY you can have easy access to your timetable no matter where you are! Simply upload your VIT timetable as text or image and never miss another class again!" />
+    <meta name="keywords" content="dscvit, timetable, vitty, firebase, krish chattejie, krish-chatterjie, yajat malhotra, yajat-malhotra, ananya george, ananya-george, vishesh-bansal, vishesh bansal, vit, gdscvit, dsc-vit, gdsc-vit, vellore-institute-of-technology, vellore institute of technology" />
+    <meta name="author" content="Krish Chatterjie, Yajat Malhotra, Ananya George & Vishesh Bansal" />
+    <meta name="copyright" content="GDSCVIT" />
+    <meta name="language" content="en" />
+    <meta name="url" content="https://vitty.dscvit.com" />
+    <meta name="category" content="VITTY - VIT Timetable App" />
+    <meta name="coverage" content="Worldwide" />
+    <meta name="rating" content="General" />
+    <meta name="og:email" content="[email protected]" />
+    <meta name="og:country-name" content="India" />
+    <meta name="og:region" content="Vellore" />
+    <meta name="og:site_name" content="VITTY - VIT Timetable App" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="VITTY - VIT Timetable App" />
+    <meta property="og:image" content="https://vitty.dscvit.com/og-image.png" />
+    <meta property="og:description" content="With VITTY you can have easy access to your timetable no matter where you are! Simply upload your VIT timetable as text or image and never miss another class again!" />
+    <meta property="og:url" content="https://vitty.dscvit.com" />
+    <meta property="og:site_name" content="VITTY" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="VITTY - VIT Timetable App" />
+    <meta name="twitter:title" content="VITTY - VIT Timetable App" />
+    <meta property="twitter:image" content="https://vitty.dscvit.com/og-image.png" />
+    <meta name="twitter:description " content="With VITTY you can have easy access to your timetable no matter where you are! Simply upload your VIT timetable as text or image and never miss another class again!" />
+    <meta name="twitter:creator " content="gdscvit" />
+    <meta itemprop="name " content="VITTY - VIT Timetable App" />
+    <meta itemprop=" description " content="With VITTY you can have easy access to your timetable no matter where you are! Simply upload your VIT timetable as text or image and never miss another class again!" />
+    <link rel="canonical " href="https://vitty.dscvit.com " />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <link rel="manifest" crossorigin="use-credentials" href="manifest.json"/>
+    <link rel="icon" href="/logo.png" />
+    <link rel="apple-touch-icon" href="/logo.png" />
+    <meta name="msapplication-TileColor" content="#041727">
+    <meta name="msapplication-TileImage" content="/logo.png">
+    <meta name="theme-color" content="#041727" />
+    <title>VITTY - VIT Timetable App</title>
   </head>
   <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -44,9 +44,12 @@ const App: React.FC = () => {
           user1.email || ""
         );
       } else {
+        localStorage.setItem("name", "");
+        initializeFromLocalStorge();
         console.log("user is null from app.tsx");
       }
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoggedIn, login]);
 
   useEffect(() => {
@@ -59,8 +62,19 @@ const App: React.FC = () => {
 
   return (
     <Template>
-      {(isLoading || name==="isloading39084*+/46848/*/") ? <Loader /> : isLoggedIn ? <Dashboard /> : <LoginPage />}
-      {showProfile && <Profile />}
+      {
+        isLoading
+          ? <Loader />
+          : !isLoggedIn
+            ?<LoginPage />
+            :name === ''
+              ? <Loader />
+              : <Dashboard />
+      }
+      {
+        showProfile &&
+        <Profile />
+      }
     </Template>
   );
 };

diff --git a/src/components/GetUserName.tsx b/src/components/GetUserName.tsx
@@ -27,7 +27,7 @@ const GetUsername: React.FC = () => {
         updateUsername(userName);
         updateToken(data.access_token);
       } else {
-        window.alert("Some error occured");
+        window.alert(data.detail);
       }
     });
   };

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -39,7 +39,7 @@ const Nav: React.FC = () => {
         {/* <img src={Logo} alt='VITTY' /> */}
       </div>
       {
-        user !== null && user !== '' &&
+        user !== null && user !== '' && user !== 'loading' &&
           <div className='user-pfp' onClick={toggle} >
             <img src={(pic !== null && pic !== '') ? pic : userIcon} alt='DP' />
           </div>

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import GetUserName from "../components/GetUserName"
 import Timetable from "./TimeTable";
 import { useAuthStore } from "../store/authStore";
+import Loader from "../components/Loader";
 
 export default function Dashboard() {
   const { uuid, username, updateToken, updateUsername, token } = useAuthStore();
@@ -30,7 +31,13 @@ export default function Dashboard() {
   }, [username, token, uuid, updateToken, updateUsername]);
   return (
     <div className="h-full w-full">
-      {username ? <Timetable/> : <GetUserName />}
+      {
+        username === null
+          ? <Loader />
+          : username === ""
+            ? <GetUserName />
+            : <Timetable />
+      }
     </div>
   );
 }
diff --git a/src/store/authStore.tsx b/src/store/authStore.tsx
@@ -39,7 +39,7 @@ export const useAuthStore = create<AuthStore>((set) => ({
   profile: "",
   username: null,
   email: "",
-  name: "isloading39084*+/46848/*/",
+  name: "loading",
   token: "",
   timetable: {},
   regNo: "", // Initialize timetable as an empty object

diff --git a/src/styles/fin.css b/src/styles/fin.css
@@ -21,6 +21,7 @@
 
   .fin-hero {
     display: none;
+    max-height: 80vh;
   }
 
   .fin-interact {
@@ -127,7 +128,8 @@
     }
 
     .fin-hero img {
-      width: 100%;
+      height: 100%;
+      width: auto;
     }
 
   }