Skip to content

Commit 41878f2

Browse files
SunrisepeakSunrisepeak
authored
add homepage (#1)
mcpp-community/OpenOrg#10 mcpp-community/OpenOrg#1
1 parent d95dcc7 commit 41878f2

File tree

13 files changed

+3310
-1
lines changed

13 files changed

+3310
-1
lines changed

‎.github/workflows/homepage-deploy.yml‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
2+
#
3+
name: Deploy VitePress site to Pages
4+
5+
on:
6+
# 在针对 `main` 分支的推送上运行。如果你
7+
# 使用 `master` 分支作为默认分支，请将其更改为 `master`
8+
push:
9+
branches: [main]
10+
paths:
11+
- 'homepage/**'
12+
13+
# 允许你从 Actions 选项卡手动运行此工作流程
14+
workflow_dispatch:
15+
16+
# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
17+
permissions:
18+
contents: read
19+
pages: write
20+
id-token: write
21+
22+
# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
23+
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
24+
concurrency:
25+
group: pages
26+
cancel-in-progress: false
27+
28+
jobs:
29+
# 构建工作
30+
build:
31+
runs-on: ubuntu-latest
32+
steps:
33+
- name: Checkout
34+
uses: actions/checkout@v4
35+
with:
36+
fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
37+
- uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消此区域注释
38+
with:
39+
version: 9
40+
# - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
41+
- name: Setup Node
42+
uses: actions/setup-node@v4
43+
with:
44+
node-version: 22
45+
cache: pnpm # npm # 或 pnpm / yarn
46+
- name: Setup Pages
47+
uses: actions/configure-pages@v4
48+
- name: Install dependencies
49+
run: pnpm install # npm ci # 或 pnpm install / yarn install / bun install
50+
- name: Build with VitePress
51+
run: pnpm build # npm run build # 或 pnpm build / yarn build / bun run build
52+
- name: Upload artifact
53+
uses: actions/upload-pages-artifact@v3
54+
with:
55+
path: homepage/.vitepress/dist
56+
57+
# 部署工作
58+
deploy:
59+
environment:
60+
name: github-pages
61+
url: ${{ steps.deployment.outputs.page_url }}
62+
needs: build
63+
runs-on: ubuntu-latest
64+
name: Deploy
65+
steps:
66+
- name: Deploy to GitHub Pages
67+
id: deployment
68+
uses: actions/deploy-pages@v4

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
# mcpp-community
1+
# mcpp-community
2+
3+
现代C++爱好者社区文档

‎homepage/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
.vitepress/dist
3+
.vitepress/cache
4+
.xlings

‎homepage/.vitepress/config.mts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineConfig } from 'vitepress'
2+
3+
// https://vitepress.dev/reference/site-config
4+
export default defineConfig({
5+
title: "mcpp community",
6+
description: "mcpp community homepage",
7+
appearance: 'dark',
8+
themeConfig: {
9+
// https://vitepress.dev/reference/default-theme-config
10+
logo: "/mcpp-logo.png",
11+
socialLinks: [
12+
{ icon: 'github', link: 'https://github.com/mcpp-community' }
13+
]
14+
}
15+
})

