Skip to content

Commit 08c3f9b

Browse files
melvincarvalhomelvincarvalho
committed
Initial commit: demo repo with autonomous-dnd article
Adds the JSS demo umbrella with a landing page and the first article, "Walk, big one" — an autonomous D&D campaign on four Solid pods through MCP federation. Includes OG image (1200x630) for social previews and FLUX.1 [dev] painterly editorial illustrations for each scene.
0 parents  commit 08c3f9b

9 files changed

Lines changed: 586 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# demo
2+
3+
Articles, essays, and demonstrations of [JavaScript Solid Server](https://github.com/JavaScriptSolidServer/JavaScriptSolidServer) in action.
4+
5+
Published at https://javascriptsolidserver.github.io/demo/
6+
7+
## Articles
8+
9+
- [Walk, big one](https://javascriptsolidserver.github.io/demo/autonomous-dnd/) — an autonomous D&D campaign on four Solid pods (2026-05-18)
10+
11+
## Adding an article
12+
13+
Each article lives in its own folder under the repo root:
14+
15+
```
16+
demo/
17+
├── index.html # this listing
18+
├── README.md
19+
└── <slug>/
20+
├── index.html # the article
21+
└── images/
22+
├── og.png # 1200x630 social card
23+
└── ... # scene images
24+
```
25+
26+
The article's `index.html` should include OG meta tags with absolute URLs pointing at the deployed location (`https://javascriptsolidserver.github.io/demo/<slug>/images/og.png`), so social previews work everywhere the article is shared.
27+
28+
## License
29+
30+
MIT for code, CC BY 4.0 for written content unless otherwise noted on a per-article basis.

‎autonomous-dnd/images/og.png‎

403 KB
Loading

‎autonomous-dnd/images/scene0.jpg‎

103 KB
Loading

‎autonomous-dnd/images/scene1.jpg‎

218 KB
Loading

‎autonomous-dnd/images/scene2.jpg‎

195 KB
Loading

‎autonomous-dnd/images/scene3.jpg‎

181 KB
Loading

‎autonomous-dnd/images/scene4.jpg‎

212 KB
Loading

‎autonomous-dnd/index.html‎

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

‎index.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
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>JSS demos — articles and demonstrations</title>
7+
<meta name="description" content="Articles, essays, and demonstrations of JavaScript Solid Server in action.">
8+
<meta property="og:type" content="website">
9+
<meta property="og:title" content="JSS demos">
10+
<meta property="og:description" content="Articles, essays, and demonstrations of JavaScript Solid Server in action.">
11+
<meta property="og:url" content="https://javascriptsolidserver.github.io/demo/">
12+
<meta property="og:site_name" content="JSS demos">
13+
14+
<style>
15+
:root {
16+
--bg: #faf8f5;
17+
--surface: #ffffff;
18+
--surface2: #f3f0eb;
19+
--border: #e0dbd4;
20+
--text: #2d2a26;
21+
--text-muted: #6b6560;
22+
--accent: #c57020;
23+
--accent-dim: #c5702018;
24+
--blue: #3d6b99;
25+
}
26+
* { margin: 0; padding: 0; box-sizing: border-box; }
27+
body {
28+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
29+
background: var(--bg);
30+
color: var(--text);
31+
line-height: 1.7;
32+
font-size: 17px;
33+
}
34+
.hero {
35+
background: linear-gradient(135deg, #f5f0e8 0%, #fdf6ec 50%, #f5f0e8 100%);
36+
border-bottom: 1px solid var(--border);
37+
padding: 4rem 2rem 3rem;
38+
text-align: center;
39+
}
40+
.hero .eyebrow {
41+
font-size: 0.75rem;
42+
letter-spacing: 0.18em;
43+
text-transform: uppercase;
44+
color: var(--accent);
45+
font-weight: 600;
46+
margin-bottom: 1rem;
47+
}
48+
.hero h1 {
49+
font-size: clamp(2rem, 5vw, 3rem);
50+
color: var(--accent);
51+
margin-bottom: 1.25rem;
52+
font-weight: 800;
53+
letter-spacing: -0.01em;
54+
line-height: 1.1;
55+
}
56+
.hero .subtitle {
57+
font-size: 1.15rem;
58+
color: var(--text-muted);
59+
max-width: 640px;
60+
margin: 0 auto;
61+
line-height: 1.5;
62+
}
63+
.container {
64+
max-width: 880px;
65+
margin: 0 auto;
66+
padding: 3rem 2rem 5rem;
67+
}
68+
.article-card {
69+
display: block;
70+
background: var(--surface);
71+
border: 1px solid var(--border);
72+
border-left: 4px solid var(--accent);
73+
border-radius: 8px;
74+
padding: 1.75rem 2rem;
75+
margin-bottom: 1.25rem;
76+
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
77+
text-decoration: none;
78+
color: inherit;
79+
transition: transform 0.15s, box-shadow 0.15s;
80+
}
81+
.article-card:hover {
82+
transform: translateY(-2px);
83+
box-shadow: 0 4px 12px rgba(45, 42, 38, 0.1);
84+
}
85+
.article-card .date {
86+
font-size: 0.75rem;
87+
letter-spacing: 0.12em;
88+
text-transform: uppercase;
89+
color: var(--accent);
90+
font-weight: 600;
91+
margin-bottom: 0.4rem;
92+
}
93+
.article-card h2 {
94+
font-size: 1.45rem;
95+
color: var(--text);
96+
margin-bottom: 0.6rem;
97+
letter-spacing: -0.01em;
98+
font-weight: 700;
99+
}
100+
.article-card p {
101+
color: var(--text-muted);
102+
font-size: 1rem;
103+
line-height: 1.55;
104+
margin: 0;
105+
}
106+
.intro {
107+
margin-bottom: 2.5rem;
108+
font-size: 1.05rem;
109+
color: var(--text);
110+
line-height: 1.7;
111+
}
112+
.intro code {
113+
font-family: 'SF Mono', Monaco, Consolas, monospace;
114+
font-size: 0.88em;
115+
background: var(--surface2);
116+
padding: 0.1em 0.4em;
117+
border-radius: 4px;
118+
color: #5a4a3a;
119+
}
120+
.intro a { color: var(--blue); text-decoration: none; }
121+
.intro a:hover { text-decoration: underline; }
122+
footer {
123+
max-width: 880px;
124+
margin: 0 auto;
125+
padding: 2rem;
126+
font-size: 0.85rem;
127+
color: var(--text-muted);
128+
border-top: 1px solid var(--border);
129+
background: var(--surface2);
130+
}
131+
footer a { color: var(--blue); text-decoration: none; }
132+
footer a:hover { text-decoration: underline; }
133+
@media (max-width: 600px) {
134+
body { font-size: 16px; }
135+
.hero { padding: 3rem 1.25rem 2rem; }
136+
.container { padding: 2rem 1.25rem 3rem; }
137+
.article-card { padding: 1.5rem; }
138+
}
139+
</style>
140+
</head>
141+
<body>
142+
143+
<header class="hero">
144+
<div class="eyebrow">JavaScript Solid Server</div>
145+
<h1>Demos and notes</h1>
146+
<p class="subtitle">Articles, essays, and demonstrations of JSS in action.</p>
147+
</header>
148+
149+
<div class="container">
150+
151+
<p class="intro">JSS is a self-hosted Solid pod server, agent-friendly, MCP-enabled, two npm packages and one command. Run <code>npx jspod --mcp</code> and you have a pod that speaks the Model Context Protocol. Source: <a href="https://github.com/JavaScriptSolidServer/JavaScriptSolidServer">JSS</a>, <a href="https://github.com/JavaScriptSolidServer/jspod">jspod</a>. The pieces below are notes from running the substrate.</p>
152+
153+
<a class="article-card" href="autonomous-dnd/">
154+
<div class="date">2026-05-18</div>
155+
<h2>Walk, big one</h2>
156+
<p>Four Solid pods. A DM and three players, each defined by a markdown file on its own pod. One classic short barrow-crawl. Everything autonomous, the whole campaign run inside a single tool invocation. What surprised me wasn't that it worked. It was the moment one character touched another.</p>
157+
</a>
158+
159+
</div>
160+
161+
<footer>
162+
<p><a href="https://github.com/JavaScriptSolidServer">JavaScriptSolidServer on GitHub</a> · <a href="https://javascriptsolidserver.github.io/JavaScriptSolidServer.github.io/">JSS landing page</a></p>
163+
</footer>
164+
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)