diff --git a/src/components/Header.astro b/src/components/Header.astro index 35eaa50..65080b0 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,458 +1,505 @@ --- -// Header.astro -// Primary navigation component with premium design elements +// src/components/Header.astro +import ThemeToggler from './ThemeToggler.astro'; -// Get current path to highlight active nav item -const pathname = new URL(Astro.request.url).pathname; -const currentPath = pathname.split('/')[1]; // Get the first path segment - -// Define navigation items +// Define navigation items with proper URLs const navItems = [ - { name: 'Home', path: '/' }, - { name: 'Blog', path: '/blog/' }, - { name: 'Projects', path: '/projects/' }, - { name: 'Home Lab', path: '/homelab/' }, - { name: 'Resources', path: '/resources/' }, - { name: 'About', path: '/about/' }, - { name: 'Contact', path: '/contact/' } + { name: 'Home', url: '/' }, + { name: 'Blog', url: '/blog' }, + { name: 'Projects', url: '/projects' }, + { name: 'Home Lab', url: 'https://argobox.com' }, + { name: 'Resources', url: '/resources' }, + { name: 'About', url: 'https://laforceit.com' }, + { name: 'Contact', url: 'https://laforceit.com/index.html#contact' } ]; + +// Get current URL path for active nav item highlighting +const currentPath = Astro.url.pathname; ---
-
-
-
-
+ +
+ LaForceIT + Infrastructure & Automation
- - +
+
+ +
- - -
\ No newline at end of file diff --git a/src/components/KnowledgeGraph.astro b/src/components/KnowledgeGraph.astro index 56079d0..854e098 100644 --- a/src/components/KnowledgeGraph.astro +++ b/src/components/KnowledgeGraph.astro @@ -1,18 +1,20 @@ --- // src/components/KnowledgeGraph.astro -// Interactive visualization of content connections using Cytoscape.js +// Enhanced interactive visualization of content connections using Cytoscape.js export interface GraphNode { id: string; label: string; + type: 'post' | 'tag' | 'category'; // Node types to distinguish posts from tags category?: string; tags?: string[]; - url?: string; // Added URL for linking + url?: string; // URL for linking } export interface GraphEdge { source: string; target: string; + type: 'post-tag' | 'post-category' | 'post-post'; // Edge types strength?: number; } @@ -23,20 +25,31 @@ export interface GraphData { interface Props { graphData: GraphData; - height?: string; // e.g., '600px' + height?: string; // e.g., '500px' + initialFilter?: string; // Optional initial filter } -const { graphData, height = "60vh" } = Astro.props; +const { graphData, height = "50vh", initialFilter = "all" } = Astro.props; -// Define fixed colors for node types +// Generate colors based on node types const nodeTypeColors = { - post: 'var(--accent-secondary)', // Blue for posts - tag: 'var(--accent-primary)' // Cyan for tags + 'post': '#3B82F6', // Blue for posts + 'tag': '#10B981', // Green for tags + 'category': '#8B5CF6' // Purple for categories }; -// Calculate node sizes (Keep this logic) +// Generate predefined colors for categories +const predefinedColors = { + 'Kubernetes': '#326CE5', 'Docker': '#2496ED', 'DevOps': '#FF6F61', + 'Homelab': '#06B6D4', 'Networking': '#9333EA', 'Infrastructure': '#10B981', + 'Automation': '#F59E0B', 'Security': '#EF4444', 'Monitoring': '#6366F1', + 'Storage': '#8B5CF6', 'Obsidian': '#7C3AED', 'Tutorial': '#3B82F6', + 'Uncategorized': '#A0AEC0' +}; + +// Calculate node sizes const nodeSizes = {}; -const minSize = 20; const maxSize = 40; +const minSize = 15; const maxSize = 35; const degreeMap = new Map(); graphData.nodes.forEach(node => degreeMap.set(node.id, 0)); graphData.edges.forEach(edge => { @@ -46,15 +59,47 @@ graphData.edges.forEach(edge => { const maxDegree = Math.max(...Array.from(degreeMap.values()), 1); graphData.nodes.forEach(node => { const degree = degreeMap.get(node.id) || 0; + // Make tags slightly smaller than posts by default + const baseSize = node.type === 'post' ? minSize : minSize * 0.8; const normalizedSize = maxDegree === 0 ? 0.5 : degree / maxDegree; - nodeSizes[node.id] = minSize + normalizedSize * (maxSize - minSize); + nodeSizes[node.id] = baseSize + normalizedSize * (maxSize - minSize); }); + +// Count node types for legend +const nodeTypeCounts = { + post: graphData.nodes.filter(node => node.type === 'post').length, + tag: graphData.nodes.filter(node => node.type === 'tag').length, + category: graphData.nodes.filter(node => node.type === 'category').length +}; --- -
+
+ +
+
+ How to use the Knowledge Graph +
+

