feat: home 介绍

src/components/ColorCard.astro

@@ -0,0 +1,56 @@
+---
+import { Image } from "astro:assets";
+interface Props {
+  title: string;
+  image: ImageMetadata;
+  description: string;
+}
+const { title, image, description } = Astro.props;
+---
+
+<div class="card">
+  <h2>{title}</h2>
+  <p class="description">{description}</p>
+  <Image src={image} alt={title} />
+  <div class="content">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .card {
+    background-image: radial-gradient(
+        ellipse at 0 0,
+        rgba(252, 180, 45, 0.1) 20%,
+        rgba(252, 180, 45, 0) 80%
+      ),
+      radial-gradient(
+        ellipse at 0 100%,
+        rgba(130, 80, 223, 0.1) 20%,
+        rgba(130, 80, 223, 0) 80%
+      );
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+  }
+  h2 {
+    margin-bottom: 1.5rem;
+  }
+  .content {
+    font-size: 1.25rem;
+  }
+
+  .description {
+    font-size: 1.25rem;
+  }
+
+  img {
+    margin: 1rem 0;
+    border-radius: 0.5rem;
+  }
+  @media (min-width: 50rem) {
+    img {
+      margin: 5rem 0;
+      transform: scale(1.2);
+    }
+  }
+</style>

src/content/docs/download.mdx

@@ -10,8 +10,8 @@ template: splash
 
 import { Card, CardGrid } from "@astrojs/starlight/components";
 
-import DownloadView from "../../components/DownloadView";
-import CardButton from "../../components/CardButton.astro";
+import DownloadView from "@components/DownloadView";
+import CardButton from "@components/CardButton.astro";
 
 <Card>
   <DownloadView client:load />

src/content/docs/index.mdx

@@ -16,6 +16,29 @@ hero:
       icon: external
 ---
 
+import ColorCard from "@components/ColorCard.astro";
+import myImage from "@assets/images/screenshot.png";
+
+<ColorCard title="New Miru" image={myImage} description="使用 Flutter 开发，扩展使用 QuickJS 引擎驱动，目前正在逐步实现功能">
+
+🎉 利用 Miru 的扩展系统，可以轻松的添加新的源
+
+🦋 使用对应系统 UI 设计语言，让你的体验更加统一，不割裂
+
+📱 支持多平台，包括 Android、Windows、Web。
+
+🌐 支持自定义扩展仓库与代理。
+
+📦 官方扩展仓库提供视频源，无需编写任何扩展即可使用。
+
+📜 使用 TMDB 获取影视信息，支持多语言。
+
+📚 支持在线观看多种视频、漫画、小说源，实现多平台的统一。
+
+📖 支持保存观看进度，不在担心看到一半的视频、漫画、小说找不到进度。
+
+</ColorCard>
+
 import AboutMiru from "../../components/AboutMiru.astro";
 
 <AboutMiru title="Brought to you by">

tsconfig.json

@@ -2,6 +2,11 @@
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@assets/*": ["src/assets/*"]
+    }
   }
-}
+}