add dependency

package.json

@@ -26,6 +26,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"rehype": "^13.0.1",
+		"sharp": "^0.33.3",
 		"tailwindcss": "^3.4.3",
 		"unist-util-visit": "^5.0.0",
 		"vue": "^3.4.21"

src/pages/index.astro

@@ -1,9 +1,12 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
+import BaseLayout from "../layouts/BaseLayout.astro"
-import Tile from "../layouts/Tile.astro";
+import Tile from "../layouts/Tile.astro"
-import MoreTile from "../layouts/MoreTile.astro";
+import MoreTile from "../layouts/MoreTile.astro"
-const allPosts = await Astro.glob("../pages/posts/*.md");
+const allPosts = await Astro.glob("../pages/posts/*.md")
-allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
+allPosts.sort(
+  (a, b) =>
+    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
+)
 ---
 
 <BaseLayout>
@@ -15,8 +18,15 @@ allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontma
           // tile-hero
           allPosts.slice(0, 1).map((post) => {
             return (
-              <Tile title={post.frontmatter.title} href={post.url} date={post.frontmatter.pubDate} tags={post.frontmatter.tags} cover={post.frontmatter.cover.url} level="1" />
+              <Tile
-            );
+                title={post.frontmatter.title}
+                href={post.url}
+                date={post.frontmatter.pubDate}
+                tags={post.frontmatter.tags}
+                cover={post.frontmatter.cover.url}
+                level="1"
+              />
+            )
           })
         }
 
@@ -24,8 +34,15 @@ allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontma
           // tile-2up
           allPosts.slice(1, 5).map((post) => {
             return (
-              <Tile title={post.frontmatter.title} href={post.url} date={post.frontmatter.pubDate} tags={post.frontmatter.tags} cover={post.frontmatter.cover.url} level="2" />
+              <Tile
-            );
+                title={post.frontmatter.title}
+                href={post.url}
+                date={post.frontmatter.pubDate}
+                tags={post.frontmatter.tags}
+                cover={post.frontmatter.cover.url}
+                level="2"
+              />
+            )
           })
         }
 
@@ -33,8 +50,15 @@ allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontma
           // tile-3up
           allPosts.slice(5, 11).map((post) => {
             return (
-              <Tile title={post.frontmatter.title} href={post.url} date={post.frontmatter.pubDate} tags={post.frontmatter.tags} cover={post.frontmatter.cover.url} level="3" />
+              <Tile
-            );
+                title={post.frontmatter.title}
+                href={post.url}
+                date={post.frontmatter.pubDate}
+                tags={post.frontmatter.tags}
+                cover={post.frontmatter.cover.url}
+                level="3"
+              />
+            )
           })
         }
       </ul>
@@ -45,35 +69,44 @@ allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontma
     <div class="section-content">
       <h2 class="section-head">更多文章</h2>
 
-
       <ul role="list" class="section-tiles">
-
         {
           // tile-2up
           allPosts.slice(0, 6).map((post) => {
             return (
-              <MoreTile title={post.frontmatter.title} href={post.url} date={post.frontmatter.pubDate} tags={post.frontmatter.tags} cover={post.frontmatter.cover.url} />
+              <MoreTile
-            );
+                title={post.frontmatter.title}
+                href={post.url}
+                date={post.frontmatter.pubDate}
+                tags={post.frontmatter.tags}
+                cover={post.frontmatter.cover.url}
+              />
+            )
           })
         }
       </ul>
       <div class="view-archive-wrapper">
-        <a href="/archive" class="cta-primary-light" data-analytics-region="router" data-analytics-title="view archive">阅读历史文章</a>
+        <a
+          href="/archive"
+          class="cta-primary-light"
+          data-analytics-region="router"
+          data-analytics-title="view archive">阅读历史文章</a
+        >
       </div>
     </div>
   </section>
 
   <script is:inline>
     document.addEventListener("DOMContentLoaded", function () {
-      var script = document.createElement("script");
+      var script = document.createElement("script")
-      script.src = "/static/js/animation.js";
+      script.src = "/static/js/animation.js"
-      document.head.appendChild(script);
+      document.head.appendChild(script)
 
       script.onload = function () {
-        console.log("lazyload.js loaded");
+        console.log("lazyload.js loaded")
         // when layout is loaded, load the images
-        initImage();
+        initImage()
-      };
+      }
-    });
+    })
   </script>
 </BaseLayout>

tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
   }
 }