vielle.dev
this repo has no description
create signup page
+34
-4
src/Base.astro
+34
-4
src/Base.astro
···
1
1
---
2
-
interface Props {
3
-
title: string;
4
-
}
2
+
type Props =
3
+
| {
4
+
title: string;
5
+
}
6
+
| {
7
+
frontmatter: {
8
+
title: string;
9
+
};
10
+
};
5
11
---
6
12
7
13
<html lang="en">
···
9
15
<meta charset="utf-8" />
10
16
<meta name="viewport" content="width=device-width, initial-scale=1" />
11
17
<meta name="generator" content={Astro.generator} />
12
-
<title>{Astro.props.title}</title>
18
+
<title>
19
+
{
20
+
"title" in Astro.props
21
+
? Astro.props.title
22
+
: Astro.props.frontmatter.title
23
+
}
24
+
</title>
13
25
<style is:inline>
14
26
@layer base {
15
27
:root {
···
24
36
}
25
37
}
26
38
</style>
39
+
{"frontmatter" in Astro.props
40
+
? <style>
41
+
body {
42
+
background: canvas;
43
+
margin: 0;
44
+
padding: .2em 1em;
45
+
grid-area: main;
46
+
}
47
+
48
+
:root {
49
+
background: color-mix(in oklab, canvas 100%, currentColor 5%);
50
+
min-height: 100vh;
51
+
display: grid;
52
+
grid-template: ". main ." 1fr / 1fr minmax(auto, 80ch) 1fr;
53
+
}
54
+
</style>
55
+
: null}
27
56
<slot name="head" />
28
57
</head>
29
58
<body>
59
+
{"frontmatter" in Astro.props ? <div style="height: 0.01px;"/> : null}
30
60
<slot />
31
61
</body>
32
62
</html>
+99
src/pages/atproto/sign-up.md
+99
src/pages/atproto/sign-up.md
···
1
+
---
2
+
layout: ../../Base.astro
3
+
title: Atmosphere Account
4
+
---
5
+
6
+
# Atmosphere Account
7
+
8
+
[dnd.vielle.dev](https://dnd.vielle.dev) requires you to have an **atmosphere account**. An **atmosphere account** is an account used for atproto, which is an internet protocol (like email, https, or tcp) designed for creating social media sites easily with _user agency_, _credible exit_, and _data ownership_.
9
+
10
+
Atproto provides major advantages for end users and app devs. For end users, your data is controlled by you and not the app, and data from one app can interoperate with another -- leaflet.pub can show blog posts from pckt.blog if they want. As an app dev, you get complex functionality like accounts for free, as well as possibly cheaper infrastructure costs. It also solves the cold start problem for many apps since you already have access to users and can show data from other apps.
11
+
12
+
For dnd.vielle.dev, atproto provides:
13
+
14
+
- More stable power storage -- localstorage was unreliable
15
+
- Cross device sync
16
+
- Public index -- anyone can see your powers (good for ex playing your character)
17
+
18
+
## Account Makeup
19
+
20
+
> This is somewhat technical/confusing! You don't need to understand this to create an account, but I reccomend you read this anyway to understand what atproto is and how it works. Ask me if you have any questions!
21
+
22
+
An account consists of a few core components:
23
+
24
+
- a did and did document pair
25
+
- a handle
26
+
- a pds
27
+
- a repository
28
+
- blobs
29
+
30
+
### Did and Did Document pair
31
+
32
+
In atproto, your did is a unique, permenant username for your account. `vielle.dev` has a did of `did:plc:4zht3z4caxwrw3dlsybodywc`, while `ducky.ws` has a did of `did:web:didd.uk`. If you loose control over your did (hard to do) you loose control over your account.
33
+
34
+
### Handle
35
+
36
+
A handle is the user friendly username for an account, and can be changed. Every handle is a domain (like `google.com` or `vielle.dev`) so you can use a domain you own (if you have one), or one provided by your pds (below) (like `jcsalterego.bsky.social` or `shame.evil.gay`) if you dont.
37
+
38
+
### Pds
39
+
40
+
The pds is where your account lives. This is a server which hosts account data and you can easily "migrate" from it to another pds -- move between them -- without breaking your account or data. Some pdses are free to join (like `bsky.social`, `blacksky.app`\*, and `selfhosted.social`), while others are invite only (like `abnormal.zip`, `katproto.girlonthemoon.xyz`, and `northsky.social`\*\*). More details about specific pdses are [below](#pds-list)
41
+
42
+
### A Repository
43
+
44
+
Your repository is the (public -- for now) data you create on "the atmosphere" (atproto). This is things like bluesky likes/posts, teal.fm scrobbles, wisp.place sites, etc. You can easily export your repository as a car file, which is then used to move your account to another server without breaking data. Details on securing your account are [below](#securing-your-account)
45
+
46
+
### Blobs
47
+
48
+
Blobs are the (public -- for now) files you post to "the atmosphere", including images on a bluesky post, or images in your leaflet entry. You can export and backup all your blobs if you want, but it isn't as necessary as your car file, since if they don't migrate, you'll just have broken images. Blobs are imported when you migrate your account.
49
+
50
+
## Creating an account
51
+
52
+
1. Choose a pds. You can choose a public pds (or a private pds if you get an invite code). A few reccomended options are listed [here](#pds-list).
53
+
54
+
2. Create an account on the instance. Some pdses provide a custom signup screen, but many do not. For those that do not, you can click the link labeled "Create an Account Here", or use [bsky.app](https://bsky.app/). If you use bsky.app, click `Create Account`, then look for the small text that says "You are creating an account on **Bluesky Social**" and click the text **Bluesky Social**. Then, click custom and enter the address of your pds (ex: `https://abnormal.zip/`), and follow the standard signup instructions.
55
+
56
+
3. Done! If you want to migrate to a new server (ex, you selected `bsky.social`), follow the instructions [here](#migrating-your-account)
57
+
58
+
## PDS List
59
+
60
+
### Public without invite code
61
+
62
+
- <https://bsky.social/> -- This is the "flagship" pds instance operated by bluesky. Signup is open to everyone, and anyone can [migrate away from it](#migrating-your-account). If you have an existing bsky.social account, you can migrate back. If you're really worried about your account you could sign up and migrate away so you can migrate back later **_(⚠️ I haven't tested migrating to bsky.social! ⚠️)_**, but several companies now rely on atproto for their existence, and many alternate pdses are open so I don't think this is an important concern. In the future I believe bluesky plan to open up incoming migrations -- once the ecosystem has more open pdses with more users.
63
+
64
+
- <https://blacksky.app/> -- This pds is operated by [blacksky](https://blacksky.xyz). Avaliable handles are `.blacksky.app`, `.myatproto.social`, and `.cryptoanarchy.network`. `.blacksky.app` is only allowed for black users **(not any POC -- specifically black)**. I reccomend checking out <https://blackskyweb.xyz>, <https://blackskyweb.xyz/overview>, and <https://docs.blacksky.community/> before migration. [Create an Account Here](/atproto/login?target=https%3A%2F%2Fblacksky.app%2F)
65
+
66
+
- <https://selfhosted.social/> -- This pds is operated by respected community member [@baileytownsend.dev](https://aturi.to/did:plc:rnpkyqnmsw4ipey6eotbdnnf) and is used by many atproto based apps as their default pds signup instance. [Create an Account Here](/atproto/login?target=https%3A%2F%2Fselfhosted.social%2F)
67
+
68
+
- <https://tophhie.social/> -- This pds is operated by [tophhie.cloud](https://tophhie.cloud). I don't know much about them -- do your own research. [Create an Account Here](https://signup.tophhie.social/)
69
+
70
+
- <https://tngl.sh/> -- This pds is operated by [@tangled.org](https://aturi.to/). This pds is designed for users of the atmosphere app `tangled.org` and does not support incoming migrations. [Create an Account Here](https://tangled.org/signup)
71
+
72
+
### Public with invite code
73
+
74
+
- <https://zio.blue/> -- This pds is operated by community member (and my mutual) [@ducky.ws](https://aturi.to/did:web:didd.uk) and [@astra.blue](https://aturi.to/did:plc:ejy6lkhb72rxvkk57tnrmpjl). If you want an invite code you need to DM [@zio.sh](https://aturi.to/did:web:zio.sh) on bluesky, which means this pds does not support new users (unless you get someone to message for you). `zio.blue` bypasses age verification requirements due to laws like the Online Safety Act. [Create an Account Here](/atproto/login?target=https%3A%2F%2Fzio.blue%2F)
75
+
76
+
- <https://northsky.social/> -- This pds is for "2SLGBTQIA+ people" with -- at the time of writing -- a waiting list for sign ups. See [northskysocial.com](https://northskysocial.com) for more information.
77
+
78
+
### Private with invite code
79
+
80
+
- <https://abnormal.zip/> -- This pds is operated by me and runs off a pi on my desk. Invite codes are required -- message me for one and I'll hook you up. Avaliable handles are `.abnormal.zip`, `.pds.vielle.dev`, `.at.vielle.dev`, and `.at.dongs.zip`. I ask that `.pds.vielle.dev` is reserved for `john-doe.pds.vielle.dev` and `.at.vielle.dev` is reserved for specifically my alts. If you use one of these handles I will ask you to change it. If you do not change it I'll figure out how to change it for you. [Create an Account Here](/atproto/login?target=https%3A%2F%2Fabnormal.zip%2F)
81
+
82
+
- Selfhosting -- ⚠️ **_HERE BE DRAGONS -- PROCEED WITH CAUTION_** ⚠️ -- If you have your own domain you can host your own pds. <https://atproto.com/guides/self-hosting>, <https://github.com/bluesky-social/pds>, and <https://github.com/bluesky-social/deploy-recipes> are good guides for using the reference implementation of the pds. Alternative pds implementations include [`rksy-pds` by blacksky](https://github.com/blacksky-algorithms/rsky/tree/main/rsky-pds), [cocoon by hailey.at (former bsky dev)](https://github.com/haileyok/cocoon), and [tranquil pds by @lewis.moe and @nel.pet](https://tangled.org/tranquil.farm/tranquil-pds/).
83
+
84
+
## Migrating your account
85
+
86
+
Migration is a somewhat risky operation (mostly safe but sometimes you can run into issues -- I reccomend [creating a backup](#securing-your-account) beforehand and getting in touch with me if you have problems) but is fairly easy to do thanks to <https://pdsmoover.com/> by [@baileytownsend.dev](https://aturi.to/did:plc:rnpkyqnmsw4ipey6eotbdnnf). Make sure to read over <https://pdsmoover.com/info> before migrating, and I reccomend following the video by [@sharpiepls.com](https://aturi.to/did:plc:g7j6qok5us4hjqlwjxwrrkjm) -- obviously replacing blacksky.app and the handles with whichever pds and handles you're using.
87
+
88
+
## Securing your account (reccomended but optional)
89
+
90
+
Securing your account protects your account from a hostile pds and consists of 2 main components:
91
+
92
+
- Securing your did
93
+
- Backing up your data
94
+
95
+
Once again pds moover can help and make things easy. Head to <https://pdsmoover.com/backups>, and enter your accounts handle and real password -- read everything carefully, backups are important and can be risky if you're reckless.
96
+
97
+
On the next screen, make a new rotation key (following the onscreen instructions by getting the plc token email), and save it to your password manager. Make sure you remember where you save it. If you can't save this to your password manager, download the key file and save it somewhere safe. If you lose this key you could lose your account (if the pds becomes hostile).
98
+
99
+
This also creates a daily backup of your account, including both records and blobs. The most common case of a hostile pds is the pds going offline -- pds moover is sufficient if this is the only concern you have. For maximum security you'll want to create local backups. Currently there is no easy tool for this -- hit me up if you want advice on setting this up.
+14
-5
src/pages/index.astro
+14
-5
src/pages/index.astro
···
6
6
<script>
7
7
import "actor-typeahead";
8
8
import { getAuth } from "../lib/auth";
9
+
9
10
const [_, __, did] = await getAuth();
10
11
const login = document.getElementById("login");
11
-
if (!login) throw "no #login";
12
-
if (did)
13
-
login.outerHTML = `<a id="login" href="/atproto/logout">Logout</a>`;
14
-
else login.outerHTML = `<a id="login" href="/atproto/login">Login</a>`;
12
+
const signup = document.getElementById("signup");
13
+
14
+
if (!login || !signup) throw "no #login or #signup";
15
+
if (did) {
16
+
login.outerHTML = `<a id="login" href="/atproto/logout">Log out</a>`;
17
+
} else {
18
+
login.outerHTML = `<a id="login" href="/atproto/login">Log in</a>`;
19
+
signup.style.display = "";
20
+
}
15
21
16
22
const astralUser = document.getElementById(
17
23
"astral-user",
···
50
56
</style>
51
57
52
58
<h1>D&D Utils</h1>
53
-
<a id="login" href="#" style="display: none;"></a>
59
+
<p style="height: 1lh">
60
+
<a id="login" href="#" style="display: none;">Log in</a>
61
+
<a id="signup" href="/atproto/sign-up" style="display: none;">Sign up</a>
62
+
</p>
54
63
<p>Pages:</p>
55
64
<ul>
56
65
<li><a href="/astral">Astral Powers</a></li>