Skip to content

Commit df6e303

Browse files
saurabhdawaresaurabhdaware
committed
feat: add dark, dim, auto modes. change follow count formatting
1 parent 862da58 commit df6e303

File tree

8 files changed

+311
-264
lines changed

8 files changed

+311
-264
lines changed

‎index.html

Lines changed: 216 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,233 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta property="og:type" content="website" />
7+
<meta
8+
property="og:title"
9+
content="Bluesky Widget: Profile Card Generator for Bluesky Profiles 🦋"
10+
/>
11+
<meta
12+
property="og:image:secure_url"
13+
itemprop="image"
14+
content="https://res.cloudinary.com/saurabhdaware/image/upload/v1731083346/saurabh2025/bsky-widget-og-v2.png"
15+
/>
16+
<meta
17+
property="og:image"
18+
itemprop="image"
19+
content="https://res.cloudinary.com/saurabhdaware/image/upload/v1731083346/saurabh2025/bsky-widget-og-v2.png"
20+
/>
21+
<meta property="og:image:width" content="1280" />
22+
<meta property="og:image:height" content="640" />
323

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta property="og:type" content="website" />
8-
<meta property="og:title" content="Bluesky Widget: Profile Card Generator for Bluesky Profiles 🦋">
9-
<meta property="og:image:secure_url" itemprop="image"
10-
content="https://res.cloudinary.com/saurabhdaware/image/upload/v1731083346/saurabh2025/bsky-widget-og-v2.png">
11-
<meta property="og:image" itemprop="image"
12-
content="https://res.cloudinary.com/saurabhdaware/image/upload/v1731083346/saurabh2025/bsky-widget-og-v2.png">
13-
<meta property="og:image:width" content="1280" />
14-
<meta property="og:image:height" content="640" />
24+
<meta name="twitter:card" content="summary_large_image" />
25+
<meta name="twitter:creator" content="@saurabhdawaree" />
1526

16-
<meta name="twitter:card" content="summary_large_image">
17-
<meta name="twitter:creator" content="@saurabhdawaree">
27+
<title>
28+
Bluesky Widget: Profile Card Generator for Bluesky Profiles 🦋
29+
</title>
30+
<meta
31+
name="description"
32+
content="Bluesky Widget: Cute Bluesky Profile Cards for your websites!!"
33+
/>
34+
<link rel="icon" type="image/png" sizes="32x32" href="/bsky-icon-32.png" />
35+
<link rel="stylesheet" href="./playground/playground.css" />
36+
<link
37+
rel="stylesheet"
38+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
39+
/>
40+
</head>
1841

42+
<body>
43+
<main class="page-container">
44+
<div class="sidebar">
45+
<div class="title">
46+
<h1>
47+
<span
48+
><img width="42px" src="/bluesky-logo.svg" alt="Bluesky Logo"
49+
/></span>
50+
<span>Bluesky Widget</span>
51+
</h1>
52+
</div>
53+
<section class="form-wrapper">
54+
<form id="generator-form" class="form-container">
55+
<div class="input-container">
56+
<label for="handle">Handle</label>
57+
<input
58+
name="handle"
59+
placeholder="saurabhd.bsky.social"
60+
value="saurabhd.bsky.social"
61+
type="text"
62+
id="handle"
63+
/>
64+
</div>
1965

20-
<title>Bluesky Widget: Profile Card Generator for Bluesky Profiles 🦋</title>
21-
<meta name="description" content="Bluesky Widget: Cute Bluesky Profile Cards for your websites!!" />
22-
<link rel="icon" type="image/png" sizes="32x32" href="/bsky-icon-32.png">
23-
<link rel="stylesheet" href="./playground/playground.css" />
24-
</head>
25-
26-
<body>
27-
<main class="page-container">
28-
<div class="sidebar">
29-
<div class="title">
30-
<h1>
31-
<span><img width="42px" src="/bluesky-logo.svg" alt="Bluesky Logo" /></span>
32-
<span>Bluesky Widget</span>
33-
</h1>
34-
</div>
35-
<section class="form-wrapper">
36-
<form id="generator-form" class="form-container">
37-
<div class="input-container">
38-
<label for="handle">Handle</label>
39-
<input name="handle" placeholder="saurabhd.bsky.social" value="saurabhd.bsky.social" type="text"
40-
id="handle" />
41-
</div>
4266

43-
<div style="display: flex;gap: 24px;">
44-
<div class="input-container checkbox-container">
45-
<label for="show-description">Show Description</label>
46-
<label class="switch">
47-
<input name="description" id="show-description" checked type="checkbox">
48-
<span class="slider"></span>
49-
</label>
67+
<div class="input-container">
68+
<label for="theme">Theme</label>
69+
<div class="select-container">
70+
<select
71+
name="theme"
72+
id="theme"
73+
>
74+
<option value="light" selected>light</option>
75+
<option value="dark">dark</option>
76+
<option value="dim">dim</option>
77+
<option value="auto">auto</option>
78+
<option value="auto-dim">auto-dim (use dim in dark mode)</option>
79+
</select>
80+
</div>
5081
</div>
51-
<div class="input-container checkbox-container">
52-
<label for="show-banner">Show Banner</label>
53-
<label class="switch">
54-
<input name="banner" id="show-banner" checked type="checkbox">
55-
<span class="slider"></span>
56-
</label>
82+
83+
<div style="display: flex; gap: 24px">
84+
<div class="input-container checkbox-container">
85+
<label for="show-description">Show Description</label>
86+
<label class="switch">
87+
<input
88+
name="description"
89+
id="show-description"
90+
checked
91+
type="checkbox"
92+
/>
93+
<span class="slider"></span>
94+
</label>
95+
</div>
96+
<div class="input-container checkbox-container">
97+
<label for="show-banner">Show Banner</label>
98+
<label class="switch">
99+
<input
100+
name="banner"
101+
id="show-banner"
102+
checked
103+
type="checkbox"
104+
/>
105+
<span class="slider"></span>
106+
</label>
107+
</div>
57108
</div>
109+
<button class="button generate-button" type="submit">
110+
Generate
111+
</button>
112+
</form>
113+
</section>
114+
</div>
115+
<div class="preview-code-container">
116+
<section class="preview-code">
117+
<div class="preview">
118+
<bsky-widget
119+
data-handle=""
120+
data-show-description="false"
121+
data-show-banner="false"
122+
></bsky-widget>
58123
</div>
59-
<button class="button generate-button" type="submit">Generate</button>
60-
</form>
61-
</section>
62-
</div>
63-
<div class="preview-code-container">
64-
<section class="preview-code">
65-
<div class="preview">
66-
<bsky-widget data-handle="" data-show-description="false" data-show-banner="false"></bsky-widget>
67-
</div>
68-
<div class="code-section">
69-
<div class="code-output">
70-
<pre><code class="language-html"></code></pre>
71-
<button class="copy-button">Copy</button>
124+
<div class="code-section">
125+
<div class="code-output">
126+
<pre><code class="language-html"></code></pre>
127+
<button class="copy-button">Copy</button>
128+
</div>
72129
</div>
73-
</div>
74-
</section>
75-
76-
<section class="docs-container share-container">
77-
<div style="text-align: right;">
78-
<a id="bsky-share-button" class="bsky-share-button button" target="_blank" rel="noreferrer noopener"
79-
href="https://bsky.app/intent/compose?text=Check out the Bluesky Widget Card at https://bsky-widget.saurabhdaware.in/">
80-
<img width="20px" src="/bluesky-logo.svg" alt="Bluesky Logo" />
81-
<span>Share with Bluesky Frens 🤗</span>
82-
</a>
83-
</div>
84-
</section>
85-
86-
<section class="docs-container">
87-
<h2>Examples</h2>
88-
<h3>In Vanilla Project</h3>
89-
<div class="sb-embed" id="stackblitz-vanilla-project"></div>
130+
</section>
90131

91-
<h3>In Frameworks</h3>
92-
<div class="sb-embed" id="stackblitz-framework-project"></div>
93-
</section>
132+
<section class="docs-container share-container">
133+
<div style="text-align: right">
134+
<a
135+
id="bsky-share-button"
136+
class="bsky-share-button button"
137+
target="_blank"
138+
rel="noreferrer noopener"
139+
href="https://bsky.app/intent/compose?text=Check out the Bluesky Widget Card at https://bsky-widget.saurabhdaware.in/"
140+
>
141+
<img width="20px" src="/bluesky-logo.svg" alt="Bluesky Logo" />
142+
<span>Share with Bluesky Frens 🤗</span>
143+
</a>
144+
</div>
145+
</section>
94146

95-
<footer class="docs-container">
96-
<div class="footer-line-1">
97-
Butterfly effect on logo by <a target="_blank"
98-
href="https://flutterby.philhawksworth.dev/">@philhawksworth</a>
99-
</div>
100-
<div class="footer-line-2">
101-
Built with <a target="_blank" href="https://vite.dev">Vite</a>, <a target="_blank"
102-
href="https://abelljs.org">Abell</a>, <a target="_blank"
103-
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> and <a
104-
href="https://youtu.be/dBUxfFoQpuo?si=RhXnApKmRYADA8YX&t=36" target="_blank">Love</a> by <a
105-
href="https://github.com/saurabhdaware/bsky-widget/graphs/contributors" target="_blank">GitHub
106-
Contributors</a>
107-
</div>
147+
<section class="docs-container">
148+
<h2>Examples</h2>
149+
<h3>In Vanilla Project</h3>
150+
<div class="sb-embed" id="stackblitz-vanilla-project"></div>
108151

109-
<div class="footer-line-3">
110-
Copyright © 2024 <a target="_blank" href="https://saurabhd.bsky.social">Saurabh Daware</a>.
111-
</div>
112-
113-
</footer>
114-
</div>
115-
</main>
152+
<h3>In Frameworks</h3>
153+
<div class="sb-embed" id="stackblitz-framework-project"></div>
154+
</section>
116155

156+
<footer class="docs-container">
157+
<div class="footer-line-1">
158+
Butterfly effect on logo by
159+
<a target="_blank" href="https://flutterby.philhawksworth.dev/"
160+
>@philhawksworth</a
161+
>
162+
</div>
163+
<div class="footer-line-2">
164+
Built with <a target="_blank" href="https://vite.dev">Vite</a>,
165+
<a target="_blank" href="https://abelljs.org">Abell</a>,
166+
<a
167+
target="_blank"
168+
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"
169+
>Web Components</a
170+
>
171+
and
172+
<a
173+
href="https://youtu.be/dBUxfFoQpuo?si=RhXnApKmRYADA8YX&t=36"
174+
target="_blank"
175+
>Love</a
176+
>
177+
by
178+
<a
179+
href="https://github.com/saurabhdaware/bsky-widget/graphs/contributors"
180+
target="_blank"
181+
>GitHub Contributors</a
182+
>
183+
</div>
117184

118-
<a href="https://github.com/saurabhdaware/bsky-widget" target="_blank" class="github-corner"
119-
aria-label="View source on GitHub">
120-
<svg class="octo" width="80" height="80" viewBox="0 0 250 250"
121-
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
122-
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
123-
<path
124-
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
125-
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
126-
<path
127-
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
128-
fill="currentColor" class="octo-body"></path>
129-
</svg>
130-
</a>
131-
<script type="module" src="./lib/index.ts"></script>
132-
<script type="module" src="./playground/main.ts"></script>
133-
</body>
185+
<div class="footer-line-3">
186+
Copyright © 2024
187+
<a target="_blank" href="https://saurabhd.bsky.social"
188+
>Saurabh Daware</a
189+
>.
190+
</div>
191+
</footer>
192+
</div>
193+
</main>
134194

135-
</html>
195+
<a
196+
href="https://github.com/saurabhdaware/bsky-widget"
197+
target="_blank"
198+
class="github-corner"
199+
aria-label="View source on GitHub"
200+
>
201+
<svg
202+
class="octo"
203+
width="80"
204+
height="80"
205+
viewBox="0 0 250 250"
206+
style="
207+
fill: #151513;
208+
color: #fff;
209+
position: absolute;
210+
top: 0;
211+
border: 0;
212+
right: 0;
213+
"
214+
aria-hidden="true"
215+
>
216+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
217+
<path
218+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
219+
fill="currentColor"
220+
style="transform-origin: 130px 106px"
221+
class="octo-arm"
222+
></path>
223+
<path
224+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
225+
fill="currentColor"
226+
class="octo-body"
227+
></path>
228+
</svg>
229+
</a>
230+
<script type="module" src="./lib/index.ts"></script>
231+
<script type="module" src="./playground/main.ts"></script>
232+
</body>
233+
</html>

‎lib/card.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ class ProfileCard extends HTMLElement {
6464
}
6565

6666
static get observedAttributes(): string[] {
67-
return ["data-handle", "data-show-description", "data-show-banner"];
67+
return ["data-handle", "data-show-description", "data-show-banner", "theme"];
6868
}
6969

7070
attributeChangedCallback(
@@ -78,7 +78,6 @@ class ProfileCard extends HTMLElement {
7878
) &&
7979
oldValue !== newValue
8080
) {
81-
this.setCardDefaultBounds();
8281
this.connectedCallback();
8382
}
8483
}

0 commit comments

Comments
 (0)