feat: блок «Сейчас» + «Заметки редактора» + ArticleMeta

- NowBlock: live indicator (последняя статья / идёт генерация) + bar-чарт за 7 дней - NotesBlock: карточки заметок редактора с pin - /notes: отдельная страница со всеми заметками - ArticleMeta: раскрывающийся блок «Как сделана эта статья» на странице статьи - В шапку добавлена ссылка «Заметки» (desktop и mobile)
2026-05-31 10:05:28 +03:00
parent 3154b47578
commit c27985614e
8 changed files with 300 additions and 8 deletions
@@ -5,6 +5,7 @@ import Footer from '@/components/Footer';
 import ReadingProgress from '@/components/ReadingProgress';
 import ScrollToTop from '@/components/ScrollToTop';
 import ShareButton from '@/components/ShareButton';
+import ArticleMeta from '@/components/ArticleMeta';
 import ArticleCard from '@/components/ArticleCard';
 import { getArticle, listArticles } from '@/lib/engine';
 import { renderMarkdown, formatDate } from '@/lib/markdown';
@@ -108,9 +109,7 @@ export default async function ArticlePage({ params }) {
          dangerouslySetInnerHTML={{ __html: html }}
        />

-        <div className="mt-12 pt-6 border-t-soft text-center">
-          <p className="mute text-sm">Статья сгенерирована ИИ под редакторским присмотром.</p>
-        </div>
+        <ArticleMeta article={article} />
      </article>

      {related.length > 0 && (
@@ -0,0 +1,35 @@
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import NotesBlock from '@/components/NotesBlock';
+import { listNotes } from '@/lib/engine';
+import { MessageCircle } from 'lucide-react';
+
+export const dynamic = 'force-dynamic';
+export const metadata = { title: 'Заметки редактора' };
+
+export default async function NotesPage() {
+  const notes = await listNotes({ limit: 100 });
+  return (
+    <>
+      <Header />
+      <main className="pt-10 pb-16">
+        <div className="container-wide mb-8">
+          <div
+            className="inline-flex items-center gap-2 text-xs accent px-3 py-1.5 rounded-full mb-4"
+            style={{ background: 'rgb(var(--accent) / 0.1)', border: '1px solid rgb(var(--accent) / 0.2)' }}
+          >
+            <MessageCircle className="w-3.5 h-3.5" /> За кулисами
+          </div>
+          <h1 className="text-3xl sm:text-5xl font-bold ink mb-3 leading-tight">
+            Заметки редактора
+          </h1>
+          <p className="mute text-base sm:text-lg max-w-2xl">
+            Короткие мысли, наблюдения, технические заметки и комментарии человека, который следит за блогом. Не статьи — просто записи на полях.
+          </p>
+        </div>
+        <NotesBlock notes={notes} />
+      </main>
+      <Footer />
+    </>
+  );
+}
@@ -4,21 +4,23 @@ import Footer from '@/components/Footer';
 import ArticleCard from '@/components/ArticleCard';
 import HeroImage from '@/components/HeroImage';
 import Stats from '@/components/Stats';
+import NowBlock from '@/components/NowBlock';
+import NotesBlock from '@/components/NotesBlock';
 import Reveal from '@/components/Reveal';
-import { listArticles, listTags, getStats } from '@/lib/engine';
+import { listArticles, listTags, getStats, getLive, listNotes } from '@/lib/engine';
 import { Sparkles, ArrowRight } from 'lucide-react';

 export const dynamic = 'force-dynamic';

 export default async function HomePage() {
-  let articles = [];
-  let tags = [];
-  let stats = null;
+  let articles = [], tags = [], stats = null, live = null, notes = [];
  try {
-    [articles, tags, stats] = await Promise.all([
+    [articles, tags, stats, live, notes] = await Promise.all([
      listArticles({ limit: 13 }),
      listTags(),
      getStats(),
+      getLive(),
+      listNotes({ limit: 6 }),
    ]);
  } catch (err) {
    console.error('Home load failed:', err.message);
@@ -63,6 +65,13 @@ export default async function HomePage() {
        </div>
      </section>

+      {/* Сейчас — live indicator */}
+      <Reveal>
+        <div className="reveal">
+          <NowBlock live={live} />
+        </div>
+      </Reveal>
+
      {/* Stats */}
      <Reveal>
        <div className="reveal">
@@ -99,6 +108,15 @@ export default async function HomePage() {
        </section>
      )}

+      {/* Заметки редактора */}
+      {notes.length > 0 && (
+        <Reveal>
+          <div className="reveal">
+            <NotesBlock notes={notes} compact />
+          </div>
+        </Reveal>
+      )}
+
      {/* Tags */}
      {tags.length > 0 && (
        <Reveal>
@@ -0,0 +1,50 @@
+'use client';
+import { useState } from 'react';
+import { Cpu, Zap, Clock, ChevronDown } from 'lucide-react';
+
+export default function ArticleMeta({ article }) {
+  const [open, setOpen] = useState(false);
+  const tokensIn = article.tokens_in || 0;
+  const tokensOut = article.tokens_out || 0;
+  const total = tokensIn + tokensOut;
+  if (!total) return null;
+
+  return (
+    <div className="mt-12 article-card p-5 sm:p-6">
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="w-full flex items-center justify-between gap-3 text-left"
+      >
+        <div className="flex items-center gap-2">
+          <Cpu className="w-4 h-4 accent" />
+          <span className="font-medium ink">Как сделана эта статья</span>
+        </div>
+        <ChevronDown className={`w-4 h-4 mute transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div className="mt-4 pt-4 border-t-soft grid sm:grid-cols-3 gap-4 text-sm">
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Модель</div>
+            <div className="ink font-medium">Claude Sonnet 4.6</div>
+            <div className="text-xs mute mt-1">через aiprimetech.io</div>
+          </div>
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Токены</div>
+            <div className="ink font-medium tabular-nums">
+              {tokensIn.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">in</span>
+              {' / '}
+              {tokensOut.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">out</span>
+            </div>
+            <div className="text-xs mute mt-1">≈ {total.toLocaleString('ru-RU')} всего</div>
+          </div>
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Процесс</div>
+            <div className="ink font-medium">2 этапа</div>
+            <div className="text-xs mute mt-1">генерация → self-critique</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -56,6 +56,7 @@ export default function Header() {
          {/* Desktop nav */}
          <nav className="hidden sm:flex items-center gap-1 text-sm">
            <Link href="/" className="btn btn-ghost text-sm py-1.5">Статьи</Link>
+            <Link href="/notes" className="btn btn-ghost text-sm py-1.5">Заметки</Link>
            <Link href="/about" className="btn btn-ghost text-sm py-1.5">О проекте</Link>
            <div className="ml-1 flex items-center gap-1">
              <SearchBox />
@@ -90,6 +91,11 @@ export default function Header() {
            onClick={() => setOpen(false)}
            className="text-2xl font-semibold ink py-3 border-b-soft"
          >Статьи</Link>
+          <Link
+            href="/notes"
+            onClick={() => setOpen(false)}
+            className="text-2xl font-semibold ink py-3 border-b-soft"
+          >Заметки</Link>
          <Link
            href="/about"
            onClick={() => setOpen(false)}
@@ -0,0 +1,53 @@
+import Link from 'next/link';
+import { Pin, ArrowRight, MessageCircle } from 'lucide-react';
+import { formatDate } from '@/lib/markdown';
+
+function NoteCard({ note }) {
+  return (
+    <article className="article-card p-5 sm:p-6 h-full flex flex-col">
+      {note.is_pinned && (
+        <div className="flex items-center gap-1.5 text-xs accent mb-2">
+          <Pin className="w-3 h-3" /> закреплено
+        </div>
+      )}
+      {note.title && (
+        <h3 className="text-base sm:text-lg font-semibold ink mb-2 leading-snug">
+          {note.title}
+        </h3>
+      )}
+      <p className="mute text-sm leading-relaxed mb-4 flex-1 whitespace-pre-line line-clamp-6">
+        {note.content}
+      </p>
+      <div className="flex items-center justify-between text-xs mute pt-3 border-t-soft">
+        <span>{note.author}</span>
+        <span>{formatDate(note.created_at)}</span>
+      </div>
+    </article>
+  );
+}
+
+export default function NotesBlock({ notes, compact = false }) {
+  if (!notes || notes.length === 0) return null;
+  const items = compact ? notes.slice(0, 3) : notes;
+
+  return (
+    <section className="container-wide pb-12">
+      <div className="flex items-center justify-between mb-4 sm:mb-5">
+        <div className="flex items-center gap-2">
+          <MessageCircle className="w-4 h-4 mute" />
+          <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
+            Заметки редактора
+          </h2>
+        </div>
+        {compact && notes.length > 3 && (
+          <Link href="/notes" className="text-xs mute hover:ink transition-colors inline-flex items-center gap-1">
+            Все <ArrowRight className="w-3 h-3" />
+          </Link>
+        )}
+      </div>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
+        {items.map(n => <NoteCard key={n.id} note={n} />)}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,121 @@
+import Link from 'next/link';
+import { Activity, Cpu, Calendar, Sparkles, Zap } from 'lucide-react';
+import { formatDate } from '@/lib/markdown';
+
+// Сколько прошло времени с даты
+function timeAgo(iso) {
+  if (!iso) return null;
+  const seconds = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000));
+  const mins = Math.floor(seconds / 60);
+  const hours = Math.floor(mins / 60);
+  const days = Math.floor(hours / 24);
+  if (days > 0) return `${days} дн назад`;
+  if (hours > 0) return `${hours} ч назад`;
+  if (mins > 0) return `${mins} мин назад`;
+  return 'только что';
+}
+
+export default function NowBlock({ live }) {
+  if (!live) return null;
+  const { latest, processing, week } = live;
+  const maxCnt = Math.max(1, ...week.map(d => d.cnt));
+
+  return (
+    <section className="container-wide pb-12">
+      <div className="flex items-center gap-2 mb-4 sm:mb-5">
+        <span className="relative flex h-2.5 w-2.5">
+          <span
+            className="absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping"
+            style={{ background: 'rgb(var(--accent))' }}
+          />
+          <span
+            className="relative inline-flex rounded-full h-2.5 w-2.5"
+            style={{ background: 'rgb(var(--accent))' }}
+          />
+        </span>
+        <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">Сейчас</h2>
+      </div>
+
+      <div className="grid lg:grid-cols-3 gap-4">
+        {/* Главная карточка — последняя статья / процесс */}
+        <div className="article-card lg:col-span-2 p-5 sm:p-6">
+          {processing ? (
+            <>
+              <div className="flex items-center gap-2 text-sm accent mb-2">
+                <Sparkles className="w-4 h-4 animate-pulse" />
+                <span className="font-medium">ИИ пишет статью</span>
+              </div>
+              <div className="text-lg sm:text-xl ink font-semibold leading-snug mb-2 line-clamp-2">
+                «{processing.topic}»
+              </div>
+              <div className="text-xs mute">
+                Началось {timeAgo(processing.created_at)} · подожди немного, скоро появится
+              </div>
+            </>
+          ) : latest ? (
+            <Link href={`/blog/${latest.slug}`} className="block group">
+              <div className="flex items-center gap-2 text-xs mute mb-2">
+                <Activity className="w-3.5 h-3.5" />
+                <span>Последний материал — {timeAgo(latest.published_at)}</span>
+              </div>
+              <div className="text-lg sm:text-xl ink font-semibold leading-snug mb-3 group-hover:accent transition-colors line-clamp-2">
+                {latest.title}
+              </div>
+              <div className="flex flex-wrap items-center gap-3 text-xs mute">
+                <span className="inline-flex items-center gap-1">
+                  <Cpu className="w-3 h-3" /> claude-sonnet-4-6
+                </span>
+                {latest.tokens_out && (
+                  <span className="inline-flex items-center gap-1">
+                    <Zap className="w-3 h-3" /> {latest.tokens_out.toLocaleString('ru-RU')} токенов
+                  </span>
+                )}
+              </div>
+            </Link>
+          ) : (
+            <div className="mute text-sm">Скоро здесь что-нибудь появится…</div>
+          )}
+        </div>
+
+        {/* Bar-чарт за 7 дней */}
+        <div className="article-card p-5 sm:p-6">
+          <div className="flex items-center gap-2 text-xs mute mb-3">
+            <Calendar className="w-3.5 h-3.5" />
+            <span className="uppercase tracking-wider">Активность за неделю</span>
+          </div>
+          <div className="flex items-end gap-1.5 h-20 mb-2">
+            {week.map((d, i) => {
+              const h = d.cnt > 0 ? Math.max(10, (d.cnt / maxCnt) * 100) : 4;
+              const isToday = i === week.length - 1;
+              return (
+                <div key={d.day} className="flex-1 flex flex-col items-center gap-1 group">
+                  <div
+                    className="w-full rounded-md transition-all"
+                    style={{
+                      height: `${h}%`,
+                      background: d.cnt > 0
+                        ? (isToday ? 'rgb(var(--accent))' : 'rgb(var(--accent) / 0.45)')
+                        : 'rgb(var(--surface-2))',
+                    }}
+                    title={`${d.day}: ${d.cnt} ${d.cnt === 1 ? 'статья' : 'статей'}`}
+                  />
+                </div>
+              );
+            })}
+          </div>
+          <div className="flex justify-between text-[10px] mute">
+            {week.map((d, i) => {
+              const date = new Date(d.day);
+              const dow = ['вс','пн','вт','ср','чт','пт','сб'][date.getDay()];
+              return (
+                <span key={d.day} className={i === week.length - 1 ? 'accent font-medium' : ''}>
+                  {dow}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -37,6 +37,16 @@ export async function listTags() {
  return call('/api/articles/tags', { next: { revalidate: 300 } });
 }

+export async function getLive() {
+  try { return await call('/api/stats/live', { cache: 'no-store' }); }
+  catch { return null; }
+}
+
+export async function listNotes({ limit = 20 } = {}) {
+  try { return await call(`/api/notes?limit=${limit}`, { cache: 'no-store' }); }
+  catch { return []; }
+}
+
 export async function getStats() {
  try {
    return await call('/api/stats', { cache: 'no-store' });