diff --git a/src/components/Sections/Blog.css b/src/components/Sections/Blog.css index 60cca53..ff8fc7e 100644 --- a/src/components/Sections/Blog.css +++ b/src/components/Sections/Blog.css @@ -1088,20 +1088,30 @@ margin: 0; } +.toc-item-wrap { + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.toc-item-wrap:last-child { + border-bottom: none; +} + .toc-item { display: flex; align-items: flex-start; gap: 0.75rem; + width: 100%; padding: 0.75rem 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); + margin: 0; + background: none; + border: none; cursor: pointer; + text-align: left; + font: inherit; + color: inherit; transition: all 0.2s; } -.toc-item:last-child { - border-bottom: none; -} - .toc-item:hover { padding-left: 0.5rem; } @@ -1114,6 +1124,12 @@ color: #ffffff; } +.toc-item:focus-visible { + outline: 2px solid rgba(69, 89, 220, 0.6); + outline-offset: 2px; + border-radius: 4px; +} + .toc-number { font-size: 0.75rem; font-weight: 700; @@ -1140,6 +1156,7 @@ .content-section { margin-bottom: 3rem; + scroll-margin-top: 100px; } .section-heading { diff --git a/src/components/Sections/BlogDetail.jsx b/src/components/Sections/BlogDetail.jsx index 2a4ae1b..c55226d 100644 --- a/src/components/Sections/BlogDetail.jsx +++ b/src/components/Sections/BlogDetail.jsx @@ -62,34 +62,33 @@ const BlogDetail = () => { ); } - // ✅ Normalized content - const content = { - toc: blog.content?.toc ?? [ - "Introduction", - "Overview", - "Key Points", - "Analysis", - "Conclusion", - ], - sections: blog.content?.sections ?? [ - { - heading: "Introduction", - text: - blog.excerpt || - "This article provides insights into the latest cryptocurrency trends.", - }, - { - heading: "Overview", - text: "This article is currently being prepared with detailed analysis and insights.", - }, - ], + // Sections are the single source of truth for body + TOC (avoids toc/section count mismatches) + const sections = + blog.content?.sections?.length > 0 + ? blog.content.sections + : [ + { + heading: "Introduction", + text: + blog.excerpt || + "This article provides insights into the latest cryptocurrency trends.", + }, + { + heading: "Overview", + text: + "This article is currently being prepared with detailed analysis and insights.", + }, + ]; + + const scrollToSection = (index) => { + document + .getElementById(`blog-section-${index}`) + ?.scrollIntoView({ behavior: "smooth", block: "start" }); }; // Demo views const views = Math.floor(Math.random() * 2000) + 500; - // Handlers - // Handlers const handleBookmark = async () => { if (!currentUser) { toast.error("Please login to bookmark articles"); @@ -197,12 +196,18 @@ const BlogDetail = () => {

Contents

@@ -215,8 +220,12 @@ const BlogDetail = () => { initial={{ opacity: 0 }} animate={{ opacity: 1 }} > - {content.sections.map((section, i) => ( -
+ {sections.map((section, i) => ( +

{section.heading}

{section.text}

diff --git a/src/data/blogData.js b/src/data/blogData.js index 7b563c8..3cb1657 100644 --- a/src/data/blogData.js +++ b/src/data/blogData.js @@ -43,7 +43,6 @@ export const generateBlogPosts = () => { isFeatured: true, gradient: "linear-gradient(135deg, #4559DC30, #22c55e20)", content: { - toc: ["Market Overview", "On-chain Metrics", "Supply Dynamics", "Price Action Analysis", "Forward Outlook"], sections: [ { heading: "Market Overview", @@ -56,6 +55,14 @@ export const generateBlogPosts = () => { { heading: "Supply Dynamics", text: "The percentage of supply held in profit has recovered to 85%, indicating most holders remain in profit despite recent volatility. Realized capitalization growth suggests organic capital inflow rather than speculative trading." + }, + { + heading: "Price Action Analysis", + text: "Bitcoin is testing key structural levels as volume profiles show accumulation near current prices. The Vector models highlight a narrowing range that often precedes a directional expansion." + }, + { + heading: "Forward Outlook", + text: "Institutional flows and holder behavior suggest patience is warranted; the next major move will likely align with macro liquidity and ETF flow trends. We continue to monitor exchange balances and realized cap for confirmation signals." } ] } @@ -73,7 +80,6 @@ export const generateBlogPosts = () => { isFeatured: true, gradient: "linear-gradient(135deg, #22c55e30, #9d4edd20)", content: { - toc: ["Weekly Summary", "Exchange Flows", "Miner Activity", "Network Health", "Trading Volume"], sections: [ { heading: "Weekly Summary", @@ -82,6 +88,18 @@ export const generateBlogPosts = () => { { heading: "Exchange Flows", text: "Major exchanges recorded significant outflows, particularly from institutional custody solutions. This suggests accumulation by long-term investors despite uncertain price action." + }, + { + heading: "Miner Activity", + text: "Hash rate remains near all-time highs while miner revenue holds steady post-difficulty adjustment. Selling pressure from miners has been orderly relative to prior cycles." + }, + { + heading: "Network Health", + text: "Block times and mempool congestion are within normal ranges. Node count and geographic distribution continue to support a resilient network topology." + }, + { + heading: "Trading Volume", + text: "Spot volumes are stable week-over-week; derivatives open interest declined slightly as leverage resets. On-chain transfer volume remains consistent with consolidation rather than distribution." } ] } @@ -99,7 +117,6 @@ export const generateBlogPosts = () => { isFeatured: true, gradient: "linear-gradient(135deg, #9d4edd30, #f59e0b20)", content: { - toc: ["Volatility Analysis", "Options Positioning", "Liquidity Conditions", "Market Sentiment", "Risk Assessment"], sections: [ { heading: "Volatility Analysis", @@ -108,6 +125,18 @@ export const generateBlogPosts = () => { { heading: "Options Positioning", text: "Dealer gamma exposure is turning positive near current price levels, creating potential for accelerated moves should key technical levels break." + }, + { + heading: "Liquidity Conditions", + text: "Order book depth has improved versus late December, though weekend liquidity remains thinner. Stablecoin balances on exchanges provide a modest buffer for large clips." + }, + { + heading: "Market Sentiment", + text: "Funding rates are neutral to slightly positive; social sentiment indicators show cautious optimism without euphoria typical of late-cycle tops." + }, + { + heading: "Risk Assessment", + text: "Key risks include macro surprises and sudden deleveraging in perpetual markets. Position sizing and defined risk remain prudent given compressed volatility regimes." } ] }