chore: reorganize project into monorepo
This commit is contained in:
172
frontend/src/pages/about/index.astro
Normal file
172
frontend/src/pages/about/index.astro
Normal file
@@ -0,0 +1,172 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import TerminalWindow from '../../components/ui/TerminalWindow.astro';
|
||||
import CommandPrompt from '../../components/ui/CommandPrompt.astro';
|
||||
import StatsList from '../../components/StatsList.astro';
|
||||
import TechStackList from '../../components/TechStackList.astro';
|
||||
import InfoTile from '../../components/ui/InfoTile.astro';
|
||||
import { api, DEFAULT_SITE_SETTINGS } from '../../lib/api/client';
|
||||
|
||||
let siteSettings = DEFAULT_SITE_SETTINGS;
|
||||
let systemStats = [];
|
||||
let techStack = [];
|
||||
|
||||
try {
|
||||
const [settings, posts, tags, friendLinks] = await Promise.all([
|
||||
api.getSiteSettings(),
|
||||
api.getPosts(),
|
||||
api.getTags(),
|
||||
api.getFriendLinks(),
|
||||
]);
|
||||
|
||||
siteSettings = settings;
|
||||
techStack = siteSettings.techStack.map(name => ({ name }));
|
||||
systemStats = [
|
||||
{ label: 'Posts', value: String(posts.length) },
|
||||
{ label: 'Tags', value: String(tags.length) },
|
||||
{ label: 'Friends', value: String(friendLinks.filter(friend => friend.status === 'approved').length) },
|
||||
{ label: 'Location', value: siteSettings.location || 'Unknown' },
|
||||
];
|
||||
} catch (error) {
|
||||
console.error('Failed to load about data:', error);
|
||||
techStack = siteSettings.techStack.map(name => ({ name }));
|
||||
systemStats = [
|
||||
{ label: 'Posts', value: '0' },
|
||||
{ label: 'Tags', value: '0' },
|
||||
{ label: 'Friends', value: '0' },
|
||||
{ label: 'Location', value: siteSettings.location || 'Unknown' },
|
||||
];
|
||||
}
|
||||
|
||||
const ownerInitial = siteSettings.ownerName.charAt(0) || 'T';
|
||||
---
|
||||
|
||||
<BaseLayout title={`关于 - ${siteSettings.siteShortName}`} description={siteSettings.siteDescription}>
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<TerminalWindow title="~/about" class="w-full">
|
||||
<div class="mb-6 px-4">
|
||||
<CommandPrompt command="whoami" />
|
||||
<div class="terminal-panel ml-4 mt-4">
|
||||
<div class="terminal-kicker">identity profile</div>
|
||||
<div class="terminal-section-title mt-4">
|
||||
<span class="terminal-section-icon">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</span>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-[var(--title-color)]">关于我</h1>
|
||||
<p class="mt-2 max-w-2xl text-sm leading-6 text-[var(--text-secondary)]">
|
||||
这里汇总站点主人、技术栈、系统状态和联系方式，现在整体语言会更接近首页与评价页。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<span class="terminal-stat-pill">
|
||||
<i class="fas fa-location-dot text-[var(--primary)]"></i>
|
||||
<span>{siteSettings.location || 'Unknown'}</span>
|
||||
</span>
|
||||
<span class="terminal-stat-pill">
|
||||
<i class="fas fa-layer-group text-[var(--primary)]"></i>
|
||||
<span>{techStack.length} 项技术栈</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<CommandPrompt command="cat profile.txt" />
|
||||
<div class="ml-4 mt-4">
|
||||
<div class="terminal-panel p-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
{siteSettings.ownerAvatarUrl ? (
|
||||
<img
|
||||
src={siteSettings.ownerAvatarUrl}
|
||||
alt={siteSettings.ownerName}
|
||||
class="w-16 h-16 rounded-full object-cover border border-[var(--border-color)]"
|
||||
/>
|
||||
) : (
|
||||
<div class="w-16 h-16 rounded-full bg-[var(--primary)] flex items-center justify-center text-[var(--terminal-bg)] text-2xl font-bold shadow-lg shadow-[var(--primary)]/20">
|
||||
{ownerInitial}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-[var(--title-color)]">{siteSettings.ownerName}</h2>
|
||||
<p class="text-sm text-[var(--text-secondary)] mt-1">{siteSettings.ownerTitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[var(--text-secondary)] leading-7">{siteSettings.ownerBio}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<CommandPrompt command="cat tech_stack.txt" />
|
||||
<div class="ml-4 mt-4">
|
||||
<TechStackList items={techStack} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<CommandPrompt command="cat system_info.txt" />
|
||||
<div class="ml-4 mt-4">
|
||||
<StatsList stats={systemStats} />
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<CommandPrompt command="cat contact.txt" />
|
||||
<div class="ml-4 mt-4">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{siteSettings.social.github && (
|
||||
<InfoTile
|
||||
href={siteSettings.social.github}
|
||||
tone="neutral"
|
||||
layout="grid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i class="fab fa-github text-[var(--text-secondary)]"></i>
|
||||
<span class="text-sm">GitHub</span>
|
||||
</InfoTile>
|
||||
)}
|
||||
{siteSettings.social.twitter && (
|
||||
<InfoTile
|
||||
href={siteSettings.social.twitter}
|
||||
tone="neutral"
|
||||
layout="grid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i class="fab fa-twitter text-[var(--text-secondary)]"></i>
|
||||
<span class="text-sm">Twitter</span>
|
||||
</InfoTile>
|
||||
)}
|
||||
{siteSettings.social.email && (
|
||||
<InfoTile
|
||||
href={siteSettings.social.email}
|
||||
tone="neutral"
|
||||
layout="grid"
|
||||
>
|
||||
<i class="fas fa-envelope text-[var(--text-secondary)]"></i>
|
||||
<span class="text-sm">Email</span>
|
||||
</InfoTile>
|
||||
)}
|
||||
<InfoTile
|
||||
href={siteSettings.siteUrl}
|
||||
tone="neutral"
|
||||
layout="grid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i class="fas fa-globe text-[var(--text-secondary)]"></i>
|
||||
<span class="text-sm">Website</span>
|
||||
</InfoTile>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TerminalWindow>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user