feat: next-prev article buttons implemented

scripts/update-data.mjs

@@ -89,7 +89,7 @@ const writeJSON = async (file, data) => await fs.writeFile(file, JSON.stringify(
 				}
 			}
 
-			articles.push({ title, slug, category: data.category?.trim() ?? '' })
+			articles.push({ title, slug, category: data.category?.trim() ?? '', order: data.order ?? 0 })
 		}
 
 		const filteredTags = tags.filter((t) => (t.articleCount ?? 0) > 0)

src/components/ArticleNav.astro

@@ -0,0 +1,94 @@
+---
+import { getCollection } from 'astro:content'
+import { t } from '../i18n/index.ts'
+
+interface Props {
+	slug: string
+	category: string
+	lang: string
+	labels?: Record<string, unknown>
+}
+
+const { slug, category, lang, labels = {} } = Astro.props
+
+const allArticles = await getCollection('articles')
+
+const categoryArticles = allArticles
+	.filter((a) => a.data.lang === lang && a.data.category === category && a.data.status === 'Published')
+	.map((a) => ({ slug: a.data.slug, title: a.data.title, order: a.data.order ?? 0 }))
+	.sort((a, b) => {
+		if (a.order === 0 && b.order === 0) return 0
+		if (a.order === 0) return 1
+		if (b.order === 0) return -1
+		if (a.order === b.order) return Math.random() - 0.5
+		return a.order - b.order
+	})
+
+const currentIndex = categoryArticles.findIndex((a) => a.slug === slug)
+
+const prevArticle = currentIndex > 0 ? categoryArticles[currentIndex - 1] : null
+const nextArticle = currentIndex < categoryArticles.length - 1 ? categoryArticles[currentIndex + 1] : null
+
+const langPrefix = lang === 'en' ? '/en' : ''
+const isOnlyPrev = prevArticle && !nextArticle
+const isOnlyNext = nextArticle && !prevArticle
+---
+
+{
+	(prevArticle || nextArticle) && (
+		<nav
+			class={`flex flex-col md:flex-row items-stretch gap-4 mb-12 ${isOnlyPrev || isOnlyNext ? (isOnlyPrev ? 'md:justify-start md:w-1/2' : 'md:justify-end md:w-1/2 md:ml-auto') : ''}`}
+		>
+			{prevArticle && (
+				<a
+					class={`w-full md:flex-1 group flex items-center gap-3 p-4 rounded-lg border border-border dark:border-border-dark bg-muted dark:bg-muted-dark hover:bg-primary/10 dark:hover:bg-primary-dark/10 hover:text-primary dark:hover:text-primary-dark text-muted-foreground dark:text-muted-dark-foreground transition-all duration-200`}
+					href={`${langPrefix}/articles/${prevArticle.slug}`}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="lucide lucide-chevron-left h-5 w-5 shrink-0 transition-colors"
+					>
+						<path d="m15 18-6-6 6-6" />
+					</svg>
+					<div class="text-right flex-1 min-w-0">
+						<span class="text-xs block">{t(labels, 'article.previous')}</span>
+						<span class="text-sm font-medium truncate block">{prevArticle.title}</span>
+					</div>
+				</a>
+			)}
+			{nextArticle && (
+				<a
+					class={`w-full md:flex-1 group flex items-center gap-3 p-4 rounded-lg border border-border dark:border-border-dark bg-muted dark:bg-muted-dark hover:bg-primary/10 dark:hover:bg-primary-dark/10 hover:text-primary dark:hover:text-primary-dark text-muted-foreground dark:text-muted-dark-foreground transition-all duration-200`}
+					href={`${langPrefix}/articles/${nextArticle.slug}`}
+				>
+					<div class="flex-1 min-w-0">
+						<span class="text-xs block">{t(labels, 'article.next')}</span>
+						<span class="text-sm font-medium truncate block">{nextArticle.title}</span>
+					</div>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="lucide lucide-chevron-right h-5 w-5 shrink-0 transition-colors"
+					>
+						<path d="m9 18 6-6-6-6" />
+					</svg>
+				</a>
+			)}
+		</nav>
+	)
+}

src/content.config.ts

