Telegram widget: fetch all page posts, video support, remove wallpaper pattern and external-link icons, bigger logo

scripts/fetch-telegram.mjs

@@ -30,11 +30,13 @@ $(".tgme_widget_message").each((_, el) => {
   const datetime = $el.find("time").first().attr("datetime") || "";
   const photoStyle = $el.find(".tgme_widget_message_photo_wrap").first().attr("style") || "";
   const photo = photoStyle.match(/url\('([^']+)'\)/)?.[1]?.split("?")[0] || "";
+  const video = $el.find(".tgme_widget_message_video_wrap, .tgme_widget_message_video_player").length > 0;
   const link = $el.find(".tgme_widget_message_date").first().attr("href") || `https://t.me/${CHANNEL}`;
-  if (text || photo) posts.push({ text, datetime, photo, link });
+  if (text || photo || video) posts.push({ text, datetime, photo, video, link });
 });
 
-const latest = posts.slice(-4).reverse();
+// t.me/s serves the first page oldest-first — flip so the newest post comes first
+const latest = posts.slice(0, 12).reverse();
 await mkdir(path.dirname("src/data/telegram-news.json"), { recursive: true });
 await writeFile("src/data/telegram-news.json", JSON.stringify(latest, null, 2));
 console.log(`saved ${latest.length} posts`);

src/components/TelegramWidget.astro

@@ -33,19 +33,27 @@ const fmt = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "long", ho
                 <img src={post.photo} alt="" class="mb-2 w-full rounded-lg" loading="lazy" />
               </a>
             )}
+            {post.video && (
+              <span class="mb-2 flex aspect-video w-full items-center justify-center gap-2 rounded-lg bg-night-950/90 text-sm font-medium text-white">
+                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M8 5.14v14l11-7-11-7z" />
+                </svg>
+                Видео
+              </span>
+            )}
             {post.text && (
               <p class="text-[13px] leading-snug text-night-950 [&_a]:break-words [&_a]:text-[#2AABEE]">
                 <Fragment set:html={post.text} />
               </p>
             )}
-            {!post.text && <p class="text-[13px] text-slate-500">Фото</p>}
+            {!post.text && !(post.photo || post.video) && <p class="text-[13px] text-slate-500">Фото</p>}
             <a
               href={post.link}
               target="_blank"
               rel="noopener"
               class="mt-1 block text-right text-[11px] text-slate-400 transition-colors hover:text-[#2AABEE]"
             >
-              {post.datetime ? fmt.format(new Date(post.datetime)) : "Открыть пост"} ↗
+              {post.datetime ? fmt.format(new Date(post.datetime)) : "Открыть пост"}
             </a>
           </div>
         ))}