Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import { Head } from "./Head"
import { SiteHeader } from "./SiteHeader"
import { SiteFooter } from "./SiteFooter"
import { range } from "../clientUtils/Util"
import { FullPost } from "../clientUtils/owidTypes"
import PostCard from "./PostCard/PostCard"
export const BlogIndexPage = (props: {
posts: FullPost[]
pageNum: number
numPages: number
baseUrl: string
}) => {
const { posts, pageNum, numPages, baseUrl } = props
const pageNums = range(1, numPages + 1)
const pageTitle = "Latest publications"
return (
<html>
<Head
canonicalUrl={
`${baseUrl}/blog` + (pageNum > 1 ? `/page/${pageNum}` : "")
}
pageTitle={pageTitle}
baseUrl={baseUrl}
/>
<body className="blog">
<SiteHeader baseUrl={baseUrl} />
<main className="wrapper">
<div className="site-content">
<h2>{pageTitle}</h2>
<ul className="posts">
{posts.map((post) => (
<li key={post.slug} className="post">
<PostCard post={post} />
</li>
))}
</ul>
<nav
className="navigation pagination"
role="navigation"
>
<h2 className="screen-reader-text">
Posts navigation
</h2>
<div className="nav-link">
{pageNums.map((num) => (
<a
key={num}
className={
"page-numbers" +
(num === pageNum ? " current" : "")
}
href={
num === 1
? "/blog/"
: `/blog/page/${num}`
}
>
{num}
</a>
))}
</div>
</nav>
</div>
</main>
<SiteFooter baseUrl={baseUrl} />
</body>
</html>
)
}
|