client: add prettier, switch to preact

client/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": false,
+  "printWidth": 80
+}

client/lib/generate-uuid.ts

@@ -1,30 +1,39 @@
 export default function generateUUID() {
-    if (typeof crypto === 'object') {
-        if (typeof crypto.randomUUID === 'function') {
-            // https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
-            return crypto.randomUUID();
-        }
-        if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') {
-            // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
-            const callback = (c: string) => {
-                const num = Number(c);
-                return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16);
-            };
-            return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback);
-        }
+  if (typeof crypto === "object") {
+    if (typeof crypto.randomUUID === "function") {
+      // https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID
+      return crypto.randomUUID()
     }
-    let timestamp = new Date().getTime();
-    let perforNow = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        let random = Math.random() * 16;
-        if (timestamp > 0) {
-            random = (timestamp + random) % 16 | 0;
-            timestamp = Math.floor(timestamp / 16);
-        } else {
-            random = (perforNow + random) % 16 | 0;
-            perforNow = Math.floor(perforNow / 16);
-        }
-        return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16);
-    });
-};
-
+    if (
+      typeof crypto.getRandomValues === "function" &&
+      typeof Uint8Array === "function"
+    ) {
+      // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
+      const callback = (c: string) => {
+        const num = Number(c)
+        return (
+          num ^
+          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))
+        ).toString(16)
+      }
+      return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, callback)
+    }
+  }
+  let timestamp = new Date().getTime()
+  let perforNow =
+    (typeof performance !== "undefined" &&
+      performance.now &&
+      performance.now() * 1000) ||
+    0
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    let random = Math.random() * 16
+    if (timestamp > 0) {
+      random = (timestamp + random) % 16 | 0
+      timestamp = Math.floor(timestamp / 16)
+    } else {
+      random = (perforNow + random) % 16 | 0
+      perforNow = Math.floor(perforNow / 16)
+    }
+    return (c === "x" ? random : (random & 0x3) | 0x8).toString(16)
+  })
+}

client/lib/get-post-path.ts

@@ -1,13 +1,13 @@
 import type { PostVisibility } from "./types"
 
 export default function getPostPath(visibility: PostVisibility, id: string) {
-    switch (visibility) {
-        case "private":
-            return `/post/private/${id}`
-        case "protected":
-            return `/post/protected/${id}`
-        case "unlisted":
-        case "public":
-            return `/post/${id}`
-    }
+  switch (visibility) {
+    case "private":
+      return `/post/private/${id}`
+    case "protected":
+      return `/post/protected/${id}`
+    case "unlisted":
+    case "public":
+      return `/post/${id}`
+  }
 }

client/lib/hooks/use-shared-state.ts

@@ -2,10 +2,10 @@ import useSWR from "swr"
 
 // https://2020.paco.me/blog/shared-hook-state-with-swr
 const useSharedState = <T>(key: string, initial?: T) => {
-    const { data: state, mutate: setState } = useSWR(key, {
-        fallbackData: initial
-    })
-    return [state, setState] as const
+  const { data: state, mutate: setState } = useSWR(key, {
+    fallbackData: initial
+  })
+  return [state, setState] as const
 }
 
 export default useSharedState

client/lib/hooks/use-signed-in.ts

