Skip to content

Commit c1fac9d

Browse files
MersoltaneMersoltane
committed
Cleaned the website layout.
1 parent d7fc87c commit c1fac9d

File tree

9 files changed

+1041
-32
lines changed

9 files changed

+1041
-32
lines changed

‎website/docs/examples/overview.md‎

Lines changed: 254 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,262 @@
22
sidebar_position: 1
33
---
44

5-
# Examples Overview
5+
import React, { useState } from 'react';
6+
import Link from '@docusaurus/Link';
67

7-
This section contains examples demonstrating various applications of Amigo for optimization and optimal control problems.
8+
export const EXAMPLES = [
9+
{
10+
name: 'Brachistochrone',
11+
category: 'Trajectory problem',
12+
difficulty: 'Beginner',
13+
description: 'Classic calculus of variations problem that finds the fastest sliding path between two points under gravity. Demonstrates trajectory optimization with a free final time.',
14+
tutorial: '/amigo/docs/examples/brachistochrone',
15+
github: 'https://github.com/smdogroup/amigo/tree/main/examples/brachistochrone',
16+
},
17+
{
18+
name: 'Cart pole',
19+
category: 'Trajectory problem',
20+
difficulty: 'Intermediate',
21+
description: 'Swing-up and stabilization of an inverted pendulum on a sliding cart. Introduces direct transcription and component-based modeling.',
22+
tutorial: '/amigo/docs/tutorials/cart-pole',
23+
github: 'https://github.com/smdogroup/amigo/tree/main/examples/cart_pole',
24+
},
25+
{
26+
name: 'Hang glider',
27+
category: 'Trajectory problem',
28+
difficulty: 'Intermediate',
29+
description: 'Maximizes horizontal range of a hang glider flying through a thermal updraft with lift and drag aerodynamics.',
30+
tutorial: '/amigo/docs/tutorials/hang-glider',
31+
github: 'https://github.com/smdogroup/amigo/tree/main/examples/hang_glider',
32+
json: '/amigo/json/hang_glider_opt_data.json',
33+
},
34+
{
35+
name: 'Free-flying robot',
36+
category: 'Trajectory problem',
37+
difficulty: 'Advanced',
38+
description: 'Minimum-time planar maneuver of a free-flying robot actuated by four independent thrusters.',
39+
tutorial: '/amigo/docs/tutorials/free-flying-robot',
40+
github: 'https://github.com/smdogroup/amigo/tree/main/examples/free_flying_robot',
41+
json: '/amigo/json/freeflyingrobot_opt_data.json',
42+
},
43+
{
44+
name: 'Euler beam',
45+
category: 'FEA problem',
46+
difficulty: 'Intermediate',
47+
description: 'Finite element analysis of a cantilever beam under distributed loading using Euler–Bernoulli beam theory.',
48+
tutorial: '/amigo/docs/tutorials/euler_beam',
49+
github: 'https://github.com/smdogroup/amigo/tree/main/examples/euler_beam',
50+
},
51+
];
852

9-
## Available Examples
53+
export const catStyle = {
54+
'Trajectory problem': { background: '#dbeafe', color: '#1e40af', border: '1px solid #bfdbfe' },
55+
'FEA problem': { background: '#dcfce7', color: '#166534', border: '1px solid #bbf7d0' },
56+
};
1057

11-
- **[Brachistochrone Problem](./brachistochrone.md)**: A classic calculus of variations problem that finds the fastest path for a particle sliding between two points under gravity. This example demonstrates trajectory optimization with free final time.
58+
export const diffStyle = {
59+
Beginner: { background: '#f0fdf4', color: '#166534' },
60+
Intermediate: { background: '#eff6ff', color: '#1e40af' },
61+
Advanced: { background: '#fff7ed', color: '#9a3412' },
62+
};
1263

