src/pages/posts/[...slug].astro

---
import { render } from "astro:content";
import * as path from "node:path";
import Comment from "@components/comment/index.astro";
import Markdown from "@components/common/Markdown.astro";
import KatexManager from "@components/features/KatexManager.astro";
import License from "@components/misc/License.astro";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { getSortedPosts } from "@utils/content-utils";
import {
	getFileDirFromPath,
	getPostUrlBySlug,
	removeFileExtension,
} from "@utils/url-utils";
import { Icon } from "astro-icon/components";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import CoverImage from "@/components/common/CoverImage.astro";
import PostMetadata from "@/components/layout/PostMeta.astro";
import SharePoster from "@/components/misc/SharePoster.svelte";
import { coverImageConfig } from "@/config/coverImageConfig";
import { licenseConfig } from "@/config/licenseConfig";
import { profileConfig } from "@/config/profileConfig";
import { siteConfig } from "@/config/siteConfig";
import { sponsorConfig } from "@/config/sponsorConfig";
import { formatDateToYYYYMMDD } from "@/utils/date-utils";
import { processCoverImageSync } from "@/utils/image-utils";
import { url } from "@/utils/url-utils";

export async function getStaticPaths() {
	const blogEntries = await getSortedPosts();
	return blogEntries.map((entry) => {
		// 将 id 转换为 slug（移除扩展名）以匹配路由参数
		const slug = removeFileExtension(entry.id);
		return {
			params: { slug },
			props: { entry },
		};
	});
}

const { entry } = Astro.props;
const { Content, headings } = await render(entry);

const { remarkPluginFrontmatter } = await render(entry);

// 处理随机图：如果image为"api"，则从配置的API获取随机图
const processedImage = processCoverImageSync(entry.data.image, entry.id);

let posterCoverUrl = processedImage;
if (processedImage) {
	const isLocal = !(
		processedImage.startsWith("/") ||
		processedImage.startsWith("http") ||
		processedImage.startsWith("https") ||
		processedImage.startsWith("data:")
	);
	if (isLocal) {
		const basePath = getFileDirFromPath(entry.filePath || "");
		const files = import.meta.glob<ImageMetadata>("../../**", {
			import: "default",
		});
		let normalizedPath = path
			.normalize(path.join("../../", basePath, processedImage))
			.replace(/\\/g, "/");
		const file = files[normalizedPath];
		if (file) {
			const img = await file();
			posterCoverUrl = img.src;
		}
	}
}

dayjs.extend(utc);

const jsonLd = {
	"@context": "https://schema.org",
	"@type": "BlogPosting",
	headline: entry.data.title,
	description: entry.data.description || entry.data.title,
	keywords: entry.data.tags,
	author: {
		"@type": "Person",
		name: profileConfig.name,
		url: Astro.site,
	},
	datePublished: formatDateToYYYYMMDD(entry.data.published),
	inLanguage: entry.data.lang
		? entry.data.lang.replace("_", "-")
		: siteConfig.lang.replace("_", "-"),
	// TODO include cover image here
};
---

<MainGridLayout
  banner={processedImage}
  title={entry.data.title}
  description={entry.data.description}
  lang={entry.data.lang}
  setOGTypeArticle={true}
  postSlug={entry.id}
  headings={headings}
