docs: add official site

.gitignore

@@ -42,3 +42,5 @@ keys.json
 
 key.json
 publish_keys.json
+
+docs/.vitepress/cache

docs/.vitepress/config.mts

@@ -0,0 +1,40 @@
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Sky Follower Bridge",
+  description: "Official Documentation of Sky Follower Bridge",
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: {
+      src: "/images/logo.png",
+      alt: "Sky Follower Bridge Logo",
+    },
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Getting Started", link: "/get-started" },
+      { text: "Troubleshooting", link: "/troubleshooting" },
+    ],
+
+    socialLinks: [
+      {
+        icon: "github",
+        link: "https://github.com/kawamataryo/sky-follower-bridge",
+      },
+    ],
+
+    outline: {
+      level: "deep",
+    },
+
+    editLink: {
+      pattern:
+        "https://github.com/kawamataryo/sky-follower-bridge/edit/main/docs/:path",
+      text: "Edit this page on GitHub",
+    },
+
+    search: {
+      provider: "local",
+    },
+  },
+});

docs/get-started.md

@@ -0,0 +1,66 @@
+# Getting Started
+
+Sky Follower Bridge helps you find and follow your X (Twitter) connections on Bluesky.
+
+## Installation
+
+Sky Follower Bridge is available on:
+
+- [Chrome Web Store](https://chrome.google.com/webstore/detail/sky-follower-bridge/behhbpbpmailcnfbjagknjngnfdojpko) (Recommended)
+- [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/sky-follower-bridge/)
+- [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/sky-follower-bridge/dpeolmdblhfolkhlhbhlofkkpaojnnbb)
+
+::: tip
+We recommend using the Chrome Web Store version as it's always up to date. Other store versions may lag behind in updates.
+:::
+
+## Usage
+
+### 1. Navigate to X (Twitter)
+
+Visit any of these pages on X:
+- Your Following page: `x.com/<your_handle>/following`
+- Your Blocked users page: `x.com/settings/blocked/all`
+- A public List's Members page: `x.com/i/lists/<list_id>/members`
+
+![following-page](./images/following-page.png)
+
+### 2. Launch Sky Follower Bridge
+
+Either press `Alt + B` or click the extension icon in your browser toolbar.
+
+![Open Extension](./images/open-extension.png)
+
+### 3. Sign in to Bluesky
+
+Enter your Bluesky handle (or email) and [App password](https://bsky.app/settings/app-passwords).
+
+![enter-credentials](./images/enter-credentials.png)
+
+
+### 4. Start the Search
+
+Click "Find Bluesky Users" to begin scanning. The extension will search for matching Bluesky profiles by checking the Bluesky API.
+
+![find-bluesky-users](./images/scan-users.png)
+
+### 5. Review Results
+
+Click "View Results" to see potential matches found on Bluesky.
+
+![view-results-button](./images/click-results.png)
+
+This will open the options page showing all detected Bluesky users.
+
+![options](./images/options.png)
+
+### 6. Follow Users
+
+Click the "Follow" button next to any user you'd like to connect with.
+That's all! Enjoy connecting with your community on Bluesky 🎉
+
+![follow](./images/click-follow-btn.png)
+
+::: warning
+Please note that the matching process isn't perfect and may occasionally suggest incorrect matches. Always verify the profile before following.
+:::

docs/index.md

@@ -0,0 +1,60 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Sky Follower Bridge"
+  text: "Bridge Your Social Networks"
+  tagline: Seamlessly migrate your social connections from 𝕏 to Bluesky
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /get-started
+    - theme: alt
+      text: Troubleshooting
+      link: /troubleshooting
+  image:
+    src: /images/logo.png
+    alt: Sky Follower Bridge Cover Image
+
+features:
+  - icon: 🔍
+    title: Automatic Profile Matching
+    details: Quickly find your Twitter connections on Bluesky using our smart profile matching system.
+  - icon: 🚀
+    title: Bulk Follow Feature
+    details: Save time by following multiple users at once with our "Follow All" button.
+  - icon: 📋
+    title: Multiple List Support
+    details: Works with Following, Followers, Blocked users lists, and even public Twitter Lists.
+  - icon: 🌐
+    title: Cross-Browser Support
+    details: Available on Chrome, Firefox, and Microsoft Edge for your convenience.
+---
+
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3399ff 30%, #0066cc);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #3399ff 50%, #0066cc 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+.VPImage.image-src {
+  max-width: 180px;
+  max-height: 180px;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+</style>

docs/troubleshooting.md

@@ -0,0 +1,101 @@
+# Troubleshooting Guide
+
+🚨 **WIP** 🚨
+
+## Authentication Errors
+
+### Login Issues
+
+**Error Message:**  
+"Error: Invalid identifier or password"
+
+**Checklist:**
+1. Username and Password Entry
+   - Check for any accidental spaces
+   - If copying and pasting, ensure no extra characters were included
+
+2. Username Format
+   - Correct format: `your-username.bsky.social`
+   - Common mistake: `your-username` (missing .bsky.social)
+
+3. Password Information
+   - We strongly recommend using an [App Password](https://bsky.app/settings/app-passwords) instead of your regular password
+   - App Password format: `xxxx-xxxx-xxxx-xxxx` (19 characters)
+   
+::: tip Helpful Tips
+Don't confuse the App Password with the "password name" shown in settings.
+How to create a new App Password:
+2. [Navigate to App Passwords section](https://bsky.app/settings/app-passwords)
+3. Click "Add App Password"
+4. Click "Create App Password"
+4. Copy the generated 19-character password
+:::
+
+### Two-Factor Authentication Required
+
+**Error Message:**  
+"Error: Two-factor authentication required"
+
+**Solution:**
+1. Check your email for the authentication code
+2. Enter the code in the 2FA input field
+3. Try logging in again
+
+## Rate Limit Errors
+
+**Error Message:**  
+"Rate limit Error" message appears
+- A "Restart" button is shown
+
+**Solution:**
+1. Bluesky API has a limit of 1,600 actions per hour. If you hit the limit, please wait for 1 hour before trying again.
+2. Click the "Restart" button to try again
+
+## Page Errors
+
+### Invalid Page
+
+**Error Message:**  
+"Error: Invalid page. please open the 𝕏 following or blocking or list page."
+
+**Solution:**
+Only use the extension on these X (Twitter) pages:
+- Following page (`x.com/<your_handle>/following`)
+- Blocking page (`x.com/settings/blocked/all`)
+- List members page (`x.com/i/lists/<list_id>/members`)
+
+## Scanning Issues
+
+### Scan Stops Early
+
+**Error Message:**  
+Scanning stops before reaching the bottom of the page
+
+**Solution:**
+1. Click "Resume Scanning" to continue
+2. The scan will automatically stop when it reaches the bottom of the page
+3. You can click "Stop Scanning and View Results" at any time
+
+### No Users Found
+
+**Error Message:**  
+No Bluesky users detected after scanning
+
+**Solution:**
+1. Make sure you're logged in correctly
+2. Try scanning again - some users may not be detected on first pass
+3. Check if the X users have linked their Bluesky accounts in their profiles
+
+## Other Issues
+
+If you encounter any unexpected errors:
+
+1. Reload the page
+2. Try the operation again
+3. If the problem persists, you can either:
+   - [Create an issue](https://github.com/kawamataryo/sky-follower-bridge/issues) with:
+     - The exact error message
+     - What you were trying to do
+     - Your browser type and version
+     - Any relevant screenshots
+   - Or mention @kawamataryo.bsky.social on Bluesky

package.json

@@ -16,7 +16,10 @@
     "check:ci": "npx @biomejs/biome ci ./src",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "remove-permissions": "node scripts/remove_web_accessible_resources.js"
+    "remove-permissions": "node scripts/remove_web_accessible_resources.js",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
     "@atproto/api": "^0.13.12",
@@ -28,7 +31,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "ts-pattern": "^5.0.6",
-    "vanjs-core": "^1.2.8"
+    "vanjs-core": "^1.2.8",
+    "vitepress": "^1.5.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",

src/images/logo.svg

@@ -1,9 +0,0 @@
-<svg width="280" height="266" viewBox="0 0 280 266" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M111.625 111.5C96.3625 111.5 83.2969 106.066 72.4281 95.1969C61.5594 84.3281 56.125 71.2625 56.125 56C56.125 40.7375 61.5594 27.6719 72.4281 16.8031C83.2969 5.93438 96.3625 0.5 111.625 0.5C126.887 0.5 139.953 5.93438 150.822 16.8031C161.691 27.6719 167.125 40.7375 167.125 56C167.125 71.2625 161.691 84.3281 150.822 95.1969C139.953 106.066 126.887 111.5 111.625 111.5ZM255.925 261.35L221.237 226.663C216.381 229.438 211.178 231.75 205.628 233.6C200.078 235.45 194.181 236.375 187.937 236.375C170.594 236.375 155.854 230.302 143.718 218.157C131.582 206.012 125.509 191.272 125.5 173.938C125.5 156.594 131.573 141.849 143.718 129.704C155.863 117.559 170.603 111.491 187.937 111.5C205.281 111.5 220.026 117.573 232.171 129.718C244.316 141.863 250.384 156.603 250.375 173.938C250.375 180.181 249.45 186.078 247.6 191.628C245.75 197.178 243.437 202.381 240.662 207.238L275.35 241.925C277.894 244.469 279.166 247.706 279.166 251.638C279.166 255.569 277.894 258.806 275.35 261.35C272.806 263.894 269.569 265.166 265.637 265.166C261.706 265.166 258.469 263.894 255.925 261.35ZM187.937 208.625C197.65 208.625 205.859 205.272 212.566 198.566C219.272 191.859 222.625 183.65 222.625 173.938C222.625 164.225 219.272 156.016 212.566 149.309C205.859 142.603 197.65 139.25 187.937 139.25C178.225 139.25 170.016 142.603 163.309 149.309C156.603 156.016 153.25 164.225 153.25 173.938C153.25 183.65 156.603 191.859 163.309 198.566C170.016 205.272 178.225 208.625 187.937 208.625ZM28.375 222.5C20.7437 222.5 14.2086 219.781 8.76962 214.342C3.33062 208.903 0.615743 202.372 0.624993 194.75V183.997C0.624993 176.134 2.59062 168.85 6.52187 162.144C10.4531 155.438 15.8875 150.35 22.825 146.881C34.6187 140.869 47.9156 135.781 62.7156 131.619C77.5156 127.456 93.9344 125.375 111.972 125.375C107.347 132.544 103.818 140.235 101.385 148.449C98.9525 156.663 97.7407 165.159 97.75 173.938C97.75 182.494 98.9664 190.879 101.399 199.093C103.832 207.307 107.351 215.109 111.958 222.5H28.375Z" fill="url(#paint0_linear_617_24)"/>
-<defs>
-<linearGradient id="paint0_linear_617_24" x1="18.5" y1="139" x2="246" y2="142.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1D99F0"/>
-<stop offset="1" stop-color="#1D52DA"/>
-</linearGradient>
-</defs>
-</svg>