Skip to content

Commit c5b0a0d

Browse files
newbe36524hagicode-ai
newbe36524
and
hagicode-ai
committed
feat(product-overview): add Product Hunt badge component and integration
Add ProductHuntBadge component with bilingual support (en/zh-CN) and integrate it into product overview pages. The component displays official Product Hunt featured badge with localized copy for both English and Chinese audiences. Co-Authored-By: Hagicode <noreply@hagicode.com> Signed-off-by: newbe36524 <newbe36524@qq.com>
1 parent 34987bd commit c5b0a0d

3 files changed

Lines changed: 158 additions & 0 deletions

File tree

‎src/components/ProductHuntBadge.astro‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
const PRODUCT_HUNT_PRODUCT_URL = 'https://www.producthunt.com/products/hagicode';
3+
const PRODUCT_HUNT_BADGE_LINK =
4+
`${PRODUCT_HUNT_PRODUCT_URL}?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-hagicode`;
5+
const PRODUCT_HUNT_BADGE_IMAGE_URL =
6+
'https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=hagicode&theme=light';
7+
8+
interface Props {
9+
locale?: 'zh-CN' | 'en';
10+
}
11+
12+
const { locale = 'en' } = Astro.props;
13+
14+
const copy =
15+
locale === 'zh-CN'
16+
? {
17+
eyebrow: 'Product Hunt',
18+
title: '也可以从 Product Hunt 快速了解 HagiCode',
19+
description:
20+
'如果你想先看一个更外部、更简洁的产品入口，这里保留了官方 Product Hunt Featured 徽章，方便你快速跳转查看。',
21+
linkLabel: '在新标签页打开 HagiCode 的 Product Hunt 页面',
22+
cta: '查看 Product Hunt 页面',
23+
}
24+
: {
25+
eyebrow: 'Product Hunt',
26+
title: 'You can also scan HagiCode on Product Hunt',
27+
description:
28+
'If you want a faster external snapshot before going deeper into the docs, this official Product Hunt featured badge gives you a quick way in.',
29+
linkLabel: "Open HagiCode's Product Hunt page in a new tab",
30+
cta: 'View on Product Hunt',
31+
};
32+
---
33+
34+
<section class="product-hunt-badge" aria-labelledby={`product-hunt-title-${locale}`}>
35+
<div class="copy">
36+
<p class="eyebrow">{copy.eyebrow}</p>
37+
<h2 id={`product-hunt-title-${locale}`}>{copy.title}</h2>
38+
<p>{copy.description}</p>
39+
</div>
40+
41+
<a
42+
class="badge-link"
43+
href={PRODUCT_HUNT_BADGE_LINK}
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
aria-label={copy.linkLabel}
47+
data-product-hunt-entry="docs-product-overview"
48+
>
49+
<img
50+
src={PRODUCT_HUNT_BADGE_IMAGE_URL}
51+
alt="Hagicode featured on Product Hunt"
52+
width="250"
53+
height="54"
54+
loading="lazy"
55+
decoding="async"
56+
/>
57+
<span>{copy.cta}</span>
58+
</a>
59+
</section>
60+
61+
<style>
62+
.product-hunt-badge {
63+
display: grid;
64+
grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 19rem);
65+
gap: 1.25rem;
66+
align-items: center;
67+
padding: 1.35rem 1.45rem;
68+
margin: 2rem 0;
69+
border: 1px solid color-mix(in srgb, var(--sl-color-accent-high) 18%, transparent);
70+
border-radius: 1.25rem;
71+
background:
72+
radial-gradient(circle at top left, color-mix(in srgb, var(--sl-color-accent) 12%, transparent), transparent 38%),
73+
color-mix(in srgb, var(--sl-color-bg-nav) 72%, var(--sl-color-bg) 28%);
74+
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
75+
}
76+
77+
.copy {
78+
min-width: 0;
79+
}
80+
81+
.eyebrow {
82+
margin: 0 0 0.45rem;
83+
font-size: 0.8rem;
84+
font-weight: 700;
85+
letter-spacing: 0.08em;
86+
text-transform: uppercase;
87+
color: var(--sl-color-accent-high);
88+
}
89+
90+
.copy h2 {
91+
margin: 0 0 0.55rem;
92+
font-size: clamp(1.15rem, 2vw, 1.45rem);
93+
line-height: 1.2;
94+
}
95+
96+
.copy p:last-child {
97+
margin: 0;
98+
color: var(--sl-color-text-accent);
99+
}
100+
101+
.badge-link {
102+
display: inline-flex;
103+
flex-direction: column;
104+
align-items: center;
105+
justify-content: center;
106+
gap: 0.7rem;
107+
min-width: 0;
108+
padding: 0.95rem;
109+
border: 1px solid color-mix(in srgb, var(--sl-color-accent-high) 22%, transparent);
110+
border-radius: 1rem;
111+
background: color-mix(in srgb, var(--sl-color-bg) 74%, white 26%);
112+
text-align: center;
113+
text-decoration: none;
114+
color: var(--sl-color-white);
115+
transition:
116+
transform 180ms ease,
117+
box-shadow 180ms ease,
118+
border-color 180ms ease,
119+
background 180ms ease;
120+
}
121+
122+
.badge-link:hover {
123+
transform: translateY(-2px);
124+
border-color: color-mix(in srgb, var(--sl-color-accent-high) 40%, transparent);
125+
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
126+
}
127+
128+
.badge-link:focus-visible {
129+
outline: 2px solid var(--sl-color-accent-high);
130+
outline-offset: 4px;
131+
}
132+
133+
.badge-link img {
134+
display: block;
135+
width: min(100%, 250px);
136+
max-width: 100%;
137+
height: auto;
138+
}
139+
140+
.badge-link span {
141+
font-size: 0.9rem;
142+
font-weight: 600;
143+
color: var(--sl-color-text);
144+
}
145+
146+
@media (max-width: 50rem) {
147+
.product-hunt-badge {
148+
grid-template-columns: 1fr;
149+
padding: 1.15rem;
150+
}
151+
}
152+
</style>

‎src/content/docs/en/product-overview.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ description: "HagiCode is not just an AI coding tool or a gamified workspace. It
55

66
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
77
import LiveBroadcastCard from '@/components/LiveBroadcastCard.astro';
8+
import ProductHuntBadge from '@/components/ProductHuntBadge.astro';
89
import ProductVideoShowcase from '@/components/ProductVideoShowcase.astro';
910

1011
Hello, fellow creators. I'm Yukun Yu, the creator of **HagiCode**.
@@ -387,6 +388,8 @@ If you are ready to use it for real, I recommend starting with this path:
387388
/>
388389
</CardGrid>
389390

391+
<ProductHuntBadge locale="en" />
392+
390393
<ProductVideoShowcase locale="en" />
391394

392395
---

‎src/content/docs/product-overview.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ description: "HagiCode 不只是 AI 编程工具，也不只是游戏化工作
55

66
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
77
import LiveBroadcastCard from '@/components/LiveBroadcastCard.astro';
8+
import ProductHuntBadge from '@/components/ProductHuntBadge.astro';
89
import ProductVideoShowcase from '@/components/ProductVideoShowcase.astro';
910

1011
全民制作人们大家好，我是 **HagiCode** 的制作人俞坤。
@@ -387,6 +388,8 @@ HagiCode 里有一整套围绕英雄、职业、负载、等级进度展开的
387388
/>
388389
</CardGrid>
389390

391+
<ProductHuntBadge locale="zh-CN" />
392+
390393
<ProductVideoShowcase locale="zh-CN" />
391394

392395
---

0 commit comments

Comments
 (0)