1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
/*
* Copyright (c) Facebook, Inc. and its affiliates.
* Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
*
* SPDX-License-Identifier: MIT
*/
import Link from '@docusaurus/Link';
import type { Props } from '@theme/BlogListPage';
import type { Content } from '@theme/BlogPostPage';
import Translate from '@docusaurus/Translate';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import clsx from 'clsx';
import Section from '@site/src/components/landing/Section';
import Subtitle from '@site/src/components/landing/Subtitle';
import styles from './Blog.module.css';
import React from 'react';
const columnLength = 5;
function Column({
items,
}: {
items: { readonly content: Content }[];
}): React.ReactNode {
// Date time format based on
// https://github.com/facebook/docusaurus/blob/6f17d5493877ba38d8b4e0b0d468f44401375c30/packages/docusaurus-theme-common/src/utils/IntlUtils.ts
const {
i18n: { currentLocale, localeConfigs },
} = useDocusaurusContext();
const calendar = localeConfigs[currentLocale]!.calendar;
const dateTimeFormat = new Intl.DateTimeFormat(currentLocale, {
calendar,
day: 'numeric',
month: 'long',
year: 'numeric',
timeZone: 'UTC',
});
if (items.length === 0) {
return null;
}
return (
<div className="col col-6">
<ul className={styles['recent-posts']}>
{items.map(({ content }) => (
<li key={content.metadata.date}>
<Link to={content.metadata.permalink}>
{content.metadata.title}
</Link>{' '}
<span className={styles.date}>
on {dateTimeFormat.format(new Date(content.metadata.date))}
</span>
</li>
))}
</ul>
</div>
);
}
export default function Blog(props: Props) {
const {
items,
metadata: { nextPage },
} = props;
const columnLength = Math.max(1, Math.ceil(items.length / 2));
return (
<Section id="blog" title="Blog">
<div className="container">
<section>
<Subtitle icon="🗓️">Recent posts</Subtitle>
</section>
<div className={clsx('row', styles.row)}>
<Column items={items.slice(0, columnLength)} />
<Column items={items.slice(columnLength)} />
</div>
{nextPage && (
<p>
<Link to={nextPage} className={styles.prev}>
<Translate
id="theme.blog.paginator.olderEntries"
description="The label used to navigate to the older blog posts page (next page)"
>
Older Entries
</Translate>
</Link>
</p>
)}
</div>
</Section>
);
}
|
