CMS 2.0 - Theme engine, logging, admin improvements
Major changes: - New ThemeManager with Twig templating and SCSS compilation - Dynamic themes system (themes/default, themes/demo) - LogManager with SQLite storage and syslog forwarding - RequestLogger with static helper methods - Admin UI overhaul (Bootstrap 5, dark mode) - Admin config page with logging and theme settings - Admin logs page with filters and search - Removed legacy Mustache templates - Removed test plugin and theme - Composer dependencies: Twig, scssphp, CommonMark, MaxMind GeoIP
This commit is contained in:
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ current_lang }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ page_title }} - {{ site_title }}</title>
|
||||
|
||||
<!-- Skip to content link for accessibility -->
|
||||
<a href="#main-content" class="skip-link sr-only sr-only-focusable">Skip to main content</a>
|
||||
|
||||
<!-- 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 }}">
|
||||
{% if block_ai_bots %}
|
||||
<meta name="robots" content="noai, noimageai">
|
||||
<meta name="tdm-reservation" content="1">
|
||||
{% endif %}
|
||||
{% if block_search_engines %}
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
{% endif %}
|
||||
|
||||
<!-- Author Links -->
|
||||
<link rel="author" href="{{ author_website }}">
|
||||
<link rel="me" href="{{ author_git }}">
|
||||
|
||||
<!-- Favicon and PWA -->
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="theme-color" content="{{ theme_config.header_color|default('#0a369d') }}">
|
||||
|
||||
<!-- Styles -->
|
||||
<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">
|
||||
{% if theme_css_url %}
|
||||
<link href="{{ theme_css_url }}" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<!-- Accessibility styles -->
|
||||
<style>
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 6px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
z-index: 100;
|
||||
}
|
||||
.skip-link:focus {
|
||||
top: 6px;
|
||||
outline: 3px solid #0056b3;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
.sr-only-focusable:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: inherit;
|
||||
margin: inherit;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Dynamic theme styles -->
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#site-header > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% include 'partials/header.twig' %}
|
||||
|
||||
<nav role="navigation" aria-label="Main navigation" id="site-navigation">
|
||||
{% include 'partials/navigation.twig' %}
|
||||
</nav>
|
||||
|
||||
<nav id="site-breadcrumb" class="breadcrumb-section bg-light border-bottom" aria-label="Breadcrumb navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 py-2">
|
||||
<h2 class="sr-only">Breadcrumb Navigation</h2>
|
||||
{{ breadcrumb|raw }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main" id="main-content" class="main-content" style="padding: 0;">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo" id="site-footer">
|
||||
{% include 'partials/footer.twig' %}
|
||||
</footer>
|
||||
|
||||
<script src="/assets/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="/assets/js/app.js"></script>
|
||||
{% if theme_js_url %}
|
||||
<script src="{{ theme_js_url }}"></script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,367 @@
|
||||
// CodePress default theme styles
|
||||
// Compiled at runtime by ThemeManager (scssphp) into public/themes/default/theme.css
|
||||
|
||||
// Theme color variables (defined per theme; used by the CSS custom properties below)
|
||||
$header-bg: #0a369d;
|
||||
$header-font: #ffffff;
|
||||
$header-height: 56px;
|
||||
$nav-bg: #2754b4;
|
||||
$nav-font: #ffffff;
|
||||
$nav-height: 42px;
|
||||
$sidebar-bg: #f8f9fa;
|
||||
$sidebar-border: #dee2e6;
|
||||
|
||||
// Optional header background image and overlay opacity
|
||||
$header-bg-image: none;
|
||||
$header-bg-opacity: 1;
|
||||
|
||||
:root {
|
||||
--header-bg: #{$header-bg};
|
||||
--header-font: #{$header-font};
|
||||
--header-height: #{$header-height};
|
||||
--nav-bg: #{$nav-bg};
|
||||
--nav-font: #{$nav-font};
|
||||
--nav-height: #{$nav-height};
|
||||
--sidebar-bg: #{$sidebar-bg};
|
||||
--sidebar-border: #{$sidebar-border};
|
||||
}
|
||||
|
||||
// Header background (optional background image via $header-bg-image)
|
||||
#site-header {
|
||||
background-image: $header-bg-image;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@if $header-bg-image != 'none' {
|
||||
#site-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: var(--header-bg);
|
||||
opacity: $header-bg-opacity;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Header styles
|
||||
.navbar {
|
||||
background-color: var(--header-bg) !important;
|
||||
min-height: var(--header-height);
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-text,
|
||||
.form-control,
|
||||
.btn {
|
||||
color: var(--header-font) !important;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&: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;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--header-font) !important;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
.show > &.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;
|
||||
|
||||
a {
|
||||
color: var(--nav-font) !important;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar toggle button in breadcrumb
|
||||
.sidebar-toggle-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-toggle-btn {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-size: 1.1rem;
|
||||
color: var(--header-bg) !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar hide/show transition
|
||||
.sidebar-column {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Navigation section background
|
||||
.navigation-section {
|
||||
background-color: var(--nav-bg) !important;
|
||||
color: var(--nav-font) !important;
|
||||
min-height: var(--nav-height);
|
||||
}
|
||||
|
||||
// Enhanced accessibility styles
|
||||
.focus-visible:focus,
|
||||
.btn:focus,
|
||||
.form-control:focus,
|
||||
.nav-link:focus {
|
||||
outline: 3px solid #0056b3 !important;
|
||||
outline-offset: 2px !important;
|
||||
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0056b3 !important;
|
||||
}
|
||||
|
||||
// High contrast mode support
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--text-color: #000000;
|
||||
--bg-color: #ffffff;
|
||||
--border-color: #000000;
|
||||
--focus-color: #000000;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
color: #000000 !important;
|
||||
border-color: #000000 !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #ffffff !important;
|
||||
border-bottom: 1px solid #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Reduced motion support
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove nav-tabs background so it inherits from parent
|
||||
.nav-tabs {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
|
||||
.nav-link {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
color: var(--nav-font) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
&.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;
|
||||
min-height: calc(100vh - var(--header-height) - var(--nav-height) - 42px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Code block styling
|
||||
pre {
|
||||
background: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dee2e6;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: #e8e8e8;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
// Footer icon hover effects
|
||||
.footer-icon {
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
|
||||
&:hover {
|
||||
color: #0d6efd;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.guide:hover {
|
||||
color: #198754;
|
||||
}
|
||||
|
||||
&.cms:hover {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
&.git:hover {
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
&.website:hover {
|
||||
color: #fd7e14;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row g-0">
|
||||
<aside role="complementary" aria-label="Sidebar content" id="site-sidebar" class="col-12 sidebar-column">
|
||||
<div class="sidebar">
|
||||
{{ sidebar_content|raw }}
|
||||
</div>
|
||||
</aside>
|
||||
<section id="site-content" class="col-12">
|
||||
<div class="content-wrapper p-4">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,11 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<section id="site-content" class="col-12">
|
||||
<div class="content-wrapper p-4">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,21 @@
|
||||
// CodePress default theme JavaScript
|
||||
// Loaded after the global app.js on every page.
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// Sidebar toggle (used by the breadcrumb toggle button)
|
||||
function toggleSidebar() {
|
||||
var sidebar = document.getElementById('site-sidebar');
|
||||
if (!sidebar) return;
|
||||
sidebar.classList.toggle('sidebar-hidden');
|
||||
var btn = document.querySelector('.sidebar-toggle-btn');
|
||||
if (btn) {
|
||||
var hidden = sidebar.classList.contains('sidebar-hidden');
|
||||
btn.setAttribute('aria-expanded', hidden ? 'false' : 'true');
|
||||
}
|
||||
}
|
||||
|
||||
// Expose for inline onclick handlers
|
||||
window.toggleSidebar = toggleSidebar;
|
||||
})();
|
||||
@@ -0,0 +1,26 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
{% if sidebar_content %}
|
||||
<div class="row g-0">
|
||||
<aside role="complementary" aria-label="Sidebar content" id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2 order-md-1">
|
||||
<div class="sidebar h-100">
|
||||
{{ sidebar_content|raw }}
|
||||
</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|raw }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="container">
|
||||
<section id="site-content" class="col-12">
|
||||
<div class="content-wrapper p-4">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,48 @@
|
||||
<footer class="bg-light border-top py-1">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
|
||||
<div class="file-info mb-2 mb-md-0">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-file-text footer-icon" title="{{ t_file_details }}: {{ page_title }}"></i>
|
||||
<span class="page-title d-none d-lg-inline" title="{{ page_title }}">{{ page_title }}</span>
|
||||
{% if file_info_block %}
|
||||
<span class="ms-2">
|
||||
{% if show_created %}
|
||||
<i class="bi bi-calendar-plus footer-icon" title="{{ t_created }}: {{ created }}"></i>
|
||||
<span class="file-created me-1" title="{{ t_created }}: {{ created }}">{{ created }}</span>
|
||||
{% endif %}
|
||||
<i class="bi bi-calendar-check footer-icon" title="{{ t_modified }}: {{ modified }}"></i>
|
||||
<span class="file-modified" title="{{ t_modified }}: {{ modified }}">{{ modified }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
<div class="site-info">
|
||||
<small class="text-muted">
|
||||
<a href="/{{ current_lang }}/guide" class="footer-icon guide" title="{{ t_guide }}">
|
||||
<i class="bi bi-book"></i>
|
||||
</a>
|
||||
<span class="ms-1">|</span>
|
||||
{% if cms_version %}
|
||||
<span class="ms-1 cms-version text-muted">{{ cms_version }}</span>
|
||||
{% endif %}
|
||||
<a href="https://git.noorlander.info/E.Noorlander/CodePress.git" target="_blank" rel="noopener noreferrer" class="footer-icon cms ms-1" title="{{ t_powered_by }} CodePress CMS">
|
||||
<i class="bi bi-cpu"></i>
|
||||
</a>
|
||||
<span class="ms-1">|</span>
|
||||
<a href="{{ author_website }}" target="_blank" rel="noopener noreferrer" class="footer-icon website" title="{{ t_author_website }}">
|
||||
<i class="bi bi-globe"></i>
|
||||
</a>
|
||||
<span class="ms-1">|</span>
|
||||
<a href="{{ author_git }}" target="_blank" rel="noopener noreferrer" class="footer-icon git" title="{{ t_author_git }}">
|
||||
<i class="bi bi-git"></i>
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,75 @@
|
||||
<header id="site-header" class="navbar navbar-expand-lg navbar-dark" style="background-color: transparent;">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/{{ current_lang }}">
|
||||
<img src="/assets/icon.svg" alt="CodePress Logo" width="32" height="32" class="me-2">
|
||||
{{ site_title }}
|
||||
</a>
|
||||
|
||||
<!-- Desktop search and language -->
|
||||
<div class="d-none d-lg-flex ms-auto align-items-center">
|
||||
<form class="d-flex me-3" method="GET" action="" role="search" aria-label="Site search">
|
||||
<div class="form-group">
|
||||
<label for="desktop-search-input" class="sr-only">{{ t_search_placeholder }}</label>
|
||||
<input class="form-control me-2 search-input" type="search" id="desktop-search-input" name="search" placeholder="{{ t_search_placeholder }}" value="{{ search_query }}" aria-describedby="search-help">
|
||||
<div id="search-help" class="sr-only">Enter keywords to search through the documentation</div>
|
||||
</div>
|
||||
<button class="btn btn-outline-light" type="submit" aria-label="{{ t_search_button }}">
|
||||
<i class="bi bi-search" aria-hidden="true"></i>
|
||||
<span class="sr-only">{{ t_search_button }}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Language switcher -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-light" type="button" data-bs-toggle="dropdown" aria-haspopup="menu" aria-expanded="false" aria-label="Select language - currently {{ current_lang_upper }}">
|
||||
{{ current_lang_upper }} <i class="bi bi-chevron-down" aria-hidden="true"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" role="menu">
|
||||
{% for lang in available_langs %}
|
||||
<li role="none">
|
||||
<a class="dropdown-item {{ lang.is_current ? 'active' : '' }}" href="{{ lang.url }}" role="menuitem" {% if lang.is_current %}aria-current="true"{% endif %} lang="{{ lang.code }}">
|
||||
{{ lang.native_name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile search and language toggle -->
|
||||
<div class="d-lg-none">
|
||||
<button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mobileSearch" aria-controls="mobileSearch" aria-expanded="false" aria-label="Toggle search">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-light" type="button" data-bs-toggle="dropdown" aria-haspopup="menu" aria-expanded="false" aria-label="Select language - currently {{ current_lang_upper }}">
|
||||
{{ current_lang_upper }} <i class="bi bi-chevron-down" aria-hidden="true"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" role="menu">
|
||||
{% for lang in available_langs %}
|
||||
<li role="none">
|
||||
<a class="dropdown-item {{ lang.is_current ? 'active' : '' }}" href="{{ lang.url }}" role="menuitem" {% if lang.is_current %}aria-current="true"{% endif %} lang="{{ lang.code }}">
|
||||
{{ lang.native_name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile search bar -->
|
||||
<div class="collapse navbar-collapse d-lg-none" id="mobileSearch">
|
||||
<div class="container-fluid px-0">
|
||||
<form class="d-flex px-3 pb-3" method="GET" action="" role="search" aria-label="Site search">
|
||||
<div class="form-group w-100">
|
||||
<label for="mobile-search-input" class="sr-only">{{ t_search_placeholder }}</label>
|
||||
<input class="form-control me-2 search-input" type="search" id="mobile-search-input" name="search" placeholder="{{ t_search_placeholder }}" value="{{ search_query }}" aria-describedby="mobile-search-help">
|
||||
<div id="mobile-search-help" class="sr-only">Enter keywords to search through the documentation</div>
|
||||
</div>
|
||||
<button class="btn btn-outline-light" type="submit" aria-label="{{ t_search_button }}">
|
||||
<i class="bi bi-search" aria-hidden="true"></i>
|
||||
<span class="sr-only">{{ t_search_button }}</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,17 @@
|
||||
<nav class="navigation-section" role="navigation" aria-label="Main navigation">
|
||||
<h2 class="sr-only">Site Navigation</h2>
|
||||
<div class="container-fluid">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<ul class="nav nav-tabs flex-wrap" role="menubar">
|
||||
<li class="nav-item" role="none">
|
||||
<a class="nav-link {{ home_active_class }}" href="/{{ current_lang }}" role="menuitem" {% if is_homepage %}aria-current="page"{% endif %}>
|
||||
<i class="bi bi-house" aria-hidden="true"></i> {{ homepage_title }}
|
||||
</a>
|
||||
</li>
|
||||
{{ menu|raw }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,26 @@
|
||||
{% extends 'base.twig' %}
|
||||
|
||||
{% block content %}
|
||||
{% if sidebar_content %}
|
||||
<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|raw }}
|
||||
</div>
|
||||
</section>
|
||||
<aside role="complementary" aria-label="Sidebar content" id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2">
|
||||
<div class="sidebar h-100">
|
||||
{{ sidebar_content|raw }}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="container">
|
||||
<section id="site-content" class="col-12">
|
||||
<div class="content-wrapper p-4">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
+10
-11
@@ -1,13 +1,12 @@
|
||||
{
|
||||
"name": "Standaard",
|
||||
"header_color": "#0a369d",
|
||||
"header_font_color": "#ffffff",
|
||||
"header_height": "56",
|
||||
"navigation_color": "#2754b4",
|
||||
"navigation_font_color": "#ffffff",
|
||||
"nav_height": "42",
|
||||
"sidebar_background": "#f8f9fa",
|
||||
"sidebar_border": "#dee2e6",
|
||||
"background_image": "",
|
||||
"background_image_opacity": "100"
|
||||
"title": "default",
|
||||
"config": {
|
||||
"default_template": "full_content"
|
||||
},
|
||||
"template": {
|
||||
"full_content": "full_content.twig",
|
||||
"left_sidebar": "left_sidebar.twig",
|
||||
"right_sidebar": "right_sidebar.twig",
|
||||
"custom1": "custom1.twig"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Reference in New Issue
Block a user