@@ -1,32 +1,35 @@
-import Cookies from "js-cookie";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import useSharedState from "./use-shared-state";
+import Cookies from "js-cookie"
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import useSharedState from "./use-shared-state"
 
 const useSignedIn = () => {
-    const [signedIn, setSignedIn] = useSharedState('signedIn', typeof window === 'undefined' ? false : !!Cookies.get("drift-token"));
-    const token = Cookies.get("drift-token")
-    const router = useRouter();
-    const signin = (token: string) => {
-        setSignedIn(true);
-        Cookies.set("drift-token", token);
+  const [signedIn, setSignedIn] = useSharedState(
+    "signedIn",
+    typeof window === "undefined" ? false : !!Cookies.get("drift-token")
+  )
+  const token = Cookies.get("drift-token")
+  const router = useRouter()
+  const signin = (token: string) => {
+    setSignedIn(true)
+    Cookies.set("drift-token", token)
+  }
+
+  const signout = () => {
+    setSignedIn(false)
+    Cookies.remove("drift-token")
+    router.push("/")
+  }
+
+  useEffect(() => {
+    if (token) {
+      setSignedIn(true)
+    } else {
+      setSignedIn(false)
     }
+  }, [setSignedIn, token])
 
-    const signout = () => {
-        setSignedIn(false);
-        Cookies.remove("drift-token");
-        router.push("/");
-    }
-
-    useEffect(() => {
-        if (token) {
-            setSignedIn(true);
-        } else {
-            setSignedIn(false);
-        }
-    }, [setSignedIn, token]);
-
-    return { signedIn, signin, token, signout };
+  return { signedIn, signin, token, signout }
 }
 
-export default useSignedIn;
+export default useSignedIn

client/lib/hooks/use-theme.ts

@@ -2,26 +2,26 @@ import { useCallback, useEffect } from "react"
 import useSharedState from "./use-shared-state"
 
 const useTheme = () => {
-    const isClient = typeof window === "object"
-    const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
+  const isClient = typeof window === "object"
+  const [themeType, setThemeType] = useSharedState<string>("theme", "light")
 
-    useEffect(() => {
-        if (!isClient) return
-        const storedTheme = localStorage.getItem('drift-theme')
-        if (storedTheme) {
-            setThemeType(storedTheme)
-        }
-    }, [isClient, setThemeType])
+  useEffect(() => {
+    if (!isClient) return
+    const storedTheme = localStorage.getItem("drift-theme")
+    if (storedTheme) {
+      setThemeType(storedTheme)
+    }
+  }, [isClient, setThemeType])
 
-    const changeTheme = useCallback(() => {
-        setThemeType(last => {
-            const newTheme = last === 'dark' ? 'light' : 'dark'
-            localStorage.setItem('drift-theme', newTheme)
-            return newTheme
-        })
-    }, [setThemeType])
+  const changeTheme = useCallback(() => {
+    setThemeType((last) => {
+      const newTheme = last === "dark" ? "light" : "dark"
+      localStorage.setItem("drift-theme", newTheme)
+      return newTheme
+    })
+  }, [setThemeType])
 
-    return { theme: themeType, changeTheme }
+  return { theme: themeType, changeTheme }
 }
 
-export default useTheme
+export default useTheme

client/lib/hooks/use-trace-route.ts

@@ -1,19 +1,19 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react"
 
 function useTraceUpdate(props: { [key: string]: any }) {
-    const prev = useRef(props)
-    useEffect(() => {
-        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
-            if (prev.current[k] !== v) {
-                ps[k] = [prev.current[k], v]
-            }
-            return ps
-        }, {} as { [key: string]: any })
-        if (Object.keys(changedProps).length > 0) {
-            console.log('Changed props:', changedProps)
-        }
-        prev.current = props
-    });
+  const prev = useRef(props)
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+      if (prev.current[k] !== v) {
+        ps[k] = [prev.current[k], v]
+      }
+      return ps
+    }, {} as { [key: string]: any })
+    if (Object.keys(changedProps).length > 0) {
+      console.log("Changed props:", changedProps)
+    }
+    prev.current = props
+  })
 }
 
-export default useTraceUpdate
+export default useTraceUpdate

client/lib/time-ago.ts

