Skip to content

Commit 800e0bd

Browse files
pepc84pepc84
committed
Add What's New link to all pages via nav.js, remove emojis from libraries
1 parent 01134b1 commit 800e0bd

2 files changed

Lines changed: 180 additions & 177 deletions

File tree

‎assets/nav.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
const prefix = isRoot ? '/' : '../';
77

88
function isActive(name) { return path.includes('/' + name); }
9-
function link(name, label) {
9+
function link(name, label, extra) {
1010
const active = isActive(name) ? ' class="active"' : '';
11+
if (extra) return `<a href="${prefix}${name}"${active} style="${extra}">${label}</a>`;
1112
return `<a href="${prefix}${name}"${active}>${label}</a>`;
1213
}
1314

@@ -35,6 +36,8 @@
3536
${link('reference', 'Reference')}
3637
${link('examples', 'Examples')}
3738
${link('about', 'About')}
39+
<div style="height:1px;background:#e0e0e0;margin:0.75rem 0;"></div>
40+
${link('libraries#whats-new', "What's New", 'color:#e8b400;font-weight:600;font-size:13px;')}
3841
`;
3942
}
4043

‎libraries/index.html‎

Lines changed: 176 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1,195 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Libraries - C++ Mode for Processing</title>
7-
<style>
8-
* { margin: 0; padding: 0; box-sizing: border-box; }
9-
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; }
10-
a { color: #111; text-decoration: none; }
11-
nav { border-bottom: 1px solid #e0e0e0; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; background: #fff; z-index: 100; }
12-
.nav-logo { display: flex; align-items: center; gap: 10px; color: #111; }
13-
.nav-logo img { width: 28px; height: 28px; }
14-
.nav-logo span { font-size: 15px; font-weight: 500; }
15-
.hamburger { background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; display: none; }
16-
.layout { display: flex; min-height: calc(100vh - 60px); }
17-
.sidebar-outer { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; position: sticky; top: 60px; height: calc(100vh - 60px); }
18-
#site-sidebar { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e0e0e0; display: flex; flex-direction: column; }
19-
#site-sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
20-
#site-sidebar a:hover { color: #111; }
21-
#site-sidebar a.active { color: #111; font-weight: 500; }
22-
.content { flex: 1; padding: 4rem; max-width: 820px; }
23-
.content h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
24-
.content h2 { font-size: 1.1rem; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; }
25-
.content p { color: #444; line-height: 1.8; margin-bottom: 1rem; font-size: 0.95rem; }
26-
.content .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 3rem; }
27-
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: #e0e0e0; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 2rem; }
28-
.lib-card { background: #fff; padding: 1.25rem 1.5rem; }
29-
.lib-card code { font-family: "SF Mono","Fira Code",monospace; font-size: 13px; font-weight: 600; color: #111; display: block; margin-bottom: 0.35rem; }
30-
.lib-card p { font-size: 13px; color: #888; line-height: 1.5; margin: 0; }
31-
.tip { background: #f8f8f8; border-left: 3px solid #111; border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: 13px; color: #555; line-height: 1.7; }
32-
.tip code { font-family: "SF Mono","Fira Code",monospace; font-size: 12px; background: #eee; border-radius: 3px; padding: 1px 5px; color: #111; }
33-
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
34-
@media (max-width: 768px) {
35-
.hamburger { display: block; }
36-
.sidebar-outer { position: fixed; top: 60px; left: -240px; width: 240px; height: calc(100vh - 60px); background: #fff; z-index: 200; transition: left 0.25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.08); }
37-
.sidebar-outer.open { left: 0; }
38-
.content { padding: 2rem 1.25rem; }
39-
}
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Libraries - C++ Mode for Processing</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #fff; }
10+
a { color: #111; text-decoration: none; }
11+
nav { border-bottom: 1px solid #e0e0e0; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; background: #fff; z-index: 100; }
12+
.nav-logo { display: flex; align-items: center; gap: 10px; color: #111; }
13+
.nav-logo img { width: 28px; height: 28px; }
14+
.nav-logo span { font-size: 15px; font-weight: 500; }
15+
.hamburger { background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; display: none; }
16+
.layout { display: flex; min-height: calc(100vh - 60px); }
17+
.sidebar-outer { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; position: sticky; top: 60px; height: calc(100vh - 60px); }
18+
#site-sidebar { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e0e0e0; display: flex; flex-direction: column; }
19+
#site-sidebar a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
20+
#site-sidebar a:hover { color: #111; }
21+
#site-sidebar a.active { color: #111; font-weight: 500; }
22+
.content { flex: 1; padding: 4rem; max-width: 820px; }
23+
.content h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
24+
.content h2 { font-size: 1.1rem; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; }
25+
.content p { color: #444; line-height: 1.8; margin-bottom: 1rem; font-size: 0.95rem; }
26+
.content .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 3rem; }
27+
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: #e0e0e0; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 2rem; }
28+
.lib-card { background: #fff; padding: 1.25rem 1.5rem; }
29+
.lib-card code { font-family: "SF Mono","Fira Code",monospace; font-size: 13px; font-weight: 600; color: #111; display: block; margin-bottom: 0.35rem; }
30+
.lib-card p { font-size: 13px; color: #888; line-height: 1.5; margin: 0; }
31+
.tip { background: #f8f8f8; border-left: 3px solid #111; border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: 13px; color: #555; line-height: 1.7; }
32+
.tip code { font-family: "SF Mono","Fira Code",monospace; font-size: 12px; background: #eee; border-radius: 3px; padding: 1px 5px; color: #111; }
33+
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
34+
@media (max-width: 768px) {
35+
.hamburger { display: block; }
36+
.sidebar-outer { position: fixed; top: 60px; left: -240px; width: 240px; height: calc(100vh - 60px); background: #fff; z-index: 200; transition: left 0.25s ease; box-shadow: 2px 0 12px rgba(0,0,0,0.08); }
37+
.sidebar-outer.open { left: 0; }
38+
.content { padding: 2rem 1.25rem; }
39+
}
4040

41-
.whats-new {
42-
border: 1px solid #e0e0e0;
43-
border-radius: 10px;
44-
margin-bottom: 3rem;
45-
overflow: hidden;
46-
}
47-
.wn-header {
48-
background: #f8f8f8;
49-
border-bottom: 1px solid #e0e0e0;
50-
padding: 1.5rem 2rem;
51-
}
52-
.wn-badge {
53-
display: inline-block;
54-
background: #e8b400;
55-
color: #fff;
56-
font-size: 11px;
57-
font-weight: 700;
58-
letter-spacing: 0.08em;
59-
padding: 2px 8px;
60-
border-radius: 4px;
61-
margin-bottom: 0.5rem;
62-
text-transform: uppercase;
63-
}
64-
.wn-header h2 {
65-
font-size: 1.3rem;
66-
font-weight: 700;
67-
margin-bottom: 0.25rem;
68-
color: #111;
69-
}
70-
.wn-sub { font-size: 0.9rem; color: #888; }
71-
.wn-grid {
72-
display: grid;
73-
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
74-
gap: 0;
75-
}
76-
.wn-card {
77-
padding: 1.5rem 2rem;
78-
border-right: 1px solid #e0e0e0;
79-
border-bottom: 1px solid #e0e0e0;
80-
}
81-
.wn-card:nth-child(even) { border-right: none; }
82-
.wn-card-title {
83-
font-size: 14px;
84-
font-weight: 700;
85-
margin-bottom: 0.75rem;
86-
color: #111;
87-
}
88-
.wn-card-body {
89-
font-size: 13px;
90-
color: #555;
91-
line-height: 1.7;
92-
}
93-
.wn-card-body code {
94-
font-family: "SF Mono","Fira Code",monospace;
95-
background: #f4f4f4;
96-
padding: 1px 5px;
97-
border-radius: 3px;
98-
font-size: 12px;
99-
color: #111;
100-
}
101-
.wn-card-body pre {
102-
background: #0d0d0d;
103-
color: #ccc;
104-
font-family: "SF Mono","Fira Code",monospace;
105-
font-size: 12px;
106-
line-height: 1.6;
107-
padding: 0.75rem 1rem;
108-
border-radius: 6px;
109-
margin-top: 0.75rem;
110-
overflow-x: auto;
111-
white-space: pre;
112-
}
41+
.whats-new {
42+
border: 1px solid #e0e0e0;
43+
border-radius: 10px;
44+
margin-bottom: 3rem;
45+
overflow: hidden;
46+
}
47+
.wn-header {
48+
background: #f8f8f8;
49+
border-bottom: 1px solid #e0e0e0;
50+
padding: 1.5rem 2rem;
51+
}
52+
.wn-badge {
53+
display: inline-block;
54+
background: #e8b400;
55+
color: #fff;
56+
font-size: 11px;
57+
font-weight: 700;
58+
letter-spacing: 0.08em;
59+
padding: 2px 8px;
60+
border-radius: 4px;
61+
margin-bottom: 0.5rem;
62+
text-transform: uppercase;
63+
}
64+
.wn-header h2 {
65+
font-size: 1.3rem;
66+
font-weight: 700;
67+
margin-bottom: 0.25rem;
68+
color: #111;
69+
}
70+
.wn-sub { font-size: 0.9rem; color: #888; }
71+
.wn-grid {
72+
display: grid;
73+
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
74+
gap: 0;
75+
}
76+
.wn-card {
77+
padding: 1.5rem 2rem;
78+
border-right: 1px solid #e0e0e0;
79+
border-bottom: 1px solid #e0e0e0;
80+
}
81+
.wn-card:nth-child(even) { border-right: none; }
82+
.wn-card-title {
83+
font-size: 14px;
84+
font-weight: 700;
85+
margin-bottom: 0.75rem;
86+
color: #111;
87+
}
88+
.wn-card-body {
89+
font-size: 13px;
90+
color: #555;
91+
line-height: 1.7;
92+
}
93+
.wn-card-body code {
94+
font-family: "SF Mono","Fira Code",monospace;
95+
background: #f4f4f4;
96+
padding: 1px 5px;
97+
border-radius: 3px;
98+
font-size: 12px;
99+
color: #111;
100+
}
101+
.wn-card-body pre {
102+
background: #0d0d0d;
103+
color: #ccc;
104+
font-family: "SF Mono","Fira Code",monospace;
105+
font-size: 12px;
106+
line-height: 1.6;
107+
padding: 0.75rem 1rem;
108+
border-radius: 6px;
109+
margin-top: 0.75rem;
110+
overflow-x: auto;
111+
white-space: pre;
112+
}
113113

114-
</style>
114+
</style>
115115
</head>
116116
<body>
117117
<nav id="site-nav"></nav>
118118
<div class="layout">
119-
<div class="sidebar-outer">
120-
<div id="site-sidebar">
121-
<a href="../libraries" class='active'>Libraries</a>
122-
<a href="../reference" >Reference</a>
123-
<a href="../examples" >Examples</a>
124-
<a href="../about" >About</a>
125-
</div>
126-
</div>
127-
<div class="content">
128-
<h1>Libraries</h1>
129-
<p class="subtitle">Everything available in C++ Mode out of the box.</p>
119+
<div class="sidebar-outer">
120+
<div id="site-sidebar">
121+
<a href="../libraries" class='active'>Libraries</a>
122+
<a href="../reference" >Reference</a>
123+
<a href="../examples" >Examples</a>
124+
<a href="../about" >About</a>
125+
</div>
126+
</div>
127+
<div class="content">
128+
<h1>Libraries</h1>
129+
<p class="subtitle">Everything available in C++ Mode out of the box.</p>
130130

131-
<div class="tip">
132-
None of these require an <code>#include</code>. They are all automatically available in every sketch through <code>Processing.h</code>.
133-
</div>
131+
<div class="tip">
132+
None of these require an <code>#include</code>. They are all automatically available in every sketch through <code>Processing.h</code>.
133+
</div>
134134

135-
<h2>Containers</h2>
136-
<div class="lib-grid">
137-
<div class="lib-card"><code>std::vector</code><p>Dynamic array. The most common container. Use instead of Java's ArrayList.</p></div>
138-
<div class="lib-card"><code>std::map</code><p>Key-value pairs sorted by key.</p></div>
139-
<div class="lib-card"><code>std::unordered_map</code><p>Hash map. Faster lookups than std::map but unsorted.</p></div>
140-
<div class="lib-card"><code>std::set</code><p>Sorted collection of unique values.</p></div>
141-
<div class="lib-card"><code>std::unordered_set</code><p>Hash set. Faster lookups than std::set but unsorted.</p></div>
142-
<div class="lib-card"><code>std::list</code><p>Doubly linked list. Fast insert and remove at any position.</p></div>
143-
<div class="lib-card"><code>std::deque</code><p>Double-ended queue. Fast insert and remove at both ends.</p></div>
144-
<div class="lib-card"><code>std::queue</code><p>FIFO queue adapter.</p></div>
145-
<div class="lib-card"><code>std::stack</code><p>LIFO stack adapter.</p></div>
146-
</div>
135+
<h2>Containers</h2>
136+
<div class="lib-grid">
137+
<div class="lib-card"><code>std::vector</code><p>Dynamic array. The most common container. Use instead of Java's ArrayList.</p></div>
138+
<div class="lib-card"><code>std::map</code><p>Key-value pairs sorted by key.</p></div>
139+
<div class="lib-card"><code>std::unordered_map</code><p>Hash map. Faster lookups than std::map but unsorted.</p></div>
140+
<div class="lib-card"><code>std::set</code><p>Sorted collection of unique values.</p></div>
141+
<div class="lib-card"><code>std::unordered_set</code><p>Hash set. Faster lookups than std::set but unsorted.</p></div>
142+
<div class="lib-card"><code>std::list</code><p>Doubly linked list. Fast insert and remove at any position.</p></div>
143+
<div class="lib-card"><code>std::deque</code><p>Double-ended queue. Fast insert and remove at both ends.</p></div>
144+
<div class="lib-card"><code>std::queue</code><p>FIFO queue adapter.</p></div>
145+
<div class="lib-card"><code>std::stack</code><p>LIFO stack adapter.</p></div>
146+
</div>
147147

148-
<h2>Algorithms</h2>
149-
<div class="lib-grid">
150-
<div class="lib-card"><code>std::sort</code><p>Sort any container. Works with lambdas for custom comparison.</p></div>
151-
<div class="lib-card"><code>std::find</code><p>Find an element in a range.</p></div>
152-
<div class="lib-card"><code>std::remove_if</code><p>Remove elements matching a condition. Commonly used with vectors.</p></div>
153-
<div class="lib-card"><code>std::min / std::max</code><p>Min and max of two values.</p></div>
154-
<div class="lib-card"><code>std::accumulate</code><p>Sum or fold a range of values.</p></div>
155-
<div class="lib-card"><code>std::transform</code><p>Apply a function to every element in a range.</p></div>
156-
<div class="lib-card"><code>std::iterator</code><p>Iterator utilities for working with ranges and containers.</p></div>
157-
</div>
148+
<h2>Algorithms</h2>
149+
<div class="lib-grid">
150+
<div class="lib-card"><code>std::sort</code><p>Sort any container. Works with lambdas for custom comparison.</p></div>
151+
<div class="lib-card"><code>std::find</code><p>Find an element in a range.</p></div>
152+
<div class="lib-card"><code>std::remove_if</code><p>Remove elements matching a condition. Commonly used with vectors.</p></div>
153+
<div class="lib-card"><code>std::min / std::max</code><p>Min and max of two values.</p></div>
154+
<div class="lib-card"><code>std::accumulate</code><p>Sum or fold a range of values.</p></div>
155+
<div class="lib-card"><code>std::transform</code><p>Apply a function to every element in a range.</p></div>
156+
<div class="lib-card"><code>std::iterator</code><p>Iterator utilities for working with ranges and containers.</p></div>
157+
</div>
158158

159-
<h2>Strings and IO</h2>
160-
<div class="lib-grid">
161-
<div class="lib-card"><code>std::string</code><p>Text string. Use instead of Java's String.</p></div>
162-
<div class="lib-card"><code>std::stringstream</code><p>Build strings from mixed types.</p></div>
163-
<div class="lib-card"><code>std::ifstream</code><p>Read from files.</p></div>
164-
<div class="lib-card"><code>std::ofstream</code><p>Write to files.</p></div>
165-
<div class="lib-card"><code>std::regex</code><p>Regular expressions for pattern matching.</p></div>
166-
<div class="lib-card"><code>std::cout / std::cerr</code><p>Print to the console. Also available as println().</p></div>
167-
<div class="lib-card"><code>std::iomanip</code><p>Format output — set precision, width, fill characters.</p></div>
168-
</div>
159+
<h2>Strings and IO</h2>
160+
<div class="lib-grid">
161+
<div class="lib-card"><code>std::string</code><p>Text string. Use instead of Java's String.</p></div>
162+
<div class="lib-card"><code>std::stringstream</code><p>Build strings from mixed types.</p></div>
163+
<div class="lib-card"><code>std::ifstream</code><p>Read from files.</p></div>
164+
<div class="lib-card"><code>std::ofstream</code><p>Write to files.</p></div>
165+
<div class="lib-card"><code>std::regex</code><p>Regular expressions for pattern matching.</p></div>
166+
<div class="lib-card"><code>std::cout / std::cerr</code><p>Print to the console. Also available as println().</p></div>
167+
<div class="lib-card"><code>std::iomanip</code><p>Format output — set precision, width, fill characters.</p></div>
168+
</div>
169169

170-
<h2>Concurrency</h2>
171-
<div class="lib-grid">
172-
<div class="lib-card"><code>std::thread</code><p>Run code on a separate thread.</p></div>
173-
<div class="lib-card"><code>std::functional</code><p>Function wrappers, std::function, std::bind, lambdas.</p></div>
174-
</div>
170+
<h2>Concurrency</h2>
171+
<div class="lib-grid">
172+
<div class="lib-card"><code>std::thread</code><p>Run code on a separate thread.</p></div>
173+
<div class="lib-card"><code>std::functional</code><p>Function wrappers, std::function, std::bind, lambdas.</p></div>
174+
</div>
175175

176-
<h2>Utilities</h2>
177-
<div class="lib-grid">
178-
<div class="lib-card"><code>std::optional</code><p>A value that may or may not be present.</p></div>
179-
<div class="lib-card"><code>std::variant</code><p>A value that can be one of several types.</p></div>
180-
<div class="lib-card"><code>std::tuple</code><p>A fixed-size collection of values of different types.</p></div>
181-
<div class="lib-card"><code>std::unique_ptr / std::shared_ptr</code><p>Smart pointers for automatic memory management.</p></div>
182-
<div class="lib-card"><code>std::chrono</code><p>Time utilities. Measure durations and get the current time.</p></div>
183-
<div class="lib-card"><code>std::cstdlib / std::ctime</code><p>C standard library utilities and time functions.</p></div>
184-
</div>
176+
<h2>Utilities</h2>
177+
<div class="lib-grid">
178+
<div class="lib-card"><code>std::optional</code><p>A value that may or may not be present.</p></div>
179+
<div class="lib-card"><code>std::variant</code><p>A value that can be one of several types.</p></div>
180+
<div class="lib-card"><code>std::tuple</code><p>A fixed-size collection of values of different types.</p></div>
181+
<div class="lib-card"><code>std::unique_ptr / std::shared_ptr</code><p>Smart pointers for automatic memory management.</p></div>
182+
<div class="lib-card"><code>std::chrono</code><p>Time utilities. Measure durations and get the current time.</p></div>
183+
<div class="lib-card"><code>std::cstdlib / std::ctime</code><p>C standard library utilities and time functions.</p></div>
184+
</div>
185185

186-
<h2>Math</h2>
187-
<div class="lib-grid">
188-
<div class="lib-card"><code>std::cmath</code><p>sin, cos, tan, sqrt, pow, abs, floor, ceil and more.</p></div>
189-
<div class="lib-card"><code>std::random</code><p>Random number generation. Also available as random().</p></div>
190-
<div class="lib-card"><code>std::numeric</code><p>iota, accumulate, inner_product and more.</p></div>
191-
</div>
192-
</div>
186+
<h2>Math</h2>
187+
<div class="lib-grid">
188+
<div class="lib-card"><code>std::cmath</code><p>sin, cos, tan, sqrt, pow, abs, floor, ceil and more.</p></div>
189+
<div class="lib-card"><code>std::random</code><p>Random number generation. Also available as random().</p></div>
190+
<div class="lib-card"><code>std::numeric</code><p>iota, accumulate, inner_product and more.</p></div>
191+
</div>
192+
</div>
193193
</div>
194194
<footer><p>C++ Mode for Processing</p></footer>
195195
<script src="../assets/nav.js"></script>

0 commit comments

Comments
 (0)