Enhance directory listing with article previews

- Replaced simple list with card-based layout
- Added article previews (title + excerpt)
- Removed rounded corners (rounded-0)
- Added 'Lees meer' button
- Improved visual hierarchy for folders vs files
This commit is contained in:
Edwin Noorlander 2025-11-19 16:05:24 +01:00
parent 8e781fcdc4
commit 277f86346d

View File

@ -183,7 +183,7 @@ class CodePressCMS {
private function generateDirectoryListing($dirPath, $urlPath) { private function generateDirectoryListing($dirPath, $urlPath) {
$title = ucfirst(basename($dirPath)); $title = ucfirst(basename($dirPath));
$content = '<div class="list-group">'; $content = '<div class="row">';
$items = scandir($dirPath); $items = scandir($dirPath);
sort($items); sort($items);
@ -196,15 +196,36 @@ class CodePressCMS {
$itemName = ucfirst(pathinfo($item, PATHINFO_FILENAME)); $itemName = ucfirst(pathinfo($item, PATHINFO_FILENAME));
if (is_dir($path)) { if (is_dir($path)) {
$content .= '<a href="?page=' . $relativePath . '" class="list-group-item list-group-item-action">'; $content .= '<div class="col-md-6 mb-4">';
$content .= '<i class="bi bi-folder me-2"></i> ' . $itemName; $content .= '<div class="card h-100 border-0 rounded-0 bg-light">';
$content .= '</a>'; $content .= '<div class="card-body">';
$content .= '<h3 class="h5 card-title"><a href="?page=' . $relativePath . '" class="text-decoration-none text-dark"><i class="bi bi-folder me-2"></i> ' . $itemName . '</a></h3>';
$content .= '</div></div></div>';
} elseif (preg_match('/\.(md|php|html)$/', $item)) { } elseif (preg_match('/\.(md|php|html)$/', $item)) {
// Remove extension from URL for cleaner links // Remove extension from URL for cleaner links
$cleanPath = preg_replace('/\.[^.]+$/', '', $relativePath); $cleanPath = preg_replace('/\.[^.]+$/', '', $relativePath);
$content .= '<a href="?page=' . $cleanPath . '" class="list-group-item list-group-item-action">';
$content .= '<i class="bi bi-file-text me-2"></i> ' . $itemName; // Get preview content
$content .= '</a>'; $preview = '';
$fileContent = file_get_contents($path);
// Extract title if possible
$fileTitle = $itemName;
if (preg_match('/^#\s+(.+)$/m', $fileContent, $matches)) {
$fileTitle = trim($matches[1]);
}
// Extract preview text (first paragraph)
$fileContent = strip_tags($this->parseMarkdown($fileContent)['content']);
$preview = substr($fileContent, 0, 150) . '...';
$content .= '<div class="col-md-6 mb-4">';
$content .= '<div class="card h-100 border rounded-0">';
$content .= '<div class="card-body">';
$content .= '<h3 class="h5 card-title"><a href="?page=' . $cleanPath . '" class="text-decoration-none text-primary">' . $fileTitle . '</a></h3>';
$content .= '<p class="card-text text-muted small">' . $preview . '</p>';
$content .= '<a href="?page=' . $cleanPath . '" class="btn btn-sm btn-outline-primary rounded-0">Lees meer</a>';
$content .= '</div></div></div>';
} }
} }