@@ -2,40 +2,42 @@
 // which is based on https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 
 const epochs = [
-    ['year', 31536000],
-    ['month', 2592000],
-    ['day', 86400],
-    ['hour', 3600],
-    ['minute', 60],
-    ['second', 1]
-] as const;
+  ["year", 31536000],
+  ["month", 2592000],
+  ["day", 86400],
+  ["hour", 3600],
+  ["minute", 60],
+  ["second", 1]
+] as const
 
 // Get duration
 const getDuration = (timeAgoInSeconds: number) => {
-    for (let [name, seconds] of epochs) {
-        const interval = Math.floor(timeAgoInSeconds / seconds);
+  for (let [name, seconds] of epochs) {
+    const interval = Math.floor(timeAgoInSeconds / seconds)
 
-        if (interval >= 1) {
-            return {
-                interval: interval,
-                epoch: name
-            };
-        }
+    if (interval >= 1) {
+      return {
+        interval: interval,
+        epoch: name
+      }
     }
+  }
 
-    return {
-        interval: 0,
-        epoch: 'second'
-    }
-};
+  return {
+    interval: 0,
+    epoch: "second"
+  }
+}
 
 // Calculate
 const timeAgo = (date: Date) => {
-    const timeAgoInSeconds = Math.floor((new Date().getTime() - new Date(date).getTime()) / 1000);
-    const { interval, epoch } = getDuration(timeAgoInSeconds);
-    const suffix = interval === 1 ? '' : 's';
+  const timeAgoInSeconds = Math.floor(
+    (new Date().getTime() - new Date(date).getTime()) / 1000
+  )
+  const { interval, epoch } = getDuration(timeAgoInSeconds)
+  const suffix = interval === 1 ? "" : "s"
 
-    return `${interval} ${epoch}${suffix} ago`;
-};
+  return `${interval} ${epoch}${suffix} ago`
+}
 
 export default timeAgo

client/lib/types.d.ts

@@ -1,29 +1,29 @@
 export type PostVisibility = "unlisted" | "private" | "public" | "protected"
 
 export type ThemeProps = {
-    theme: "light" | "dark" | string,
-    changeTheme: () => void
+  theme: "light" | "dark" | string
+  changeTheme: () => void
 }
 
 export type Document = {
-    title: string
-    content: string
-    id: string
+  title: string
+  content: string
+  id: string
 }
 
 export type File = {
-    id: string
-    title: string
-    content: string
-    html: string
+  id: string
+  title: string
+  content: string
+  html: string
 }
 
 type Files = File[]
 
 export type Post = {
-    id: string
-    title: string
-    description: string
-    visibility: PostVisibility
-    files: Files
+  id: string
+  title: string
+  description: string
+  visibility: PostVisibility
+  files: Files
 }

client/next.config.mjs

@@ -1,29 +1,39 @@
-import dotenv from "dotenv";
-import bundleAnalyzer from "@next/bundle-analyzer";
+import dotenv from "dotenv"
+import bundleAnalyzer from "@next/bundle-analyzer"
 
-dotenv.config();
+dotenv.config()
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   experimental: {
     outputStandalone: true,
-    esmExternals: true,
+    esmExternals: true
+  },
+  webpack: (config, { dev, isServer }) => {
+    if (!dev && !isServer) {
+      Object.assign(config.resolve.alias, {
+        react: "preact/compat",
+        "react-dom/test-utils": "preact/test-utils",
+        "react-dom": "preact/compat"
+      })
+    }
+    return config
   },
   async rewrites() {
     return [
       {
         source: "/server-api/:path*",
-        destination: `${process.env.API_URL}/:path*`,
+        destination: `${process.env.API_URL}/:path*`
       },
       {
         source: "/file/raw/:id",
-        destination: `/api/raw/:id`,
-      },
-    ];
-  },
-};
+        destination: `/api/raw/:id`
+      }
+    ]
+  }
+}
 
 export default bundleAnalyzer({ enabled: process.env.ANALYZE === "true" })(
   nextConfig
-);
+)

client/package.json

@@ -6,8 +6,9 @@
     "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "analyze": "ANALYZE=true next build"
