Compare commits
2 Commits
54c8f8d179
...
f1f5ac4b33
| Author | SHA1 | Date |
|---|---|---|
 Daniel LaForce
|
f1f5ac4b33 | |
|
Daniel LaForce
|
2792e86546 |
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Case Study: SharePoint & M365 Migrations | Daniel LaForce</title>
|
||||
<meta name="description" content="Enterprise migration case study: Seamless transition from legacy systems to Microsoft 365 with automation, SharePoint, OneDrive, and Teams integration.">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
.portfolio-header {
|
||||
padding: 2rem 0 1rem;
|
||||
}
|
||||
|
||||
.portfolio-section {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
margin-top: 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<!-- Header/Nav -->
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<a href="index.html">
|
||||
<span class="logo-text-glow">Daniel LaForce</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-menu">
|
||||
<a href="index.html#home" class="nav-link">Home</a>
|
||||
<a href="index.html#portfolio" class="nav-link active">Portfolio</a>
|
||||
<a href="index.html#services" class="nav-link">Services</a>
|
||||
<a href="index.html#lab" class="nav-link">Live Lab</a>
|
||||
<a href="resume.html" class="nav-link">Resume</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Case Study Content -->
|
||||
<section class="portfolio-header">
|
||||
<div class="container">
|
||||
<h1 class="portfolio-title">Case Study: SharePoint & M365 Migrations</h1>
|
||||
<p class="portfolio-subtitle">Modernizing enterprise collaboration and storage through Microsoft 365</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio-section">
|
||||
<div class="container">
|
||||
<div class="project-card">
|
||||
<div class="project-content">
|
||||
<h3 class="project-title">Client Overview</h3>
|
||||
<p class="project-description">
|
||||
A mid-sized professional services firm relied on Dropbox, Egnyte, Google Workspace, and on-prem file servers to manage daily operations. The IT environment was fragmented, increasing operational complexity and impeding secure collaboration. They needed a scalable solution to unify infrastructure, reduce support load, and enhance productivity.
|
||||
</p>
|
||||
|
||||
<h3 class="project-title">Objectives</h3>
|
||||
<ul>
|
||||
<li>Consolidate file and email services under Microsoft 365</li>
|
||||
<li>Minimize business disruption during migration</li>
|
||||
<li>Strengthen compliance, backup, and access control</li>
|
||||
<li>Enable centralized collaboration with Microsoft Teams</li>
|
||||
</ul>
|
||||
<br>
|
||||
<h3 class="project-title">Solution Strategy</h3>
|
||||
<ul>
|
||||
<li>Provisioned a temporary VM to act as a synchronized landing zone for Egnyte and local file server data</li>
|
||||
<li>Used Egnyte’s API and command-line tools to batch-export permissions and files to the sync VM</li>
|
||||
<li>Ran Microsoft’s SharePoint Migration Tool (SPMT) with JSON-based mapping to import content into SharePoint document libraries</li>
|
||||
<li>Automated pre/post migration checks and permissions auditing via PowerShell and Graph API</li>
|
||||
<li>Staged migration of mail and calendar data using MigrationWiz with coexistence enabled between Google Workspace and Exchange Online</li>
|
||||
<li>Provided Teams onboarding with channel templates and cross-platform training</li>
|
||||
</ul>
|
||||
<br>
|
||||
<h3 class="project-title">Results</h3>
|
||||
<ul>
|
||||
<li>12.4 TB of content migrated across four platforms in under 90 days</li>
|
||||
<li>Zero data loss or permission mismatches confirmed via script-based audits</li>
|
||||
<li>Helpdesk load cut by 40% within the first month post-migration</li>
|
||||
<li>Fully adopted Microsoft Teams structure with defined department-based channels and integrated file repositories</li>
|
||||
<li>End-user training boosted post-migration satisfaction to 97%</li>
|
||||
</ul>
|
||||
|
||||
<div class="project-skills">
|
||||
<span class="skill-tag">SharePoint Online</span>
|
||||
<span class="skill-tag">OneDrive</span>
|
||||
<span class="skill-tag">Teams</span>
|
||||
<span class="skill-tag">Exchange Online</span>
|
||||
<span class="skill-tag">PowerShell</span>
|
||||
<span class="skill-tag">Migration Tools</span>
|
||||
<span class="skill-tag">Egnyte API</span>
|
||||
<span class="skill-tag">SPMT</span>
|
||||
</div>
|
||||
|
||||
<div class="project-links">
|
||||
<a href="/index.html#portfolio" class="project-link"><i class="fas fa-arrow-left"></i> Back to Portfolio</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">
|
||||
<span class="logo-text-glow">Daniel LaForce</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="/index.html#home">Home</a>
|
||||
<a href="/index.html#portfolio">Portfolio</a>
|
||||
<a href="/index.html#services">Services</a>
|
||||
<a href="/index.html#lab">Live Lab</a>
|
||||
<a href="/resume.html">Resume</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© All rights reserved. LaForceIT.com</p>
|
||||
<p class="disclaimer">Custom-built with HTML, CSS, and JavaScript.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// MiniGraph.astro - A standalone mini knowledge graph component with fullscreen capability
|
||||
// This component is designed to work independently from the blog structure
|
||||
// This component is designed to work independently from the blog structure and now includes content previews
|
||||
|
||||
// Define props interface
|
||||
interface Props {
|
||||
|
|
@ -8,8 +8,10 @@ interface Props {
|
|||
title: string; // Current post title
|
||||
tags?: string[]; // Current post tags
|
||||
category?: string; // Current post category
|
||||
relatedPosts?: any[]; // Related posts data
|
||||
content?: string; // Current post content HTML
|
||||
relatedPosts?: any[]; // Related posts data with their content
|
||||
allPosts?: any[]; // All posts for second level relationships
|
||||
width?: string; // Optional width parameter
|
||||
}
|
||||
|
||||
// Extract props with defaults
|
||||
|
|
@ -18,8 +20,10 @@ const {
|
|||
title,
|
||||
tags = [],
|
||||
category = "Uncategorized",
|
||||
content = "", // Add content property for current post
|
||||
relatedPosts = [],
|
||||
allPosts = []
|
||||
allPosts = [],
|
||||
width = "100%" // Default width of the component
|
||||
} = Astro.props;
|
||||
|
||||
// Generate unique ID for the graph container
|
||||
|
|
@ -30,6 +34,9 @@ const relatedPostsTags = relatedPosts
|
|||
.flatMap(post => post.data.tags || [])
|
||||
.filter(tag => !tags.includes(tag)); // Exclude current post tags to avoid duplicates
|
||||
|
||||
// Create a set of all Level 1 nodes' tags for filtering Level 2 tags
|
||||
const level1TagsSet = new Set([...tags, ...relatedPostsTags]);
|
||||
|
||||
// Get Level 2 posts: posts related to Level 1 tags (excluding current post and Level 1 posts)
|
||||
const level2PostIds = new Set();
|
||||
const level2Posts = [];
|
||||
|
|
@ -38,21 +45,22 @@ const level2Posts = [];
|
|||
tags.forEach(tag => {
|
||||
allPosts.forEach(post => {
|
||||
// Skip if post is current post or already in related posts
|
||||
if (post.slug === slug || relatedPosts.some(rp => rp.slug === post.slug)) {
|
||||
if (post.slug === slug || relatedPosts.some(rp => rp.slug === post.slug) || level2PostIds.has(post.slug)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If post has the tag and isn't already added
|
||||
if (post.data.tags?.includes(tag) && !level2PostIds.has(post.slug)) {
|
||||
// If post has the tag, add it to Level 2
|
||||
if (post.data.tags?.includes(tag)) {
|
||||
level2PostIds.add(post.slug);
|
||||
level2Posts.push(post);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Get Level 2 tags from Level 2 posts
|
||||
// Only collect Level 2 tags that are directly linked to Level 1 posts
|
||||
// This fixes the issue where unrelated Level 2 tags were being included
|
||||
const level2Tags = new Set();
|
||||
level2Posts.forEach(post => {
|
||||
relatedPosts.forEach(post => {
|
||||
(post.data.tags || []).forEach(tag => {
|
||||
// Only add if not already in Level 0 or Level 1 tags
|
||||
if (!tags.includes(tag) && !relatedPostsTags.includes(tag)) {
|
||||
|
|
@ -70,46 +78,97 @@ const nodes = [
|
|||
type: "post",
|
||||
level: 0,
|
||||
category: category,
|
||||
tags: tags
|
||||
tags: tags,
|
||||
content: content, // Add content for the current post (as HTML string)
|
||||
url: `/posts/${slug}/`
|
||||
},
|
||||
// Level 1: Tag nodes
|
||||
...tags.map(tag => ({
|
||||
id: `tag-${tag}`,
|
||||
label: tag,
|
||||
type: "tag",
|
||||
level: 1
|
||||
level: 1,
|
||||
url: `/tag/${tag}/`
|
||||
})),
|
||||
// Level 1: Related post nodes
|
||||
...relatedPosts.map(post => ({
|
||||
...relatedPosts.map(post => {
|
||||
// Extract content from post object - this will vary based on your data structure
|
||||
// Try multiple properties where content might be stored
|
||||
let postContent = '';
|
||||
if (post.data.content) {
|
||||
postContent = post.data.content;
|
||||
} else if (post.data.body) {
|
||||
postContent = post.data.body;
|
||||
} else if (post.data.html) {
|
||||
postContent = post.data.html;
|
||||
} else if (post.content) {
|
||||
postContent = post.content;
|
||||
} else if (post.body) {
|
||||
postContent = post.body;
|
||||
} else if (post.html) {
|
||||
postContent = post.html;
|
||||
} else if (post.data.excerpt) {
|
||||
postContent = post.data.excerpt;
|
||||
}
|
||||
|
||||
return {
|
||||
id: post.slug,
|
||||
label: post.data.title,
|
||||
type: "post",
|
||||
level: 1,
|
||||
category: post.data.category || "Uncategorized",
|
||||
tags: post.data.tags || []
|
||||
})),
|
||||
// Level 2: Related tags nodes
|
||||
tags: post.data.tags || [],
|
||||
content: postContent, // Add content as HTML string
|
||||
url: `/posts/${post.slug}/`
|
||||
};
|
||||
}),
|
||||
// Level 2: Related tags nodes (Tags from Level 1 posts)
|
||||
...relatedPostsTags.map(tag => ({
|
||||
id: `tag-${tag}`,
|
||||
label: tag,
|
||||
type: "tag",
|
||||
level: 2
|
||||
level: 2,
|
||||
url: `/tag/${tag}/`
|
||||
})),
|
||||
// Level 2: Posts related to tags
|
||||
...level2Posts.map(post => ({
|
||||
// Level 2: Posts related to tags (Posts connected to Level 1 tags)
|
||||
...level2Posts.map(post => {
|
||||
// Extract content from level 2 posts
|
||||
let postContent = '';
|
||||
if (post.data.content) {
|
||||
postContent = post.data.content;
|
||||
} else if (post.data.body) {
|
||||
postContent = post.data.body;
|
||||
} else if (post.data.html) {
|
||||
postContent = post.data.html;
|
||||
} else if (post.content) {
|
||||
postContent = post.content;
|
||||
} else if (post.body) {
|
||||
postContent = post.body;
|
||||
} else if (post.html) {
|
||||
postContent = post.html;
|
||||
} else if (post.data.excerpt) {
|
||||
postContent = post.data.excerpt;
|
||||
}
|
||||
|
||||
return {
|
||||
id: post.slug,
|
||||
label: post.data.title,
|
||||
type: "post",
|
||||
level: 2,
|
||||
category: post.data.category || "Uncategorized",
|
||||
tags: post.data.tags || []
|
||||
})),
|
||||
// Level 2: Tags from Level 2 posts
|
||||
tags: post.data.tags || [],
|
||||
content: postContent, // Add content as HTML string
|
||||
url: `/posts/${post.slug}/`
|
||||
};
|
||||
}),
|
||||
// Level 2: Tags from Level 1 posts (only tags directly connected to Level 1 posts)
|
||||
// This was the corrected logic for level2Tags Set
|
||||
...[...level2Tags].map(tag => ({
|
||||
id: `tag-${tag}`,
|
||||
label: tag.toString(),
|
||||
type: "tag",
|
||||
level: 2
|
||||
level: 2,
|
||||
url: `/tag/${tag.toString()}/`
|
||||
}))
|
||||
];
|
||||
|
||||
|
|
@ -132,7 +191,7 @@ const edges = [
|
|||
(post.data.tags || []).map(tag => ({
|
||||
source: post.slug,
|
||||
target: `tag-${tag}`,
|
||||
type: "post-tag"
|
||||
type: "post-tag" // Re-using post-tag type for simplicity
|
||||
}))
|
||||
),
|
||||
// Level 1 to Level 2: Tags to related posts
|
||||
|
|
@ -140,11 +199,12 @@ const edges = [
|
|||
tags.filter(tag => post.data.tags?.includes(tag)).map(tag => ({
|
||||
source: `tag-${tag}`,
|
||||
target: post.slug,
|
||||
type: "tag-post"
|
||||
type: "tag-post" // New type for tag -> post connection
|
||||
}))
|
||||
)
|
||||
];
|
||||
|
||||
|
||||
// Prepare graph data object
|
||||
const graphData = { nodes, edges };
|
||||
|
||||
|
|
@ -158,8 +218,8 @@ const predefinedColors = {
|
|||
};
|
||||
---
|
||||
|
||||
<!-- Super simple HTML structure -->
|
||||
<div class="knowledge-graph-wrapper">
|
||||
<!-- Enhanced HTML structure with specified width -->
|
||||
<div class="knowledge-graph-wrapper" style={`width: ${width};`}>
|
||||
<h4 class="graph-title">Post Connections</h4>
|
||||
<div id={graphId} class="mini-graph-container"></div>
|
||||
|
||||
|
|
@ -180,7 +240,7 @@ const predefinedColors = {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Fullscreen container (initially hidden) -->
|
||||
<!-- Fullscreen container (initially hidden) with enhanced info panel -->
|
||||
<div id={`${graphId}-fullscreen`} class="fullscreen-container">
|
||||
<div class="fullscreen-header">
|
||||
<div class="fullscreen-title">Knowledge Graph</div>
|
||||
|
|
@ -196,7 +256,7 @@ const predefinedColors = {
|
|||
<!-- Fullscreen graph container -->
|
||||
<div id={`${graphId}-fullscreen-graph`} class="fullscreen-graph"></div>
|
||||
|
||||
<!-- Info panel -->
|
||||
<!-- Enhanced Info panel with content preview capability -->
|
||||
<div id={`${graphId}-info-panel`} class="info-panel">
|
||||
<div class="info-panel-header">
|
||||
<h3 id={`${graphId}-info-title`} class="info-title">Node Info</h3>
|
||||
|
|
@ -224,12 +284,29 @@ const predefinedColors = {
|
|||
<div id={`${graphId}-info-tags`} class="tags-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced content preview section -->
|
||||
<div id={`${graphId}-content-preview-container`} class="content-preview-container">
|
||||
<span class="info-label">Content Preview:</span>
|
||||
<div id={`${graphId}-content-preview`} class="content-preview">
|
||||
<div class="content-placeholder">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
<p>Select a post to view content preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-connections">
|
||||
<span class="info-label">Connections:</span>
|
||||
<ul id={`${graphId}-info-connections`} class="connections-list"></ul>
|
||||
</div>
|
||||
|
||||
<a href="#" id={`${graphId}-info-link`} class="info-link" target="_self">View Content</a>
|
||||
<a href="#" id={`${graphId}-info-link`} class="info-link" target="_blank" rel="noopener noreferrer">View Content</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -237,17 +314,18 @@ const predefinedColors = {
|
|||
|
||||
<!-- Minimal CSS -->
|
||||
<style>
|
||||
/* Base styles for mini graph */
|
||||
/* Base styles for mini graph - 30% larger */
|
||||
.knowledge-graph-wrapper {
|
||||
width: 100%;
|
||||
width: 100%; /* Width will be set by style attribute */
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.graph-title {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text-primary, #e2e8f0);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mini-graph-container {
|
||||
|
|
@ -257,6 +335,7 @@ const predefinedColors = {
|
|||
overflow: hidden;
|
||||
border: 1px solid var(--card-border, rgba(56, 189, 248, 0.2));
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
min-height: 250px; /* Ensure minimum height */
|
||||
}
|
||||
|
||||
/* Fullscreen toggle button */
|
||||
|
|
@ -277,9 +356,15 @@ const predefinedColors = {
|
|||
z-index: 2;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0; /* Hidden by default, shown on hover */
|
||||
}
|
||||
|
||||
.knowledge-graph-wrapper:hover .fullscreen-toggle {
|
||||
opacity: 0.7; /* Show on hover */
|
||||
}
|
||||
|
||||
.fullscreen-toggle:hover {
|
||||
opacity: 1;
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
|
@ -359,7 +444,7 @@ const predefinedColors = {
|
|||
|
||||
/* Info panel */
|
||||
.info-panel {
|
||||
width: 0;
|
||||
width: 0; /* Hidden by default */
|
||||
height: 100%;
|
||||
background: var(--bg-secondary, #1e293b);
|
||||
transition: width 0.3s ease;
|
||||
|
|
@ -369,7 +454,9 @@ const predefinedColors = {
|
|||
}
|
||||
|
||||
.info-panel.active {
|
||||
width: 350px;
|
||||
width: 45%; /* Percentage-based width for better responsiveness */
|
||||
min-width: 400px; /* Minimum width to ensure content is readable */
|
||||
max-width: 500px; /* Maximum width to prevent overflow on large screens */
|
||||
}
|
||||
|
||||
.info-panel-header {
|
||||
|
|
@ -411,7 +498,7 @@ const predefinedColors = {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.info-type, .info-category, .info-tags, .info-connections {
|
||||
.info-type, .info-category, .info-tags, .info-connections, .content-preview-container {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -486,6 +573,7 @@ const predefinedColors = {
|
|||
color: var(--accent-primary, #38bdf8);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.connections-list a:hover {
|
||||
|
|
@ -493,6 +581,205 @@ const predefinedColors = {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Content Preview Styles - Enhanced */
|
||||
.content-preview-container {
|
||||
border-top: 1px solid var(--border-primary, rgba(56, 189, 248, 0.1));
|
||||
padding-top: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
max-height: 350px; /* Taller content area */
|
||||
overflow-y: auto;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-primary, rgba(56, 189, 248, 0.1));
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.content-preview::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.content-preview::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.content-preview::-webkit-scrollbar-thumb {
|
||||
background: rgba(56, 189, 248, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.content-preview::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(56, 189, 248, 0.3);
|
||||
}
|
||||
|
||||
.content-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
color: var(--text-tertiary, #64748b);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-placeholder svg {
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.content-placeholder p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.placeholder-note {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Styling for post content preview */
|
||||
.post-content-preview {
|
||||
font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
|
||||
}
|
||||
|
||||
.post-content-preview h1,
|
||||
.post-content-preview h2,
|
||||
.post-content-preview h3,
|
||||
.post-content-preview h4,
|
||||
.post-content-preview h5,
|
||||
.post-content-preview h6 {
|
||||
color: var(--text-primary, #e2e8f0);
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.post-content-preview h1 { font-size: 1.4rem; }
|
||||
.post-content-preview h2 { font-size: 1.25rem; }
|
||||
.post-content-preview h3 { font-size: 1.1rem; }
|
||||
.post-content-preview h4,
|
||||
.post-content-preview h5,
|
||||
.post-content-preview h6 { font-size: 1rem; }
|
||||
|
||||
.post-content-preview p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-content-preview a {
|
||||
color: var(--accent-primary, #38bdf8);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted var(--accent-primary, #38bdf8);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.post-content-preview a:hover {
|
||||
color: var(--accent-secondary, #06b6d4);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.post-content-preview img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.post-content-preview code {
|
||||
font-family: var(--font-mono, monospace);
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.post-content-preview pre {
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid var(--border-primary, rgba(56, 189, 248, 0.1));
|
||||
}
|
||||
|
||||
.post-content-preview pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font-size: 0.85em;
|
||||
color: var(--text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.post-content-preview blockquote {
|
||||
border-left: 3px solid var(--accent-primary, #38bdf8);
|
||||
padding-left: 1rem;
|
||||
margin-left: 0;
|
||||
color: var(--text-secondary, #94a3b8);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.post-content-preview ul,
|
||||
.post-content-preview ol {
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-content-preview li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Tag Posts Styling */
|
||||
.tag-posts-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
/* Tag List Styles for tag nodes */
|
||||
.related-posts-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
.related-posts-list li {
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.related-posts-list li:hover {
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
}
|
||||
|
||||
.related-posts-list a {
|
||||
color: var(--accent-primary, #38bdf8);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.related-posts-list a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.related-posts-category {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.info-link {
|
||||
display: block;
|
||||
background: linear-gradient(90deg, var(--accent-primary, #38bdf8), var(--accent-secondary, #06b6d4));
|
||||
|
|
@ -526,12 +813,16 @@ const predefinedColors = {
|
|||
|
||||
.info-panel {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
height: 0; /* Start hidden */
|
||||
}
|
||||
|
||||
.info-panel.active {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
height: 40%; /* Take remaining space */
|
||||
}
|
||||
|
||||
.content-preview {
|
||||
max-height: 150px; /* Smaller height on mobile */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -584,6 +875,7 @@ const predefinedColors = {
|
|||
let cy = null; // Mini graph instance
|
||||
let cyFullscreen = null; // Fullscreen graph instance
|
||||
let originalStyles = {}; // To restore page layout after exiting fullscreen
|
||||
let selectedNode = null; // Currently selected node for fullscreen interactions
|
||||
|
||||
try {
|
||||
// Check if we have any nodes
|
||||
|
|
@ -619,9 +911,11 @@ const predefinedColors = {
|
|||
level: node.level,
|
||||
category: node.category,
|
||||
tags: node.tags || [],
|
||||
content: node.content || '', // Include content for post nodes
|
||||
color: nodeColor,
|
||||
opacity: levelOpacity,
|
||||
size: nodeSize
|
||||
size: nodeSize,
|
||||
url: node.url || '#'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -791,6 +1085,11 @@ const predefinedColors = {
|
|||
cy.on('tap', 'node', function(evt) {
|
||||
const node = evt.target;
|
||||
highlightNode(node, cy);
|
||||
// Navigate on click in mini-graph
|
||||
const url = node.data('url');
|
||||
if (url && url !== '#') {
|
||||
window.location.href = url;
|
||||
}
|
||||
});
|
||||
|
||||
// Add fullscreen toggle functionality if the button exists
|
||||
|
|
@ -840,6 +1139,13 @@ const predefinedColors = {
|
|||
// Initialize fullscreen graph if not already done
|
||||
if (!cyFullscreen && fullscreenGraph) {
|
||||
initFullscreenGraph();
|
||||
} else if (cyFullscreen) {
|
||||
// If already initialized, just resize and fit
|
||||
setTimeout(() => {
|
||||
cyFullscreen.resize();
|
||||
cyFullscreen.fit(undefined, 30);
|
||||
cyFullscreen.center();
|
||||
}, 50); // Small delay for transition
|
||||
}
|
||||
|
||||
// Prevent body scroll
|
||||
|
|
@ -869,6 +1175,14 @@ const predefinedColors = {
|
|||
|
||||
// Allow body scroll again
|
||||
document.body.style.overflow = '';
|
||||
|
||||
// Resize mini graph after exit
|
||||
setTimeout(() => {
|
||||
if (cy) {
|
||||
cy.resize();
|
||||
cy.fit(undefined, 20);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// Save original styles of page elements before entering fullscreen
|
||||
|
|
@ -879,8 +1193,8 @@ const predefinedColors = {
|
|||
};
|
||||
|
||||
// Check for sidebar, content containers, etc. and save their styles
|
||||
const sidebar = document.querySelector('.sidebar, aside, nav');
|
||||
const mainContent = document.querySelector('main, .content, article');
|
||||
const sidebar = document.querySelector('.post-sidebar'); // Use specific class
|
||||
const mainContent = document.querySelector('.post-main-column'); // Use specific class
|
||||
|
||||
if (sidebar) {
|
||||
originalStyles.sidebar = {
|
||||
|
|
@ -888,7 +1202,10 @@ const predefinedColors = {
|
|||
display: sidebar.style.display,
|
||||
visibility: sidebar.style.visibility,
|
||||
position: sidebar.style.position,
|
||||
zIndex: sidebar.style.zIndex
|
||||
zIndex: sidebar.style.zIndex,
|
||||
width: sidebar.style.width, // Save width too
|
||||
flex: sidebar.style.flex,
|
||||
gridColumn: sidebar.style.gridColumn
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -909,19 +1226,26 @@ const predefinedColors = {
|
|||
// Restore sidebar if it exists
|
||||
if (originalStyles.sidebar && originalStyles.sidebar.element) {
|
||||
const sidebar = originalStyles.sidebar.element;
|
||||
sidebar.style.display = originalStyles.sidebar.display;
|
||||
sidebar.style.visibility = originalStyles.sidebar.visibility;
|
||||
sidebar.style.position = originalStyles.sidebar.position;
|
||||
sidebar.style.zIndex = originalStyles.sidebar.zIndex;
|
||||
Object.assign(sidebar.style, originalStyles.sidebar); // Restore all saved styles
|
||||
sidebar.style.removeProperty('position'); // Ensure position is reset if it was static
|
||||
}
|
||||
|
||||
// Restore main content if it exists
|
||||
if (originalStyles.mainContent && originalStyles.mainContent.element) {
|
||||
const mainContent = originalStyles.mainContent.element;
|
||||
mainContent.style.marginLeft = originalStyles.mainContent.marginLeft;
|
||||
mainContent.style.width = originalStyles.mainContent.width;
|
||||
mainContent.style.maxWidth = originalStyles.mainContent.maxWidth;
|
||||
Object.assign(mainContent.style, originalStyles.mainContent);
|
||||
}
|
||||
|
||||
// Force reflow to ensure styles apply correctly
|
||||
setTimeout(() => {
|
||||
const contentArea = document.querySelector('.post-content');
|
||||
if (contentArea) {
|
||||
const display = contentArea.style.display;
|
||||
contentArea.style.display = 'none';
|
||||
void contentArea.offsetHeight; // Trigger reflow
|
||||
contentArea.style.display = display;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// Initialize the fullscreen graph
|
||||
|
|
@ -969,6 +1293,7 @@ const predefinedColors = {
|
|||
// Click on node to show info
|
||||
cyFullscreen.on('tap', 'node', function(evt) {
|
||||
const node = evt.target;
|
||||
selectedNode = node; // Store the selected node
|
||||
const nodeData = node.data();
|
||||
|
||||
// Highlight the selected node
|
||||
|
|
@ -983,6 +1308,7 @@ const predefinedColors = {
|
|||
if (evt.target === cyFullscreen) {
|
||||
// Remove highlights
|
||||
cyFullscreen.elements().removeClass('highlighted faded');
|
||||
selectedNode = null;
|
||||
|
||||
// Hide info panel
|
||||
if (infoPanel) {
|
||||
|
|
@ -1005,50 +1331,57 @@ const predefinedColors = {
|
|||
cyInstance.elements().difference(node.neighborhood().union(node)).addClass('faded');
|
||||
}
|
||||
|
||||
// Show node info in the panel
|
||||
// Enhanced showNodeInfo function to properly display content previews
|
||||
function showNodeInfo(nodeData) {
|
||||
if (!infoPanel) return;
|
||||
|
||||
// Get elements inside the panel
|
||||
const infoTitleEl = document.getElementById(`${graphId}-info-title`);
|
||||
const infoTypeEl = document.getElementById(`${graphId}-info-type`);
|
||||
const categoryContainerEl = document.getElementById(`${graphId}-info-category-container`);
|
||||
const categoryEl = document.getElementById(`${graphId}-info-category`);
|
||||
const tagsContainerEl = document.getElementById(`${graphId}-info-tags-container`);
|
||||
const tagsEl = document.getElementById(`${graphId}-info-tags`);
|
||||
const contentPreviewContainerEl = document.getElementById(`${graphId}-content-preview-container`);
|
||||
const contentPreviewEl = document.getElementById(`${graphId}-content-preview`);
|
||||
const connectionsEl = document.getElementById(`${graphId}-info-connections`);
|
||||
const linkEl = document.getElementById(`${graphId}-info-link`);
|
||||
|
||||
// Set node title
|
||||
document.getElementById(`${graphId}-info-title`).textContent = nodeData.label;
|
||||
if (infoTitleEl) infoTitleEl.textContent = nodeData.label;
|
||||
|
||||
// Set node type
|
||||
const typeEl = document.getElementById(`${graphId}-info-type`);
|
||||
typeEl.textContent = nodeData.type.charAt(0).toUpperCase() + nodeData.type.slice(1);
|
||||
typeEl.className = `info-value type-value ${nodeData.type}-type`;
|
||||
if (infoTypeEl) {
|
||||
infoTypeEl.textContent = nodeData.type.charAt(0).toUpperCase() + nodeData.type.slice(1);
|
||||
infoTypeEl.className = `info-value type-value ${nodeData.type}-type`;
|
||||
}
|
||||
|
||||
// Set category if it's a post
|
||||
const categoryContainer = document.getElementById(`${graphId}-info-category-container`);
|
||||
const categoryEl = document.getElementById(`${graphId}-info-category`);
|
||||
|
||||
if (categoryContainerEl && categoryEl) {
|
||||
if (nodeData.type === 'post' && nodeData.category) {
|
||||
categoryContainer.style.display = 'block';
|
||||
categoryContainerEl.style.display = 'block';
|
||||
categoryEl.textContent = nodeData.category;
|
||||
|
||||
// Use category colors
|
||||
const catColor = predefinedColors[nodeData.category] || '#A0AEC0';
|
||||
categoryEl.style.backgroundColor = `${catColor}33`; // Add alpha
|
||||
categoryEl.style.backgroundColor = `${catColor}33`;
|
||||
categoryEl.style.color = catColor;
|
||||
} else {
|
||||
categoryContainer.style.display = 'none';
|
||||
categoryContainerEl.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Set tags
|
||||
const tagsContainer = document.getElementById(`${graphId}-info-tags-container`);
|
||||
const tagsEl = document.getElementById(`${graphId}-info-tags`);
|
||||
|
||||
if (nodeData.type === 'post' && nodeData.tags && nodeData.tags.length > 0) {
|
||||
tagsContainer.style.display = 'block';
|
||||
if (tagsContainerEl && tagsEl) {
|
||||
if (nodeData.tags && nodeData.tags.length > 0) {
|
||||
tagsContainerEl.style.display = 'block';
|
||||
tagsEl.innerHTML = '';
|
||||
|
||||
nodeData.tags.forEach(tag => {
|
||||
const tagEl = document.createElement('span');
|
||||
tagEl.className = 'tag';
|
||||
tagEl.textContent = tag;
|
||||
tagEl.addEventListener('click', () => {
|
||||
// Try to find and highlight the tag node
|
||||
const tagNode = cyFullscreen.getElementById(`tag-${tag}`);
|
||||
if (tagNode.length > 0) {
|
||||
selectedNode = tagNode; // Update selected node
|
||||
highlightNode(tagNode, cyFullscreen);
|
||||
showNodeInfo(tagNode.data());
|
||||
}
|
||||
|
|
@ -1056,14 +1389,114 @@ const predefinedColors = {
|
|||
tagsEl.appendChild(tagEl);
|
||||
});
|
||||
} else {
|
||||
tagsContainer.style.display = 'none';
|
||||
tagsContainerEl.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Set connections
|
||||
const connectionsEl = document.getElementById(`${graphId}-info-connections`);
|
||||
connectionsEl.innerHTML = '';
|
||||
// Show or hide content preview based on node type
|
||||
if (contentPreviewContainerEl && contentPreviewEl) {
|
||||
// First, clear any previous content
|
||||
contentPreviewEl.innerHTML = '';
|
||||
|
||||
if (nodeData.type === 'post') {
|
||||
// Always show content container for post nodes, even if content is missing
|
||||
contentPreviewContainerEl.style.display = 'block';
|
||||
|
||||
if (nodeData.content && nodeData.content.trim() !== '') {
|
||||
// We have content to display
|
||||
contentPreviewEl.innerHTML = `
|
||||
<div class="post-content-preview">
|
||||
${nodeData.content}
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// No content available, show placeholder
|
||||
contentPreviewEl.innerHTML = `
|
||||
<div class="content-placeholder">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
<p>No content preview available</p>
|
||||
<p class="placeholder-note">Click the link below to read the full post</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} else if (nodeData.type === 'tag') {
|
||||
// For tag nodes, show related posts instead
|
||||
contentPreviewContainerEl.style.display = 'block';
|
||||
|
||||
// Find posts that are connected to this tag
|
||||
const tagId = nodeData.id;
|
||||
const currentNode = cyFullscreen.getElementById(tagId);
|
||||
const connectedPosts = currentNode.neighborhood('node[type="post"]');
|
||||
|
||||
if (connectedPosts.length > 0) {
|
||||
contentPreviewEl.innerHTML = `
|
||||
<div class="tag-related-posts">
|
||||
<h4 class="tag-posts-title">Posts with tag "${nodeData.label}":</h4>
|
||||
<ul class="related-posts-list">
|
||||
${Array.from(connectedPosts).map(post => {
|
||||
const postData = post.data();
|
||||
const categoryColor = postData.category && predefinedColors[postData.category]
|
||||
? predefinedColors[postData.category]
|
||||
: '#A0AEC0';
|
||||
|
||||
return `
|
||||
<li>
|
||||
<a href="#" class="related-post-link" data-node-id="${postData.id}">
|
||||
${postData.label}
|
||||
</a>
|
||||
${postData.category ? `
|
||||
<span class="related-posts-category" style="background-color:${categoryColor}33;color:${categoryColor}">
|
||||
${postData.category}
|
||||
</span>
|
||||
` : ''}
|
||||
</li>
|
||||
`;
|
||||
}).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add click handlers for related posts
|
||||
setTimeout(() => {
|
||||
const relatedPostLinks = contentPreviewEl.querySelectorAll('.related-post-link');
|
||||
relatedPostLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const nodeId = link.getAttribute('data-node-id');
|
||||
const postNode = cyFullscreen.getElementById(nodeId);
|
||||
if (postNode.length > 0) {
|
||||
selectedNode = postNode;
|
||||
highlightNode(postNode, cyFullscreen);
|
||||
showNodeInfo(postNode.data());
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 10); // Small delay to ensure elements are rendered
|
||||
} else {
|
||||
contentPreviewEl.innerHTML = `
|
||||
<div class="content-placeholder">
|
||||
<p>No posts connected to tag "${nodeData.label}" in the current view.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
// Hide for other node types
|
||||
contentPreviewContainerEl.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Set connections - now with interactive links
|
||||
if (connectionsEl) {
|
||||
connectionsEl.innerHTML = '';
|
||||
const currentNode = cyFullscreen.getElementById(nodeData.id); // Get current node from fullscreen instance
|
||||
const neighbors = currentNode.neighborhood('node');
|
||||
|
||||
const neighbors = cyFullscreen.getElementById(nodeData.id).neighborhood('node');
|
||||
if (neighbors.length > 0) {
|
||||
neighbors.forEach(neighbor => {
|
||||
const neighborData = neighbor.data();
|
||||
|
|
@ -1073,6 +1506,7 @@ const predefinedColors = {
|
|||
a.textContent = neighborData.label;
|
||||
a.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
selectedNode = neighbor; // Update selected node
|
||||
highlightNode(neighbor, cyFullscreen);
|
||||
showNodeInfo(neighborData);
|
||||
});
|
||||
|
|
@ -1084,36 +1518,26 @@ const predefinedColors = {
|
|||
li.textContent = 'No connections';
|
||||
connectionsEl.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
// Set link based on node type
|
||||
const linkEl = document.getElementById(`${graphId}-info-link`);
|
||||
// Set link based on node type - dynamic text and URL
|
||||
if (linkEl) {
|
||||
if (nodeData.type === 'post') {
|
||||
linkEl.textContent = 'Read Post';
|
||||
linkEl.href = `/posts/${nodeData.id}/`;
|
||||
linkEl.href = nodeData.url || `/posts/${nodeData.id}/`;
|
||||
} else if (nodeData.type === 'tag') {
|
||||
linkEl.textContent = 'View Tag';
|
||||
linkEl.href = `/tag/${nodeData.label}/`;
|
||||
linkEl.href = nodeData.url || `/tag/${nodeData.label}/`;
|
||||
} else {
|
||||
linkEl.textContent = 'View Content';
|
||||
linkEl.href = '#';
|
||||
linkEl.href = nodeData.url || '#';
|
||||
}
|
||||
}
|
||||
|
||||
// Show the panel
|
||||
infoPanel.classList.add('active');
|
||||
}
|
||||
|
||||
// Make nodes clickable in mini graph
|
||||
cy.on('tap', 'node[type="tag"]', function(evt) {
|
||||
const node = evt.target;
|
||||
const tagName = node.data('label');
|
||||
window.location.href = `/tag/${tagName}`;
|
||||
});
|
||||
|
||||
cy.on('tap', 'node[type="post"][level!=0]', function(evt) {
|
||||
const node = evt.target;
|
||||
const postSlug = node.id();
|
||||
window.location.href = `/posts/${postSlug}/`;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[MiniGraph] Error initializing graph:', error);
|
||||
container.innerHTML = '<div style="padding:10px;color:#a0aec0;text-align:center;">Error loading graph</div>';
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
import { getCollection } from 'astro:content';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import MiniGraph from '../../components/MiniGraph.astro';
|
||||
import Header from '../../components/Header.astro'; // Added import
|
||||
import Footer from '../../components/Footer.astro'; // Added import
|
||||
|
||||
// Required getStaticPaths function for dynamic routes
|
||||
export async function getStaticPaths() {
|
||||
|
|
@ -131,9 +133,37 @@ const combinedRelatedPosts = [
|
|||
|
||||
// Get the Content component for rendering markdown
|
||||
const { Content } = await post.render();
|
||||
|
||||
// Capture rendered content in a string for MiniGraph
|
||||
// Note: This is a simplified approach. A more robust method might be needed
|
||||
// if Content.toString() doesn't reliably produce HTML.
|
||||
let renderedContent = '';
|
||||
try {
|
||||
const contentRender = await post.render();
|
||||
renderedContent = contentRender.Content ? contentRender.Content.toString() : '';
|
||||
} catch (e) {
|
||||
console.error(`Error rendering content for post ${post.slug}:`, e);
|
||||
}
|
||||
|
||||
// Prepare related posts with content (best effort)
|
||||
const relatedPostsWithContent = await Promise.all(
|
||||
combinedRelatedPosts.map(async (relatedPost) => {
|
||||
try {
|
||||
const contentRender = await relatedPost.render();
|
||||
return {
|
||||
...relatedPost,
|
||||
content: contentRender.Content ? contentRender.Content.toString() : ''
|
||||
};
|
||||
} catch (e) {
|
||||
console.error(`Error rendering content for related post ${relatedPost.slug}:`, e);
|
||||
return { ...relatedPost, content: '' }; // Fallback
|
||||
}
|
||||
})
|
||||
);
|
||||
---
|
||||
|
||||
<BaseLayout title={post.data.title} description={post.data.description || ''}>
|
||||
<Header slot="header" /> {/* Added Header */}
|
||||
<article class="container blog-post">
|
||||
<header class="post-header">
|
||||
<h1>{post.data.title}</h1>
|
||||
|
|
@ -176,7 +206,9 @@ const { Content } = await post.render();
|
|||
tags={post.data.tags || []}
|
||||
category={post.data.category || "Uncategorized"}
|
||||
allPosts={allPosts}
|
||||
content={""} {/* Pass empty string for content */}
|
||||
content={renderedContent} /* Pass rendered HTML */
|
||||
relatedPosts={relatedPostsWithContent} /* Pass related posts with content */
|
||||
width="130%" /* Pass width prop */
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -243,6 +275,7 @@ const { Content } = await post.render();
|
|||
</a>
|
||||
</div>
|
||||
</article>
|
||||
<Footer slot="footer" /> {/* Added Footer */}
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue