Skip to content

Commit bf2d563

Browse files
Meng6Meng6
committed
Add a webpage for ArgBlazer
1 parent bf6e856 commit bf2d563

File tree

11 files changed

+4149
-0
lines changed

11 files changed

+4149
-0
lines changed

‎.github/workflows/deploy-pages.yml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: false
16+
17+
jobs:
18+
deploy:
19+
environment:
20+
name: github-pages
21+
url: ${{ steps.deployment.outputs.page_url }}
22+
runs-on: ubuntu-latest
23+
steps:
24+
- uses: actions/checkout@v4
25+
- uses: actions/configure-pages@v5
26+
- uses: actions/upload-pages-artifact@v3
27+
with:
28+
path: docs
29+
- id: deployment
30+
uses: actions/deploy-pages@v4

‎docs/app.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const revealItems = document.querySelectorAll(
2+
"section, header, footer, .feature-item, .example-card"
3+
);
4+
5+
const observer = new IntersectionObserver(
6+
(entries) => {
7+
entries.forEach((entry) => {
8+
if (entry.isIntersecting) {
9+
entry.target.classList.add("reveal");
10+
observer.unobserve(entry.target);
11+
}
12+
});
13+
},
14+
{ threshold: 0.15 }
15+
);
16+
17+
revealItems.forEach((item) => observer.observe(item));
18+
19+
const installBtn = document.getElementById("installBtn");
20+
21+
installBtn.addEventListener("click", () => {
22+
window.open(
23+
"https://marketplace.visualstudio.com/items?itemName=CIRSS.argblazer",
24+
"_blank"
25+
);
26+
});
27+
28+
window.addEventListener("message", (event) => {
29+
if (event.data && event.data.type === "argblazer-theme") {
30+
document.querySelectorAll("iframe").forEach((iframe) => {
31+
if (iframe.contentWindow !== event.source) {
32+
iframe.contentWindow.postMessage(event.data, "*");
33+
}
34+
});
35+
}
36+
});

‎docs/examples/ex1_argBlazerReport.html‎

Lines changed: 1150 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/examples/ex2_argBlazerReport.html‎

Lines changed: 1158 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/examples/ex3_argBlazerReport.html‎