+    "lint": "next lint && prettier --config .prettierrc '{components,lib,pages}/**/*.ts' --write",
+    "analyze": "ANALYZE=true next build",
+    "find:unused": "next-unused"
   },
   "dependencies": {
     "@geist-ui/core": "^2.3.5",
@@ -18,10 +19,13 @@
     "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",
+    "postcss": "^8.4.12",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-hover-media-feature": "^1.0.2",
+    "postcss-preset-env": "^7.4.3",
+    "preact": "^10.6.6",
     "prism-react-renderer": "^1.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -46,7 +50,20 @@
     "@types/react-syntax-highlighter": "^13.5.2",
     "eslint": "8.10.0",
     "eslint-config-next": "^12.1.1-canary.16",
+    "next-unused": "^0.0.6",
+    "prettier": "^2.6.0",
     "typescript": "4.6.2",
     "typescript-plugin-css-modules": "^3.4.0"
+  },
+  "next-unused": {
+    "alias": {
+      "@components": "components/",
+      "@lib": "lib/",
+      "@styles": "styles/"
+    },
+    "include": [
+      "components",
+      "lib"
+    ]
   }
 }

client/pages/_app.tsx

@@ -7,23 +7,6 @@ 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/pages/api/markdown/[id].ts

@@ -1,43 +1,54 @@
-import type { NextApiHandler } from "next";
+import type { NextApiHandler } from "next"
 
