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

finish sk restructure, a11y and optimisations

Browse source
This commit is contained in:
ari melody 2024-06-29 14:48:34 +01:00
parent 9ef27fd2a2
commit 3ae05b3f9f
Signed by: ari
GPG key ID: CF99829C92678188
61 changed files with 416 additions and 429 deletions
Download patch file Download diff file Expand all files Collapse all files

119
src/routes/+page.svelte
View file

@ -8,7 +8,8 @@
import { get } from 'svelte/store';
let client = get(Client.get());
let ready = client.app && client.app.token;
let ready = client.app;
let logged_in = ready && client.app.token;
let instance_url_error = false;
let logging_in = false;
@ -57,31 +58,46 @@
<main>
{#if ready}
<Feed />
{:else}
<div>
<form on:submit={log_in} id="login">
<h1>Space Social</h1>
<p>Welcome, fediverse user!</p>
<p>Please enter your instance domain to log in.</p>
<div class="input-wrapper">
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
{#if instance_url_error}
<p class="error">{instance_url_error}</p>
{/if}
</div>
<br>
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
<p><small>
Please note this is
<strong><em>extremely experimental software</em></strong>;
things are likely to break!
<br>
If that's all cool with you, welcome aboard!
</small></p>
{#if logged_in}
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</form>
<Feed />
{:else}
<div>
<form on:submit={log_in} id="login">
<h1>Space Social</h1>
<p>Welcome, fediverse user!</p>
<p>Please enter your instance domain to log in.</p>
<div class="input-wrapper">
<input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
{#if instance_url_error}
<p class="error">{instance_url_error}</p>
{/if}
</div>
<br>
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
<p><small>
Please note this is
<strong><em>extremely experimental software</em></strong>;
things are likely to break!
<br>
If that's all cool with you, welcome aboard!
</small></p>
<p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
</form>
</div>
{/if}
{:else}
<div class="loading throb">
<span>just a moment...</span>
</div>
{/if}
</main>
@ -93,31 +109,6 @@
</div>
<style>
#spacesocial-app {
margin: auto 0;
padding: 0 16px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 16px;
}
header, #widgets {
width: 300px;
}
main {
width: 732px;
}
div.pane {
margin-top: 16px;
padding: 20px 32px;
border: 1px solid #8884;
border-radius: 16px;
background-color: var(--bg1);
}
form#login {
margin: 25vh 0 32px 0;
text-align: center;
@ -221,4 +212,32 @@
.form-footer {
opacity: .7;
}
.loading {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
main header {
width: 100%;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
main header h1 {
font-size: 1.5em;
}
main header nav {
margin-left: auto;
display: flex;
flex-direction: row;
gap: 8px;
}
</style>

50
src/routes/post/[id]/+layout.svelte Normal file
View file

@ -0,0 +1,50 @@
<script>
import Navigation from '$lib/ui/Navigation.svelte';
import Widgets from '$lib/ui/Widgets.svelte';
import Button from '$lib/ui/Button.svelte';
</script>
<div id="spacesocial-app">
<header>
<Navigation />
</header>
<main>
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<slot></slot>
</main>
<div id="widgets">
<Widgets />
</div>
</div>
<style>
main header {
width: 100%;
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
main header h1 {
font-size: 1.5em;
}
main header nav {
margin-left: auto;
display: flex;
flex-direction: row;
gap: 8px;
}
</style>

46
src/routes/post/[id]/+page.js Normal file
View file

@ -0,0 +1,46 @@
import Post from '$lib/ui/post/Post.svelte';
import { Client } from '$lib/client/client.js';
import { parsePost } from '$lib/client/api.js';
import { get } from 'svelte/store';
export const prerender = true;
export const ssr = false;
export async function load({ params }) {
let client = get(Client.get());
if (client.app && client.app.token) {
// this triggers the client actually getting the authenticated user's data.
const res = await client.verifyCredentials()
if (res) {
console.log(`Logged in as @${client.user.username}@${client.user.host}`);
} else {
return null;
}
} else {
return null;
}
const post_id = params.id;
const post_data = await client.getPost(post_id);
if (!post_data) {
console.error(`Failed to retrieve post ${post_id}.`);
return null;
}
const post = await parsePost(post_data, 10, true);
let posts = [post];
for (let i in post.replies) {
const reply = post.replies[i];
// if (i > 1 && reply.reply_id === post.replies[i - 1].id) {
// let reply_head = posts.pop();
// reply.reply = reply_head;
// }
posts.push(reply);
// console.log(reply);
}
return {
posts: posts
};
}

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

@ -0,0 +1,38 @@
<script>
import '$lib/app.css';
import Post from '$lib/ui/post/Post.svelte';
export let data;
const main_post = data.posts[0];
const replies = data.posts.slice(1);
</script>
<div id="feed" role="feed">
{#if data.posts.length <= 0}
<div class="throb">
<span>just a moment...</span>
</div>
{:else}
<Post post_data={main_post} focused />
<br>
{#each replies as post}
<Post post_data={post} />
{/each}
{/if}
</div>
<style>
#feed {
margin-bottom: 20vh;
}
.throb {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>