Fix icon paths and complete public directory setup
- Copied assets/ directory to public/ for proper icon access - Icons now work correctly with new public structure - Fixed missing assets directory in public folder - Server ready on port 8080 with full functionality
This commit is contained in:
parent
e392bb8d09
commit
bab8d2db87
23
public/assets/favicon.svg
Normal file
23
public/assets/favicon.svg
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="codepress-gradient-small" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0d6efd;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#6610f2;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background circle -->
|
||||||
|
<circle cx="8" cy="8" r="7.5" fill="url(#codepress-gradient-small)" stroke="#ffffff" stroke-width="0.5"/>
|
||||||
|
|
||||||
|
<!-- Code brackets -->
|
||||||
|
<path d="M4 5 L3 6 L3 10 L4 11" stroke="#ffffff" stroke-width="1" fill="none" stroke-linecap="round"/>
|
||||||
|
<path d="M12 5 L13 6 L13 10 L12 11" stroke="#ffffff" stroke-width="1" fill="none" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Code slash -->
|
||||||
|
<path d="M7 4 L9 12" stroke="#ffffff" stroke-width="1" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Press dots -->
|
||||||
|
<circle cx="6" cy="13" r="0.75" fill="#ffffff"/>
|
||||||
|
<circle cx="8" cy="13" r="0.75" fill="#ffffff"/>
|
||||||
|
<circle cx="10" cy="13" r="0.75" fill="#ffffff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
23
public/assets/icon.svg
Normal file
23
public/assets/icon.svg
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="codepress-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#0d6efd;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#6610f2;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background circle -->
|
||||||
|
<circle cx="16" cy="16" r="15" fill="url(#codepress-gradient)" stroke="#ffffff" stroke-width="1"/>
|
||||||
|
|
||||||
|
<!-- Code brackets -->
|
||||||
|
<path d="M8 10 L6 12 L6 20 L8 22" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||||
|
<path d="M24 10 L26 12 L26 20 L24 22" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Code slash -->
|
||||||
|
<path d="M14 8 L18 24" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Press dots -->
|
||||||
|
<circle cx="12" cy="26" r="1.5" fill="#ffffff"/>
|
||||||
|
<circle cx="16" cy="26" r="1.5" fill="#ffffff"/>
|
||||||
|
<circle cx="20" cy="26" r="1.5" fill="#ffffff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1018 B |
16
public/config.php
Normal file
16
public/config.php
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
'site_title' => 'CodePress',
|
||||||
|
'site_description' => 'A simple PHP CMS',
|
||||||
|
'base_url' => '/',
|
||||||
|
'content_dir' => __DIR__ . '/content',
|
||||||
|
'templates_dir' => __DIR__ . '/templates',
|
||||||
|
'cache_dir' => __DIR__ . '/cache',
|
||||||
|
'default_page' => 'home',
|
||||||
|
'error_404' => '404',
|
||||||
|
'markdown_enabled' => true,
|
||||||
|
'php_enabled' => true,
|
||||||
|
'bootstrap_version' => '5.3.0',
|
||||||
|
'jquery_version' => '3.7.1'
|
||||||
|
];
|
||||||
365
public/index.php
Normal file
365
public/index.php
Normal file
@ -0,0 +1,365 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
require_once 'config.php';
|
||||||
|
|
||||||
|
$config = include 'config.php';
|
||||||
|
|
||||||
|
class CodePressCMS {
|
||||||
|
private $config;
|
||||||
|
private $menu = [];
|
||||||
|
private $searchResults = [];
|
||||||
|
|
||||||
|
public function __construct($config) {
|
||||||
|
$this->config = $config;
|
||||||
|
$this->buildMenu();
|
||||||
|
|
||||||
|
if (isset($_GET['search'])) {
|
||||||
|
$this->performSearch($_GET['search']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function buildMenu() {
|
||||||
|
$this->menu = $this->scanDirectory($this->config['content_dir'], '');
|
||||||
|
}
|
||||||
|
|
||||||
|
private function scanDirectory($dir, $prefix) {
|
||||||
|
if (!is_dir($dir)) return [];
|
||||||
|
|
||||||
|
$items = scandir($dir);
|
||||||
|
sort($items);
|
||||||
|
$result = [];
|
||||||
|
|
||||||
|
foreach ($items as $item) {
|
||||||
|
if ($item[0] === '.') continue;
|
||||||
|
|
||||||
|
$path = $dir . '/' . $item;
|
||||||
|
$relativePath = $prefix ? $prefix . '/' . $item : $item;
|
||||||
|
|
||||||
|
if (is_dir($path)) {
|
||||||
|
$result[] = [
|
||||||
|
'type' => 'folder',
|
||||||
|
'title' => ucfirst($item),
|
||||||
|
'path' => $relativePath,
|
||||||
|
'children' => $this->scanDirectory($path, $relativePath)
|
||||||
|
];
|
||||||
|
} elseif (preg_match('/\.(md|php|html)$/', $item)) {
|
||||||
|
$title = ucfirst(pathinfo($item, PATHINFO_FILENAME));
|
||||||
|
$result[] = [
|
||||||
|
'type' => 'file',
|
||||||
|
'title' => $title,
|
||||||
|
'path' => $relativePath,
|
||||||
|
'url' => '?page=' . $relativePath
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function performSearch($query) {
|
||||||
|
$this->searchResults = [];
|
||||||
|
$this->searchInDirectory($this->config['content_dir'], '', $query);
|
||||||
|
}
|
||||||
|
|
||||||
|
private function searchInDirectory($dir, $prefix, $query) {
|
||||||
|
if (!is_dir($dir)) return;
|
||||||
|
|
||||||
|
$items = scandir($dir);
|
||||||
|
|
||||||
|
foreach ($items as $item) {
|
||||||
|
if ($item[0] === '.') continue;
|
||||||
|
|
||||||
|
$path = $dir . '/' . $item;
|
||||||
|
$relativePath = $prefix ? $prefix . '/' . $item : $item;
|
||||||
|
|
||||||
|
if (is_dir($path)) {
|
||||||
|
$this->searchInDirectory($path, $relativePath, $query);
|
||||||
|
} elseif (preg_match('/\.(md|php|html)$/', $item)) {
|
||||||
|
$content = file_get_contents($path);
|
||||||
|
if (stripos($content, $query) !== false || stripos($item, $query) !== false) {
|
||||||
|
$title = ucfirst(pathinfo($item, PATHINFO_FILENAME));
|
||||||
|
$this->searchResults[] = [
|
||||||
|
'title' => $title,
|
||||||
|
'path' => $relativePath,
|
||||||
|
'url' => '?page=' . $relativePath,
|
||||||
|
'snippet' => $this->createSnippet($content, $query)
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private function createSnippet($content, $query) {
|
||||||
|
$content = strip_tags($content);
|
||||||
|
$pos = stripos($content, $query);
|
||||||
|
if ($pos === false) return substr($content, 0, 100) . '...';
|
||||||
|
|
||||||
|
$start = max(0, $pos - 50);
|
||||||
|
$snippet = substr($content, $start, 150);
|
||||||
|
return '...' . $snippet . '...';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getPage() {
|
||||||
|
if (isset($_GET['search'])) {
|
||||||
|
return $this->getSearchResults();
|
||||||
|
}
|
||||||
|
|
||||||
|
$page = $_GET['page'] ?? $this->config['default_page'];
|
||||||
|
$page = preg_replace('/\.[^.]+$/', '', $page);
|
||||||
|
|
||||||
|
$filePath = $this->config['content_dir'] . '/' . $page;
|
||||||
|
$actualFilePath = null;
|
||||||
|
|
||||||
|
if (file_exists($filePath . '.md')) {
|
||||||
|
$actualFilePath = $filePath . '.md';
|
||||||
|
$result = $this->parseMarkdown(file_get_contents($actualFilePath));
|
||||||
|
} elseif (file_exists($filePath . '.php')) {
|
||||||
|
$actualFilePath = $filePath . '.php';
|
||||||
|
$result = $this->parsePHP($actualFilePath);
|
||||||
|
} elseif (file_exists($filePath . '.html')) {
|
||||||
|
$actualFilePath = $filePath . '.html';
|
||||||
|
$result = $this->parseHTML(file_get_contents($actualFilePath));
|
||||||
|
} elseif (file_exists($filePath)) {
|
||||||
|
$actualFilePath = $filePath;
|
||||||
|
$extension = pathinfo($filePath, PATHINFO_EXTENSION);
|
||||||
|
if ($extension === 'md') {
|
||||||
|
$result = $this->parseMarkdown(file_get_contents($actualFilePath));
|
||||||
|
} elseif ($extension === 'php') {
|
||||||
|
$result = $this->parsePHP($actualFilePath);
|
||||||
|
} elseif ($extension === 'html') {
|
||||||
|
$result = $this->parseHTML(file_get_contents($actualFilePath));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($result) && $actualFilePath) {
|
||||||
|
$result['file_info'] = $this->getFileInfo($actualFilePath);
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $this->getError404();
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getFileInfo($filePath) {
|
||||||
|
if (!file_exists($filePath)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
$stats = stat($filePath);
|
||||||
|
$created = date('d-m-Y H:i', $stats['ctime']);
|
||||||
|
$modified = date('d-m-Y H:i', $stats['mtime']);
|
||||||
|
|
||||||
|
return [
|
||||||
|
'created' => $created,
|
||||||
|
'modified' => $modified,
|
||||||
|
'size' => $this->formatFileSize($stats['size'])
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
private function formatFileSize($bytes) {
|
||||||
|
$units = ['B', 'KB', 'MB', 'GB'];
|
||||||
|
$bytes = max($bytes, 0);
|
||||||
|
$pow = floor(($bytes ? log($bytes) : 0) / log(1024));
|
||||||
|
$pow = min($pow, count($units) - 1);
|
||||||
|
|
||||||
|
$bytes /= pow(1024, $pow);
|
||||||
|
|
||||||
|
return round($bytes, 2) . ' ' . $units[$pow];
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getSearchResults() {
|
||||||
|
$query = $_GET['search'];
|
||||||
|
$content = '<h2>Search Results for: "' . htmlspecialchars($query) . '"</h2>';
|
||||||
|
|
||||||
|
if (empty($this->searchResults)) {
|
||||||
|
$content .= '<p>No results found.</p>';
|
||||||
|
} else {
|
||||||
|
$content .= '<p>Found ' . count($this->searchResults) . ' results:</p>';
|
||||||
|
foreach ($this->searchResults as $result) {
|
||||||
|
$content .= '<div class="card mb-3">';
|
||||||
|
$content .= '<div class="card-body">';
|
||||||
|
$content .= '<h5 class="card-title"><a href="' . htmlspecialchars($result['url']) . '">' . htmlspecialchars($result['title']) . '</a></h5>';
|
||||||
|
$content .= '<p class="card-text text-muted">' . htmlspecialchars($result['path']) . '</p>';
|
||||||
|
$content .= '<p class="card-text">' . htmlspecialchars($result['snippet']) . '</p>';
|
||||||
|
$content .= '</div></div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
'title' => 'Search Results',
|
||||||
|
'content' => $content
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
private function parseMarkdown($content) {
|
||||||
|
$lines = explode("\n", $content);
|
||||||
|
$title = '';
|
||||||
|
$body = '';
|
||||||
|
$inBody = false;
|
||||||
|
|
||||||
|
foreach ($lines as $line) {
|
||||||
|
if (!$inBody && preg_match('/^#\s+(.+)$/', $line, $matches)) {
|
||||||
|
$title = $matches[1];
|
||||||
|
$inBody = true;
|
||||||
|
} elseif ($inBody || trim($line) !== '') {
|
||||||
|
$body .= $line . "\n";
|
||||||
|
$inBody = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$body = preg_replace('/### (.+)/', '<h3>$1</h3>', $body);
|
||||||
|
$body = preg_replace('/## (.+)/', '<h2>$1</h2>', $body);
|
||||||
|
$body = preg_replace('/# (.+)/', '<h1>$1</h1>', $body);
|
||||||
|
$body = preg_replace('/\*\*(.+?)\*\*/', '<strong>$1</strong>', $body);
|
||||||
|
$body = preg_replace('/\*(.+?)\*/', '<em>$1</em>', $body);
|
||||||
|
|
||||||
|
// Convert Markdown links to HTML links
|
||||||
|
$body = preg_replace('/\[([^\]]+)\]\(([^)]+)\)/', '<a href="$2">$1</a>', $body);
|
||||||
|
|
||||||
|
// Convert relative internal links to CMS format
|
||||||
|
$body = preg_replace('/href="\/blog\/([^"]+)"/', 'href="?page=blog/$1"', $body);
|
||||||
|
$body = preg_replace('/href="\/([^"]+)"/', 'href="?page=$1"', $body);
|
||||||
|
|
||||||
|
$body = preg_replace('/\n\n/', '</p><p>', $body);
|
||||||
|
$body = '<p>' . $body . '</p>';
|
||||||
|
$body = preg_replace('/<p><\/p>/', '', $body);
|
||||||
|
$body = preg_replace('/<p>(<h[1-6]>)/', '$1', $body);
|
||||||
|
$body = preg_replace('/(<\/h[1-6]>)<\/p>/', '$1', $body);
|
||||||
|
|
||||||
|
return [
|
||||||
|
'title' => $title ?: 'Untitled',
|
||||||
|
'content' => $body
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
private function parsePHP($filePath) {
|
||||||
|
ob_start();
|
||||||
|
$title = 'Untitled';
|
||||||
|
include $filePath;
|
||||||
|
$content = ob_get_clean();
|
||||||
|
|
||||||
|
return [
|
||||||
|
'title' => $title,
|
||||||
|
'content' => $content
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
private function parseHTML($content) {
|
||||||
|
$title = 'Untitled';
|
||||||
|
|
||||||
|
if (preg_match('/<title>(.*?)<\/title>/i', $content, $matches)) {
|
||||||
|
$title = strip_tags($matches[1]);
|
||||||
|
} elseif (preg_match('/<h1[^>]*>(.*?)<\/h1>/i', $content, $matches)) {
|
||||||
|
$title = strip_tags($matches[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
'title' => $title,
|
||||||
|
'content' => $content
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getError404() {
|
||||||
|
return [
|
||||||
|
'title' => 'Page Not Found',
|
||||||
|
'content' => '<h1>404 - Page Not Found</h1><p>The page you are looking for does not exist.</p>'
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getMenu() {
|
||||||
|
return $this->menu;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function render() {
|
||||||
|
$page = $this->getPage();
|
||||||
|
$menu = $this->getMenu();
|
||||||
|
$breadcrumb = $this->getBreadcrumb();
|
||||||
|
|
||||||
|
$template = file_get_contents($this->config['templates_dir'] . '/layout.html');
|
||||||
|
|
||||||
|
$template = str_replace('{{site_title}}', $this->config['site_title'], $template);
|
||||||
|
$template = str_replace('{{page_title}}', $page['title'], $template);
|
||||||
|
$template = str_replace('{{content}}', $page['content'], $template);
|
||||||
|
$template = str_replace('{{search_query}}', isset($_GET['search']) ? htmlspecialchars($_GET['search']) : '', $template);
|
||||||
|
$template = str_replace('{{breadcrumb}}', $breadcrumb, $template);
|
||||||
|
|
||||||
|
// File info for footer
|
||||||
|
$fileInfo = '';
|
||||||
|
if (isset($page['file_info'])) {
|
||||||
|
$fileInfo = '<i class="bi bi-file-text"></i> Created: ' . htmlspecialchars($page['file_info']['created']) .
|
||||||
|
' | Modified: ' . htmlspecialchars($page['file_info']['modified']);
|
||||||
|
}
|
||||||
|
$template = str_replace('{{file_info}}', $fileInfo, $template);
|
||||||
|
|
||||||
|
$menuHtml = $this->renderMenu($menu);
|
||||||
|
|
||||||
|
$template = str_replace('{{menu}}', $menuHtml, $template);
|
||||||
|
|
||||||
|
echo $template;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getBreadcrumb() {
|
||||||
|
if (isset($_GET['search'])) {
|
||||||
|
return '<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="?page=' . $this->config['default_page'] . '">Home</a></li><li class="breadcrumb-item active">Search</li></ol></nav>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$page = $_GET['page'] ?? $this->config['default_page'];
|
||||||
|
$page = preg_replace('/\.[^.]+$/', '', $page);
|
||||||
|
|
||||||
|
if ($page === $this->config['default_page']) {
|
||||||
|
return '<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active">Home</li></ol></nav>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$parts = explode('/', $page);
|
||||||
|
$breadcrumb = '<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="?page=' . $this->config['default_page'] . '">Home</a></li>';
|
||||||
|
|
||||||
|
$path = '';
|
||||||
|
foreach ($parts as $i => $part) {
|
||||||
|
$path .= ($path ? '/' : '') . $part;
|
||||||
|
$title = ucfirst($part);
|
||||||
|
|
||||||
|
if ($i === count($parts) - 1) {
|
||||||
|
$breadcrumb .= '<li class="breadcrumb-item active">' . $title . '</li>';
|
||||||
|
} else {
|
||||||
|
$breadcrumb .= '<li class="breadcrumb-item"><a href="?page=' . $path . '">' . $title . '</a></li>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$breadcrumb .= '</ol></nav>';
|
||||||
|
return $breadcrumb;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function renderMenu($items, $level = 0) {
|
||||||
|
$html = '';
|
||||||
|
foreach ($items as $item) {
|
||||||
|
if ($item['type'] === 'folder') {
|
||||||
|
$hasChildren = !empty($item['children']);
|
||||||
|
$html .= '<li class="nav-item">';
|
||||||
|
|
||||||
|
if ($hasChildren) {
|
||||||
|
$folderId = 'folder-' . str_replace('/', '-', $item['path']);
|
||||||
|
$html .= '<span class="nav-link folder-toggle" data-bs-toggle="collapse" data-bs-target="#' . $folderId . '" aria-expanded="false">';
|
||||||
|
$html .= '<i class="arrow bi bi-chevron-right"></i> ' . htmlspecialchars($item['title']);
|
||||||
|
$html .= '</span>';
|
||||||
|
$html .= '<ul class="nav flex-column ms-2 collapse" id="' . $folderId . '">';
|
||||||
|
$html .= $this->renderMenu($item['children'], $level + 1);
|
||||||
|
$html .= '</ul>';
|
||||||
|
} else {
|
||||||
|
$html .= '<span class="nav-link folder-disabled" disabled>';
|
||||||
|
$html .= '<i class="arrow bi bi-chevron-right"></i> ' . htmlspecialchars($item['title']);
|
||||||
|
$html .= '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$html .= '</li>';
|
||||||
|
} else {
|
||||||
|
$active = (isset($_GET['page']) && $_GET['page'] === $item['path']) ? 'active' : '';
|
||||||
|
$html .= '<li class="nav-item">';
|
||||||
|
$html .= '<a class="nav-link page-link ' . $active . '" href="' . htmlspecialchars($item['url']) . '">' . htmlspecialchars($item['title']) . '</a>';
|
||||||
|
$html .= '</li>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return $html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$cms = new CodePressCMS($config);
|
||||||
|
$cms->render();
|
||||||
306
public/templates/layout.html
Normal file
306
public/templates/layout.html
Normal file
@ -0,0 +1,306 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>{{page_title}} - {{site_title}}</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 250px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-right: 1px solid #dee2e6;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-toggle {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #212529 !important;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
margin: 0.125rem 0;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
.folder-toggle:hover {
|
||||||
|
background-color: #e9ecef !important;
|
||||||
|
}
|
||||||
|
.folder-toggle[aria-expanded="true"] {
|
||||||
|
background-color: #dee2e6 !important;
|
||||||
|
color: #212529 !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
/* Progressive background colors for nested folders */
|
||||||
|
.nav .nav .folder-toggle {
|
||||||
|
background-color: #f1f3f4 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #eaedee !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #e3e7e8 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #dce1e2 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #d5dbdd !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #ced5d8 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #c7cfd3 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #c0c9ce !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .nav .nav .nav .folder-toggle {
|
||||||
|
background-color: #b9c3c9 !important;
|
||||||
|
}
|
||||||
|
.folder-toggle .arrow {
|
||||||
|
margin-right: 8px;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
.folder-toggle[aria-expanded="true"] .arrow {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.page-link {
|
||||||
|
color: #495057 !important;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
margin: 0.125rem 0;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
/* Progressive background colors for nested pages */
|
||||||
|
.nav .nav .page-link {
|
||||||
|
background-color: #fafbfc !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .page-link {
|
||||||
|
background-color: #f5f7f8 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .page-link {
|
||||||
|
background-color: #f0f3f4 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .page-link {
|
||||||
|
background-color: #ebefef !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .page-link {
|
||||||
|
background-color: #e6eaea !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .page-link {
|
||||||
|
background-color: #e1e5e5 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .nav .page-link {
|
||||||
|
background-color: #dce0e0 !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .nav .nav .page-link {
|
||||||
|
background-color: #d7dbdb !important;
|
||||||
|
}
|
||||||
|
.nav .nav .nav .nav .nav .nav .nav .nav .nav .nav .page-link {
|
||||||
|
background-color: #d2d6d6 !important;
|
||||||
|
}
|
||||||
|
.page-link:hover {
|
||||||
|
color: #212529 !important;
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
}
|
||||||
|
.nav-link.active {
|
||||||
|
background-color: #0d6efd !important;
|
||||||
|
color: #212529 !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.file-info {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
.search-form {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
.card-title a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.card-title a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.folder-disabled {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #6c757d !important;
|
||||||
|
cursor: not-allowed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
margin: 0.125rem 0;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.folder-disabled .arrow {
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="bg-primary text-white py-3">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<img src="assets/icon.svg" alt="CodePress Logo" width="32" height="32" class="me-2">
|
||||||
|
<h1 class="h3 mb-0">{{site_title}}</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<form class="d-flex" method="GET" action="">
|
||||||
|
<input class="form-control me-2" type="search" name="search" placeholder="Search..." value="{{search_query}}">
|
||||||
|
<button class="btn btn-outline-light" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="main-wrapper">
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<nav class="sidebar">
|
||||||
|
<div class="pt-3">
|
||||||
|
<ul class="nav flex-column">
|
||||||
|
{{menu}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="main-content">
|
||||||
|
<div>
|
||||||
|
{{breadcrumb}}
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||||
|
<h2>{{page_title}}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
{{content}}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-light border-top py-3">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<div class="file-info">
|
||||||
|
{{file_info}}
|
||||||
|
</div>
|
||||||
|
<div class="site-info">
|
||||||
|
<small class="text-muted">Powered by CodePress CMS</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Open folders that contain the current active page
|
||||||
|
const activeLink = document.querySelector('.nav-link.active');
|
||||||
|
if (activeLink) {
|
||||||
|
let parent = activeLink.closest('.collapse');
|
||||||
|
while (parent) {
|
||||||
|
const toggle = document.querySelector('[data-bs-target="#' + parent.id + '"]');
|
||||||
|
if (toggle) {
|
||||||
|
const collapse = new bootstrap.Collapse(parent, {
|
||||||
|
show: true
|
||||||
|
});
|
||||||
|
toggle.setAttribute('aria-expanded', 'true');
|
||||||
|
}
|
||||||
|
parent = parent.parentElement.closest('.collapse');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close other folders when opening a new one
|
||||||
|
const folderToggles = document.querySelectorAll('.folder-toggle');
|
||||||
|
folderToggles.forEach(toggle => {
|
||||||
|
toggle.addEventListener('click', function(e) {
|
||||||
|
const targetId = this.getAttribute('data-bs-target');
|
||||||
|
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||||
|
|
||||||
|
if (!isExpanded) {
|
||||||
|
// Close all other folders
|
||||||
|
folderToggles.forEach(otherToggle => {
|
||||||
|
if (otherToggle !== this) {
|
||||||
|
const otherTargetId = otherToggle.getAttribute('data-bs-target');
|
||||||
|
if (otherTargetId) {
|
||||||
|
const otherCollapse = document.querySelector(otherTargetId);
|
||||||
|
if (otherCollapse) {
|
||||||
|
const bsCollapse = bootstrap.Collapse.getInstance(otherCollapse);
|
||||||
|
if (bsCollapse) {
|
||||||
|
bsCollapse.hide();
|
||||||
|
} else {
|
||||||
|
new bootstrap.Collapse(otherCollapse, {
|
||||||
|
hide: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
otherToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user