add nprogress and custom google fonts for sans/mono

This commit is contained in:
spencerwooo 2021-12-18 12:59:40 +08:00
parent 5889a5d9dc
commit c778c6d94a
No known key found for this signature in database
GPG Key ID: 24CD550268849CA0
7 changed files with 58 additions and 20 deletions

View File

@ -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="flex items-center justify-between w-full max-w-5xl mx-auto">
<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 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">
<Image src={siteConfig.icon} alt="icon" width="32" height="32" />
<span className="sm:block hidden">{siteConfig.title}</span>
<a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
<Image src={siteConfig.icon} alt="icon" width="28" height="28" />
<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"

View File

@ -1,13 +1,13 @@
{
"icon": "/icons/128.png",
"title": "Spencer's OneDrive Index",
"title": "spencer's onedrive index",
"maxItems": 100,
"googleFont": "Inter",
"googleFontWeights": [
"400",
"700"
"googleFontSans": "Overpass",
"googleFontMono": "Overpass Mono",
"googleFontLinks": [
"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"

33
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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

View File

@ -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
href={`https://fonts.googleapis.com/css2?family=${
siteConfig.googleFont
}:wght@${siteConfig.googleFontWeights.join(';')}&display=swap`}
rel="stylesheet"
/>
{siteConfig.googleFontLinks.map(link => (
<link key={link} rel="stylesheet" href={link} />
))}
</Head>
<body>
<Main />

View File

@ -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: {