@@ -26,6 +26,7 @@ const articles = defineCollection({
 		author: z.string(),
 		date: z.union([z.string(), z.date()]),
 		views: z.number().default(0),
+		order: z.number().default(0),
 		status: z.enum(['Published', 'Draft']).default('Published'),
 	}),
 })

src/content/articles/tr/linear-model-nedir.mdx

@@ -8,6 +8,7 @@ tags: ['linear-regression', 'supervised-learning', 'teori']
 author: '@omerfdmrl'
 date: '2026-03-29'
 views: 0
+order: 3
 status: 'Published'
 ---
 

src/content/articles/tr/linear-regression-nedir.mdx

@@ -8,6 +8,7 @@ tags: ['linear-regression', 'supervised-learning', 'teori']
 author: '@omerfdmrl'
 date: '2026-03-22'
 views: 0
+order: 2
 status: 'Published'
 ---
 

src/content/articles/tr/supervised-learning-nedir.mdx

@@ -8,6 +8,7 @@ tags: ['supervised-learning', 'teori']
 author: '@omerfdmrl'
 date: '2026-03-21'
 views: 0
+order: 1
 status: 'Published'
 ---
 

src/data/en/labels.json

@@ -39,7 +39,9 @@
 		"home": "Home",
 		"by": "By",
 		"onThisPage": "On this page",
-		"share": "Share"
+		"share": "Share",
+		"previous": "Previous",
+		"next": "Next"
 	},
 	"share": {
 		"label": "Share"

src/data/tr/articles.json

@@ -2,16 +2,19 @@
 	{
 		"title": "Linear Model Nedir?",
 		"slug": "linear-model-nedir",
-		"category": "machine-learning"
+		"category": "machine-learning",
+		"order": 3
 	},
 	{
 		"title": "Linear Regression Nedir?",
 		"slug": "linear-regression-nedir",
-		"category": "machine-learning"
+		"category": "machine-learning",
+		"order": 2
 	},
 	{
 		"title": "Supervised Learning Nedir?",
 		"slug": "supervised-learning-nedir",
-		"category": "machine-learning"
+		"category": "machine-learning",
+		"order": 1
 	}
 ]

src/data/tr/labels.json

@@ -39,7 +39,9 @@
 		"home": "Ana Sayfa",
 		"by": "Yazar",
 		"onThisPage": "Sayfada",
-		"share": "Paylaş"
+		"share": "Paylaş",
+		"previous": "Önceki",
+		"next": "Sonraki"
 	},
 	"share": {
 		"label": "Paylaş"

src/pages/articles/[slug].astro

@@ -4,6 +4,7 @@ import ShareButtons from '../../components/ShareButtons.astro'
 import GitHubUserCard from '../../components/GitHubUserCard.astro'
 import ReadingProgress from '../../components/ReadingProgress.astro'
 import TableOfContents from '../../components/TableOfContents.astro'
+import ArticleNav from '../../components/ArticleNav.astro'
 import { getCollection, render } from 'astro:content'
 import { SITE } from '../../config.mjs'
 import { getLangFromUrl, t } from '../../i18n/index.ts'
@@ -153,6 +154,13 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 				<Content />
 			</article>
 
+			<ArticleNav
+				slug={article.data.slug}
+				category={article.data.category}
+				lang={article.data.lang}
+				labels={labels}
+			/>
+
 			<ShareButtons title={article.data.title} url={articleUrl} labels={labels} />
 		</div>
 

src/pages/en/articles/[slug].astro

@@ -4,6 +4,7 @@ import ShareButtons from '../../../components/ShareButtons.astro'
 import GitHubUserCard from '../../../components/GitHubUserCard.astro'
 import ReadingProgress from '../../../components/ReadingProgress.astro'
 import TableOfContents from '../../../components/TableOfContents.astro'
+import ArticleNav from '../../../components/ArticleNav.astro'
 import { getCollection, render } from 'astro:content'
 import { SITE } from '../../../config.mjs'
 import { t } from '../../../i18n/index.ts'
@@ -152,6 +153,8 @@ const onThisPageLabel = t(labels, 'article.onThisPage')
 				<Content />
 			</article>
 
+			<ArticleNav slug={article.data.slug} category={article.data.category} lang="en" labels={labels} />
+
 			<ShareButtons title={article.data.title} url={articleUrl} labels={labels} />
 		</div>