Skip to content

Commit d8a6e29

Browse files
GaspardKiriraGaspardKirira
committed
update signalGrid
1 parent ec605e2 commit d8a6e29

File tree

6 files changed

+138
-81
lines changed

6 files changed

+138
-81
lines changed

‎vix-site/scripts/fetch_github_stats.mjs‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,13 @@ async function main() {
3838
watchers: repo.subscribers_count ?? 0,
3939
};
4040
} catch (err) {
41-
// Fallback: si le build n'a pas accès au net, on conserve l'ancien fichier si présent
4241
if (fs.existsSync(OUT)) {
4342
console.warn(
4443
`[github_stats] fetch failed, keeping existing file: ${err.message}`,
4544
);
4645
return;
4746
}
4847

49-
// Dernier recours: fichier minimal
5048
console.warn(
5149
`[github_stats] fetch failed, writing fallback file: ${err.message}`,
5250
);

‎vix-site/src/components/Hero.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -802,11 +802,11 @@ async function copy(text) {
802802
align-items: center;
803803
justify-content: space-between;
804804
gap: 10px;
805-
min-width: 0; /* IMPORTANT */
805+
min-width: 0;
806806
}
807807
808808
.head-scroll{
809-
min-width: 0; /* IMPORTANT */
809+
min-width: 0;
810810
flex: 1 1 auto;
811811
}
812812

‎vix-site/src/components/SignalsGrid.vue‎

Lines changed: 64 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
const props = defineProps({
2+
defineProps({
33
items: { type: Array, default: () => [] },
44
github: { type: Object, default: null },
55
});
@@ -9,62 +9,87 @@ function formatNumber(n) {
99
if (!Number.isFinite(x)) return "";
1010
return x.toLocaleString();
1111
}
12-
</script>
1312
14-
<template>
15-
<div class="signals-grid">
16-
<div v-for="item in items" :key="item.title" class="signal-card">
17-
<div class="signal-title">{{ item.title }}</div>
13+
function getValue(item, github) {
14+
if (item?.kind === "github" && github && item?.field) {
15+
return formatNumber(github[item.field]);
16+
}
17+
return item?.value ?? "";
18+
}
1819
19-
<div class="signal-value">
20-
<template v-if="item.kind === 'github' && github">
21-
{{ formatNumber(github[item.field]) }}
22-
</template>
23-
<template v-else>
24-
{{ item.value }}
25-
</template>
26-
</div>
20+
function getSub(item) {
21+
if (Array.isArray(item?.meta) && item.meta.length) return item.meta[0];
22+
return "";
23+
}
24+
</script>
2725
28-
<ul v-if="item.meta?.length" class="signal-meta">
29-
<li v-for="m in item.meta" :key="m">{{ m }}</li>
30-
</ul>
26+
<template>
27+
<div class="signals">
28+
<div
29+
v-for="(item, idx) in (Array.isArray(items) ? items : [])"
30+
:key="item.field || item.title || idx"
31+
class="signal"
32+
>
33+
<span class="pill">{{ item.title }}</span>
34+
<div class="value">{{ getValue(item, github) }}</div>
35+
<div v-if="getSub(item)" class="sub">{{ getSub(item) }}</div>
3136
</div>
3237
</div>
3338
</template>
3439
3540
<style scoped>
36-
.signals-grid {
41+
.signals {
3742
display: grid;
38-
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
39-
gap: 1.2rem;
43+
gap: 1.35rem;
44+
padding-top: 0.35rem;
4045
}
4146
42-
.signal-card {
43-
padding: 1.2rem;
44-
border-radius: 16px;
45-
background: rgba(255, 255, 255, 0.04);
46-
border: 1px solid rgba(255, 255, 255, 0.08);
47+
.signal {
48+
position: relative;
49+
padding: 0.2rem 0 1.25rem;
4750
}
4851
49-
.signal-title {
50-
font-size: 0.85rem;
51-
opacity: 0.7;
52+
.signal:not(:last-child) {
53+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
5254
}
5355
54-
.signal-value {
55-
margin-top: 0.35rem;
56-
font-size: 1.2rem;
56+
.pill {
57+
display: inline-flex;
58+
align-items: center;
59+
height: 26px;
60+
padding: 0 10px;
61+
border-radius: 999px;
62+
63+
font-size: 0.82rem;
5764
font-weight: 650;
5865
letter-spacing: -0.01em;
66+
67+
color: rgba(0, 0, 0, 0.88);
68+
background: rgba(120, 255, 190, 0.95);
5969
}
6070
61-
.signal-meta {
62-
margin-top: 0.8rem;
63-
padding: 0;
64-
list-style: none;
65-
display: grid;
66-
gap: 0.35rem;
67-
font-size: 0.9rem;
68-
opacity: 0.85;
71+
.value {
72+
margin-top: 0.7rem;
73+
font-size: 2.3rem;
74+
font-weight: 850;
75+
letter-spacing: -0.03em;
76+
line-height: 1.05;
77+
}
78+
79+
.sub {
80+
margin-top: 0.4rem;
81+
font-size: 0.95rem;
82+
opacity: 0.75;
83+
line-height: 1.4;
84+
}
85+
86+
@media (max-width: 520px) {
87+
.signals {
88+
gap: 1.05rem;
89+
}
90+
91+
.value {
92+
font-size: 2.05rem;
93+
}
6994
}
7095
</style>

‎vix-site/src/data/home.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ int main()
3737
app.run(8080);
3838
}`,
3939
},
40-
4140
{
4241
key: "ws",
4342
label: "WebSocket",
@@ -56,7 +55,6 @@ int main()
5655
ws.listen_blocking(9090);
5756
}`,
5857
},
59-
6058
{
6159
key: "p2p",
6260
label: "P2P",
@@ -73,7 +71,6 @@ int main()
7371
p2p.wait();
7472
}`,
7573
},
76-
7774
{
7875
key: "async",
7976
label: "Async",
@@ -93,7 +90,6 @@ int main()
9390
async::run(main_task());
9491
}`,
9592
},
96-
9793
{
9894
key: "run",
9995
label: "vix run",
@@ -116,7 +112,7 @@ i Hint: Ctrl+C to stop`,
116112
title: "Stars",
117113
kind: "github",
118114
field: "stars",
119-
meta: ["GitHub stars"],
115+
meta: ["Stars on GitHub"],
120116
},
121117
{
122118
title: "Forks",
@@ -128,7 +124,7 @@ i Hint: Ctrl+C to stop`,
128124
title: "Open issues",
129125
kind: "github",
130126
field: "open_issues",
131-
meta: ["Work in progress"],
127+
meta: ["Active issues"],
132128
},
133129
],
134130
},

‎vix-site/src/lib/githubStats.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ function writeCache(data) {
2828
} catch {}
2929
}
3030

31-
// ✅ no Vite import resolution, no crash
3231
async function loadBuildStats() {
3332
try {
3433
const url = new URL("../data/github_stats.json", import.meta.url);

‎vix-site/src/pages/Home.vue‎

Lines changed: 70 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,39 @@
22
import * as HomeData from "@/data/home";
33
import { ref, onMounted } from "vue";
44
5-
// Core sections
65
import Hero from "@/components/Hero.vue";
76
import Section from "@/components/Section.vue";
87
import CardGrid from "@/components/CardGrid.vue";
98
import CodeBlock from "@/components/CodeBlock.vue";
109
import SignalsGrid from "@/components/SignalsGrid.vue";
1110
12-
// GitHub stats (safe: local first, async refresh)
1311
import { getInitialGithubStats, refreshGithubStats } from "@/lib/githubStats";
1412
15-
/**
16-
* Supporte plusieurs formes d’export possibles.
17-
* On tente plusieurs chemins courants.
18-
*/
1913
const HOME =
2014
HomeData?.HOME ??
2115
HomeData?.default ??
2216
HomeData?.default?.HOME ??
2317
HomeData?.default?.default ??
2418
null;
2519
26-
// GitHub stats state (never blocks render)
2720
const github = ref(null);
2821
2922
onMounted(async () => {
3023
github.value = await getInitialGithubStats();
31-
3224
const updated = await refreshGithubStats({ timeoutMs: 1200 });
3325
if (updated) github.value = updated;
3426
});
35-
36-
// Debug safe (tu peux enlever après)
37-
const _debugHomeType = HOME ? typeof HOME : "null";
38-
const _debugHomeKeys = HOME && typeof HOME === "object" ? Object.keys(HOME) : [];
3927
</script>
4028
4129
<template>
4230
<div class="page">
43-
<!-- DEBUG (temporaire, safe, ne crash pas) -->
4431
<div v-if="!HOME" class="container loading">
45-
<h2 style="margin: 0 0 8px">Loading…</h2>
46-
<p style="margin: 0; opacity: 0.85">
32+
<h2 class="loading-title">Loading…</h2>
33+
<p class="loading-sub">
4734
HOME is null. Check export in <code>@/data/home</code>.
4835
</p>
4936
</div>
5037
51-
<!-- HERO -->
5238
<Hero
5339
v-if="HOME?.hero"
5440
:title="HOME.hero.title"
@@ -59,17 +45,19 @@ const _debugHomeKeys = HOME && typeof HOME === "object" ? Object.keys(HOME) : []
5945
:support="HOME.hero.support"
6046
/>
6147
62-
<!-- SIGNALS -->
63-
<Section
64-
v-if="HOME?.signals"
65-
:title="HOME.signals.title"
66-
:subtitle="HOME.signals.subtitle"
67-
tight
68-
>
69-
<SignalsGrid :items="HOME.signals.items || []" :github="github" />
70-
</Section>
48+
<section v-if="HOME?.signals" class="signals">
49+
<div class="container signals-layout">
50+
<div class="signals-left">
51+
<h2 class="signals-title">{{ HOME.signals.title }}</h2>
52+
<p class="signals-subtitle">{{ HOME.signals.subtitle }}</p>
53+
</div>
54+
55+
<div class="signals-right">
56+
<SignalsGrid :items="HOME.signals.items || []" :github="github" />
57+
</div>
58+
</div>
59+
</section>
7160
72-
<!-- BATTERIES -->
7361
<Section
7462
v-if="HOME?.batteries"
7563
:title="HOME.batteries.title"
@@ -79,7 +67,6 @@ const _debugHomeKeys = HOME && typeof HOME === "object" ? Object.keys(HOME) : []
7967
<CardGrid :items="HOME.batteries.items || []" />
8068
</Section>
8169
82-
<!-- GET STARTED -->
8370
<Section
8471
v-if="HOME?.getStarted"
8572
:title="HOME.getStarted.title"
@@ -113,12 +100,19 @@ const _debugHomeKeys = HOME && typeof HOME === "object" ? Object.keys(HOME) : []
113100
}
114101
115102
.loading {
116-
padding: 48px 0;
117-
opacity: 0.75;
103+
padding: 56px 0;
104+
opacity: 0.85;
118105
}
119106
120-
.debug {
121-
margin-bottom: 10px;
107+
.loading-title {
108+
margin: 0 0 10px;
109+
font-size: 1.35rem;
110+
letter-spacing: -0.01em;
111+
}
112+
113+
.loading-sub {
114+
margin: 0;
115+
opacity: 0.85;
122116
}
123117
124118
.cta-row {
@@ -127,4 +121,49 @@ const _debugHomeKeys = HOME && typeof HOME === "object" ? Object.keys(HOME) : []
127121
gap: 1rem;
128122
flex-wrap: wrap;
129123
}
124+
125+
.signals {
126+
padding: 3.2rem 0;
127+
}
128+
129+
.signals-layout {
130+
display: grid;
131+
grid-template-columns: minmax(320px, 560px) minmax(260px, 420px);
132+
gap: 3rem;
133+
align-items: start;
134+
}
135+
136+
.signals-left {
137+
padding-top: 0.2rem;
138+
}
139+
140+
.signals-title {
141+
margin: 0;
142+
font-size: 2.35rem;
143+
line-height: 1.05;
144+
letter-spacing: -0.03em;
145+
}
146+
147+
.signals-subtitle {
148+
margin: 0.95rem 0 0;
149+
max-width: 62ch;
150+
font-size: 1.05rem;
151+
line-height: 1.7;
152+
opacity: 0.82;
153+
}
154+
155+
.signals-right {
156+
width: 100%;
157+
}
158+
159+
@media (max-width: 980px) {
160+
.signals-layout {
161+
grid-template-columns: 1fr;
162+
gap: 1.6rem;
163+
}
164+
165+
.signals-title {
166+
font-size: 1.9rem;
167+
}
168+
}
130169
</style>

0 commit comments

Comments
 (0)