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 */
+}