画像プロパティの取得ロジックを改善し、ユーザーアバターの表示を最適化しました。また、マルチリンガルコミュニティの説明文を更新しました。 (#…

…651)

next/prisma/seed.ts

@@ -3,37 +3,37 @@ import { PrismaClient } from "@prisma/client";
 const prisma = new PrismaClient();
 
 const JA_NUMBER_0 = "世界とつながる";
-const JA_NUMBER_1 = `Evameは、あなたが書いた記事を多言語に翻訳し、世界中の読者へ届けるコミュニティです。
+const JA_NUMBER_1 = `Evameは、あなたが書いた記事もコメントも自動で翻訳される多言語コミュニティです。
 メニューから好きな言語を選ぶだけで、記事やコメントを思いのままに楽しめます。
 海外の読者とも手軽に交流でき、新たな出会いが生まれるかもしれません。
 さあ、Evameであなたのアイデアや物語を世界に向けて発信してみましょう。`;
 
 const EN_NUMBER_0: string = "Connect with the world";
-const EN_NUMBER_1 = `Evame is a community that translates the articles you write into multiple languages and delivers them to readers around the world.
-By simply selecting your preferred language from the menu, you can enjoy articles and comments however you like.
-You can also easily interact with readers overseas, potentially creating new connections.
-Now, let's share your ideas and stories with the world through Evame!`;
+const EN_NUMBER_1 = `Evame is a multilingual community where your articles and comments are automatically translated.
+Just select your preferred language from the menu, and enjoy articles and comments freely.
+You can easily interact with international readers, which might lead to new encounters. 
+Come on, let's share your ideas and stories with the world through Evame.`;
 
 // 中国語（簡体字）版
 const ZH_NUMBER_0: string = "与世界相连";
-const ZH_NUMBER_1 = `Evame 是一个将您所写的文章翻译成多种语言并传播给全世界读者的社区。
-只需从菜单中选择您喜欢的语言，就能随心所欲地阅读文章和评论。
-您也可以轻松地与海外读者互动，或许会结识新的朋友。
-现在，就让我们通过 Evame 向全世界分享您的想法和故事吧！`;
+const ZH_NUMBER_1 = `Evame是一个多语言社区，您撰写的文章和评论都会被自动翻译。
+只需从菜单中选择您喜欢的语言，您就可以随心所欲地享受文章和评论。
+您可以轻松地与海外读者交流，这可能会带来新的相遇。
+来吧，让我们通过Evame向世界分享您的想法和故事。`;
 
 // 韓国語版
 const KO_NUMBER_0: string = "세상과 연결되다";
-const KO_NUMBER_1 = `Evame는 당신이 작성한 기사를 여러 언어로 번역하여 전 세계 독자들에게 전달하는 커뮤니ティ입니다.
-메뉴에서 원하는 언어를 선택하기만 하면 기사와 댓글을 원하는 대로 즐길 수 있습니다.
+const KO_NUMBER_1 = `Evame는 당신이 작성한 글과 댓글이 자동으로 번역되는 다국어 커뮤니티입니다.
+메뉴에서 원하는 언어를 선택하기만 하면 글과 댓글을 마음껏 즐길 수 있습니다.
 해외 독자들과도 쉽게 교류할 수 있어 새로운 만남이 생길지도 모릅니다.
-이제 Evame를 통해 당신의 아이디어와 이야기를 전 세계에 전해보세요!`;
+자, Evame에서 당신의 아이디어와 이야기를 세계로 발신해 보세요.`;
 
 // スペイン語版
 const ES_NUMBER_0: string = "Conéctate con el mundo";
