Розроблення сторінки журналу змін з історією оновлень
Журнал змін — це хронологічний список змін продукту: нові функції, улучення, виправлення помилок. Правильно оформлений журнал змін утримує користувачів і зменшує відток — люди бачать, що продукт розвивається.
Структура записи
Кожна запис містить: дату, версію (якщо ПЗ), тип змін, заголовок, опис, іноді скриншот або GIF.
Типи змін: Нове (нова функція), Поліпшено (поліпшення), Виправлено (виправлення помилки), Застаріле (застаріле).
Markdown-файли як джерело даних
Простий підхід — зберігати журнал змін у файлах Markdown у репозиторії:
content/changelog/
├── 2025-03-15.md
├── 2025-02-28.md
└── 2025-01-10.md
---
date: 2025-03-15
version: "2.4.0"
---
## Нове: Інтеграція з Telegram
Тепер ви можете отримувати сповіщення про нові замовлення прямо в Telegram. ...
## Поліпшено: Швидкість завантаження каталогу
Оптимізували запити до бази даних — сторінка каталогу завантажується на 40% швидше.
## Виправлено: Помилка при оплаті через Apple Pay в Safari
// lib/changelog.ts
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
export function getChangelogEntries() {
const dir = path.join(process.cwd(), 'content/changelog');
return fs.readdirSync(dir)
.filter(f => f.endsWith('.md'))
.sort().reverse()
.map(filename => {
const raw = fs.readFileSync(path.join(dir, filename), 'utf-8');
const { data, content } = matter(raw);
return { ...data, content, slug: filename.replace('.md', '') };
});
}
Сторінка журналу змін
// app/changelog/page.tsx (Next.js App Router)
export default async function ChangelogPage() {
const entries = getChangelogEntries();
return (
<div className="max-w-2xl mx-auto py-12">
<h1 className="text-3xl font-bold mb-10">Що нового</h1>
<div className="space-y-12">
{entries.map(entry => (
<article key={entry.slug}>
<div className="flex items-center gap-3 mb-4">
<time className="text-sm text-gray-500">
{new Date(entry.date).toLocaleDateString('uk-UA', { day: 'numeric', month: 'long', year: 'numeric' })}
</time>
{entry.version && (
<span className="text-xs bg-gray-100 px-2 py-0.5 rounded font-mono">v{entry.version}</span>
)}
</div>
<div className="prose prose-sm" dangerouslySetInnerHTML={{ __html: renderMarkdown(entry.content) }} />
</article>
))}
</div>
</div>
);
}
RSS-лента для журналу змін
// ChangelogFeedController
public function rss(): Response
{
$entries = ChangelogEntry::latest('published_at')->take(20)->get();
$xml = view('feeds.changelog-rss', compact('entries'))->render();
return response($xml)->header('Content-Type', 'application/rss+xml');
}
Розсилка по електронній пошті при публікації
// Коли запис публікується — відправка підписникам
public function handle(ChangelogEntryPublished $event): void
{
$subscribers = ChangelogSubscriber::all();
foreach ($subscribers->chunk(100) as $chunk) {
Mail::to($chunk->pluck('email'))->queue(new ChangelogDigestMail($event->entry));
}
}
Часовий графік
Сторінка журналу змін з Markdown-джерелом, RSS-лентою та підпискою по email: 2 робочих дні.