13-
- **[Cart-Pole Tutorial](../tutorials/cart-pole.md)**: A comprehensive tutorial on solving the inverted pendulum problem. This example provides detailed explanations of the direct transcription method and component-based modeling.
64+
export function QuickGuide() {
65+
const [open, setOpen] = useState(false);
66+
return (
67+
<div style={{
68+
border: '2px solid #1B5299',
69+
borderRadius: '3px',
70+
marginBottom: '1.5rem',
71+
backgroundColor: 'var(--ifm-background-surface-color)',
72+
overflow: 'hidden',
73+
}}>
74+
{/* Clickable header */}
75+
<button
76+
onClick={() => setOpen(o => !o)}
77+
style={{
78+
width: '100%',
79+
display: 'flex',
80+
flexDirection: 'column',
81+
padding: '0.65rem 1rem',
82+
background: 'transparent',
83+
border: 'none',
84+
cursor: 'pointer',
85+
textAlign: 'left',
86+
}}
87+
>
88+
{/* Title row */}
89+
<span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
90+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1B5299" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
91+
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
92+
</svg>
93+
<span style={{ fontWeight: '700', fontSize: '0.95rem', color: '#1B5299' }}>
94+
Quick guide to the examples table
95+
</span>
96+
</span>
97+
{/* Subtitle row — always visible so user can close */}
98+
<span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingLeft: '1.65rem', marginTop: '0.35rem' }}>
99+
<span style={{ fontSize: '0.78rem', color: '#374151' }}>
100+
{open ? 'Click to collapse the quick guide.' : 'Click to unfold and see the quick guide for the table.'}
101+
</span>
102+
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#374151" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
103+
style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease', flexShrink: 0 }}>
104+
<polyline points="6 9 12 15 18 9"/>
105+
</svg>
106+
</span>
14107

