blisstown/campfire
blisstown/campfire
2
0
Fork 1
Code Issues 19 Pull requests Projects 1 Releases Activity

rewrite URLs to represent instance (#2)

Browse source
This commit is contained in:
ari melody 2024-07-07 14:33:28 +01:00
parent 41143cdddf
commit a3fdd0007c
Signed by: ari
GPG key ID: CF99829C92678188
15 changed files with 199 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/routes/+layout.svelte
View file

@ -6,7 +6,6 @@
import { account, logged_in } from '$lib/stores/account.js';
import { parseAccount } from '$lib/account.js';
import { unread_notif_count, last_read_notif_id } from '$lib/notifications.js';
import { get } from 'svelte/store';
import Navigation from '$lib/ui/Navigation.svelte';
import Modal from '@cf/ui/Modal.svelte';
@ -16,25 +15,25 @@
let show_composer = false;
async function init() {
if (!get(app) || !get(app).token) {
if (!$app || !$app.token) {
account.set(false);
logged_in.set(false);
return;
}
// logged in- attempt to retrieve using token
const data = await api.verifyCredentials(get(server).host, get(app).token);
const data = await api.verifyCredentials($server.host, $app.token);
if (!data) return;
account.set(parseAccount(data));
logged_in.set(true);
console.log(`Logged in as @${get(account).username}@${get(account).host}`);
console.log(`Logged in as @${$account.username}@${$account.host}`);
// spin up async task to fetch notifications
const notif_data = await api.getNotifications(
get(server).host,
get(app).token,
get(last_read_notif_id)
$server.host,
$app.token,
$last_read_notif_id
);
if (!notif_data) return;

12
src/routes/+page.svelte
View file

@ -1,15 +1,15 @@
<script>
import { page } from '$app/stores';
import { get } from 'svelte/store';
import { logged_in } from '$lib/stores/account.js';
import { account } from '$lib/stores/account.js';
import { timeline, getTimeline } from '$lib/timeline.js';
import LoginForm from '$lib/ui/LoginForm.svelte';
import Button from '$lib/ui/Button.svelte';
import Post from '$lib/ui/post/Post.svelte';
logged_in.subscribe(logged_in => {
if (logged_in) getTimeline();
account.subscribe(account => {
if (account) getTimeline();
});
document.addEventListener("scroll", () => {
@ -20,13 +20,13 @@
});
</script>
{#if $logged_in}
{#if $account}
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>

2
src/routes/post/[id]/+page.js → src/routes/[server]/+page.js
View file

@ -1,5 +1,5 @@
export async function load({ params }) {
return {
post_id: params.id
server_domain: params.server
};
}

8
src/routes/[server]/[account]/+page.js Normal file
View file

@ -0,0 +1,8 @@
import { error } from '@sveltejs/kit';
export async function load({ params }) {
return error(404, 'Not Found');
// return {
// account_name: params.account
// };
}

7
src/routes/[server]/[account]/[post]/+page.js Normal file
View file

@ -0,0 +1,7 @@
export async function load({ params }) {
return {
server_host: params.server,
account_handle: params.account,
post_id: params.post
};
}

143
src/routes/[server]/[account]/[post]/+page.svelte Normal file
View file

@ -0,0 +1,143 @@
<script>
import * as api from '$lib/api.js';
import { server, createServer } from '$lib/client/server.js';
import { app } from '$lib/client/app.js';
import { parsePost } from '$lib/post.js';
import { goto, afterNavigate } from '$app/navigation';
import { base as previous_page } from '$app/paths'
import Post from '$lib/ui/post/Post.svelte';
import Button from '$lib/ui/Button.svelte';
export let data;
let post;
let error = false;
if (($server && $server.host === data.server_host) && $app) {
post = fetchPost(data.post_id, $app.token);
} else {
post = createServer(data.server_host).then(new_server => {
server.set(new_server);
if (!$server) {
error = `Failed to connect to <code>${data.server_host}</code>.`;
console.error(`Failed to connect to ${data.server_host}.`);
return;
}
return post = fetchPost(data.post_id, null);
});
}
afterNavigate(({from}) => {
previous_page = from?.url.pathname || previous_page
})
async function fetchPost(post_id, token) {
const post_data = await api.getPost($server.host, token, post_id);
if (!post_data || post_data.error) {
error = `Failed to retrieve post <code>${post_id}</code>.`;
console.error(`Failed to retrieve post ${post_id}.`);
return;
}
let post = await parsePost(post_data, 0);
const post_context = await api.getPostContext($server.host, token, post_id);
if (!post_context || !post_context.ancestors || !post_context.descendants)
return post;
// handle ancestors (above post)
let thread_top = post;
while (post_context.ancestors.length > 0) {
thread_top.reply = await parsePost(post_context.ancestors.pop(), 0);
thread_top = thread_top.reply;
}
// handle descendants (below post)
post.replies = [];
for (let i in post_context.descendants) {
post.replies.push(parsePost(post_context.descendants[i], 0));
}
return post;
}
</script>
{#await post}
<div class="loading throb">
<span>loading post...</span>
</div>
{:then post}
{#if error}
<p>{@html error}</p>
{:else}
<header>
{#if previous_page}
<nav>
<Button centered on:click={() => {goto(previous_page)}}>Back</Button>
</nav>
{/if}
<img src={post.account.avatar_url} type={post.account.avatar_type || "image/png"} alt="" width="40" height="40" class="header-avatar" loading="lazy" decoding="async">
<h1>
Post by {@html post.account.rich_name}
</h1>
</header>
<div id="feed" role="feed">
<Post post_data={post} focused />
<br>
{#each post.replies as reply}
{#await reply then reply}
<Post post_data={reply} />
{/await}
{/each}
</div>
{/if}
{/await}
<style>
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
header .header-avatar {
width: 40px;
height: 40px;
margin: auto 0;
border-radius: 4px;
}
header h1 {
margin: auto auto auto 8px;
font-size: 1.5em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
header nav {
margin-right: 8px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
#feed {
margin-bottom: 20vh;
}
.loading {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>

1
src/routes/callback/+page.svelte
View file

@ -19,7 +19,6 @@
api.getToken(get(server).host, get(app).id, get(app).secret, auth_code).then(token => {
if (!token) {
error(400, { message: "Invalid auth code provided" });
return;
}
app.update(app => {

5
src/routes/post/+page.js
View file

@ -1,5 +0,0 @@
import { error } from '@sveltejs/kit';
export function load(event) {
error(404, 'Not Found');
}

133
src/routes/post/[id]/+page.svelte
View file

@ -1,133 +0,0 @@
<script>
import * as api from '$lib/api.js';
import { logged_in } from '$lib/stores/account.js';
import { server } from '$lib/client/server.js';
import { app } from '$lib/client/app.js';
import { parsePost } from '$lib/post.js';
import { get } from 'svelte/store';
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
import Post from '$lib/ui/post/Post.svelte';
import Button from '$lib/ui/Button.svelte';
export let data;
let error = false;
if (!get(logged_in)) goto("/");
let previous_page = base;
afterNavigate(({from}) => {
previous_page = from?.url.pathname || previous_page
})
$: post = (async resolve => {
const post_data = await api.getPost(get(server).host, get(app).token, data.post_id);
if (!post_data) {
error = `Failed to retrieve post <code>${data.post_id}</code>.`;
console.error(`Failed to retrieve post ${data.post_id}.`);
return;
}
let post = await parsePost(post_data, 0);
const post_context = await api.getPostContext(get(server).host, get(app).token, data.post_id);
if (!post_context || !post_context.ancestors || !post_context.descendants)
return post;
// handle ancestors (above post)
let thread_top = post;
while (post_context.ancestors.length > 0) {
thread_top.reply = await parsePost(post_context.ancestors.pop(), 0);
thread_top = thread_top.reply;
}
// handle descendants (below post)
post.replies = [];
for (let i in post_context.descendants) {
post.replies.push(parsePost(post_context.descendants[i], 0));
}
return post;
})();
</script>
{#if !error}
<header>
{#await post then post}
<nav>
<Button centered on:click={() => {goto(previous_page)}}>Back</Button>
</nav>
<img src={post.account.avatar_url} type={post.account.avatar_type} alt="" width="40" height="40" class="header-avatar" loading="lazy" decoding="async">
<h1>
Post by {@html post.account.rich_name}
</h1>
{/await}
</header>
<div id="feed" role="feed">
{#await post}
<div class="loading throb">
<span>loading post...</span>
</div>
{:then post}
<Post post_data={post} focused />
<br>
{#each post.replies as reply}
{#await reply then reply}
<Post post_data={reply} />
{/await}
{/each}
{/await}
</div>
{:else}
<p>{@html error}</p>
{/if}
<style>
header {
width: 100%;
height: 64px;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
header .header-avatar {
width: 40px;
height: 40px;
margin: auto 0;
border-radius: 4px;
}
header h1 {
margin: auto auto auto 8px;
font-size: 1.5em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
header nav {
margin-right: 8px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
#feed {
margin-bottom: 20vh;
}
.loading {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>