‎homepage/.vitepress/theme/components/CodeTyping.vue‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<template>
2+
<div v-if="isHomePage" class="code-background">
3+
<div class="code-container">
4+
<pre class="code-snippet"><code><span class="keyword">import</span> std;
5+
<span class="keyword">auto</span> <span class="function">main</span>() <span class="operator">-></span> <span class="type">int</span> {
6+
std::<span class="function">println</span>(<span class="string">"{{ dynamicText }}<span v-if="displayedCode" class="cursor">|</span>"</span>);
7+
}</code></pre>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { ref, computed, onMounted, onUnmounted } from 'vue'
14+
import { useRoute } from 'vitepress'
15+
16+
const route = useRoute()
17+
const isHomePage = computed(() => route.path === '/' || route.path === '/index.html')
18+
19+
const text = "Hello, MCPP Community!"
20+
21+
const displayedCode = ref('')
22+
let currentIndex = 0
23+
let timeoutId: number | null = null
24+
25+
const dynamicText = computed(() => displayedCode.value)
26+
27+
const typeNextChar = () => {
28+
if (currentIndex < text.length) {
29+
displayedCode.value = text.substring(0, currentIndex + 1)
30+
currentIndex++
31+
timeoutId = setTimeout(typeNextChar, 100) as unknown as number
32+
} else {
33+
timeoutId = setTimeout(() => {
34+
displayedCode.value = ''
35+
currentIndex = 0
36+
typeNextChar()
37+
}, 3000) as unknown as number
38+
}
39+
}
40+
41+
onMounted(() => {
42+
if (isHomePage.value) {
43+
typeNextChar()
44+
}
45+
})
46+
47+
onUnmounted(() => {
48+
if (timeoutId) {
49+
clearTimeout(timeoutId)
50+
}
51+
})
52+
</script>
53+
54+
<style scoped>
55+
.code-background {
56+
position: relative;
57+
width: 100%;
58+
height: 100%;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
padding: 2rem;
63+
}
64+
65+
.code-container {
66+
background: rgba(26, 27, 38, 0.5);
67+
border-radius: clamp(8px, 1.5vw, 12px);
68+
overflow: hidden;
69+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
70+
border: 1px solid rgba(255, 255, 255, 0.1);
71+
width: min(90vw, 480px);
72+
max-width: 90vw;
73+
}
74+
75+
.code-header {
76+
display: flex;
77+
align-items: center;
78+
justify-content: space-between;
79+
padding: 0.75rem 1.25rem;
80+
background: rgba(0, 0, 0, 0.3);
81+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
82+
}
83+
84+
.lang {
85+
font-size: 11px;
86+
font-weight: 600;
87+
color: #61afef;
88+
text-transform: uppercase;
89+
letter-spacing: 0.5px;
90+
}
91+
92+
.dots {
93+
display: flex;
94+
gap: 6px;
95+
}
96+
97+
.dot {
98+
width: 10px;
99+
height: 10px;
100+
border-radius: 50%;
101+
}
102+
103+
.dot:nth-child(1) { background: #ff5f57; }
104+
.dot:nth-child(2) { background: #ffbd2e; }
105+
.dot:nth-child(3) { background: #28ca42; }
106+
107+
.code-snippet {
108+
margin: 0;
109+
padding: clamp(1rem, 2vw, 1.5rem) clamp(0.875rem, 1.8vw, 1.25rem);
110+
font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
111+
font-size: clamp(12px, 1.8vw, 14px);
112+
line-height: 1.8;
113+
color: #abb2bf;
114+
white-space: pre;
115+
text-align: left;
116+
min-height: clamp(100px, 15vh, 120px);
117+
display: flex;
118+
align-items: flex-start;
119+
}
120+
121+
.code-snippet code {
122+
flex: 1;
123+
}
124+
125+
/* 语法高亮 */
126+
.keyword {
127+
color: #c678dd;
128+
font-weight: 600;
129+
}
130+
131+
.function {
132+
color: #61afef;
133+
}
134+
135+
.type {
136+
color: #e5c07b;
137+
}
138+
139+
.string {
140+
color: #98c379;
141+
}
142+
143+
.operator {
144+
color: #56b6c2;
145+
}
146+
147+
.cursor {
148+
color: #61afef;
149+
font-weight: 400;
150+
margin-left: 2px;
151+
animation: blink 1s step-end infinite;
152+
}
153+
154+
@keyframes blink {
155+
0%, 50% { opacity: 1; }
156+
51%, 100% { opacity: 0; }
157+
}
158+
159+
@media (max-width: 960px) {
160+
.code-container {
161+
width: min(85vw, 420px);
162+
}
163+
164+
.code-snippet {
165+
font-size: 13px;
166+
padding: 1.25rem 1rem;
167+
}
168+
}
169+
170+
@media (max-width: 640px) {
171+
.code-background {
172+
padding: 1rem;
173+
}
174+
175+
.code-container {
176+
width: 100%;
177+
max-width: 95vw;
178+
}
179+
180+
.code-snippet {
181+
font-size: 12px;
182+
padding: 1rem 0.875rem;
183+
min-height: 100px;
184+
}
185+
186+
.code-header {
187+
padding: 0.625rem 1rem;
188+
}
189+
}
190+
</style>

0 commit comments

Comments
 (0)