refactor(BlogPost): Remove unused Newsletter component
This commit is contained in:
parent
da0fdde71c
commit
54c8f8d179
|
|
@ -1,166 +0,0 @@
|
|||
---
|
||||
// Digital Garden Graph Visualization
|
||||
// This component creates a network graph visualization of content relationships
|
||||
---
|
||||
|
||||
<div class="digital-garden-graph">
|
||||
<div class="graph-container">
|
||||
<svg id="digital-garden-svg" width="100%" height="400"></svg>
|
||||
</div>
|
||||
<div class="graph-legend">
|
||||
<span class="legend-item">
|
||||
<span class="dot post-dot"></span>
|
||||
<span>Blog Posts</span>
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<span class="dot config-dot"></span>
|
||||
<span>Configurations</span>
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<span class="dot project-dot"></span>
|
||||
<span>Projects</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.digital-garden-graph {
|
||||
margin: 2rem 0;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--card-border);
|
||||
background-color: var(--card-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.post-dot {
|
||||
background-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.config-dot {
|
||||
background-color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.project-dot {
|
||||
background-color: var(--accent-tertiary);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const svg = document.getElementById('digital-garden-svg');
|
||||
if (!svg) return;
|
||||
|
||||
// Set up the SVG dimensions
|
||||
const width = svg.clientWidth;
|
||||
const height = 400;
|
||||
|
||||
// Define nodes - this would typically come from your content metadata
|
||||
// For this demo, we'll create a sample dataset
|
||||
const nodes = [
|
||||
{ id: 'k3s-cluster', type: 'post', x: width * 0.2, y: height * 0.3 },
|
||||
{ id: 'prometheus', type: 'post', x: width * 0.4, y: height * 0.5 },
|
||||
{ id: 'cloudflare-tunnel', type: 'post', x: width * 0.6, y: height * 0.3 },
|
||||
{ id: 'gitops-flux', type: 'post', x: width * 0.5, y: height * 0.7 },
|
||||
{ id: 'longhorn-storage', type: 'config', x: width * 0.3, y: height * 0.6 },
|
||||
{ id: 'metallb', type: 'config', x: width * 0.7, y: height * 0.5 },
|
||||
{ id: 'argobox', type: 'project', x: width * 0.5, y: height * 0.2 },
|
||||
];
|
||||
|
||||
// Define links between nodes
|
||||
const links = [
|
||||
{ source: 'k3s-cluster', target: 'prometheus' },
|
||||
{ source: 'k3s-cluster', target: 'longhorn-storage' },
|
||||
{ source: 'k3s-cluster', target: 'argobox' },
|
||||
{ source: 'prometheus', target: 'gitops-flux' },
|
||||
{ source: 'cloudflare-tunnel', target: 'argobox' },
|
||||
{ source: 'longhorn-storage', target: 'prometheus' },
|
||||
{ source: 'argobox', target: 'metallb' },
|
||||
{ source: 'metallb', target: 'cloudflare-tunnel' },
|
||||
];
|
||||
|
||||
// Create SVG elements
|
||||
// First the links
|
||||
links.forEach(link => {
|
||||
const sourceNode = nodes.find(n => n.id === link.source);
|
||||
const targetNode = nodes.find(n => n.id === link.target);
|
||||
|
||||
if (sourceNode && targetNode) {
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', sourceNode.x);
|
||||
line.setAttribute('y1', sourceNode.y);
|
||||
line.setAttribute('x2', targetNode.x);
|
||||
line.setAttribute('y2', targetNode.y);
|
||||
line.setAttribute('stroke', 'rgba(226, 232, 240, 0.1)');
|
||||
line.setAttribute('stroke-width', '2');
|
||||
svg.appendChild(line);
|
||||
}
|
||||
});
|
||||
|
||||
// Then the nodes
|
||||
nodes.forEach(node => {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.setAttribute('cx', node.x);
|
||||
circle.setAttribute('cy', node.y);
|
||||
circle.setAttribute('r', '8');
|
||||
|
||||
// Assign color based on node type
|
||||
if (node.type === 'post') {
|
||||
circle.setAttribute('fill', 'var(--accent-primary)');
|
||||
} else if (node.type === 'config') {
|
||||
circle.setAttribute('fill', 'var(--accent-secondary)');
|
||||
} else {
|
||||
circle.setAttribute('fill', 'var(--accent-tertiary)');
|
||||
}
|
||||
|
||||
// Add hover effect
|
||||
circle.onmouseover = () => {
|
||||
circle.setAttribute('r', '12');
|
||||
circle.style.cursor = 'pointer';
|
||||
};
|
||||
circle.onmouseout = () => {
|
||||
circle.setAttribute('r', '8');
|
||||
};
|
||||
|
||||
// Add node label
|
||||
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
text.setAttribute('x', node.x);
|
||||
text.setAttribute('y', node.y + 20);
|
||||
text.setAttribute('font-size', '12');
|
||||
text.setAttribute('fill', 'var(--text-secondary)');
|
||||
text.setAttribute('text-anchor', 'middle');
|
||||
text.textContent = node.id.replace(/-/g, ' ');
|
||||
|
||||
svg.appendChild(circle);
|
||||
svg.appendChild(text);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Newsletter from '../components/Newsletter.astro';
|
||||
import MiniKnowledgeGraph from '../components/MiniKnowledgeGraph.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
|
|
@ -235,7 +234,6 @@ const fallbackCurrentPost = currentPost || {
|
|||
</aside>
|
||||
</div>
|
||||
|
||||
<Newsletter />
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,179 +0,0 @@
|
|||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import MiniKnowledgeGraph from '../components/MiniKnowledgeGraph.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
// Get all posts
|
||||
const allPosts = await getCollection('posts').catch(error => {
|
||||
console.error('Error fetching posts collection:', error);
|
||||
return [];
|
||||
});
|
||||
|
||||
// Try blog collection if posts doesn't exist
|
||||
const blogPosts = allPosts.length === 0 ? await getCollection('blog').catch(() => []) : [];
|
||||
const combinedPosts = [...allPosts, ...blogPosts];
|
||||
|
||||
// Use the first post as a test post
|
||||
const testPost = combinedPosts.length > 0 ? combinedPosts[0] : {
|
||||
slug: 'test-post',
|
||||
data: {
|
||||
title: 'Test Post',
|
||||
tags: ['test', 'graph'],
|
||||
category: 'Test'
|
||||
}
|
||||
};
|
||||
|
||||
// Create related posts - use the next 3 posts in the collection or create test posts
|
||||
const relatedPosts = combinedPosts.length > 1
|
||||
? combinedPosts.slice(1, 4)
|
||||
: [
|
||||
{
|
||||
slug: 'related-1',
|
||||
data: {
|
||||
title: 'Related Post 1',
|
||||
tags: ['test', 'graph'],
|
||||
category: 'Test'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'related-2',
|
||||
data: {
|
||||
title: 'Related Post 2',
|
||||
tags: ['test'],
|
||||
category: 'Test'
|
||||
}
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout title="Test MiniKnowledgeGraph">
|
||||
<Header slot="header" />
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-6">MiniKnowledgeGraph Test Page</h1>
|
||||
|
||||
<div class="bg-slate-800 rounded-lg p-6 mb-8">
|
||||
<p class="mb-4">This is a test page to ensure the MiniKnowledgeGraph component is working properly.</p>
|
||||
|
||||
<div class="border border-slate-700 rounded-lg p-4 mb-6">
|
||||
<h2 class="text-xl font-bold mb-4">Test Post Details:</h2>
|
||||
<p><strong>Title:</strong> {testPost.data.title}</p>
|
||||
<p><strong>Slug:</strong> {testPost.slug}</p>
|
||||
<p><strong>Tags:</strong> {testPost.data.tags?.join(', ') || 'None'}</p>
|
||||
<p><strong>Category:</strong> {testPost.data.category || 'None'}</p>
|
||||
<p><strong>Related Posts:</strong> {relatedPosts.length}</p>
|
||||
</div>
|
||||
|
||||
<div class="mini-knowledge-graph-area">
|
||||
<h2 class="text-xl font-bold mb-4">MiniKnowledgeGraph Component:</h2>
|
||||
|
||||
<div class="mini-knowledge-graph-wrapper">
|
||||
<MiniKnowledgeGraph
|
||||
currentPost={testPost}
|
||||
relatedPosts={relatedPosts}
|
||||
height="300px"
|
||||
title="Test Graph"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Debug Information Display -->
|
||||
<div class="debug-info mt-4 p-4 bg-gray-900 rounded-lg">
|
||||
<h3 class="text-lg font-bold mb-2">Debug Info</h3>
|
||||
<div id="debug-container">Loading debug info...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.mini-knowledge-graph-area {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mini-knowledge-graph-wrapper {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
display: block !important;
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
height: 300px;
|
||||
background: var(--card-bg, #1e293b);
|
||||
border: 1px solid var(--card-border, #334155);
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Debug utility for testing the knowledge graph
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(checkGraphStatus, 500);
|
||||
|
||||
// Also check after window load
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(checkGraphStatus, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
function checkGraphStatus() {
|
||||
const debugContainer = document.getElementById('debug-container');
|
||||
if (!debugContainer) return;
|
||||
|
||||
// Get container info
|
||||
const container = document.querySelector('.mini-knowledge-graph-wrapper');
|
||||
const cyContainer = document.getElementById('mini-cy');
|
||||
|
||||
// Check for cytoscape instance
|
||||
const cyInstance = window.miniCy;
|
||||
|
||||
let html = '<ul>';
|
||||
|
||||
// Container dimensions
|
||||
if (container) {
|
||||
html += `<li>Container: ${container.offsetWidth}x${container.offsetHeight}px</li>`;
|
||||
html += `<li>Display: ${getComputedStyle(container).display}</li>`;
|
||||
html += `<li>Visibility: ${getComputedStyle(container).visibility}</li>`;
|
||||
} else {
|
||||
html += '<li>Container: Not found</li>';
|
||||
}
|
||||
|
||||
// Cytoscape container
|
||||
if (cyContainer) {
|
||||
html += `<li>Cy Container: ${cyContainer.offsetWidth}x${cyContainer.offsetHeight}px</li>`;
|
||||
} else {
|
||||
html += '<li>Cy Container: Not found</li>';
|
||||
}
|
||||
|
||||
// Cytoscape instance
|
||||
html += `<li>Cytoscape object: ${typeof cytoscape !== 'undefined' ? 'Available' : 'Not available'}</li>`;
|
||||
html += `<li>Cytoscape instance: ${cyInstance ? 'Initialized' : 'Not initialized'}</li>`;
|
||||
|
||||
// If instance exists, get more details
|
||||
if (cyInstance) {
|
||||
html += `<li>Nodes: ${cyInstance.nodes().length}</li>`;
|
||||
html += `<li>Edges: ${cyInstance.edges().length}</li>`;
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
// Add refresh button
|
||||
html += '<button id="refresh-debug" class="mt-2 px-3 py-1 bg-blue-700 text-white rounded hover:bg-blue-600">' +
|
||||
'Refresh Debug Info</button>';
|
||||
|
||||
debugContainer.innerHTML = html;
|
||||
|
||||
// Add event listener to refresh button
|
||||
document.getElementById('refresh-debug')?.addEventListener('click', checkGraphStatus);
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue