MongoRolls · MongoRolls · Feb 8, 2025 · Feb 8, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,7 +9,8 @@
     "dgutcs",
     "hongshen",
     "jinyu",
-    "Uniapp"
+    "Uniapp",
+    "vmin"
   ],
   "files.associations": {
     "*.mdx": "markdown"

diff --git a/README.md b/README.md
@@ -12,15 +12,17 @@ Ciallo ～(∠・ω< )⌒⭐
 
 总结学习经验，相关课程指南，希望对你将来的学习有所帮助。
 
+![dgutcs.wiki](https://camo.githubusercontent.com/c12baeff1379d6454eaaade4f1a8b482372eef6ef8b652d1c3573cabf8264638/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f73756e3032323553554e2f73756e3032323553554e2f6173736574732f696d616765732f69636f6e2e706e67)
+
 ## 在线访问
 
 [dgutcs.wiki](https://dgutcs.wiki)
 
-## 技术栈
+## wiki技术栈
 
 - 框架：[Astro](https://astro.build/) + [Starlight](https://starlight.astro.build/)
 - 样式：[Tailwind CSS](https://tailwindcss.com/)
-- 部署：GitHub Pages / Vercel
+- 部署：Vercel + cloudflare
 
 ## 本地开发
 
@@ -31,8 +33,6 @@ pnpm dev
 
 ## 成为贡献者
 
-由于个人精力有限，我实在不可能把所有计算机相关的内容都学习一遍。因此，如果有推荐的课程或资料分享，欢迎提交 PR 或发送邮件。
-
 贡献步骤：
 
 1. Fork 本项目到你的仓库

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -26,6 +26,7 @@ export default defineConfig({
       components: {
         Header: "./src/components/starlight/Header.astro",
         MarkdownContent: "./src/components/starlight/MarkdownContent.astro",
+        Hero: "./src/components/starlight/Hero.astro",
       },
       customCss: ["./src/tailwind.css"],
       editLink: {

diff --git a/package.json b/package.json
@@ -24,15 +24,19 @@
     "@astrojs/starlight": "^0.31.1",
     "@astrojs/starlight-tailwind": "^3.0.0",
     "@astrojs/tailwind": "^5.1.5",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@types/aos": "^3.0.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
+    "aos": "^2.3.4",
     "astro": "^5.1.5",
     "astro-feelback": "^0.3.4",
     "gray-matter": "^4.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
+    "sass": "^1.84.0",
     "sharp": "^0.32.5",
     "starlight-heading-badges": "^0.4.0",
     "starlight-image-zoom": "^0.10.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/hero.svg b/src/assets/hero.svg
diff --git a/src/components/starlight/Header.astro b/src/components/starlight/Header.astro
@@ -194,4 +194,4 @@ const shouldRenderSearch =
   :global([data-theme="light"]) [aria-expanded="true"] button {
     background-color: var(--sl-color-gray-5);
   }
-</style>
+</style>
diff --git a/src/components/starlight/Hero.astro b/src/components/starlight/Hero.astro
@@ -0,0 +1,185 @@
+---
+import { Image } from 'astro:assets';
+import 'aos/dist/aos.css';
+
+import { LinkButton } from '@astrojs/starlight/components';
+import type { Props } from '@astrojs/starlight/props';
+
+
+const { data } = Astro.props.entry;
+const { title = data.title, tagline, image, actions = [] } = data.hero || {};
+
+const imageAttrs = {
+	loading: 'eager' as const,
+	decoding: 'async' as const,
+	width: 400,
+	height: 400,
+	alt: image?.alt || '',
+};
+
+let darkImage: ImageMetadata | undefined;
+let lightImage: ImageMetadata | undefined;
+let rawHtml: string | undefined;
+if (image) {
+	if ('file' in image) {
+		darkImage = image.file;
+	} else if ('dark' in image) {
+		darkImage = image.dark;
+		lightImage = image.light;
+	} else {
+		rawHtml = image.html;
+	}
+}
+---
+
+<div class="hero">
+	{
+		darkImage && (
+			<Image
+				data-aos="zoom-in-left"
+				src={darkImage}
+				{...imageAttrs}
+				class:list={{ 'light:sl-hidden': Boolean(lightImage) }}
+			/>
+		)
+	}
+	{lightImage && <Image data-aos="zoom-in-left" src={lightImage} {...imageAttrs} class="dark:sl-hidden" />}
+	{rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
+	<div class="sl-flex stack">
+		<div class="sl-flex copy">
+			<h1 id="_top" class="hero-title" data-page-title set:html={title} />
+			{tagline && <div class="tagline typing" set:html={tagline} />}
+		</div>
+		{
+			actions.length > 0 && (
+				<div  class="sl-flex actions">
+					{actions.map(
+						({ attrs: { class: className, ...attrs } = {}, icon, link: href, text, variant }) => (
+							<LinkButton {href} {variant} icon={icon?.name} class:list={[className]} {...attrs}>
+								{text}
+								{icon?.html && <Fragment set:html={icon.html} />}
+							</LinkButton>
+						)
+					)}
+				</div>
+			)
+		}
+	</div>
+</div>
+
+<style>
+	.hero {
+		display: grid;
+		align-items: center;
+		gap: 1rem;
+		padding-bottom: 1rem;
+	}
+
+	.hero > img,
+	.hero > .hero-html {
+		object-fit: contain;
+		width: min(70%, 20rem);
+		height: auto;
+		margin-inline: auto;
+	}
+
+	.stack {
+		flex-direction: column;
+		gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
+		text-align: center;
+	}
+
+	.copy {
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+	}
+
+	.copy > * {
+		max-width: 50ch;
+	}
+
+	h1 {
+		font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
+		line-height: var(--sl-line-height-headings);
+		font-weight: 600;
+		color: var(--sl-color-white);
+	}
+
+	.tagline {
+		font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
+		color: var(--sl-color-gray-2);
+	}
+
+	.actions {
+		gap: 1rem 2rem;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.hero-title {
+		font-family: monospace;
+		color: 
+	}
+
+	.typing {
+	font-family: monospace;
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	animation: typing 2s steps(5, end), blink 0.75s step-end infinite;
+	border-right: 3px solid black;
+	vertical-align: middle;
+	}
+
+	@keyframes typing {
+	from { width: 0; }
+	to { width: 8ch; }
+	}
+
+	@keyframes blink {
+	from, to { border-color: transparent; }
+	50% { border-color: black; }
+	}
+
+
+	@media (min-width: 50rem) {
+		.hero {
+			grid-template-columns: 7fr 4fr;
+			gap: 3%;
+			padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
+		}
+
+		.hero > img,
+		.hero > .hero-html {
+			order: 2;
+			width: min(100%, 25rem);
+		}
+
+		.stack {
+			text-align: start;
+		}
+
+		.copy {
+			align-items: flex-start;
+		}
+
+		.actions {
+			justify-content: flex-start;
+		}
+	}
+</style>
+
+<script>
+      // 2. 在客户端动态导入并初始化
+      const loadAOS = async () => {
+        //@ts-ignore
+        const AOS = await import('aos');
+        AOS.default.init({
+          duration: 1200,
+          once: true
+        });
+      };
+
+      loadAOS();
+</script>
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: DGUT CS WIKI
+title: DGUTCS WIKI
 description: 莞工计算机学习指南
 head:
   - tag: title
@@ -19,9 +19,9 @@ head:
 
 template: splash
 hero:
-  tagline: 学而思不足！
+  tagline: 学而思不足
   image:
-    file: ../../assets/logo.png
+    file: ../../assets/hero.svg
   actions:
     - text: Getting Started
       link: /前言
@@ -34,30 +34,29 @@ hero:
 
 import { Card, CardGrid } from "@astrojs/starlight/components";
 
+<div data-aos="fade-up">
 <CardGrid stagger>
-  <Card title="大学规划，成功案例" icon="pencil">
+  <Card  title="大学规划，成功案例" icon="pencil">
     竞赛？考研？找工作？考公？留学？你想了解的，这里都有成功案例，助力你冲击名校和大厂。
   </Card>
 
-{' '}
+{" "}
+
 <Card title="工程开发，学习路线" icon="setting">
   前端开发、后端开发和人工智能学习路线和课程推荐，点亮全部技能树，补齐教学短板。
 </Card>
 
-{' '}
+{" "}
+
 <Card title="学习疑阵，随时答疑" icon="information">
   如果你在学习过程中遇到了任何问题，加入我们的学习矩阵，群内大佬随时在线答疑。
 </Card>
 
-   <Card title="学科课程，免费精选" icon="open-book">
+  <Card title="学科课程，免费精选" icon="open-book">
     莞工计算机系相关学科课程的资源推荐和学习建议，拒绝选择困难，全套资源均免费获取，放心食用。
   </Card>
 </CardGrid>
+</div>
+<h2 class="sr-only">学习路线，工程开发</h2>
 
-<h2 class="sr-only">
-  学习路线，工程开发
-</h2>
-
-<h2 class="sr-only">
-  欢迎加入我们的学习矩阵，群内大佬随时在线答疑。
-</h2>
+<h2 class="sr-only">欢迎加入我们的学习矩阵，群内大佬随时在线答疑。</h2>