Enhance template parser to handle C++ comments and refactor preprocessing logic

- Updated parser to correctly interpret C++ `//` and `/* ... */` comments within template code.
- Split preprocessing implementation into separate files for better organization.
- Added regression test for comment parsing in templates.
- Adjusted CSS styles for improved layout and readability in documentation.
This commit is contained in:
udo
2026-04-20 21:41:23 +00:00
parent dc05f9faa5
commit b53eb6e4f1
11 changed files with 568 additions and 390 deletions
+67 -32
View File
@@ -133,10 +133,25 @@ RENDER(Request& context)
}
else
{
?><article class="doc-detail"><?
auto doc = split(file_get_contents("pages/"+page+".txt"), "\n");
// Pre-extract related lines for sidebar
StringList rel_lines;
bool in_rel = false;
for(auto s : doc)
{
if(s == ":related") { in_rel = true; }
else if(s != "" && s.substr(0, 1) == ":") { in_rel = false; }
else if(in_rel && s != "") { rel_lines.push_back(s); }
}
String detail_class = "detail-layout";
if(rel_lines.size() == 0) detail_class += " no-sidebar";
?><div class="<?= detail_class ?>">
<article class="doc-detail"><?
String layout_class = "text";
u32 line_idx = 0;
bool section_hidden = false;
for(auto s : doc)
{
line_idx++;
@@ -146,42 +161,47 @@ RENDER(Request& context)
}
else if(s.substr(0, 1) == ":")
{
layout_class = s.substr(1);
if(line_idx > 1)
String new_class = s.substr(1);
// Close previous section's div if it was rendered
if(line_idx > 1 && !section_hidden)
{
?></div><?
}
?><div class="doc-section <?= layout_class ?>"><?
if(layout_class == "params")
section_hidden = (new_class == "related");
layout_class = new_class;
if(!section_hidden)
{
?><h3>Parameters</h3><?
}
else if(layout_class == "sig")
{
?><h3>Signature</h3><?
}
else if(layout_class == "pre")
{
layout_class = "sig";
}
else if(layout_class == "desc")
{
?><h3>Description</h3><?
}
else if(layout_class == "related")
{
?><h3>Related PHP and JS</h3><?
}
else if(layout_class == "see")
{
?><h3>Related</h3><?
}
else
{
?><h3><?= layout_class ?></h3><?
?><div class="doc-section <?= layout_class ?>"><?
if(layout_class == "params")
{
?><h3>Parameters</h3><?
}
else if(layout_class == "sig")
{
?><h3>Signature</h3><?
}
else if(layout_class == "pre")
{
layout_class = "sig";
}
else if(layout_class == "desc")
{
?><h3>Description</h3><?
}
else if(layout_class == "see")
{
?><h3>Related</h3><?
}
else
{
?><h3><?= layout_class ?></h3><?
}
}
}
else
else if(!section_hidden)
{
if(s.substr(0, 1) == "-")
{
@@ -213,11 +233,26 @@ RENDER(Request& context)
}
}
}
if(line_idx > 0)
if(line_idx > 0 && !section_hidden)
{
?></div><?
}
?></article><?
if(rel_lines.size() > 0)
{
?><aside class="detail-sidebar">
<div class="sidebar-card">
<h3>PHP &amp; JS Equivalents</h3><?
for(auto rl : rel_lines)
{
?><div><?: markdown_to_html(rl) ?></div><?
}
?></div>
</aside><?
}
?></div><?
}
?>
+68 -28
View File
@@ -2,12 +2,12 @@
Color palette: deep blue gradient · warm gold accents · frosted glass surfaces */
:root {
--bg: #0b1d4e;
--bg-grad: linear-gradient(168deg, #0f2462 0%, #0b1d4e 40%, #091840 100%);
--bg: #113399;
--bg-grad: linear-gradient(168deg, #1a3daa 0%, #113399 40%, #0d2880 100%);
--bg-surface: rgba(255, 255, 255, 0.05);
--bg-surface-hover: rgba(255, 255, 255, 0.09);
--bg-inset: rgba(0, 0, 0, 0.3);
--bg-code: rgba(0, 0, 0, 0.32);
--bg-inset: rgba(0, 0, 0, 0.28);
--bg-code: rgba(0, 0, 0, 0.3);
--text: #dfe5f2;
--text-dim: rgba(200, 210, 235, 0.6);
--text-muted: rgba(200, 210, 235, 0.35);
@@ -67,7 +67,7 @@ body {
h1 {
font-family: var(--font-mono);
font-size: 1.6rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
padding: 32px 0 20px;
@@ -88,7 +88,7 @@ h1 a:hover {
h2 {
font-family: var(--font-mono);
font-size: 1.2rem;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 16px;
@@ -97,7 +97,7 @@ h2 {
h3 {
font-family: var(--font-mono);
font-size: 0.82rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
@@ -170,7 +170,7 @@ a:hover {
.category li a {
font-family: var(--font-mono);
font-size: 0.85rem;
font-size: 0.875rem;
display: block;
padding: 3px 8px;
border-radius: 4px;
@@ -194,7 +194,7 @@ a:hover {
.func-item {
font-family: var(--font-mono);
font-size: 0.88rem;
font-size: 0.875rem;
}
.func-item a {
@@ -211,7 +211,7 @@ a:hover {
}
.badge {
font-size: 0.65rem;
font-size: 0.7rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
@@ -229,7 +229,7 @@ a:hover {
/* ── Detail Page ── */
.doc-detail {
max-width: 780px;
min-width: 0;
}
.doc-section {
@@ -251,7 +251,7 @@ a:hover {
.sig {
font-family: var(--font-mono);
font-size: 1.05rem;
font-size: 0.95rem;
white-space: pre-wrap;
line-height: 1.5;
background: var(--bg-code);
@@ -287,21 +287,61 @@ a:hover {
font-weight: 500;
}
.related {
background: var(--accent-dim);
border: 1px solid rgba(240, 196, 48, 0.12);
/* ── Detail Layout (sidebar for related) ── */
.detail-layout {
display: grid;
grid-template-columns: 1fr 220px;
gap: 24px;
align-items: start;
}
.detail-layout.no-sidebar {
grid-template-columns: 1fr;
}
@media (max-width: 900px) {
.detail-layout {
grid-template-columns: 1fr;
}
}
.detail-sidebar {
position: sticky;
top: 20px;
}
.sidebar-card {
background: var(--bg-surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 20px;
font-size: 0.9rem;
padding: 16px 20px;
box-shadow: var(--shadow-sm);
}
.sidebar-card h3 {
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.sidebar-card div {
padding: 3px 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-dim);
}
.related div {
padding: 2px 0;
.sidebar-card strong {
color: var(--text);
font-weight: 600;
}
.related strong {
color: var(--text);
.sidebar-card code {
font-size: 0.8rem;
padding: 1px 5px;
}
.see {
@@ -312,7 +352,7 @@ a:hover {
.see a {
font-family: var(--font-mono);
font-size: 0.92rem;
font-size: 0.875rem;
}
.see .category {
@@ -376,7 +416,7 @@ pre {
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 0.86rem;
font-size: 0.875rem;
line-height: 1.6;
white-space: pre-wrap;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12);
@@ -384,7 +424,7 @@ pre {
code {
font-family: var(--font-mono);
font-size: 0.9em;
font-size: 0.875rem;
padding: 2px 6px;
background: var(--bg-inset);
border-radius: 4px;
@@ -457,7 +497,7 @@ details pre {
border-radius: 8px;
color: var(--text);
font-family: var(--font-sans);
font-size: 0.95rem;
font-size: 0.875rem;
transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
@@ -472,7 +512,7 @@ details pre {
}
.search-count {
font-size: 0.82rem;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
@@ -505,11 +545,11 @@ details pre {
.search-hit a {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 0.92rem;
font-size: 0.875rem;
}
.search-snippet {
font-size: 0.78rem;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
+1
View File
@@ -33,6 +33,7 @@ RENDER(Request& context)
<div class="grid-heading">Data Types &amp; Parsing</div>
<? render_card("dtree.uce", "DTree", "Dynamic hierarchical data tree"); ?>
<? render_card("json.uce", "JSON", "Parse and encode JSON data"); ?>
<? render_card("preprocessor-comments.uce", "Preprocessor Comments", "Regression coverage for comment parsing in templates"); ?>
<? render_card("string.uce", "String", "String operations"); ?>
<? render_card("str_replace.uce", "String Replace", "Search and replace in strings"); ?>
<? render_card("utf8.uce", "UTF-8", "Unicode string handling"); ?>
+39
View File
@@ -0,0 +1,39 @@
RENDER(Request& context)
{
// Regression: this comment contains <> and an apostrophe that shouldn't start a literal block: <>
String outer_status = "outer parser ok";
<>
<link rel="stylesheet" href='style.css?v=<?= time() ?>'></link>
<h1>
<a href="index.uce">UCE Test</a>:
Preprocessor Comments
</h1>
<p>This page exists to prove the template parser ignores quotes and template markers that appear inside C++ comments.</p>
<?
// Regression: this comment's apostrophe must not swallow the later ?> marker.
String inline_status = "inline comment ok";
?>
<?
/*
Regression: block comments may contain "quotes", apostrophe's, and <> markers
without confusing the parser or the generated .cpp output.
*/
String block_status = "block comment ok";
?>
<ul>
<li>Outer code scan: <code><?= outer_status ?></code></li>
<li>Markup code island with // comment: <code><?= inline_status ?></code></li>
<li>Markup code island with /* */ comment: <code><?= block_status ?></code></li>
</ul>
<details>
<summary>Request Parameters</summary>
<pre><?= var_dump(context.params) ?></pre>
</details>
</>
}
+4 -4
View File
@@ -2,12 +2,12 @@
Color palette: deep blue gradient · warm gold accents · frosted glass surfaces */
:root {
--bg: #0b1d4e;
--bg-grad: linear-gradient(168deg, #0f2462 0%, #0b1d4e 40%, #091840 100%);
--bg: #113399;
--bg-grad: linear-gradient(168deg, #1a3daa 0%, #113399 40%, #0d2880 100%);
--bg-surface: rgba(255, 255, 255, 0.05);
--bg-surface-hover: rgba(255, 255, 255, 0.09);
--bg-inset: rgba(0, 0, 0, 0.3);
--bg-code: rgba(0, 0, 0, 0.32);
--bg-inset: rgba(0, 0, 0, 0.28);
--bg-code: rgba(0, 0, 0, 0.3);
--text: #dfe5f2;
--text-dim: rgba(200, 210, 235, 0.6);
--text-muted: rgba(200, 210, 235, 0.35);