Add comics section: 43 comic strips with gallery page

src/layouts/Base.astro

@@ -422,6 +422,9 @@ const isHome = currentPath === '/';
         <li class={currentPath === '/blog' ? 'active' : ''}>
           <a href="/blog" class="menu-item">Blog</a>
         </li>
+        <li class={currentPath.startsWith('/comics') ? 'active' : ''}>
+          <a href="/comics" class="menu-item">Comics</a>
+        </li>
         <li class={currentPath === '/about-us' ? 'active' : ''}>
           <a href="/about-us" class="menu-item">About</a>
         </li>

src/pages/comics.astro

@@ -0,0 +1,72 @@
+---
+import Base from '../layouts/Base.astro';
+
+const comics = [
+  { num: 1, title: "Angry Owl", img: "1-0000-angry_web_1312217558.png" },
+  { num: 2, title: "The Boss and The Worker", img: "2-01-boss_and_the_worker-out_web_1312287061.png" },
+  { num: 4, title: "Bugfixin'", img: "4-03-whole-food-honey-out_web_1312377904.png" },
+  { num: 5, title: "Food Chain", img: "5-0007-bugs_web_1312448241.png" },
+  { num: 6, title: "Mono Development", img: "6-0008-food-chain_web_1312543561.png" },
+  { num: 7, title: "Boss and the Toilet Paper", img: "7-0009-mono_web_1312634072.png" },
+  { num: 8, title: "A Diagram", img: "8-0011-a-toilet-paper_web_1312711686.png" },
+  { num: 9, title: "Dimensionality of an Owl", img: "9-0001-a-diagram-web_web_1312798348.png" },
+  { num: 10, title: "QA Black Magic", img: "10-0002-owl-dimensionality-web_web_1312882080.png" },
+  { num: 11, title: "Dark Intellisense", img: "11-0003-qa-black-magic_web_web_1312973269.png" },
+  { num: 12, title: "Who Takes the Credit?", img: "12-0004-dark-intellisense_web_web_1313141785.png" },
+  { num: 13, title: "Ergonomic Chair", img: "13-0005-who-takes-the-credit_web_web_1313244880.png" },
+  { num: 14, title: "The Meaningful Deadline", img: "14-0006-ergonomic-chairs_web_web_1313244999.png" },
+  { num: 15, title: "Green Productivity", img: "15-0007-the-meaningful-deadline_web_web_1313685127.png" },
+  { num: 16, title: "From Scratch", img: "16-0008-green-productivity_web_web_1314037931.png" },
+  { num: 17, title: "A Reward", img: "17-0009-from-scratch_web_web_1314809417.png" },
+  { num: 18, title: "Hard Discipline", img: "18-0010-a-reward_web_web_1316015834.png" },
+  { num: 19, title: "Breaking the NDA", img: "19-0011-hard-discipline_web_web_1318625423.png" },
+  { num: 20, title: "Thorough NDA", img: "20-0012-breaking-the-nda-web_web_1321141101.png" },
+  { num: 21, title: "Santa Courier", img: "21-0013-thorough-nda-web_web_1321359683.png" },
+  { num: 22, title: "Write It A Thousand Times", img: "22-0014-santa-courier-web_web_1322411181.png" },
+  { num: 23, title: "Touch The Tiles", img: "23-0015-write-it-a-thousand-times-web_web_1322855667.png" },
+  { num: 24, title: "Lazy Evaluation", img: "24-0016-touch-the-tiles-web_web_1323309221.png" },
+  { num: 25, title: "Replacement With A Script", img: "25-0017-lazy-evaluation-web_web_1323736761.png" },
+  { num: 26, title: "Human Resources", img: "26-0018-replacement-with-a-script-web_web_1324658954.png" },
+  { num: 27, title: "Nonstop Dev Team", img: "27-0019-human-resources-web_web_1325082644.png" },
+  { num: 28, title: "LSD", img: "28-0020-nonstop-dev-team_web_web_1330007563.png" },
+  { num: 29, title: "The Badge of Shame", img: "29-0021-lsd_web_web_1335527057.png" },
+  { num: 30, title: "Bloody Cartridge", img: "30-0022-badge-of-shame-web_web_1336135809.png" },
+  { num: 31, title: "From the Ground Up", img: "31-0023-bloody-cartridge-web_web_1336498077.png" },
+  { num: 32, title: "Boxed Office", img: "32-0024-from-the-ground-up-web_web_1336955366.png" },
+  { num: 33, title: "PET Scanner", img: "33-0025-boxed-office-web_web_1337198604.png" },
+  { num: 34, title: "Skyscraper", img: "34-0026-pet-scanner-web_web_1337979080.png" },
+  { num: 35, title: "Coin Machine", img: "35-0027-skyscraper-web_web_1338077520.png" },
+  { num: 36, title: "Amphetamine Coffee", img: "36-0028-coin-machine-web_web_1338424277.png" },
+  { num: 37, title: "Office Animals", img: "37-0029-amphetamine-coffee-web_web_1338592639.png" },
+  { num: 38, title: "Project Triangle", img: "38-0030-office-animals-web_web_1339281061.png" },
+  { num: 39, title: "Investment Cloud", img: "39-0031-project-triangle-web_web_1340062832.png" },
+  { num: 40, title: "The Smoker", img: "40-0032-investment-cloud-web_web_1340911880.png" },
+  { num: 41, title: "The Assassin", img: "41-0033-the-smoker-web_web_1346260357.png" },
+  { num: 42, title: "Extra Dimension", img: "42-0034-the-assassin-web_web_1349211995.png" },
+  { num: 43, title: "Budget Cuts", img: "43-0035-extra-dimension-web_web_1352715455.png" },
+];
+---
+<Base title="Component Owl's Comics" description="Truth-inspired web comics for puny human developers!" keywords="comics, comic strips, developers, programming humor">
+  <div class="content-area">
+    <h1>Component Owl's Comics</h1>
+    <p class="comics-subtitle">Truth-inspired web comics for puny human developers!</p>
+    <div class="comics-grid">
+      {comics.map((comic) => (
+        <a href={`/comics/${comic.num}`} class="comic-card">
+          <img src={`/comics/${comic.img}`} alt={comic.title} loading="lazy" />
+          <span class="comic-title">#{comic.num}: {comic.title}</span>
+        </a>
+      ))}
+    </div>
+  </div>
+
+  <style>
+    .content-area { max-width: 960px; margin: 0 auto; padding: 20px; }
+    .comics-subtitle { color: #666; margin-bottom: 20px; }
+    .comics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
+    .comic-card { display: block; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; text-decoration: none; transition: box-shadow 0.2s; }
+    .comic-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+    .comic-card img { width: 100%; height: auto; display: block; }
+    .comic-title { display: block; padding: 8px 12px; font-size: 14px; color: #333; background: #f9f9f9; }
+  </style>
+</Base>