chore(website): tweaks

packages/website/.dockerignore

@@ -1,3 +1,4 @@
+__tests__/
 Dockerfile
 .dockerignore
 node_modules

packages/website/__tests__/capitalize.spec.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { capitalize } from "../utils/capitalize";
+
+describe("capitalize", () => {
+  it("Should capitalize content", () => {
+    expect(capitalize("hello")).toBe("Hello");
+  });
+
+  it("Should not throw", () => {
+    expect(capitalize("")).toBe("");
+  });
+});

packages/website/components/ImageBoxFuture/index.tsx

@@ -2,7 +2,7 @@ import "react-photo-view/dist/react-photo-view.css";
 import { PhotoView } from "react-photo-view";
 import { useState } from "react";
 import Image from "next/image";
-import { isIp } from "../../utils/isIp";
+import { isIP } from "../../utils/isIp";
 export const errorImg =
   "data:image/png;base64,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";
 
@@ -35,7 +35,7 @@ export default function (props: {
       </>
     );
   } else {
-    if (isIp(window.location.hostname) && !ipError) {
+    if (isIP(window.location.hostname) && !ipError) {
       return (
         <img
           src={props.src}

packages/website/components/Layout/index.tsx

@@ -7,7 +7,7 @@ import GaAnalysis from "../gaAnalysis";
 import { LayoutProps } from "../../utils/getLayoutProps";
 import ImageProvider from "../ImageProvider";
 import { RealThemeType, ThemeContext } from "../../utils/themeContext";
-import { decodeTheme } from "../../utils/theme";
+import { getTheme } from "../../utils/theme";
 import CustomLayout from "../CustomLayout";
 import { Toaster } from "react-hot-toast";
 import Footer from "../Footer";
@@ -24,7 +24,7 @@ export default function (props: {
   // console.log("script", decode(props.option.customScript as string));
   const [isOpen, setIsOpen] = useState(false);
   const { current } = useRef({ hasInit: false });
-  const [theme, setTheme] = useState<RealThemeType>(decodeTheme("auto"));
+  const [theme, setTheme] = useState<RealThemeType>(getTheme("auto"));
   const handleClose = () => {
     console.log("关闭或刷新页面");
     localStorage.removeItem("saidHello");

packages/website/components/MarkdownTocBar/tools.ts

@@ -4,6 +4,7 @@ export interface NavItem {
   listNo: string;
   text: string;
 }
+
 export const washMarkdownContent = (source: string) => {
   if (!source) return "";
   return (
@@ -19,6 +20,7 @@ export const washMarkdownContent = (source: string) => {
       .trim() + "\n"
   );
 };
+
 export const parseNavStructure = (source: string): NavItem[] => {
   const contentWithoutCode = washMarkdownContent(source);
   const pattOfTitle = /#+\s(.+)\n/g;

packages/website/components/SocialIcon/index.tsx

@@ -2,7 +2,7 @@ import { useContext, useMemo, useState } from "react";
 import { SocialItem } from "../../api/getAllData";
 import { getIcon } from "../../utils/getIcon";
 import { Popover, ArrowContainer } from "react-tiny-popover";
-import { topUpper } from "../../utils/TopUpper";
+import { capitalize } from "../../utils/capitalize";
 import ImageBoxFuture from "../ImageBoxFuture";
 import { ThemeContext } from "../../utils/themeContext";
 
@@ -99,7 +99,7 @@ export default function (props: { item: SocialItem }) {
             {getIcon(props.item.type, iconSize)}
           </span>
           <span className="inline-flex items-center ml-1">
-            {topUpper(props.item.type)}
+            {capitalize(props.item.type)}
           </span>
         </a>
       </Popover>
@@ -119,7 +119,7 @@ export default function (props: { item: SocialItem }) {
           {getIcon(props.item.type, iconSize)}
         </span>
         <span className="inline-flex items-center ml-1">
-          {topUpper(props.item.type)}
+          {capitalize(props.item.type)}
         </span>
       </a>
     );

packages/website/components/ThemeButton/core.tsx

@@ -1,5 +1,5 @@
 import { useContext, useLayoutEffect, useRef } from "react";
-import { applyTheme, decodeTheme, initTheme } from "../../utils/theme";
+import { applyTheme, getTheme, initTheme } from "../../utils/theme";
 import { ThemeContext } from "../../utils/themeContext";
 
 export default function (props: { defaultTheme: "auto" | "dark" | "light" }) {
@@ -11,7 +11,7 @@ export default function (props: { defaultTheme: "auto" | "dark" | "light" }) {
     clearTimer();
     localStorage.setItem("theme", newTheme);
     // 设置真实的主题，然后把真实的主题搞到 state 里。
-    const realTheme = decodeTheme(newTheme);
+    const realTheme = getTheme(newTheme);
     applyTheme(realTheme, "setTheme", true);
     setState(realTheme);
     if (realTheme.includes("auto")) {
@@ -25,7 +25,7 @@ export default function (props: { defaultTheme: "auto" | "dark" | "light" }) {
   const setTimer = () => {
     clearTimer();
     currentTimer.timer = setInterval(() => {
-      const realTheme = decodeTheme("auto");
+      const realTheme = getTheme("auto");
       applyTheme(realTheme, "autoThemeTimer", true);
     }, 10000);
   };

packages/website/package.json

@@ -1,10 +1,11 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development next dev -p 3001 --hostname 0.0.0.0",
+    "anlysis": "cross-env ANALYZE=true next build",
     "build": "next build",
-    "start": "next start",
-    "anlysis": "cross-env ANALYZE=true next build"
+    "dev": "cross-env NODE_ENV=development next dev -p 3001 --hostname 0.0.0.0",
+    "test": "vitest",
+    "start": "next start"
   },
   "dependencies": {
     "@next/bundle-analyzer": "^12.2.5",
@@ -51,6 +52,7 @@
     "cross-env": "^7.0.3",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.2",
-    "typescript": "4.7.2"
+    "typescript": "4.7.2",
+    "vitest": "0.29.2"
   }
 }

packages/website/pages/_document.tsx

@@ -1,10 +1,10 @@
 import { Head, Html, Main, NextScript } from "next/document";
 import Script from "next/script";
-import { decodeTheme, initTheme } from "../utils/theme";
+import { getTheme, initTheme } from "../utils/theme";
 
 export default function Document() {
   return (
-    <Html className={decodeTheme(initTheme()).replace("auto-", "")} lang="zh">
+    <Html className={getTheme(initTheme()).replace("auto-", "")} lang="zh">
       <Head>
         <Script src="/initTheme.js" strategy="beforeInteractive" />
       </Head>

packages/website/utils/capitalize.ts

@@ -0,0 +1,2 @@
+export const capitalize = (content: string): string =>
+  content.substring(0, 1).toLocaleUpperCase() + content.substring(1);

packages/website/utils/hasToc.ts

@@ -1,6 +1,6 @@
 import { washMarkdownContent } from "../components/MarkdownTocBar/tools";
 
-export function hasToc(content: string) {
-  const r = /#+\s+/;
-  return r.test(washMarkdownContent(content));
-}
+const HASH_REG = /#+\s+/;
+
+export const hasToc = (content: string) =>
+  HASH_REG.test(washMarkdownContent(content));

packages/website/utils/isIp.ts

@@ -1,4 +1,3 @@
-export const isIp = (str: string) => {
-  const re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
-  return re.test(str);
-};
+const IP_REGEXP = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+
+export const isIP = (maybeIP: string): boolean => IP_REGEXP.test(maybeIP);

packages/website/utils/loadConfig.ts

@@ -1,16 +1,15 @@
+const normalizeURL = (url: string) => new URL(url).toString();
+
 // 从环境变量中读取.
 export const config = {
-  baseUrl: washUrl(process.env.VAN_BLOG_SERVER_URL ?? "http://localhost:3000"),
+  baseUrl: normalizeURL(
+    process.env.VAN_BLOG_SERVER_URL ?? "http://localhost:3000"
+  ),
 };
 
-function washUrl(url: string) {
-  // 带反斜杠的
-  const u = new URL(url);
-  return u.toString();
-}
-
 // 改为服务端触发 isr
 // export const revalidate = {};
-export const revalidate = process.env.VAN_BLOG_REVALIDATE == 'true'
-  ? { revalidate: parseInt(process.env.VAN_BLOG_REVALIDATE_TIME || "10") }
-  : {};
+export const revalidate =
+  process.env.VAN_BLOG_REVALIDATE == "true"
+    ? { revalidate: parseInt(process.env.VAN_BLOG_REVALIDATE_TIME || "10") }
+    : {};

packages/website/utils/theme.ts

@@ -1,53 +1,54 @@
-export function decodeAuto() {
-  const d = new Date().getHours();
-  const night = d > 18 || d < 8;
-  if (typeof window == "undefined") {
-    if (night) {
-      return "auto-dark";
-    } else {
-      return "auto-light";
-    }
+export const initTheme = () => {
+  if (typeof localStorage === "undefined") {
+    return "auto";
   }
-  if (night || window.matchMedia("(prefers-color-scheme: dark)").matches) {
-    return "auto-dark";
-  } else {
-    return "auto-light";
+
+  // 2种情况： 1. 自动。 2.手动
+  if (!("theme" in localStorage) || localStorage.theme == "auto") {
+    return "auto";
   }
-}
-export const decodeTheme = (t: "auto" | "light" | "dark") => {
-  if (t == "auto") {
-    return decodeAuto();
-  } else {
-    return t;
+
+  if (localStorage.theme === "dark") {
+    return "dark";
   }
+
+  return "light";
 };
-export const applyTheme = (t: string, source: string, disableLog: boolean) => {
-  if (t.includes("light")) {
+
+export const getAutoTheme = () => {
+  const hour = new Date().getHours();
+  const isNight = hour > 18 || hour < 8;
+
+  if (typeof window === "undefined") {
+    return isNight ? "auto-dark" : "auto-light";
+  }
+
+  if (isNight || window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "auto-dark";
+  }
+
+  return "auto-light";
+};
+
+export const getTheme = (theme: "auto" | "light" | "dark") =>
+  theme == "auto" ? getAutoTheme() : theme;
+
+export const applyTheme = (
+  theme: string,
+  source: string,
+  disableLog = false
+) => {
+  if (theme.includes("light")) {
     document.documentElement.classList.add("light");
     document.documentElement.classList.remove("dark");
     if (!disableLog) {
-      console.log(`[Apply Theme][${source}] ${t}`);
+      console.log(`[Apply Theme][${source}] ${theme}`);
     }
   } else {
     document.documentElement.classList.add("dark");
     document.documentElement.classList.remove("light");
     if (!disableLog) {
-      console.log(`[Apply Theme][${source}] ${t}`);
-    }
-  }
-};
-export const initTheme = () => {
-  if (typeof localStorage == "undefined") {
-    return "auto";
-  }
-  // 2种情况： 1. 自动。 2.手动
-  if (!("theme" in localStorage) || localStorage.theme == "auto") {
-    return "auto";
-  } else {
-    if (localStorage.theme === "dark") {
-      return "dark";
-    } else {
-      return "light";
+      console.log(`[Apply Theme][${source}] ${theme}`);
     }
   }
 };

packages/website/utils/themeContext.ts

@@ -1,10 +1,11 @@
 import React from "react";
+
 export type RealThemeType = "auto-dark" | "auto-light" | "dark" | "light";
 
 export const ThemeContext = React.createContext<{
   theme: RealThemeType;
   setTheme: (newState: RealThemeType) => void;
 }>({
   theme: "auto-light",
-  setTheme: (newState: RealThemeType) => {},
+  setTheme: () => {},
 });

packages/website/utils/ua.ts

@@ -1,7 +1,3 @@
-export const isMac = () => {
-  try {
-    return navigator.userAgent.toUpperCase().indexOf('MAC') >= 0;
-  } catch(err) {
-    return false;
-  }
-}
+export const isMac = (): boolean =>
+  typeof navigator !== "undefined" &&
+  Boolean(navigator.userAgent?.toLowerCase().includes("mac"));

packages/website/utils/washArticles.ts

@@ -1,37 +1,37 @@
-export function washArticlesByKey(
+export const washArticlesByKey = (
   rawArticles: any[],
   getValueFn: (val: any) => any,
   isKeyArray: boolean
-) {
+) => {
   const articles = {} as any;
-  let dates = [];
-  if (isKeyArray) {
-    dates = Array.from(new Set(rawArticles.flatMap((a) => getValueFn(a))));
-  } else {
-    dates = Array.from(new Set(rawArticles.map((a) => getValueFn(a))));
-  }
+
+  const dates = Array.from(
+    new Set(
+      isKeyArray
+        ? rawArticles.flatMap((a) => getValueFn(a))
+        : rawArticles.map((a) => getValueFn(a))
+    )
+  );
+
   for (const date of dates) {
-    let curArticles = rawArticles
-      .filter((each) => {
-        if (isKeyArray) {
-          return getValueFn(each).includes(date);
-        } else {
-          return getValueFn(each) == date;
-        }
-      })
-      .map((each) => {
-        return {
-          title: each.title,
-          id: each.id,
-          createdAt: each.createdAt,
-          updatedAt: each.updatedAt,
-        };
-      });
-    curArticles = curArticles.sort(
-      (a, b) =>
-        new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf()
-    );
+    const curArticles = rawArticles
+      .filter((each) =>
+        isKeyArray ? getValueFn(each).includes(date) : getValueFn(each) == date
+      )
+      .map((each) => ({
+        title: each.title,
+        id: each.id,
+        createdAt: each.createdAt,
+        updatedAt: each.updatedAt,
+      }))
+      .sort(
+        (prev, next) =>
+          new Date(next.createdAt).getTime() -
+          new Date(prev.createdAt).getTime()
+      );
+
     articles[String(date)] = curArticles;
   }
+
   return articles;
-}
+};