Read-it-later social network
add styles, init /[handle]/home
+60
-61
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+1
package.json
+1
package.json
+15
src/app.css
+15
src/app.css
+38
-2
src/routes/+layout.svelte
+38
-2
src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
2
import '../app.css';
3
-
let { children } = $props();
3
+
let { data, children } = $props();
4
+
const user = $derived(data.user);
4
5
</script>
5
6
6
-
{@render children()}
7
+
<div class="flex flex-col gap-8 w-screen h-full min-h-screen font-neco">
8
+
<header class="flex items-center w-full gap-4 px-8 py-4 justify-between">
9
+
<nav class="text-lg flex gap-4 items-center">
10
+
<a href="/" class="font-comico text-2xl hover:text-shadow-md">potatonet.app</a>
11
+
<a href="https://tangled.sh/@zeu.dev/potatonet-app" class="hover:text-shadow-lg">🧶</a>
12
+
<a href="https://bsky.app/profile/zeu.dev" class="hover:text-shadow-lg">🦋</a>
13
+
</nav>
14
+
15
+
<div class="flex gap-4 items-center">
16
+
{#if user}
17
+
<a href={`/${user.handle}/home`} class="hover:text-shadow-lg">🏡</a>
18
+
<form action="/?/logout" method="POST">
19
+
<button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
20
+
Logout
21
+
</button>
22
+
</form>
23
+
{:else}
24
+
<form action="/?/login" method="POST">
25
+
<input
26
+
name="handle"
27
+
type="text"
28
+
placeholder="Handle (eg: zeu.dev)"
29
+
class="border border-black border-dashed px-3 py-2 hover:shadow-lg focus:shadow-lg"
30
+
/>
31
+
<button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
32
+
Login
33
+
</button>
34
+
</form>
35
+
{/if}
36
+
</div>
37
+
</header>
38
+
39
+
<main class="flex flex-col gap-4 p-8">
40
+
{@render children()}
41
+
</main>
42
+
</div>
-58
src/routes/+page.svelte
-58
src/routes/+page.svelte
···
1
-
<script lang="ts">
2
-
let { data } = $props();
3
-
const user = data.user;
4
-
</script>
5
-
6
-
<main class="flex flex-col gap-4 p-8">
7
-
8
-
<h1 class="text-3xl font-black">potatonet.app</h1>
9
-
<h2 class="text-xl font-semibold">
10
-
Implemented by
11
-
<a href="https://zeu.dev" class="underline">zeu.dev</a>
12
-
💛
13
-
</h2>
14
-
15
-
<div class="flex gap-4">
16
-
<a href="https://tangled.sh/@zeu.dev/potatonet-app" class="flex gap-2 rounded border border-black px-4 py-2 w-fit">
17
-
🧶 Tangled Repo
18
-
</a>
19
-
<a href="https://bsky.app/profile/zeu.dev" class="flex gap-2 rounded border border-black px-4 py-2 w-fit">
20
-
🦋 Bluesky
21
-
</a>
22
-
</div>
23
-
24
-
<div class="border border-black p-4 rounded shadow-md flex flex-col gap-4">
25
-
{#if user}
26
-
<section class="border border-black flex gap-4 items-center px-4 py-2 rounded shadow-md">
27
-
<img src={user.avatar} alt={`${user.handle} avatar`} class="size-20 rounded" />
28
-
<div class="flex flex-col">
29
-
<p>Logged in as:</p>
30
-
<h1>Handle: <span class="font-bold">{user.handle}</span></h1>
31
-
<h2>Display Name: <span class="font-bold">{user.displayName}</span></h2>
32
-
<h3 class="italic">{user.did}</h3>
33
-
</div>
34
-
</section>
35
-
36
-
<form action="/?/logout" method="POST">
37
-
<button type="submit" class="border border-black rounded px-2 py-1">
38
-
Logout
39
-
</button>
40
-
</form>
41
-
{:else}
42
-
<p>You're not logged in</p>
43
-
44
-
<form action="/?/login" method="POST">
45
-
<input
46
-
name="handle"
47
-
type="text"
48
-
placeholder="Handle (eg: zeu.dev)"
49
-
class="border border-black rounded px-2 py-1"
50
-
/>
51
-
<button type="submit" class="border border-black rounded px-2 py-1">
52
-
Login
53
-
</button>
54
-
</form>
55
-
{/if}
56
-
</div>
57
-
58
-
</main>
+5
src/routes/[handle]/home/+page.svelte
+5
src/routes/[handle]/home/+page.svelte
+1
-1
src/routes/oauth/callback/+server.ts
+1
-1
src/routes/oauth/callback/+server.ts
static/Comico-Regular.woff2
static/Comico-Regular.woff2
This is a binary file and will not be displayed.
static/Neco-Variable.woff2
static/Neco-Variable.woff2
This is a binary file and will not be displayed.