improve layout knowledgebase
This commit is contained in:
overcuriousity
@@ -43,16 +43,16 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
|
||||
|
||||
<BaseLayout title="Knowledgebase" description="Extended documentation and insights for DFIR tools">
|
||||
<section style="padding: 2rem 0;">
|
||||
<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: 1.125rem;">
|
||||
<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 style="font-size: 1rem; color: var(--color-text-secondary); margin-bottom: 1.5rem;">
|
||||
<p class="text-base text-secondary mb-6">
|
||||
Praktische Erfahrungen, Konfigurationshinweise und Lektionen aus der Praxis
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
||||
<div class="flex gap-4 justify-center flex-wrap">
|
||||
<ContributionButton type="write" variant="primary" text="Artikel schreiben" style="padding: 0.75rem 1.5rem;" />
|
||||
<a href="#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;">
|
||||
@@ -64,24 +64,24 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<div class="mb-6">
|
||||
<input
|
||||
type="text"
|
||||
id="kb-search"
|
||||
placeholder="Knowledgebase durchsuchen..."
|
||||
style="max-width: 500px; margin: 0 auto; display: block;"
|
||||
class="w-full max-w-lg mx-auto block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-bottom: 2rem;">
|
||||
<p class="text-muted" style="font-size: 0.875rem;">
|
||||
<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 style="max-width: 1000px; margin: 0 auto;">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
{knowledgebaseEntries.length === 0 ? (
|
||||
<div class="card" style="text-align: center; padding: 3rem;">
|
||||
<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"/>
|
||||
@@ -89,13 +89,13 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
|
||||
<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">
|
||||
<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">
|
||||
<div id="kb-entries" class="grid gap-4">
|
||||
{knowledgebaseEntries.map((entry: any, index: number) => {
|
||||
const hasAssociatedTool = !!entry.associatedTool;
|
||||
const hasValidProjectUrl = hasAssociatedTool &&
|
||||
@@ -110,90 +110,97 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
|
||||
|
||||
return (
|
||||
<article
|
||||
class="kb-entry card"
|
||||
class="kb-entry card cursor-pointer"
|
||||
id={`kb-${entry.slug}`}
|
||||
data-tool-name={entry.title.toLowerCase()}
|
||||
data-article-type={isStandalone ? 'standalone' : 'tool-associated'}
|
||||
onclick={`window.location.href='/knowledgebase/${entry.slug}'`}
|
||||
>
|
||||
<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);">
|
||||
<span style="margin-right: 0.5rem;">{entry.icon}</span>
|
||||
{entry.title}
|
||||
</h3>
|
||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||
{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" style="background-color: var(--color-primary); color: white;">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>}
|
||||
|
||||
{entry.difficulty && (
|
||||
<span class="badge" style="background-color: var(--color-text-secondary); color: white; font-size: 0.75rem;">
|
||||
{entry.difficulty}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span class="badge badge-error">📖</span>
|
||||
<!-- 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}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0;">
|
||||
<a href={`/knowledgebase/${entry.slug}`} class="btn btn-primary" style="font-size: 0.8125rem;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<div class="flex gap-2 flex-shrink-0" onclick="event.stopPropagation();">
|
||||
<a href={`/knowledgebase/${entry.slug}`} class="btn btn-primary btn-sm">
|
||||
<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>
|
||||
Artikel öffnen
|
||||
Öffnen
|
||||
</a>
|
||||
|
||||
<ContributionButton type="edit" toolName={entry.tool_name || entry.title} variant="secondary" text="Edit" style="font-size: 0.8125rem; padding: 0.5rem 0.75rem;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="margin: 1rem 0; color: var(--color-text-secondary); line-height: 1.5;">
|
||||
<!-- Description -->
|
||||
<p class="text-secondary mb-4 leading-relaxed">
|
||||
{entry.description}
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1rem;">
|
||||
<!-- 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 style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
|
||||
{entry.tags.map((tag: string) => (
|
||||
<span class="tag" style="font-size: 0.75rem;">{tag}</span>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{entry.categories && entry.categories.length > 0 && (
|
||||
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
|
||||
<strong>Kategorien:</strong> {entry.categories.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasAssociatedTool && entry.phases && entry.phases.length > 0 && (
|
||||
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
|
||||
<strong>Phasen:</strong> {entry.phases.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasAssociatedTool && entry.platforms && entry.platforms.length > 0 && !isMethod && !isConcept && (
|
||||
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
|
||||
<strong>Plattformen:</strong> {entry.platforms.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isStandalone && entry.related_tools && entry.related_tools.length > 0 && (
|
||||
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
|
||||
<strong>Verwandte Tools:</strong> {entry.related_tools.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style="font-size: 0.8125rem; color: var(--color-text-secondary); margin-left: auto;">
|
||||
<strong>Autor:</strong> {entry.author} • <strong>Aktualisiert:</strong> {entry.last_updated.toLocaleDateString('de-DE')}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
@@ -202,13 +209,13 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="no-kb-results" class="card" style="text-align: center; padding: 3rem; display: none;">
|
||||
<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 id="no-kb-results" class="card text-center p-8" style="display: none;">
|
||||
<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" style="position: fixed; bottom: 2rem; right: 2rem; z-index: 100; display: none;">
|
||||
<div id="fab-container" class="fixed bottom-8 right-8 z-50" style="display: none;">
|
||||
<ContributionButton
|
||||
type="write"
|
||||
variant="primary"
|
||||
|
||||
Reference in New Issue
Block a user