Skip to content

Commit 8b9f904

Browse files
elkaixelkaix
committed
feat(site): highlight Python download milestone
1 parent e951b5e commit 8b9f904

4 files changed

Lines changed: 203 additions & 1 deletion

File tree

‎apps/site/src/App.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { onMounted, onUnmounted, ref } from 'vue';
33
import AgentLoop from './components/AgentLoop.vue';
44
import InstallCommand from './components/InstallCommand.vue';
5+
import LegacyDownloadsPopup from './components/LegacyDownloadsPopup.vue';
56
import PythinkerMascot from './components/PythinkerMascot.vue';
67
78
const version = __PYTHINKER_VERSION__;
@@ -229,6 +230,9 @@ onUnmounted(() => {
229230
<div class="hero-install">
230231
<InstallCommand />
231232
</div>
233+
<div class="hero-download-milestone">
234+
<LegacyDownloadsPopup />
235+
</div>
232236
<p class="hero-caption">Free and open source. MIT licensed. macOS, Linux, and Windows.</p>
233237
</div>
234238
</header>
@@ -629,6 +633,12 @@ onUnmounted(() => {
629633
margin: 36px auto 0;
630634
}
631635
636+
.hero-download-milestone {
637+
display: flex;
638+
margin-top: 14px;
639+
justify-content: center;
640+
}
641+
632642
.hero-caption {
633643
margin-top: 12px;
634644
color: var(--ink-subtle);

‎apps/site/src/components/AgentLoop.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,12 @@
1919
<style scoped>
2020
.agent-loop {
2121
width: 100%;
22+
padding-inline: 12px;
2223
}
2324
2425
svg {
2526
display: block;
27+
overflow: visible;
2628
}
2729
2830
rect {

‎apps/site/src/components/InstallCommand.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ onUnmounted(() => {
112112
@keydown="onTriggerKeydown"
113113
>
114114
<img src="/brand/pythinker_animated.svg" alt="" width="16" height="20">
115-
Pick your OS
115+
Get started
116116
<svg aria-hidden="true" viewBox="0 0 12 8"><path d="m1 1 5 5 5-5" /></svg>
117117
</button>
118118
<code>{{ activeChannel.command }}</code>

‎apps/site/src/components/LegacyDownloadsPopup.vue‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<script setup>
2+
import { ref } from 'vue';
3+
4+
const visible = ref(true);
5+
</script>
6+
7+
<template>
8+
<Transition name="download-popup" appear>
9+
<aside v-if="visible" class="download-popup" aria-labelledby="download-popup-title">
10+
<span class="download-popup-mark" aria-hidden="true">
11+
<svg viewBox="0 0 24 24">
12+
<path d="M12 3v11m0 0 4-4m-4 4-4-4M5 18h14" />
13+
</svg>
14+
</span>
15+
16+
<div class="download-popup-content">
17+
<p class="download-popup-kicker">Community milestone</p>
18+
<h2 id="download-popup-title">30K+ Python downloads</h2>
19+
<p class="download-popup-copy">Our previous Python version passed 30,000 downloads.</p>
20+
<a
21+
class="download-popup-badge"
22+
href="https://pepy.tech/projects/pythinker-code"
23+
target="_blank"
24+
rel="noopener"
25+
aria-label="View pythinker-code download statistics on Pepy"
26+
>
27+
<img
28+
src="https://static.pepy.tech/personalized-badge/pythinker-code?period=total&amp;units=INTERNATIONAL_SYSTEM&amp;left_color=BLACK&amp;right_color=GREEN&amp;left_text=downloads"
29+
alt="PyPI download count for pythinker-code"
30+
height="20"
31+
/>
32+
</a>
33+
</div>
34+
35+
<button class="download-popup-close" type="button" aria-label="Dismiss download milestone" @click="visible = false">
36+
<svg aria-hidden="true" viewBox="0 0 20 20"><path d="m5 5 10 10M15 5 5 15" /></svg>
37+
</button>
38+
</aside>
39+
</Transition>
40+
</template>
41+
42+
<style scoped>
43+
.download-popup {
44+
position: relative;
45+
z-index: 1;
46+
display: grid;
47+
width: min(360px, 100%);
48+
grid-template-columns: 44px minmax(0, 1fr);
49+
gap: 14px;
50+
padding: 18px 48px 18px 18px;
51+
border: 1px solid rgba(43, 137, 255, 0.2);
52+
border-radius: var(--radius);
53+
background: rgba(255, 255, 255, 0.96);
54+
box-shadow:
55+
0 24px 64px rgba(16, 38, 60, 0.18),
56+
0 4px 16px rgba(16, 38, 60, 0.08);
57+
backdrop-filter: blur(14px);
58+
}
59+
60+
.download-popup-mark {
61+
display: grid;
62+
width: 44px;
63+
height: 44px;
64+
border-radius: 14px;
65+
background: rgba(43, 137, 255, 0.1);
66+
color: var(--accent);
67+
place-items: center;
68+
}
69+
70+
.download-popup-mark svg {
71+
width: 22px;
72+
height: 22px;
73+
fill: none;
74+
stroke: currentColor;
75+
stroke-linecap: round;
76+
stroke-linejoin: round;
77+
stroke-width: 1.7;
78+
}
79+
80+
.download-popup-content {
81+
min-width: 0;
82+
}
83+
84+
.download-popup-kicker {
85+
color: var(--accent);
86+
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
87+
font-size: 10px;
88+
font-weight: 600;
89+
letter-spacing: 0.1em;
90+
line-height: 1.4;
91+
text-transform: uppercase;
92+
}
93+
94+
.download-popup h2 {
95+
margin-top: 3px;
96+
color: var(--ink);
97+
font-size: 19px;
98+
font-weight: 700;
99+
letter-spacing: -0.015em;
100+
line-height: 1.25;
101+
}
102+
103+
.download-popup-copy {
104+
margin-top: 5px;
105+
color: var(--ink-muted);
106+
font-size: 13px;
107+
line-height: 1.5;
108+
}
109+
110+
.download-popup-badge {
111+
display: inline-flex;
112+
margin-top: 12px;
113+
border-radius: 4px;
114+
}
115+
116+
.download-popup-badge img {
117+
display: block;
118+
width: auto;
119+
max-width: 100%;
120+
height: 20px;
121+
}
122+
123+
.download-popup-close {
124+
position: absolute;
125+
top: 8px;
126+
right: 8px;
127+
display: grid;
128+
width: 36px;
129+
height: 36px;
130+
padding: 9px;
131+
border: 0;
132+
border-radius: 50%;
133+
background: transparent;
134+
color: var(--ink-subtle);
135+
cursor: pointer;
136+
place-items: center;
137+
}
138+
139+
.download-popup-close:hover {
140+
background: var(--surface-2);
141+
color: var(--ink);
142+
}
143+
144+
.download-popup-close svg {
145+
width: 18px;
146+
height: 18px;
147+
fill: none;
148+
stroke: currentColor;
149+
stroke-linecap: round;
150+
stroke-width: 1.6;
151+
}
152+
153+
.download-popup-enter-active,
154+
.download-popup-leave-active {
155+
transition: opacity 180ms ease, transform 180ms ease;
156+
}
157+
158+
.download-popup-enter-from,
159+
.download-popup-leave-to {
160+
opacity: 0;
161+
transform: translateY(12px) scale(0.98);
162+
}
163+
164+
@media (max-width: 480px) {
165+
.download-popup {
166+
width: 100%;
167+
grid-template-columns: 38px minmax(0, 1fr);
168+
gap: 12px;
169+
padding: 14px 44px 14px 14px;
170+
}
171+
172+
.download-popup-mark {
173+
width: 38px;
174+
height: 38px;
175+
border-radius: 12px;
176+
}
177+
178+
.download-popup-mark svg {
179+
width: 20px;
180+
height: 20px;
181+
}
182+
}
183+
184+
@media (prefers-reduced-motion: reduce) {
185+
.download-popup-enter-active,
186+
.download-popup-leave-active {
187+
transition: none;
188+
}
189+
}
190+
</style>

0 commit comments

Comments
 (0)