Skip to content

Commit 41c6782

Browse files
saurabhdawaresaurabhdaware
authored
feat: v0.1.0 - theming, style overrides, ui cleanup (#11)
feat: v0.1.0 (theming, ui cleanup, style override support)
2 parents 26d0c9b + 9be569d commit 41c6782

22 files changed

+576
-252
lines changed

‎README.md

+45-8
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ Unofficial Bluesky Profile Cards for Bluesky Friends 🦋
2525
</style>
2626

2727
<!-- Paste wherever you want to render the card -->
28-
<bsky-widget data-handle="patak.dev"></bsky-widget>
28+
<bsky-widget handle="patak.dev"></bsky-widget>
2929

3030
<!-- Paste before end of body -->
3131
<script
32-
src="https://unpkg.com/bsky-widget@~0.0/dist/index.js"
32+
src="https://unpkg.com/bsky-widget@~0.1/dist/index.js"
3333
type="module"
3434
></script>
3535
```
@@ -56,16 +56,53 @@ npm install bsky-widget@latest --save
5656
```jsx
5757
import "bsky-widget";
5858

59-
<bsky-widget data-handle="srbh.dev"></bsky-widget>;
59+
<bsky-widget handle="srbh.dev"></bsky-widget>;
6060
```
6161

6262
## Props
6363

64-
| Prop | Description | Example value |
65-
| :-------------------- | :------------------------------------------------------------- | :-------------------------- |
66-
| data-handle | handle of your bluesky account | "srbh.dev" |
67-
| data-show-description | hide / show your description / bio from profile | "true" (default) or "false" |
68-
| data-show-banner | hide / show your banner (only applicable if you have a banner) | "true" (default) or "false" |
64+
| Prop | Description | Example value |
65+
| :--------------- | :------------------------------------------------------------- | :-------------------------- |
66+
| handle | handle of your bluesky account | "srbh.dev" |
67+
| show-description | hide / show your description / bio from profile | "true" (default) or "false" |
68+
| show-banner | hide / show your banner (only applicable if you have a banner) | "true" (default) or "false" |
69+
| theme | theme of the card (`dark`, `dim`, `auto`, `auto-dim`, `light`) | "light" |
70+
71+
72+
## Override Styles
73+
74+
You can go ahead and override any of these styles to customize your card further, create custom themes, or adjust the card in your website's layout
75+
76+
```css
77+
bsky-widget {
78+
--bsky-background: #fff;
79+
--bsky-primary: #1185fe;
80+
--bsky-primary-hover: #4ca2fe;
81+
--bsky-text-on-primary: #fff;
82+
--bsky-text-on-background: #0b0f14;
83+
--bsky-text-on-background-subtle: #42576c;
84+
--bsky-text-large: 1.4rem;
85+
--bsky-text-large-line-height: 1.8rem;
86+
--bsky-text-medium: 1rem;
87+
--bsky-text-small: 0.9rem;
88+
89+
font-family: Arial, Helvetica, sans-serif, -apple-system, sans-serif;
90+
width: 350px;
91+
max-width: 100%;
92+
min-height: 170px;
93+
display: inline-block;
94+
box-shadow: 1px 1px 8px 1px #0002;
95+
border-radius: 8px;
96+
}
97+
```
98+
99+
## Migration from v0.0 -> v0.1
100+
101+
> [!Note]
102+
>
103+
> You are using v0.0 already? no worries! It's a no breaking change release. Click the link below to see how you can migrate to new version and enjoy new features 🚀
104+
105+
Check out the release notes at [v0.1 Release Notes](https://github.com/saurabhdaware/bsky-widget/releases/tag/v0.1.0)
69106

70107

71108
## CONTRIBUTING

‎__tests__/example.spec.ts-snapshots/baseline-Mobile-Safari-darwin.png

-90.8 KB
Binary file not shown.

‎__tests__/example.spec.ts-snapshots/baseline-chromium-darwin.png

-81 KB
Binary file not shown.

‎__tests__/examples/default/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99

1010
<body>
11-
<bsky-widget data-handle="patak.dev"></bsky-widget>
11+
<bsky-widget handle="patak.dev"></bsky-widget>
1212
<script type="module" src="/node_modules/bsky-widget/dist/index.js"></script>
1313
</body>
1414

‎__tests__/examples/react/src/App.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "bsky-widget";
22

33
function App() {
4-
return <bsky-widget data-handle="danabra.mov"></bsky-widget>;
4+
return <bsky-widget handle="danabra.mov"></bsky-widget>;
55
}
66

77
export default App;

‎__tests__/examples/vue-template/index.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + Vue</title>
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
body {
13+
padding: 10px;
14+
background-color: #111;
15+
}
16+
</style>
817
</head>
918
<body>
1019
<div id="app"></div>

‎__tests__/examples/vue-template/src/App.vue

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<script setup lang="ts">
2-
import "bsky-widget";
2+
import 'bsky-widget';
33
</script>
44

55
<template>
6-
<bsky-widget data-handle="vuejs.org"></bsky-widget>
6+
<bsky-widget handle="vuejs.org" theme="dim"></bsky-widget>
77
</template>
88

99
<style scoped>
1010
bsky-widget {
1111
min-height: 300px;
1212
width: 350px;
13+
box-shadow: 1px 1px 8px 1px #4ecb93;
14+
15+
/* theme override */
16+
--bsky-primary: #41b883;
17+
--bsky-primary-hover: #4ecb93;
1318
}
1419
</style>

‎__tests__/example.spec.ts ‎__tests__/render.spec.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ test.describe.parallel("bsky-widget - Image Snapshot Test", () => {
1616
await expect(page).toHaveTitle("E2E Test Page");
1717

1818
// Locate the bsky-widget component
19-
const widgetElement = page.locator('bsky-widget[data-rendered="true"]');
19+
const widgetElement = page.locator('.widgets-container');
2020
const followers = widgetElement.locator(".followers");
2121

2222
// Check if the widget is visible
@@ -25,7 +25,8 @@ test.describe.parallel("bsky-widget - Image Snapshot Test", () => {
2525
await sleep(2000);
2626
await expect(page).toHaveScreenshot("baseline.png", {
2727
mask: [followers],
28-
maxDiffPixelRatio: 0.1,
28+
maxDiffPixelRatio: 0.02,
29+
fullPage: true,
2930
});
3031
});
3132
});

‎__tests__/render.spec.ts-snapshots/baseline-Mobile-Safari-darwin.png

359 KB
Loading

‎__tests__/render.spec.ts-snapshots/baseline-chromium-darwin.png

207 KB
Loading

0 commit comments

Comments
 (0)