.gitea/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Deploy
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    container: gitea/runner-images:ubuntu-latest
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - run: npm ci
+      - run: npm run build
+      - uses: actions/upload-artifact@v3
+        with:
+          name: website
+          path: dist/
+          compression-level: 9
+
+  deploy:
+    runs-on: self-hosted
+    needs: build
+    steps:
+      - uses: actions/download-artifact@v3
+        with:
+          name: website
+      - run: rsync --archive --delete-after ./ /var/www/popov.link/

src/components/Head.astro

@@ -1,10 +1,6 @@
 ---
-type Props = {
-	readonly description?: string;
-	readonly title?: string;
-};
-
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+
 const { title, description } = Astro.props;
 ---
 

src/components/Header.astro

@@ -2,52 +2,6 @@
 
 ---
 
-<style lang="scss">
-	@import "../scss/_variables.scss";
-
-	header {
-		background-color: $colorBg;
-		border-bottom: 1px solid $colorHeader;
-		box-shadow: 0 5px 5px $colorBg;
-		left: 0;
-		line-height: 3.5em;
-		opacity: 0.975;
-		position: fixed;
-		right: 0;
-		top: 0;
-	}
-
-	nav {
-		margin: auto;
-		max-width: 60em;
-		padding: 0 4em;
-		text-align: right;
-
-		a {
-			color: $colorText;
-			padding: 0 1em;
-
-			&:visited {
-				color: $colorText;
-			}
-		}
-	}
-
-	@media (width <=684px) {
-		header {
-			box-shadow: none;
-		}
-
-		nav {
-			padding: 0 2em;
-
-			span {
-				display: none;
-			}
-		}
-	}
-</style>
-
 <header>
 	<nav>
 		<a href="/feed.xml">RSS</a>

src/components/PostElement.astro

@@ -1,11 +1,6 @@
 ---
-import { type CollectionEntry } from "astro:content";
 import dayjs from "dayjs";
 
-type Props = {
-	readonly post: CollectionEntry<"blog">;
-};
-
 const { post } = Astro.props;
 ---
 

src/components/PostPagination.astro

@@ -0,0 +1,47 @@
+---
+const { prevPost, nextPost } = Astro.props;
+---
+
+<style lang="scss">
+	.pagination {
+		overflow: hidden;
+		padding: 5rem 0;
+		width: 100%;
+	}
+
+	@media (width <=684px) {
+		.pagination {
+			padding: 2rem 0;
+		}
+	}
+
+	.prev,
+	.next {
+		max-width: 40%;
+	}
+
+	.prev {
+		float: left;
+	}
+
+	.next {
+		float: right;
+	}
+</style>
+
+<div class="pagination">
+	{
+		prevPost && (
+			<span class="prev">
+				<a href={`/blog/${prevPost.slug}`}>&lt; {prevPost.data.title}</a>
+			</span>
+		)
+	}
+	{
+		nextPost && (
+			<span class="next">
+				<a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} &gt;</a>
+			</span>
+		)
+	}
+</div>

src/layouts/BaseLayout.astro

@@ -3,11 +3,6 @@ import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
 import "../scss/global.scss";
 
-type Props = {
-	readonly description?: string;
-	readonly title?: string;
-};
-
 const { title, description } = Astro.props;
 ---
 

src/layouts/PageLayout.astro

@@ -0,0 +1,9 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+
+const { title, description } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+	<slot />
+</BaseLayout>

src/pages/blog/[...slug].astro

@@ -1,20 +1,25 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
 import Comments from "../../components/Comments.astro";
-import Layout from "../../layouts/BaseLayout.astro";
+import Layout from "../../layouts/PageLayout.astro";
+import Pagination from "../../components/PostPagination.astro";
 
 export async function getStaticPaths() {
 	const posts = await getCollection("blog");
+	const total = posts.length;
 
-	return posts.map((post) => ({
+	return posts.map((post, index) => ({
 		params: { slug: post.slug },
-		props: post,
+		props: {
+			post,
+			prevPost: index + 1 === total ? null : posts[index + 1],
+			nextPost: index === 0 ? null : posts[index - 1],
+		},
 	}));
 }
-
 type Props = CollectionEntry<"blog">;
 
-const post = Astro.props;
+const { post, prevPost, nextPost } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await post.render();
 ---
 
@@ -42,6 +47,10 @@ const { Content, remarkPluginFrontmatter } = await post.render();
 			<Content />
 		</section>
 
+		<section>
+			<Pagination prevPost={prevPost} nextPost={nextPost} />
+		</section>
+
 		<section>
 			<Comments />
 		</section>

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import Element from "../components/PostElement.astro";
-import Layout from "../layouts/BaseLayout.astro";
+import Layout from "../layouts/PageLayout.astro";
 
 const posts = await getCollection("blog");
 ---

src/scss/_navbar.scss

@@ -0,0 +1,41 @@
+header {
+	background-color: $colorBg;
+	border-bottom: 1px solid $colorHeader;
+	box-shadow: 0 5px 5px $colorBg;
+	left: 0;
+	line-height: 3.5em;
+	opacity: 0.975;
+	position: fixed;
+	right: 0;
+	top: 0;
+}
+
+nav {
+	margin: auto;
+	max-width: 60em;
+	padding: 0 4em;
+	text-align: right;
+
+	a {
+		color: $colorText;
+		padding: 0 1em;
+
+		&:visited {
+			color: $colorText;
+		}
+	}
+}
+
+@media (width <=684px) {
+	header {
+		box-shadow: none;
+	}
+
+	nav {
+		padding: 0 2em;
+
+		span {
+			display: none;
+		}
+	}
+}

src/scss/global.scss

@@ -1,3 +1,7 @@
+// Base
 @import "variables";
 @import "framework";
 @import "print";
+
+// Modules
+@import "navbar";