Skip to content

Commit 0102a72

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

File tree

8 files changed

+4147
-0
lines changed

8 files changed

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

‎docs/media/icon.png‎

237 KB
Loading

0 commit comments

Comments
 (0)