✨ feat(blog): create blog part (#284)

Create blog part for publishing blog posts, still WIP.

- [x] Basic Post List
- [x] CSS Style
- [x] add to nav bar
- [x] add contributing guide
- [ ] auto close sidebar (help needed)

.vitepress/config.ts

@@ -81,25 +81,25 @@ const pwaConfig: PwaOptions = {
 			{
 				src: "pwa-64x64.png",
 				sizes: "64x64",
-				type: "image/png"
+				type: "image/png",
 			},
 			{
 				src: "pwa-192x192.png",
 				sizes: "192x192",
-				type: "image/png"
+				type: "image/png",
 			},
 			{
 				src: "pwa-512x512.png",
 				sizes: "512x512",
-				type: "image/png"
+				type: "image/png",
 			},
 			{
 				src: "maskable-icon-512x512.png",
 				sizes: "512x512",
 				type: "image/png",
-				purpose: "maskable"
-			}
-		]
+				purpose: "maskable",
+			},
+		],
 	},
 	workbox: {
 		globPatterns: ["**/*.{css,js,html,svg,webp,ico,txt,woff2}"],
@@ -161,6 +161,7 @@ const themeConfig: DefaultTheme.Config = {
 	nav: [
 		{ text: "主页", link: "/" },
 		{ text: "崩溃分析工具", link: "/analyzer" },
+		{ text: "博客", link: "/blog/" },
 		{
 			text: "贡献",
 			activeMatch: "/contribute/*",
@@ -319,10 +320,11 @@ export default withPwa(
 			lineNumbers: true,
 			config: (md) => {
 				// @ts-expect-error TS2769
-				md.use(BiDirectionalLinks({
-					dir: "docs",
-					baseDir: "/",
-				}),
+				md.use(
+					BiDirectionalLinks({
+						dir: "docs",
+						baseDir: "/",
+					}),
 				),
 					// @ts-expect-error TS2769
 					md.use(InlineLinkPreviewElementTransform)
@@ -334,8 +336,11 @@ export default withPwa(
 		},
 
 		head: [
-			['link', { rel: 'icon', href: '/favicon.ico' }],
-			['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon-180x180.png' }],
+			["link", { rel: "icon", href: "/favicon.ico" }],
+			[
+				"link",
+				{ rel: "apple-touch-icon", href: "/apple-touch-icon-180x180.png" },
+			],
 			[
 				"script",
 				{

.vitepress/data/posts.data.ts

@@ -0,0 +1,23 @@
+import { createContentLoader } from "vitepress"
+
+interface Post {
+	title: string
+	url: string
+	date: string
+	excerpt: string | undefined
+}
+declare const data: Post[]
+export { data }
+
+export default createContentLoader("blog/!(?|index).md", {
+	// Options
+	excerpt: true,
+	transform(raw): Post[] {
+		return raw.map(({ url, frontmatter, excerpt }) => ({
+			title: frontmatter.title,
+			url,
+			date: frontmatter.date,
+			excerpt,
+		}))
+	},
+})

.vitepress/theme/index.ts

@@ -6,6 +6,7 @@ import { h } from "vue"
 // Components
 import LauncherBadge from "./global-components/LauncherBadge.vue"
 import ReloadPrompt from "./components/ReloadPrompt.vue"
+import Posts from "./layouts/Posts.vue"
 
 // Plugins
 import giscusTalk from "vitepress-plugin-comment-with-giscus"
@@ -56,6 +57,7 @@ export default {
 			threshold: 300,
 		})
 		ctx.app.component("LauncherBadge", LauncherBadge)
+		ctx.app.component("Posts", Posts)
 		vitepressNprogress(ctx)
 		ctx.app.component("vImageViewer", vImageViewer)
 		ctx.app.use(NolebaseInlineLinkPreviewPlugin)

.vitepress/theme/layouts/Posts.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { data as posts } from "../../data/posts.data"
+</script>
+
+<template>
+	<div class="container">
+		<div v-for="post in posts" :key="post.url">
+			<a style="color: inherit;" class="card" :href="post.url">
+				<span class="title">{{ post.title }}</span>
+				<div class="content" v-if="post.excerpt" v-html="post.excerpt"></div>
+			</a>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.container {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	max-width: 1200px;
+	flex-wrap: wrap;
+	z-index: 1;
+}
+
+.container .card {
+	position: relative;
+	width: 15rem;
+	height: 10rem;
+	margin: 30px;
+	box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
+	border-radius: 15px;
+	background: rgba(255, 255, 255, 0.1);
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-top: 1px solid rgba(255, 255, 255, 0.5);
+	border-left: 1px solid rgba(255, 255, 255, 0.5);
+	backdrop-filter: blur(5px);
+
+}
+
+.container .card .title {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 1;
+	transition: opacity 0.3s ease-out;
+}
+
+.container .card:hover .title {
+	opacity: 0;
+}
+
+.container .card .content {
+	padding: 10px;
+	text-align: center;
+	transform: translateY(100px);
+	opacity: 0;
+	transition: 0.5s;
+}
+
+.container .card:hover .content {
+	transform: translateY(0px) scale(0.8);
+	opacity: 1;
+}
+
+</style>

docs/blog/index.md

@@ -0,0 +1,29 @@
+---
+sidebar: false
+---
+
+# 博客板块
+
+本板块包含了 GlobeMC 团队的一些博客文章，有助于提升读者的 Debug 能力，有兴趣的读者可以关注一下。
+
+---
+
+<Posts />
+
+---
+
+# 贡献提醒
+
+欢迎大家参与到 GlobeMC 团队的博客文章的编写中来，博客文章的排版规范以本文档排版规范为准。
+
+Frontmatter 格式如下：
+
+```markdown
+---
+sidebar: false
+title: 文章标题
+date: 2024-06-22 19:11:00
+---
+```
+
+出现在第一个 `---` （不包括 frontmatter）之前的部分为文章摘要，将显示在文章列表卡片中。

docs/blog/post1.md

@@ -0,0 +1,14 @@
+---
+sidebar: false
+title: Post1
+date: 2021-01-01T00:00:00Z
+---
+
+# Post1
+
+Some text here.   
+Write excerpts here, before the first `---` line.
+
+---
+
+This is the end of the first post.

docs/blog/post2.md

@@ -0,0 +1,12 @@
+---
+sidebar: false
+title: A vert lone title to test the display style
+date: 2021-01-01 00:00:00
+---
+
+# Post 2
+
+some content here
+
+---
+

docs/contribute/contributing.md

@@ -82,6 +82,10 @@ git clone https://github.com/{yourname}/crashmc.com.git
 
 我们会每周进行一次例行 merge，将所有已完成的更改合并到生产环境 `main` branch，因此请不要将您的更改 PR 到 `main` branch，这会增大我们的代码审查和文档部署工作量。
 
+## 其他提醒
+
+如果要提交博客内容，请参考 [博客主页](https://crashmc.com/blog/) 的贡献指南。
+
 ## 鸣谢
 
 感谢所有为 CrashMC 贡献内容的玩家和开发者，你们的支持是对 CrashMC 最大的鼓励。

docs/contribute/crash-report.md

@@ -6,6 +6,8 @@ contributors: [bingling-sama]
 
 如果您遇到的问题无法在本文档中找到答案，可以点击[这里](https://github.com/GlobeMC/crashmc.com/issues/new/choose)向我们提交您的错误报告，我们将尽快为您解决问题。同时，您所上传的崩溃日志也将作为改进文档的资料使用，感谢您为本文档提供数据。
 
+如果您遇到的问题已经解决，或您已经找到了可行的解决方案，希望您一并填入 Issue 中，感谢您的贡献。
+
 为了方便我们为您检索问题，在上传 `*.log`/`*.txt` 等文本格式文件时，请优先前往 [MCLogs](https://mclo.gs) 上传文件内容并向我们提供网站生成的链接。
 
 :::info 注意