add nprogress and custom google fonts for sans/mono

components/Navbar.tsx

@@ -40,18 +40,18 @@ const Navbar = () => {
   }
 
   return (
-    <div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
+    <div className="text-left py-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
-      <div className="flex items-center justify-between w-full max-w-5xl mx-auto">
+      <div className="flex items-center justify-between w-full max-w-5xl mx-auto px-2">
         <Toaster />
 
         <Link href="/">
-          <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2 text-xl font-bold">
+          <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
-            <Image src={siteConfig.icon} alt="icon" width="32" height="32" />
+            <Image src={siteConfig.icon} alt="icon" width="28" height="28" />
-            <span className="sm:block hidden">{siteConfig.title}</span>
+            <span className="sm:block hidden text-xl font-bold">{siteConfig.title}</span>
           </a>
         </Link>
 
-        <div className="flex items-center">
+        <div className="flex items-center text-gray-700">
           <a
             href={siteConfig.contact.github}
             target="_blank"

config/site.json

@@ -1,13 +1,13 @@
 {
   "icon": "/icons/128.png",
-  "title": "Spencer's OneDrive Index",
+  "title": "spencer's onedrive index",
   "maxItems": 100,
-  "googleFont": "Inter",
+  "googleFontSans": "Overpass",
-  "googleFontWeights": [
+  "googleFontMono": "Overpass Mono",
-    "400",
+  "googleFontLinks": [
-    "700"
+    "https://fonts.googleapis.com/css2?family=Overpass+Mono&family=Overpass:wght@400;700&display=swap"
   ],
-  "footer": "Powered by <a class=\"hover:border-b-2\" href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
+  "footer": "Powered by <a href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
   "protectedRoutes": [
     "/🌞 Private folder/u-need-a-password",
     "/🥟 Some test files/Protected route"

package-lock.json

@@ -19,6 +19,7 @@
         "emoji-regex": "^9.2.2",
         "jszip": "^3.7.1",
         "next": "^12.0.7",
+        "nextjs-progressbar": "^0.0.13",
         "preview-office-docs": "^1.0.2",
         "prismjs": "^1.23.0",
         "react": "17.0.2",
@@ -5461,6 +5462,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/nextjs-progressbar": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.13.tgz",
+      "integrity": "sha512-vuE9/j1yaFyHhMVwdlPZbGbcwnvoZZMH8fXUG+HCa+w5uojRNOMO43EL+o9YZ53QwQHsjWdfUapz+J8D/u3jFw==",
+      "dependencies": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0 <=12.x.x",
+        "react": ">= 16.0.0 <= 17.x.x"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -5520,6 +5534,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -11993,6 +12012,15 @@
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
     },
+    "nextjs-progressbar": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.13.tgz",
+      "integrity": "sha512-vuE9/j1yaFyHhMVwdlPZbGbcwnvoZZMH8fXUG+HCa+w5uojRNOMO43EL+o9YZ53QwQHsjWdfUapz+J8D/u3jFw==",
+      "requires": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -12042,6 +12070,11 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "emoji-regex": "^9.2.2",
     "jszip": "^3.7.1",
     "next": "^12.0.7",
+    "nextjs-progressbar": "^0.0.13",
     "preview-office-docs": "^1.0.2",
     "prismjs": "^1.23.0",
     "react": "17.0.2",

pages/_app.tsx

@@ -40,6 +40,7 @@ import {
 import { faGithub, faMarkdown, faTelegramPlane } from '@fortawesome/free-brands-svg-icons'
 
 import type { AppProps } from 'next/app'
+import NextNProgress from 'nextjs-progressbar'
 
 library.add(
   faFileImage,
@@ -78,6 +79,11 @@ library.add(
 )
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <NextNProgress height={1} color="rgb(63,63,70,0.9)" options={{ showSpinner: false }} />
+      <Component {...pageProps} />
+    </>
+  )
 }
 export default MyApp

pages/_document.tsx

@@ -10,12 +10,9 @@ class MyDocument extends Document {
           <link rel="icon" href="/favicon.ico" />
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
-          <link
+          {siteConfig.googleFontLinks.map(link => (
-            href={`https://fonts.googleapis.com/css2?family=${
+            <link key={link} rel="stylesheet" href={link} />
-              siteConfig.googleFont
+          ))}
-            }:wght@${siteConfig.googleFontWeights.join(';')}&display=swap`}
-            rel="stylesheet"
-          />
         </Head>
         <body>
           <Main />

tailwind.config.js

@@ -22,7 +22,8 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        sans: [`"${siteConfig.googleFont}"`, '"Noto Sans SC"', ...defaultTheme.fontFamily.sans]
+        sans: [`"${siteConfig.googleFontSans}"`, '"Noto Sans SC"', ...defaultTheme.fontFamily.sans],
+        mono: [`"${siteConfig.googleFontMono}"`, ...defaultTheme.fontFamily.mono]
       },
       colors: {
         gray: {