Skip to content

Commit 62244be

Browse files
pepc84pepc84
committed
Shared nav.js, auto-convert global p5 to instance mode, consistent sidebar
1 parent cdb43be commit 62244be

110 files changed

Lines changed: 4069 additions & 3883 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/nav.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
(function() {
2+
const path = window.location.pathname;
3+
const isRoot = path === '/' || path === '/index.html';
4+
const isOneLevelDeep = path.split('/').filter(Boolean).length === 1;
5+
const prefix = (isRoot || isOneLevelDeep) ? '/' : '../';
6+
7+
const logoHref = isRoot ? null : prefix;
8+
9+
const nav = document.getElementById('site-nav');
10+
const sidebar = document.getElementById('site-sidebar');
11+
12+
if (nav) {
13+
nav.innerHTML = `
14+
<${logoHref ? `a href="${logoHref}"` : 'div'} class="nav-logo">
15+
<img src="${prefix}assets/cpp-logo.png" alt="C++ Mode">
16+
<span>C++ Mode</span>
17+
</${logoHref ? 'a' : 'div'}>
18+
<button class="hamburger" onclick="document.getElementById('site-sidebar').classList.toggle('open')">☰</button>
19+
`;
20+
}
21+
22+
if (sidebar) {
23+
const links = [
24+
{ href: `${prefix}libraries`, label: 'Libraries' },
25+
{ href: `${prefix}reference`, label: 'Reference' },
26+
{ href: `${prefix}examples`, label: 'Examples' },
27+
{ href: `${prefix}about`, label: 'About' },
28+
];
29+
sidebar.innerHTML = links.map(l => {
30+
const active = path.includes(l.label.toLowerCase()) ? 'class="active"' : '';
31+
return `<a href="${l.href}" ${active}>${l.label}</a>`;
32+
}).join('');
33+
}
34+
})();

‎examples.html‎