-const ES_NUMBER_1 = `Evame es una comunidad que traduce los artículos que escribes a varios idiomas y los lleva a lectores de todo el mundo.
-Con solo elegir tu idioma preferido en el menú, puedes disfrutar de artículos y comentarios de la manera que más te guste.
-También puedes interactuar fácilmente con lectores de otros países, lo que podría dar lugar a nuevos encuentros.
-¡Ahora, comparte tus ideas e historias con el mundo a través de Evame!`;
+const ES_NUMBER_1 = `Evame es una comunidad multilingüe donde tus artículos y comentarios se traducen automáticamente.
+Solo selecciona el idioma que prefieras del menú y disfruta de los artículos y comentarios libremente.
+Puedes interactuar fácilmente con lectores internacionales, lo que podría conducir a nuevos encuentros.
+Vamos, compartamos tus ideas e historias con el mundo a través de Evame.`;
 
 async function seed() {
 	await addRequiredData();

next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/comment/components/page-comment-list/page-comment-list-client.tsx

@@ -12,6 +12,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { MoreVertical } from "lucide-react";
+import { getImageProps } from "next/image";
 import { useActionState } from "react";
 import {
 	type CommentDeleteActionResponse,
@@ -34,78 +35,83 @@ export function PageCommentListClient({
 	>(commentDeleteAction, { success: false });
 	return (
 		<div className="space-y-4">
-			{pageCommentsWithUser.map((pageComment) => (
-				<div key={pageComment.id} className="p-2 border-t">
-					<div className="flex items-center">
-						<Avatar className="w-6 h-6 mr-3 not-prose">
-							<AvatarImage
-								src={pageComment.user.image}
-								alt={pageComment.user.name}
-							/>
-							<AvatarFallback>
-								{pageComment.user?.name.charAt(0) || "?"}
-							</AvatarFallback>
-						</Avatar>
-						<div className="flex-1">
-							<div className="flex items-center justify-between">
-								<div>
-									<span className="font-semibold text-sm">
-										{pageComment.user?.name || "deleted_user"}
-									</span>
-									<span className="text-sm text-muted-foreground ml-2">
-										{pageComment.createdAt}
-									</span>
+			{pageCommentsWithUser.map((pageComment) => {
+				const { props } = getImageProps({
+					src: pageComment.user.image,
+					alt: pageComment.user.name,
+					width: 40,
+					height: 40,
+				});
+				return (
+					<div key={pageComment.id} className="p-2 border-t">
+						<div className="flex items-center">
+							<Avatar className="w-6 h-6 mr-3 not-prose">
+								<AvatarImage {...props} />
+								<AvatarFallback>
+									{pageComment.user?.name.charAt(0) || "?"}
+								</AvatarFallback>
+							</Avatar>
+							<div className="flex-1">
+								<div className="flex items-center justify-between">
+									<div>
+										<span className="font-semibold text-sm">
+											{pageComment.user?.name || "deleted_user"}
+										</span>
+										<span className="text-sm text-muted-foreground ml-2">
+											{pageComment.createdAt}
+										</span>
+									</div>
+									{currentHandle === pageComment.user.handle && (
+										<DropdownMenu modal={false}>
+											<DropdownMenuTrigger asChild>
+												<Button
+													variant="ghost"
+													className={"h-8 w-8 p-0"}
+													aria-label="More options"
+												>
+													<MoreVertical className="h-4 w-4" />
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent align="end">
+												<DropdownMenuItem>
+													<form action={action}>
+														<input
+															type="hidden"
+															name="pageCommentId"
+															value={pageComment.id}
+														/>
+														<input
+															type="hidden"
+															name="pageId"
+															value={pageComment.pageId}
+														/>
+														<Button type="submit" variant="ghost">
+															Delete
+														</Button>
+													</form>
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
+									)}
 								</div>
-								{currentHandle === pageComment.user.handle && (
-									<DropdownMenu modal={false}>
-										<DropdownMenuTrigger asChild>
-											<Button
-												variant="ghost"
-												className={"h-8 w-8 p-0"}
-												aria-label="More options"
-											>
-												<MoreVertical className="h-4 w-4" />
-											</Button>
-										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end">
-											<DropdownMenuItem>
-												<form action={action}>
-													<input
-														type="hidden"
-														name="pageCommentId"
-														value={pageComment.id}
-													/>
-													<input
-														type="hidden"
-														name="pageId"
-														value={pageComment.pageId}
-													/>
-													<Button type="submit" variant="ghost">
-														Delete
-													</Button>
-												</form>
-											</DropdownMenuItem>
-										</DropdownMenuContent>
-									</DropdownMenu>
-								)}
 							</div>
 						</div>
+						<div className="mt-2 prose dark:prose-invert">
+							<MemoizedParsedContent
+								html={pageComment.content}
+								segmentWithTranslations={
+									pageComment.pageCommentSegmentsWithTranslations
+								}
+								currentHandle={currentHandle}
+								voteTarget={VOTE_TARGET.COMMENT_SEGMENT_TRANSLATION}
+								addTranslationFormTarget={
+									ADD_TRANSLATION_FORM_TARGET.COMMENT_SEGMENT_TRANSLATION
+								}
+							/>
+						</div>
 					</div>
-					<div className="mt-2 prose dark:prose-invert">
-						<MemoizedParsedContent
-							html={pageComment.content}
-							segmentWithTranslations={
-								pageComment.pageCommentSegmentsWithTranslations
-							}
-							currentHandle={currentHandle}
-							voteTarget={VOTE_TARGET.COMMENT_SEGMENT_TRANSLATION}
-							addTranslationFormTarget={
-								ADD_TRANSLATION_FORM_TARGET.COMMENT_SEGMENT_TRANSLATION
-							}
-						/>
-					</div>
-				</div>
-			))}
+				);
+			})}
 		</div>
 	);
 }

next/src/app/[locale]/(common-layout)/user/[handle]/page/[slug]/components/sub-header.tsx

@@ -5,6 +5,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Link } from "@/i18n/routing";
 import { ChevronDown, List } from "lucide-react";
+import { getImageProps } from "next/image";
 import { useState } from "react";
 import Toc, { useHasTableOfContents } from "./toc";
 
@@ -53,7 +54,12 @@ export function SubHeader({
 			</>
 		);
 	};
-
+	const { props } = getImageProps({
+		src: pageWithTranslations.user.image,
+		alt: pageWithTranslations.user.name,
+		width: 40,
+		height: 40,
+	});
 	return (
 		<div ref={headerRef}>
 			<div
@@ -70,10 +76,7 @@ export function SubHeader({
 						className="flex items-center mr-2 !no-underline hover:text-gray-700"
 					>
 						<Avatar className="w-10 h-10 flex-shrink-0 mr-3 ">
-							<AvatarImage
-								src={pageWithTranslations.user.image}
-								alt={pageWithTranslations.user.name}
-							/>
+							<AvatarImage {...props} />
 							<AvatarFallback>
 								{pageWithTranslations.user.name.charAt(0).toUpperCase()}
 							</AvatarFallback>

next/src/app/[locale]/components/header/base-header-layout.tsx

@@ -12,6 +12,7 @@ import {
 import { Link } from "@/i18n/routing";
 import { LogOutIcon, SettingsIcon } from "lucide-react";
 import Image from "next/image";
+import { getImageProps } from "next/image";
 import type { ReactNode } from "react";
 import { ModeToggle } from "../mode-toggle";
 import { useHeaderScroll } from "./hooks/use-header-scroll";
@@ -31,7 +32,12 @@ export function BaseHeaderLayout({
 }: BaseHeaderLayoutProps) {
 	// カスタムフックを使用
 	const { headerRef, isPinned, isVisible, headerHeight } = useHeaderScroll();
-
+	const { props } = getImageProps({
+		src: currentUser?.image || "",
+		alt: currentUser?.name || "",
+		width: 40,
+		height: 40,
+	});
 	return (
 		<div ref={headerRef}>
 			<header
@@ -60,7 +66,7 @@ export function BaseHeaderLayout({
 						<DropdownMenu modal={false}>
 							<DropdownMenuTrigger>
 								<Avatar className="w-6 h-6">
-									<AvatarImage src={currentUser.image} alt={currentUser.name} />
+									<AvatarImage {...props} />
 									<AvatarFallback>
 										{currentUser.handle.charAt(0).toUpperCase()}
 									</AvatarFallback>

next/src/app/[locale]/components/header/notifications-dropdown/client.tsx

@@ -10,9 +10,11 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Link } from "@/i18n/routing";
 import { Bell } from "lucide-react";
+import { getImageProps } from "next/image";
 import { startTransition, useActionState } from "react";
 import { markNotificationAsReadAction } from "./action";
 import type { NotificationWithRelations } from "./db/queries.server";
+
 export function NotificationsDropdownClient({
 	notifications,
 	currentUserHandle,
@@ -196,13 +198,19 @@ function NotificationAvatar({
 }: {
 	actor: { handle: string; image: string; name: string };
 }) {
+	const { props } = getImageProps({
+		src: actor.image,
+		alt: actor.name,
+		width: 40,
+		height: 40,
+	});
 	return (
 		<Link
 			href={`/user/${actor.handle}`}
 			className="flex items-center mr-2 !no-underline hover:text-gray-700"
 		>
 			<Avatar className="w-10 h-10 flex-shrink-0 mr-3">
-				<AvatarImage src={actor.image} alt={actor.name} />
+				<AvatarImage {...props} />
 				<AvatarFallback>{actor.name.charAt(0).toUpperCase()}</AvatarFallback>
 			</Avatar>
 		</Link>