301 lines
11 KiB
PHP
301 lines
11 KiB
PHP
<?php
|
|
/**
|
|
* Docs Header Partial
|
|
* app/Views/docs/partials/docs_header.php
|
|
*
|
|
* Usage in any docs view:
|
|
* <?= view('docs/partials/docs_header', ['doc_title' => 'Installation']) ?>
|
|
*
|
|
* Variables:
|
|
* $doc_title (string) — page title shown in <title> and breadcrumb
|
|
* $app_name (string) — defaults to 'Nhance PAM'
|
|
* $app_version (string) — defaults to 'v1.1.0'
|
|
*/
|
|
|
|
$doc_title = $doc_title ?? 'Documentation';
|
|
$app_name = $app_name ?? 'Nhance PAM';
|
|
$app_version = $app_version ?? 'v1.1.0';
|
|
$base = base_url();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title><?= esc($doc_title) ?> — <?= esc($app_name) ?> Doc, <?= esc($app_version) ?></title>
|
|
|
|
<!-- Highlight.js (code syntax) -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
|
|
<style>
|
|
/* ─── RESET ──────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
/* ─── TOKENS ─────────────────────────────── */
|
|
:root {
|
|
--sidebar-w : 260px;
|
|
--toc-w : 200px;
|
|
--topbar-h : 56px;
|
|
--bg : #ffffff;
|
|
--bg2 : #f7f8fa;
|
|
--border : #e2e5ea;
|
|
--text : #1a1d23;
|
|
--muted : #6b7280;
|
|
--accent : #2563eb;
|
|
--accent-bg : #eff4ff;
|
|
--code-bg : #f3f4f6;
|
|
--font : 'IBM Plex Sans', system-ui, sans-serif;
|
|
--mono : 'IBM Plex Mono', 'Fira Code', monospace;
|
|
}
|
|
|
|
/* ─── BASE ───────────────────────────────── */
|
|
body {
|
|
font-family : var(--font);
|
|
font-size : 15px;
|
|
line-height : 1.7;
|
|
color : var(--text);
|
|
background : var(--bg);
|
|
display : flex;
|
|
flex-direction: column;
|
|
min-height : 100vh;
|
|
}
|
|
|
|
/* ─── TOP BAR ────────────────────────────── */
|
|
.docs-topbar {
|
|
position : fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index : 200;
|
|
height : var(--topbar-h);
|
|
background : var(--bg);
|
|
border-bottom : 1px solid var(--border);
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content: space-between;
|
|
padding : 0 24px;
|
|
}
|
|
|
|
.docs-topbar__logo {
|
|
display : flex;
|
|
align-items : center;
|
|
gap : 10px;
|
|
text-decoration: none;
|
|
color : var(--text);
|
|
font-weight : 600;
|
|
font-size : 15px;
|
|
letter-spacing : -0.01em;
|
|
}
|
|
|
|
.docs-topbar__badge {
|
|
background : var(--accent);
|
|
color : #fff;
|
|
font-size : 10px;
|
|
font-weight : 600;
|
|
padding : 2px 8px;
|
|
border-radius : 4px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.docs-topbar__right {
|
|
display : flex;
|
|
align-items: center;
|
|
gap : 16px;
|
|
}
|
|
|
|
.docs-topbar__version {
|
|
font-family : var(--mono);
|
|
font-size : 12px;
|
|
color : var(--muted);
|
|
background : var(--bg2);
|
|
border : 1px solid var(--border);
|
|
border-radius: 20px;
|
|
padding : 2px 10px;
|
|
}
|
|
|
|
.docs-topbar__search {
|
|
display : flex;
|
|
align-items : center;
|
|
gap : 8px;
|
|
border : 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding : 5px 12px;
|
|
font-size : 13px;
|
|
color : var(--muted);
|
|
background : var(--bg2);
|
|
cursor : text;
|
|
min-width : 200px;
|
|
}
|
|
|
|
.docs-topbar__search kbd {
|
|
font-family : var(--mono);
|
|
font-size : 11px;
|
|
background : var(--bg);
|
|
border : 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding : 1px 5px;
|
|
margin-left : auto;
|
|
}
|
|
|
|
/* ─── LAYOUT WRAPPER ─────────────────────── */
|
|
.docs-layout {
|
|
display : flex;
|
|
width : 100%;
|
|
align-items: flex-start;
|
|
margin-top: var(--topbar-h);
|
|
min-height: calc(100vh - var(--topbar-h));
|
|
}
|
|
|
|
/* ─── TYPOGRAPHY (shared across pages) ───── */
|
|
h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 8px; }
|
|
h2 { font-size: 20px; font-weight: 600; margin: 40px 0 12px; letter-spacing: -0.015em; }
|
|
h3 { font-size: 16px; font-weight: 600; margin: 28px 0 8px; }
|
|
|
|
p { margin-bottom: 16px; color: #2d3340; }
|
|
a { color: var(--accent); }
|
|
|
|
/* ─── CODE ───────────────────────────────── */
|
|
pre {
|
|
background : #1e1e2e;
|
|
border-radius: 8px;
|
|
padding : 18px 20px;
|
|
overflow-x : auto;
|
|
margin : 16px 0;
|
|
}
|
|
pre code {
|
|
font-family: var(--mono);
|
|
font-size : 13px;
|
|
line-height: 1.65;
|
|
color : #cdd6f4;
|
|
background : none;
|
|
}
|
|
code {
|
|
font-family : var(--mono);
|
|
font-size : 13px;
|
|
background : var(--code-bg);
|
|
color : #c7254e;
|
|
padding : 2px 5px;
|
|
border-radius: 4px;
|
|
}
|
|
.code-header {
|
|
background : #13131e;
|
|
border-radius: 8px 8px 0 0;
|
|
padding : 8px 16px;
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content: space-between;
|
|
margin-bottom: -8px;
|
|
}
|
|
.code-filename { font-family: var(--mono); font-size: 12px; color: #a6adc8; }
|
|
.code-lang { font-size: 11px; color: #585b70; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
|
|
/* ─── CALLOUTS ───────────────────────────── */
|
|
.callout {
|
|
border-radius: 8px;
|
|
padding : 14px 16px;
|
|
margin : 20px 0;
|
|
font-size : 14px;
|
|
display : flex;
|
|
gap : 10px;
|
|
align-items : flex-start;
|
|
border-left : 3px solid;
|
|
}
|
|
.callout strong { display: block; margin-bottom: 2px; font-weight: 600; }
|
|
.callout.info { background: #eff4ff; border-color: #2563eb; color: #1e40af; }
|
|
.callout.warning { background: #fffbeb; border-color: #f59e0b; color: #b45309; }
|
|
.callout.danger { background: #fef2f2; border-color: #f87171; color: #b91c1c; }
|
|
.callout.success { background: #f0fdf4; border-color: #4ade80; color: #15803d; }
|
|
|
|
/* ─── TABLES ─────────────────────────────── */
|
|
.docs-table-wrap {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin: 20px 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
.docs-table-wrap table { margin: 0; min-width: 640px; }
|
|
.docs-table-wrap--fluid table { min-width: 0; width: 100%; }
|
|
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13.5px; }
|
|
th {
|
|
background : var(--bg2);
|
|
font-weight : 600;
|
|
font-size : 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color : var(--muted);
|
|
padding : 10px 14px;
|
|
border : 1px solid var(--border);
|
|
text-align : left;
|
|
}
|
|
td { padding: 10px 14px; border: 1px solid var(--border); vertical-align: top; }
|
|
tr:hover td { background: var(--bg2); }
|
|
|
|
/* ─── BADGES ─────────────────────────────── */
|
|
.badge {
|
|
display : inline-block;
|
|
font-size : 11px;
|
|
font-weight : 500;
|
|
padding : 2px 8px;
|
|
border-radius: 4px;
|
|
font-family : var(--mono);
|
|
}
|
|
.badge.get { background: #dbeafe; color: #1d4ed8; }
|
|
.badge.post { background: #dcfce7; color: #15803d; }
|
|
.badge.put { background: #fef9c3; color: #92400e; }
|
|
.badge.delete { background: #fee2e2; color: #991b1b; }
|
|
.badge.req { background: #fee2e2; color: #991b1b; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.badge.opt { background: var(--bg2); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
|
|
/* ─── PARAM NAME ─────────────────────────── */
|
|
.param-name { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
|
|
|
|
/* ─── STEP LIST ──────────────────────────── */
|
|
.steps { list-style: none; counter-reset: steps; margin: 20px 0; }
|
|
.steps li { counter-increment: steps; position: relative; padding: 0 0 28px 44px; }
|
|
.steps li::before {
|
|
content : counter(steps);
|
|
position : absolute; left: 0; top: 2px;
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
background : var(--accent-bg); color: var(--accent);
|
|
font-size : 12px; font-weight: 600;
|
|
display : flex; align-items: center; justify-content: center;
|
|
}
|
|
.steps li::after {
|
|
content : '';
|
|
position: absolute; left: 13px; top: 32px; bottom: 0;
|
|
width : 1px; background: var(--border);
|
|
}
|
|
.steps li:last-child::after { display: none; }
|
|
.steps li strong { display: block; margin-bottom: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
TOP BAR
|
|
════════════════════════════════════════════ -->
|
|
<header class="docs-topbar">
|
|
<a href="<?= $base ?>docs" class="docs-topbar__logo">
|
|
<span class="docs-topbar__badge">CI4</span>
|
|
<?= esc($app_name) ?> Doc, <?= esc($app_version) ?>
|
|
</a>
|
|
|
|
<div class="docs-topbar__right">
|
|
<div class="docs-topbar__search">
|
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
Search docs
|
|
<kbd>⌘K</kbd>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ═══════════════════════════════════════════
|
|
LAYOUT WRAPPER (sidebar + main go inside)
|
|
════════════════════════════════════════════ -->
|
|
<div class="docs-layout">
|