From 3af4ebfa294423cebac3e06065e968817d7e47a8 Mon Sep 17 00:00:00 2001
From: khondokartowsif171 <proyojonplus26@gmail.com>
Date: Tue, 26 May 2026 03:05:01 +0600
Subject: [PATCH] feat: BlogPage fetches posts from dashboard API with fallback

- Fetch published posts from /api/public/blog (10-min sessionStorage cache)
- Fall back to PORTFOLIO_DATA.blogArticles if API is unavailable or empty
- Preserves all existing display logic unchanged

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages.jsx | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/pages.jsx b/src/pages.jsx
index 3c37e2b..2e7906f 100644
--- a/src/pages.jsx
+++ b/src/pages.jsx
@@ -670,7 +670,30 @@ const BLOG_COLORS = {
 const BlogPage = () => {
   const D = PORTFOLIO_DATA;
   const [active, setActive] = React.useState(null);
-  const article = active ? D.blogArticles.find(a => a.slug === active) : null;
+  const [articles, setArticles] = React.useState(D.blogArticles || []);
+
+  React.useEffect(() => {
+    const CACHE_KEY = 'aura_blog_v1';
+    const CACHE_TTL = 10 * 60 * 1000;
+    try {
+      const cached = sessionStorage.getItem(CACHE_KEY);
+      if (cached) {
+        const { data, ts } = JSON.parse(cached);
+        if (Date.now() - ts < CACHE_TTL && data.length) { setArticles(data); return; }
+      }
+    } catch {}
+    fetch(`${DASHBOARD_API}/api/public/blog`, { signal: AbortSignal.timeout(3000) })
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (Array.isArray(data) && data.length) {
+          setArticles(data);
+          sessionStorage.setItem(CACHE_KEY, JSON.stringify({ data, ts: Date.now() }));
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  const article = active ? articles.find(a => a.slug === active) : null;
 
   if (article) {
     const c = BLOG_COLORS[article.color] || BLOG_COLORS.violet;
@@ -755,7 +778,7 @@ const BlogPage = () => {
       <section style={{ padding: "80px 0 120px" }}>
         <div className="container">
           <div style={{ display: "grid", gap: 20 }}>
-            {D.blogArticles.map((post, i) => {
+            {articles.map((post, i) => {
               const c = BLOG_COLORS[post.color] || BLOG_COLORS.violet;
               return (
                 <div