108+
</button>
109+
110+
{/* Expandable content */}
111+
{open && (
112+
<div style={{ padding: '0 1rem 1rem 1rem', borderTop: '1px solid #d0d7de' }}>
113+
<p style={{ marginTop: '0.75rem', marginBottom: '0.6rem', fontSize: '0.9rem', color: 'var(--ifm-font-color-base)' }}>
114+
This table lists all examples available in Amigo. Here is how to use it:
115+
</p>
116+
<ul style={{ margin: '0', paddingLeft: '1.25rem', fontSize: '0.88rem', color: 'var(--ifm-font-color-base)', lineHeight: '1.9' }}>
117+
<li><strong>Filter buttons</strong>{' '}: Narrow the list by problem type. Click <em>All</em> to reset the view.</li>
118+
<li><strong>Problem</strong>{' '}: Name of the example. Clicking it takes you directly to the tutorial page.</li>
119+
<li><strong>Category</strong>{' '}: Problem class: <span style={{ display:'inline-block', padding:'1px 7px', borderRadius:'8px', fontSize:'0.78rem', fontWeight:'500', background:'#dbeafe', color:'#1e40af', border:'1px solid #bfdbfe' }}>Trajectory problem</span> for optimal control and dynamics, or <span style={{ display:'inline-block', padding:'1px 7px', borderRadius:'8px', fontSize:'0.78rem', fontWeight:'500', background:'#dcfce7', color:'166534', border:'1px solid #bbf7d0' }}>FEA problem</span> for structural analysis.</li>
120+
<li><strong>Description</strong>{' '}: A short summary of the problem formulation and objective.</li>
121+
<li><strong style={{ color: '#1B5299' }}>Docs</strong>{' '}: Opens the full tutorial with problem formulation, code walkthrough, and results.</li>
122+
<li><strong>Code</strong>{' '}: Opens the example source code on GitHub.</li>
123+
<li><strong style={{ color: '#d97706' }}>JSON</strong>{' '}: Downloads the serialized model data file to reproduce the example locally (available for selected examples).</li>
124+
</ul>
125+
</div>
126+
)}
127+
</div>
128+
);
129+
}
130+
131+
export function ExamplesTable() {
132+
const [filter, setFilter] = useState('All');
133+
const categories = ['All', 'Trajectory problem', 'FEA problem'];
134+
const filtered = filter === 'All' ? EXAMPLES : EXAMPLES.filter(e => e.category === filter);
135+
136+
return (
137+
<div>
138+
{/* Filter bar */}
139+
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '1.25rem', flexWrap: 'wrap' }}>
140+
<span style={{ fontSize: '0.83rem', color: 'var(--ifm-color-emphasis-600)', marginRight: '2px' }}>Filter:</span>
141+
{categories.map(cat => (
142+
<button
143+
key={cat}
144+
onClick={() => setFilter(cat)}
145+
style={{
146+
padding: '4px 14px',
147+
borderRadius: '20px',
148+
border: `1px solid ${filter === cat ? '#1B5299' : 'var(--ifm-color-emphasis-300)'}`,
149+
backgroundColor: filter === cat ? '#1B5299' : 'transparent',
150+
color: filter === cat ? '#ffffff' : 'var(--ifm-font-color-base)',
151+
cursor: 'pointer',
152+
fontSize: '0.82rem',
153+
fontWeight: filter === cat ? '600' : '400',
154+
transition: 'all 0.15s ease',
155+
}}
156+
>
157+
{cat}
158+
</button>
159+
))}
160+
<span style={{ marginLeft: 'auto', fontSize: '0.82rem', color: 'var(--ifm-color-emphasis-600)' }}>
161+
{filtered.length} {filtered.length === 1 ? 'result' : 'results'}
162+
</span>
163+
</div>
164+
165+
{/* Table */}
166+
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
167+
<thead>
168+
<tr style={{ borderBottom: '2px solid var(--ifm-table-border-color)' }}>
169+
{['Problem', 'Category', 'Description', 'Links'].map((h, i) => (
170+
<th key={h} style={{
171+
padding: '0.55rem 0.75rem',
172+
textAlign: i === 3 ? 'center' : 'left',
173+
fontWeight: '600',
174+
color: 'var(--ifm-heading-color, #1a1a1a)',
175+
fontSize: '0.8rem',
176+
textTransform: 'uppercase',
177+
letterSpacing: '0.05em',
178+
}}>
179+
{h}
180+
</th>
181+
))}
182+
</tr>
183+
</thead>
184+
<tbody>
185+
{filtered.map(ex => (
186+
<tr key={ex.name} style={{ borderBottom: '1px solid var(--ifm-table-border-color)' }}>
187+
188+
{/* Name */}
189+
<td style={{ padding: '0.4rem 0.75rem', textAlign: 'left', fontWeight: '500', whiteSpace: 'nowrap' }}>
190+
<Link to={ex.tutorial} style={{ color: '#1B5299', textDecoration: 'none' }}>
191+
{ex.name}
192+
</Link>
193+
</td>
194+
195+
{/* Category badge */}
196+
<td style={{ padding: '0.4rem 0.75rem', textAlign: 'left' }}>
197+
<span style={{
198+
display: 'inline-block', padding: '2px 9px', borderRadius: '10px',
199+
fontSize: '0.78rem', fontWeight: '500', whiteSpace: 'nowrap',
200+
...(catStyle[ex.category] || {}),
201+
}}>
202+
{ex.category}
203+
</span>
204+
</td>
205+
206+
{/* Description */}
207+
<td style={{ padding: '0.4rem 0.75rem', textAlign: 'justify', color: 'var(--ifm-font-color-base)', lineHeight: '1.5' }}>
208+
{ex.description}
209+
</td>
210+
211+
{/* Links */}
212+
<td style={{ padding: '0.4rem 0.75rem', textAlign: 'center' }}>
213+
<div style={{ display: 'flex', gap: '6px', justifyContent: 'center' }}>
214+
<Link to={ex.tutorial} style={{
215+
display: 'inline-block', padding: '3px 10px', borderRadius: '4px',
216+
fontSize: '0.78rem', fontWeight: '500', whiteSpace: 'nowrap',
217+
border: '1px solid #1B5299', color: '#1B5299',
218+
textDecoration: 'none', backgroundColor: 'transparent',
219+
}}>
220+
Docs
221+
</Link>
222+
<a href={ex.github} target="_blank" rel="noopener noreferrer" style={{
223+
display: 'inline-block', padding: '3px 10px', borderRadius: '4px',
224+
fontSize: '0.78rem', fontWeight: '500', whiteSpace: 'nowrap',
225+
border: '1px solid var(--ifm-color-emphasis-300)',
226+
color: 'var(--ifm-font-color-base)',
227+
textDecoration: 'none', backgroundColor: 'transparent',
228+
}}>
229+
Code
230+
</a>
231+
{ex.json && (
232+
<a href={ex.json} download target="_blank" rel="noopener noreferrer" style={{
233+
display: 'inline-block', padding: '3px 10px', borderRadius: '4px',
234+
fontSize: '0.78rem', fontWeight: '500', whiteSpace: 'nowrap',
235+
border: '1px solid #d97706',
236+
color: '#d97706',
237+
textDecoration: 'none', backgroundColor: 'transparent',
238+
}}>
239+
JSON
240+
</a>
241+
)}
242+
</div>
243+
</td>
244+
245+
</tr>
246+
))}
247+
</tbody>
248+
</table>
249+
</div>
250+
);
251+
}
252+
253+
# Examples browser
254+
255+
This collection of examples is part of Amigo. Amigo gathers tools for modeling and solving optimization problems and applications. It aims to provide efficient, differentiable solvers for trajectory optimization, optimal control, and finite element analysis, both on CPU and GPU. If you want to define a problem and solve it, please check the [documentation](/amigo/docs/getting-started/introduction).
256+
257+
<QuickGuide />
258+
259+
<div style={{ borderTop: '1px solid #e5e7eb', margin: '1.25rem 0' }} />
260+
261+
From this page, you can find a list of examples solved with Amigo. The table below provides an overview of all available problems and allows interactive exploration and filtering by problem type.
262+
263+
<ExamplesTable />

