-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
196 lines (171 loc) · 6.2 KB
/
demo.html
File metadata and controls
196 lines (171 loc) · 6.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>RubyEvents Embeddable Components Demo</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Inter, system-ui, -apple-system, sans-serif;
background: #f8f9fa;
margin: 0;
padding: 2rem;
line-height: 1.5;
}
h1 {
color: #261b23;
margin-bottom: 0.5rem;
}
.subtitle {
color: #6b7280;
margin-bottom: 2rem;
}
.section {
margin-bottom: 3rem;
}
.section h2 {
color: #261b23;
font-size: 1.25rem;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #dc143c;
}
.section p {
color: #6b7280;
font-size: 0.875rem;
margin-bottom: 1rem;
}
pre {
background: #261b23;
color: #f8f9fa;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
margin: 0 0 1rem 0;
}
pre code {
font-family: ui-monospace, monospace;
font-size: 0.875rem;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.demo-item {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.note {
background: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 1rem;
margin: 1rem 0;
font-size: 0.875rem;
border-radius: 0 8px 8px 0;
}
</style>
</head>
<body>
<h1>@rubyevents/embeds</h1>
<p class="subtitle">Embeddable web components for displaying Ruby conference content</p>
<div class="note">
<strong>Note:</strong> These components fetch data from the RubyEvents API.
In development, you may need to run the Rails server with CORS enabled,
or update the <code>base-url</code> attribute to point to a running instance.
</div>
<div class="section">
<h2>Talk Component</h2>
<p>Display a single talk with video thumbnail, speakers, and event info.</p>
<pre><code><rubyevents-talk slug="keynote-rubyllm" show-footer></rubyevents-talk></code></pre>
<div class="demo-item">
<rubyevents-talk slug="keynote-rubyllm" base-url="http://localhost:3000" show-footer></rubyevents-talk>
</div>
</div>
<div class="section">
<h2>Speaker Component</h2>
<p>Display a speaker profile with their talks and events.</p>
<pre><code><rubyevents-speaker slug="tenderlove" tab="talks"></rubyevents-speaker></code></pre>
<div class="demo-item">
<rubyevents-speaker slug="tenderlove" tab="talks" base-url="http://localhost:3000"></rubyevents-speaker>
</div>
</div>
<div class="section">
<h2>Topic Component</h2>
<p>Display talks for a specific topic.</p>
<pre><code><rubyevents-topic slug="truffleruby" limit="10"></rubyevents-topic></code></pre>
<div class="demo-item">
<rubyevents-topic slug="truffleruby" limit="10" base-url="http://localhost:3000"></rubyevents-topic>
</div>
</div>
<div class="section">
<h2>Events Component</h2>
<p>Display a list of upcoming or past events.</p>
<pre><code><rubyevents-events filter="upcoming" show-filter></rubyevents-events></code></pre>
<div class="demo-item">
<rubyevents-events filter="upcoming" show-filter base-url="http://localhost:3000"></rubyevents-events>
</div>
</div>
<div class="section">
<h2>Event Component</h2>
<p>Display a single event with details, stats, and participant avatars.</p>
<pre><code><rubyevents-event slug="rubyconf-2024" show-participants></rubyevents-event></code></pre>
<div class="demo-item">
<rubyevents-event slug="rubyconf-2024" show-participants base-url="http://localhost:3000"></rubyevents-event>
</div>
</div>
<div class="section">
<h2>Profile Component</h2>
<p>Display a user profile with attending events and watch lists.</p>
<pre><code><rubyevents-profile slug="chaelcodes"></rubyevents-profile></code></pre>
<div class="demo-item">
<rubyevents-profile slug="chaelcodes" base-url="http://localhost:3000"></rubyevents-profile>
</div>
</div>
<div class="section">
<h2>Participants Component</h2>
<p>Display participants/attendees of an event.</p>
<pre><code><rubyevents-participants slug="sfruby-2025" show-tabs></rubyevents-participants></code></pre>
<div class="demo-item">
<rubyevents-participants slug="sfruby-2025" show-tabs base-url="http://localhost:3000"></rubyevents-participants>
</div>
<p>Compact mode with small avatars, no names, no groups.</p>
<pre><code><rubyevents-participants slug="sfruby-2025" compact></rubyevents-participants></code></pre>
<div class="demo-item">
<rubyevents-participants slug="sfruby-2025" compact base-url="http://localhost:3000"></rubyevents-participants>
</div>
</div>
<div class="section">
<h2>Passport Component</h2>
<p>Display a user's stamps in a passport/stamp book style layout.</p>
<pre><code><rubyevents-passport slug="chaelcodes"></rubyevents-passport></code></pre>
<div class="demo-item">
<rubyevents-passport slug="chaelcodes" base-url="http://localhost:3000"></rubyevents-passport>
</div>
</div>
<div class="section">
<h2>Stickers Component</h2>
<p>Display a user's stickers on a MacBook-style laptop lid.</p>
<pre><code><rubyevents-stickers slug="chaelcodes"></rubyevents-stickers></code></pre>
<div class="demo-item">
<rubyevents-stickers slug="chaelcodes" base-url="http://localhost:3000"></rubyevents-stickers>
</div>
</div>
<script type="module">
import './dist/rubyevents-embeds.js';
// Automatically use rubyevents.org when not on localhost
const baseUrl = (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
? 'http://localhost:3000'
: 'https://www.rubyevents.org';
// Set base-url on all components
document.querySelectorAll('[base-url]').forEach(el => {
el.setAttribute('base-url', baseUrl);
});
</script>
</body>
</html>