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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react"
import moment from "moment"
import { Head } from "./Head"
import { SiteHeader } from "./SiteHeader"
import { SiteFooter } from "./SiteFooter"
import { TableOfContents } from "../site/TableOfContents"
import { groupBy } from "../clientUtils/Util"
import { PostRow } from "../clientUtils/owidTypes"
type Entry = Pick<PostRow, "title" | "slug" | "published_at">
export const EntriesByYearPage = (props: {
entries: Entry[]
baseUrl: string
}) => {
const { baseUrl } = props
const entriesByYear = groupBy(props.entries, (entry) =>
moment(entry.published_at as Date).year()
)
const years = Object.keys(entriesByYear).sort().reverse()
const pageTitle = "Entries by Year"
const tocEntries = years.map((year) => {
return {
isSubheading: false,
slug: year,
text: year,
}
})
return (
<html>
<Head
canonicalUrl={`${baseUrl}/entries-by-year`}
pageTitle="Entries by Year"
pageDesc="An index of Our World in Data entries by year of first publication."
baseUrl={baseUrl}
/>
<body className="EntriesByYearPage">
<SiteHeader baseUrl={baseUrl} />
<main>
<div className="page with-sidebar">
<div className="content-wrapper">
<TableOfContents
headings={tocEntries}
pageTitle={pageTitle}
/>
<div className="offset-content">
<div className="content">
<p>
Entries by year of first publication.
Note that older entries are often
updated with new content.
</p>
{years.map((year) => (
<section key={year}>
<h2 id={year}>
<a
href={`${baseUrl}/entries-by-year/${year}`}
>
{year}
</a>
</h2>
<ul>
{entriesByYear[year].map(
(entry) => (
<li key={entry.slug}>
<a
href={`${baseUrl}/${entry.slug}`}
>
{entry.title}
</a>
</li>
)
)}
</ul>
</section>
))}
</div>
</div>
</div>
</div>
</main>
<SiteFooter hideDonate={true} baseUrl={baseUrl} />
<script
dangerouslySetInnerHTML={{
__html: `
runTableOfContents(${JSON.stringify({
headings: tocEntries,
pageTitle,
})})`,
}}
/>
</body>
</html>
)
}
export const EntriesForYearPage = (props: {
entries: Entry[]
year: number
baseUrl: string
}) => {
const { baseUrl, year } = props
const entriesByYear = groupBy(props.entries, (entry) =>
moment(entry.published_at as Date).year()
)
const years = Object.keys(entriesByYear)
.sort()
.reverse()
.filter((y) => parseInt(y) === year)
return (
<html>
<Head
canonicalUrl={`${baseUrl}/entries-by-year/${year}`}
pageTitle={`${year} Entries`}
pageDesc={`Our World in Data entries first published in ${year}.`}
baseUrl={baseUrl}
/>
<body className="EntriesByYearPage">
<SiteHeader baseUrl={baseUrl} />
<main>
<div className="page">
<div className="content-wrapper">
<div className="offset-content">
<div className="content">
{years.map((year) => (
<section key={year}>
<h2>{year}</h2>
<ul>
{entriesByYear[year].map(
(entry) => (
<li key={entry.slug}>
<a
href={`${baseUrl}/${entry.slug}`}
>
{entry.title}
</a>
</li>
)
)}
</ul>
</section>
))}
</div>
</div>
</div>
</div>
</main>
<SiteFooter hideDonate={true} baseUrl={baseUrl} />
</body>
</html>
)
}
|