security: forbid inline style attributes

2026-09-13 15:17:00 +07:00
parent 14958be302
commit fe9367b5e9
8 changed files with 13 additions and 11 deletions
@@ -1,10 +1,11 @@
 ---
 const { buckets } = Astro.props as { buckets: { start: string; end: string; count: number }[] };
 const max = Math.max(1, ...buckets.map(bucket => bucket.count));
+const meterLevel = (count: number) => Math.round((count / max * 100) / 5) * 5;
 ---
 <section class="activity-timeline" aria-labelledby="timeline-title">
  <header><div><span class="overline">Последние 72 часа</span><h2 id="timeline-title">Леска активности</h2></div><p>Все одобренные записи · по времени поступления · шаг 12 часов</p></header>
  <div class="timeline-chart">
-    {buckets.map((bucket, index) => <div class="timeline-slot"><span aria-hidden="true" class="timeline-line" style={`--height:${bucket.count / max * 100}%`}>{bucket.count > 0 && <i></i>}</span><strong>{bucket.count}</strong><small>{`${(6-index)*12}–${(5-index)*12} ч назад`}</small></div>)}
+    {buckets.map((bucket, index) => <div class="timeline-slot"><span aria-hidden="true" class:list={["timeline-line", `meter-level-${meterLevel(bucket.count)}`]}>{bucket.count > 0 && <i></i>}</span><strong>{bucket.count}</strong><small>{`${(6-index)*12}–${(5-index)*12} ч назад`}</small></div>)}
  </div>
 </section>