Skip to content

Commit 9c5af59

Browse files
Meng6Meng6
committed
Update webpage
1 parent 931822a commit 9c5af59

File tree

4 files changed

+477
-141
lines changed

4 files changed

+477
-141
lines changed

‎docs/app.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const revealItems = document.querySelectorAll(
2-
"section, header, footer, .feature-item, .example-card"
2+
"section, header, footer, .feature-item, .example-card, .demo-card"
33
);
44

55
const observer = new IntersectionObserver(
@@ -34,3 +34,9 @@ window.addEventListener("message", (event) => {
3434
});
3535
}
3636
});
37+
38+
/* Set green theme for report iframes */
39+
sessionStorage.setItem("argblazer_global_sessionTheme", "green");
40+
41+
/* Initialize mermaid for demo graphs */
42+
mermaid.initialize({ startOnLoad: true, flowchart: { padding: 0.01, htmlLabels: true } });

‎docs/index.html‎

Lines changed: 225 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
<span>ArgBlazer</span>
2828
</div>
2929
<nav class="nav">
30-
<a href="#showcase">Showcase</a>
3130
<a href="#features">Features</a>
32-
<a href="#examples">Demos</a>
31+
<a href="#examples">Examples</a>
32+
<a href="#yaml-structure">YAML</a>
3333
<a href="playground.html">Playground</a>
3434
<a href="https://github.com/xai-ca/argblazer">GitHub</a>
3535
<button class="pill" id="installBtn">Install</button>
@@ -54,45 +54,6 @@ <h1>
5454

5555
</section>
5656

57-
<section id="showcase" class="section">
58-
<div class="section-header">
59-
<h2>A simple, complete example</h2>
60-
</div>
61-
<div class="examples-grid">
62-
<div class="example-card example-tall">
63-
<div class="example-body">
64-
<div class="yaml-block">
65-
<div class="yaml-label">YAML</div>
66-
<pre><code>exhibit: |
67-
Tweety is a bird.
68-
Tweety is a penguin.
69-
arguments:
70-
- a:
71-
- summary: Tweety can fly because birds typically can fly
72-
- details:
73-
- rule: Birds typically can fly
74-
- evidence: Tweety is a bird
75-
- conclusion: Tweety can fly
76-
- b:
77-
- summary: Tweety cannot fly because it is a penguin
78-
- details:
79-
- rule: Penguins cannot fly
80-
- evidence: Tweety is a penguin
81-
- conclusion: Tweety cannot fly
82-
attacks:
83-
- [b, a]</code></pre>
84-
</div>
85-
<div class="example-frame">
86-
<iframe
87-
title="ArgBlazer Example 1"
88-
src="examples/ex1_argBlazerReport.html"
89-
></iframe>
90-
</div>
91-
</div>
92-
</div>
93-
</div>
94-
</section>
95-
9657
<section id="features" class="section">
9758
<div class="section-header">
9859
<h2>Key features</h2>
@@ -146,15 +107,16 @@ <h3>Export to HTML</h3>
146107

