--- // The key change is moving the MiniKnowledgeGraph component BEFORE the tags section // and styling it properly with clear z-index values to ensure proper display import BaseLayout from '../layouts/BaseLayout.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; import Newsletter from '../components/Newsletter.astro'; import MiniKnowledgeGraph from '../components/MiniKnowledgeGraph.astro'; import { getCollection } from 'astro:content'; interface Props { frontmatter: { title: string; description?: string; pubDate: Date; updatedDate?: Date; heroImage?: string; category?: string; tags?: string[]; readTime?: string; draft?: boolean; author?: string; github?: string; live?: string; technologies?: string[]; related_posts?: string[]; // Explicit related posts by slug } } const { frontmatter } = Astro.props; // Format dates const formattedPubDate = frontmatter.pubDate ? new Date(frontmatter.pubDate).toLocaleDateString('en-us', { year: 'numeric', month: 'long', day: 'numeric', }) : 'N/A'; const formattedUpdatedDate = frontmatter.updatedDate ? new Date(frontmatter.updatedDate).toLocaleDateString('en-us', { year: 'numeric', month: 'long', day: 'numeric', }) : null; // Default image if heroImage is missing const displayImage = frontmatter.heroImage || '/images/placeholders/default.jpg'; // Get related posts for MiniKnowledgeGraph // First get all posts const allPosts = await getCollection('posts').catch(error => { console.error('Error fetching posts collection:', error); return []; }); // Try blog collection if posts collection doesn't exist const blogPosts = allPosts.length === 0 ? await getCollection('blog').catch(() => []) : []; const combinedPosts = [...allPosts, ...blogPosts]; // Find the current post in collection const currentPost = combinedPosts.find(post => post.data.title === frontmatter.title || post.slug === frontmatter.title.toLowerCase().replace(/\s+/g, '-') ); // Get related posts - first from explicit frontmatter relation, then by tag similarity let relatedPosts = []; // If related_posts is specified in frontmatter, use those first if (frontmatter.related_posts && frontmatter.related_posts.length > 0) { const explicitRelatedPosts = combinedPosts.filter(post => frontmatter.related_posts.includes(post.slug) ); relatedPosts = [...explicitRelatedPosts]; } // If we need more related posts, find them by tags if (relatedPosts.length < 3 && frontmatter.tags && frontmatter.tags.length > 0) { // Calculate tag similarity score for each post const tagSimilarityPosts = combinedPosts .filter(post => // Filter out current post and already included related posts post.data.title !== frontmatter.title && !relatedPosts.some(rp => rp.slug === post.slug) ) .map(post => { // Count matching tags const postTags = post.data.tags || []; const matchingTags = postTags.filter(tag => frontmatter.tags.includes(tag) ); return { post, score: matchingTags.length }; }) .filter(item => item.score > 0) // Only consider posts with at least one matching tag .sort((a, b) => b.score - a.score) // Sort by score descending .map(item => item.post); // Extract just the post // Add tag-related posts to fill up to 3 related posts relatedPosts = [...relatedPosts, ...tagSimilarityPosts.slice(0, 3 - relatedPosts.length)]; } // Limit to 3 related posts relatedPosts = relatedPosts.slice(0, 3); // Check if we can show the Knowledge Graph const showKnowledgeGraph = currentPost || (frontmatter.tags?.length > 0 || relatedPosts.length > 0); // Create fallback data if current post is missing const fallbackCurrentPost = currentPost || { slug: frontmatter.title.toLowerCase().replace(/\s+/g, '-'), data: { title: frontmatter.title, tags: frontmatter.tags || [], category: frontmatter.category || 'Uncategorized' } }; ---
{/* Display Draft Badge First */} {frontmatter.draft && DRAFT} {/* Title */}

{frontmatter.title}

{/* Description */} {frontmatter.description &&

{frontmatter.description}

} {/* Metadata (Date, Read Time) */}
Published {formattedPubDate} {formattedUpdatedDate && ( (Updated {formattedUpdatedDate}) )} {frontmatter.readTime && {frontmatter.readTime}}
{/* Debug information */}

Debug Info:

ShowKnowledgeGraph: {showKnowledgeGraph ? 'true' : 'false'}

CurrentPost exists: {currentPost ? 'yes' : 'no'}

Has Tags: {frontmatter.tags?.length > 0 ? 'yes' : 'no'}

Has Related Posts: {relatedPosts.length > 0 ? 'yes' : 'no'}

Current Post Tags: {JSON.stringify(frontmatter.tags || [])}

{/* IMPORTANT CHANGE: Knowledge Graph - Display BEFORE tags */} {showKnowledgeGraph && (
)} {/* Tags - Now placed AFTER the knowledge graph */} {frontmatter.tags && frontmatter.tags.length > 0 && (
{frontmatter.tags.map((tag) => ( #{tag} ))}
)}
{/* Display Hero Image */} {displayImage && (
{frontmatter.title}
)} {/* Main Content Area */}
{/* Renders the actual markdown content */}
{/* Sidebar */}