mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 17 Pull Requests Projects Releases Activity

add knowledgebase

Browse Source
This commit is contained in:
overcuriousity
2025-07-15 22:47:56 +02:00
parent d18cc060e5
commit a057120d7a
10 changed files with 514 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/index.astro
View File

@@ -138,13 +138,14 @@ const tools = data.tools;
}
});
// Create tool card element
function createToolCard(tool) {
const hasValidProjectUrl = tool.projectUrl !== undefined &&
tool.projectUrl !== null &&
tool.projectUrl !== "" &&
tool.projectUrl.trim() !== "";
const hasKnowledgebase = tool.knowledgebase === true;
const cardDiv = document.createElement('div');
const cardClass = hasValidProjectUrl ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card');
cardDiv.className = cardClass;
@@ -177,9 +178,10 @@ function createToolCard(tool) {
cardDiv.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
<h3 style="margin: 0;">${tool.name}</h3>
<div style="display: flex; gap: 0.5rem;">
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
${tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''}
</div>
</div>
@@ -195,7 +197,7 @@ function createToolCard(tool) {
<line x1="9" y1="15" x2="15" y2="15"></line>
</svg>
<span class="text-muted" style="font-size: 0.75rem;">
${tool.platforms.join(', ')}
${(tool.platforms || []).join(', ')}
</span>
</div>
@@ -221,7 +223,7 @@ function createToolCard(tool) {
</div>
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
${tool.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
${(tool.tags || []).map(tag => `<span class="tag">${tag}</span>`).join('')}
</div>
${buttonHTML}

277
src/pages/knowledgebase.astro Normal file
View File

@@ -0,0 +1,277 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import { promises as fs } from 'fs';
import { load } from 'js-yaml';
import path from 'path';
// Load tools data
const yamlPath = path.join(process.cwd(), 'src/data/tools.yaml');
const yamlContent = await fs.readFile(yamlPath, 'utf8');
const data = load(yamlContent) as any;
// Filter tools that have knowledgebase entries
const knowledgebaseTools = data.tools.filter((tool: any) => tool.knowledgebase === true);
// Sort alphabetically by name
knowledgebaseTools.sort((a: any, b: any) => a.name.localeCompare(b.name));
---
<BaseLayout title="Knowledgebase" description="Extended documentation and insights for DFIR tools">
<section style="padding: 2rem 0;">
<!-- Header -->
<div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
<h1 style="margin-bottom: 1rem; font-size: 2.5rem; color: var(--color-primary);">Knowledgebase</h1>
<p style="font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 0.5rem;">
Erweiterte Dokumentation und Erkenntnisse
</p>
<p style="font-size: 1rem; color: var(--color-text-secondary);">
Praktische Erfahrungen, Konfigurationshinweise und Lektionen aus der Praxis
</p>
</div>
<!-- Search and Filter -->
<div style="margin-bottom: 2rem;">
<input
type="text"
id="kb-search"
placeholder="Knowledgebase durchsuchen..."
style="max-width: 500px; margin: 0 auto; display: block;"
/>
</div>
<!-- Tools Count -->
<div style="text-align: center; margin-bottom: 2rem;">
<p class="text-muted" style="font-size: 0.875rem;">
<span id="visible-count">{knowledgebaseTools.length}</span> von {knowledgebaseTools.length} Einträgen
</p>
</div>
<!-- Knowledgebase Entries -->
<div style="max-width: 1000px; margin: 0 auto;">
{knowledgebaseTools.length === 0 ? (
<div class="card" style="text-align: center; padding: 3rem;">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" style="margin: 0 auto 1rem;">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10 9 9 9 8 9"/>
</svg>
<h3 style="color: var(--color-text-secondary); margin-bottom: 0.5rem;">Noch keine Knowledgebase-Einträge</h3>
<p class="text-muted">
Knowledgebase-Einträge werden automatisch angezeigt, sobald Tools das Attribut "knowledgebase: true" haben.
</p>
</div>
) : (
<div id="kb-entries">
{knowledgebaseTools.map((tool: any, index: number) => (
<article class="kb-entry card kb-entry-collapsed" id={`kb-${tool.name.toLowerCase().replace(/\s+/g, '-')}`} data-tool-name={tool.name.toLowerCase()}>
<!-- Collapsed Header (default state) -->
<div class="kb-entry-header" onclick={`toggleKbEntry('${tool.name.toLowerCase().replace(/\s+/g, '-')}')`} style="cursor: pointer;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 1rem;">
<h3 style="margin: 0; color: var(--color-primary);">{tool.name}</h3>
<div style="display: flex; gap: 0.5rem;">
{(() => {
const hasValidProjectUrl = tool.projectUrl !== undefined &&
tool.projectUrl !== null &&
tool.projectUrl !== "" &&
tool.projectUrl.trim() !== "";
return (
<>
{hasValidProjectUrl && <span class="badge badge-primary">Self-Hosted</span>}
{tool.license !== 'Proprietary' && <span class="badge badge-success">Open Source</span>}
<span class="badge badge-error">Infos 📖</span>
</>
);
})()}
</div>
</div>
<div class="kb-expand-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</div>
<p class="text-muted" style="font-size: 0.875rem; margin: 0.5rem 0 0 0;">
{tool.description}
</p>
</div>
<!-- Expanded Content (hidden by default) -->
<div class="kb-entry-content" style="display: none;">
<!-- Quick Info -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.5rem;">
<div>
<strong style="font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Plattformen</strong>
<p style="margin: 0.25rem 0 0 0; font-size: 0.875rem;">{tool.platforms.join(', ')}</p>
</div>
<div>
<strong style="font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Skill Level</strong>
<p style="margin: 0.25rem 0 0 0; font-size: 0.875rem;">{tool.skillLevel}</p>
</div>
<div>
<strong style="font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Lizenz</strong>
<p style="margin: 0.25rem 0 0 0; font-size: 0.875rem;">{tool.license}</p>
</div>
<div>
<strong style="font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Phasen</strong>
<p style="margin: 0.25rem 0 0 0; font-size: 0.875rem;">{tool.phases.join(', ')}</p>
</div>
</div>
<!-- Knowledge Content Area -->
<div class="kb-content">
<h4 style="margin-bottom: 1rem; color: var(--color-text); font-size: 1.125rem;">Praktische Erkenntnisse</h4>
{tool.knowledgebaseContent ? (
<div style="line-height: 1.7;">
<p>{tool.knowledgebaseContent}</p>
</div>
) : (
<div style="padding: 2rem; text-align: center; background-color: var(--color-bg-secondary); border-radius: 0.5rem; border: 2px dashed var(--color-border);">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" style="margin-bottom: 0.75rem;">
<path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
<path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
<path d="M12 17h.01"/>
</svg>
<p class="text-muted" style="margin: 0; font-style: italic;">
Inhalt wird manuell hinzugefügt
</p>
</div>
)}
</div>
<!-- Action Links -->
<div style="display: flex; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border);">
{(() => {
const hasValidProjectUrl = tool.projectUrl !== undefined &&
tool.projectUrl !== null &&
tool.projectUrl !== "" &&
tool.projectUrl.trim() !== "";
return (
<>
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
<polyline points="15 3 21 3 21 9"/>
<line x1="10" y1="14" x2="21" y2="3"/>
</svg>
Software-Homepage
</a>
{hasValidProjectUrl && (
<a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16l4-4-4-4"/>
<path d="M8 12h8"/>
</svg>
Zugreifen
</a>
)}
</>
);
})()}
</div>
</div>
</article>
))}
</div>
)}
</div>
<!-- No Results Message -->
<div id="no-kb-results" style="display: none; text-align: center; padding: 4rem 0;">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" style="margin-bottom: 1rem;">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
<h3 style="color: var(--color-text-secondary); margin-bottom: 0.5rem;">Keine Ergebnisse gefunden</h3>
<p class="text-muted">Versuchen Sie es mit anderen Suchbegriffen.</p>
</div>
</section>
</BaseLayout>
<script>
// Toggle knowledgebase entry expansion
function toggleKbEntry(entryId: string) {
const entry = document.getElementById(`kb-${entryId}`);
if (!entry) return;
const content = entry.querySelector('.kb-entry-content') as HTMLElement;
const icon = entry.querySelector('.kb-expand-icon svg') as HTMLElement;
if (!content || !icon) return;
const isExpanded = entry.classList.contains('kb-entry-expanded');
if (isExpanded) {
// Collapse
entry.classList.remove('kb-entry-expanded');
entry.classList.add('kb-entry-collapsed');
content.style.display = 'none';
icon.style.transform = 'rotate(0deg)';
} else {
// Expand
entry.classList.remove('kb-entry-collapsed');
entry.classList.add('kb-entry-expanded');
content.style.display = 'block';
icon.style.transform = 'rotate(180deg)';
}
}
// Make toggle function globally available
(window as any).toggleKbEntry = toggleKbEntry;
// Search functionality
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('kb-search') as HTMLInputElement;
const entries = document.querySelectorAll('.kb-entry');
const visibleCount = document.getElementById('visible-count');
const noResults = document.getElementById('no-kb-results');
const entriesContainer = document.getElementById('kb-entries');
if (!searchInput || !entries.length) return;
// Check if page loaded with hash for specific entry
if (window.location.hash && window.location.hash.startsWith('#kb-')) {
const targetId = window.location.hash.replace('#kb-', '');
setTimeout(() => toggleKbEntry(targetId), 100);
}
searchInput.addEventListener('input', () => {
const searchTerm = searchInput.value.toLowerCase().trim();
let visibleEntries = 0;
entries.forEach(entry => {
const toolName = entry.getAttribute('data-tool-name') || '';
const entryText = entry.textContent?.toLowerCase() || '';
if (searchTerm === '' ||
toolName.includes(searchTerm) ||
entryText.includes(searchTerm)) {
(entry as HTMLElement).style.display = 'block';
visibleEntries++;
} else {
(entry as HTMLElement).style.display = 'none';
}
});
// Update count
if (visibleCount) {
visibleCount.textContent = visibleEntries.toString();
}
// Show/hide no results message
if (noResults && entriesContainer) {
if (visibleEntries === 0 && searchTerm !== '') {
(noResults as HTMLElement).style.display = 'block';
(entriesContainer as HTMLElement).style.display = 'none';
} else {
(noResults as HTMLElement).style.display = 'none';
(entriesContainer as HTMLElement).style.display = 'block';
}
}
});
});
</script>