371 lines
16 KiB
Plaintext
371 lines
16 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import { getCollection } from 'astro:content';
|
|
import { getToolsData } from '../utils/dataService.js';
|
|
import ContributionButton from '../components/ContributionButton.astro';
|
|
import { isGatedContentAuthRequired } from '../utils/auth.js';
|
|
|
|
const data = await getToolsData();
|
|
const allKnowledgebaseEntries = await getCollection('knowledgebase', (entry) => {
|
|
return entry.data.published !== false;
|
|
});
|
|
|
|
// Check if gated content authentication is enabled globally
|
|
const gatedContentAuthEnabled = isGatedContentAuthRequired();
|
|
|
|
const knowledgebaseEntries = allKnowledgebaseEntries.map((entry) => {
|
|
const associatedTool = entry.data.tool_name
|
|
? data.tools.find((tool: any) => tool.name === entry.data.tool_name)
|
|
: null;
|
|
|
|
return {
|
|
slug: entry.slug,
|
|
title: entry.data.title,
|
|
description: entry.data.description,
|
|
author: entry.data.author,
|
|
last_updated: entry.data.last_updated,
|
|
difficulty: entry.data.difficulty,
|
|
categories: entry.data.categories || [],
|
|
tags: entry.data.tags || [],
|
|
gated_content: entry.data.gated_content || false, // NEW: Include gated content flag
|
|
|
|
tool_name: entry.data.tool_name,
|
|
related_tools: entry.data.related_tools || [],
|
|
associatedTool,
|
|
|
|
name: entry.data.title,
|
|
type: associatedTool?.type || 'article',
|
|
icon: associatedTool?.icon || '📖',
|
|
platforms: associatedTool?.platforms || [],
|
|
skillLevel: entry.data.difficulty || associatedTool?.skillLevel || 'intermediate',
|
|
phases: associatedTool?.phases || [],
|
|
license: associatedTool?.license
|
|
};
|
|
});
|
|
|
|
knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
|
|
|
|
// Count gated vs public articles for statistics
|
|
const gatedCount = knowledgebaseEntries.filter(entry => entry.gated_content).length;
|
|
const publicCount = knowledgebaseEntries.length - gatedCount;
|
|
---
|
|
|
|
<BaseLayout title="Knowledgebase" description="Extended documentation and insights for DFIR tools">
|
|
<section class="section-padding">
|
|
<div class="text-center mb-8 p-8 bg-secondary rounded-lg border">
|
|
<h1 class="mb-4 text-2xl text-primary">Knowledgebase</h1>
|
|
<p class="text-lg text-secondary mb-4">
|
|
Erweiterte Dokumentation und Erkenntnisse
|
|
</p>
|
|
<p class="text-base text-secondary mb-6">
|
|
Praktische Erfahrungen, Konfigurationshinweise und Lektionen aus der Praxis
|
|
</p>
|
|
|
|
{gatedContentAuthEnabled && gatedCount > 0 && (
|
|
<div class="gated-content-info mb-4 p-3 rounded" style="background-color: var(--color-bg-secondary); border: 1px solid var(--color-border);">
|
|
<div class="flex items-center justify-center gap-2 text-sm text-secondary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
|
<circle cx="12" cy="16" r="1"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
<span>
|
|
{gatedCount} geschützte Artikel • {publicCount} öffentliche Artikel
|
|
</span>
|
|
</div>
|
|
<p class="text-xs text-secondary mt-1">
|
|
🔒 Geschützte Artikel erfordern Authentifizierung
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div class="flex gap-4 justify-center flex-wrap">
|
|
<ContributionButton type="write" variant="primary" text="Artikel schreiben" style="padding: 0.75rem 1.5rem;" />
|
|
<button onclick="window.scrollToElementById('kb-entries')" class="btn btn-secondary" style="padding: 0.75rem 1.5rem;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
</svg>
|
|
Artikel durchsuchen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<input
|
|
type="text"
|
|
id="kb-search"
|
|
placeholder="Knowledgebase durchsuchen..."
|
|
class="w-full max-w-lg mx-auto block"
|
|
/>
|
|
</div>
|
|
|
|
<div class="text-center mb-6">
|
|
<p class="text-secondary text-sm">
|
|
<span id="visible-count">{knowledgebaseEntries.length}</span> von {knowledgebaseEntries.length} Einträgen
|
|
</p>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto">
|
|
{knowledgebaseEntries.length === 0 ? (
|
|
<div class="card text-center p-8">
|
|
<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 class="text-secondary mb-2">Noch keine Knowledgebase-Einträge</h3>
|
|
<p class="text-secondary">
|
|
Knowledgebase-Einträge werden automatisch angezeigt, sobald Artikel veröffentlicht werden.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div id="kb-entries" class="grid gap-4">
|
|
{knowledgebaseEntries.map((entry: any, index: number) => {
|
|
const hasAssociatedTool = !!entry.associatedTool;
|
|
const hasValidProjectUrl = hasAssociatedTool &&
|
|
entry.associatedTool.projectUrl !== undefined &&
|
|
entry.associatedTool.projectUrl !== null &&
|
|
entry.associatedTool.projectUrl !== "" &&
|
|
entry.associatedTool.projectUrl.trim() !== "";
|
|
|
|
const isMethod = hasAssociatedTool && entry.associatedTool.type === 'method';
|
|
const isConcept = hasAssociatedTool && entry.associatedTool.type === 'concept';
|
|
const isStandalone = !hasAssociatedTool;
|
|
const isGated = entry.gated_content === true;
|
|
|
|
const articleUrl = `/knowledgebase/${entry.slug}`;
|
|
|
|
return (
|
|
<article
|
|
class="kb-entry card cursor-pointer"
|
|
id={`kb-${entry.slug}`}
|
|
data-tool-name={entry.title.toLowerCase()}
|
|
data-article-type={isStandalone ? 'standalone' : 'tool-associated'}
|
|
data-gated={isGated}
|
|
onclick={`window.location.href='${articleUrl}'`}
|
|
>
|
|
<!-- Card Header -->
|
|
<div class="flex-between mb-3">
|
|
<div class="flex items-start gap-3 flex-1 min-w-0">
|
|
<span class="text-2xl flex-shrink-0">{entry.icon}</span>
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="text-lg font-semibold text-primary mb-1 leading-tight">
|
|
{entry.title}
|
|
{isGated && gatedContentAuthEnabled && (
|
|
<span class="gated-indicator ml-2" title="Geschützter Inhalt - Authentifizierung erforderlich">
|
|
🔒
|
|
</span>
|
|
)}
|
|
</h3>
|
|
<div class="flex gap-2 flex-wrap mb-2">
|
|
{isStandalone && <span class="badge" style="background-color: var(--color-accent); color: white;">Artikel</span>}
|
|
{isConcept && <span class="badge" style="background-color: var(--color-concept); color: white;">Konzept</span>}
|
|
{isMethod && <span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>}
|
|
{hasAssociatedTool && !isMethod && !isConcept && <span class="badge badge-primary">Software</span>}
|
|
{hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
|
|
{hasAssociatedTool && entry.associatedTool.license !== 'Proprietary' && !isMethod && !isConcept && <span class="badge badge-success">Open Source</span>}
|
|
<span class="badge badge-error">📖</span>
|
|
{isGated && gatedContentAuthEnabled && <span class="badge badge-warning">🔒</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 flex-shrink-0" onclick="event.stopPropagation();">
|
|
<a href={articleUrl}
|
|
class="btn btn-primary btn-sm"
|
|
title={isGated && isGatedContentAuthRequired() ? "Geschützter Inhalt - Anmeldung erforderlich" : "Artikel öffnen"}>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.375rem;">
|
|
<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>
|
|
{isGated && gatedContentAuthEnabled ? 'Anmelden' : 'Öffnen'}
|
|
</a>
|
|
<button
|
|
class="btn btn-secondary btn-sm"
|
|
onclick="window.shareArticle(this, '${articleUrl}', '${entry.title}')"
|
|
title="Artikel teilen"
|
|
style="font-size: 0.8125rem; padding: 0.5rem 0.75rem;"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.375rem;">
|
|
<circle cx="18" cy="5" r="3"/>
|
|
<circle cx="6" cy="12" r="3"/>
|
|
<circle cx="18" cy="19" r="3"/>
|
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
|
|
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
|
|
</svg>
|
|
Teilen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p class="text-secondary mb-4 leading-relaxed">
|
|
{entry.description}
|
|
{isGated && gatedContentAuthEnabled && (
|
|
<span class="gated-content-hint ml-2 text-xs">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; margin-right: 0.25rem;">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
|
<circle cx="12" cy="16" r="1"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
Authentifizierung erforderlich
|
|
</span>
|
|
)}
|
|
</p>
|
|
|
|
<!-- Metadata Footer -->
|
|
<div class="border-t pt-3 mt-auto">
|
|
<div class="flex items-center justify-between text-xs text-secondary flex-wrap gap-2">
|
|
<div class="flex items-center gap-4 flex-wrap">
|
|
{entry.difficulty && (
|
|
<span class="flex items-center gap-1">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="M12 6v6l4 2"/>
|
|
</svg>
|
|
{entry.difficulty}
|
|
</span>
|
|
)}
|
|
|
|
{hasAssociatedTool && entry.platforms && entry.platforms.length > 0 && !isMethod && !isConcept && (
|
|
<span class="flex items-center gap-1">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
</svg>
|
|
{entry.platforms.slice(0, 2).join(', ')}{entry.platforms.length > 2 ? '...' : ''}
|
|
</span>
|
|
)}
|
|
|
|
{entry.categories && entry.categories.length > 0 && (
|
|
<span class="flex items-center gap-1">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10"/>
|
|
</svg>
|
|
{entry.categories.slice(0, 2).join(', ')}{entry.categories.length > 2 ? '...' : ''}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<span>{entry.author}</span>
|
|
<span>•</span>
|
|
<span>{entry.last_updated.toLocaleDateString('de-DE')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{entry.tags && entry.tags.length > 0 && (
|
|
<div class="flex flex-wrap gap-1 mt-2">
|
|
{entry.tags.slice(0, 8).map((tag: string) => (
|
|
<span class="tag text-xs">{tag}</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div id="no-kb-results" class="card text-center p-8 hidden">
|
|
<h3 class="text-secondary mb-2">Keine Ergebnisse gefunden</h3>
|
|
<p class="text-secondary">Versuchen Sie es mit anderen Suchbegriffen.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="fab-container" class="fixed bottom-8 right-8 z-50 hidden">
|
|
<ContributionButton
|
|
type="write"
|
|
variant="primary"
|
|
text="✍️"
|
|
style="border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); font-size: 1.5rem; padding: 0;"
|
|
className="fab-button"
|
|
/>
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const searchInput = document.getElementById('kb-search') as HTMLInputElement | null;
|
|
const entries = document.querySelectorAll('.kb-entry') as NodeListOf<HTMLElement>;
|
|
const visibleCount = document.getElementById('visible-count') as HTMLElement | null;
|
|
const noResults = document.getElementById('no-kb-results') as HTMLElement | null;
|
|
|
|
function updateVisibleCount(count: number) {
|
|
if (visibleCount) {
|
|
visibleCount.textContent = count.toString();
|
|
}
|
|
}
|
|
|
|
function filterEntries(searchTerm: string) {
|
|
let visibleEntries = 0;
|
|
|
|
entries.forEach((entry) => {
|
|
const toolName = entry.getAttribute('data-tool-name') || '';
|
|
const entryText = entry.textContent?.toLowerCase() || '';
|
|
const matches = entryText.includes(searchTerm.toLowerCase()) ||
|
|
toolName.includes(searchTerm.toLowerCase());
|
|
|
|
if (matches) {
|
|
entry.style.display = 'block';
|
|
visibleEntries++;
|
|
} else {
|
|
entry.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
updateVisibleCount(visibleEntries);
|
|
|
|
if (noResults) {
|
|
noResults.style.display = visibleEntries === 0 && searchTerm.length > 0 ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', (e) => {
|
|
const target = e.target as HTMLInputElement;
|
|
filterEntries(target.value);
|
|
});
|
|
}
|
|
|
|
let lastScrollY = window.scrollY;
|
|
const fabContainer = document.getElementById('fab-container');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (fabContainer) {
|
|
if (window.scrollY > 200 && window.scrollY < lastScrollY) {
|
|
fabContainer.style.display = 'block';
|
|
} else {
|
|
fabContainer.style.display = 'none';
|
|
}
|
|
lastScrollY = window.scrollY;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.gated-indicator {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.gated-content-hint {
|
|
color: var(--color-warning);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.kb-entry[data-gated="true"] {
|
|
border-left: 3px solid var(--color-warning);
|
|
}
|
|
|
|
.gated-content-info {
|
|
border-left: 4px solid var(--color-warning) !important;
|
|
}
|
|
</style>
|
|
</BaseLayout> |