Refine blog UI with horizontal cards, pagination, and navigation

markc · claude · markc · commit c5d3dbb79748 · 2026-01-21T16:51:55.000+10:00
Blog Index:
- Horizontal card layout (image left, content right)
- Compose with card-hover for DRY styling
- Remove redundant header, use ctx-&gt;perp for pagination
- Longer excerpts with italic metadata

Single Post:
- Prev/next navigation at top and bottom
- Featured image inline (33% width, right-aligned)
- Simplified nav labels (just « Title and Title »)

CSS (base.css):
- Add .blog-nav, .blog-list, .blog-item styles
- Add .blog-item-meta/.blog-single-meta with italic
- Mobile responsive (stack on small screens)

Root Router:
- Serve static files from chapter public/ directories
- Correct content-type headers for images

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/09-Blog/src/Core/Ctx.php b/09-Blog/src/Core/Ctx.php
@@ -17,7 +17,7 @@ final class Ctx
     public Db $db;
 
     // Centralized config
-    public int $perp = 10; // Items per page
+    public int $perp = 6; // Items per page
 
     public function __construct(
         public string $email = 'noreply@localhost',
diff --git a/09-Blog/src/Plugins/Blog/BlogModel.php b/09-Blog/src/Plugins/Blog/BlogModel.php
@@ -13,8 +13,6 @@
 
 final class BlogModel extends Plugin
 {
-    private const int DEFAULT_PER_PAGE = 9;
-
     private ?Db $dbh = null;
     private array $in = ['id' => 0];
 
@@ -32,7 +30,7 @@ public function __construct(
     public function list(): array
     {
         $page = filter_var($_REQUEST['page'] ?? 1, FILTER_VALIDATE_INT) ?: 1;
-        $perPage = self::DEFAULT_PER_PAGE;
+        $perPage = $this->ctx->perp;
         $offset = ($page - 1) * $perPage;
 
         $where = 'type = :type';
diff --git a/09-Blog/src/Plugins/Blog/BlogView.php b/09-Blog/src/Plugins/Blog/BlogView.php
@@ -25,48 +25,45 @@ public function list(): string
         $a = $this->a;
         $t = $this->t();
 
-        $html = <<<HTML
-        <div class="blog-header">
-            <h1>Blog</h1>
-            <p class="text-muted">Latest posts and updates</p>
-        </div>
-        <div class="blog-grid">
-        HTML;
+        $html = '<div class="blog-list">';
 
         foreach ($a['items'] as $post) {
             $title = htmlspecialchars($post['title']);
             $excerpt = htmlspecialchars($post['excerpt']);
             $author = htmlspecialchars($post['author']);
             $date = date('M j, Y', strtotime($post['created']));
             $image = $post['featured_image'] ?: 'https://picsum.photos/seed/' . $post['id'] . '/400/200';
+            $url = "?o=Blog&m=read&id={$post['id']}$t";
 
             $html .= <<<HTML
-            <article class="blog-card">
-                <a href="?o=Blog&m=read&id={$post['id']}$t" class="blog-card-image">
+            <article class="card-hover blog-item">
+                <a href="$url" class="blog-item-image">
                     <img src="$image" alt="$title" loading="lazy">
                 </a>
-                <div class="blog-card-content">
-                    <h3><a href="?o=Blog&m=read&id={$post['id']}$t">$title</a></h3>
-                    <p class="blog-card-excerpt">$excerpt</p>
-                    <p class="blog-card-meta">
-                        <span>$author</span> &bull; <span>$date</span>
-                    </p>
+                <div class="blog-item-content">
+                    <h3><a href="$url">$title</a></h3>
+                    <p class="blog-item-meta">$author &bull; $date</p>
+                    <p class="blog-item-excerpt">$excerpt</p>
                 </div>
             </article>
             HTML;
         }
 
         $html .= '</div>';
 
-        // Pagination
+        // Pagination (similar style to single page prev/next)
         $p = $a['pagination'];
         if ($p['pages'] > 1) {
-            $html .= '<div class="blog-pagination">';
-            if ($p['page'] > 1)
-                $html .= "<a href=\"?o=Blog&page=" . ($p['page'] - 1) . "$t\" class=\"btn\">« Newer</a>";
-            $html .= "<span>Page {$p['page']} of {$p['pages']}</span>";
-            if ($p['page'] < $p['pages'])
-                $html .= "<a href=\"?o=Blog&page=" . ($p['page'] + 1) . "$t\" class=\"btn\">Older »</a>";
+            $html .= '<div class="blog-nav">';
+            if ($p['page'] > 1) {
+                $html .= "<a href=\"?o=Blog&page=" . ($p['page'] - 1) . "$t\" class=\"blog-nav-prev\">« Newer Posts</a>";
+            } else {
+                $html .= '<span></span>';
+            }
+            $html .= "<span class=\"blog-nav-page\">Page {$p['page']} of {$p['pages']}</span>";
+            if ($p['page'] < $p['pages']) {
+                $html .= "<a href=\"?o=Blog&page=" . ($p['page'] + 1) . "$t\" class=\"blog-nav-next\">Older Posts »</a>";
+            }
             $html .= '</div>';
         }
 
@@ -90,7 +87,7 @@ public function read(): string
         $author = htmlspecialchars($a['author']);
         $date = date('F j, Y', strtotime($a['created']));
         $image = $a['featured_image']
-            ? "<img src=\"{$a['featured_image']}\" alt=\"$title\" class=\"blog-featured-image\">"
+            ? "<img src=\"{$a['featured_image']}\" alt=\"$title\" class=\"blog-featured-image\" style=\"float:right;width:33%;margin:0 0 1rem 1.5rem;border-radius:var(--radius-md);\">"
             : '';
 
         // Build category tags
@@ -109,25 +106,25 @@ public function read(): string
         $prevNext = '<div class="blog-nav">';
         if ($a['prev']) {
             $prevTitle = htmlspecialchars($a['prev']['title']);
-            $prevNext .= "<a href=\"?o=Blog&m=read&id={$a['prev']['id']}$t\" class=\"blog-nav-prev\"><span>« Previous</span><strong>$prevTitle</strong></a>";
+            $prevNext .= "<a href=\"?o=Blog&m=read&id={$a['prev']['id']}$t\" class=\"blog-nav-prev\">« $prevTitle</a>";
         } else {
             $prevNext .= '<span></span>';
         }
         if ($a['next']) {
             $nextTitle = htmlspecialchars($a['next']['title']);
-            $prevNext .= "<a href=\"?o=Blog&m=read&id={$a['next']['id']}$t\" class=\"blog-nav-next\"><span>Next »</span><strong>$nextTitle</strong></a>";
+            $prevNext .= "<a href=\"?o=Blog&m=read&id={$a['next']['id']}$t\" class=\"blog-nav-next\">$nextTitle »</a>";
         }
         $prevNext .= '</div>';
 
         return <<<HTML
+        $prevNext
         <article class="blog-single">
             <header class="blog-single-header">
                 <h1><a href="?o=Blog$t" class="back-arrow">«</a> $title</h1>
                 <p class="blog-single-meta">By $author &bull; $date</p>
                 $catTags
             </header>
-            $image
-            <div class="prose">$content</div>
+            <div class="prose">$image$content</div>
         </article>
         $prevNext
         HTML;
diff --git a/10-Htmx/src/Core/Ctx.php b/10-Htmx/src/Core/Ctx.php
@@ -17,7 +17,7 @@ final class Ctx
     public Db $db;
 
     // Centralized config
-    public int $perp = 10; // Items per page
+    public int $perp = 6; // Items per page
 
     public function __construct(
         public string $email = 'noreply@localhost',
diff --git a/10-Htmx/src/Plugins/Blog/BlogModel.php b/10-Htmx/src/Plugins/Blog/BlogModel.php
@@ -13,8 +13,6 @@
 
 final class BlogModel extends Plugin
 {
-    private const int DEFAULT_PER_PAGE = 9;
-
     private ?Db $dbh = null;
     private array $in = ['id' => 0];
 
@@ -32,7 +30,7 @@ public function __construct(
     public function list(): array
     {
         $page = filter_var($_REQUEST['page'] ?? 1, FILTER_VALIDATE_INT) ?: 1;
-        $perPage = self::DEFAULT_PER_PAGE;
+        $perPage = $this->ctx->perp;
         $offset = ($page - 1) * $perPage;
 
         $where = 'type = :type';
diff --git a/10-Htmx/src/Plugins/Blog/BlogView.php b/10-Htmx/src/Plugins/Blog/BlogView.php
@@ -25,13 +25,7 @@ public function list(): string
         $a = $this->a;
         $t = $this->t();
 
-        $html = <<<HTML
-        <div class="blog-header">
-            <h1>Blog</h1>
-            <p class="text-muted">Latest posts and updates</p>
-        </div>
-        <div class="blog-grid">
-        HTML;
+        $html = '<div class="blog-list">';
 
         foreach ($a['items'] as $post) {
             $title = htmlspecialchars($post['title']);
@@ -42,35 +36,35 @@ public function list(): string
             $url = "?o=Blog&m=read&id={$post['id']}$t";
 
             $html .= <<<HTML
-            <article class="blog-card">
-                <a href="$url" hx-get="$url" hx-target="#main" hx-push-url="true" class="blog-card-image">
+            <article class="card-hover blog-item">
+                <a href="$url" hx-get="$url" hx-target="#main" hx-push-url="true" class="blog-item-image">
                     <img src="$image" alt="$title" loading="lazy">
                 </a>
-                <div class="blog-card-content">
+                <div class="blog-item-content">
                     <h3><a href="$url" hx-get="$url" hx-target="#main" hx-push-url="true">$title</a></h3>
-                    <p class="blog-card-excerpt">$excerpt</p>
-                    <p class="blog-card-meta">
-                        <span>$author</span> &bull; <span>$date</span>
-                    </p>
+                    <p class="blog-item-meta">$author &bull; $date</p>
+                    <p class="blog-item-excerpt">$excerpt</p>
                 </div>
             </article>
             HTML;
         }
 
         $html .= '</div>';
 
-        // Pagination with htmx
+        // Pagination (similar style to single page prev/next)
         $p = $a['pagination'];
         if ($p['pages'] > 1) {
-            $html .= '<div class="blog-pagination">';
+            $html .= '<div class="blog-nav">';
             if ($p['page'] > 1) {
                 $prevUrl = "?o=Blog&page=" . ($p['page'] - 1) . $t;
-                $html .= "<a href=\"$prevUrl\" hx-get=\"$prevUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"btn\">« Newer</a>";
+                $html .= "<a href=\"$prevUrl\" hx-get=\"$prevUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"blog-nav-prev\">« Newer Posts</a>";
+            } else {
+                $html .= '<span></span>';
             }
-            $html .= "<span>Page {$p['page']} of {$p['pages']}</span>";
+            $html .= "<span class=\"blog-nav-page\">Page {$p['page']} of {$p['pages']}</span>";
             if ($p['page'] < $p['pages']) {
                 $nextUrl = "?o=Blog&page=" . ($p['page'] + 1) . $t;
-                $html .= "<a href=\"$nextUrl\" hx-get=\"$nextUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"btn\">Older »</a>";
+                $html .= "<a href=\"$nextUrl\" hx-get=\"$nextUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"blog-nav-next\">Older Posts »</a>";
             }
             $html .= '</div>';
         }
@@ -95,7 +89,7 @@ public function read(): string
         $author = htmlspecialchars($a['author']);
         $date = date('F j, Y', strtotime($a['created']));
         $image = $a['featured_image']
-            ? "<img src=\"{$a['featured_image']}\" alt=\"$title\" class=\"blog-featured-image\">"
+            ? "<img src=\"{$a['featured_image']}\" alt=\"$title\" class=\"blog-featured-image\" style=\"float:right;width:33%;margin:0 0 1rem 1.5rem;border-radius:var(--radius-md);\">"
             : '';
 
         // Build category tags
@@ -115,27 +109,27 @@ public function read(): string
         if ($a['prev']) {
             $prevTitle = htmlspecialchars($a['prev']['title']);
             $prevUrl = "?o=Blog&m=read&id={$a['prev']['id']}$t";
-            $prevNext .= "<a href=\"$prevUrl\" hx-get=\"$prevUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"blog-nav-prev\"><span>« Previous</span><strong>$prevTitle</strong></a>";
+            $prevNext .= "<a href=\"$prevUrl\" hx-get=\"$prevUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"blog-nav-prev\">« $prevTitle</a>";
         } else {
             $prevNext .= '<span></span>';
         }
         if ($a['next']) {
             $nextTitle = htmlspecialchars($a['next']['title']);
             $nextUrl = "?o=Blog&m=read&id={$a['next']['id']}$t";
-            $prevNext .= "<a href=\"$nextUrl\" hx-get=\"$nextUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"blog-nav-next\"><span>Next »</span><strong>$nextTitle</strong></a>";
+            $prevNext .= "<a href=\"$nextUrl\" hx-get=\"$nextUrl\" hx-target=\"#main\" hx-push-url=\"true\" class=\"blog-nav-next\">$nextTitle »</a>";
         }
         $prevNext .= '</div>';
 
         $backUrl = "?o=Blog$t";
         return <<<HTML
+        $prevNext
         <article class="blog-single">
             <header class="blog-single-header">
                 <h1><a href="$backUrl" hx-get="$backUrl" hx-target="#main" hx-push-url="true" class="back-arrow">«</a> $title</h1>
                 <p class="blog-single-meta">By $author &bull; $date</p>
                 $catTags
             </header>
-            $image
-            <div class="prose">$content</div>
+            <div class="prose">$image$content</div>
         </article>
         $prevNext
         HTML;
diff --git a/docs/base.css b/docs/base.css
@@ -1482,6 +1482,106 @@
         opacity: 1;
         text-decoration: none;
     }
+
+    /* === Blog Navigation (Prev/Next) === */
+    .blog-nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--space-4);
+        margin-block-end: var(--space-2);
+    }
+
+    .blog-nav a {
+        font-weight: 500;
+    }
+
+    .blog-nav-page {
+        color: var(--fg-muted);
+        font-size: var(--text-sm);
+    }
+
+    .blog-nav-next {
+        margin-inline-start: auto;
+    }
+
+    /* === Blog List (Index) === */
+    .blog-header {
+        margin-block-end: var(--space-6);
+    }
+
+    .blog-header h1 {
+        margin: 0;
+    }
+
+    .blog-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-6);
+    }
+
+    .blog-item {
+        display: flex;
+        gap: var(--space-6);
+    }
+
+    .blog-item-image {
+        flex-shrink: 0;
+        width: 200px;
+    }
+
+    .blog-item-image img {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+        border-radius: var(--radius-md);
+    }
+
+    .blog-item-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .blog-item-content h3 {
+        margin: 0 0 var(--space-2);
+    }
+
+    .blog-item-meta,
+    .blog-single-meta {
+        font-size: var(--text-sm);
+        font-style: italic;
+        color: var(--fg-muted);
+        margin: 0 0 var(--space-3);
+    }
+
+    .blog-item-excerpt {
+        margin: 0;
+        color: var(--fg-muted);
+    }
+
+    .blog-pagination {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--space-4);
+        margin-block-start: var(--space-8);
+    }
+
+    /* Mobile: stack image on top */
+    @media (max-width: 599px) {
+        .blog-item {
+            flex-direction: column;
+        }
+
+        .blog-item-image {
+            width: 100%;
+        }
+
+        .blog-item-image img {
+            height: 200px;
+        }
+    }
 }
 
 /* === Utilities === */
diff --git a/index.php b/index.php
@@ -10,7 +10,14 @@
 
     // Chapter pattern: /XX-Name/... -> /XX-Name/public/...
     if (preg_match('#^/(\d{2}-[^/]+)(/.*)?$#', $uri, $m) && is_dir($pub = __DIR__ . "/{$m[1]}/public")) {
-        if (is_file($f = $pub . ($m[2] ?? '/'))) return false;
+        if (is_file($f = $pub . ($m[2] ?? '/'))) {
+            // Serve static file with correct content type
+            $ext = pathinfo($f, PATHINFO_EXTENSION);
+            $types = ['css' => 'text/css', 'js' => 'text/javascript', 'webp' => 'image/webp',
+                      'png' => 'image/png', 'jpg' => 'image/jpeg', 'gif' => 'image/gif', 'svg' => 'image/svg+xml'];
+            header('Content-Type: ' . ($types[$ext] ?? mime_content_type($f)));
+            return readfile($f);
+        }
         $_SERVER['SCRIPT_NAME'] = "/{$m[1]}/public/index.php";
         return require "$pub/index.php";
     }

Original file line number	Diff line number	Diff line change
`@@ -13,8 +13,6 @@`
`13`	`13`
`14`	`14`	`final class BlogModel extends Plugin`
`15`	`15`	`{`
`16`		`- private const int DEFAULT_PER_PAGE = 9;`
`17`		`-`
`18`	`16`	`private ?Db $dbh = null;`
`19`	`17`	`private array $in = ['id' => 0];`
`20`	`18`
`@@ -32,7 +30,7 @@ public function __construct(`
`32`	`30`	`public function list(): array`
`33`	`31`	`{`
`34`	`32`	`$page = filter_var($_REQUEST['page'] ?? 1, FILTER_VALIDATE_INT) ?: 1;`
`35`		`- $perPage = self::DEFAULT_PER_PAGE;`
	`33`	`+ $perPage = $this->ctx->perp;`
`36`	`34`	`$offset = ($page - 1) * $perPage;`
`37`	`35`
`38`	`36`	`$where = 'type = :type';`