client: nprogress

client/components/edit-document/index.tsx

@@ -66,7 +66,7 @@ const Document = ({ remove, title, content, setTitle, setContent, initialTab = '
 
     const onTitleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null, [setTitle])
 
-    const removeFile = useCallback((remove?: () => void) => () => {
+    const removeFile = useCallback((remove?: () => void) => {
         if (remove) {
             if (content && content.trim().length > 0) {
                 const confirmed = window.confirm("Are you sure you want to remove this file?")
@@ -95,7 +95,6 @@ const Document = ({ remove, title, content, setTitle, setContent, initialTab = '
         </>
     }
 
-
     return (
         <>
             <Spacer height={1} />

client/package.json

@@ -18,8 +18,10 @@
     "cookie": "^0.4.2",
     "dotenv": "^16.0.0",
     "js-cookie": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
     "marked": "^4.0.12",
     "next": "^12.1.1-canary.15",
+    "nprogress": "^0.2.0",
     "prism-react-renderer": "^1.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -35,8 +37,10 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^12.1.0",
+    "@types/lodash.debounce": "^4.0.6",
     "@types/marked": "^4.0.3",
     "@types/node": "17.0.21",
+    "@types/nprogress": "^0.2.0",
     "@types/react": "17.0.39",
     "@types/react-dom": "^17.0.14",
     "@types/react-syntax-highlighter": "^13.5.2",

client/pages/_app.tsx

@@ -7,6 +7,23 @@ import Head from 'next/head';
 import useTheme from '@lib/hooks/use-theme';
 import { CssBaseline, GeistProvider } from '@geist-ui/core';
 
+import nprogress from 'nprogress'
+import debounce from 'lodash.debounce'
+import Router from 'next/router';
+
+// Only show nprogress after 500ms (slow loading)
+const start = debounce(nprogress.start, 500)
+Router.events.on('routeChangeStart', start)
+Router.events.on('routeChangeComplete', () => {
+  start.cancel()
+  nprogress.done()
+  window.scrollTo(0, 0)
+})
+Router.events.on('routeChangeError', () => {
+  start.cancel()
+  nprogress.done()
+})
+
 type AppProps<P = any> = {
   pageProps: P;
 } & Omit<NextAppProps<P>, "pageProps">;

client/styles/markdown.css

@@ -100,6 +100,11 @@ article *:not(pre) > code {
   font-size: 1rem;
 }
 
+article li > p {
+  font-family: var(--font-mono);
+  display: inline-block;
+}
+
 article pre {
   overflow-x: auto;
   background: var(--lightest-gray);
@@ -120,7 +125,6 @@ article pre {
   opacity: 0;
   content: "#";
   margin-left: var(--gap-half);
-  color: var(--gray);
 }
 
 .header-link:hover::after {

client/yarn.lock

@@ -197,6 +197,18 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash.debounce@^4.0.6":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
+  integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.180"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
+  integrity sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==
+
 "@types/marked@^4.0.3":
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.3.tgz#2098f4a77adaba9ce881c9e0b6baf29116e5acc4"
@@ -224,6 +236,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
   integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
 
+"@types/nprogress@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
+  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+
 "@types/parse5@^6.0.0":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
@@ -1759,6 +1776,11 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -2325,6 +2347,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"