This Knowledge Graph visualizes connections between blog content:

+
    +
  • Posts - Blog articles (circle nodes)
    • +
  • Tags - Content topics (diamond nodes)
    • +
+

Interactions:

+
    +
  • Click a node to see its connections and details
    • +
  • Click a tag node to filter posts by that tag
    • +
  • Click a post node to highlight that specific post
    • +
  • Use the filter buttons below to focus on specific topics
    • +
  • Use mouse wheel to zoom in/out and drag to pan
    • +
  • Click an empty area to reset the view
    • +
+
+
+
+
+
+ Type +
Category: Category Name @@ -92,12 +140,16 @@ graphData.nodes.forEach(node => {
- Read Article + View Content
- +
- {/* Removed category filter buttons */} +
+ + + +
- +
- - -
- Legend -
-
- - Post -
-
- - Tag -
-
-
- \ No newline at end of file diff --git a/src/components/DigitalGardenGraph.astro b/src/components/deleteDigitalGardenGraph.astro similarity index 100% rename from src/components/DigitalGardenGraph.astro rename to src/components/deleteDigitalGardenGraph.astro diff --git a/src/content/config.ts b/src/content/config.ts index 7dd588e..6531b14 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,98 +1,100 @@ +// src/content/config.ts import { defineCollection, z } from 'astro:content'; -// Define custom date validator that handles multiple formats -const customDateParser = (dateString: string | Date | null | undefined) => { - // Handle null/undefined - if (dateString === null || dateString === undefined) { - return new Date(); - } - - // If date is already a Date object, return it - if (dateString instanceof Date) { - return dateString; - } - - // Try to parse the date as is - let date = new Date(dateString); - - // For format like "Jul 22 2023" - if (isNaN(date.getTime()) && typeof dateString === 'string') { - try { - // Try various formats - if (dateString.match(/^\d{2}\/\d{2}\/\d{4}$/)) { - const [month, day, year] = dateString.split('/').map(Number); - date = new Date(year, month - 1, day); - } - } catch (e) { - // Default to current date if all parsing fails - date = new Date(); - } - } - - return date; -}; - -// Define the base schema for all content -const baseSchema = z.object({ - title: z.string(), - description: z.string().optional(), - pubDate: z.union([z.string(), z.date(), z.null()]).optional().default(() => new Date()).transform(customDateParser), - updatedDate: z.union([z.string(), z.date(), z.null()]).optional().transform(val => val ? customDateParser(val) : undefined), - heroImage: z.string().optional().nullable(), - // Add categories array that falls back to the single category field - categories: z.union([ - z.array(z.string()), - z.string().transform(val => [val]), - z.null() - ]).optional().transform(val => { - if (val === null || val === undefined) return ['Uncategorized']; - return val; - }), - // Keep the original category field for backward compatibility - category: z.string().optional().default('Uncategorized'), - tags: z.union([z.array(z.string()), z.null()]).optional().default([]), - draft: z.boolean().optional().default(false), - readTime: z.union([z.string(), z.number()]).optional(), - image: z.string().optional(), - excerpt: z.string().optional(), - author: z.string().optional(), - github: z.string().optional(), - live: z.string().optional(), - technologies: z.array(z.string()).optional(), -}).passthrough() // Allow any other frontmatter properties - .transform(data => { - // If categories isn't set but category is, use category value to populate categories - if ((!data.categories || data.categories.length === 0) && data.category) { - data.categories = [data.category]; - } - return data; - }); - -// Define collections using the same base schema +// Define the post collection schema const postsCollection = defineCollection({ type: 'content', - schema: baseSchema, -}); - -const configurationsCollection = defineCollection({ - type: 'content', - schema: baseSchema, -}); - -const projectsCollection = defineCollection({ - type: 'content', - schema: baseSchema, + schema: z.object({ + title: z.string(), + description: z.string().optional(), + pubDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + heroImage: z.string().optional(), + + // Support both single category and categories array + category: z.string().optional(), + categories: z.array(z.string()).optional(), + + // Tags as an array + tags: z.array(z.string()).default([]), + + // Author and reading time + author: z.string().optional(), + readTime: z.string().optional(), + + // Draft status + draft: z.boolean().optional().default(false), + + // Related posts by slug + related_posts: z.array(z.string()).optional(), + + // Additional metadata + featured: z.boolean().optional().default(false), + technologies: z.array(z.string()).optional(), + complexity: z.enum(['beginner', 'intermediate', 'advanced']).optional(), + }), }); +// Define the external posts collection (for external articles) const externalPostsCollection = defineCollection({ type: 'content', - schema: baseSchema, + schema: z.object({ + title: z.string(), + description: z.string().optional(), + pubDate: z.coerce.date(), + url: z.string().url(), + heroImage: z.string().optional(), + source: z.string().optional(), + category: z.string().optional(), + categories: z.array(z.string()).optional(), + tags: z.array(z.string()).default([]), + }), +}); + +// Define the configurations collection (for config files) +const configurationsCollection = defineCollection({ + type: 'content', + schema: z.object({ + title: z.string(), + description: z.string().optional(), + pubDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + heroImage: z.string().optional(), + category: z.string().optional(), + categories: z.array(z.string()).optional(), + tags: z.array(z.string()).default([]), + technologies: z.array(z.string()).optional(), + complexity: z.enum(['beginner', 'intermediate', 'advanced']).optional(), + draft: z.boolean().optional().default(false), + version: z.string().optional(), + github: z.string().optional(), + }), +}); + +// Define the projects collection +const projectsCollection = defineCollection({ + type: 'content', + schema: z.object({ + title: z.string(), + description: z.string().optional(), + pubDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + heroImage: z.string().optional(), + category: z.string().optional(), + categories: z.array(z.string()).optional(), + tags: z.array(z.string()).default([]), + technologies: z.array(z.string()).optional(), + github: z.string().optional(), + website: z.string().optional(), + status: z.enum(['concept', 'in-progress', 'completed', 'maintained']).optional(), + draft: z.boolean().optional().default(false), + }), }); // Export the collections export const collections = { - 'posts': postsCollection, - 'configurations': configurationsCollection, - 'projects': projectsCollection, + posts: postsCollection, 'external-posts': externalPostsCollection, + configurations: configurationsCollection, + projects: projectsCollection, }; \ No newline at end of file diff --git a/src/content/projects/placeholder.md b/src/content/projects/placeholder.md index 8793264..8d3629d 100644 --- a/src/content/projects/placeholder.md +++ b/src/content/projects/placeholder.md @@ -3,7 +3,7 @@ title: "Projects Collection" description: "A placeholder document for the projects collection" heroImage: "/blog/images/placeholders/default.jpg" pubDate: 2025-04-18 -status: "planning" +status: "concept" # Changed from 'planning' to match schema tech: ["astro", "markdown"] --- diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index cbf6ce4..4a7e418 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,5 +1,5 @@ --- -// blog/index.astro - Blog page with knowledge graph and filtering +// src/pages/blog/index.astro - Blog page with enhanced knowledge graph and filtering import { getCollection } from 'astro:content'; import BaseLayout from '../../layouts/BaseLayout.astro'; import KnowledgeGraph from '../../components/KnowledgeGraph.astro'; @@ -37,38 +37,64 @@ const postsData = sortedPosts.map(post => ({ isDraft: post.data.draft || false })); -// Prepare graph data for visualization +// Prepare enhanced graph data with both posts and tags const graphData = { - nodes: sortedPosts - .filter(post => !post.data.draft) - .map(post => ({ - id: post.slug, - label: post.data.title, - category: post.data.category || 'Uncategorized', - tags: post.data.tags || [] - })), + nodes: [ + // Add post nodes + ...sortedPosts + .filter(post => !post.data.draft) + .map(post => ({ + id: post.slug, + label: post.data.title, + type: 'post', + category: post.data.category || 'Uncategorized', + tags: post.data.tags || [], + url: `/posts/${post.slug}/` + })), + + // Add tag nodes + ...allTags.map(tag => ({ + id: `tag-${tag}`, + label: tag, + type: 'tag', + url: `/tag/${tag}/` + })) + ], edges: [] }; -// Create edges between posts based on shared tags -for (let i = 0; i < graphData.nodes.length; i++) { - const postA = graphData.nodes[i]; - - for (let j = i + 1; j < graphData.nodes.length; j++) { - const postB = graphData.nodes[j]; +// Create edges between posts and their tags +sortedPosts + .filter(post => !post.data.draft) + .forEach(post => { + const postTags = post.data.tags || []; - // Create edge if posts share at least one tag or same category - const sharedTags = postA.tags.filter(tag => postB.tags.includes(tag)); - - if (sharedTags.length > 0 || postA.category === postB.category) { + // Add edges from post to tags + postTags.forEach(tag => { graphData.edges.push({ - source: postA.id, - target: postB.id, - strength: sharedTags.length + (postA.category === postB.category ? 1 : 0) + source: post.slug, + target: `tag-${tag}`, + type: 'post-tag', + strength: 1 + }); + }); + + // Check if post references other posts (optional) + // This requires a related_posts field in frontmatter + if (post.data.related_posts && Array.isArray(post.data.related_posts)) { + post.data.related_posts.forEach(relatedSlug => { + // Make sure related post exists + if (sortedPosts.some(p => p.slug === relatedSlug)) { + graphData.edges.push({ + source: post.slug, + target: relatedSlug, + type: 'post-post', + strength: 2 + }); + } }); } - } -} + }); // Terminal commands for tech effect const commands = [ @@ -79,8 +105,8 @@ const commands = [ }, { prompt: "[laforceit@argobox]$ ", - command: "ls -la ./categories", - output: allCategories.map(cat => `${cat}`) + command: "ls -la ./tags", + output: allTags.map(tag => `${tag}`) }, { prompt: "[laforceit@argobox]$ ", @@ -117,58 +143,52 @@ const commands = [
- -
+ +
-
-

Knowledge Graph

-

- Explore connections between articles based on topics and categories -

-
- -
- + +
+
+

Knowledge Graph & Content Explorer

+

+ Explore connections between articles and topics, or search by keyword +

+
-
- - {allCategories.map(category => ( - - ))} + +
+
-
-
-
- - -
-
-
-

All Articles

-

- Technical insights, infrastructure guides, and DevOps best practices -

-
- - -
-
- -
-
- Filter by Tag: - - {allTags.map(tag => ( - - ))} + +
+
+ + +
+
+ Filter by Tag: + + {allTags.map(tag => ( + + ))} +
- -
-
- - Loading articles... + +
+
+

All Articles

+

+ Technical insights, infrastructure guides, and DevOps best practices +

+
+ +
+
+ + Loading articles... +
@@ -182,81 +202,18 @@ const commands = [ const searchInput = document.getElementById('search-input'); const tagButtons = document.querySelectorAll('.tag-filter-btn'); const blogGrid = document.getElementById('blog-grid'); - const graphFilters = document.querySelectorAll('.graph-filter'); // State variables let currentFilterTag = 'all'; let currentSearchTerm = ''; - let currentGraphFilter = 'all'; let cy; // Cytoscape instance will be set by KnowledgeGraph component // Wait for cytoscape instance to be available document.addEventListener('graphReady', (e) => { cy = e.detail.cy; - setupGraphInteractions(); + console.log('Graph ready and connected to filtering system'); }); - // Setup graph filtering and interactions - function setupGraphInteractions() { - if (!cy) return; - - // Graph filtering by category - graphFilters.forEach(button => { - button.addEventListener('click', () => { - // Update active button style - graphFilters.forEach(btn => btn.classList.remove('active')); - button.classList.add('active'); - - // Update filter - currentGraphFilter = button.dataset.filter; - - // Apply filter to graph - if (currentGraphFilter === 'all') { - cy.elements().removeClass('faded').removeClass('highlighted'); - } else { - // Fade all nodes/edges - cy.elements().addClass('faded'); - - // Highlight nodes with matching category and their edges - const matchingNodes = cy.nodes().filter(node => - node.data('category') === currentGraphFilter - ); - - matchingNodes.removeClass('faded').addClass('highlighted'); - matchingNodes.connectedEdges().removeClass('faded').addClass('highlighted'); - } - }); - }); - - // Click node to filter posts - cy.on('tap', 'node', function(evt) { - const node = evt.target; - const slug = node.id(); - - // Scroll to the post in the blog grid - const post = postsData.find(p => p.slug === slug); - if (post) { - // Reset filters - currentFilterTag = 'all'; - searchInput.value = post.title; - currentSearchTerm = post.title; - - // Update UI - tagButtons.forEach(btn => btn.classList.remove('active')); - tagButtons[0].classList.add('active'); - - // Update grid with just this post - updateGrid(); - - // Scroll to blog section - document.querySelector('.blog-posts-section').scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); - } - }); - } - // Function to create HTML for a single post card function createPostCardHTML(post) { // Make sure tags is an array before stringifying @@ -264,23 +221,25 @@ const commands = [ // Create tag pills HTML const tagPills = post.tags.map(tag => - `${tag}` + `${tag}` ).join(''); return `
-
- -
${post.category}
-
+ +
+ +
${post.category}
+
+
@@ -321,7 +280,7 @@ const commands = [ post.title.toLowerCase().includes(searchTermLower) || post.description.toLowerCase().includes(searchTermLower) || postTags.some(tag => tag.toLowerCase().includes(searchTermLower)); - return matchesTag && matchesSearch && !post.isDraft; // Exclude drafts + return matchesTag && matchesSearch; }); // Update the grid HTML @@ -329,29 +288,73 @@ const commands = [ if (filteredPosts.length > 0) { blogGrid.innerHTML = filteredPosts.map(createPostCardHTML).join(''); + // Add click handlers to post tag spans + document.querySelectorAll('.post-tag').forEach(tagSpan => { + tagSpan.addEventListener('click', (e) => { + e.preventDefault(); + const tag = tagSpan.dataset.tag; + + // Find and click the matching tag filter button + const tagBtn = Array.from(tagButtons).find(btn => btn.dataset.tag === tag); + if (tagBtn) { + tagBtn.click(); + } + }); + }); + // If graph is available, highlight matching nodes if (cy) { + // Get matching slugs for posts const matchingSlugs = filteredPosts.map(post => post.slug); - // Reset all nodes - cy.nodes().removeClass('highlighted').removeClass('filtered'); - - // Highlight matching nodes - matchingSlugs.forEach(slug => { - cy.getElementById(slug).addClass('highlighted'); - }); - - // If filtering by tag, also highlight connected nodes if (currentFilterTag !== 'all') { - cy.nodes().forEach(node => { - if (node.data('tags')?.includes(currentFilterTag)) { - node.addClass('filtered'); + // We're filtering by tag - highlight tag node and connected posts + cy.elements().addClass('faded').removeClass('highlighted filtered'); + + // Highlight the tag node + const tagNode = cy.getElementById(`tag-${currentFilterTag}`); + if (tagNode.length > 0) { + tagNode.removeClass('faded').addClass('highlighted'); + + // Get connected posts and highlight them + const connectedPosts = tagNode.neighborhood('node[type="post"]'); + connectedPosts.removeClass('faded').addClass('filtered'); + + // Highlight connecting edges + tagNode.connectedEdges().removeClass('faded').addClass('highlighted'); + } + } + else if (currentSearchTerm) { + // We're searching - highlight matching posts + cy.elements().addClass('faded').removeClass('highlighted filtered'); + + // Find and highlight matching post nodes + matchingSlugs.forEach(slug => { + const node = cy.getElementById(slug); + if (node.length > 0) { + node.removeClass('faded').addClass('highlighted'); + + // Also show connected tags + const connectedTags = node.neighborhood('node[type="tag"]'); + connectedTags.removeClass('faded').addClass('filtered'); + + // And highlight edges + node.connectedEdges().removeClass('faded'); } }); } + else { + // Reset graph view + cy.elements().removeClass('faded highlighted filtered'); + } } } else { - blogGrid.innerHTML = '

No posts found matching your criteria.

'; + blogGrid.innerHTML = '

No posts found matching your criteria. Try adjusting your search or filters.

'; + + // Reset graph view + if (cy) { + cy.elements().removeClass('faded highlighted filtered'); + } } } else { console.error("Blog grid element not found!"); @@ -378,12 +381,53 @@ const commands = [ // Update filter and grid currentFilterTag = button.dataset.tag; updateGrid(); + + // If tag changes but search is active, keep it integrated + if (cy && currentFilterTag !== 'all') { + // Find the tag node + const tagNode = cy.getElementById(`tag-${currentFilterTag}`); + if (tagNode.length > 0) { + // Center the view on this tag + cy.animate({ + center: { eles: tagNode }, + zoom: 1.5 + }, { + duration: 500 + }); + } + } }); }); // Initial grid population on client side document.addEventListener('DOMContentLoaded', () => { updateGrid(); // Call after DOM is fully loaded + + // Create link between graph and grid + document.addEventListener('graphReady', (e) => { + // Add a scroll-to-graph button + const searchSection = document.querySelector('.search-filter-section'); + if (searchSection) { + const graphButton = document.createElement('button'); + graphButton.className = 'graph-toggle-btn'; + graphButton.innerHTML = ` + + + + + + + Explore Knowledge Graph + `; + graphButton.addEventListener('click', () => { + document.querySelector('.knowledge-graph-wrapper').scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + }); + searchSection.appendChild(graphButton); + } + }); }); @@ -481,17 +525,15 @@ const commands = [ max-width: 560px; } - /* Graph Section */ - .graph-section { - padding: 5rem 0; - position: relative; - background: linear-gradient(0deg, var(--bg-primary), var(--bg-secondary), var(--bg-primary)); + /* Blog Content Section */ + .blog-content-section { + padding: 2rem 0 5rem; } .section-header { text-align: center; max-width: 800px; - margin: 0 auto 3rem; + margin: 0 auto 2rem; } .section-title { @@ -519,75 +561,56 @@ const commands = [ margin: 0 auto; } - .graph-container { - position: relative; - height: 60vh; - min-height: 500px; - max-height: 800px; + /* Search Filter Container with Knowledge Graph */ + .search-filter-container { + margin-bottom: 4rem; + background: rgba(15, 23, 42, 0.3); border-radius: 12px; - overflow: hidden; - border: 1px solid var(--card-border); - background: rgba(15, 23, 42, 0.2); - margin-bottom: 2rem; - } - - .graph-controls { - display: flex; - flex-wrap: wrap; - gap: 1rem; - justify-content: center; - margin-top: 1.5rem; - } - - .graph-filter { - padding: 0.5rem 1rem; - border-radius: 6px; border: 1px solid var(--border-primary); - background: var(--bg-secondary); - color: var(--text-primary); - font-family: var(--font-mono); - font-size: var(--font-size-sm); - cursor: pointer; - transition: all 0.3s ease; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } - .graph-filter:hover { - border-color: var(--accent-primary); - box-shadow: 0 0 10px var(--glow-primary); - } - - .graph-filter.active { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - border-color: transparent; - color: var(--bg-primary); - } - - /* Blog Posts Section */ - .blog-posts-section { - padding: 5rem 0; + .knowledge-graph-wrapper { + width: 100%; + padding: 0; + margin: 0 0 1.5rem; } .search-filter-section { - margin-bottom: 3rem; padding: 1.5rem; - background: rgba(13, 21, 41, 0.5); - border: 1px solid var(--card-border); - border-radius: 8px; + position: relative; } .search-bar { margin-bottom: 1.5rem; + position: relative; + } + + .search-icon { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-tertiary); } .search-input { width: 100%; - padding: 0.75rem 1rem; + padding: 0.75rem 1rem 0.75rem 2.5rem; background-color: var(--bg-primary); border: 1px solid var(--card-border); - border-radius: 6px; + border-radius: 8px; color: var(--text-primary); font-size: 1rem; font-family: var(--font-sans); + transition: all 0.3s ease; + } + + .search-input:focus { + border-color: var(--accent-primary); + box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2); + outline: none; } .search-input::placeholder { @@ -624,6 +647,7 @@ const commands = [ background-color: rgba(226, 232, 240, 0.1); color: var(--text-primary); border-color: rgba(56, 189, 248, 0.4); + transform: translateY(-2px); } .tag-filter-btn.active { @@ -633,8 +657,36 @@ const commands = [ font-weight: 600; } + .graph-toggle-btn { + position: absolute; + top: 1.5rem; + right: 1.5rem; + background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); + color: var(--bg-primary); + border: none; + padding: 0.6rem 1rem; + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + transition: all 0.3s ease; + box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2); + } + + .graph-toggle-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(6, 182, 212, 0.3); + } + + /* Blog Section and Grid */ + .blog-section { + margin-top: 4rem; + } + .blog-grid { - margin: 2rem 0 4rem; + margin: 2rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; @@ -666,6 +718,11 @@ const commands = [ border-color: rgba(56, 189, 248, 0.4); } + .post-image-link { + display: block; + text-decoration: none; + } + .post-image-container { position: relative; } @@ -674,6 +731,11 @@ const commands = [ width: 100%; height: 200px; object-fit: cover; + transition: transform 0.5s ease; + } + + .post-card:hover .post-image { + transform: scale(1.05); } .post-category-badge { @@ -722,6 +784,18 @@ const commands = [ color: var(--accent-primary); } + .draft-badge { + display: inline-block; + background: rgba(245, 158, 11, 0.2); + color: #F59E0B; + font-size: 0.7rem; + padding: 0.2rem 0.5rem; + border-radius: 4px; + margin-left: 0.5rem; + vertical-align: middle; + font-family: var(--font-mono); + } + .post-excerpt { color: var(--text-secondary); font-size: 0.9rem; @@ -747,12 +821,19 @@ const commands = [ } .post-tag { - background: rgba(226, 232, 240, 0.05); - color: var(--text-secondary); + background: rgba(16, 185, 129, 0.1); + color: #10B981; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-family: var(--font-mono); + cursor: pointer; + transition: all 0.2s ease; + } + + .post-tag:hover { + background: rgba(16, 185, 129, 0.2); + transform: translateY(-2px); } .read-more { @@ -834,8 +915,10 @@ const commands = [ max-width: 100%; } - .graph-container { - height: 50vh; + .graph-toggle-btn { + top: auto; + bottom: 1.5rem; + right: 1.5rem; } } @@ -855,5 +938,15 @@ const commands = [ .blog-grid { grid-template-columns: 1fr; } + + .graph-toggle-btn { + padding: 0.5rem; + right: 1rem; + bottom: 1rem; + } + + .graph-toggle-btn span { + display: none; + } } \ No newline at end of file diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro index 31e86eb..005ee2f 100644 --- a/src/pages/posts/[slug].astro +++ b/src/pages/posts/[slug].astro @@ -1,17 +1,628 @@ --- +// src/pages/posts/[slug].astro import { getCollection } from 'astro:content'; -import BlogPostLayout from '../../layouts/BlogPostLayout.astro'; // Using BlogPostLayout +import BaseLayout from '../../layouts/BaseLayout.astro'; -// 1. Generate a path for every blog post +// Required getStaticPaths function for dynamic routes export async function getStaticPaths() { - const postEntries = await getCollection('posts'); - return postEntries.map(entry => ({ - params: { slug: entry.slug }, props: { entry }, - })); + try { + // Get posts from the posts collection + const allPosts = await getCollection('posts', ({ data }) => { + return import.meta.env.PROD ? !data.draft : true; + }); + + return allPosts.map(post => ({ + params: { slug: post.slug }, + props: { post, allPosts }, + })); + } catch (error) { + console.error('Error fetching posts:', error); + // Return empty array if collection doesn't exist + return []; + } } -// 2. For your template, you can get the entry directly from the prop -const { entry } = Astro.props; -const { Content } = await entry.render(); +// Get the post and all posts from props +const { post, allPosts } = Astro.props; + +// Format date helper +const formatDate = (date) => { + if (!date) return ''; + const d = new Date(date); + return d.toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); +}; + +// Generate datetime attribute safely +const getISODate = (date) => { + if (!date) return ''; + // Handle various date formats + try { + // If already a Date object + if (date instanceof Date) { + return date.toISOString(); + } + // If it's a string or number, convert to Date + return new Date(date).toISOString(); + } catch (error) { + // Fallback if date is invalid + console.error('Invalid date format:', date); + return ''; + } +}; + +// Find related posts by tags +const getRelatedPosts = (currentPost, allPosts, maxPosts = 3) => { + if (!currentPost || !allPosts) return []; + + // Get current post tags + const postTags = currentPost.data.tags || []; + + // If no tags, just return recent posts + if (postTags.length === 0) { + return allPosts + .filter(p => p.slug !== currentPost.slug && !p.data.draft) + .sort((a, b) => { + const dateA = a.data.pubDate ? new Date(a.data.pubDate) : new Date(0); + const dateB = b.data.pubDate ? new Date(b.data.pubDate) : new Date(0); + return dateB.getTime() - dateA.getTime(); + }) + .slice(0, maxPosts); + } + + // Score posts by matching tags + const scoredPosts = allPosts + .filter(p => p.slug !== currentPost.slug && !p.data.draft) + .map(p => { + const pTags = p.data.tags || []; + const matchCount = pTags.filter(tag => postTags.includes(tag)).length; + return { post: p, score: matchCount }; + }) + .filter(item => item.score > 0) + .sort((a, b) => { + // Sort by score first + if (b.score !== a.score) return b.score - a.score; + + // If scores are equal, sort by date + const dateA = a.post.data.pubDate ? new Date(a.post.data.pubDate) : new Date(0); + const dateB = b.post.data.pubDate ? new Date(b.post.data.pubDate) : new Date(0); + return dateB.getTime() - dateA.getTime(); + }) + .slice(0, maxPosts); + + // If we don't have enough related posts by tags, add recent posts + if (scoredPosts.length < maxPosts) { + const recentPosts = allPosts + .filter(p => { + return p.slug !== currentPost.slug && + !p.data.draft && + !scoredPosts.some(sp => sp.post.slug === p.slug); + }) + .sort((a, b) => { + const dateA = a.data.pubDate ? new Date(a.data.pubDate) : new Date(0); + const dateB = b.data.pubDate ? new Date(b.data.pubDate) : new Date(0); + return dateB.getTime() - dateA.getTime(); + }) + .slice(0, maxPosts - scoredPosts.length); + + return [...scoredPosts.map(sp => sp.post), ...recentPosts]; + } + + return scoredPosts.map(sp => sp.post); +}; + +// Get related posts +const relatedPosts = getRelatedPosts(post, allPosts); + +// Check for explicitly related posts in frontmatter +const explicitRelatedPosts = post.data.related_posts + ? allPosts.filter(p => post.data.related_posts.includes(p.slug)) + : []; + +// Combine explicit and tag-based related posts, with explicit ones first +const combinedRelatedPosts = [ + ...explicitRelatedPosts, + ...relatedPosts.filter(p => !explicitRelatedPosts.some(ep => ep.slug === p.slug)) +].slice(0, 3); + +// Get the Content component for rendering markdown +const { Content } = await post.render(); --- - \ No newline at end of file + + +
+
+

{post.data.title}

+
+ {post.data.pubDate && } + {post.data.updatedDate &&
Updated: {formatDate(post.data.updatedDate)}
} + {post.data.readTime &&
{post.data.readTime}
} + {post.data.author &&
By {post.data.author}
} +
+
+ + {post.data.heroImage && ( +
+ {post.data.title} +
+ )} + +
+
+ +
+ + +
+ +
+ + + + + + Back to Blog + +
+
+ + + + + + + \ No newline at end of file diff --git a/src/pages/search-index.json.js b/src/pages/search-index.json.js new file mode 100644 index 0000000..8a2ff28 --- /dev/null +++ b/src/pages/search-index.json.js @@ -0,0 +1,32 @@ +// src/pages/search-index.json.js +// Generates a JSON file with all posts for client-side search + +import { getCollection } from 'astro:content'; + +export async function get() { + // Get all posts + const allPosts = await getCollection('posts', ({ data }) => { + // Exclude draft posts in production + return import.meta.env.PROD ? !data.draft : true; + }); + + // Transform posts into search-friendly format + const searchablePosts = allPosts.map(post => ({ + slug: post.slug, + title: post.data.title, + description: post.data.description || '', + pubDate: post.data.pubDate ? new Date(post.data.pubDate).toISOString() : '', + category: post.data.category || 'Uncategorized', + tags: post.data.tags || [], + readTime: post.data.readTime || '5 min read', + })); + + // Return JSON + return { + body: JSON.stringify(searchablePosts), + headers: { + 'Content-Type': 'application/json', + 'Cache-Control': 'max-age=3600' + } + } +} \ No newline at end of file diff --git a/src/styles/theme.css b/src/styles/theme.css index 069422a..0dc5e50 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -33,8 +33,8 @@ --font-size-5xl: 3rem; --font-mono: 'JetBrains Mono', monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - --bg-primary-rgb: 15, 18, 25; /* Added RGB for gradients */ - --bg-secondary-rgb: 22, 26, 36; /* Added RGB for gradients */ + --bg-primary-rgb: 15, 18, 25; /* RGB for gradients */ + --bg-secondary-rgb: 22, 26, 36; /* RGB for gradients */ } /* Light Mode Variables */ @@ -58,49 +58,75 @@ --card-border: rgba(37, 99, 235, 0.3); /* Blue border */ --ui-element: #e2e8f0; /* Lighter UI elements */ --ui-element-hover: #cbd5e1; - --bg-primary-rgb: 255, 255, 255; /* Added RGB for gradients */ - --bg-secondary-rgb: 248, 250, 252; /* Added RGB for gradients */ + --bg-primary-rgb: 255, 255, 255; /* RGB for gradients */ + --bg-secondary-rgb: 248, 250, 252; /* RGB for gradients */ } /* Ensure transitions for smooth theme changes */ -body, .site-header, .site-footer, .post-card, input, select, button, pre, code { - transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; +*, *::before, *::after { + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; +} + +/* Knowledge Graph specific theme adjustments */ +:root.light-mode .graph-container { + background: rgba(248, 250, 252, 0.3); + border: 1px solid var(--card-border); +} + +:root.light-mode .node-details { + background: rgba(255, 255, 255, 0.8); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); +} + +:root.light-mode .graph-filters { + background: rgba(248, 250, 252, 0.7); +} + +:root.light-mode .graph-filter { + color: var(--text-secondary); + border-color: var(--border-primary); +} + +:root.light-mode .connections-list a { + color: var(--accent-secondary); +} + +:root.light-mode .node-link { + box-shadow: 0 4px 10px rgba(8, 145, 178, 0.15); +} + +/* Fix for code blocks in light mode */ +:root.light-mode pre, +:root.light-mode code { + background-color: var(--bg-code); + color: var(--text-secondary); } /* Apply base styles using variables */ -/* (Keep existing base styles from BaseLayout.astro's