fix: 修复 fediverse comment image 布局

This commit is contained in:
Skyone 2024-12-08 02:34:12 +08:00
parent 03cf6fffe2
commit 3f96faee99
Signed by: skyone-wzw
GPG Key ID: 088762FAD7C84961
9 changed files with 23 additions and 23 deletions
src
app
(admin)/admin/settings/fediverse
(public)/post/[slug]
api/cover/[slug]
icon.tsxlayout.tsx
components
lib

@ -46,10 +46,10 @@ interface FediverseEditorProps {
}
function FediverseEditor({fediverse}: FediverseEditorProps) {
const [enabled, setEnabled] = useState(false);
const [name, setName] = useState("");
const [preferredUsername, setPreferredUsername] = useState("");
const [summary, setSummary] = useState("");
const [enabled, setEnabled] = useState(fediverse.enabled);
const [name, setName] = useState(fediverse.name);
const [preferredUsername, setPreferredUsername] = useState(fediverse.preferredUsername);
const [summary, setSummary] = useState(fediverse.summary);
const [loading, setLoading] = useState(false);
const t = useTranslations("page.admin.settings.FediverseEditor");

@ -13,7 +13,7 @@ import Link from "next/link";
import {notFound} from "next/navigation";
import CommentTree from "@/components/comment/CommentTree";
import {getCommentsByArticleId} from "@/lib/comment";
import {getLocale, getTranslations} from "next-intl/server";
import {getFormatter, getLocale, getTranslations} from "next-intl/server";
interface PostPageProps {
params: {
@ -70,6 +70,7 @@ async function PostPage({params}: PostPageProps) {
const article = await getArticleBySlug(slug);
const {site, fediverse} = await getDynamicConfig();
const t = await getTranslations("page.post");
const formatter = await getFormatter();
if (!article) return notFound();
@ -89,11 +90,9 @@ async function PostPage({params}: PostPageProps) {
<h1 className="px-4 pt-2 md:px-6 text-2xl font-semibold text-text-main">{article.title}</h1>
<div className="px-4 md:px-6 text-sm text-text-subnote flex flex-row flex-nowrap justify-between">
<div>
<time>{article.createdAt.toLocaleDateString("zh-CN", {
year: "numeric",
month: "long",
day: "numeric",
})}</time>
<time dateTime={article.createdAt.toISOString()}>
{formatter.dateTime(article.createdAt, "default")}
</time>
<span className="mx-1 after:content-['·']"></span>
<Link className="text-text-content hover:text-link-hover"
href={L.series(article.series)}>{article.series}</Link>

@ -1,4 +1,4 @@
import {GET as getIcon} from "@/app/favicon/route";
import getIcon from "@/app/icon";
import config from "@/config";
import DefaultCoverImage from "@/default-cover";
import {getDynamicConfig} from "@/lib/config";

@ -16,7 +16,7 @@ function getFileContentTypeFromExtension(ext?: string) {
const customImageDir = config.dir.custom;
export async function GET() {
async function Icon() {
const dynamicConfig = await getDynamicConfig();
const logo = dynamicConfig.site.logo;
@ -41,3 +41,5 @@ export async function GET() {
return new Response(await fs.readFile(`${customImageDir}/${logo}`), {headers});
}
export default Icon;

@ -62,7 +62,6 @@ async function RootLayout({children}: RootLayoutProps) {
return (
<html lang={locale}>
<head>
<link rel="icon" href={"/favicon"} sizes="any"/>
<link rel="sitemap" type="application/xml" title="Sitemap" href={"/sitemap.xml"}/>
</head>
<body className={clsx(inter.className, "pk-scroll", {"color-transition": config.theme.colorTransition})}>

@ -35,7 +35,9 @@ async function ArticleSummaryCard({className, article}: ArticleSummaryCardProps)
</section>
<div className="flex justify-between text-text-subnote text-sm">
<div>
<time>{formatter.dateTime(article.createdAt, "default")}</time>
<time dateTime={article.createdAt.toISOString()}>
{formatter.dateTime(article.createdAt, "default")}
</time>
<span className="mx-1 after:content-['·']"></span>
<Link className="text-text-content hover:underline hover:text-link-hover"
href={L.series(article.series)}>

@ -309,10 +309,9 @@ function ArticleEditor({article, allTags, className}: ArticleEditorProps) {
</div>
</div>
<div className="w-full">
<label htmlFor="article-editor-info-tags"
className="block text-sm font-medium leading-6 text-text-content">
<p className="block text-sm font-medium leading-6 text-text-content">
{t("tags")}
</label>
</p>
<div
className="flex flex-row flex-wrap p-2 md:p-3 text-sm text-text-content gap-2 select-none">
{tags.map((tag, index) => (
@ -323,10 +322,9 @@ function ArticleEditor({article, allTags, className}: ArticleEditorProps) {
</button>
))}
</div>
<label htmlFor="article-editor-info-tags"
className="block text-sm font-medium leading-6 text-text-subnote">
<p className="block text-sm font-medium leading-6 text-text-subnote">
{t("tagQuickAdd")}
</label>
</p>
<div
className="flex flex-row flex-wrap p-2 md:p-3 text-sm text-text-subnote gap-2 select-none">
{otherTags.map((tag) => (

@ -110,9 +110,9 @@ async function CommentItem({comment, replies, replyTarget}: CommentItemProps) {
<CommentHASTRender ast={JSON.parse(comment.parsed)}/>
</div>
{comment.images.length > 0 && (
<div className="flex flex-row flex-wrap gap-2">
<div className="grid gap-2" style={{gridTemplateColumns: "repeat(auto-fit, minmax(128px, 1fr))"}}>
{comment.images.map((image, index) => (
<ImgWithViewer className="min-w-32 w-0 aspect-square rounded shadow-sm flex-grow object-cover"
<ImgWithViewer className="max-w-full aspect-square rounded shadow-sm object-cover"
key={index} src={image.url} alt={`comment-image-${index}`}/>
))}
</div>

@ -48,7 +48,7 @@ export function DeepMergeTemplate<T extends object>(target: T, ...sources: any[]
if (isObject(target) && isObject(source)) {
for (const key in target) {
// @ts-ignore
if (source?.[key] && typeof source[key] === typeof target[key]) {
if (source?.[key] !== undefined && typeof source[key] === typeof target[key]) {
// @ts-ignore
if (isObject(source[key])) {
// @ts-ignore