52 lines
1.8 KiB
React
52 lines
1.8 KiB
React
import Link from 'next/link';
|
|
import { formatDate, getArticles } from '../lib/articles';
|
|
|
|
export default function HomePage() {
|
|
const articles = getArticles();
|
|
|
|
return (
|
|
<main>
|
|
<section className="site-hero">
|
|
<div className="site-hero__inner">
|
|
<p className="eyebrow">Личный блог программиста</p>
|
|
<h1>ProgCode.Ru</h1>
|
|
<p className="site-description">
|
|
PHP, Bitrix, JavaScript, D, Windows и практические заметки из ежедневной разработки.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="articles-shell" aria-label="Список статей">
|
|
<div className="articles-header">
|
|
<div>
|
|
<p className="eyebrow">Материалы</p>
|
|
<h2>Статьи</h2>
|
|
</div>
|
|
<span>{articles.length} записей</span>
|
|
</div>
|
|
|
|
<div className="article-grid">
|
|
{articles.map((article) => (
|
|
<Link key={article.slug} className="article-card" href={`/articles/${encodeURIComponent(article.slug)}/`}>
|
|
<img src={article.cover} alt="" />
|
|
<div className="article-card__body">
|
|
<div className="meta-line">
|
|
<time dateTime={article.date}>{formatDate(article.date)}</time>
|
|
<span>{article.readingMinutes} мин</span>
|
|
</div>
|
|
<h3>{article.title}</h3>
|
|
<p>{article.excerpt}</p>
|
|
<div className="tag-list">
|
|
{article.categories.map((category) => (
|
|
<span key={category}>{category}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|