diff --git a/SETUP.md b/SETUP.md index ff636ca..1324dae 100644 --- a/SETUP.md +++ b/SETUP.md @@ -3,9 +3,9 @@ ## Quick Start ```bash # Clone and initialize the blog repository -git clone https://git.argobox.com/KeyArgo/laforceit-blog.git -cd laforceit-blog -./scripts/init-blog-repo.sh +git clone https://gitea.argobox.com/InovinLabs/argobox.git # Updated URL +cd argobox # Updated directory name +# ./scripts/init-blog-repo.sh # This script might need review/removal depending on its purpose ``` ## What This Does diff --git a/package.json b/package.json index 47e470b..61754d6 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "laforceit-blog", + "name": "argobox-astro", "type": "module", "version": "0.0.1", "scripts": { diff --git a/src/components/Footer.astro b/src/components/Footer.astro index dd209e8..fc73191 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -29,7 +29,7 @@ const categories = [ { title: 'Projects', links: [ - { name: 'HomeLab Setup', url: 'https://argobox.com' }, + { name: 'HomeLab Setup', path: '/homelab' }, { name: 'Tech Stack', url: 'https://argobox.com/#services' }, { name: 'Github Repos', path: '/projects/github' }, { name: 'Live Services', path: '/projects/services' }, @@ -175,6 +175,8 @@ const services = [ | Terms of Use | +Contact + | Sitemap diff --git a/src/components/Header.astro b/src/components/Header.astro index 123c1b6..6794dc2 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -11,7 +11,7 @@ const navItems = [ { name: 'Home Lab', url: '/homelab' }, // Updated URL { name: 'Resources', url: '/resources' }, { name: 'About', url: 'https://ArgoBox.com' }, - { name: 'Contact', url: 'https://ArgoBox.com/index.html#contact' } + { name: 'Contact', url: '/contact' } ]; // Get current URL path for active nav item highlighting diff --git a/src/components/KnowledgeGraph.astro b/src/components/KnowledgeGraph.astro index 5b947ab..12c00b4 100644 --- a/src/components/KnowledgeGraph.astro +++ b/src/components/KnowledgeGraph.astro @@ -413,6 +413,49 @@ const nodeTypeCounts = { setTimeout(() => { loadingEl.classList.add('hidden'); }, 500); } +// --- Fullscreen Toggle Functionality --- + if (fullscreenToggle) { + fullscreenToggle.addEventListener('click', toggleFullscreen); + } + + // Toggle fullscreen function + function toggleFullscreen() { + isFullscreen = !isFullscreen; + + if (isFullscreen) { + // Enable fullscreen mode + graphWrapper.classList.add('fullscreen'); + fullscreenEnterIcon.classList.add('hidden'); + fullscreenExitIcon.classList.remove('hidden'); + + // Hide the node details panel if it's visible + if (nodeDetailsEl) nodeDetailsEl.classList.remove('active'); + + // In fullscreen, we adjust the cytoscape layout to fit + setTimeout(() => { + cy.resize(); + cy.fit(null, 30); + }, 300); // Wait for transition to complete + } else { + // Disable fullscreen mode + graphWrapper.classList.remove('fullscreen'); + fullscreenEnterIcon.classList.remove('hidden'); + fullscreenExitIcon.classList.add('hidden'); + + // Hide the full post content panel + if (fullPostContent) { + fullPostContent.classList.remove('active'); + // Ensure display is set back to none if needed, though CSS handles visibility + // fullPostContent.style.display = 'none'; + } + + // Reset the cytoscape layout + setTimeout(() => { + cy.resize(); + cy.fit(null, 30); + }, 300); // Wait for transition to complete + } + } // --- Fullscreen Toggle Functionality --- if (fullscreenToggle) { fullscreenToggle.addEventListener('click', toggleFullscreen); @@ -764,6 +807,7 @@ const nodeTypeCounts = { if (nodeDetailsEl) nodeDetailsEl.classList.remove('active'); if (isFullscreen && fullPostContent) { fullPostContent.classList.remove('active'); + fullPostContent.style.display = 'none'; // Ensure display is none } cy.elements().removeClass('selected highlighted faded'); } @@ -776,6 +820,17 @@ const nodeTypeCounts = { cy.elements().removeClass('highlighted faded'); }); } +// Close full post panel button + if (closeFullPostBtn) { + closeFullPostBtn.addEventListener('click', () => { + if (fullPostContent) { + fullPostContent.classList.remove('active'); + fullPostContent.style.display = 'none'; // Ensure display is none + } + cy.$(':selected').unselect(); + cy.elements().removeClass('highlighted faded'); + }); + } // Close full post panel button if (closeFullPostBtn) { @@ -1979,4 +2034,350 @@ const nodeTypeCounts = { @keyframes spin { to { transform: rotate(360deg); } } +/* Fullscreen mode styles */ + .graph-container-wrapper.fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + max-height: 100vh; + z-index: 9999; + margin: 0; + padding: 20px; + background: var(--bg-primary); + backdrop-filter: blur(10px); + display: flex; + border-radius: 0; + transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); + } + + /* Adjust graph container in fullscreen mode */ + .graph-container-wrapper.fullscreen .graph-container { + position: relative; + width: 60%; + height: 100%; + border-radius: 12px; + margin-right: 20px; + } + + /* Fullscreen Toggle Button */ + .fullscreen-toggle { + position: absolute; + top: 20px; + right: 20px; + width: 40px; + height: 40px; + border-radius: 8px; + background: rgba(30, 41, 59, 0.7); + border: 1px solid var(--border-primary); + color: var(--text-primary); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 4; + transition: all 0.2s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + } + + .fullscreen-toggle:hover { + background: rgba(30, 41, 59, 0.9); + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); + } + + .graph-container-wrapper.fullscreen .fullscreen-toggle { + top: 25px; + right: 25px; + } + + /* Hide one of the fullscreen icons */ + .hidden { + display: none; + } + + /* Full Post Content Panel */ + .full-post-content { + position: absolute; + top: 0; + right: 0; + width: 0; + height: 100%; + overflow: hidden; + transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); + background: var(--bg-secondary); + border-radius: 12px; + opacity: 0; + z-index: 4; + border: 1px solid var(--card-border); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + visibility: hidden; + display: none; + } + + /* Full post panel in fullscreen mode */ + .graph-container-wrapper.fullscreen .full-post-content { + position: relative; + width: 40%; + height: 100%; + background: rgba(30, 41, 59, 0.7); + backdrop-filter: blur(10px); + display: flex; + flex-direction: column; + opacity: 1; + visibility: visible; + } + + .graph-container-wrapper.fullscreen .full-post-content.active { + display: flex; + } + + .full-post-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 1.5rem; + border-bottom: 1px solid var(--border-primary); + } + + .full-post-title { + font-size: 1.5rem; + margin: 0; + color: var(--text-primary); + font-weight: 600; + line-height: 1.3; + } + + .full-post-metadata { + padding: 1rem 1.5rem; + display: flex; + flex-wrap: wrap; + gap: 1rem; + align-items: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + } + + .full-post-category { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; + font-family: var(--font-mono); + } + + .full-post-tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + } + + .post-tag { + background: rgba(16, 185, 129, 0.1); + color: #10B981; + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-size: 0.75rem; + font-family: var(--font-mono); + } + + .full-post-container { + flex: 1; + padding: 1.5rem; + overflow-y: auto; + color: var(--text-primary); + } + + .full-post-container::-webkit-scrollbar { + width: 8px; + } + + .full-post-container::-webkit-scrollbar-track { + background: rgba(30, 41, 59, 0.5); + border-radius: 4px; + } + + .full-post-container::-webkit-scrollbar-thumb { + background: rgba(226, 232, 240, 0.1); + border-radius: 4px; + } + + .full-post-container::-webkit-scrollbar-thumb:hover { + background: rgba(226, 232, 240, 0.2); + } + + .full-post-placeholder { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--text-secondary); + text-align: center; + padding: 2rem; + } + + .full-post-placeholder svg { + margin-bottom: 1rem; + opacity: 0.5; + } + + .post-content { + line-height: 1.7; + font-size: 1rem; + } + + .post-content h1, .post-content h2, .post-content h3, + .post-content h4, .post-content h5, .post-content h6 { + margin-top: 1.5rem; + margin-bottom: 1rem; + color: var(--text-primary); + font-weight: 600; + } + + .post-content p { + margin-bottom: 1.25rem; + } + + .post-content a { + color: var(--accent-primary); + text-decoration: none; + border-bottom: 1px dotted var(--accent-primary); + transition: all 0.2s ease; + } + + .post-content a:hover { + color: var(--accent-secondary); + border-bottom-style: solid; + } + + .post-content pre { + background: rgba(15, 23, 42, 0.6); + padding: 1rem; + border-radius: 6px; + overflow-x: auto; + margin: 1.5rem 0; + border: 1px solid var(--border-primary); + } + + .post-content code { + font-family: var(--font-mono); + font-size: 0.9rem; + } + + .post-content img { + max-width: 100%; + height: auto; + margin: 1.5rem 0; + border-radius: 6px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + } + + .post-content blockquote { + border-left: 4px solid var(--accent-primary); + padding-left: 1rem; + margin-left: 0; + margin-right: 0; + font-style: italic; + color: var(--text-secondary); + } + + .post-content ul, .post-content ol { + padding-left: 1.5rem; + margin-bottom: 1.25rem; + } + + .post-content li { + margin-bottom: 0.5rem; + } + + .full-post-link { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 1rem; + background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); + color: var(--bg-primary); + text-decoration: none; + font-weight: 500; + transition: all 0.3s ease; + } + + .full-post-link:hover { + background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); + } + + /* Media Queries */ + @media screen and (max-width: 992px) { + /* Adjust fullscreen layout for smaller screens */ + .graph-container-wrapper.fullscreen { + flex-direction: column; + padding: 15px; + } + + .graph-container-wrapper.fullscreen .graph-container { + width: 100%; + height: 50%; + margin-right: 0; + margin-bottom: 15px; + } + + .graph-container-wrapper.fullscreen .full-post-content { + width: 100%; + height: 50%; + } + } + + @media screen and (max-width: 768px) { + .fullscreen-toggle { + top: 15px; + right: 15px; + width: 36px; + height: 36px; + } + + .graph-container-wrapper.fullscreen .graph-container { + height: 40%; + } + + .graph-container-wrapper.fullscreen .full-post-content { + height: 60%; + } + + .full-post-header { + padding: 1rem; + } + + .full-post-title { + font-size: 1.25rem; + } + + .full-post-metadata { + padding: 0.75rem 1rem; + } + + .full-post-container { + padding: 1rem; + } + } + + @media screen and (max-width: 480px) { + .graph-container-wrapper.fullscreen { + padding: 10px; + } + + .graph-container-wrapper.fullscreen .graph-container { + height: 35%; + } + + .graph-container-wrapper.fullscreen .full-post-content { + height: 65%; + } + + .full-post-title { + font-size: 1.1rem; + } + } \ No newline at end of file diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index bd6622d..ac3e82c 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -99,17 +99,17 @@ sortedPosts // Terminal commands for tech effect const commands = [ { - prompt: "[laforceit@argobox]$ ", + prompt: "[user@argobox]$ ", command: "find ./posts -type f -name \"*.md\" | sort -n | wc -l", output: [`${allPosts.length} posts found`] }, { - prompt: "[laforceit@argobox]$ ", + prompt: "[user@argobox]$ ", command: "ls -la ./tags", output: allTags.map(tag => `${tag}`) }, { - prompt: "[laforceit@argobox]$ ", + prompt: "[user@argobox]$ ", command: "grep -r \"kubernetes\" --include=\"*.md\" ./posts | wc -l", output: [`${allPosts.filter(post => post.data.tags?.includes('kubernetes') ||