init: Vite+React+Tailwind v2 site with HTML content from WP, RSS feed, external feed aggregator, prerender

2026-05-21 01:11:26 +03:00
commit 76cdeb8b48
42 changed files with 6317 additions and 0 deletions
--- a/src/pages/News.jsx
+++ b/src/pages/News.jsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+
+function formatDate(s) {
+  const d = new Date(s);
+  if (Number.isNaN(d.getTime())) return s;
+  return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
+export default function News() {
+  const [state, setState] = useState({ loading: true, items: [], error: null });
+
+  useEffect(() => {
+    fetch('/api/news.json', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((data) => setState({ loading: false, items: data.items || [], error: null }))
+      .catch((e) => setState({ loading: false, items: [], error: e.message }));
+  }, []);
+
+  return (
+    <div>
+      <h1 className="font-serif text-3xl font-bold mb-2">Новости</h1>
+      <p className="text-xs text-muted mb-6 pb-4 border-b border-rule">
+        Агрегатор новостей о Пушкино из внешних источников. Обновляется автоматически.
+      </p>
+
+      {state.loading && <p className="text-muted">Загружаем новости…</p>}
+      {state.error && (
+        <p className="text-muted">
+          Не удалось загрузить новости. Загляните позже.
+        </p>
+      )}
+      {!state.loading && !state.error && state.items.length === 0 && (
+        <p className="text-muted">Пока нет новостей.</p>
+      )}
+
+      <ul className="space-y-6">
+        {state.items.map((item, i) => (
+          <li key={item.guid || item.link || i} className="border-b border-rule pb-4 last:border-0">
+            <a href={item.link} target="_blank" rel="noopener noreferrer" className="font-serif text-lg font-bold text-ink hover:text-accent no-underline">
+              {item.title}
+            </a>
+            <div className="text-xs text-muted mt-1">
+              {item.source && <span>{item.source}</span>}
+              {item.pubDate && <span> · {formatDate(item.pubDate)}</span>}
+            </div>
+            {item.description && (
+              <p className="text-sm text-ink/80 mt-2">{item.description}</p>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}