fix: merge conflicts

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/pre-release.yml

@@ -0,0 +1,24 @@
+name: Publish Experimental Release
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build:lib
+
+      - run: pnpx pkg-pr-new publish '.' --template './__tests__/examples/*'

.gitignore

@@ -2,4 +2,8 @@ node_modules
 dist
 .DS_Store
 dump
-static
+static
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

CONTRIBUTING.md

@@ -0,0 +1,48 @@
+# CONTRIBUTING 🤗
+
+bsky-widget is an open-source project and welcomes contributions from external contributors.
+
+> [!TIP]
+>
+> If you have any feature requests, or major enhancements in your mind, do create a GitHub Issue first so that the feature and its approach can be discussed before you spend your time in creating PR
+
+
+### Local Setup
+
+#### 1. Installing Dependencies
+
+_We use [pnpm](https://pnpm.io/) to manage dependencies. Make sure you have the latest pnpm installed_
+
+```sh
+pnpm install
+```
+
+#### 2. Common Commands
+
+##### Local Development
+
+```sh
+pnpm dev # Runs the playground with your local version of bsky-widget component from `lib` directory
+```
+
+##### Local Builds
+
+```sh
+pnpm build:lib # Builds library in `dist`
+pnpm build:playground # Builds playground in `static`
+pnpm build # Builds both
+```
+
+
+##### Tests
+
+_This project uses [playwright](https://playwright.dev/) image snapshots tests. You can run the test using following command_
+
+```sh
+pnpm test:e2e # Runs the playwright e2e test
+```
+
+
+---
+
+For any help, just create a github issue in this repo and I can help out.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Saurabh Daware
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,8 @@
-# Bluesky Profile Widget
+# Bluesky Widget
 
-Unofficial Bluesky Profile Cards for Bluesky Gang 🦋
+Unofficial Bluesky Profile Cards for Bluesky Friends 🦋
+
+**Card Generator UI: https://bsky-widget.saurabhdaware.in/**
 
 ## Usage
 
@@ -11,7 +13,7 @@ Unofficial Bluesky Profile Cards for Bluesky Gang 🦋
 </tr>
 
 <tr>
-<td width="50%">
+<td>
 
 ```html
 <!-- Paste in your CSS to avoid layout shift -->
@@ -65,6 +67,11 @@ import "bsky-widget";
 | data-show-description | hide / show your description / bio from profile                | "true" (default) or "false" |
 | data-show-banner      | hide / show your banner (only applicable if you have a banner) | "true" (default) or "false" |
 
+
+## CONTRIBUTING
+
+The project is open for contributions, you can check [CONTRIBUTING.md](./CONTRIBUTING.md) for more information on local setup and commands.
+
 ---
 
 Like my work? You can star this repo or you can sponsor me from [GitHub Sponsors @saurabhdaware](https://github.com/sponsors/saurabhdaware) ⭐️

__tests__/example.spec.ts

@@ -0,0 +1,31 @@
+// test.spec.ts
+import { test, expect, Page } from "@playwright/test";
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+test.describe.parallel("bsky-widget - Image Snapshot Test", () => {
+  test("should render the bsky-widget component", async ({
+    page,
+  }: {
+    page: Page;
+  }) => {
+    await page.goto("/test.html"); // Update with your test page path
+
+    await expect(page).toHaveTitle("E2E Test Page");
+
+    // Locate the bsky-widget component
+    const widgetElement = page.locator('bsky-widget[data-rendered="true"]');
+    const followers = widgetElement.locator(".followers");
+
+    // Check if the widget is visible
+    await expect(widgetElement).toBeVisible();
+
+    await sleep(2000);
+    await expect(page).toHaveScreenshot("baseline.png", {
+      mask: [followers],
+      maxDiffPixelRatio: 0.1,
+    });
+  });
+});

__tests__/examples/default/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

__tests__/examples/default/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+</head>
+
+<body>
+  <bsky-widget data-handle="patak.dev"></bsky-widget>
+  <script type="module" src="/node_modules/bsky-widget/dist/index.js"></script>
+</body>
+
+</html>

__tests__/examples/default/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "default",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "bsky-widget": "*"
+  },
+  "devDependencies": {
+    "vite": "^5.4.10"
+  }
+}

__tests__/examples/default/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [],
+});

__tests__/examples/react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

__tests__/examples/react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

__tests__/examples/react/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "bsky-widget": "*"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "vite": "^5.4.10"
+  }
+}

__tests__/examples/react/src/App.jsx

@@ -0,0 +1,7 @@
+import "bsky-widget";
+
+function App() {
+  return <bsky-widget data-handle="danabra.mov"></bsky-widget>;
+}
+
+export default App;

__tests__/examples/react/src/main.jsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

__tests__/examples/react/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

__tests__/examples/vue-template/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?