Skip to content

Commit 6e9fa79

Browse files
committed
Add documentation page with included libraries
1 parent 9b4a732 commit 6e9fa79

1 file changed

Lines changed: 152 additions & 0 deletions

File tree

documentation/index.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Documentation - 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; }
13+
.nav-logo img { width: 28px; height: 28px; }
14+
.nav-logo span { font-size: 15px; font-weight: 500; }
15+
.hamburger { display: none; background: none; border: none; cursor: pointer; font-size: 22px; padding: 4px 8px; }
16+
17+
.layout { display: flex; min-height: calc(100vh - 60px); }
18+
.sidebar { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; padding: 2rem 0; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
19+
.sidebar-top { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid #e0e0e0; margin-bottom: 1rem; }
20+
.sidebar-top a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
21+
.sidebar-top a:hover { color: #111; }
22+
.sidebar-top a.active { color: #111; font-weight: 500; }
23+
.sidebar-section { padding: 0 1.5rem; }
24+
.sidebar-section a { font-size: 13px; color: #555; padding: 0.3rem 0; display: block; }
25+
.sidebar-section a:hover { color: #111; }
26+
27+
.content { flex: 1; padding: 4rem; max-width: 820px; }
28+
.content h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
29+
.content .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 3rem; }
30+
.content h2 { font-size: 1.1rem; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e0e0e0; }
31+
.content p { color: #444; line-height: 1.8; margin-bottom: 1rem; font-size: 0.95rem; }
32+
33+
.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; }
34+
.lib-card { background: #fff; padding: 1.25rem 1.5rem; }
35+
.lib-card code { font-family: "SF Mono","Fira Code",monospace; font-size: 13px; font-weight: 600; color: #111; display: block; margin-bottom: 0.35rem; }
36+
.lib-card p { font-size: 13px; color: #888; line-height: 1.5; margin: 0; }
37+
38+
.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; }
39+
.tip code { font-family: "SF Mono","Fira Code",monospace; font-size: 12px; background: #eee; border-radius: 3px; padding: 1px 5px; color: #111; }
40+
41+
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
42+
43+
@media (max-width: 768px) {
44+
.hamburger { display: block; }
45+
.sidebar { 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); }
46+
.sidebar.open { left: 0; }
47+
.content { padding: 2rem 1.25rem; }
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
53+
<nav>
54+
<a href="../index.html" class="nav-logo">
55+
<img src="../assets/cpp-logo.png" alt="C++ Mode">
56+
<span>C++ Mode</span>
57+
</a>
58+
<button class="hamburger" onclick="document.getElementById('sidebar').classList.toggle('open')"></button>
59+
</nav>
60+
61+
<div class="layout">
62+
<div class="sidebar" id="sidebar">
63+
<div class="sidebar-top">
64+
<a href="../reference.html">Reference</a>
65+
<a href="../examples.html">Examples</a>
66+
<a href="../about.html">About</a>
67+
</div>
68+
<div class="sidebar-section">
69+
<a href="#included">Included libraries</a>
70+
<a href="#containers">Containers</a>
71+
<a href="#algorithms">Algorithms</a>
72+
<a href="#strings">Strings and IO</a>
73+
<a href="#concurrency">Concurrency</a>
74+
<a href="#utilities">Utilities</a>
75+
<a href="#math">Math</a>
76+
</div>
77+
</div>
78+
79+
<div class="content">
80+
<h1>Documentation</h1>
81+
<p class="subtitle">Everything available in C++ Mode out of the box.</p>
82+
83+
<div class="tip">
84+
None of these require an <code>#include</code>. They are all automatically available in every sketch through <code>Processing.h</code>.
85+
</div>
86+
87+
<h2 id="included">What is included</h2>
88+
<p>C++ Mode includes the full C++ Standard Library automatically. You can use any of the following without writing a single <code>#include</code> at the top of your sketch.</p>
89+
<p>If you want to use a third-party library, you can still add <code>#include</code> statements as normal.</p>
90+
91+
<h2 id="containers">Containers</h2>
92+
<div class="lib-grid">
93+
<div class="lib-card"><code>std::vector</code><p>Dynamic array. The most common container. Use instead of Java's ArrayList.</p></div>
94+
<div class="lib-card"><code>std::map</code><p>Key-value pairs sorted by key. Use instead of Java's HashMap.</p></div>
95+
<div class="lib-card"><code>std::set</code><p>Sorted collection of unique values.</p></div>
96+
<div class="lib-card"><code>std::list</code><p>Doubly linked list. Fast insert and remove at any position.</p></div>
97+
<div class="lib-card"><code>std::deque</code><p>Double-ended queue. Fast insert and remove at both ends.</p></div>
98+
<div class="lib-card"><code>std::queue</code><p>FIFO queue adapter.</p></div>
99+
<div class="lib-card"><code>std::stack</code><p>LIFO stack adapter.</p></div>
100+
</div>
101+
102+
<h2 id="algorithms">Algorithms</h2>
103+
<div class="lib-grid">
104+
<div class="lib-card"><code>std::sort</code><p>Sort any container. Works with lambdas for custom comparison.</p></div>
105+
<div class="lib-card"><code>std::find</code><p>Find an element in a range.</p></div>
106+
<div class="lib-card"><code>std::remove_if</code><p>Remove elements matching a condition. Commonly used with vectors.</p></div>
107+
<div class="lib-card"><code>std::min / std::max</code><p>Min and max of two values. Also available as the Processing functions min() and max().</p></div>
108+
<div class="lib-card"><code>std::accumulate</code><p>Sum or fold a range of values.</p></div>
109+
<div class="lib-card"><code>std::transform</code><p>Apply a function to every element in a range.</p></div>
110+
</div>
111+
112+
<h2 id="strings">Strings and IO</h2>
113+
<div class="lib-grid">
114+
<div class="lib-card"><code>std::string</code><p>Text string. Use instead of Java's String. Supports +, ==, .size(), .substr() and more.</p></div>
115+
<div class="lib-card"><code>std::stringstream</code><p>Build strings from mixed types. Useful for formatting numbers into text.</p></div>
116+
<div class="lib-card"><code>std::ifstream</code><p>Read from files.</p></div>
117+
<div class="lib-card"><code>std::ofstream</code><p>Write to files.</p></div>
118+
<div class="lib-card"><code>std::regex</code><p>Regular expressions for pattern matching in strings.</p></div>
119+
<div class="lib-card"><code>std::cout / std::cerr</code><p>Print to the console. Also available as println() in Processing style.</p></div>
120+
</div>
121+
122+
<h2 id="concurrency">Concurrency</h2>
123+
<div class="lib-grid">
124+
<div class="lib-card"><code>std::thread</code><p>Run code on a separate thread. Useful for background loading or computation.</p></div>
125+
<div class="lib-card"><code>std::mutex</code><p>Protect shared data between threads.</p></div>
126+
<div class="lib-card"><code>std::atomic</code><p>Thread-safe operations on single values.</p></div>
127+
</div>
128+
129+
<h2 id="utilities">Utilities</h2>
130+
<div class="lib-grid">
131+
<div class="lib-card"><code>std::optional</code><p>A value that may or may not be present. Avoids null pointers.</p></div>
132+
<div class="lib-card"><code>std::variant</code><p>A value that can be one of several types.</p></div>
133+
<div class="lib-card"><code>std::tuple</code><p>A fixed-size collection of values of different types.</p></div>
134+
<div class="lib-card"><code>std::pair</code><p>Two values grouped together.</p></div>
135+
<div class="lib-card"><code>std::memory (unique_ptr, shared_ptr)</code><p>Smart pointers for automatic memory management.</p></div>
136+
<div class="lib-card"><code>std::chrono</code><p>Time utilities. Measure durations and get the current time.</p></div>
137+
</div>
138+
139+
<h2 id="math">Math</h2>
140+
<div class="lib-grid">
141+
<div class="lib-card"><code>std::cmath</code><p>sin, cos, tan, sqrt, pow, abs, floor, ceil and more. Also available as Processing-style functions.</p></div>
142+
<div class="lib-card"><code>std::random</code><p>Random number generation. Also available as random() in Processing style.</p></div>
143+
<div class="lib-card"><code>std::numeric</code><p>Numeric utilities like iota, accumulate, inner_product.</p></div>
144+
</div>
145+
146+
</div>
147+
</div>
148+
149+
<footer><p>C++ Mode for Processing</p></footer>
150+
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)