KeyArgo
/
laforceit-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Update Astro config and Knowledge Graph component

This commit is contained in:
Daniel LaForce 2025-04-23 16:28:58 -06:00
parent beeb1bae43
commit 65714609cc
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
astro.config.mjs
View File

@ -7,9 +7,9 @@ import tailwind from '@astrojs/tailwind';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: 'https://laforceit-blog.pages.dev', // Your current Cloudflare site site: 'https://laforceit.com/blog', // ✅ Real production location
base: '/blog', // ✅ Add this line
output: 'static', output: 'static',
// adapter: cloudflare(), // Commented out for local development
integrations: [ integrations: [
mdx(), mdx(),
sitemap(), sitemap(),
@ -23,8 +23,8 @@ export default defineConfig({
remarkPlugins: [], remarkPlugins: [],
rehypePlugins: [] rehypePlugins: []
}, },
compressHTML: false, // Disable HTML compression to avoid parsing errors compressHTML: false,
build: { build: {
format: 'file', // Use 'file' instead of 'directory' format format: 'file',
} }
}); });

15
src/components/KnowledgeGraph.astro
View File

@ -105,9 +105,9 @@ graphData.nodes.forEach(node => {
<button id="zoom-out" class="graph-action" aria-label="Zoom Out"> <button id="zoom-out" class="graph-action" aria-label="Zoom Out">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button> </button>
<button id="reset-graph" class="graph-action" aria-label="Reset View"> <button id="reset-graph" class="graph-action" aria-label="Reset View">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path></svg>
</button> </button>
</div> </div>
</div> </div>
@ -187,7 +187,7 @@ graphData.nodes.forEach(node => {
// Post node style // Post node style
{ selector: 'node[type="post"]', style: { 'background-color': 'data(color)', 'shape': 'ellipse' } }, { selector: 'node[type="post"]', style: { 'background-color': 'data(color)', 'shape': 'ellipse' } },
// Tag node style // Tag node style
{ selector: 'node[type="tag"]', style: { 'background-color': 'data(color)', 'shape': 'round-rectangle', 'font-size': '9px', 'text-margin-y': '5px' } }, // Slightly smaller font for tags { selector: 'node[type="tag"]', style: { 'background-color': 'data(color)', 'shape': 'diamond', 'font-size': '9px', 'text-margin-y': '5px', 'border-color': 'data(color)' } }, // Diamond shape, use color for border too
// Base edge style // Base edge style
{ selector: 'edge', style: { 'width': '1px', 'line-color': 'rgba(226, 232, 240, 0.2)', 'curve-style': 'bezier', 'opacity': 0.6, 'z-index': 1 } }, { selector: 'edge', style: { 'width': '1px', 'line-color': 'rgba(226, 232, 240, 0.2)', 'curve-style': 'bezier', 'opacity': 0.6, 'z-index': 1 } },
// Highlighted state (for nodes and edges) // Highlighted state (for nodes and edges)
@ -270,10 +270,9 @@ graphData.nodes.forEach(node => {
document.getElementById('zoom-in')?.addEventListener('click', () => cy.zoom(cy.zoom() * 1.2)); document.getElementById('zoom-in')?.addEventListener('click', () => cy.zoom(cy.zoom() * 1.2));
document.getElementById('zoom-out')?.addEventListener('click', () => cy.zoom(cy.zoom() / 1.2)); document.getElementById('zoom-out')?.addEventListener('click', () => cy.zoom(cy.zoom() / 1.2));
document.getElementById('reset-graph')?.addEventListener('click', () => { document.getElementById('reset-graph')?.addEventListener('click', () => {
cy.fit(null, 30); cy.fit(null, 30); // Fit the graph to the viewport with padding
cy.elements().removeClass('faded highlighted filtered'); cy.elements().removeClass('faded highlighted'); // Remove visual states
const allFilterButton = document.querySelector('.graph-filter[data-filter="all"]'); // Note: We removed category filters, so no need to click the 'all' filter button here
if (allFilterButton) allFilterButton.click();
}); });
// Add mouse wheel zoom controls // Add mouse wheel zoom controls