byarielm.fyi / atlast
ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto
fork atom

chore(docs): remove contrib its outdated, update readme

byarielm.fyi 2dc77b3e 43e13713

verified
+1 -333
unified split
-330
CONTRIBUTING.md
··· 1 - # Contributing to ATlast 2 - 3 - Thank you for your interest in contributing! This guide will help you get started with local development. 4 - 5 - ## Two Development Modes 6 - 7 - We support two development modes: 8 - 9 - 🎨 **Mock Mode** (No backend required) 10 - **Best for:** Frontend development, UI/UX work, design changes 11 - 12 - 🔧 **Full Mode** (Complete backend) 13 - **Best for:** Backend development, API work, OAuth testing, database changes 14 - 15 - **Requirements:** 16 - - PostgreSQL database (local or Neon) 17 - - OAuth keys 18 - - Environment configuration 19 - 20 - --- 21 - 22 - ## Mock Mode Starting Guide 23 - 24 - Perfect for frontend contributors who want to jump in quickly! 25 - 26 - 1. Clone and Install 27 - ```bash 28 - git clone <repo-url> 29 - cd atlast 30 - pnpm install 31 - ``` 32 - 33 - 2. Create .env.local 34 - ```bash 35 - # .env.mock 36 - VITE_LOCAL_MOCK=true 37 - VITE_ENABLE_OAUTH=false 38 - VITE_ENABLE_DATABASE=false 39 - ``` 40 - 41 - 3. Start Development 42 - ```bash 43 - pnpm run dev:mock 44 - ``` 45 - 46 - 4. Open Your Browser 47 - Go to `http://localhost:5173` 48 - 49 - 5. "Login" with Mock User 50 - Enter any handle - it will create a mock session. 51 - 52 - 6. Upload Test Data 53 - Upload your TikTok or Instagram data file. The mock API will generate fake matches for testing the UI. 54 - 55 - --- 56 - 57 - ## Full Mode Starting Guide 58 - 59 - For contributors working on backend features, OAuth, or database operations. 60 - 61 - ### Prerequisites 62 - 63 - - Node.js 18+ 64 - - pnpm (install with `npm install -g pnpm`) 65 - - PostgreSQL (or Neon account) 66 - - OpenSSL (for key generation) 67 - 68 - 1. Clone and Install 69 - ```bash 70 - git clone <repo-url> 71 - cd atlast 72 - pnpm install 73 - ``` 74 - 75 - 2. Database Setup 76 - 77 - **Option A: Neon (Recommended)** 78 - 1. Create account at https://neon.tech 79 - 2. Create project "atlast-dev" 80 - 3. Copy connection string 81 - 82 - **Option B: Local PostgreSQL** 83 - ```bash 84 - # macOS 85 - brew install postgresql@15 86 - brew services start postgresql@15 87 - createdb atlast_dev 88 - 89 - # Ubuntu 90 - sudo apt install postgresql 91 - sudo systemctl start postgresql 92 - sudo -u postgres createdb atlast_dev 93 - ``` 94 - 95 - 3. Generate OAuth Keys 96 - ```bash 97 - # Generate private key 98 - openssl ecparam -name prime256v1 -genkey -noout -out private-key.pem 99 - 100 - # Extract public key 101 - openssl ec -in private-key.pem -pubout -out public-key.pem 102 - 103 - # View private key (copy for .env) 104 - cat private-key.pem 105 - ``` 106 - 107 - 4. Extract Public Key JWK 108 - ```bash 109 - node -e " 110 - const fs = require('fs'); 111 - const jose = require('jose'); 112 - const pem = fs.readFileSync('public-key.pem', 'utf8'); 113 - jose.importSPKI(pem, 'ES256').then(key => { 114 - return jose.exportJWK(key); 115 - }).then(jwk => { 116 - console.log(JSON.stringify(jwk, null, 2)); 117 - }); 118 - " 119 - ``` 120 - 121 - 5. Update netlify/functions/jwks.ts 122 - 123 - Replace `PUBLIC_JWK` with the output from step 4. 124 - 125 - 6. Create .env 126 - 127 - ```bash 128 - VITE_LOCAL_MOCK=false 129 - VITE_API_BASE=/.netlify/functions 130 - 131 - # Database (choose one) 132 - NETLIFY_DATABASE_URL=postgresql://user:pass@host/db # Neon 133 - # NETLIFY_DATABASE_URL=postgresql://localhost/atlast_dev # Local 134 - 135 - # OAuth (paste your private key) 136 - OAUTH_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_KEY_HERE\n-----END PRIVATE KEY-----" 137 - 138 - # Local URLs (MUST use 127.0.0.1 for OAuth) 139 - URL=http://127.0.0.1:8888 140 - DEPLOY_URL=http://127.0.0.1:8888 141 - DEPLOY_PRIME_URL=http://127.0.0.1:8888 142 - CONTEXT=dev 143 - ``` 144 - 145 - 7. Initialize Database 146 - ```bash 147 - pnpm run init-db 148 - ``` 149 - 150 - 8. Start Development Server 151 - ```bash 152 - npx netlify-cli dev --filter @atlast/web 153 - # Or use the alias: 154 - pnpm run dev 155 - ``` 156 - 157 - 9. Test OAuth 158 - 159 - 1. Open `http://127.0.0.1:8888` (NOT localhost) 160 - 2. Enter your real Bluesky handle 161 - 3. Authorize the app 162 - 4. You should be redirected back and logged in 163 - 164 - --- 165 - 166 - ## Project Structure 167 - 168 - **Monorepo using pnpm workspaces:** 169 - 170 - ``` 171 - atlast/ 172 - ├── packages/ 173 - │ ├── web/ # Frontend React app 174 - │ │ ├── src/ 175 - │ │ │ ├── assets/ # Logo 176 - │ │ │ ├── components/ # UI components (React) 177 - │ │ │ ├── pages/ # Page components 178 - │ │ │ ├── hooks/ # Custom hooks 179 - │ │ │ ├── lib/ 180 - │ │ │ │ ├── api/ # API client (real + mock) 181 - │ │ │ │ ├── parsers/ # File parsing logic 182 - │ │ │ │ └── config.ts # Environment config 183 - │ │ │ └── types/ # TypeScript types 184 - │ │ └── package.json 185 - │ ├── functions/ # Netlify serverless functions 186 - │ │ ├── src/ 187 - │ │ │ ├── core/ # Middleware, types, config 188 - │ │ │ ├── infrastructure/ # Database, OAuth, cache 189 - │ │ │ ├── services/ # Business logic 190 - │ │ │ ├── repositories/ # Data access layer 191 - │ │ │ └── utils/ # Shared utilities 192 - │ │ └── package.json 193 - │ ├── extension/ # Browser extension 194 - │ │ ├── src/ 195 - │ │ │ ├── content/ # Content scripts, scrapers 196 - │ │ │ ├── popup/ # Extension popup UI 197 - │ │ │ ├── background/ # Service worker 198 - │ │ │ └── lib/ # Extension utilities 199 - │ │ └── package.json 200 - │ └── shared/ # Shared types (future) 201 - ├── pnpm-workspace.yaml 202 - └── netlify.toml 203 - ``` 204 - 205 - ### UI Color System 206 - 207 - | **Element** | **Light Mode** | **Dark Mode** | **Notes** | 208 - |:---:|:---:|:---:|:---:| 209 - | Text Primary | purple-950 | cyan-50 | Headings, labels | 210 - | Text Secondary | purple-750 | cyan-250 | Body text, descriptions | 211 - | Text Tertiary | purple-600 | cyan-400 | Metadata, hints, icons | 212 - | Borders (Rest) | cyan-500/30 | purple-500/30 | Cards, inputs default | 213 - | Borders (Hover) | cyan-400 | purple-400 | Interactive hover | 214 - | Borders (Active/Selected) | cyan-500 | purple-500 | Active tabs, selected items | 215 - | Backgrounds (Primary) | white | slate-900 | Modal/card base | 216 - | Backgrounds (Secondary) | purple-50 | slate-900 (nested sections) | Nested cards, sections | 217 - | Backgrounds (Selected) | cyan-50 | purple-950/30 | Selected platform cards | 218 - | Buttons Primary | orange-600 | orange-600 | CTAs | 219 - | Buttons Primary Hover | orange-500 | orange-500 | CTA hover | 220 - | Buttons Secondary | slate-600 | slate-700 | Cancel, secondary actions | 221 - | Buttons Secondary Hover | slate-700 | slate-600 | Secondary hover | 222 - | Interactive Selected | bg-cyan-50 border-cyan-500 | bg-purple-950/30 border-purple-500 | Platform selection cards | 223 - | Accent/Badge | orange-500 | orange-500 (or amber-500) | Match counts, checkmarks, progress | 224 - | Progress Complete | orange-500 | orange-500 | Completed progress bars | 225 - | Progress Incomplete | cyan-500/30 | purple-500/30 | Incomplete progress bars | 226 - | Success/Green | green-100/800 | green-900/300 | Followed status | 227 - | Error/Red | red-600 | red-400 | Logout, errors | 228 - 229 - ### UI Color System: Patterns 230 - **Disabled States**: 231 - - Light: Reduce opacity to 50%, use purple-500/50 232 - - Dark: Reduce opacity to 50%, use cyan-500/50 233 - 234 - **Success/Match indicators**: 235 - Both modes: amber-* or orange-* backgrounds with accessible text contrast 236 - 237 - **Tab Navigation**: 238 - - Inactive: Use text secondary colors 239 - - Active border: orange-500 (light), amber-500 (dark) 240 - - Active text: orange-650 (light), amber-400 (dark) 241 - 242 - **Gradient Banners**: 243 - - Both modes: from-amber-* via-orange-* to-pink-* (keep dramatic, adjust shades for mode) 244 - 245 - --- 246 - 247 - ## Task Workflows 248 - 249 - ### Adding a New Social Platform Parser 250 - 251 - 1. Add parsing rules to `packages/web/src/lib/parsers/platformDefinitions.ts` 252 - 2. Follow existing patterns (TikTok, Instagram) 253 - 3. Test with real data export file 254 - 4. Update platform selection UI if needed 255 - 256 - ### Adding a New API Endpoint 257 - 258 - 1. Create `packages/functions/src/your-endpoint.ts` 259 - 2. Add authentication check using `withAuthErrorHandling()` middleware 260 - 3. Update `packages/web/src/lib/api/adapters/RealApiAdapter.ts` 261 - 4. Update `packages/web/src/lib/api/adapters/MockApiAdapter.ts` 262 - 5. Use in components via `apiClient.yourMethod()` 263 - 264 - ### Working with the Extension 265 - 266 - ```bash 267 - cd packages/extension 268 - pnpm install 269 - pnpm run build # Build for Chrome 270 - pnpm run build:prod # Build for production 271 - 272 - # Load in Chrome: 273 - # 1. Go to chrome://extensions 274 - # 2. Enable Developer mode 275 - # 3. Click "Load unpacked" 276 - # 4. Select packages/extension/dist/chrome/ 277 - ``` 278 - 279 - ### Styling Changes 280 - 281 - - Use Tailwind utility classes 282 - - Follow dark mode pattern: `class="bg-white dark:bg-gray-800"` 283 - - Test in both light and dark modes 284 - - Mobile-first responsive design 285 - - Check accessibility (if implemented) is retained 286 - 287 - --- 288 - 289 - ## Submitting Changes 290 - 291 - ### Before Submitting 292 - 293 - - [ ] Test in mock mode: `pnpm run dev:mock` 294 - - [ ] Test in full mode (if backend changes): `npx netlify-cli dev --filter @atlast/web` 295 - - [ ] Check both light and dark themes 296 - - [ ] Test mobile responsiveness 297 - - [ ] No console errors 298 - - [ ] Code follows existing patterns 299 - - [ ] Run `pnpm run build` successfully 300 - 301 - ### Pull Request Process 302 - 303 - 1. Fork the repository 304 - 2. Create a feature branch: `git checkout -b feature/your-feature` 305 - 3. Make your changes 306 - 4. Commit with clear messages 307 - 5. Push to your fork 308 - 6. Open a Pull Request 309 - 310 - ### PR Description Should Include 311 - 312 - - What changes were made 313 - - Why these changes are needed 314 - - Screenshots (for UI changes) 315 - - Testing steps 316 - - Related issues 317 - 318 - --- 319 - 320 - ## Resources 321 - 322 - - [AT Protocol Docs](https://atproto.com) 323 - - [Bluesky API](https://docs.bsky.app) 324 - - [React Documentation](https://react.dev) 325 - - [Tailwind CSS](https://tailwindcss.com) 326 - - [Netlify Functions](https://docs.netlify.com/functions/overview) 327 - 328 - --- 329 - 330 - Thank you for contributing to ATlast!
+1 -3
README.md
··· 1 1 # ATlast 2 2 ATlast — you'll never need to find your favorites on another platform again. This tool helps you find users you followed on other social platforms (TikTok, Instagram, Twitter/X, and more) within the ATmosphere, so you can keep in touch with them on Bluesky, Skylight, or whatever @pp you prefer! 3 3 4 - ### Development 5 - 6 - Check out [CONTRIBUTING.md](https://tangled.org/@byarielm.fyi/atlast/blob/master/CONTRIBUTING.md) 4 + ## Coming Soon