‎website/docs/manual/compute-flow.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
sidebar_label: Compute flow
3+
sidebar_position: 6
4+
---
5+
6+
# Compute Flow
7+
8+
This page is under construction and will be updated soon.

‎website/docs/manual/plot-solution.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
sidebar_label: Plot a solution
3+
sidebar_position: 7
4+
---
5+
6+
# Plot a Solution
7+
8+
This page is under construction and will be updated soon.

‎website/docs/manual/set-initial-guess.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
sidebar_label: Set an initial guess
3+
sidebar_position: 3
4+
---
5+
6+
# Set an Initial Guess
7+
8+
This page is under construction and will be updated soon.

‎website/sidebars.ts‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ const sidebars: SidebarsConfig = {
55
docsSidebar: [
66
{
77
type: 'category',
8-
label: 'Getting Started',
8+
label: 'Getting started',
99
items: [
1010
'getting-started/introduction',
1111
'getting-started/installation',
1212
],
1313
},
1414
{
1515
type: 'category',
16-
label: 'User Guide',
16+
label: 'Manual',
1717
items: [
1818
{
1919
type: 'category',
20-
label: 'Define Problem',
20+
label: 'Define a problem',
2121
items: [
2222
'manual/define-problem/components',
2323
'manual/define-problem/variables',
@@ -26,13 +26,16 @@ const sidebars: SidebarsConfig = {
2626
'manual/define-problem/models',
2727
],
2828
},
29+
'manual/set-initial-guess',
2930
'manual/solve-problem',
3031
'manual/solve-on-gpu',
32+
'manual/compute-flow',
33+
'manual/plot-solution',
3134
],
3235
},
3336
{
3437
type: 'category',
35-
label: 'API Reference',
38+
label: 'API reference',
3639
items: [
3740
'api/overview',
3841
'api/component',
@@ -45,12 +48,12 @@ const sidebars: SidebarsConfig = {
4548
tutorialsSidebar: [
4649
{
4750
type: 'category',
48-
label: 'Tutorials and Background',
51+
label: 'Tutorials and background',
4952
items: [
5053
{
5154
type: 'doc',
5255
id: 'tutorials/intro',
53-
label: 'Getting Started',
56+
label: 'Getting started',
5457
},
5558
{
5659
type: 'category',
@@ -83,11 +86,11 @@ const sidebars: SidebarsConfig = {
8386
{
8487
type: 'doc',
8588
id: 'examples/overview',
86-
label: 'Introduction',
89+
label: 'Examples browser',
8790
},
8891
{
8992
type: 'category',
90-
label: 'List of Examples',
93+
label: 'List of examples',
9194
items: [
9295
'tutorials/hang-glider',
9396
'tutorials/free-flying-robot',

‎website/src/css/custom.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -129,24 +129,24 @@
129129
/* Dark mode - Figure captions */
130130
[data-theme='dark'] div[align="center"] p strong,
131131
[data-theme='dark'] p[align="center"] strong {
132-
color: #5eead4;
132+
color: #6b8afb;
133133
}
134134

135135
/* Dark mode - Headings */
136136
[data-theme='dark'] .markdown h1 {
137-
color: #5eead4;
137+
color: #6b8afb;
138138
}
139139

140140
[data-theme='dark'] .markdown h2 {
141-
color: #5eead4;
141+
color: #6b8afb;
142142
}
143143

144144
[data-theme='dark'] .markdown h3 {
145-
color: #67e8f9;
145+
color: #8aa2fc;
146146
}
147147

148148
[data-theme='dark'] .markdown h4 {
149-
color: #67e8f9;
149+
color: #9baffc;
150150
}
151151

152152
/* Dark mode code blocks - removed, let Prism theme handle it */

0 commit comments

Comments
 (0)