-import markdown from "@lib/render-markdown";
+import markdown from "@lib/render-markdown"
 
 const renderMarkdown: NextApiHandler = async (req, res) => {
-    const { id } = req.query
-    const file = await fetch(`${process.env.API_URL}/files/raw/${id}`, {
-        headers: {
-            'Accept': 'text/plain',
-            'x-secret-key': process.env.SECRET_KEY || '',
-            'Authorization': `Bearer ${req.cookies['drift-token']}`,
-        }
-    })
-
-    const json = await file.json()
-    const { content, title } = json
-    const renderAsMarkdown = ['markdown', 'md', 'mdown', 'mkdn', 'mkd', 'mdwn', 'mdtxt', 'mdtext', 'text', '']
-    const fileType = () => {
-        const pathParts = title.split(".")
-        const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
-        return language
+  const { id } = req.query
+  const file = await fetch(`${process.env.API_URL}/files/raw/${id}`, {
+    headers: {
+      Accept: "text/plain",
+      "x-secret-key": process.env.SECRET_KEY || "",
+      Authorization: `Bearer ${req.cookies["drift-token"]}`
     }
-    const type = fileType()
-    let contentToRender: string = '\n' + content;
+  })
 
-    if (!renderAsMarkdown.includes(type)) {
-        contentToRender = `~~~${type}
+  const json = await file.json()
+  const { content, title } = json
+  const renderAsMarkdown = [
+    "markdown",
+    "md",
+    "mdown",
+    "mkdn",
+    "mkd",
+    "mdwn",
+    "mdtxt",
+    "mdtext",
+    "text",
+    ""
+  ]
+  const fileType = () => {
+    const pathParts = title.split(".")
+    const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
+    return language
+  }
+  const type = fileType()
+  let contentToRender: string = "\n" + content
+
+  if (!renderAsMarkdown.includes(type)) {
+    contentToRender = `~~~${type}
 ${content}
 ~~~`
-    }
+  }
 
-    if (typeof contentToRender !== 'string') {
-        res.status(400).send('content must be a string')
-        return
-    }
+  if (typeof contentToRender !== "string") {
+    res.status(400).send("content must be a string")
+    return
+  }
 
-    res.setHeader('Content-Type', 'text/plain')
-    res.setHeader('Cache-Control', 'public, max-age=4800')
-    res.status(200).write(markdown(contentToRender))
-    res.end()
+  res.setHeader("Content-Type", "text/plain")
+  res.setHeader("Cache-Control", "public, max-age=4800")
+  res.status(200).write(markdown(contentToRender))
+  res.end()
 }
 
 export default renderMarkdown

client/pages/api/raw/[id].ts

@@ -1,33 +1,33 @@
 import { NextApiRequest, NextApiResponse } from "next"
 
 const getRawFile = async (req: NextApiRequest, res: NextApiResponse) => {
-    const { id, download } = req.query
-    const file = await fetch(`${process.env.API_URL}/files/raw/${id}`, {
-        headers: {
-            'Accept': 'text/plain',
-            'x-secret-key': process.env.SECRET_KEY || '',
-            'Authorization': `Bearer ${req.cookies['drift-token']}`,
-        }
-    })
-    const json = await file.json()
-    res.setHeader("Content-Type", "text/plain; charset=utf-8")
-    res.setHeader('Cache-Control', 's-maxage=86400');
-    if (file.ok) {
-        const data = json
-        const { title, content } = data
-        // serve the file raw as plain text
-
-        if (download) {
-            res.setHeader("Content-Disposition", `attachment; filename="${title}"`)
-        } else {
-            res.setHeader("Content-Disposition", `inline; filename="${title}"`)
-        }
-
-        res.status(200).write(content, 'utf-8')
-        res.end()
-    } else {
-        res.status(404).send("File not found")
+  const { id, download } = req.query
+  const file = await fetch(`${process.env.API_URL}/files/raw/${id}`, {
+    headers: {
+      Accept: "text/plain",
+      "x-secret-key": process.env.SECRET_KEY || "",
+      Authorization: `Bearer ${req.cookies["drift-token"]}`
     }
+  })
+  const json = await file.json()
+  res.setHeader("Content-Type", "text/plain; charset=utf-8")
+  res.setHeader("Cache-Control", "s-maxage=86400")
+  if (file.ok) {
+    const data = json
+    const { title, content } = data
+    // serve the file raw as plain text
+
+    if (download) {
+      res.setHeader("Content-Disposition", `attachment; filename="${title}"`)
+    } else {
+      res.setHeader("Content-Disposition", `inline; filename="${title}"`)
+    }
+
+    res.status(200).write(content, "utf-8")
+    res.end()
+  } else {
+    res.status(404).send("File not found")
+  }
 }
 
 export default getRawFile

client/pages/api/render-markdown.ts

@@ -1,32 +1,43 @@
-import type { NextApiHandler } from "next";
+import type { NextApiHandler } from "next"
 
-import markdown from "@lib/render-markdown";
+import markdown from "@lib/render-markdown"
 
 const renderMarkdown: NextApiHandler = async (req, res) => {
-    const { content, title } = req.body
-    const renderAsMarkdown = ['markdown', 'md', 'mdown', 'mkdn', 'mkd', 'mdwn', 'mdtxt', 'mdtext', 'text', '']
-    const fileType = () => {
-        const pathParts = title.split(".")
-        const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
-        return language
-    }
-    const type = fileType()
-    let contentToRender: string = (content || '');
+  const { content, title } = req.body
+  const renderAsMarkdown = [
+    "markdown",
+    "md",
+    "mdown",
+    "mkdn",
+    "mkd",
+    "mdwn",
+    "mdtxt",
+    "mdtext",
+    "text",
+    ""
+  ]
+  const fileType = () => {
+    const pathParts = title.split(".")
+    const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
+    return language
+  }
+  const type = fileType()
+  let contentToRender: string = content || ""
 
-    if (!renderAsMarkdown.includes(type)) {
-        contentToRender = `~~~${type}
+  if (!renderAsMarkdown.includes(type)) {
+    contentToRender = `~~~${type}
 ${content}
 ~~~`
-    } else {
-        contentToRender = '\n' + content;
-    }
+  } else {
+    contentToRender = "\n" + content
+  }
 
-    if (typeof contentToRender !== 'string') {
-        res.status(400).send('content must be a string')
-        return
-    }
-    res.status(200).write(markdown(contentToRender))
-    res.end()
+  if (typeof contentToRender !== "string") {
+    res.status(400).send("content must be a string")
+    return
+  }
+  res.status(200).write(markdown(contentToRender))
+  res.end()
 }
 
 export default renderMarkdown

client/postcss.config.json

@@ -0,0 +1,18 @@
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    "postcss-hover-media-feature",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}

client/styles/globals.css

@@ -1,6 +1,5 @@
 @import "./syntax.css";
 @import "./markdown.css";
-@import "./nprogress.css";
 @import "./inter.css";
 
 :root {

client/styles/nprogress.css

@@ -1,23 +0,0 @@
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 5px;
-  background: var(--fg);
-}
-
-#nprogress::after {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 5px;
-  background: transparent;
-}