diff --git a/app/minutes/[slug]/MinutesPage.tsx b/app/minutes/[slug]/MinutesPage.tsx index 52f81a180..0e13df551 100644 --- a/app/minutes/[slug]/MinutesPage.tsx +++ b/app/minutes/[slug]/MinutesPage.tsx @@ -7,19 +7,42 @@ const MinutesPage = ({ contentHtml, title, modifiedAt, + prevSlug, + nextSlug, }: { contentHtml: string title: string modifiedAt: Date + prevSlug?: string + nextSlug?: string }) => { return ( <> -
+

Meeting minutes

-

{title}

- +
+

{title}

+
+ {prevSlug && ( + + ← + + )} + {nextSlug && ( + + → + + )} +
+

@@ -45,6 +68,24 @@ const MinutesPage = ({ dangerouslySetInnerHTML={{ __html: contentHtml }} className="minutes prose prose-invert" /> +

) diff --git a/app/minutes/[slug]/page.tsx b/app/minutes/[slug]/page.tsx index 1aa8ea302..8fda79b03 100644 --- a/app/minutes/[slug]/page.tsx +++ b/app/minutes/[slug]/page.tsx @@ -24,12 +24,31 @@ export async function generateStaticParams() { })) } -// Multiple versions of this page will be statically generated export default async function Page({ params }: { params: { slug: string } }) { const { slug } = params - // Read markdown file as string - const postDirectory = path.join(__dirname, '../../../../../constants/minutes') - const filePath = path.join(postDirectory, `${slug}.md`) + + // Read markdown files + const postsDirectory = path.join( + __dirname, + '../../../../../constants/minutes' + ) + const fileNames = fs + .readdirSync(postsDirectory) + .map((file) => file.replace(/\.md$/, '')) + + // Sort filenames alphabetically + fileNames.sort() + + // Determine previous and next slugs + const currentIndex = fileNames.indexOf(slug) + const prevSlug = currentIndex > 0 ? fileNames[currentIndex - 1] : undefined + const nextSlug = + currentIndex < fileNames.length - 1 + ? fileNames[currentIndex + 1] + : undefined + + // Read current markdown file + const filePath = path.join(postsDirectory, `${slug}.md`) const fileContents = fs.readFileSync(filePath, 'utf8') const fileStats = fs.statSync(filePath) @@ -52,6 +71,8 @@ export default async function Page({ params }: { params: { slug: string } }) { contentHtml={contentHtml} title={slug} modifiedAt={modifiedAt} + prevSlug={prevSlug} + nextSlug={nextSlug} /> ) } diff --git a/app/minutes/[slug]/styles.css b/app/minutes/[slug]/styles.css index 96e1d9fe2..f678569fd 100644 --- a/app/minutes/[slug]/styles.css +++ b/app/minutes/[slug]/styles.css @@ -7,3 +7,24 @@ font-size: 1.5em; margin-top: 24px; } + +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 20px; +} + +.navigation a { + flex: 1; + text-align: center; + margin: 0 0.5rem; +} + +.navigation a:first-child { + margin-left: 0; /* Remove margin on the left for the first button */ +} + +.navigation a:last-child { + margin-right: 0; /* Remove margin on the right for the last button */ +}