From 81008d7b039cc7f85c5b56af584f45478e75e713 Mon Sep 17 00:00:00 2001 From: Daniel LaForce Date: Wed, 23 Apr 2025 23:58:54 -0600 Subject: [PATCH] feat: Implement major UI/UX updates and component refactors --- src/components/Header.astro | 88 +- src/components/HomePage.astro | 94 +- src/components/KnowledgeGraph.astro | 891 +++++++++++- src/components/MiniKnowledgeGraph.astro | 1752 +++++++++++++++++++++++ src/components/Terminal.astro | 398 +---- src/config/terminal.js | 414 ++++++ src/layouts/BaseLayout.astro | 87 +- src/layouts/BlogPost.astro | 1082 +++++++------- src/layouts/BlogPostLayout.astro | 181 ++- src/pages/blog/index.astro | 123 +- src/pages/index.astro | 923 +++++------- src/pages/tag/[tag].astro | 558 +++++--- src/pages/test-graph.astro | 179 +++ src/styles/theme.css | 134 +- 14 files changed, 5106 insertions(+), 1798 deletions(-) create mode 100644 src/components/MiniKnowledgeGraph.astro create mode 100644 src/config/terminal.js create mode 100644 src/pages/test-graph.astro diff --git a/src/components/Header.astro b/src/components/Header.astro index 65080b0..44539f9 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -423,9 +423,9 @@ const currentPath = Astro.url.pathname; } }); - // Search functionality - client-side post filtering - const searchResults = document.getElementById('search-results'); - + // Search functionality - client-side site-wide filtering (User provided version) + const searchResults = document.getElementById('search-results'); // Assuming this ID exists in your dropdown HTML + // Function to perform search const performSearch = async (query) => { if (!query || query.length < 2) { @@ -437,39 +437,68 @@ const currentPath = Astro.url.pathname; } try { - // This would ideally be a server-side search or a pre-built index - // For now, we'll just fetch all posts and filter client-side - const response = await fetch('/search-index.json'); + // Fetch the search index that contains all site content + const response = await fetch('/search-index.json'); // Ensure this path is correct based on your build output if (!response.ok) throw new Error('Failed to fetch search data'); - const posts = await response.json(); - const results = posts.filter(post => { + const allContent = await response.json(); + const results = allContent.filter(item => { const lowerQuery = query.toLowerCase(); return ( - post.title.toLowerCase().includes(lowerQuery) || - post.description?.toLowerCase().includes(lowerQuery) || - post.tags?.some(tag => tag.toLowerCase().includes(lowerQuery)) + item.title.toLowerCase().includes(lowerQuery) || + item.description?.toLowerCase().includes(lowerQuery) || + item.tags?.some(tag => tag.toLowerCase().includes(lowerQuery)) || + item.category?.toLowerCase().includes(lowerQuery) ); - }).slice(0, 5); // Limit to 5 results + }).slice(0, 8); // Limit to 8 results for better UI // Display results if (searchResults) { if (results.length > 0) { - searchResults.innerHTML = results.map(post => ` -
-
${post.title}
-
${post.description || ''}
-
- `).join(''); + searchResults.innerHTML = results.map(item => { + // Create type badge + let typeBadge = ''; + switch(item.type) { + case 'post': + typeBadge = 'Blog'; + break; + case 'project': + typeBadge = 'Project'; + break; + case 'configuration': + typeBadge = 'Config'; + break; + case 'external': + typeBadge = 'External'; + break; + default: + typeBadge = 'Content'; + } + + return ` +
+
+
${item.title}
+ ${typeBadge} +
+
${item.description || ''}
+ ${item.tags && item.tags.length > 0 ? + `
+ ${item.tags.slice(0, 3).map(tag => `${tag}`).join('')} +
` : '' + } +
+ `; + }).join(''); // Add click handlers to results document.querySelectorAll('.search-result-item').forEach(item => { item.addEventListener('click', () => { - window.location.href = item.dataset.url; + window.location.href = item.dataset.url; // Navigate to the item's URL }); }); } else { - searchResults.innerHTML = '
No matching posts found
'; + searchResults.innerHTML = '
No matching content found
'; } } } catch (error) { @@ -479,8 +508,8 @@ const currentPath = Astro.url.pathname; } } }; - - // Search input event handler + + // Search input event handler with debounce let searchTimeout; searchInput?.addEventListener('input', (e) => { clearTimeout(searchTimeout); @@ -488,18 +517,19 @@ const currentPath = Astro.url.pathname; performSearch(e.target.value); }, 300); // Debounce to avoid too many searches while typing }); - - // Handle search form submission + + // Handle search form submission (if your input is inside a form) const searchForm = searchInput?.closest('form'); searchForm?.addEventListener('submit', (e) => { - e.preventDefault(); + e.preventDefault(); // Prevent default form submission performSearch(searchInput.value); }); - - // Handle search-submit button click - const searchSubmit = document.querySelector('.search-submit'); + + // Handle search-submit button click (if you have a separate submit button) + const searchSubmit = document.querySelector('.search-submit'); // Adjust selector if needed searchSubmit?.addEventListener('click', () => { performSearch(searchInput?.value || ''); }); - }); + + }); // End of DOMContentLoaded \ No newline at end of file diff --git a/src/components/HomePage.astro b/src/components/HomePage.astro index 8d87d97..86d3141 100644 --- a/src/components/HomePage.astro +++ b/src/components/HomePage.astro @@ -8,6 +8,8 @@ import Footer from '../components/Footer.astro'; import Terminal from '../components/Terminal.astro'; import KnowledgeGraph from '../components/KnowledgeGraph.astro'; import { getCollection } from 'astro:content'; +import { Image } from 'astro:assets'; +import { COMMON_COMMANDS, TERMINAL_CONTENT } from '../config/terminal.js'; // Get all blog entries const allPosts = await getCollection('posts'); @@ -22,38 +24,8 @@ const sortedPosts = allPosts.sort((a, b) => { // Get recent posts (latest 4) const recentPosts = sortedPosts.slice(0, 4); -// Prepare terminal commands -const terminalCommands = [ - { - prompt: "[laforceit@argobox]$ ", - command: "ls -la ./infrastructure", - output: [ - "total 20", - "drwxr-xr-x 5 laforceit users 4096 Apr 23 09:15 kubernetes/", - "drwxr-xr-x 3 laforceit users 4096 Apr 20 17:22 docker/", - "drwxr-xr-x 2 laforceit users 4096 Apr 19 14:30 networking/", - "drwxr-xr-x 4 laforceit users 4096 Apr 22 21:10 monitoring/", - "drwxr-xr-x 3 laforceit users 4096 Apr 21 16:45 storage/", - ] - }, - { - prompt: "[laforceit@argobox]$ ", - command: "find ./posts -type f -name \"*.md\" | wc -l", - output: [`${allPosts.length} posts found`] - }, - { - prompt: "[laforceit@argobox]$ ", - command: "kubectl get nodes", - output: [ - "NAME STATUS ROLES AGE VERSION", - "argobox-cp1 Ready control-plane,master 92d v1.27.3", - "argobox-cp2 Ready control-plane,master 92d v1.27.3", - "argobox-cp3 Ready control-plane,master 92d v1.27.3", - "argobox-node1 Ready worker 92d v1.27.3", - "argobox-node2 Ready worker 92d v1.27.3" - ] - } -]; +// Prepare terminal commands - now imported from central config +const terminalCommands = COMMON_COMMANDS; // Prepare graph data for knowledge map // Extract categories and tags from posts @@ -364,6 +336,38 @@ const techStack = [ + + +
+
+
+
+ +
+
+ `
${item.prompt}
$ ${item.command}\n${item.output.join('\n')}`).join('\n\n')} + /> +
+
+
+