From 7d0851f489ab65c3b926abdb8be856aab901e531 Mon Sep 17 00:00:00 2001 From: Daniel LaForce Date: Sat, 26 Apr 2025 18:36:51 -0600 Subject: [PATCH 1/4] fix(posts): Correct sidebar layout with Author, MiniGraph, Tags --- src/components/KnowledgeGraph.astro | 74 +----------- src/content/posts/Test.md | 10 +- ...ayout.astro => deleteBlogPostLayout.astro} | 58 +++++++++- src/pages/posts/[slug].astro | 109 +++++++++++++++++- 4 files changed, 163 insertions(+), 88 deletions(-) rename src/layouts/{BlogPostLayout.astro => deleteBlogPostLayout.astro} (91%) diff --git a/src/components/KnowledgeGraph.astro b/src/components/KnowledgeGraph.astro index c0e6eb1..5b947ab 100644 --- a/src/components/KnowledgeGraph.astro +++ b/src/components/KnowledgeGraph.astro @@ -192,7 +192,7 @@ const nodeTypeCounts = {
- + Read Full Article @@ -878,42 +878,7 @@ const nodeTypeCounts = { // Reset graph view if "All" is selected cy.elements().removeClass('highlighted faded filtered'); const allFilterBtn = document.querySelector('.graph-filter[data-filter="all"]'); -// Add event listener to prevent redirect in fullscreen mode - if (fullPostLink) { - fullPostLink.addEventListener('click', (e) => { - if (isFullscreen) { - // If in fullscreen, prevent default behavior to keep the user in the graph view - e.preventDefault(); - - // Instead, display a message to exit fullscreen to visit the full article - const message = document.createElement('div'); - message.className = 'fullscreen-message'; - message.textContent = 'Exit fullscreen to visit the full article page'; - message.style.position = 'absolute'; - message.style.bottom = '70px'; // Adjust as needed - message.style.left = '50%'; - message.style.transform = 'translateX(-50%)'; - message.style.background = 'rgba(0, 0, 0, 0.75)'; - message.style.color = 'white'; - message.style.padding = '8px 16px'; - message.style.borderRadius = '4px'; - message.style.zIndex = '1000'; - message.style.transition = 'opacity 0.3s ease'; - - fullPostContent.appendChild(message); - - // Remove the message after 3 seconds - setTimeout(() => { - message.style.opacity = '0'; - setTimeout(() => { - message.remove(); - }, 300); - }, 3000); - } - }); - } - - // Listen for ESC key to exit fullscreen +// Listen for ESC key to exit fullscreen document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isFullscreen) { toggleFullscreen(); @@ -958,41 +923,6 @@ const nodeTypeCounts = { // Dispatch graphReady event for external listeners document.dispatchEvent(new CustomEvent('graphReady', { detail: { cy } })); - // Add event listener to prevent redirect in fullscreen mode - if (fullPostLink) { - fullPostLink.addEventListener('click', (e) => { - if (isFullscreen) { - // If in fullscreen, prevent default behavior to keep the user in the graph view - e.preventDefault(); - - // Instead, display a message to exit fullscreen to visit the full article - const message = document.createElement('div'); - message.className = 'fullscreen-message'; - message.textContent = 'Exit fullscreen to visit the full article page'; - message.style.position = 'absolute'; - message.style.bottom = '70px'; // Adjust as needed - message.style.left = '50%'; - message.style.transform = 'translateX(-50%)'; - message.style.background = 'rgba(0, 0, 0, 0.75)'; - message.style.color = 'white'; - message.style.padding = '8px 16px'; - message.style.borderRadius = '4px'; - message.style.zIndex = '1000'; - message.style.transition = 'opacity 0.3s ease'; - - fullPostContent.appendChild(message); - - // Remove the message after 3 seconds - setTimeout(() => { - message.style.opacity = '0'; - setTimeout(() => { - message.remove(); - }, 300); - }, 3000); - } - }); - } - // Listen for ESC key to exit fullscreen document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isFullscreen) { diff --git a/src/content/posts/Test.md b/src/content/posts/Test.md index a7bbae1..2e17100 100644 --- a/src/content/posts/Test.md +++ b/src/content/posts/Test.md @@ -1,14 +1,12 @@ --- -title: Secure Remote Access with Cloudflare Tunnels +title: This is a test description: How to set up Cloudflare Tunnels for secure remote access to your home lab services pubDate: Jul 22 2023 heroImage: /images/posts/prometheusk8.png category: networking tags: - - cloudflare - - networking - - security - - homelab - - tunnels + - Tag A + - Tag B + - Tag C readTime: "7 min read" --- diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/deleteBlogPostLayout.astro similarity index 91% rename from src/layouts/BlogPostLayout.astro rename to src/layouts/deleteBlogPostLayout.astro index 3082559..3f4d67e 100644 --- a/src/layouts/BlogPostLayout.astro +++ b/src/layouts/deleteBlogPostLayout.astro @@ -2,7 +2,8 @@ import BaseLayout from './BaseLayout.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; -import MiniKnowledgeGraph from '../components/MiniKnowledgeGraph.astro'; // Restore original or keep if needed +// import MiniKnowledgeGraph from '../components/MiniKnowledgeGraph.astro'; // Keep if needed elsewhere, but remove from main content +import MiniGraph from '../components/MiniGraph.astro'; // Add import for MiniGraph import { getCollection } from 'astro:content'; interface Props { @@ -137,11 +138,11 @@ const displayImage = frontmatter.heroImage || '/images/placeholders/default.jpg'
)} - {/* Content Connections - Knowledge Graph */} -
+ {/* Content Connections - Removed MiniKnowledgeGraph from here */} + {/*

Post Connections

-
+
*/} {/* Main Content Area */}
@@ -194,6 +195,24 @@ const displayImage = frontmatter.heroImage || '/images/placeholders/default.jpg'
+ {/* MiniGraph Component - Placed after Author Card */} + + + {/* Tags Section - Placed after MiniGraph */} +
+

Tags

+
+ {frontmatter.tags && frontmatter.tags.map(tag => ( + {tag} + ))} +
+
+ {/* Table of Contents Card */}

Table of Contents

@@ -306,6 +325,37 @@ const displayImage = frontmatter.heroImage || '/images/placeholders/default.jpg' font-style: italic; font-size: 0.9rem; } + + /* Add styles for Tags in the sidebar */ + .tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + + .tag { + color: var(--accent-secondary); + text-decoration: none; + font-size: 0.85rem; + transition: all 0.3s ease; + font-family: var(--font-mono); + background-color: rgba(59, 130, 246, 0.1); + padding: 0.3rem 0.6rem; + border-radius: 4px; + display: inline-block; + } + + .tag:hover { + color: var(--accent-primary); + background-color: rgba(6, 182, 212, 0.15); + transform: translateY(-2px); + } + + .sidebar-title { + font-size: 1.1rem; + margin-bottom: 1rem; + color: var(--text-primary); + } - -