ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

super basic pagination

Browse Source
This commit is contained in:
Oliver Bryan
2025-09-08 12:09:20 +01:00
parent 012af7a95d
commit 1a753e1a76
5 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Header.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import NavLink from "./NavLink.astro";
const { currentPage } = Astro.props;
---
<header class="flex gap-2 p-2 border-b-1">
<NavLink currentPage={currentPage} title="home" href="/" />
<NavLink currentPage={currentPage} title="about" href="/about" />
</header>

9
src/components/NavLink.astro Normal file
View File

@@ -0,0 +1,9 @@
---
const { currentPage, title, href } = Astro.props;
---
<a
href={href}
class={`${currentPage === title ? "bg-black text-white" : ""} px-1 rounded-sm`}
>{title}</a
>

20
src/layouts/Layout.astro Normal file
View File

@@ -0,0 +1,20 @@
---
import "../styles/global.css";
import Header from "../components/Header.astro";
const { currentPage } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>ob - {currentPage}</title>
</head>
<body>
<Header currentPage={currentPage} />
<div class="p-2">
<slot />
</div>
</body>
</html>

7
src/pages/about.astro Normal file
View File

@@ -0,0 +1,7 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout currentPage="about">
<h1 class="text-md">about page</h1>
</Layout>

19
src/pages/index.astro
View File

@@ -1,16 +1,7 @@
--- ---
import Layout from "../layouts/Layout.astro";
---
--- <Layout currentPage="home">
<h1 class="text-md">home page</h1>
<html lang="en"> </Layout>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>