Lines changed: 1158 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/index.html‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
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>ArgBlazer</title>
7+
<meta
8+
name="description"
9+
content="ArgBlazer is a VS Code extension that generates interactive HTML reports from YAML files, where each YAML file represents an argumentation framework."
10+
/>
11+
<link rel="stylesheet" href="styles.css" />
12+
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32.png" />
13+
<link rel="icon" type="image/x-icon" href="media/favicon.ico" />
14+
<link rel="apple-touch-icon" href="media/apple-touch-icon.png" />
15+
</head>
16+
<body>
17+
<div class="ambient">
18+
<div class="orb orb-a"></div>
19+
<div class="orb orb-b"></div>
20+
<div class="orb orb-c"></div>
21+
<div class="grid"></div>
22+
</div>
23+
24+
<header class="topbar">
25+
<div class="logo">
26+
<img src="media/icon.png" alt="ArgBlazer icon" />
27+
<span>ArgBlazer</span>
28+
</div>
29+
<nav class="nav">
30+
<a href="#showcase">Showcase</a>
31+
<a href="#features">Features</a>
32+
<a href="#examples">Demos</a>
33+
<a href="https://github.com/xai-ca/argblazer">GitHub</a>
34+
<button class="pill" id="installBtn">Install</button>
35+
</nav>
36+
</header>
37+
38+
<main>
39+
<section class="hero">
40+
<div class="hero-copy">
41+
<div class="badge">VS Code Extension</div>
42+
<h1>
43+
<span class="accent">ArgBlazer</span> turns YAML argumentation frameworks into interactive HTML reports.
44+
</h1>
45+
<p>
46+
ArgBlazer generates interactive HTML reports from YAML files representing argumentation frameworks; the reports provide graph visualizations, extension sets, step-by-step constructions, and top/bottom layout—seamlessly integrated into your editor.
47+
</p>
48+
<div class="signal">
49+
<div class="pulse"></div>
50+
<span>Live reload enabled while you edit YAML.</span>
51+
</div>
52+
</div>
53+
54+
</section>
55+
56+
<section id="showcase" class="section">
57+
<div class="section-header">
58+
<h2>A simple, complete example</h2>
59+
</div>
60+
<div class="examples-grid">
61+
<div class="example-card example-tall">
62+
<div class="example-body">
63+
<div class="yaml-block">
64+
<div class="yaml-label">YAML</div>
65+
<pre><code>exhibit: |
66+
Tweety is a bird.
67+
Tweety is a penguin.
68+
arguments:
69+
- a:
70+
- summary: Tweety can fly because birds typically can fly
71+
- details:
72+
- rule: Birds typically can fly
73+
- evidence: Tweety is a bird
74+
- conclusion: Tweety can fly
75+
- b:
76+
- summary: Tweety cannot fly because it is a penguin
77+
- details:
78+
- rule: Penguins cannot fly
79+
- evidence: Tweety is a penguin
80+
- conclusion: Tweety cannot fly
81+
attacks:
82+
- [b, a]</code></pre>
83+
</div>
84+
<div class="example-frame">
85+
<iframe
86+
title="ArgBlazer Example 1"
87+
src="examples/ex1_argBlazerReport.html"
88+
></iframe>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</section>
94+
95+
<section id="features" class="section">
96+
<div class="section-header">
97+
<h2>Key features</h2>
98+
</div>
99+
<div class="feature-list">
100+
<div class="feature-item">
101+
<h3>Interactive graph visualization</h3>
102+
<p>
103+
Generates an interactive HTML report from a YAML file representing
104+
an argumentation framework, displayed in a side-by-side webview panel.
105+
</p>
106+
</div>
107+
<div class="feature-item">
108+
<h3>Extensions</h3>
109+
<p>
110+
Automatically computes and displays conflict-free, admissible,
111+
complete, preferred, grounded, and stable extensions.
112+
</p>
113+
</div>
114+
<div class="feature-item">
115+
<h3>Step-by-step construction</h3>
116+
<p>
117+
Arguments can be introduced incrementally across steps, with the
118+
graph and extensions recomputed at each step.
119+
</p>
120+
</div>
121+
<div class="feature-item">
122+
<h3>Graph layout control</h3>
123+
<p>
124+
Top and bottom annotations control which arguments are placed at
125+
the top or bottom of the graph layout.
126+
</p>
127+
</div>
128+
<div class="feature-item">
129+
<h3>Zoom controls</h3>
130+
<p>Zoom in, zoom out, and fit-to-view buttons on the graph.</p>
131+
</div>
132+
<div class="feature-item">
133+
<h3>Live reload</h3>
134+
<p>The report updates automatically whenever the YAML file is saved.</p>
135+
</div>
136+
<div class="feature-item">
137+
<h3>Export to HTML</h3>
138+
<p>
139+
Right-click the report panel and select "Export as HTML" to save a
140+
standalone HTML file.
141+
</p>
142+
</div>
143+
</div>
144+
</section>
145+
146+
<section id="examples" class="section">
147+
<div class="section-header">
148+
<h2>Feature demos</h2>
149+
</div>
150+
<div class="examples-grid">
151+
<div class="example-card example-tall">
152+
<h3>Step-by-step construction</h3>
153+
<div class="example-body">
154+
<div class="yaml-block">
155+
<div class="yaml-label">YAML</div>
156+
<pre><code>arguments:
157+
- a:
158+
- step: 1
159+
- b:
160+
- step: 1
161+
- c:
162+
- step: 2
163+
- d:
164+
- step: 3
165+
attacks:
166+
- [b, a]
167+
- [c, b]
168+
- [d, c]</code></pre>
169+
</div>
170+
<div class="example-frame">
171+
<iframe
172+
title="ArgBlazer Example 2"
173+
src="examples/ex2_argBlazerReport.html"
174+
></iframe>
175+
</div>
176+
</div>
177+
</div>
178+
<div class="example-card example-tall">
179+
<h3>Top / bottom layout</h3>
180+
<div class="example-body">
181+
<div class="yaml-block">
182+
<div class="yaml-label">YAML</div>
183+
<pre><code>arguments:
184+
- a:
185+
- top
186+
- b
187+
- c
188+
- d:
189+
- bottom
190+
- e:
191+
- bottom
192+
attacks:
193+
- [b, a]
194+
- [c, b]
195+
- [d, c]
196+
- [e, b]</code></pre>
197+
</div>
198+
<div class="example-frame">
199+
<iframe
200+
title="ArgBlazer Example 3"
201+
src="examples/ex3_argBlazerReport.html"
202+
></iframe>
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
</section>
208+
</main>
209+
210+
<footer>
211+
<span>ArgBlazer © 2026</span>
212+
</footer>
213+
214+
<script src="app.js"></script>
215+
</body>
216+
</html>

‎docs/media/apple-touch-icon.png‎

19.4 KB
Loading

‎docs/media/favicon-32.png‎

3.52 KB
Loading

‎docs/media/favicon.ico‎

279 KB
Binary file not shown.

‎docs/media/icon.png‎

237 KB
Loading

0 commit comments

Comments
 (0)