feat(site/blog): use next/image instead of img

site/blog/app/posts/[slug]/opengraph-image.tsx

@@ -1,4 +1,5 @@
 import { ImageResponse } from "next/og";
+import { default as ImageIcon } from "next/image";
 
 import { getPostBySlug } from "@/lib/posts";
 
@@ -24,10 +25,14 @@ export default async function Image({ params }: { params: { slug: string } }) {
           padding: 120,
         }}
       >
-        <img
+        <ImageIcon
+          sizes="100vw"
+          style={{ borderRadius: 64, width: 72, height: "auto" }}
+          width={72}
+          height={72}
           alt="avatar"
           src={`https://qhan.wang/favicon.png`}
-          style={{ borderRadius: 64, width: 72 }}
+          //style={{ borderRadius: 64, width: 72 }}
         />
         <div
           style={{ display: "flex", marginLeft: 60, flexDirection: "column" }}

site/blog/app/projects/components/PicGallery.tsx

@@ -27,7 +27,7 @@ export default function PicGallery({ id, images }: PicGalleryProps) {
       // @ts-ignore
       lightbox = null;
     };
-  }, []);
+  }, [id]);
 
   return (
     <div className="pswp-gallery grid grid-cols-2 md:grid-cols-3 gap-4" id={id}>

site/blog/app/projects/ism-analysis/page.tsx

@@ -29,8 +29,12 @@ export default function Preview() {
         <ul>
           <li>制度库：管理监管、金融机构相关制度。</li>
           <li>制度检索：用于查询相关制度，实现方式为模糊查询匹配。</li>
-          <li>制度分析：用于两两制度对比、分析差异，找出问题所在，并出具项目分析报告。同时涵盖人工评价</li>
-          <li>图谱管理：监管、金融机构制度图谱管理，提供制度的导入、解析、分词、标注、核对、图谱生成、对比等功能，并包括图谱升级等功能。</li>
+          <li>
+            制度分析：用于两两制度对比、分析差异，找出问题所在，并出具项目分析报告。同时涵盖人工评价
+          </li>
+          <li>
+            图谱管理：监管、金融机构制度图谱管理，提供制度的导入、解析、分词、标注、核对、图谱生成、对比等功能，并包括图谱升级等功能。
+          </li>
           <li>系统管理：应用基本配置设置，如权限等基础功能。</li>
         </ul>
         <h4>所用技术</h4>
@@ -45,11 +49,23 @@ export default function Preview() {
         <PicGallery id="ism-analysis" images={pics} />
 
         <h4>前端架构</h4>
-        <div className="relative aspect-auto">
-          <img src="/images/projects/kupo-ism-analysis/architecture-diagram.jpeg" />
-        </div>
+        <Image
+          sizes="100vw"
+          style={{ width: "100%", height: "auto" }}
+          width={500}
+          height={300}
+          alt=""
+          src="/images/projects/kupo-ism-analysis/architecture-diagram.jpeg"
+        />
         <h4>核心流程-图谱管理</h4>
-        <img src="/images/projects/kupo-ism-analysis/graph-management-flowchart.jpeg" />
+        <Image
+          sizes="100vw"
+          style={{ width: "100%", height: "auto" }}
+          width={500}
+          height={300}
+          alt=""
+          src="/images/projects/kupo-ism-analysis/graph-management-flowchart.jpeg"
+        />
       </div>
       <Footer className="prose mx-auto" />
     </>

site/blog/app/sitemap.ts

@@ -17,7 +17,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   }));
 
   // 加入本地的其他路由页面
-  const route_maps: MetadataRoute.Sitemap = ["/", "/posts", "/projects"].map(
+  const route_maps: MetadataRoute.Sitemap = ["", "/posts", "/projects"].map(
     (route) => ({
       url: domain + route,
       lastModified: new Date().toISOString(),

site/blog/lib/utils.ts

@@ -10,7 +10,7 @@ export function getGitLastUpdatedTimeStamp(filePath: string) {
       { cwd: path.dirname(filePath) }
     ).stdout.toString("utf-8");
 
-    lastUpdated = new Date(parseInt(timestamp) * 1000);
+    lastUpdated = timestamp ? new Date(parseInt(timestamp) * 1000) : new Date();
   } catch (e) {
     /* do not handle for now */
   }