Add JsonLd

devxprite · Apr 7, 2024 · 6f5ea7b · 6f5ea7b
1 parent 42f6c78
commit 6f5ea7b
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 50 deletions.
diff --git a/app/(home)/SearchBox.js b/app/(home)/SearchBox.js
@@ -10,10 +10,10 @@ const SearchBox = ({ formAction }) => {
                 className="block flex-1 bg-transparent pl-4 text-lg md:text-xl outline-none"
                 name="username"
                 type="text"
-                placeholder="Enter your github Username"
+                placeholder="Enter github Username"
             />
 
-            <button className="w-14 bg-gray-700 px-5 md:py-3.5 hover:bg-gray-600 group-focus-within:bg-gray-600 group-focus-within:text-white md:w-20  ">
+            <button className="w-14 bg-gray-700 px-5 py-3 md:py-3.5 hover:bg-gray-600 group-focus-within:bg-gray-600 group-focus-within:text-white md:w-20  ">
                 <FaSearch className="mx-auto text-xl md:text-2xl" />
             </button>
         </form>

diff --git a/app/(home)/page.js b/app/(home)/page.js
@@ -4,8 +4,11 @@ import RecentProfiles from '@/models/RecentProfiles';
 import connectDb from '@/lib/connectDb';
 import Link from 'next/link';
 import GridContainer from '@/components/GridContainer';
+import { unstable_noStore as noStore } from 'next/cache';
+import Header from '@/components/Header';
 
 export default async function Home() {
+    noStore();
     await connectDb();
     const recenetProfiles = await RecentProfiles.find({}).sort({ updatedAt: 'desc' }).limit(8);
 
@@ -16,17 +19,20 @@ export default async function Home() {
     };
 
     return (
-        <main className="px-4">
-            <div className="mx-auto max-w-screen-md pt-[15vh] text-center md:pt-[16vh]">
-                <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
-                </p>
+        <>
+            <Header />
 
-                <SearchBox formAction={formAction} />
-            </div>
+            <main className="px-4">
+                <div className="mx-auto max-w-screen-md pt-[15vh] text-center md:pt-[12vh]">
+                    <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
+                    </p>
 
-            {/* <div className="mx-auto mt-28 max-w-screen-xl text-left md:mt-40">
+                    <SearchBox formAction={formAction} />
+                </div>
+
+                {/* <div className="mx-auto mt-28 max-w-screen-xl text-left md:mt-40">
                 <h2 className="text-gradient text-xl font-semibold md:text-3xl">Recent Profiles</h2>
 
                 <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-4">
@@ -50,31 +56,34 @@ export default async function Home() {
                     ))}
                 </div>
             </div> */}
-            <div className="mx-auto mt-32 max-w-screen-xl md:mt-36">
-                <GridContainer
-                    className={'grid-cols-1 gap-3 md:grid-cols-4'}
-                    name={'Recent Profiles'}
-                    description={'Profiles that have been viewed recently'}
-                >
-                    {recenetProfiles.map(profile => (
-                        <Link
-                            key={profile._id}
-                            href={`/${profile.username}`}
-                            className="box flex items-center gap-3 md:gap-5 text-left"
-                        >
-                            <img
-                                src={profile.avatarUrl}
-                                alt={profile.username}
-                                className="grow-0 size-10 smd:ize-12 rounded-full"
-                            />
-                            <div>
-                                <p className="text-base font-semibold md:text-lg">{profile.name ?? profile.username}</p>
-                                <p className="text-sm text-gray-400 md:text-base">@{profile.username}</p>
-                            </div>
-                        </Link>
-                    ))}
-                </GridContainer>
-            </div>
-        </main>
+                <div className="mx-auto mt-32 max-w-screen-xl md:mt-36">
+                    <GridContainer
+                        className={'grid-cols-1 gap-3 md:grid-cols-4'}
+                        name={'Recent Profiles'}
+                        description={'Profiles that have been viewed recently'}
+                    >
+                        {recenetProfiles.map(profile => (
+                            <Link
+                                key={profile._id}
+                                href={`/${profile.username}`}
+                                className="box flex items-center gap-3 text-left md:gap-5"
+                            >
+                                <img
+                                    src={profile.avatarUrl}
+                                    alt={profile.username}
+                                    className="size-10 grow-0 rounded-full md:size-12"
+                                />
+                                <div>
+                                    <p className="text-base font-semibold md:text-lg">
+                                        {profile.name ?? profile.username}
+                                    </p>
+                                    <p className="-mt-1 text-sm text-gray-400 md:text-base">@{profile.username}</p>
+                                </div>
+                            </Link>
+                        ))}
+                    </GridContainer>
+                </div>
+            </main>
+        </>
     );
 }
diff --git a/app/[username]/layout.js b/app/[username]/layout.js
@@ -0,0 +1,11 @@
+import Header from '@/components/Header';
+
+const layout = ({ children }) => {
+    return (
+        <div>
+            {children}
+        </div>
+    );
+};
+
+export default layout;
diff --git a/app/[username]/page.js b/app/[username]/page.js
@@ -15,6 +15,7 @@ import fetchActivity from '@/utils/fetchActivity';
 import { notFound } from 'next/navigation';
 import RecentProfiles from '@/models/RecentProfiles';
 import connectDb from '@/lib/connectDb';
+import RateLimit from '@/components/RateLimit';
 
 // meta data
 export const generateMetadata = async ({ params: { username } }) => {
@@ -65,7 +66,8 @@ const page = async ({ params: { username } }) => {
     } = await fetchUserData(username);
 
     return (
-        <main className="mx-auto max-w-screen-xl space-y-8 px-3 pb-10 pt-16 md:space-y-16">
+        <main className="mx-auto max-w-screen-xl space-y-8 px-3 pb-10 -mt-8 md:space-y-16">
+            <RateLimit />
             <UserInfo username={username} {...userInfo} />
             <Stats stats={userStats} />
             <Languages languages={languagesSize} />

diff --git a/app/layout.js b/app/layout.js
@@ -2,13 +2,15 @@ import './globals.scss';
 import GithubCorner from '@/components/GithubCorner';
 import ParticlesJs from '@/components/ParticlesJs';
 import ChartInit from '@/components/ChartInit';
-import { GoogleTagManager } from '@next/third-parties/google';
+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 = {
     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.',
-    colorScheme: 'dark',
     openGraph: {
         title: 'Git Glance',
         images: `${process.env.BASE_URL}/banner.png`,
@@ -19,22 +21,46 @@ export const metadata = {
 };
 
 export default function RootLayout({ children }) {
+    const jsonLd = {
+        '@context': 'https://schema.org',
+        '@type': 'WebSite',
+        name: 'GitGlance',
+        url: process.env.BASE_URL,
+        alternateName: [
+            'GitHub Profile Visualizer',
+            'GitHub Profile Analyzer',
+            'GitHub Profile Insights',
+            'GitHub Profile Stats',
+        ],
+
+        '@type': 'SoftwareApplication',
+        name: 'GitGlance',
+        operatingSystem: 'Web',
+        applicationCategory: 'DeveloperApplication',
+        offers: {
+            '@type': 'Offer',
+            price: '0',
+            priceCurrency: 'USD',
+        },
+    };
     return (
         <html lang="en">
-            <GoogleTagManager gtmId="GTM-K3M9GGRW" />
+            <GoogleAnalytics gaId="G-C2EK8WWR4Y" />
             <head>
+                <meta name="google-site-verification" content="koBxrTJwnDsFGPdjUesKqkWAgmhsZyvWWlDkwv4cOpw" />
                 <meta name="color-scheme" content="dark" />
                 <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>
 
             <body>
                 <ChartInit />
                 <ParticlesJs />
-                <GithubCorner />
-                {children}
+                <div className="min-h-[calc(100vh-5rem)]">{children}</div>
+                <Footer />
             </body>
         </html>
     );

diff --git a/app/loading.js b/app/loading.js
@@ -2,7 +2,7 @@ import { CgSpinner } from 'react-icons/cg';
 
 const loading = () => {
     return (
-        <div className="grid min-h-screen place-items-center">
+        <div className="grid min-h-[calc(100vh-6rem)] place-items-center">
             <CgSpinner className="animate-spin text-5xl md:text-6xl" />
         </div>
     );

diff --git a/app/sitemap.js b/app/sitemap.js
@@ -4,13 +4,22 @@ import RecentProfiles from '@/models/RecentProfiles';
 export default async function sitemap() {
     await connectDb();
     const recenetProfiles = await RecentProfiles.find({}).sort().limit(250);
-    const baseUrl = 'https://git-glance.vercel.app';
+    const baseUrl = process.env.BASE_URL;
 
-    const sitemap = recenetProfiles.map(profile => ({
+    const sitemapProfils = recenetProfiles.map(profile => ({
         url: `${baseUrl}/${profile.username}`,
         changefreq: 'monthly',
         priority: 0.7,
     }));
 
+    const sitemap = [
+        {
+            url: baseUrl,
+            changefreq: 'weekly',
+            priority: 1,
+        },
+        ...sitemapProfils
+    ]
+
     return sitemap;
 }
diff --git a/components/Footer.js b/components/Footer.js
@@ -0,0 +1,14 @@
+const Footer = () => {
+    return (
+        <footer className=" mt-10 border-t border-gray-700 bg-gray-800 p-2.5 text-center text-sm text-gray-300 backdrop-brightness-150 md:text-base [&_a]:text-cyan-400 hover:[&_a]:underline">
+            <div className="mx-auto max-w-screen-lg">
+                Git Glance is built with <a href="https://nextjs.org">Nextjs v14.1.0</a> &{' '}
+                <a href="https://tailwindcss.com/">TailwindCSS</a> By{' '}
+                <a href="http://github.com/devXprite/">devxprite</a>. Source is on{' '}
+                <a href="github.com/devXprite/gitglance">Github</a>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/components/GithubCorner.js b/components/GithubCorner.js
@@ -3,7 +3,7 @@ import React from 'react';
 const GithubCorner = () => {
     return (
         <>
-            <a href="https://your-url" className="github-corner" aria-label="View source on GitHub">
+            <a href="https://github.com/devxpite/gitglance" className="github-corner" aria-label="View source on GitHub">
                 <svg
                     width="80"
                     height="80"

diff --git a/components/Header.js b/components/Header.js
@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+const Header = () => {
+    return (
+        <header className=" border-gray-700 bg-gray-900 px-3 py-3">
+            <div className="mx-auto flex max-w-screen-xl items-center">
+                <Link href="/" className="text-gradient text-xl font-bold">
+                    Git Glance
+                </Link>
+                {/* <img
+                className="ml-auto h-9"
+                 src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=434915&theme=neutral" alt="" /> */}
+            </div>
+        </header>
+    );
+};
+
+export default Header;
diff --git a/components/ParticlesJs.js b/components/ParticlesJs.js
@@ -47,7 +47,7 @@ const ParticlesJs = () => {
 
     return (
         <>
-            <Script src={'http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'} onLoad={onLoad} />
+            <Script src={'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'} onLoad={onLoad} />
             <div id="particles-js" className="fixed inset-0 z-[-1]"></div>
         </>
     );

diff --git a/components/RateLimit.js b/components/RateLimit.js
@@ -0,0 +1,32 @@
+'ues server';
+
+import githubGraphql from '@/utils/githubGraphql';
+import { unstable_noStore } from 'next/cache';
+
+const RateLimit = async () => {
+    unstable_noStore();
+    const query = `
+        query{
+            rateLimit{
+                cost
+                limit
+                remaining
+                used
+                resetAt
+            }
+        }
+    `;
+
+    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">
+            <p>
+                <span className=" text-sm font-bold md:text-base">{rateLimit.remaining}</span> requests left <br />{' '}
+                before rate-limit
+            </p>
+        </div>
+    );
+};
+
+export default RateLimit;
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    logging: {
+        fetches: {
+            fullUrl: true,
+        },
+    },
+};
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
-  "name": "gh-resumes",
+  "name": "Git Glance",
+  "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.",
   "version": "0.1.0",
   "private": true,
   "scripts": {