147108
<section id="examples" class="section">
148109
<div class="section-header">
149-
<h2>Feature demos</h2>
110+
<h2>Examples</h2>
150111
</div>
151-
<div class="examples-grid">
152-
<div class="example-card example-tall">
153-
<h3>Step-by-step construction</h3>
154-
<div class="example-body">
155-
<div class="yaml-block">
156-
<div class="yaml-label">YAML</div>
157-
<pre><code>arguments:
112+
113+
<div class="demo-card">
114+
<h3>Step-by-step construction</h3>
115+
<p class="demo-desc">Arguments are introduced incrementally across steps, with the graph and extensions recomputed at each step.</p>
116+
<div class="demo-content">
117+
<div class="yaml-block yaml-demo">
118+
<div class="yaml-label">YAML</div>
119+
<pre><code>arguments:
158120
- a:
159121
- step: 1
160122
- b:
@@ -167,21 +129,84 @@ <h3>Step-by-step construction</h3>
167129
- [b, a]
168130
- [c, b]
169131
- [d, c]</code></pre>
170-
</div>
171-
<div class="example-frame">
172-
<iframe
173-
title="ArgBlazer Example 2"
174-
src="examples/ex2_argBlazerReport.html"
175-
></iframe>
176-
</div>
177132
</div>
133+
<div class="graph-panel">
134+
<span class="graph-label">Step 1</span>
135+
<pre class="mermaid">
136+
graph BT
137+
classDef default fill:#D5E8D4,stroke:#004d00
138+
classDef ghost fill:transparent,stroke:none,color:transparent
139+
subgraph r2[Rank 2]
140+
b
141+
end
142+
subgraph r1[Rank 1]
143+
a
144+
end
145+
class r1,r2 ghost
146+
b --> a
147+
</pre>
148+
</div>
149+
<div class="graph-panel">
150+
<span class="graph-label">Step 2</span>
151+
<pre class="mermaid">
152+
graph BT
153+
classDef default fill:#D5E8D4,stroke:#004d00
154+
classDef add fill:#D5E8D4,stroke:#004d00,stroke-width:4px
155+
classDef ghost fill:transparent,stroke:none,color:transparent
156+
subgraph r3[Rank 3]
157+
c
158+
end
159+
subgraph r2[Rank 2]
160+
b
161+
end
162+
subgraph r1[Rank 1]
163+
a
164+
end
165+
class r1,r2,r3 ghost
166+
b --> a
167+
c ==> b
168+
class c add
169+
</pre>
170+
</div>
171+
<div class="graph-panel">
172+
<span class="graph-label">Step 3</span>
173+
<pre class="mermaid">
174+
graph BT
175+
classDef default fill:#D5E8D4,stroke:#004d00
176+
classDef add fill:#D5E8D4,stroke:#004d00,stroke-width:4px
177+
classDef ghost fill:transparent,stroke:none,color:transparent
178+
subgraph r4[Rank 4]
179+
d
180+
end
181+
subgraph r3[Rank 3]
182+
c
183+
end
184+
subgraph r2[Rank 2]
185+
b
186+
end
187+
subgraph r1[Rank 1]
188+
a
189+
end
190+
class r1,r2,r3,r4 ghost
191+
b --> a
192+
c --> b
193+
d ==> c
194+
class d add
195+
</pre>
196+
</div>
197+
</div>
198+
<div class="demo-footer">
199+
<a href="playground.html#example=steps" class="demo-playground-link">Try in Playground &rarr;</a>
178200
</div>
179-
<div class="example-card example-tall">
180-
<h3>Top / bottom layout</h3>
181-
<div class="example-body">
182-
<div class="yaml-block">
183-
<div class="yaml-label">YAML</div>
184-
<pre><code>arguments:
201+
</div>
202+
203+
<div class="demo-card">
204+
<h3>Top / bottom layout</h3>
205+
<p class="demo-desc">Annotations control which arguments are placed at the top or bottom of the graph.</p>
206+
<div class="demo-content">
207+
<div class="yaml-block yaml-demo">
208+
<div class="yaml-label">YAML</div>
209+
<pre><code>arguments:
185210
- a:
186211
- top
187212
- b
@@ -195,15 +220,145 @@ <h3>Top / bottom layout</h3>
195220
- [c, b]
196221
- [d, c]
197222
- [e, b]</code></pre>
198-
</div>
199-
<div class="example-frame">
200-
<iframe
201-
title="ArgBlazer Example 3"
202-
src="examples/ex3_argBlazerReport.html"
203-
></iframe>
204-
</div>
205223
</div>
224+
<div class="graph-panel">
225+
<span class="graph-label">Rank from top</span>
226+
<pre class="mermaid">
227+
graph BT
228+
classDef default fill:#D5E8D4,stroke:#004d00
229+
classDef ghost fill:transparent,stroke:none,color:transparent
230+
subgraph r4[Rank 4]
231+
d
232+
end
233+
subgraph r3[Rank 3]
234+
c
235+
e
236+
end
237+
subgraph r2[Rank 2]
238+
b
239+
end
240+
subgraph r1[Rank 1]
241+
a
242+
end
243+
class r1,r2,r3,r4 ghost
244+
b --> a
245+
c --> b
246+
d --> c
247+
e --> b
248+
</pre>
249+
</div>
250+
<div class="graph-panel">
251+
<span class="graph-label">Rank from bottom</span>
252+
<pre class="mermaid">
253+
graph BT
254+
classDef default fill:#D5E8D4,stroke:#004d00
255+
classDef ghost fill:transparent,stroke:none,color:transparent
256+
subgraph r1[Rank 1]
257+
d
258+
e
259+
end
260+
subgraph r2[Rank 2]
261+
c
262+
b
263+
end
264+
subgraph r3[Rank 3]
265+
a
266+
end
267+
class r1,r2,r3 ghost
268+
b --> a
269+
c --> b
270+
d --> c
271+
e --> b
272+
</pre>
273+
</div>
274+
</div>
275+
<div class="demo-footer">
276+
<a href="playground.html#example=topbottom" class="demo-playground-link">Try in Playground &rarr;</a>
277+
</div>
278+
</div>
279+
</section>
280+
281+
<section id="yaml-structure" class="section">
282+
<div class="section-header">
283+
<h2>YAML Structure</h2>
284+
</div>
285+
<div class="demo-card">
286+
<h3 class="schema-subheading">ArgBlazer reads YAML files with three top-level fields.</h3>
287+
288+
<div class="table-scroll">
289+
<table class="schema-table">
290+
<thead>
291+
<tr>
292+
<th>Field</th>
293+
<th>Required</th>
294+
<th>Type</th>
295+
<th>Description</th>
296+
</tr>
297+
</thead>
298+
<tbody>
299+
<tr>
300+
<td><code>exhibit</code></td>
301+
<td>No</td>
302+
<td>String</td>
303+
<td>Background text displayed in the Exhibit section</td>
304+
</tr>
305+
<tr>
306+
<td><code>arguments</code></td>
307+
<td>Yes</td>
308+
<td>List</td>
309+
<td>Argument definitions. Each argument can optionally include annotations listed below.</td>
310+
</tr>
311+
<tr>
312+
<td><code>attacks</code></td>
313+
<td>No</td>
314+
<td>List of pairs</td>
315+
<td>Attack relationships, e.g. <code>[b, a]</code> means b attacks a</td>
316+
</tr>
317+
</tbody>
318+
</table>
206319
</div>
320+
321+
<h3 class="schema-subheading">Argument annotations</h3>
322+
323+
<div class="table-scroll">
324+
<table class="schema-table">
325+
<thead>
326+
<tr>
327+
<th>Annotation</th>
328+
<th>Type</th>
329+
<th>Description</th>
330+
</tr>
331+
</thead>
332+
<tbody>
333+
<tr>
334+
<td><code>summary</code></td>
335+
<td>String</td>
336+
<td>Brief description shown on graph nodes</td>
337+
</tr>
338+
<tr>
339+
<td><code>details</code></td>
340+
<td>String or list</td>
341+
<td>Extended details as a list of key-value pairs with arbitrary sub-fields (e.g. rule, evidence, conclusion)</td>
342+
</tr>
343+
<tr>
344+
<td><code>step</code></td>
345+
<td>Integer</td>
346+
<td>Which step the argument is introduced (for incremental construction)</td>
347+
</tr>
348+
<tr>
349+
<td><code>top</code></td>
350+
<td>Flag</td>
351+
<td>Place this argument at the top of the graph layout</td>
352+
</tr>
353+
<tr>
354+
<td><code>bottom</code></td>
355+
<td>Flag</td>
356+
<td>Place this argument at the bottom of the graph layout</td>
357+
</tr>
358+
</tbody>
359+
</table>
360+
</div>
361+
207362
</div>
208363
</section>
209364
</main>
@@ -212,6 +367,7 @@ <h3>Top / bottom layout</h3>
212367
<span>ArgBlazer © 2026</span>
213368
</footer>
214369

370+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.9.0/mermaid.min.js"></script>
215371
<script src="app.js"></script>
216372
</body>
217373
</html>

0 commit comments

Comments
 (0)