Skip to content

Commit

Permalink
chore(website): tweaks (#201)
Browse files Browse the repository at this point in the history
* chore(website): tweaks

* chore: tweaks
  • Loading branch information
Mister-Hope committed Mar 4, 2023
1 parent 87ffcb7 commit c6ba12e
Show file tree
Hide file tree
Showing 19 changed files with 621 additions and 116 deletions.
1 change: 1 addition & 0 deletions packages/website/.dockerignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
__tests__/
Dockerfile
.dockerignore
node_modules
Expand Down
12 changes: 12 additions & 0 deletions packages/website/__tests__/capitalize.spec.ts
Original file line number Diff line number Diff line change
@@ -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("");
});
});
4 changes: 2 additions & 2 deletions packages/website/components/ImageBoxFuture/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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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";

Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/website/components/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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");
Expand Down
2 changes: 2 additions & 0 deletions packages/website/components/MarkdownTocBar/tools.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export interface NavItem {
listNo: string;
text: string;
}

export const washMarkdownContent = (source: string) => {
if (!source) return "";
return (
Expand All @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions packages/website/components/SocialIcon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions packages/website/components/ThemeButton/core.tsx
Original file line number Diff line number Diff line change
@@ -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" }) {
Expand All @@ -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")) {
Expand All @@ -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);
};
Expand Down
10 changes: 6 additions & 4 deletions packages/website/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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"
}
}
4 changes: 2 additions & 2 deletions packages/website/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
5 changes: 0 additions & 5 deletions packages/website/utils/TopUpper.ts

This file was deleted.

2 changes: 2 additions & 0 deletions packages/website/utils/capitalize.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const capitalize = (content: string): string =>
content.substring(0, 1).toLocaleUpperCase() + content.substring(1);
8 changes: 4 additions & 4 deletions packages/website/utils/hasToc.ts
Original file line number Diff line number Diff line change
@@ -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));
7 changes: 3 additions & 4 deletions packages/website/utils/isIp.ts
Original file line number Diff line number Diff line change
@@ -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);
19 changes: 9 additions & 10 deletions packages/website/utils/loadConfig.ts
Original file line number Diff line number Diff line change
@@ -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") }
: {};
77 changes: 39 additions & 38 deletions packages/website/utils/theme.ts
Original file line number Diff line number Diff line change
@@ -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}`);
}
}
};
3 changes: 2 additions & 1 deletion packages/website/utils/themeContext.ts
Original file line number Diff line number Diff line change
@@ -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: () => {},
});
10 changes: 3 additions & 7 deletions packages/website/utils/ua.ts
Original file line number Diff line number Diff line change
@@ -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"));
58 changes: 29 additions & 29 deletions packages/website/utils/washArticles.ts
Original file line number Diff line number Diff line change
@@ -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;
}
};
Loading

0 comments on commit c6ba12e

Please sign in to comment.