Edwin Noorlander
9c5a43c5ce
- Fix template variable replacement in guide pages by removing {{}} brackets
- Escape code blocks in guide markdown to prevent template processing
- Completely rewrite guide documentation with comprehensive CMS features
- Add bilingual guide support (English/Dutch) with detailed examples
- Enhance CodePressCMS core with improved guide page handling
- Update template system with better layout and footer components
- Improve language files with additional translations
- Update configuration with enhanced theme and language settings
Resolves issue where guide pages were showing replaced template variables
instead of displaying them as documentation examples.
356 lines
11 KiB
Plaintext
356 lines
11 KiB
Plaintext
<!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>
|
|
|
|
<!-- CMS Meta Tags -->
|
|
<meta name="generator" content="{{site_title}} CMS">
|
|
<meta name="application-name" content="{{site_title}}">
|
|
<meta name="author" content="{{author_name}}">
|
|
<meta name="creator" content="{{author_name}}">
|
|
<meta name="publisher" content="{{author_name}}">
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="{{seo_description}}">
|
|
<meta name="keywords" content="{{seo_keywords}}">
|
|
|
|
<!-- Author Links -->
|
|
<link rel="author" href="{{author_website}}">
|
|
<link rel="me" href="{{author_git}}">
|
|
|
|
<!-- Favicon and Styles -->
|
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
|
|
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="/assets/css/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="/assets/css/style.css" rel="stylesheet">
|
|
<link href="/assets/css/mobile.css" rel="stylesheet">
|
|
|
|
<!-- Dynamic theme colors -->
|
|
<style>
|
|
:root {
|
|
--header-bg: {{header_color}};
|
|
--header-font: {{header_font_color}};
|
|
--nav-bg: {{navigation_color}};
|
|
--nav-font: {{navigation_font_color}};
|
|
--sidebar-bg: {{sidebar_background}};
|
|
--sidebar-border: {{sidebar_border}};
|
|
}
|
|
|
|
/* Header styles */
|
|
.navbar {
|
|
background-color: var(--header-bg) !important;
|
|
}
|
|
|
|
.navbar .navbar-brand,
|
|
.navbar .navbar-text,
|
|
.navbar .form-control,
|
|
.navbar .btn {
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
.navbar .form-control::placeholder {
|
|
color: rgba(255,255,255,0.7) !important;
|
|
}
|
|
|
|
.navbar .btn-outline-light {
|
|
border-color: var(--header-font) !important;
|
|
}
|
|
|
|
/* Language dropdown styling */
|
|
.dropdown-menu {
|
|
background-color: var(--header-bg) !important;
|
|
border: 1px solid var(--header-font) !important;
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
/* Hide Bootstrap dropdown arrow and use custom icon */
|
|
.dropdown-toggle::after {
|
|
display: none !important;
|
|
}
|
|
|
|
.btn-outline-light {
|
|
color: var(--header-font) !important;
|
|
border-color: var(--header-font) !important;
|
|
}
|
|
|
|
.btn-outline-light:hover {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
color: var(--header-font) !important;
|
|
}
|
|
|
|
/* Fix button color when dropdown is open */
|
|
.btn-outline-light:focus,
|
|
.btn-outline-light:active,
|
|
.show > .btn-outline-light.dropdown-toggle {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
color: var(--header-font) !important;
|
|
border-color: var(--header-font) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.bi-chevron-down {
|
|
font-size: 0.75em;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
/* Remove Bootstrap default breadcrumb separators */
|
|
.breadcrumb-item + .breadcrumb-item::before {
|
|
content: "" !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Custom breadcrumb styling */
|
|
.breadcrumb {
|
|
--bs-breadcrumb-divider: "";
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
color: var(--nav-font) !important;
|
|
}
|
|
|
|
.breadcrumb-item a {
|
|
color: var(--nav-font) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Navigation section background */
|
|
.navigation-section {
|
|
background-color: var(--nav-bg) !important;
|
|
color: var(--nav-font) !important;
|
|
}
|
|
|
|
/* Remove nav-tabs background so it inherits from parent */
|
|
.nav-tabs {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
color: var(--nav-font) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
background-color: rgba(255,255,255,0.1) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
background-color: rgba(255,255,255,0.2) !important;
|
|
border-bottom: 2px solid var(--nav-font) !important;
|
|
}
|
|
|
|
/* Sidebar styling */
|
|
.sidebar-column {
|
|
background-color: var(--sidebar-bg) !important;
|
|
border-right: 1px solid var(--sidebar-border) !important;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
padding: 1.5rem;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.content-column {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding: 2rem;
|
|
padding-bottom: 80px !important;
|
|
}
|
|
|
|
/* Ensure full height layout */
|
|
.main-content {
|
|
min-height: calc(100vh - 200px);
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 767.98px) {
|
|
.sidebar-column {
|
|
border-right: none !important;
|
|
border-top: 1px solid var(--sidebar-border) !important;
|
|
min-height: auto;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.content-column {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.content-wrapper {
|
|
min-height: auto;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
}
|
|
|
|
/* Tablet and mobile: sidebar below content */
|
|
@media (max-width: 991.98px) {
|
|
.sidebar-column {
|
|
order: 2 !important;
|
|
}
|
|
|
|
.content-column {
|
|
order: 1 !important;
|
|
}
|
|
}
|
|
|
|
/* Footer icon hover effects */
|
|
.footer-icon {
|
|
color: #6c757d;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease-in-out;
|
|
display: inline-block;
|
|
padding: 2px;
|
|
}
|
|
|
|
.footer-icon:hover {
|
|
color: #0d6efd;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.footer-icon:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Specific icon hover colors */
|
|
.footer-icon.guide:hover {
|
|
color: #198754;
|
|
}
|
|
|
|
.footer-icon.cms:hover {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.footer-icon.git:hover {
|
|
color: #6f42c1;
|
|
}
|
|
|
|
.footer-icon.website:hover {
|
|
color: #fd7e14;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header id="site-header">
|
|
{{>header}}
|
|
</header>
|
|
|
|
<nav id="site-navigation">
|
|
{{>navigation}}
|
|
</nav>
|
|
|
|
<div id="site-breadcrumb" class="breadcrumb-section bg-light border-bottom">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 py-2">
|
|
{{{breadcrumb}}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main id="site-main" class="main-content" style="padding: 0;">
|
|
{{#sidebar_content}}
|
|
{{#equal layout "sidebar-content"}}
|
|
<div class="row g-0">
|
|
<aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2 order-md-1">
|
|
<div class="sidebar h-100">
|
|
{{{sidebar_content}}}
|
|
</div>
|
|
</aside>
|
|
<section id="site-content" class="col-lg-9 col-md-8 content-column order-1 order-md-2">
|
|
<div class="content-wrapper p-4">
|
|
{{>content_template}}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{{/equal}}
|
|
|
|
{{#equal layout "content"}}
|
|
<div class="container">
|
|
<section id="site-content" class="col-12">
|
|
<div class="content-wrapper p-4">
|
|
{{>content_template}}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{{/equal}}
|
|
|
|
{{#equal layout "sidebar"}}
|
|
<div class="container-fluid">
|
|
<aside id="site-sidebar" class="col-12 sidebar-column">
|
|
<div class="sidebar">
|
|
{{{sidebar_content}}}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
{{/equal}}
|
|
|
|
{{#equal layout "content-sidebar"}}
|
|
<div class="row g-0">
|
|
<section id="site-content" class="col-lg-9 col-md-8 content-column order-1">
|
|
<div class="content-wrapper p-4">
|
|
{{>content_template}}
|
|
</div>
|
|
</section>
|
|
<aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2">
|
|
<div class="sidebar h-100">
|
|
{{{sidebar_content}}}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
{{/equal}}
|
|
|
|
{{#equal layout "content-sidebar-reverse"}}
|
|
<div class="row g-0 flex-row-reverse">
|
|
<section id="site-content" class="col-lg-9 col-md-8 content-column">
|
|
<div class="content-wrapper p-4">
|
|
{{>content_template}}
|
|
</div>
|
|
</section>
|
|
<aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column">
|
|
<div class="sidebar h-100">
|
|
{{{sidebar_content}}}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
{{/equal}}
|
|
{{/sidebar_content}}
|
|
{{^sidebar_content}}
|
|
<div class="container">
|
|
<section id="site-content" class="col-12">
|
|
<div class="content-wrapper p-4">
|
|
{{>content_template}}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{{/sidebar_content}}
|
|
</main>
|
|
|
|
<footer id="site-footer">
|
|
{{>footer}}
|
|
</footer>
|
|
|
|
<script src="/assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/assets/js/app.js"></script>
|
|
</body>
|
|
</html> |