knowledgebase overhaul
This commit is contained in:
overcuriousity
@@ -94,6 +94,17 @@ function createWorkflowSystemPrompt(toolsData: any): string {
|
||||
skillLevel: tool.skillLevel,
|
||||
license: tool.license,
|
||||
tags: tool.tags,
|
||||
related_concepts: tool.related_concepts || []
|
||||
}));
|
||||
|
||||
// NEW: Include concepts for background knowledge
|
||||
const conceptsList = toolsData.concepts.map((concept: any) => ({
|
||||
name: concept.name,
|
||||
description: concept.description,
|
||||
domains: concept.domains,
|
||||
phases: concept.phases,
|
||||
skillLevel: concept.skillLevel,
|
||||
tags: concept.tags
|
||||
}));
|
||||
|
||||
// Get regular phases (no more filtering needed)
|
||||
@@ -135,9 +146,12 @@ function createWorkflowSystemPrompt(toolsData: any): string {
|
||||
|
||||
return `Du bist ein DFIR (Digital Forensics and Incident Response) Experte, der Ermittlern bei der Auswahl von Software und Methoden hilft.
|
||||
|
||||
VERFÜGBARE DATENBASIS:
|
||||
VERFÜGBARE TOOLS/METHODEN:
|
||||
${JSON.stringify(toolsList, null, 2)}
|
||||
|
||||
VERFÜGBARE HINTERGRUNDWISSEN-KONZEPTE:
|
||||
${JSON.stringify(conceptsList, null, 2)}
|
||||
|
||||
UNTERSUCHUNGSPHASEN (NIST Framework):
|
||||
${phasesDescription}
|
||||
|
||||
@@ -152,6 +166,8 @@ WICHTIGE REGELN:
|
||||
5. Deutsche Antworten für deutsche Anfragen, English for English queries
|
||||
6. Bewerbe NIEMALS Proprietäre Software fälschlicherweise als Open-Source-Software, erkenne aber an, falls diese besser geeignet sein könnte.
|
||||
7. Bevorzuge alles, was nicht proprietär ist (license != "Proprietary"), aber erkenne an, wenn proprietäre Software besser geeignet ist.
|
||||
8. WICHTIG: Erwähne relevante Hintergrundwissen-Konzepte wenn Tools verwendet werden, die related_concepts haben
|
||||
9. Konzepte sind NICHT Tools - empfehle sie nicht als actionable Schritte, sondern als Wissensbasis
|
||||
|
||||
SOFTWARE/METHODEN-AUSWAHL NACH PHASE:
|
||||
${phaseDescriptions}
|
||||
@@ -164,13 +180,19 @@ ANTWORT-FORMAT (strict JSON):
|
||||
"scenario_analysis": "Detaillierte Analyse des Szenarios auf Deutsch/English",
|
||||
"recommended_tools": [
|
||||
{
|
||||
"name": "EXAKTER Name aus der Database",
|
||||
"name": "EXAKTER Name aus der Tools-Database",
|
||||
"priority": "high|medium|low",
|
||||
"phase": "${validPhases}",
|
||||
"justification": "Warum diese Methode für diese Phase und Szenario geeignet ist"
|
||||
}
|
||||
],
|
||||
"workflow_suggestion": "Vorgeschlagener Untersuchungsablauf",
|
||||
"background_knowledge": [
|
||||
{
|
||||
"concept_name": "EXAKTER Name aus der Konzepte-Database",
|
||||
"relevance": "Warum dieses Konzept für das Szenario relevant ist, und bei welchen der empfohlenen Methoden/Tools."
|
||||
}
|
||||
],
|
||||
"additional_notes": "Wichtige Überlegungen und Hinweise"
|
||||
}
|
||||
|
||||
@@ -189,14 +211,28 @@ function createToolSystemPrompt(toolsData: any): string {
|
||||
license: tool.license,
|
||||
tags: tool.tags,
|
||||
url: tool.url,
|
||||
projectUrl: tool.projectUrl
|
||||
projectUrl: tool.projectUrl,
|
||||
related_concepts: tool.related_concepts || []
|
||||
}));
|
||||
|
||||
// NEW: Include concepts for background knowledge
|
||||
const conceptsList = toolsData.concepts.map((concept: any) => ({
|
||||
name: concept.name,
|
||||
description: concept.description,
|
||||
domains: concept.domains,
|
||||
phases: concept.phases,
|
||||
skillLevel: concept.skillLevel,
|
||||
tags: concept.tags
|
||||
}));
|
||||
|
||||
return `Du bist ein DFIR (Digital Forensics and Incident Response) Experte, der bei der Auswahl spezifischer Software/Methoden für konkrete Probleme hilft.
|
||||
|
||||
VERFÜGBARE DATENBASIS:
|
||||
VERFÜGBARE TOOLS/METHODEN:
|
||||
${JSON.stringify(toolsList, null, 2)}
|
||||
|
||||
VERFÜGBARE HINTERGRUNDWISSEN-KONZEPTE:
|
||||
${JSON.stringify(conceptsList, null, 2)}
|
||||
|
||||
WICHTIGE REGELN:
|
||||
1. Analysiere das spezifische Problem/die Anforderung sorgfältig
|
||||
2. Empfehle 1-3 Tools, sortiert nach Eignung (beste Empfehlung zuerst)
|
||||
@@ -207,13 +243,15 @@ WICHTIGE REGELN:
|
||||
7. Erwähne sowohl Stärken als auch Schwächen/Limitationen
|
||||
8. Schlage alternative Ansätze vor, wenn sinnvoll
|
||||
9. Gib grundsätzliche Hinweise, WIE das Tool konkret eingesetzt wird
|
||||
10. WICHTIG: Erwähne relevante Hintergrundwissen-Konzepte wenn Tools verwendet werden, die related_concepts haben
|
||||
11. Konzepte sind NICHT Tools - empfehle sie nicht als actionable Schritte, sondern als Wissensbasis
|
||||
|
||||
ANTWORT-FORMAT (strict JSON):
|
||||
{
|
||||
"problem_analysis": "Detaillierte Analyse des Problems/der Anforderung",
|
||||
"recommended_tools": [
|
||||
{
|
||||
"name": "EXAKTER Name aus der Database",
|
||||
"name": "EXAKTER Name aus der Tools-Database",
|
||||
"rank": 1,
|
||||
"suitability_score": "high|medium|low",
|
||||
"detailed_explanation": "Detaillierte Erklärung, warum dieses Tool/diese Methode das Problem löst",
|
||||
@@ -223,6 +261,12 @@ ANTWORT-FORMAT (strict JSON):
|
||||
"alternatives": "Alternative Ansätze oder ergänzende Tools/Methoden, falls relevant"
|
||||
}
|
||||
],
|
||||
"background_knowledge": [
|
||||
{
|
||||
"concept_name": "EXAKTER Name aus der Konzepte-Database",
|
||||
"relevance": "Warum dieses Konzept für die empfohlenen Tools/das Problem relevant ist, und für welche der empfohlenen Methoden/Tools."
|
||||
}
|
||||
],
|
||||
"additional_considerations": "Wichtige Überlegungen, Voraussetzungen oder Warnungen"
|
||||
}
|
||||
|
||||
@@ -353,12 +397,13 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
});
|
||||
}
|
||||
|
||||
// Validate tool names against database based on mode
|
||||
// Validate tool names and concept names against database
|
||||
const validToolNames = new Set(toolsData.tools.map((t: any) => t.name));
|
||||
const validConceptNames = new Set(toolsData.concepts.map((c: any) => c.name));
|
||||
|
||||
let validatedRecommendation;
|
||||
|
||||
if (mode === 'workflow') {
|
||||
// Existing validation for workflow mode
|
||||
validatedRecommendation = {
|
||||
...recommendation,
|
||||
recommended_tools: recommendation.recommended_tools?.filter((tool: any) => {
|
||||
@@ -367,10 +412,16 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}) || [],
|
||||
background_knowledge: recommendation.background_knowledge?.filter((concept: any) => {
|
||||
if (!validConceptNames.has(concept.concept_name)) {
|
||||
console.warn(`AI referenced unknown concept: ${concept.concept_name}`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}) || []
|
||||
};
|
||||
} else {
|
||||
// New validation for tool mode
|
||||
validatedRecommendation = {
|
||||
...recommendation,
|
||||
recommended_tools: recommendation.recommended_tools?.filter((tool: any) => {
|
||||
@@ -385,12 +436,19 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
suitability_score: tool.suitability_score || 'medium', // Default suitability
|
||||
pros: Array.isArray(tool.pros) ? tool.pros : [],
|
||||
cons: Array.isArray(tool.cons) ? tool.cons : []
|
||||
})) || []
|
||||
})) || [],
|
||||
background_knowledge: recommendation.background_knowledge?.filter((concept: any) => {
|
||||
if (!validConceptNames.has(concept.concept_name)) {
|
||||
console.warn(`AI referenced unknown concept: ${concept.concept_name}`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}) || []
|
||||
};
|
||||
}
|
||||
|
||||
// Log successful query
|
||||
console.log(`[AI Query] Mode: ${mode}, User: ${userId}, Query length: ${sanitizedQuery.length}, Tools: ${validatedRecommendation.recommended_tools.length}`);
|
||||
console.log(`[AI Query] Mode: ${mode}, User: ${userId}, Query length: ${sanitizedQuery.length}, Tools: ${validatedRecommendation.recommended_tools.length}, Concepts: ${validatedRecommendation.background_knowledge?.length || 0}`);
|
||||
|
||||
return new Response(JSON.stringify({
|
||||
success: true,
|
||||
|
||||
@@ -2,11 +2,10 @@
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import { getToolsData } from '../utils/dataService.js';
|
||||
|
||||
|
||||
// Load tools data
|
||||
const data = await getToolsData();
|
||||
|
||||
// Filter tools that have knowledgebase entries
|
||||
// Filter tools that have knowledgebase flag set to true
|
||||
const knowledgebaseTools = data.tools.filter((tool: any) => tool.knowledgebase === true);
|
||||
|
||||
// Sort alphabetically by name
|
||||
@@ -26,7 +25,7 @@ knowledgebaseTools.sort((a: any, b: any) => a.name.localeCompare(b.name));
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter -->
|
||||
<!-- Search -->
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<input
|
||||
type="text"
|
||||
@@ -56,219 +55,167 @@ knowledgebaseTools.sort((a: any, b: any) => a.name.localeCompare(b.name));
|
||||
</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 Datenbankeinträge das Attribut "knowledgebase: true" haben. Wenn hier noch nichts drinsteht, habe ich noch nichts dazu geschrieben.
|
||||
Knowledgebase-Einträge werden automatisch angezeigt, sobald Datenbankeinträge 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;">
|
||||
{knowledgebaseTools.map((tool: any, index: number) => {
|
||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||
tool.projectUrl !== null &&
|
||||
tool.projectUrl !== "" &&
|
||||
tool.projectUrl.trim() !== "";
|
||||
|
||||
const toolSlug = tool.name.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '') // Remove special characters
|
||||
.replace(/\s+/g, '-') // Replace spaces with hyphens
|
||||
.replace(/-+/g, '-') // Remove duplicate hyphens
|
||||
.replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
|
||||
|
||||
return (
|
||||
<article
|
||||
class="kb-entry card"
|
||||
id={`kb-${toolSlug}`}
|
||||
data-tool-name={tool.name.toLowerCase()}
|
||||
>
|
||||
<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">CC24-Server</span>}
|
||||
{tool.license !== 'Proprietary' && <span class="badge badge-success">Open Source</span>}
|
||||
<span class="badge badge-error">Infos 📖</span>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
<h3 style="margin: 0; color: var(--color-primary);">
|
||||
{tool.icon && <span style="margin-right: 0.5rem;">{tool.icon}</span>}
|
||||
{tool.name}
|
||||
</h3>
|
||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||
<!-- Type indicator badges -->
|
||||
{tool.type === 'concept' && <span class="badge" style="background-color: var(--color-concept); color: white;">Konzept</span>}
|
||||
{tool.type === 'method' && <span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>}
|
||||
{tool.type === 'software' && <span class="badge" style="background-color: var(--color-primary); color: white;">Software</span>}
|
||||
|
||||
{hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
|
||||
{tool.license !== 'Proprietary' && tool.type !== 'concept' && tool.type !== 'method' && <span class="badge badge-success">Open Source</span>}
|
||||
|
||||
<!-- Difficulty indicator -->
|
||||
<span class="badge" style="background-color: var(--color-text-secondary); color: white; font-size: 0.75rem;">
|
||||
{tool.skillLevel || 'intermediate'}
|
||||
</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>
|
||||
|
||||
<!-- Action button -->
|
||||
<a href={`/knowledgebase/${toolSlug}`} 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;">
|
||||
<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>
|
||||
</div>
|
||||
Artikel öffnen
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-muted" style="font-size: 0.875rem; margin: 0.5rem 0 0 0;">
|
||||
|
||||
<!-- Description -->
|
||||
<p style="margin: 1rem 0; color: var(--color-text-secondary); line-height: 1.5;">
|
||||
{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>
|
||||
<!-- Tags and Metadata -->
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1rem;">
|
||||
{tool.tags && tool.tags.length > 0 && (
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
|
||||
{tool.tags.map((tag: string) => (
|
||||
<span class="tag" style="font-size: 0.75rem;">{tag}</span>
|
||||
))}
|
||||
</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>
|
||||
)}
|
||||
|
||||
{tool.phases && tool.phases.length > 0 && (
|
||||
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
|
||||
<strong>Phasen:</strong> {tool.phases.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tool.platforms && tool.platforms.length > 0 && tool.type !== 'concept' && tool.type !== 'method' && (
|
||||
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
|
||||
<strong>Plattformen:</strong> {tool.platforms.join(', ')}
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
<!-- No Results -->
|
||||
<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>
|
||||
</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)';
|
||||
}
|
||||
<style>
|
||||
/* Simplified knowledgebase styles */
|
||||
.kb-entry {
|
||||
margin-bottom: 1.5rem;
|
||||
border-left: 4px solid var(--color-accent);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
// Make toggle function globally available
|
||||
(window as any).toggleKbEntry = toggleKbEntry;
|
||||
|
||||
// Search functionality
|
||||
.kb-entry:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .kb-entry:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Enhanced knowledgebase functionality with search
|
||||
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);
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
searchInput.addEventListener('input', () => {
|
||||
const searchTerm = searchInput.value.toLowerCase().trim();
|
||||
|
||||
function filterEntries(searchTerm: string) {
|
||||
let visibleEntries = 0;
|
||||
|
||||
entries.forEach(entry => {
|
||||
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 (searchTerm === '' ||
|
||||
toolName.includes(searchTerm) ||
|
||||
entryText.includes(searchTerm)) {
|
||||
(entry as HTMLElement).style.display = 'block';
|
||||
if (matches) {
|
||||
entry.style.display = 'block';
|
||||
visibleEntries++;
|
||||
} else {
|
||||
(entry as HTMLElement).style.display = 'none';
|
||||
entry.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Update count
|
||||
if (visibleCount) {
|
||||
visibleCount.textContent = visibleEntries.toString();
|
||||
}
|
||||
updateVisibleCount(visibleEntries);
|
||||
|
||||
// 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';
|
||||
}
|
||||
if (noResults) {
|
||||
noResults.style.display = visibleEntries === 0 && searchTerm.length > 0 ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
filterEntries(target.value);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
169
src/pages/knowledgebase/[slug].astro
Normal file
169
src/pages/knowledgebase/[slug].astro
Normal file
@@ -0,0 +1,169 @@
|
||||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { getToolsData } from '../../utils/dataService.js';
|
||||
|
||||
// Prerender these pages at build time
|
||||
export const prerender = true;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const knowledgebaseEntries = await getCollection('knowledgebase');
|
||||
|
||||
console.log('Building static paths for:', knowledgebaseEntries.map(e => e.slug));
|
||||
|
||||
return knowledgebaseEntries.map((entry) => {
|
||||
return {
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { entry }: { entry: any } = Astro.props;
|
||||
|
||||
// Render the content
|
||||
const { Content } = await entry.render();
|
||||
|
||||
// Load tools data to get the tool details
|
||||
const data = await getToolsData();
|
||||
const tool = data.tools.find((t: any) => t.name === entry.data.tool_name);
|
||||
|
||||
if (!tool) {
|
||||
console.warn(`Tool not found for knowledgebase entry: ${entry.data.tool_name}`);
|
||||
return Astro.redirect('/knowledgebase');
|
||||
}
|
||||
|
||||
// Determine tool type for styling
|
||||
const isMethod = tool.type === 'method';
|
||||
const isConcept = tool.type === 'concept';
|
||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||
tool.projectUrl !== null &&
|
||||
tool.projectUrl !== "" &&
|
||||
tool.projectUrl.trim() !== "";
|
||||
---
|
||||
|
||||
<BaseLayout title={entry.data.title} description={entry.data.description}>
|
||||
<article style="max-width: 900px; margin: 0 auto;">
|
||||
<!-- Header -->
|
||||
<header style="margin-bottom: 2rem; 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);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
|
||||
<div style="flex: 1;">
|
||||
<h1 style="margin: 0 0 0.5rem 0; color: var(--color-primary);">
|
||||
{tool.icon && <span style="margin-right: 0.75rem; font-size: 1.5rem;">{tool.icon}</span>}
|
||||
{entry.data.title}
|
||||
</h1>
|
||||
<p style="margin: 0; color: var(--color-text-secondary); font-size: 1.125rem;">
|
||||
{entry.data.description}
|
||||
</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; align-items: end;">
|
||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||
{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>}
|
||||
{!isMethod && !isConcept && <span class="badge" style="background-color: var(--color-primary); color: white;">Software</span>}
|
||||
{!isMethod && !isConcept && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
|
||||
{!isMethod && !isConcept && tool.license !== 'Proprietary' && <span class="badge badge-success">Open Source</span>}
|
||||
<span class="badge badge-error">📖</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border);">
|
||||
<div>
|
||||
<strong style="font-size: 0.875rem; color: var(--color-text-secondary);">Schwierigkeit</strong>
|
||||
<p style="margin: 0; font-size: 0.9375rem;">{entry.data.difficulty}</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong style="font-size: 0.875rem; color: var(--color-text-secondary);">Letztes Update</strong>
|
||||
<p style="margin: 0; font-size: 0.9375rem;">{entry.data.last_updated.toLocaleDateString('de-DE')}</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong style="font-size: 0.875rem; color: var(--color-text-secondary);">Autor</strong>
|
||||
<p style="margin: 0; font-size: 0.9375rem;">{entry.data.author}</p>
|
||||
</div>
|
||||
{entry.data.categories && entry.data.categories.length > 0 && (
|
||||
<div>
|
||||
<strong style="font-size: 0.875rem; color: var(--color-text-secondary);">Kategorien</strong>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem;">
|
||||
{entry.data.categories.map((cat: string) => (
|
||||
<span class="tag" style="font-size: 0.75rem;">{cat}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav style="margin-bottom: 2rem; position: relative; z-index: 50;">
|
||||
<a href="/knowledgebase" 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;">
|
||||
<polyline points="15,18 9,12 15,6"></polyline>
|
||||
</svg>
|
||||
Zurück zur Knowledgebase
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="card" style="padding: 2rem;">
|
||||
<div class="kb-content markdown-content" style="line-height: 1.7;">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tool Actions -->
|
||||
<div class="card" style="margin-top: 2rem; background-color: var(--color-bg-secondary);">
|
||||
<h3 style="margin: 0 0 1rem 0; color: var(--color-text);">Tool-Aktionen</h3>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
{isConcept ? (
|
||||
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="background-color: var(--color-concept); border-color: var(--color-concept);">
|
||||
<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>
|
||||
Mehr erfahren
|
||||
</a>
|
||||
) : isMethod ? (
|
||||
<a href={tool.projectUrl || tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="background-color: var(--color-method); border-color: var(--color-method);">
|
||||
<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>
|
||||
Zur Methode
|
||||
</a>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<a href="/" 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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9,22 9,12 15,12 15,22"/>
|
||||
</svg>
|
||||
Zur Hauptseite
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user