Lines changed: 1 addition & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1 @@
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>Examples - 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-
.layout { display: flex; min-height: calc(100vh - 60px); }
17-
.sidebar { width: 220px; min-width: 220px; border-right: 1px solid #e0e0e0; overflow-y: auto; height: calc(100vh - 60px); position: sticky; top: 60px; }
18-
.sidebar-top { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e0e0e0; }
19-
.sidebar-top a { font-size: 14px; color: #555; padding: 0.4rem 0; display: block; }
20-
.sidebar-top a:hover { color: #111; }
21-
.sidebar-top a.active { color: #111; font-weight: 500; }
22-
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.5rem; font-size: 13px; font-weight: 600; color: #111; cursor: pointer; border-bottom: 1px solid #e0e0e0; user-select: none; }
23-
.section-header:hover { background: #f8f8f8; }
24-
.arrow { font-size: 11px; color: #aaa; }
25-
.category { margin-bottom: 0.25rem; }
26-
.category-title { font-size: 11px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 1.5rem 0.25rem; }
27-
.category a { display: block; font-size: 13px; color: #555; padding: 0.3rem 1.5rem; }
28-
.category a:hover { color: #111; background: #f8f8f8; }
29-
.category a.active { color: #111; font-weight: 500; background: #f4f4f4; }
30-
.content { flex: 1; padding: 3rem 4rem; max-width: 900px; }
31-
.content h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.75rem; }
32-
.preview-wrap { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 2rem; width: 640px; height: 360px; }
33-
.preview-wrap canvas { display: block; width: 640px !important; height: 360px !important; }
34-
.code-block { background: #f8f8f8; border-radius: 8px; overflow: hidden; }
35-
.code-header { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e0e0e0; font-size: 12px; color: #888; font-family: monospace; display: flex; align-items: center; justify-content: space-between; }
36-
.copy-btn { font-size: 12px; color: #555; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
37-
.copy-btn:hover { background: #f0f0f0; }
38-
.copy-btn.copied { color: #090; border-color: #090; }
39-
pre { padding: 1.5rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.7; overflow-x: auto; white-space: pre; }
40-
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
41-
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
42-
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
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-
.preview-wrap { width: 100% !important; height: auto !important; }
49-
.preview-wrap canvas { width: 100% !important; height: auto !important; }
50-
pre { font-size: 12px; }
51-
}
52-
</style>
53-
</head>
54-
<body>
55-
<nav>
56-
<a href="../" class="nav-logo">
57-
<img src="assets/cpp-logo.png" alt="C++ Mode">
58-
<span>C++ Mode</span>
59-
</a>
60-
<button class="hamburger" onclick="document.getElementById('sidebar').classList.toggle('open')">☰</button>
61-
</nav>
62-
<div class="layout">
63-
<div class="sidebar" id="sidebar"><div class="sidebar-top">
64-
<a href="../reference">Reference</a>
65-
<a href="../examples" class="active">Examples</a>
66-
<a href="../about">About</a>
67-
</div>
68-
<div class="section-header" onclick="toggleSection('basics')">
69-
<span>Basics</span><span class="arrow" id="basics-arrow">▾</span>
70-
</div>
71-
<div id="basics-section"><div class="category"><div class="category-title">Arrays</div><a href="examples/array.html">Array</a><a href="examples/array-2d.html">Array 2D</a><a href="examples/array-objects.html">Array Objects</a></div><div class="category"><div class="category-title">Camera</div><a href="examples/move-eye.html">Move Eye</a><a href="examples/perspective.html">Perspective</a><a href="examples/perspective-vs-ortho.html">Perspective vs Ortho</a></div><div class="category"><div class="category-title">Color</div><a href="examples/brightness.html">Brightness</a><a href="examples/color-variables.html">Color Variables</a><a href="examples/hue.html">Hue</a><a href="examples/radial-gradient.html">Radial Gradient</a><a href="examples/relativity.html">Relativity</a><a href="examples/saturation.html">Saturation</a><a href="examples/simple-linear-gradient.html">Simple Linear Gradient</a></div><div class="category"><div class="category-title">Control</div><a href="examples/conditionals-1.html">Conditionals 1</a><a href="examples/conditionals-2.html">Conditionals 2</a><a href="examples/embedding-iteration.html">Embedding Iteration</a><a href="examples/iteration.html">Iteration</a><a href="examples/logical-operators.html">Logical Operators</a></div><div class="category"><div class="category-title">Data</div><a href="examples/characters-strings.html">Characters Strings</a><a href="examples/datatype-conversion.html">Datatype Conversion</a><a href="examples/integers-floats.html">Integers Floats</a><a href="examples/true-false.html">True False</a><a href="examples/variable-scope.html">Variable Scope</a><a href="examples/variables.html">Variables</a></div><div class="category"><div class="category-title">Forms</div><a href="examples/bezier.html">Bezier</a><a href="examples/pie-chart.html">Pie Chart</a><a href="examples/points-and-lines.html">Points and Lines</a><a href="examples/primitives-3d.html">Primitives 3D</a><a href="examples/regular-polygon.html">Regular Polygon</a><a href="examples/shape-primitives.html">Shape Primitives</a><a href="examples/star.html">Star</a><a href="examples/triangle-strip.html">Triangle Strip</a></div><div class="category"><div class="category-title">Image</div><a href="examples/alpha-mask.html">Alpha Mask</a><a href="examples/background-image.html">Background Image</a><a href="examples/create-image.html">Create Image</a><a href="examples/load-and-display-image.html">Load and Display Image</a><a href="examples/pointillism.html">Pointillism</a><a href="examples/request-image.html">Request Image</a><a href="examples/transparency.html">Transparency</a></div><div class="category"><div class="category-title">Input</div><a href="examples/clock.html">Clock</a><a href="examples/constrain.html">Constrain</a><a href="examples/easing.html">Easing</a><a href="examples/keyboard.html">Keyboard</a><a href="examples/keyboard-functions.html">Keyboard Functions</a><a href="examples/milliseconds.html">Milliseconds</a><a href="examples/mouse-1d.html">Mouse 1D</a><a href="examples/mouse-2d.html">Mouse 2D</a><a href="examples/mouse-functions.html">Mouse Functions</a><a href="examples/mouse-press.html">Mouse Press</a><a href="examples/mouse-signals.html">Mouse Signals</a><a href="examples/storing-input.html">Storing Input</a></div><div class="category"><div class="category-title">Lights</div><a href="examples/directional.html">Directional</a><a href="examples/mixture.html">Mixture</a><a href="examples/mixture-grid.html">Mixture Grid</a><a href="examples/on-off.html">On Off</a><a href="examples/reflection.html">Reflection</a><a href="examples/spot.html">Spot</a></div><div class="category"><div class="category-title">Math</div><a href="examples/additive-wave.html">Additive Wave</a><a href="examples/arctangent.html">Arctangent</a><a href="examples/distance-1d.html">Distance 1D</a><a href="examples/distance-2d.html">Distance 2D</a><a href="examples/double-random.html">Double Random</a><a href="examples/graphing-2d-equations.html">Graphing 2D Equations</a><a href="examples/increment-decrement.html">Increment Decrement</a><a href="examples/linear-interpolation.html">Linear Interpolation</a><a href="examples/noise-1d.html">Noise 1D</a><a href="examples/noise-2d.html">Noise 2D</a><a href="examples/noise-3d.html">Noise 3D</a><a href="examples/noise-wave.html">Noise Wave</a><a href="examples/operator-precedence.html">Operator Precedence</a><a href="examples/polar-to-cartesian.html">Polar to Cartesian</a><a href="examples/random.html">Random</a><a href="examples/random-gaussian.html">Random Gaussian</a><a href="examples/sine.html">Sine</a><a href="examples/sine-cosine.html">Sine Cosine</a><a href="examples/sine-wave.html">Sine Wave</a></div><div class="category"><div class="category-title">Objects</div><a href="examples/composite-objects.html">Composite Objects</a><a href="examples/inheritance.html">Inheritance</a><a href="examples/multiple-constructors.html">Multiple Constructors</a><a href="examples/objects.html">Objects</a></div><div class="category"><div class="category-title">Shape</div><a href="examples/disable-style.html">Disable Style</a><a href="examples/get-child.html">Get Child</a><a href="examples/load-and-display-a-shape-illustration.html">Load and Display a Shape Illustration</a><a href="examples/load-and-display-an-obj-shape.html">Load and Display an OBJ shape</a><a href="examples/scale-shape-illustration.html">Scale Shape Illustration</a><a href="examples/shape-vertices.html">Shape Vertices</a></div><div class="category"><div class="category-title">Structure</div><a href="examples/coordinates.html">Coordinates</a><a href="examples/create-graphics.html">Create Graphics</a><a href="examples/functions.html">Functions</a><a href="examples/loop.html">Loop</a><a href="examples/no-loop.html">No Loop</a><a href="examples/recursion.html">Recursion</a><a href="examples/redraw.html">Redraw</a><a href="examples/setup-and-draw.html">Setup and Draw</a><a href="examples/statements-and-comments.html">Statements and Comments</a><a href="examples/width-and-height.html">Width and Height</a></div><div class="category"><div class="category-title">Transform</div><a href="examples/arm.html">Arm</a><a href="examples/rotate.html">Rotate</a><a href="examples/rotate-1.html">Rotate 1</a><a href="examples/rotate-push-pop.html">Rotate Push Pop</a><a href="examples/scale.html">Scale</a><a href="examples/translate.html">Translate</a></div><div class="category"><div class="category-title">Typography</div><a href="examples/letters.html">Letters</a><a href="examples/text-rotation.html">Text Rotation</a><a href="examples/words.html">Words</a></div><div class="category"><div class="category-title">Web</div><a href="examples/loading-images.html">Loading Images</a><a href="examples/loading-urls.html">Loading URLs</a></div></div><div class="section-header" onclick="toggleSection('topics')">
72-
<span>Topics</span><span class="arrow" id="topics-arrow">▸</span>
73-
</div>
74-
<div id="topics-section" style="display:none">
75-
<div class="category"><div class="category-title" style="color:#ccc;">Coming soon</div></div>
76-
</div></div>
77-
<div class="content">
78-
<div class="welcome">
79-
<h1>Examples</h1>
80-
<p>Short programs exploring the basics of creative coding with C++ Mode. Select an example from the left to get started.</p>
81-
</div>
82-
</div>
83-
</div>
84-
<footer><p>C++ Mode for Processing</p></footer>
85-
<script>
86-
function copyCode() {
87-
navigator.clipboard.writeText(document.getElementById('code-pre').innerText).then(() => {
88-
const btn = document.querySelector('.copy-btn');
89-
btn.textContent = 'Copied!'; btn.classList.add('copied');
90-
setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
91-
});
92-
}
93-
function toggleSection(name) {
94-
const sec = document.getElementById(name+'-section');
95-
const arrow = document.getElementById(name+'-arrow');
96-
const open = sec.style.display !== 'none';
97-
sec.style.display = open ? 'none' : 'block';
98-
arrow.textContent = open ? '▸' : '▾';
99-
}
100-
</script>
101-
</body>
102-
</html>
1+
<meta http-equiv="refresh" content="0;url=/examples">

0 commit comments

Comments
 (0)