>
  <!-- KaTeX 按需加载 - 仅在文章页面 -->
  <KatexManager slot="head" />
  
  <script
    is:inline
    slot="head"
    type="application/ld+json"
    set:html={JSON.stringify(jsonLd)}
  />
  <div
    class="flex w-full rounded-(--radius-large) overflow-hidden relative mb-4"
  >
    <div
      id="post-container"
      class:list={[
        "card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
        {},
      ]}
    >
      <!-- word count and reading time -->
      <div
        class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation"
      >
        <div class="flex flex-row items-center">
          <div
            class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2"
          >
            <Icon name="material-symbols:notes-rounded" />
          </div>
          <div class="text-sm">
            {remarkPluginFrontmatter.words}
            {" " + i18n(I18nKey.wordsCount)}
          </div>
        </div>
        <div class="flex flex-row items-center">
          <div
            class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2"
          >
            <Icon name="material-symbols:schedule-outline-rounded" />
          </div>
          <div class="text-sm">
            {remarkPluginFrontmatter.minutes}
            {
              " " +
                i18n(
                  remarkPluginFrontmatter.minutes === 1
                    ? I18nKey.minuteCount
                    : I18nKey.minutesCount
                )
            }
          </div>
        </div>
      </div>

      <!-- title -->
      <div class="relative onload-animation">
        <h1
          data-pagefind-body
          data-pagefind-weight="10"
          data-pagefind-meta="title"
          class="transition w-full block font-bold mb-3
                    text-3xl md:text-[2.25rem]/[2.75rem]
                    text-black/90 dark:text-white/90
                    md:before:w-1 before:h-5 before:rounded-md before:bg-(--primary)
                    before:absolute before:top-3 before:-left-4.5"
        >
          {entry.data.title}
        </h1>
      </div>

      <!-- metadata -->
      <div class="onload-animation">
        <PostMetadata
          className="mb-5"
          published={entry.data.published}
          updated={entry.data.updated}
          tags={entry.data.tags}
          category={entry.data.category || undefined}
          id={entry.id}
        />
        {
          !processedImage && (
            <div class="border-(--line-divider) border-dashed border-b mt-3 mb-5" />
          )
        }
      </div>

      <!-- always show cover as long as it has one -->

      {
        processedImage && coverImageConfig.enableInPost && (
          <div style="margin-top:1rem;">
            <CoverImage
              id="post-cover"
              src={processedImage}
              basePath={getFileDirFromPath(entry.filePath || '')}
              class="mb-8 rounded-xl banner-container onload-animation"
              preview={false}
            />
          </div>
        )
      }

      <Markdown class="mb-6 markdown-content onload-animation">
        <Content />
      </Markdown>

      {/* 赞助按钮 & 分享按钮 */}
      {
        (siteConfig.sharePoster || (sponsorConfig.showButtonInPost && siteConfig.pages.sponsor)) && (
          <div class="mb-6 rounded-xl onload-animation">
            <div class="p-6 bg-(--license-block-bg) rounded-xl">
              <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-3 flex-1">
                  <div class="h-12 w-12 rounded-lg bg-(--primary) flex items-center justify-center text-white dark:text-black/70 shrink-0">
                    <Icon
                      name={sponsorConfig.showButtonInPost &&
                      siteConfig.pages.sponsor
                        ? "material-symbols:favorite"
                        : "material-symbols:share"}
                      class="text-2xl"
                    />
                  </div>
                  <div>
                    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-1">
                      {
                        sponsorConfig.showButtonInPost && siteConfig.pages.sponsor
                          ? i18n(I18nKey.sponsorButton)
                          : i18n(I18nKey.shareOnSocial)
                      }
                    </h3>
                    <p class="text-sm text-neutral-600 dark:text-neutral-400">
                      {
                        sponsorConfig.showButtonInPost && siteConfig.pages.sponsor
                          ? i18n(I18nKey.sponsorButtonText)
                          : i18n(I18nKey.shareOnSocialDescription)
                      }
                    </p>
                  </div>
                </div>
                <div class="flex items-center gap-3">
                  {
                    siteConfig.sharePoster && (
                      <SharePoster
                        client:load
                        title={entry.data.title}
                        author={profileConfig.name}
                        description={entry.data.description || entry.data.title}
                        pubDate={formatDateToYYYYMMDD(entry.data.published)}
                        coverImage={posterCoverUrl}
                        url={Astro.url.href}
                        siteTitle={siteConfig.title}
                        avatar={profileConfig.avatar}
                      />
                    )
                  }
                  {
                    sponsorConfig.showButtonInPost && siteConfig.pages.sponsor && (
                      <a
                        href={url("/sponsor/")}
                        class="inline-flex items-center gap-2 px-6 py-3 bg-(--primary) text-white dark:text-black/70 rounded-lg font-medium hover:bg-(--primary)/80 hover:scale-105 active:scale-95 transition-all whitespace-nowrap"
                      >
                        <span>{i18n(I18nKey.sponsor)}</span>
                        <Icon name="fa7-solid:arrow-right" class="text-sm" />
                      </a>
                    )
                  }
                </div>
              </div>
            </div>
          </div>
        )
      }

      {
        licenseConfig.enable && (
          <License
            title={entry.data.title}
            id={entry.id}
            pubDate={entry.data.published}
            author={entry.data.author}
            sourceLink={entry.data.sourceLink}
            licenseName={entry.data.licenseName}
            licenseUrl={entry.data.licenseUrl}
            class="mb-6 rounded-xl license-container onload-animation"
          />
        )
      }
    </div>
  </div>

  <!-- 上次编辑时间 -->
  {
    siteConfig.showLastModified && (() => {
      const lastModified = dayjs(
        entry.data.updated || entry.data.published
      );
      const now = dayjs();
      const daysDiff = now.diff(lastModified, "day");
      // 使用用户定义的阈值，如果没有定义则默认为1天
      const outdatedThreshold = siteConfig.outdatedThreshold ?? 1;
      const shouldShowOutdatedCard = daysDiff >= outdatedThreshold;

      return shouldShowOutdatedCard ? (
        <div class="card-base p-6 mb-4">
          <div class="flex items-center gap-2">
            <div class="transition h-9 w-9 rounded-lg overflow-hidden relative flex items-center justify-center mr-0">
              <Icon
                name="material-symbols:history-rounded"
                class="text-4xl text-(--primary) transition-transform group-hover:translate-x-0.5 bg-(--enter-btn-bg) p-2 rounded-md"
              />
            </div>

            {(() => {
              const dateStr = lastModified.format("YYYY-MM-DD");
              const isOutdated = daysDiff >= 1;

              return (
                <div class="flex flex-col gap-0.1">
                  <div class="text-[1.0rem] leading-tight text-black/75 dark:text-white/75">
                    {`${i18n(I18nKey.lastModifiedPrefix)}${dateStr}${
                      isOutdated
                        ? `，${i18n(I18nKey.lastModifiedDaysAgo).replace("{days}", daysDiff.toString())}`
                        : ""
                    }`}
                  </div>
                  {isOutdated && (
                    <p class="text-[0.8rem] leading-tight text-black/75 dark:text-white/75">
                      {i18n(I18nKey.lastModifiedOutdated)}
                    </p>
                  )}
                </div>
              );
            })()}
          </div>
        </div>
      ) : null;
    })()
  }

  <div
    class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full"
  >
    <a
      href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
      class:list={[
        "w-full font-bold overflow-hidden active:scale-95",
        { "pointer-events-none": !entry.data.nextSlug },
      ]}
    >
      {
        entry.data.nextSlug && (
          <div class="btn-card rounded-2xl w-full h-15 max-w-full px-4 flex items-center justify-start! gap-4">
            <Icon
              name="material-symbols:chevron-left-rounded"
              class="text-[2rem] text-(--primary)"
            />
            <div class="overflow-hidden transition text-ellipsis whitespace-nowrap max-w-[calc(100%-3rem)] text-black/75 dark:text-white/75">
              {entry.data.nextTitle}
            </div>
          </div>
        )
      }
    </a>

    <a
      href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
      class:list={[
        "w-full font-bold overflow-hidden active:scale-95",
        { "pointer-events-none": !entry.data.prevSlug },
      ]}
    >
      {
        entry.data.prevSlug && (
          <div class="btn-card rounded-2xl w-full h-15 max-w-full px-4 flex items-center justify-end! gap-4">
            <div class="overflow-hidden transition text-ellipsis whitespace-nowrap max-w-[calc(100%-3rem)] text-black/75 dark:text-white/75">
              {entry.data.prevTitle}
            </div>
            <Icon
              name="material-symbols:chevron-right-rounded"
              class="text-[2rem] text-(--primary)"
            />
          </div>
        )
      }
    </a>
  </div>

  <!-- 评论 -->
  {entry.data.comment && <Comment post={entry} />}
</MainGridLayout>