Latest Updated Pages
E2E Test Suite / Critical User Journeys (push) Has been skipped
E2E Test Suite / API Integration Tests (push) Has been skipped
Deploy to Production / Build & Verify (push) Failing after 13s
Ping Search Engines / Notify Search Engines (push) Successful in 3s
Deploy to Production / Pre-Deploy Tests (push) Has been skipped
Deploy to Production / Deploy to Railway (push) Has been skipped
Deploy to Production / Deploy to Render (push) Has been skipped
Deploy to Production / Deploy to VPS (PM2) (push) Has been skipped
Deploy to Production / Deploy to Fly.io (push) Has been skipped
Deploy to Production / Post-Deploy Verification (push) Has been skipped
Deploy to Production / Notify on Failure (push) Successful in 1s
E2E Test Suite / Smoke Tests (P0) (push) Failing after 9m36s
E2E Test Suite / Form Interaction Tests (push) Failing after 12m6s
E2E Test Suite / Destructive & Chaos Tests (push) Failing after 11m46s
E2E Test Suite / Cross-Browser Regression (chromium) (push) Failing after 9m31s
E2E Test Suite / Cross-Browser Regression (firefox) (push) Failing after 11m5s
E2E Test Suite / Cross-Browser Regression (webkit) (push) Failing after 15m24s
E2E Test Suite / Security Header Tests (push) Failing after 7m55s
E2E Test Suite / Test Report Summary (push) Failing after 6s
E2E Test Suite / Mobile Device Tests (push) Failing after 3h12m28s
Uptime Monitor / Health & Response Time (push) Successful in 5s
Uptime Monitor / SSL Certificate (push) Successful in 3s
Uptime Monitor / Send Alerts (push) Has been skipped
Uptime Monitor / Record Uptime Success (push) Successful in 2s
E2E Test Suite / Critical User Journeys (push) Has been skipped
E2E Test Suite / API Integration Tests (push) Has been skipped
Deploy to Production / Build & Verify (push) Failing after 13s
Ping Search Engines / Notify Search Engines (push) Successful in 3s
Deploy to Production / Pre-Deploy Tests (push) Has been skipped
Deploy to Production / Deploy to Railway (push) Has been skipped
Deploy to Production / Deploy to Render (push) Has been skipped
Deploy to Production / Deploy to VPS (PM2) (push) Has been skipped
Deploy to Production / Deploy to Fly.io (push) Has been skipped
Deploy to Production / Post-Deploy Verification (push) Has been skipped
Deploy to Production / Notify on Failure (push) Successful in 1s
E2E Test Suite / Smoke Tests (P0) (push) Failing after 9m36s
E2E Test Suite / Form Interaction Tests (push) Failing after 12m6s
E2E Test Suite / Destructive & Chaos Tests (push) Failing after 11m46s
E2E Test Suite / Cross-Browser Regression (chromium) (push) Failing after 9m31s
E2E Test Suite / Cross-Browser Regression (firefox) (push) Failing after 11m5s
E2E Test Suite / Cross-Browser Regression (webkit) (push) Failing after 15m24s
E2E Test Suite / Security Header Tests (push) Failing after 7m55s
E2E Test Suite / Test Report Summary (push) Failing after 6s
E2E Test Suite / Mobile Device Tests (push) Failing after 3h12m28s
Uptime Monitor / Health & Response Time (push) Successful in 5s
Uptime Monitor / SSL Certificate (push) Successful in 3s
Uptime Monitor / Send Alerts (push) Has been skipped
Uptime Monitor / Record Uptime Success (push) Successful in 2s
This commit is contained in:
@@ -1,19 +1,20 @@
|
||||
---
|
||||
import { getCollection, type CollectionEntry } from 'astro:content';
|
||||
import { getEntry } from 'astro:content';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import SEO from '../../components/SEO.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog', ({ data }) => !data.draft);
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: { post },
|
||||
}));
|
||||
const { slug } = Astro.params;
|
||||
|
||||
if (!slug) {
|
||||
return Astro.redirect('/blog');
|
||||
}
|
||||
|
||||
type Props = { post: CollectionEntry<'blog'> };
|
||||
const post = await getEntry('blog', slug);
|
||||
|
||||
if (!post || post.data.draft) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
|
||||
function getReadingTime(content: string): number {
|
||||
@@ -61,7 +62,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
wordCount: post.body.split(/\s+/).length
|
||||
}}
|
||||
/>
|
||||
<article class="bg-white">
|
||||
<article class="bg-white dark:bg-secondary-900">
|
||||
<!-- Hero Section -->
|
||||
<header class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-16 md:py-24 overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
@@ -141,7 +142,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
alt={post.data.title}
|
||||
width="1200"
|
||||
height="675"
|
||||
class="w-full aspect-video object-cover rounded-2xl shadow-2xl bg-secondary-200"
|
||||
class="w-full aspect-video object-cover rounded-2xl shadow-2xl bg-secondary-200 dark:bg-secondary-700"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
@@ -155,14 +156,14 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
<!-- Social Share Sidebar (Desktop) -->
|
||||
<aside class="hidden lg:block w-16 flex-shrink-0">
|
||||
<div class="sticky top-24 flex flex-col gap-3">
|
||||
<span class="text-xs text-secondary-400 font-medium mb-1">Share</span>
|
||||
<span class="text-xs text-secondary-400 dark:text-secondary-500 font-medium mb-1">Share</span>
|
||||
|
||||
<!-- Twitter/X -->
|
||||
<a
|
||||
href={`https://twitter.com/intent/tweet?url=${shareUrl}&text=${shareTitle}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 hover:bg-[#1DA1F2] text-secondary-600 hover:text-white flex items-center justify-center transition-colors"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 dark:bg-secondary-800 hover:bg-[#1DA1F2] text-secondary-600 dark:text-secondary-400 hover:text-white flex items-center justify-center transition-colors"
|
||||
aria-label="Share on Twitter"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
@@ -175,7 +176,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 hover:bg-[#0A66C2] text-secondary-600 hover:text-white flex items-center justify-center transition-colors"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 dark:bg-secondary-800 hover:bg-[#0A66C2] text-secondary-600 dark:text-secondary-400 hover:text-white flex items-center justify-center transition-colors"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
@@ -188,7 +189,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 hover:bg-[#1877F2] text-secondary-600 hover:text-white flex items-center justify-center transition-colors"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 dark:bg-secondary-800 hover:bg-[#1877F2] text-secondary-600 dark:text-secondary-400 hover:text-white flex items-center justify-center transition-colors"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
@@ -200,7 +201,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
<button
|
||||
type="button"
|
||||
id="copy-link-btn"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 hover:bg-primary-500 text-secondary-600 hover:text-white flex items-center justify-center transition-colors"
|
||||
class="w-10 h-10 rounded-full bg-secondary-100 dark:bg-secondary-800 hover:bg-primary-500 text-secondary-600 dark:text-secondary-400 hover:text-white flex items-center justify-center transition-colors"
|
||||
aria-label="Copy link"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -213,28 +214,28 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-wrap gap-2 mb-8 pb-8 border-b border-secondary-200">
|
||||
<div class="flex flex-wrap gap-2 mb-8 pb-8 border-b border-secondary-200 dark:border-secondary-700">
|
||||
{post.data.tags.map((tag) => (
|
||||
<span class="px-3 py-1 bg-secondary-100 text-secondary-600 text-sm rounded-full hover:bg-secondary-200 transition-colors">
|
||||
<span class="px-3 py-1 bg-secondary-100 dark:bg-secondary-800 text-secondary-600 dark:text-secondary-400 text-sm rounded-full hover:bg-secondary-200 dark:hover:bg-secondary-700 transition-colors">
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Article Content -->
|
||||
<div class="prose prose-lg max-w-none prose-headings:text-secondary-900 prose-headings:font-bold prose-p:text-secondary-700 prose-a:text-primary-600 prose-a:no-underline hover:prose-a:underline prose-strong:text-secondary-900 prose-code:text-primary-700 prose-code:bg-primary-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:font-mono prose-code:before:content-none prose-code:after:content-none prose-pre:bg-secondary-900 prose-pre:text-secondary-100 prose-pre:rounded-xl prose-pre:shadow-lg prose-img:rounded-xl prose-img:shadow-md prose-blockquote:border-primary-500 prose-blockquote:bg-primary-50 prose-blockquote:rounded-r-lg prose-blockquote:py-1 prose-blockquote:not-italic prose-li:marker:text-primary-500">
|
||||
<div class="prose prose-lg max-w-none prose-headings:text-secondary-900 prose-headings:font-bold prose-p:text-secondary-700 prose-a:text-primary-600 prose-a:no-underline hover:prose-a:underline prose-strong:text-secondary-900 prose-code:text-primary-700 prose-code:bg-primary-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:font-mono prose-code:before:content-none prose-code:after:content-none prose-pre:bg-secondary-900 prose-pre:text-secondary-100 prose-pre:rounded-xl prose-pre:shadow-lg prose-img:rounded-xl prose-img:shadow-md prose-blockquote:border-primary-500 prose-blockquote:bg-primary-50 prose-blockquote:rounded-r-lg prose-blockquote:py-1 prose-blockquote:not-italic prose-li:marker:text-primary-500 dark:prose-headings:text-secondary-100 dark:prose-p:text-secondary-300 dark:prose-a:text-primary-400 dark:prose-strong:text-secondary-100 dark:prose-code:text-primary-300 dark:prose-code:bg-primary-900/30 dark:prose-blockquote:bg-primary-900/20 dark:prose-blockquote:border-primary-400 dark:prose-li:marker:text-primary-400">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- Mobile Social Share -->
|
||||
<div class="lg:hidden mt-12 pt-8 border-t border-secondary-200">
|
||||
<p class="text-sm text-secondary-500 font-medium mb-4">Share this article</p>
|
||||
<div class="lg:hidden mt-12 pt-8 border-t border-secondary-200 dark:border-secondary-700">
|
||||
<p class="text-sm text-secondary-500 dark:text-secondary-400 font-medium mb-4">Share this article</p>
|
||||
<div class="flex gap-3">
|
||||
<a
|
||||
href={`https://twitter.com/intent/tweet?url=${shareUrl}&text=${shareTitle}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex-1 py-3 rounded-lg bg-secondary-100 hover:bg-[#1DA1F2] text-secondary-600 hover:text-white flex items-center justify-center gap-2 transition-colors"
|
||||
class="flex-1 py-3 rounded-lg bg-secondary-100 dark:bg-secondary-800 hover:bg-[#1DA1F2] text-secondary-600 dark:text-secondary-400 hover:text-white flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
@@ -245,7 +246,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
href={`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex-1 py-3 rounded-lg bg-secondary-100 hover:bg-[#0A66C2] text-secondary-600 hover:text-white flex items-center justify-center gap-2 transition-colors"
|
||||
class="flex-1 py-3 rounded-lg bg-secondary-100 dark:bg-secondary-800 hover:bg-[#0A66C2] text-secondary-600 dark:text-secondary-400 hover:text-white flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||
@@ -255,7 +256,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
<button
|
||||
type="button"
|
||||
id="copy-link-btn-mobile"
|
||||
class="flex-1 py-3 rounded-lg bg-secondary-100 hover:bg-primary-500 text-secondary-600 hover:text-white flex items-center justify-center gap-2 transition-colors"
|
||||
class="flex-1 py-3 rounded-lg bg-secondary-100 dark:bg-secondary-800 hover:bg-primary-500 text-secondary-600 dark:text-secondary-400 hover:text-white flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
@@ -266,15 +267,15 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
</div>
|
||||
|
||||
<!-- Author Bio -->
|
||||
<div class="mt-12 p-6 bg-secondary-50 rounded-2xl">
|
||||
<div class="mt-12 p-6 bg-secondary-50 dark:bg-secondary-800 rounded-2xl">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
||||
{post.data.author.name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-secondary-500 mb-1">Written by</p>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-2">{post.data.author.name}</h3>
|
||||
<p class="text-secondary-600">
|
||||
<p class="text-sm text-secondary-500 dark:text-secondary-400 mb-1">Written by</p>
|
||||
<h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mb-2">{post.data.author.name}</h3>
|
||||
<p class="text-secondary-600 dark:text-secondary-400">
|
||||
A passionate technologist sharing insights on modern software development, cloud architecture, and digital innovation.
|
||||
</p>
|
||||
</div>
|
||||
@@ -285,7 +286,7 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
<div class="mt-8">
|
||||
<a
|
||||
href="/blog"
|
||||
class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-medium transition-colors"
|
||||
class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
@@ -327,6 +328,23 @@ const shareDescription = encodeURIComponent(post.data.description);
|
||||
.prose pre .string { color: #a5d6ff; }
|
||||
.prose pre .function { color: #d2a8ff; }
|
||||
.prose pre .number { color: #79c0ff; }
|
||||
|
||||
/* Dark mode: override prose hr color */
|
||||
html.dark .prose hr {
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
/* Dark mode: table borders */
|
||||
html.dark .prose table thead {
|
||||
border-bottom-color: #334155;
|
||||
}
|
||||
html.dark .prose table tbody tr {
|
||||
border-bottom-color: #1e293b;
|
||||
}
|
||||
html.dark .prose table th,
|
||||
html.dark .prose table td {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
+25
-18
@@ -53,7 +53,7 @@ function formatDate(date: Date): string {
|
||||
</section>
|
||||
|
||||
<!-- Category Filter -->
|
||||
<section class="bg-secondary-50 border-b border-secondary-200">
|
||||
<section class="bg-secondary-50 dark:bg-secondary-900 border-b border-secondary-200 dark:border-secondary-700">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div class="flex flex-wrap gap-2 justify-center" role="tablist" aria-label="Filter posts by category">
|
||||
{categories.map((category, index) => (
|
||||
@@ -66,7 +66,7 @@ function formatDate(date: Date): string {
|
||||
'filter-btn px-4 py-2 rounded-full text-sm font-medium transition-all duration-200',
|
||||
index === 0
|
||||
? 'bg-primary-500 text-white'
|
||||
: 'bg-white text-secondary-600 hover:bg-secondary-100 border border-secondary-200',
|
||||
: 'bg-white dark:bg-secondary-800 text-secondary-600 dark:text-secondary-400 hover:bg-secondary-100 dark:hover:bg-secondary-700 border border-secondary-200 dark:border-secondary-600',
|
||||
]}
|
||||
>
|
||||
{category}
|
||||
@@ -77,18 +77,18 @@ function formatDate(date: Date): string {
|
||||
</section>
|
||||
|
||||
<!-- Blog Posts Grid -->
|
||||
<section class="py-16 bg-white">
|
||||
<section class="py-16 bg-white dark:bg-secondary-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="posts-grid">
|
||||
{sortedPosts.map((post) => {
|
||||
const readingTime = getReadingTime(post.body);
|
||||
return (
|
||||
<article
|
||||
class="post-card group bg-white rounded-2xl shadow-lg overflow-hidden border border-secondary-100 hover:shadow-xl hover:border-primary-200 transition-all duration-300"
|
||||
class="post-card group bg-white dark:bg-secondary-800 rounded-2xl shadow-lg overflow-hidden border border-secondary-100 dark:border-secondary-700 hover:shadow-xl hover:border-primary-200 dark:hover:border-primary-500 transition-all duration-300"
|
||||
data-category={post.data.category}
|
||||
>
|
||||
<!-- Post Image -->
|
||||
<a href={`/blog/${post.slug}`} class="block aspect-video overflow-hidden bg-secondary-200">
|
||||
<a href={`/blog/${post.slug}`} class="block aspect-video overflow-hidden bg-secondary-200 dark:bg-secondary-700">
|
||||
{post.data.heroImage ? (
|
||||
<img
|
||||
src={post.data.heroImage}
|
||||
@@ -112,10 +112,10 @@ function formatDate(date: Date): string {
|
||||
<div class="p-6">
|
||||
<!-- Category & Reading Time -->
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<span class="px-3 py-1 bg-primary-50 text-primary-700 text-xs font-semibold rounded-full">
|
||||
<span class="px-3 py-1 bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-xs font-semibold rounded-full">
|
||||
{post.data.category}
|
||||
</span>
|
||||
<span class="text-secondary-400 text-sm flex items-center gap-1">
|
||||
<span class="text-secondary-400 dark:text-secondary-500 text-sm flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@@ -124,33 +124,33 @@ function formatDate(date: Date): string {
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h2 class="text-xl font-bold text-secondary-900 mb-3 line-clamp-2 group-hover:text-primary-600 transition-colors">
|
||||
<h2 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mb-3 line-clamp-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
|
||||
</h2>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-secondary-600 text-sm mb-4 line-clamp-3">
|
||||
<p class="text-secondary-600 dark:text-secondary-400 text-sm mb-4 line-clamp-3">
|
||||
{post.data.description}
|
||||
</p>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
{post.data.tags.slice(0, 3).map((tag) => (
|
||||
<span class="text-xs text-secondary-500 bg-secondary-100 px-2 py-1 rounded">
|
||||
<span class="text-xs text-secondary-500 dark:text-secondary-400 bg-secondary-100 dark:bg-secondary-700 px-2 py-1 rounded">
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Author & Date -->
|
||||
<div class="flex items-center justify-between pt-4 border-t border-secondary-100">
|
||||
<div class="flex items-center justify-between pt-4 border-t border-secondary-100 dark:border-secondary-700">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white text-sm font-bold">
|
||||
{post.data.author.name.charAt(0)}
|
||||
</div>
|
||||
<span class="text-sm text-secondary-600">{post.data.author.name}</span>
|
||||
<span class="text-sm text-secondary-600 dark:text-secondary-400">{post.data.author.name}</span>
|
||||
</div>
|
||||
<time class="text-sm text-secondary-400" datetime={post.data.pubDate.toISOString()}>
|
||||
<time class="text-sm text-secondary-400 dark:text-secondary-500" datetime={post.data.pubDate.toISOString()}>
|
||||
{formatDate(post.data.pubDate)}
|
||||
</time>
|
||||
</div>
|
||||
@@ -162,11 +162,11 @@ function formatDate(date: Date): string {
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="empty-state" class="hidden text-center py-16">
|
||||
<svg class="w-16 h-16 text-secondary-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-16 h-16 text-secondary-300 dark:text-secondary-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z" />
|
||||
</svg>
|
||||
<h3 class="text-xl font-semibold text-secondary-600 mb-2">No posts found</h3>
|
||||
<p class="text-secondary-400">Try selecting a different category.</p>
|
||||
<h3 class="text-xl font-semibold text-secondary-600 dark:text-secondary-400 mb-2">No posts found</h3>
|
||||
<p class="text-secondary-400 dark:text-secondary-500">Try selecting a different category.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -180,14 +180,21 @@ function formatDate(date: Date): string {
|
||||
filterButtons.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const category = btn.getAttribute('data-category');
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
|
||||
// Update button states
|
||||
filterButtons.forEach((b) => {
|
||||
b.classList.remove('bg-primary-500', 'text-white');
|
||||
b.classList.add('bg-white', 'text-secondary-600', 'border', 'border-secondary-200');
|
||||
if (isDark) {
|
||||
b.classList.add('bg-secondary-800', 'text-secondary-400', 'border', 'border-secondary-600');
|
||||
b.classList.remove('bg-white', 'text-secondary-600', 'border-secondary-200');
|
||||
} else {
|
||||
b.classList.add('bg-white', 'text-secondary-600', 'border', 'border-secondary-200');
|
||||
b.classList.remove('bg-secondary-800', 'text-secondary-400', 'border-secondary-600');
|
||||
}
|
||||
b.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
btn.classList.remove('bg-white', 'text-secondary-600', 'border', 'border-secondary-200');
|
||||
btn.classList.remove('bg-white', 'bg-secondary-800', 'text-secondary-600', 'text-secondary-400', 'border', 'border-secondary-200', 'border-secondary-600');
|
||||
btn.classList.add('bg-primary-500', 'text-white');
|
||||
btn.setAttribute('aria-selected', 'true');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user