feat(content): implement consultant review recommendations (executive summary, dynamic cta, homelab cleanup)
Deploy / build (push) Successful in 25s
Deploy / build (push) Successful in 25s
This commit is contained in:
hoelee committed
1 parent
5ecf25d37c
commit
355fecd348
28 files changed
+1634
-49
No files matched your search
@@ -0,0 +1,233 @@
|
||||
---
|
||||
interface Props {
|
||||
summary?: {
|
||||
audience: string;
|
||||
painPoint: string;
|
||||
impact: { metric: string; detail: string }[];
|
||||
stack: string[];
|
||||
jumpLinks?: { business?: string; architecture?: string; result?: string };
|
||||
};
|
||||
lang?: 'en' | 'zh';
|
||||
}
|
||||
|
||||
const { summary, lang = 'en' } = Astro.props;
|
||||
if (!summary) return null;
|
||||
|
||||
const labels = lang === 'zh' ? {
|
||||
badge: '⚡ 核心速览 · Executive Summary',
|
||||
for: '适用读者：',
|
||||
problem: '核心痛点',
|
||||
impact: '交付成果与指标',
|
||||
stack: '涉及技术栈',
|
||||
nav: '快速跳读',
|
||||
btnBiz: '看商业/交付结果 ↓',
|
||||
btnArch: '看系统架构与排障 ↓',
|
||||
btnLesson: '看复盘与避坑指南 ↓'
|
||||
} : {
|
||||
badge: '⚡ Executive Summary',
|
||||
for: 'Target Audience:',
|
||||
problem: 'The Problem',
|
||||
impact: 'Key Outcomes & Metrics',
|
||||
stack: 'Architecture Stack',
|
||||
nav: 'Quick Jump',
|
||||
btnBiz: 'Business Outcome ↓',
|
||||
btnArch: 'Architecture & Root Cause ↓',
|
||||
btnLesson: 'Lessons Learned ↓'
|
||||
};
|
||||
---
|
||||
|
||||
<aside class="exec-summary" aria-label={labels.badge}>
|
||||
<div class="exec-header">
|
||||
<span class="exec-badge">{labels.badge}</span>
|
||||
<span class="exec-audience">{labels.for} <strong>{summary.audience}</strong></span>
|
||||
</div>
|
||||
|
||||
<div class="exec-problem">
|
||||
<span class="exec-problem-label">{labels.problem}:</span>
|
||||
<p class="exec-problem-text">{summary.painPoint}</p>
|
||||
</div>
|
||||
|
||||
<div class="exec-grid">
|
||||
{summary.impact.map((item) => (
|
||||
<div class="exec-metric-card">
|
||||
<div class="exec-metric-val">{item.metric}</div>
|
||||
<div class="exec-metric-desc">{item.detail}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="exec-footer">
|
||||
<div class="exec-stack">
|
||||
<span class="exec-footer-label">{labels.stack}:</span>
|
||||
<div class="exec-pills">
|
||||
{summary.stack.map((t) => <span class="exec-pill">{t}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
{summary.jumpLinks && (
|
||||
<div class="exec-jumps">
|
||||
<span class="exec-footer-label">{labels.nav}:</span>
|
||||
<div class="exec-jump-btns">
|
||||
{summary.jumpLinks.business && <a class="exec-jump-link" href={summary.jumpLinks.business}>{labels.btnBiz}</a>}
|
||||
{summary.jumpLinks.architecture && <a class="exec-jump-link" href={summary.jumpLinks.architecture}>{labels.btnArch}</a>}
|
||||
{summary.jumpLinks.result && <a class="exec-jump-link" href={summary.jumpLinks.result}>{labels.btnLesson}</a>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.exec-summary {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.exec-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding-bottom: 0.85rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.exec-badge {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--brand);
|
||||
background: color-mix(in srgb, var(--brand) 12%, transparent);
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.exec-audience {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.exec-audience strong {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.exec-problem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.exec-problem-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.exec-problem-text {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.exec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.exec-metric-card {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.exec-metric-val {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--brand);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.exec-metric-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.exec-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-top: 0.85rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.exec-footer-label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.exec-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.exec-pill {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
background: var(--surface-2);
|
||||
color: var(--ink);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.exec-jump-btns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.exec-jump-link {
|
||||
font-size: 0.85rem;
|
||||
color: var(--brand-soft);
|
||||
text-decoration: none;
|
||||
background: var(--surface-2);
|
||||
padding: 0.3rem 0.65rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.exec-jump-link:hover {
|
||||
color: #ffffff;
|
||||
background: var(--brand);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.exec-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user