Update

Author: devxprite

app/(home)/loading.js

@@ -0,0 +1,12 @@
+import { CgSpinner } from 'react-icons/cg';
+
+const loading = () => {
+    return (
+        <div className="grid min-h-[calc(100vh-7.5rem)] place-items-center">
+            {/* <CgSpinner className="animate-spin text-5xl md:text-6xl" /> */}
+            <img className='w-24 md:w-32' src="/loading.gif" alt="loader" />
+        </div>
+    );
+};
+
+export default loading;

app/(home)/page.js

@@ -7,6 +7,8 @@ import GridContainer from '@/components/GridContainer';
 import { unstable_noStore as noStore } from 'next/cache';
 import Header from '@/components/Header';
 
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
 export default async function Home() {
     noStore();
     await connectDb();
@@ -23,7 +25,7 @@ export default async function Home() {
             <Header />
 
             <main className="px-4">
-                <div className="mx-auto max-w-screen-md pt-[15vh] text-center md:pt-[12vh]">
+                <div className="mx-auto max-w-screen-md text-center pt-[10vh]">
                     <h1 className="text-gradient text-4xl font-bold md:text-7xl">Git Glance</h1>
                     <p className="text-gradient mb-16 mt-2 text-xl font-medium md:text-3xl ">
                         Visualize Your GitHub Profile

app/[username]/RecentActivity.js

@@ -94,7 +94,7 @@ const RecentActivity = ({ activity }) => {
         <GridContainer name="Recent Activity" className={'grid-cols-1 md:grid-cols-1'}>
             {activity.map((event, i) => {
                 return (
-                    <div className="box overflow-hidden text-left hover:scale-100">
+                    <div key={i} className="box overflow-hidden text-left hover:scale-100">
                         <p className="text-sm text-gray-400">{new Date(event.timestamp).toLocaleString()}</p>
 
                         <div className="mt-2.5 font-medium text-gray-200 text-sm md:text-lg [&_a]:text-cyan-500 [&_a]:hover:underline">

app/[username]/UserInfo.js

@@ -19,7 +19,7 @@ const UserInfo = props => {
 
                 <div className="flex h-full flex-col text-center md:text-left">
                     <h2 className="text-gradient text-4xl font-bold md:text-6xl">{props.name || props.username}</h2>
-                    <h4 className="-mt-1 text-gray-400  md:mb-1 md:text-3xl">@{props.username}</h4>
+                    <h3 className="-mt-1 text-gray-400  md:mb-1 md:text-3xl">@{props.username}</h3>
 
                     <p className="mb-3 flex items-center justify-center md:justify-start gap-2">
                         <FaCalendar />

app/[username]/page.js

@@ -66,7 +66,7 @@ const page = async ({ params: { username } }) => {
     } = await fetchUserData(username);
 
     return (
-        <main className="mx-auto max-w-screen-xl space-y-8 px-3 pb-10 -mt-8 md:space-y-16">
+        <main className="mx-auto max-w-screen-xl space-y-8 px-3 pb-10 md:space-y-16">
             <RateLimit />
             <UserInfo username={username} {...userInfo} />
             <Stats stats={userStats} />

app/layout.js

@@ -1,22 +1,42 @@
 import './globals.scss';
-import GithubCorner from '@/components/GithubCorner';
 import ParticlesJs from '@/components/ParticlesJs';
 import ChartInit from '@/components/ChartInit';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import Footer from '@/components/Footer';
-import RateLimit from '@/components/RateLimit';
-import Header from '@/components/Header';
 
 export const metadata = {
+    metadataBase: new URL(process.env.BASE_URL),
     title: 'GitHub Profile Visualizer',
     description:
         'Gain valuable insights into your GitHub profile effortlessly. Explore your coding journey with intuitive visualizations and unlock a deeper understanding of your contributions, repositories, and activity. Dive into your GitHub universe with ease and clarity.',
+    keywords: [
+        'GitHub Profile Visualizer',
+        'GitHub Profile Analyzer',
+        'GitHub Profile Insights',
+        'GitHub Profile Stats',
+        'GitHub Profile Summary',
+        'GitHub Profile Overview',
+        'GitHub Profile Analysis',
+    ],
     openGraph: {
         title: 'Git Glance',
-        images: `${process.env.BASE_URL}/banner.png`,
+        images: `/banner.png`,
         icons: {
-            icon: '/favicon.ico',
+            icon: `/favicon.ico`,
         },
+        type: 'website',
+    },
+    alternates: {
+        canonical: '/',
+    },
+    manifest: '/site.webmanifest',
+    creator: 'devxprite',
+};
+
+export const viewport = {
+    colorScheme: 'dark',
+    verification: {
+        google: 'koBxrTJwnDsFGPdjUesKqkWAgmhsZyvWWlDkwv4cOpw',
     },
 };
 
@@ -47,12 +67,10 @@ export default function RootLayout({ children }) {
         <html lang="en">
             <GoogleAnalytics gaId="G-C2EK8WWR4Y" />
             <head>
-                <meta name="google-site-verification" content="koBxrTJwnDsFGPdjUesKqkWAgmhsZyvWWlDkwv4cOpw" />
-                <meta name="color-scheme" content="dark" />
+                <meta name="thumbnail" content={`${process.env.BASE_URL}/banner.png`} />
                 <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="/site.webmanifest" />
                 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
             </head>
 

app/loading.js

@@ -2,8 +2,9 @@ import { CgSpinner } from 'react-icons/cg';
 
 const loading = () => {
     return (
-        <div className="grid min-h-[calc(100vh-6rem)] place-items-center">
-            <CgSpinner className="animate-spin text-5xl md:text-6xl" />
+        <div className="grid min-h-[calc(100vh-7.5rem)] place-items-center">
+            {/* <CgSpinner className="animate-spin text-5xl md:text-6xl" /> */}
+            <img className='w-28 md:w-32' src="/loading.gif" alt="loader" />
         </div>
     );
 };

components/RateLimit.js

@@ -20,7 +20,7 @@ const RateLimit = async () => {
     const { rateLimit } = await githubGraphql({ query });
 
     return (
-        <div className="fixed bottom-0 right-0 z-20 border border-gray-700 bg-gray-800 px-3 md:px-4 py-2 text-xs shadow-xl shadow-gray-900 md:bottom-8 md:right-6 md:text-sm">
+        <div className="fixed bottom-0 right-0 hidden md:block z-20 border border-gray-700 bg-gray-800 px-3 md:px-4 py-2 text-xs shadow-xl shadow-gray-900 md:bottom-8 md:right-6 md:text-sm">
             <p>
                 <span className=" text-sm font-bold md:text-base">{rateLimit.remaining}</span> requests left <br />{' '}
                 before rate-limit