Compare commits
No commits in common. "54cafaa1da0a93fe12f6c5863725abe3ce90934f" and "155aa524f3f1332d3e762e961a6f3b03cbe64972" have entirely different histories.
54cafaa1da
...
155aa524f3
37 changed files with 102 additions and 775 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@yusurko/vigil",
|
||||
"private": true,
|
||||
"version": "0.1.0-dev42",
|
||||
"version": "0.1.0-dev36",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
|
|
|||
15
src/app.d.ts
vendored
15
src/app.d.ts
vendored
|
|
@ -1,21 +1,10 @@
|
|||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
|
||||
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
interface Locals {
|
||||
results?: object[],
|
||||
query?: string,
|
||||
me: UserEntry | null
|
||||
}
|
||||
interface PageData {
|
||||
site: ServerHealth | null,
|
||||
me: UserEntry | null,
|
||||
results?: object[],
|
||||
query?: string
|
||||
}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
|
|
|
|||
24
src/app.html
24
src/app.html
|
|
@ -187,26 +187,6 @@ ul.column {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
ul.grid {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
ul.grid > li {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: .5em;
|
||||
padding: .5em;
|
||||
margin: 1em .5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.grid > li small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a svg {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -254,10 +234,6 @@ button.card {
|
|||
border-radius: 1em;
|
||||
}
|
||||
|
||||
:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
article h1, article h2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import { getMe } from "$lib/globals.svelte";
|
||||
import type { Handle } from "@sveltejs/kit";
|
||||
|
||||
|
||||
export const handle: Handle = async ({event, resolve }) => {
|
||||
event.locals.me = getMe();
|
||||
|
||||
return resolve(event);
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@ let { children, title = null } = $props();
|
|||
position: relative;
|
||||
font: inherit;
|
||||
|
||||
:global(a) {
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<script lang="ts">
|
||||
|
||||
let { query = $bindable<string>() }: {query?: string} = $props();
|
||||
</script>
|
||||
|
||||
<input value={query} type="search" name="query" class="bigsearch" />
|
||||
|
||||
<style>
|
||||
.bigsearch {
|
||||
width: 100%;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
import { RiEditLine, RiFlagLine, RiHistoryLine, RiHome2Line, RiUserLine } from "svelte-remixicon";
|
||||
import { RiHistoryLine, RiHome2Line, RiUserLine } from "svelte-remixicon";
|
||||
import type { PostEntry } from "./backend";
|
||||
import SLayout from "./SLayout.svelte";
|
||||
import GuildAbout from "./GuildAbout.svelte";
|
||||
|
|
@ -10,14 +10,10 @@
|
|||
import PostMeta from "./PostMeta.svelte";
|
||||
import GuildMenu from "./GuildMenu.svelte";
|
||||
import { SvelteShowdown } from "svelte-showdown";
|
||||
import VoteButton from "./VoteButton.svelte";
|
||||
import { getMe } from "./globals.svelte";
|
||||
|
||||
|
||||
|
||||
let { post }: { post: PostEntry } = $props();
|
||||
|
||||
let me = getMe();
|
||||
let { title, created_at, id, content = '', to } = post;
|
||||
</script>
|
||||
|
||||
|
|
@ -36,15 +32,8 @@ let { title, created_at, id, content = '', to } = post;
|
|||
</div><!-- .post-body -->
|
||||
<div class="message-stats">
|
||||
<!-- upvotes / downvotes -->
|
||||
<VoteButton />
|
||||
</div>
|
||||
<ul class="message-options row">
|
||||
{#if me && me.id !== post.author?.id}
|
||||
<li><a href="/report/post/{id}"><RiFlagLine/> Report</a></li>
|
||||
{/if}
|
||||
{#if me && me.id === post.author?.id }
|
||||
<li><a href="/edit/post/{id}"><RiEditLine/> Edit</a></li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -67,23 +56,7 @@ let { title, created_at, id, content = '', to } = post;
|
|||
</SLayout>
|
||||
|
||||
<style>
|
||||
.post-frame {
|
||||
position: relative;
|
||||
}
|
||||
.post-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.post-body {
|
||||
margin-inline-start: 3em;
|
||||
}
|
||||
.message-stats {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
width: 3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { RiHome2Line, RiUserLine } from "svelte-remixicon";
|
||||
import type { GuildEntry } from "./backend";
|
||||
import MenuLink from "./MenuLink.svelte";
|
||||
|
||||
let { guild } : { guild: GuildEntry } = $props();
|
||||
</script>
|
||||
|
||||
|
||||
<ul class="column">
|
||||
<MenuLink href="/+{guild.name}" icon={RiHome2Line} label="Home" />
|
||||
<li>
|
||||
<a href="/+{guild.name}">
|
||||
<RiHome2Line />
|
||||
Home</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { backend, type GuildEntry } from "./backend";
|
||||
|
||||
|
||||
let value = $state("");
|
||||
|
||||
let suggestions: Promise<GuildEntry[]> = $derived(getSuggestions(value));
|
||||
|
||||
async function getSuggestions (query: string): Promise<GuildEntry[]> {
|
||||
if (!query.trim()) return [];
|
||||
let readyBackend = await backend.withEvent(null).oath();
|
||||
let result = await readyBackend.submitJson("suggest/guild", { query });
|
||||
if (result.status !== 200) return [];
|
||||
let resultJ = await result.json();
|
||||
return resultJ?.has || [];
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="inset-suggestion">
|
||||
<input type="text" name="to" bind:value placeholder="your user page or +guild name" autocomplete="off" />
|
||||
<ul class="column">
|
||||
{#await suggestions}
|
||||
<!-- loading... -->
|
||||
{:then suggs}
|
||||
{#each suggs as sug}
|
||||
<li><button class="inline" onclick={(ev)=>{
|
||||
ev.preventDefault();
|
||||
value = sug.name;
|
||||
}}>
|
||||
<faint>+</faint>{sug.name}
|
||||
</button></li>
|
||||
{:else}
|
||||
<li>
|
||||
<faint>+{value}</faint>
|
||||
</li>
|
||||
{/each}
|
||||
{:catch ex}
|
||||
<li>
|
||||
<faint>+{value} ({ex})</faint>
|
||||
</li>
|
||||
{/await}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.inset-suggestion {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--background);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
:not(:focus) + ul:not(:active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { RiHome2Line, RiSettings2Line } from 'svelte-remixicon';
|
||||
import MenuLink from './MenuLink.svelte';
|
||||
|
||||
</script>
|
||||
|
||||
<ul class="column">
|
||||
<MenuLink href="/" icon={RiHome2Line} label="Home" />
|
||||
<MenuLink href="/settings" icon={RiSettings2Line} label="Settings" />
|
||||
</ul>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<script lang="ts">
|
||||
|
||||
let { icon, label, href } = $props();
|
||||
let Icon = $derived(icon);
|
||||
</script>
|
||||
|
||||
<li>
|
||||
<a {href}>
|
||||
<Icon />
|
||||
{label}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
li {
|
||||
min-height: 2em;
|
||||
padding: .5em;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
li:has(a:hover) {
|
||||
background-color: var(--background);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
|
||||
let { user } : {user: UserEntry} = $props();
|
||||
let enable_search = $derived(user !== null);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -14,26 +14,22 @@ let enable_search = $derived(user !== null);
|
|||
<div class="metanav">
|
||||
<ul>
|
||||
<li>
|
||||
{#if enable_search}
|
||||
<form action="/search"
|
||||
method="POST"
|
||||
class="mini-search-bar nomobile">
|
||||
<!-- csrf_token() -->
|
||||
<input type="search" name="q" placeholder="Search among {activePostCount()} posts" />
|
||||
<input type="search" disabled={true} name="q" placeholder="Search among {activePostCount()} posts" />
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
<a href="/search" aria-label="Search" title="Search" class="mobileonly">
|
||||
<RiSearchLine />
|
||||
</a>
|
||||
{:else}
|
||||
<div style="flex:1"></div>
|
||||
{/if}
|
||||
</li>
|
||||
{#if user}
|
||||
<li>
|
||||
<div class="header-username nomobile">
|
||||
<span><a href="/@{user.username}">@{user.username}</a></span>
|
||||
<span>{user.karma || 0} karma</span>
|
||||
<span>@{user.username}</span>
|
||||
<span>{0} karma</span>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/logout" aria-label="Log out" title="Log out"><RiLogoutBoxLine /></a></li>
|
||||
|
|
@ -98,7 +94,7 @@ let enable_search = $derived(user !== null);
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.mini-search-bar + a {display: none}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { RiHistoryLine, RiShieldCrossLine, RiUserLine } from "svelte-remixicon";
|
||||
import { RiHashtag, RiHistoryLine, RiUserLine } from "svelte-remixicon";
|
||||
import type { PostEntry } from "./backend";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ let { post } : {post: PostEntry }= $props();
|
|||
{#if post.author}<a href="/@{post.author.username}">@{post.author.username}</a>
|
||||
{:else}<i>Someone</i>{/if}</li>
|
||||
{#if post.to.type == 'guild'}
|
||||
<li><RiShieldCrossLine /> <a href="/+{post.to.name}">+{post.to.name}</a></li>
|
||||
<li><RiHashtag /> <a href="/+{post.to.name}">+{post.to.name}</a></li>
|
||||
{/if}
|
||||
<li><RiHistoryLine /> <time datetime={post.created_at}>{ DateTime.fromISO(post.created_at).toFormat('d LLL yyyy') }</time></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { RiLink, RiLock2Line, RiPlaneLine, RiStackLine } from "svelte-remixicon";
|
||||
|
||||
let { value = $bindable(0) } = $props();
|
||||
</script>
|
||||
|
||||
<ul class="grid">
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" name="privacy" value={0} bind:group={value} />
|
||||
<RiPlaneLine />
|
||||
Public
|
||||
<small class="faint">your followers and public timeline</small>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" name="privacy" value=1 bind:group={value} />
|
||||
<RiLink />
|
||||
Unlisted
|
||||
<small class="faint">your followers, hide from public timeline</small>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" name="privacy" value=2 bind:group={value} />
|
||||
<RiStackLine />
|
||||
Friends
|
||||
<small class="faint">mutual followers only</small>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" name="privacy" value=3 bind:group={value} />
|
||||
<RiLock2Line />
|
||||
Only you
|
||||
<small class="faint">nobody else</small>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
|
||||
@media (max-width: 1099px) {
|
||||
ul.grid {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 699px) {
|
||||
ul.grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
li:has(:checked) {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,21 +2,18 @@
|
|||
import { RiInformationLine, RiMenu3Line, RiShieldLine } from "svelte-remixicon";
|
||||
|
||||
let { children, title, left, right } = $props();
|
||||
|
||||
let mobiLeftActive = $state(false);
|
||||
let mobiRightActive = $state(false);
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="layout">
|
||||
<div class="layout-title">{title}</div>
|
||||
<div class="layout-left" class:active={mobiLeftActive}>{@render left()}</div>
|
||||
<div class="layout-left">{@render left()}</div>
|
||||
<div class="layout-content">{@render children()}</div>
|
||||
<div class="layout-right" class:active={mobiRightActive}>{@render right()}</div>
|
||||
<div class="layout-right">{@render right()}</div>
|
||||
|
||||
<div class="layout-licon" onclick={() => {mobiLeftActive = !mobiLeftActive;}}><RiMenu3Line /></div>
|
||||
<div class="layout-ricon" onclick={() => {mobiRightActive = !mobiRightActive;}}><RiInformationLine /></div>
|
||||
<div class="layout-licon" onclick={() => {}}><RiMenu3Line /></div>
|
||||
<div class="layout-ricon" onclick={() => {}}><RiInformationLine /></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -29,31 +26,15 @@ let mobiRightActive = $state(false);
|
|||
". title ."
|
||||
"left center right";
|
||||
margin: 1em 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-left { grid-area: left; padding-right: 1em; }
|
||||
.layout-right { grid-area: right; padding-left: 1em; }
|
||||
.layout-left { grid-area: left; }
|
||||
.layout-right { grid-area: right; }
|
||||
.layout-content { grid-area: center; }
|
||||
.layout-title { grid-area: title; text-align: center; font-size: 1.4em; }
|
||||
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.layout {
|
||||
grid-template-columns: 180px auto 180px;
|
||||
}
|
||||
|
||||
.layout-licon, .layout-ricon { display: none; }
|
||||
|
||||
}
|
||||
@media (min-width: 800px) and (max-width: 959px) {
|
||||
.layout-left, .layout-right {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.layout {
|
||||
grid-template-columns: 240px auto 240px;
|
||||
}
|
||||
|
|
@ -61,13 +42,13 @@ let mobiRightActive = $state(false);
|
|||
.layout-licon, .layout-ricon { display: none; }
|
||||
}
|
||||
|
||||
@media (min-width: 1080px) {
|
||||
@media (min-width: 960px) {
|
||||
.layout {
|
||||
grid-template-columns: 270px auto 270px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1080px) {
|
||||
.layout {
|
||||
grid-template-columns: 300px auto 300px;
|
||||
}
|
||||
|
|
@ -89,24 +70,6 @@ let mobiRightActive = $state(false);
|
|||
}
|
||||
|
||||
.layout-left, .layout-right { display: none; }
|
||||
|
||||
.layout-left.active, .layout-right.active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2.5em;
|
||||
width: 80%;
|
||||
min-height: calc(100vh - 6em);
|
||||
background-color: var(--canvas);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.layout-left.active {
|
||||
left: 0;
|
||||
}
|
||||
.layout-right.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { getMe } from "$lib/globals.svelte";
|
||||
import { browser } from "$app/environment";
|
||||
import AsideCard from "./AsideCard.svelte";
|
||||
import { RiCake2Line, RiCakeLine, RiFlowerLine, RiInfoCardLine, RiShieldStarLine } from 'svelte-remixicon';
|
||||
import { RiCake2Line, RiCakeLine, RiInfoCardLine, RiShieldStarLine } from 'svelte-remixicon';
|
||||
import { DateTime } from 'luxon';
|
||||
import type { UserEntry } from "./backend";
|
||||
|
||||
|
|
@ -24,9 +24,6 @@ let { badges = [] } = user;
|
|||
{#if user.joined_at}
|
||||
<li><RiCakeLine /> Cake day: {DateTime.fromISO(user.joined_at).toFormat('d LLL yyyy')}</li>
|
||||
{/if}
|
||||
{#if user.id === getMe()?.id && user.karma}
|
||||
<li><RiFlowerLine /> {user.karma} karma</li>
|
||||
{/if}
|
||||
{#if badges.indexOf('administrator') >= 0}
|
||||
<li><RiShieldStarLine /> Administrator</li>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { RiUserLine } from "svelte-remixicon";
|
||||
import type { UserEntry } from "./backend";
|
||||
import MenuLink from "./MenuLink.svelte";
|
||||
|
||||
let { user } : { user: UserEntry } = $props();
|
||||
</script>
|
||||
|
||||
|
||||
<ul class="column">
|
||||
<MenuLink icon={RiUserLine} href="/@{user.username}" label="Profile" />
|
||||
<li><RiUserLine /> <a href="/@{user.username}">Profile</a></li>
|
||||
</ul>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { RiHeartFill, RiHeartLine, RiThumbDownFill, RiThumbDownLine } from "svelte-remixicon";
|
||||
|
||||
|
||||
let vote = $state(0);
|
||||
let { score } : { score?: number | null } = $props();
|
||||
|
||||
</script>
|
||||
|
||||
<div class="upvote-button">
|
||||
{#if vote > 0}
|
||||
<button class="inline">
|
||||
<RiHeartFill />
|
||||
</button>
|
||||
{:else}
|
||||
<button class="inline">
|
||||
<RiHeartLine />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<strong>{score ?? '-'}</strong>
|
||||
|
||||
{#if vote > 0}
|
||||
<button class="inline">
|
||||
<RiThumbDownFill />
|
||||
</button>
|
||||
{:else}
|
||||
<button class="inline">
|
||||
<RiThumbDownLine />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.upvote-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -18,9 +18,7 @@ export type GuildEntry = {
|
|||
name: string,
|
||||
display_name?: string,
|
||||
description?: string,
|
||||
created_at?: string,
|
||||
subscriber_count?: number,
|
||||
post_count?: number
|
||||
created_at?: string
|
||||
};
|
||||
|
||||
export type PostEntry = {
|
||||
|
|
@ -39,37 +37,10 @@ export type ServerHealth = {
|
|||
post_count: number,
|
||||
user_count: number,
|
||||
me: string | null,
|
||||
csrf_token?: string,
|
||||
color_theme?: number
|
||||
csrf_token?: string
|
||||
};
|
||||
|
||||
|
||||
// caches an oath (CSRF token)
|
||||
class OathKeeper {
|
||||
lastOath : number;
|
||||
csrfToken: string | null;
|
||||
|
||||
constructor () {
|
||||
this.lastOath = 0;
|
||||
this.csrfToken = null;
|
||||
}
|
||||
|
||||
set (tok: string) {
|
||||
this.lastOath = +new Date;
|
||||
this.csrfToken = tok;
|
||||
}
|
||||
|
||||
get () {
|
||||
if (this.lastOath === 0 || +new Date() - this.lastOath > 1800000) {
|
||||
// 30 minutes decay
|
||||
return null;
|
||||
}
|
||||
return this.csrfToken;
|
||||
}
|
||||
}
|
||||
|
||||
const oathKeeper = new OathKeeper();
|
||||
|
||||
export class Backend {
|
||||
static ENDPOINT_BASE = '/v1';
|
||||
|
||||
|
|
@ -77,7 +48,8 @@ export class Backend {
|
|||
}
|
||||
|
||||
async fetch(url: string, options?: RequestInit) {
|
||||
return await fetch(`${Backend.ENDPOINT_BASE}/${url.replace(/^\/+/, '')}`, options);
|
||||
console.info(`fetch ${Backend.ENDPOINT_BASE}/${encodeURIComponent(url)}`)
|
||||
return await fetch(`${Backend.ENDPOINT_BASE}/${encodeURIComponent(url)}`, options);
|
||||
}
|
||||
|
||||
withEvent(event: any) {
|
||||
|
|
@ -86,42 +58,32 @@ export class Backend {
|
|||
}
|
||||
|
||||
class EventBackend extends Backend {
|
||||
event: any | null;
|
||||
event: any;
|
||||
|
||||
constructor (event: any | null) {
|
||||
constructor (event: any) {
|
||||
super();
|
||||
this.event = event;
|
||||
}
|
||||
|
||||
async oath (): Promise<CsrfEventBackend> {
|
||||
let csrfToken = oathKeeper.get();
|
||||
if (!csrfToken) {
|
||||
const resp = await this.fetch("oath");
|
||||
if (resp.status !== 200) {
|
||||
throw new Error();
|
||||
}
|
||||
const respJ = await resp.json();
|
||||
csrfToken = respJ.csrf_token;
|
||||
}
|
||||
if (!csrfToken) {
|
||||
console.warn("csrf_token is null");
|
||||
}
|
||||
else {
|
||||
oathKeeper.set(csrfToken);
|
||||
}
|
||||
const { csrfToken } = respJ;
|
||||
return new CsrfEventBackend(this.event, csrfToken);
|
||||
}
|
||||
|
||||
async fetch(url: string, options?: RequestInit): Promise<Response> {
|
||||
console.debug(`fetch ${Backend.ENDPOINT_BASE}/${url.replace(/^\/+/, '')}`);
|
||||
return await (this.event?.fetch||fetch)(`${Backend.ENDPOINT_BASE}/${url.replace(/^\/+/, '')}`, options);
|
||||
return await this.event.fetch(`${Backend.ENDPOINT_BASE}/${url.replace(/^\/+/, '')}`, options);
|
||||
}
|
||||
}
|
||||
|
||||
class CsrfEventBackend extends EventBackend {
|
||||
csrfToken: string | null;
|
||||
csrfToken: string;
|
||||
|
||||
constructor(event: EventBackend | null, csrfToken: string | null) {
|
||||
constructor(event:EventBackend, csrfToken: string) {
|
||||
super(event);
|
||||
this.csrfToken = csrfToken;
|
||||
}
|
||||
|
|
@ -132,7 +94,7 @@ class CsrfEventBackend extends EventBackend {
|
|||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
'x-csrftoken': this.csrfToken || ""
|
||||
'x-csrftoken': this.csrfToken
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,23 +3,21 @@ import type { ServerHealth, UserEntry } from "$lib/backend";
|
|||
|
||||
let health : {
|
||||
app_name: string, version: string, post_count: number,
|
||||
user_count: number, me: null | UserEntry, color_theme: number
|
||||
user_count: number, me: null | UserEntry
|
||||
} = $state({
|
||||
app_name: 'app_name',
|
||||
version: "?.?",
|
||||
post_count: NaN,
|
||||
user_count: NaN,
|
||||
me: null,
|
||||
color_theme: 0
|
||||
me: null
|
||||
});
|
||||
|
||||
|
||||
export function setHealth ({ name, version, post_count, user_count, color_theme = 0 }: ServerHealth) {
|
||||
export function setHealth ({ name, version, post_count, user_count }: ServerHealth) {
|
||||
health.app_name = name;
|
||||
health.version = version;
|
||||
health.post_count = post_count;
|
||||
health.user_count = user_count;
|
||||
health.color_theme = color_theme;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -49,10 +47,3 @@ export function activeUserCount (): number{
|
|||
return health.user_count || 0;
|
||||
}
|
||||
|
||||
export async function sleep (ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
export function getColorThemeCode (): number {
|
||||
return health.color_theme;
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import { getColorThemeCode } from '$lib/globals.svelte';
|
||||
import { version } from '$app/environment';
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { ServerHealth, UserEntry } from '$lib/backend';
|
||||
|
|
@ -18,11 +17,6 @@ let { data, children } : {
|
|||
let {me} = $derived(data);
|
||||
|
||||
const flash = getFlash(page);
|
||||
|
||||
let colorThemeCode = $derived(getColorThemeCode());
|
||||
let colorSchemeCode = $derived(Math.floor(colorThemeCode / 256));
|
||||
let colorScheme = $derived(colorSchemeCode == 1? 'dark': colorSchemeCode == 2? 'light': 'system');
|
||||
let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThemeCode % 256}`);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -36,26 +30,23 @@ let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThe
|
|||
<!-- end SEO tags -->
|
||||
</svelte:head>
|
||||
|
||||
<global-wrapper class={colorThemeCls}>
|
||||
<header>
|
||||
<header>
|
||||
<h1>
|
||||
<a href="/">{appName()}</a>
|
||||
</h1>
|
||||
<!-- .metanav -->
|
||||
<MetaNav user={me} />
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<main>
|
||||
{#if $flash}
|
||||
<FlashMessage message={$flash?.message}/>
|
||||
{/if}
|
||||
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
<MobileFooter />
|
||||
</global-wrapper>
|
||||
</main>
|
||||
|
||||
<MobileFooter />
|
||||
|
||||
<style>
|
||||
header {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ async function loadMe(event: LoadEvent, me?: string): Promise<UserEntry | null>
|
|||
}
|
||||
|
||||
|
||||
export async function load(event) {
|
||||
export async function load(event): Promise<{site: ServerHealth | null, me: UserEntry | null} > {
|
||||
let site = await loadSite(event);
|
||||
let me = await loadMe (event, site?.me || void 0);
|
||||
return { site, me };
|
||||
|
|
|
|||
|
|
@ -1,55 +1,40 @@
|
|||
<script lang="ts">
|
||||
import AsideCard from "$lib/AsideCard.svelte";
|
||||
import type { GuildEntry, PostEntry } from "$lib/backend";
|
||||
import type { PostEntry } from "$lib/backend";
|
||||
import Centered from "$lib/Centered.svelte";
|
||||
import Feed from "$lib/Feed.svelte";
|
||||
import { activePostCount, activeUserCount, appName, getMe } from "$lib/globals.svelte";
|
||||
import HomeMenu from "$lib/HomeMenu.svelte";
|
||||
import SLayout from "$lib/SLayout.svelte";
|
||||
|
||||
let me = getMe();
|
||||
let { data } : { data: { feed: PostEntry[], top_guilds: GuildEntry[] } } = $props();
|
||||
let { feed } : { feed: PostEntry[] } = $derived(data);
|
||||
let { top_guilds }: { top_guilds: GuildEntry[] } = $derived(data);
|
||||
let { data } : { data: { feed: PostEntry[] } } = $props();
|
||||
let feed: PostEntry[] = $state([]);
|
||||
let feedIndex = $state(0);
|
||||
|
||||
// $effect(() => {
|
||||
// if (me && data?.feed) {
|
||||
// feed.push(...data.feed.slice(feedIndex));
|
||||
// feedIndex += feed.length;
|
||||
// } else if (me) {
|
||||
// console.log('data.feed is', data?.feed)
|
||||
// }
|
||||
// });
|
||||
$effect(() => {
|
||||
if (me && feed) {
|
||||
feed.push(...data.feed.slice(feedIndex));
|
||||
feedIndex += feed.length;
|
||||
} else if (me) {
|
||||
console.log('feed is', feed)
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if me}
|
||||
<SLayout title={appName()}>
|
||||
<Feed posts={feed} />
|
||||
|
||||
{#snippet left()}
|
||||
<HomeMenu />
|
||||
...
|
||||
{/snippet}
|
||||
|
||||
{#snippet right()}
|
||||
{#if top_guilds}
|
||||
<AsideCard title="Top Communities">
|
||||
<ul>
|
||||
{#each top_guilds as gu}
|
||||
<li>
|
||||
<a href="/+{gu.name}">+{gu.name}</a> -
|
||||
<strong>{gu.post_count ?? 0}</strong> posts -
|
||||
<strong>{gu.subscriber_count ?? 0}</strong> subscribers
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</AsideCard>
|
||||
{/if}
|
||||
...
|
||||
{/snippet}
|
||||
</SLayout>
|
||||
{:else}
|
||||
<Centered>
|
||||
<p>{appName()} is a social media platform made by people like you.<br />
|
||||
<a href="/login">Log in</a> or <a href="/register">sign up</a> to see {activePostCount()} posts and talk with {activeUserCount()} users right now!</p>
|
||||
<a href="/login">Log in</a> or (sign up) to see {activePostCount()} posts and talk with {activeUserCount()} users right now!</p>
|
||||
</Centered>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
import { backend, type GuildEntry, type PostEntry } from '$lib/backend.js';
|
||||
import { getMe, sleep } from '$lib/globals.svelte.js';
|
||||
import { backend, type PostEntry } from '$lib/backend.js';
|
||||
import { getMe } from '$lib/globals.svelte.js';
|
||||
import type { LoadEvent } from '@sveltejs/kit';
|
||||
|
||||
let isFirstLoad = false;
|
||||
|
||||
async function loadFeed (event: LoadEvent): Promise<PostEntry[] | null> {
|
||||
const resp = await backend.withEvent(event).fetch('home/feed');
|
||||
|
||||
if ([200].indexOf(resp.status) < 0) {
|
||||
console.error(`fetch feed returned status ${resp.status}`);
|
||||
return null;
|
||||
}
|
||||
if ([200].indexOf(resp.status) < 0) return null;
|
||||
|
||||
try {
|
||||
const respJ = await resp.json();
|
||||
|
||||
|
|
@ -20,40 +17,16 @@ async function loadFeed (event: LoadEvent): Promise<PostEntry[] | null> {
|
|||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function loadTopGuilds (event: LoadEvent): Promise<GuildEntry[] | null> {
|
||||
const resp = await backend.withEvent(event).fetch('top/guilds');
|
||||
|
||||
if ([200].indexOf(resp.status) < 0) {
|
||||
console.error(`fetch top_guilds returned status ${resp.status}`);
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const respJ = await resp.json();
|
||||
|
||||
const { has: top_guilds } : { has: GuildEntry[] } = respJ;
|
||||
return top_guilds;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function load(event): Promise<{feed: PostEntry[] | null, top_guilds?: GuildEntry[] | null}> {
|
||||
// delay loading after layout
|
||||
if (!isFirstLoad) {
|
||||
await sleep(2000);
|
||||
isFirstLoad = true;
|
||||
}
|
||||
|
||||
export async function load(event): Promise<{feed: PostEntry[] | null}> {
|
||||
let feed = null;
|
||||
let me = getMe();
|
||||
let top_guilds = null;
|
||||
|
||||
if (me) {
|
||||
feed = await loadFeed(event);
|
||||
top_guilds = await loadTopGuilds(event);
|
||||
}
|
||||
|
||||
return { feed, top_guilds };
|
||||
return { feed };
|
||||
}
|
||||
|
|
@ -1,42 +1,31 @@
|
|||
|
||||
|
||||
import { backend, type GuildEntry } from '$lib/backend.js';
|
||||
import { backend } from '$lib/backend.js';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
export async function load(event) {
|
||||
const { params } = event;
|
||||
const { id } = params;
|
||||
|
||||
|
||||
const resp = await backend.withEvent(event).fetch('post/' + encodeURIComponent(id));
|
||||
|
||||
if(resp.status === 404) {
|
||||
error(404);
|
||||
}
|
||||
|
||||
let post;
|
||||
try{
|
||||
const respJ = await resp.json();
|
||||
|
||||
let { posts } = respJ;
|
||||
post = posts[id];
|
||||
|
||||
if (post?.to && post.to.type === 'guild') {
|
||||
const guild: GuildEntry = post.to;
|
||||
const guildResp = await backend.withEvent(event).fetch('guild/' + encodeURIComponent(guild.id));
|
||||
const guildJson = await guildResp.json();
|
||||
const guildInfo = guildJson?.guilds?.[guild.id];
|
||||
guildInfo.type = 'guild';
|
||||
post.to = guildInfo || guild;
|
||||
console.log(post.to);
|
||||
}
|
||||
return posts[id];
|
||||
|
||||
//return {};
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
error(502);
|
||||
}
|
||||
|
||||
return post;
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { backend } from '$lib/backend';
|
||||
import { backend } from '$lib/backend.js';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
export async function load(event) {
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
<script lang="ts">
|
||||
import Centered from "$lib/Centered.svelte";
|
||||
import { getMe } from "$lib/globals.svelte";
|
||||
import GuildSelect from "$lib/GuildSelect.svelte";
|
||||
import PrivacySelect from "$lib/PrivacySelect.svelte";
|
||||
import SLayout from "$lib/SLayout.svelte";
|
||||
import { RiErrorWarningLine } from "svelte-remixicon";
|
||||
|
||||
let me = getMe();
|
||||
|
||||
let content = $state("");
|
||||
let privacy = $state(0);
|
||||
|
||||
let contentLength = $derived(content.length);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{#if me}
|
||||
<SLayout title="New post">
|
||||
<form method="POST" class="card">
|
||||
<p>Posting as <strong>@{me.username}</strong></p>
|
||||
|
||||
<label>
|
||||
Post to: <!-- TODO autocomplete! -->
|
||||
<GuildSelect />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="text" name="title" maxlength=256 placeholder="An interesting title"/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<textarea bind:value={content}></textarea>
|
||||
<output><small class="faint">{contentLength} chars</small></output>
|
||||
</label>
|
||||
|
||||
<PrivacySelect bind:value={privacy} />
|
||||
{#if privacy === 0}
|
||||
<span class="warning"><RiErrorWarningLine /> Your post will be PUBLIC!</span>
|
||||
{/if}
|
||||
|
||||
<button class="card primary" disabled>Create</button>
|
||||
|
||||
</form>
|
||||
|
||||
{#snippet left()}
|
||||
...
|
||||
{/snippet}
|
||||
|
||||
{#snippet right()}
|
||||
...
|
||||
{/snippet}
|
||||
</SLayout>
|
||||
{:else}
|
||||
<Centered>
|
||||
You must be <a href="login">logged in</a> in order to create posts.
|
||||
</Centered>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
color: var(--text-primary);
|
||||
min-height: 10em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input[name="title"] {
|
||||
width: 100%;
|
||||
margin: 6px 0;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<card>
|
||||
<form method="POST" use:enhance>
|
||||
<label>
|
||||
<span><RiUserLine /> Username / <RiMailLine /> E-mail</span>
|
||||
<span><RiUserLine /> Username / <RiMailLine /> E-mail:</span>
|
||||
<input type="text" name="username" />
|
||||
</label>
|
||||
<label>
|
||||
|
|
@ -28,7 +28,6 @@
|
|||
<button class="primary">Log in</button>
|
||||
</form>
|
||||
|
||||
<!-- todo register link -->
|
||||
</card>
|
||||
</Centered>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ export async function load (event) {
|
|||
redirect(303, next);
|
||||
}
|
||||
|
||||
// cookies managed by backend
|
||||
const resp = await backend.withEvent(event).fetch("logout", {method: 'POST'});
|
||||
|
||||
if ([200, 204].indexOf(resp.status) >= 0) {
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import Centered from "$lib/Centered.svelte";
|
||||
import { RiInformationLine, RiUserLine } from "svelte-remixicon";
|
||||
|
||||
let username = $state("");
|
||||
// TODO add effect
|
||||
let usernameTaken = $state(true);
|
||||
let email = $state("");
|
||||
let disabled = $derived(username.length < 2 || username.length > 30 ||
|
||||
usernameTaken || !/^.+@.+\.[a-z]{2,15}$/.test(email)
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
<Centered narrow>
|
||||
<card>
|
||||
<form method="POST" use:enhance>
|
||||
<label>
|
||||
<span><RiUserLine /> Username</span>
|
||||
<input type="text" name="username" bind:value={username} />
|
||||
</label>
|
||||
<label>
|
||||
<span><RiUserLine /> E-mail</span>
|
||||
<small class="faint">Must be a working e-mail address <abbr title="Will be used for password recovery and important communications"><RiInformationLine /></abbr></small>
|
||||
<input type="text" name="username" bind:value={email} />
|
||||
</label>
|
||||
...
|
||||
|
||||
<button class="primary" disabled={disabled}>Sign up</button>
|
||||
</form>
|
||||
</card>
|
||||
</Centered>
|
||||
|
||||
|
||||
<style>
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1em auto;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { backend } from '$lib/backend';
|
||||
import type { Action, Actions } from '@sveltejs/kit';
|
||||
|
||||
|
||||
|
||||
export const actions = {
|
||||
default: async (event) => {
|
||||
const { request } = event;
|
||||
const data = await request.formData()
|
||||
|
||||
const query = data.get("query");
|
||||
if ("string" !== typeof query) {
|
||||
console.log("query is", query);
|
||||
return;
|
||||
}
|
||||
|
||||
const client = await backend.withEvent(event).oath();
|
||||
const resp = await client.submitJson('search/top', { query });
|
||||
|
||||
const { status } = resp;
|
||||
const respData = await resp.json();
|
||||
|
||||
if (status !== 200) {
|
||||
event.locals.results = [];
|
||||
event.locals.query = query;
|
||||
console.log({ query, status })
|
||||
return;
|
||||
}
|
||||
|
||||
const { has: results } = respData;
|
||||
|
||||
event.locals.results = results;
|
||||
event.locals.query = query;
|
||||
console.log(event.locals);
|
||||
return
|
||||
}
|
||||
} satisfies Actions;
|
||||
|
||||
export async function load (event) {
|
||||
const { results, query } = event.locals;
|
||||
|
||||
console.log({ results, query });
|
||||
return { results, query };
|
||||
}
|
||||
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import BigSearchInput from "$lib/BigSearchInput.svelte";
|
||||
import Feed from "$lib/Feed.svelte";
|
||||
import { RiSearchLine } from "svelte-remixicon";
|
||||
import type { PageProps } from "./$types";
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
let { query, results } = $derived(data);
|
||||
</script>
|
||||
|
||||
<form method="POST" use:enhance>
|
||||
<ul class="row">
|
||||
<BigSearchInput bind:query />
|
||||
<button class="inline"><RiSearchLine /></button>
|
||||
</ul>
|
||||
</form>
|
||||
{#if query}
|
||||
<Feed posts={results} />
|
||||
{/if}
|
||||
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
|
||||
<script lang="ts">
|
||||
import MenuLink from "$lib/MenuLink.svelte";
|
||||
import SLayout from "$lib/SLayout.svelte";
|
||||
import { RiBrush2Line } from "svelte-remixicon";
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
|
||||
<SLayout title="Settings">
|
||||
{@render children()}
|
||||
{#snippet left()}
|
||||
<ul class="column">
|
||||
<MenuLink href="/settings/appearance" icon={RiBrush2Line} label="Appearance" />
|
||||
</ul>
|
||||
{/snippet}
|
||||
{#snippet right()}
|
||||
<button class="primary card">Save</button>
|
||||
{/snippet}
|
||||
</SLayout>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
|
||||
Select a setting from the left menu to change its settings
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
|
||||
TODO
|
||||
|
|
@ -16,6 +16,7 @@ export async function load(event) {
|
|||
const respJ = await resp.json();
|
||||
|
||||
let { users } = respJ;
|
||||
console.log(users);
|
||||
if (users[id]) {
|
||||
if (users[id].username) {
|
||||
redirect(302, "/@" +users[id].username );
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 318 B |
Loading…
Add table
Add a link
Reference in a new issue