baileytownsend.dev
A fork of pds-dash for selfhosted.social
1<script lang="ts">
2 import PDSHeader from '$lib/components/PDSHeader.svelte';
3
4 const faqs = [
5 {
6 id: 'what-is-selfhosted-social',
7 question: 'What is selfhosted.social?',
8 answer: `selfhosted.social is an <a href="https://atproto.com/guides/glossary#pds-personal-data-server"> ATProto PDS</a>. We welcome anyone who agrees with our <a href="/legal">Terms of Service and Privacy Policy</a>.
9 `
10 },
11 {
12 id: 'invite-code',
13 question: 'Does your PDS require an invite code?',
14 answer: `
15 Nope! We have an open PDS as long as you agree with our <a href="/legal">Terms of Service and Privacy Policy</a>.
16 You can use this <a href="https://pdsmoover.com/moover/selfhosted.social">PDS MOOver link</a> to migrate your ATProto account to our PDS from another PDS.
17 Or if you are creating a new account, you can do this on <a href="https://bsky.app/">Bluesky's website</a>,
18 click create a new account, and then click the pencil icon next to the text "You are creating an account on Bluesky Social".
19 On the custom screen you can enter "https://selfhosted.social". Then you complete the registration process as normal and you're good to go!'.
20 `
21 },
22 {
23 id: 'server-location-backups',
24 question: 'What about the server? Where is it located? Is there backups?',
25 answer: `
26 The PDS is hosted on <a href="https://www.digitalocean.com/">DigitalOcean</a>. On a VPS that is located in Atlanta, GA, USA. We do nightly backups of the whole server, and each individual account is also backed up with <a href="https://pdsmoover.com">PDS MOOver</a>.
27 You can manage them by signing in to the <a href="https://pdsmoover.com/backups">backups page</a> with your ATProto account.
28 `
29 },
30 {
31 id: 'is-it-free',
32 question: 'Is it free?',
33 answer: `
34 Yes, but sponsorships and tips are welcomed to help cover server costs! Can use <a href="https://github.com/sponsors/fatfingers23">GitHub sponsors</a> or <a href="https://ko-fi.com/baileytownsend">Ko-Fi</a> to support us.
35 `
36 },
37 {
38 id: 'support-contact',
39 question: 'How do I get support? Reach an admin?',
40 answer: `
41 You can reach out directly to me on Bluesky <a href="https://bsky.app/profile/baileytownsend.dev">@baileytownsend.dev</a> or email us at <a href="mailto:modmail@selfhosted.social?subject=&cc=&bcc=&body=" style="" class="" id="">modmail@selfhosted.social</a>.
42 `
43 },
44 {
45 id: 'other-pdses',
46 question: 'I don\'t think this is the PDS for me.',
47 answer: `
48 Perfectly okay! Independent PDSs are becoming more common, and here is a list of some of our favorites that welcome new users and hope if you can't find a home with us that you can find one that works for you.
49 <ul>
50 <li><a href="https://docs.blacksky.community/migrating-to-blacksky-pds-complete-guide">Blacksky</a></li>
51 <li><a href="https://leaflet.pub/2191cd16-e793-4dd8-95ff-c6b02e89bb6a">Northsky</a></li>
52 <li><a href="https://bsky.app/profile/witchcraft.systems">witchcraft.systems</a></li>
53 <li><a href="https://tophhie.social/">tophhie.social</a></li>
54 <li><a href="https://bsky.app/profile/altq.net">altq.net</a></li>
55
56 </ul>
57 `
58 }
59 ];
60</script>
61
62<div class="page-container">
63
64 <PDSHeader/>
65
66 <section class="faq-section">
67 <h2>Frequently Asked Questions</h2>
68 <div class="faq-list">
69 {#each faqs as faq (faq.id)}
70 <div id={faq.id} class="faq-item">
71 <h3>
72 <a href="#{faq.id}" class="faq-question">{faq.question}</a>
73 </h3>
74 <div class="faq-answer">
75 <div class="answer-content">
76 {@html faq.answer}
77 </div>
78 </div>
79 </div>
80 {/each}
81 </div>
82 </section>
83</div>
84
85<style>
86 .page-container {
87 max-width: 1200px;
88 margin: 2rem auto;
89 padding: 2rem;
90 }
91
92 .faq-section {
93 margin-top: 3rem;
94 }
95
96 h2 {
97 font-size: 2rem;
98 font-weight: 700;
99 color: var(--text-color, #111827);
100 margin-bottom: 2rem;
101 text-align: center;
102 }
103
104 .faq-list {
105 display: flex;
106 flex-direction: column;
107 gap: 2.5rem;
108 }
109
110 .faq-item {
111 scroll-margin-top: 6rem;
112 }
113
114 h3 {
115 color: var(--text-color, #111827);
116 font-size: 1.5rem;
117 font-weight: 600;
118 margin: 0 0 1rem 0;
119 }
120
121 .faq-question {
122 color: inherit;
123 text-decoration: none;
124 transition: color 0.2s ease;
125 }
126
127 .faq-question:hover {
128 color: var(--link-color, #6366f1);
129 }
130
131 .faq-question:focus {
132 outline: 2px solid var(--link-color, #6366f1);
133 outline-offset: 4px;
134 border-radius: 4px;
135 }
136
137 .faq-answer {
138 padding: 0;
139 }
140
141 .answer-content {
142 color: var(--text-color, #111827);
143 opacity: 0.8;
144 line-height: 1.7;
145 }
146
147 .answer-content :global(a) {
148 color: var(--link-color, #6366f1);
149 text-decoration: none;
150 font-weight: 500;
151 transition: opacity 0.2s ease;
152 border-bottom: 1px solid rgba(99, 102, 241, 0.3);
153 }
154
155 .answer-content :global(a:hover) {
156 opacity: 0.8;
157 border-bottom-color: var(--link-color, #6366f1);
158 }
159
160 .answer-content :global(a:focus) {
161 outline: 2px solid var(--link-color, #6366f1);
162 outline-offset: 2px;
163 border-radius: 2px;
164 }
165
166 @media (max-width: 768px) {
167 .page-container {
168 padding: 1rem;
169 }
170
171 h2 {
172 font-size: 1.5rem;
173 margin-bottom: 1.5rem;
174 }
175
176 h3 {
177 font-size: 1.25rem;
178 }
179
180 .faq-list {
181 gap: 2rem;
182 }
183
184 .faq-item {
185 scroll-margin-top: 5rem;
186 }
187 }
188
189 @media (max-width: 480px) {
190 .page-container {
191 padding: 0.75rem;
192 margin: 1rem auto;
193 }
194
195 h2 {
196 font-size: 1.25rem;
197 }
198
199 h3 {
200 font-size: 1.1rem;
201 }
202
203 .faq-list {
204 gap: 1.5rem;
205 }
206
207 .faq-item {
208 scroll-margin-top: 4rem;
209 }
210
211 .answer-content {
212 font-size: 0.95rem;
213 }
214 }
215</style>