From 636cd96e8b9a4b897f18549a8b7abaf17c8543d6 Mon Sep 17 00:00:00 2001 From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com> Date: Mon, 11 Sep 2023 20:20:52 -0500 Subject: [PATCH] feat: add next top loader --- package-lock.json | 27 +++++++++++++++++++++++++ package.json | 8 +++++--- src/app/layout.tsx | 5 +++++ src/components/Editor.tsx | 3 +-- src/components/MarkdownContent.css | 4 ++-- src/components/ThemeButton.tsx | 5 ++--- src/hooks/index.ts | 32 ++++++++++++++++++++++++++++++ 7 files changed, 74 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 21217b9..2fdf7a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,8 @@ "eslint-config-next": "13.4.19", "next": "13.4.19", "next-themes": "^0.2.1", + "nextjs-toploader": "^1.4.2", + "nprogress": "^0.2.0", "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", @@ -1448,6 +1450,11 @@ "form-data": "^3.0.0" } }, + "node_modules/@types/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==" + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -5175,6 +5182,21 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/nextjs-toploader": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-1.4.2.tgz", + "integrity": "sha512-FS5+zCdNHLq0YA+SijkbDifOMFNayKfxkCLTiM6TIrvSaf6kAzCGlNjwgVpoG3zpampVMQSVf5L/jrWFJgs23g==", + "dependencies": { + "@types/nprogress": "^0.2.0", + "nprogress": "^0.2.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "next": ">= 6.0.0", + "react": ">= 16.0.0", + "react-dom": ">= 16.0.0" + } + }, "node_modules/no-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", @@ -5210,6 +5232,11 @@ "node": ">=0.10.0" } }, + "node_modules/nprogress": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", diff --git a/package.json b/package.json index e05fa6f..9527203 100644 --- a/package.json +++ b/package.json @@ -24,10 +24,13 @@ "autoprefixer": "10.4.15", "codemirror": "^6.0.1", "convex": "^1.2.1", + "encoding": "^0.1.13", "eslint": "8.49.0", "eslint-config-next": "13.4.19", "next": "13.4.19", "next-themes": "^0.2.1", + "nextjs-toploader": "^1.4.2", + "nprogress": "^0.2.0", "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", @@ -37,7 +40,6 @@ "remark-gfm": "^3.0.1", "svix": "^1.11.0", "tailwindcss": "3.3.3", - "typescript": "5.2.2", - "encoding": "^0.1.13" + "typescript": "5.2.2" } -} \ No newline at end of file +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4992952..a305550 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,6 +3,7 @@ import { ConvexProvider, NextThemesProvider } from '@/providers'; import { ClerkProvider } from '@clerk/nextjs'; import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; +import NextTopLoader from 'nextjs-toploader'; import './globals.css'; const inter = Inter({ subsets: ['latin'] }); @@ -30,6 +31,10 @@ export default function RootLayout({ > +
{children}
 diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index e9b4eb6..3dc0ec7 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useCodeMirror } from '@/hooks'; +import { useCodeMirror, useRouter } from '@/hooks'; import { basicDark } from '@/lib/codemirror'; import { useUser } from '@clerk/nextjs'; import { indentWithTab } from '@codemirror/commands'; @@ -10,7 +10,6 @@ import { Compartment, EditorState, Text } from '@codemirror/state'; import { EditorView, keymap } from '@codemirror/view'; import { basicSetup } from 'codemirror'; import { useMutation } from 'convex/react'; -import { useRouter } from 'next/navigation'; import { FormEvent, useState } from 'react'; import { api } from '../../convex/_generated/api'; import { Doc } from '../../convex/_generated/dataModel'; diff --git a/src/components/MarkdownContent.css b/src/components/MarkdownContent.css index 8e90f7b..a4e94f6 100644 --- a/src/components/MarkdownContent.css +++ b/src/components/MarkdownContent.css @@ -80,7 +80,7 @@ --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-canvas-default: #ffffff; - --color-canvas-subtle: #f6f8fa; + --color-canvas-subtle: #ffffff; --color-border-default: #d0d7de; --color-border-muted: hsla(210, 18%, 87%, 1); --color-neutral-muted: rgba(175, 184, 193, 0.2); @@ -827,7 +827,7 @@ .markdown-content .highlight pre, .markdown-content pre { - padding: 0 16px; + padding: 0; overflow: auto; font-size: 85%; line-height: 1.45; diff --git a/src/components/ThemeButton.tsx b/src/components/ThemeButton.tsx index 3184b7d..76b6b8c 100644 --- a/src/components/ThemeButton.tsx +++ b/src/components/ThemeButton.tsx @@ -1,12 +1,11 @@ 'use client'; -import { useMountedEffect } from '@/hooks'; +import { useMountedEffect, useProgressEffect } from '@/hooks'; import { useTheme } from 'next-themes'; -import { useEffect, useState } from 'react'; import { BsMoonStarsFill, BsSunFill } from 'react-icons/bs'; -import { ImSpinner2 } from 'react-icons/im'; export default function ThemeButton() { + useProgressEffect(); const { mounted, Loader } = useMountedEffect(); const { theme, setTheme } = useTheme(); diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 052762d..65ac5fe 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,6 +1,12 @@ import SpinningLoader from '@/components/SpinningLoader'; import { EditorState, Extension, Text } from '@codemirror/state'; import { EditorView } from '@codemirror/view'; +import { + useRouter as useNextRouter, + usePathname, + useSearchParams, +} from 'next/navigation'; +import NProgress from 'nprogress'; import { useEffect, useRef, useState } from 'react'; export function useCodeMirror({ @@ -43,3 +49,29 @@ export function useMountedEffect() { return { mounted, Loader: SpinningLoader }; } + +export function useRouter() { + const router = useNextRouter(); + const { push, back } = router; + + router.push = (href, options) => { + NProgress.start(); + push(href, options); + }; + + router.back = () => { + NProgress.start(); + back(); + }; + + return router; +} + +export function useProgressEffect() { + const pathname = usePathname(); + const searchParams = useSearchParams(); + + useEffect(() => { + NProgress.done(); + }, [pathname, searchParams]); +}