\n );\n }\n\n return (\n

\n ATProto to Fediverse Bridge\n

\n Connect your Bluesky account to Mastodon and automatically\n cross-post your content\n

\n\n

\n \n Get Started\n \n\n \n Sign In\n \n

\n\n {/* Setup Status Checklist */}\n {setupStatus && (\n

\n Setup Status\n

\n Here's what you need to configure to get your bridge running:\n

\n\n {/* Environment Variables Section */}\n

\n 🔧\n Environment Variables\n

\n {Object.entries(setupStatus.environmentVars).map((\n [key, env],\n ) => (\n

\n {env.set\n ? (\n \n \n )\n : (\n \n \n )}\n

\n {key}\n

\n {env.description}\n

\n {!env.set && env.required && (\n

\n ⚠️ Required - needs to be set in environment\n

\n )}\n

\n ))}\n

\n\n {/* Setup Steps Section */}\n

\n 📋\n Setup Steps\n

\n {setupStatus.setupSteps.map((step) => (\n

\n {step.completed\n ? (\n \n \n )\n : (\n \n \n )}\n

\n {step.title}\n

\n {step.description}\n

\n ))}\n

\n\n {/* Overall Status */}\n \n

\n \n {setupStatus.overallReady ? \"✅\" : \"⚠️\"}\n \n

\n {setupStatus.overallReady\n ? \"Ready to go!\"\n : \"Setup required\"}\n

\n {setupStatus.overallReady\n ? \"All environment variables are configured. You can start setting up your accounts.\"\n : \"Please configure the missing environment variables before proceeding.\"}\n

\n )}\n\n

🔗 Easy Setup

\n Connect your accounts with secure OAuth in just a few clicks\n

⚡ Automatic Sync

\n Your Bluesky posts automatically appear on Mastodon\n

📱 Media Support

\n Images and videos are cross-posted along with your text\n

🔒 Private & Secure

\n All data is encrypted and stored securely\n

\n \n );\n}\n\n// Initialize React app\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();\n","deleted","label",[171,153],"frontend","permalink","https://www.val.town/x/tijs/atproto-to-fediverse/code/frontend/landing.tsx","extension","actionData","errors"]