Graphical PDS migrator for AT Protocol
1import { Button } from "../components/Button.tsx";
2
3export default function About() {
4 return (
5 <>
6 <div class="px-2 sm:px-4 py-4 sm:py-8 mx-auto">
7 <div class="max-w-screen-lg mx-auto flex flex-col items-center justify-center">
8 <div class="prose dark:prose-invert max-w-none w-full mb-0">
9 <h1 class="text-3xl font-bold text-center mb-8">
10 About AT Protocol
11 </h1>
12
13 <div class="space-y-6">
14 <section>
15 <h2 class="text-2xl font-semibold mb-4">
16 What is AT Protocol?
17 </h2>
18 <p class="text-gray-600 dark:text-gray-300">
19 AT Protocol (Authenticated Transfer Protocol) is the
20 foundation of Bluesky and other social apps like
21 <a href="https://tangled.sh">Tangled</a>,
22 <a href="https://spark.com">Spark</a>, and more. Unlike
23 traditional social platforms that lock your data and identity
24 to a single service, AT Protocol gives you complete control
25 over your digital presence. Think of it as an open standard
26 for social networking, similar to how email works across
27 different providers.
28 </p>
29 </section>
30
31 <section>
32 <h2 class="text-2xl font-semibold mb-4">Key Features</h2>
33 <ul class="list-disc pl-6 space-y-4 text-gray-600 dark:text-gray-300">
34 <li>
35 <strong>PDS Servers:</strong>{" "}
36 PDS servers are where your data is stored. They can be run
37 by anyone, and they are very lightweight, allowing you to
38 choose which one to use or run your own. PDS servers just
39 store your data, meaning you don't have to switch PDS
40 servers to use a different app or service. You can have one
41 PDS while using many different apps and services with the
42 same account.
43 </li>
44 <li>
45 <strong>Decentralized Identity:</strong>{" "}
46 Your account is tied to a DID (Decentralized Identifier)
47 rather than your handle/username. This means you can move
48 your entire account, including your followers and content,
49 to any PDS by changing where your DID points. It's also the
50 reason you can use any domain as your handle, because your
51 identity is not tied to your handle. Your handle can change,
52 but your DID will always remain the same.
53 </li>
54 <li>
55 <strong>Portable Content:</strong>{" "}
56 All your posts, likes, and other social data are stored in
57 your Personal Data Server (PDS). You can switch PDS
58 providers without losing any content or connections.
59 </li>
60 <li>
61 <strong>Architecture:</strong>{" "}
62 The protocol uses a three-tier architecture: Personal Data
63 Servers (PDS) store your content, relays broadcast a stream
64 of all events on all PDSes, and AppViews process and serve
65 that stream into content for users. This means when you make
66 a post, the content is stored on your PDS, picked up by
67 relays, and AppViews listen to those relays to deliver that
68 post to all users.
69 </li>
70 <li>
71 <strong>Algorithmic Choice:</strong>{" "}
72 You're not locked into a single algorithm for your feed.
73 Different services can offer different ways of curating
74 content, and you can choose which one you prefer. Bluesky
75 offers a way to make custom feeds, but even if it didn't,
76 different apps could still offer their own algorithms for
77 curating content.
78 </li>
79 </ul>
80 </section>
81
82 <section>
83 <h2 class="text-2xl font-semibold mb-4">Learn More</h2>
84 <div class="space-y-4">
85 <p class="text-gray-600 dark:text-gray-300">
86 Want to dive deeper into AT Protocol? Check out these
87 resources:
88 </p>
89 <ul class="list-none space-y-2">
90 <li>
91 <a
92 href="https://atproto.com"
93 class="text-blue-500 hover:underline"
94 >
95 Official AT Protocol Docs
96 </a>{" "}
97 - The main source for protocol specs and information
98 </li>
99 <li>
100 <a
101 href="https://github.com/bluesky-social/atproto"
102 class="text-blue-500 hover:underline"
103 >
104 GitHub Repository
105 </a>{" "}
106 - View the protocol implementation
107 </li>
108 <li>
109 <a
110 href="https://atproto.wiki"
111 class="text-blue-500 hover:underline"
112 >
113 AT Protocol Wiki
114 </a>{" "}
115 - Community-driven documentation and resources
116 </li>
117 </ul>
118 </div>
119 </section>
120 </div>
121
122 <div class="mt-8 text-center">
123 <Button
124 href="/"
125 color="blue"
126 label="Back to Home"
127 />
128 </div>
129 </div>
130 </div>
131 </div>
132 </>
133 );
134}