🐞 fix(cache): update cache key and intl

app/actions/generate-word-action.ts

@@ -20,14 +20,23 @@ ${JSON.stringify(WORD_EXAMPLE)}
 
 export const generateWordAction = async (word: string) => {
 	const prompt = promptTemplate(word);
-	isDev && console.log("[generateWordAction][prompt]:", prompt);
+	isDev &&
+		console.log(
+			"---------- start -----------\n[generateWordAction][prompt]:",
+			prompt,
+		);
 	const result = await fetchChatCompletion([
 		{
 			role: "user",
 			content: prompt,
 		},
 	]);
-	isDev && console.log("[generateWordAction][result]:", result);
+	isDev &&
+		console.log(
+			"[generateWordAction][result]:",
+			result,
+			"\n---------- end -----------",
+		);
 	return result?.match(/([\[\{][\s\S]*[\}\]])/)?.[1];
 };
 

app/actions/user-dict-action.ts

@@ -8,7 +8,7 @@ import { generateWordsAction } from "./generate-word-action";
 import { getDictRevalidateKey } from "./user-dict-utils";
 import type { DictItemCreateInput } from ".keystone/types";
 
-const allDictsRevalidateKey = "all-dicts";
+const allDictsRevalidateKey = `all-dicts-${process.env.VERCEL_GIT_COMMIT_SHA || "dev"}`;
 
 const getAllDicts = unstable_cache(
 	async () => {

app/actions/user-dict-utils.ts

@@ -4,7 +4,8 @@ import type { Session } from "next-auth";
 import { unstable_cache } from "next/cache";
 import { getDictList } from "./user-dict-action";
 
-export const getDictRevalidateKey = (dictId: string) => `dict-${dictId}`;
+export const getDictRevalidateKey = (dictId: string) =>
+	`dict-${dictId}-${process.env.VERCEL_GIT_COMMIT_SHA || "dev"}`;
 
 const createCachedDictList = (dictId: string) => {
 	return unstable_cache(

app/components/dict-nav/index.tsx

@@ -54,10 +54,13 @@ const DictNav = ({
 						<p className={clsx("font-bold", notoKR.className)}>{item?.name}</p>
 						<p
 							title={getTranslation(item, locale)}
-							className="text-xs text-gray-500 max-w-40 overflow-hidden text-ellipsis text-nowrap"
+							className="text-xs text-gray-500 max-w-28 sm:max-w-40"
 						>
 							{
-								<HideText hide={hideMeaning}>
+								<HideText
+									hide={hideMeaning}
+									className="overflow-hidden text-ellipsis text-nowrap inline-block max-w-full"
+								>
 									{getTranslation(item, locale)}
 								</HideText>
 							}

app/components/header/_component/mobile-menu.tsx

@@ -4,6 +4,7 @@ import MenuIcon from "@/assets/svg/menu.svg";
 import { isAdmin } from "@/hooks/use-user";
 import clsx from "clsx";
 import type { Session } from "next-auth";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
@@ -16,6 +17,7 @@ const MobileMenu = ({
 	const pathname = usePathname();
 	const isActive = (href: string) => pathname.includes(href);
 	const [isOpen, setIsOpen] = useState(false);
+	const tHeader = useTranslations("Header");
 
 	const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setIsOpen(e.target.checked);
@@ -60,12 +62,12 @@ const MobileMenu = ({
 							{session.user?.name}
 						</span>
 						<Link className="py-3" href="/api/auth/signout">
-							Signout
+							{tHeader("signOut")}
 						</Link>
 					</div>
 				) : (
 					<Link className="p-2" href="/api/auth/signin">
-						Sign In
+						{tHeader("signIn")}
 					</Link>
 				)}
 			</div>

app/components/header/index.tsx

@@ -49,11 +49,11 @@ const Header = async () => {
 									{session.user?.name}
 								</span>
 								<Link className="ml-4" href="/api/auth/signout">
-									Signout
+									{t("signOut")}
 								</Link>
 							</div>
 						) : (
-							<Link href="/api/auth/signin">Sign In</Link>
+							<Link href="/api/auth/signin">{t("signIn")}</Link>
 						)}
 					</span>
 				</div>

app/components/hide-text.tsx

@@ -1,16 +1,20 @@
 import clsx from "clsx";
-import type { PropsWithChildren } from "react";
+import type { ComponentProps, PropsWithChildren } from "react";
 
 const HideText = ({
 	hide = false,
 	children,
-}: PropsWithChildren<{ hide?: boolean }>) => {
+	className,
+	...props
+}: PropsWithChildren<{ hide?: boolean } & ComponentProps<"span">>) => {
 	return (
 		<span
 			className={clsx(
 				"inline-block relative cursor-pointer hover:before:opacity-0 before:transition-opacity",
 				hide && "after-backdrop-shadow",
+				className,
 			)}
+			{...props}
 		>
 			{children}
 		</span>

messages/en.json

@@ -7,7 +7,9 @@
 	"Header": {
 		"beginner": "Beginner",
 		"intermediate": "Intermediate",
-		"tools": "Tools"
+		"tools": "Tools",
+		"signIn": "Sign In",
+		"signOut": "Sign Out"
 	},
 	"Home": {
 		"viewList": "View list",

messages/ja.json

@@ -7,7 +7,9 @@
 	"Header": {
 		"beginner": "初級",
 		"intermediate": "中級",
-		"tools": "ツール"
+		"tools": "ツール",
+		"signIn": "サインイン",
+		"signOut": "サインアウト"
 	},
 	"Home": {
 		"viewList": "リストを見る",

messages/zh-CN.json

@@ -7,7 +7,9 @@
 	"Header": {
 		"beginner": "入门",
 		"intermediate": "进阶",
-		"tools": "工具"
+		"tools": "工具",
+		"signIn": "登录",
+		"signOut": "退出"
 	},
 	"Home": {
 		"viewList": "查看列表",

scripts/generate-doc-desc.ts

@@ -19,12 +19,16 @@ import { fetchChatCompletion, sequentialChatCompletion } from "./open-ai";
 	console.log(
 		docsNeedToGenerateDescription.map((doc) => `[${doc.title}]...`).join("\n"),
 	);
-	console.log("[generate-doc-desc][find]: ↑↑↑↑↑↑↑↑↑↑↑↑");
+
 	await sequentialChatCompletion(
 		docsNeedToGenerateDescription.map((doc) => async () => {
 			if (doc.content === undefined) return;
 
-			console.log("[generate-doc-desc][title][", doc.title, "]: generate...");
+			console.log(
+				"---------- start -----------\n[generate-doc-desc][title][",
+				doc.title,
+				"]: generate...",
+			);
 			const description = (
 				await fetchChatCompletion([
 					{
@@ -53,7 +57,11 @@ import { fetchChatCompletion, sequentialChatCompletion } from "./open-ai";
 				description,
 			);
 			writeFileSync(doc.path, newDocString, "utf-8");
-			console.log("[generate-doc-desc][title][", doc.title, "]: success!");
+			console.log(
+				"[generate-doc-desc][title][",
+				doc.title,
+				"]: success!\n---------- end -----------",
+			);
 		}),
 	);
 	console.log("[generate-doc-desc][all]: success!");

scripts/generate-doc-file.ts

@@ -32,7 +32,9 @@ const promptTemplate = (title: string) => `
 `;
 
 const generateDoc = async (title: string) => {
-	console.log(`[generate-doc-file][title]: 【${title}】 start...`);
+	console.log(
+		`---------- start -----------\n[generate-doc-file][title]: 【${title}】 start...`,
+	);
 	const docPath = resolve(
 		process.cwd(),
 		"mdx",
@@ -61,7 +63,7 @@ const generateDoc = async (title: string) => {
 	// console.log(`[generate-doc-file][content]: \n${content}`);
 	writeFileSync(docPath, content);
 	console.log(`[generate-doc-file][path]: ${docPath}`);
-	console.log("[generate-doc-file]: done");
+	console.log("[generate-doc-file]: done\n---------- end -----------");
 };
 
 export const generateDocs = async (docs: string[]) => {