tezlm/discard
Archived
1
0
Fork 0
Code Issues Pull requests Releases Activity

switch build system aaaaaaaa

Browse source
This commit is contained in:
tezlm 2022-06-30 07:07:33 -07:00 committed by tezlm
parent 0000004052
commit 0000005089
Signed by: tezlm
GPG key ID: 649733FCD94AFBBA
24 changed files with 18443 additions and 4340 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
node_modules
dist
.cache
justfile

17264
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

21
package.json
View file

@ -1,16 +1,23 @@
{
"name": "not-discord",
"name": "discard",
"description": "not discord",
"version": "0.1.0",
"description": "this is 100%, definitely, without a doubt *not* discord",
"author": "tezlm",
"license": "ISC",
"type": "module",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "next",
"svelte": "^3.48.0",
"vite": "^2.9.13"
},
"dependencies": {
"parcel-bundler": "^1.12.5",
"parcel-plugin-svelte": "^4.0.9",
"svelte": "^3.48.0"
"browserify": "^17.0.0",
"matrix-js-sdk": "^18.1.0",
"sanitize-html": "^2.7.0"
}
}

4933
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

2
src/client/actions.js
View file

@ -52,7 +52,7 @@ export default {
}
},
rooms: {
switch(room) {
focus(room) {
state.focusedRoomId = room.roomId;
state.focusedRoom.set(room);
state.timeline.set(room.timeline);

341
src/client/browser-matrix.js.map Normal file
View file

File diff suppressed because one or more lines are too long

1
src/client/index.js
View file

@ -1,4 +1,5 @@
import "./browser-matrix.js";
// import "matrix-js-sdk";
import state from "./state.js";
import actions from "./actions.js";
export { state, actions };

6
src/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet"/>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<script src="index.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>

0
src/index.js → src/script.js
View file

0
src/index.css → src/style.css
View file

40
src/ui/RoomContent.svelte
View file

@ -1,40 +0,0 @@
<script>
import Message from './Message.svelte';
let timeline = state.timeline;
const defaultAvatar = "mxc://celery.eu.org/Wm9T9Nnch8IUQsVaJAInkaoVsgCJlmGx";
const getUser = (event) => state.client.getUser(event.getSender());
const getDisplayName = (event) => getUser(event).displayName;
const getAvatar = (event) => state.client.mxcUrlToHttp(getUser(event).avatarUrl ?? defaultAvatar, 40, 40);
function shouldSplit(ev, prev) {
if (!prev) return true;
if (prev.getType() !== "m.room.message") return true;
if (prev.getSender() !== ev.getSender()) return true;
if (ev.getDate() - prev.getDate() < 1000 * 60 * 3) return false;
return true;
}
</script>
<style>
.content {
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: 1em;
overflow: auto;
}
</style>
<div class="content">
{#each $timeline as event, i}
{#if event.getType() === "m.room.message"}
<Message
author={getUser(event).displayName}
timestamp={event.getDate()}
content={event.getContent().body}
avatarurl={getAvatar(event)}
header={shouldSplit(event, $timeline[i - 1]) ? true : null}
/>
{/if}
{/each}
</div>

28
src/ui/RoomInput.svelte
View file

@ -1,28 +0,0 @@
<script>
let value = "";
$: if (value.endsWith('\n')) {
console.log("submit")
}
</script>
<style>
.input {
padding: 12px;
margin: 0 16px;
border-radius: 8px;
background: #40444b;
}
.input textarea {
font: inherit;
background: none;
color: var(--fg-content);
border: none;
outline: none;
width: 100%;
height: 100%;
resize: none;
}
</style>
<div class="input">
<textarea rows="1" bind:value={value}></textarea>
</div>

0
src/ui/parts/Button.svelte → src/ui/atoms/Button.svelte
View file

0
src/ui/parts/Input.svelte → src/ui/atoms/Input.svelte
View file

0
src/ui/parts/UserId.svelte → src/ui/atoms/UserId.svelte
View file

2
src/ui/RoomNav.svelte → src/ui/nav/RoomNav.svelte
View file

@ -36,6 +36,6 @@ state.focusedRoom.subscribe((newRoom) => focusedRoom = newRoom);
</style>
<div class="nav">
{#each rooms as room}
<div class={focusedRoom?.roomId === room.roomId ? "room selected" : "room"} on:click={actions.rooms.switch(room)}>{room.name}</div>
<div class={focusedRoom?.roomId === room.roomId ? "room selected" : "room"} on:click={actions.rooms.focus(room)}>{room.name}</div>
{/each}
</div>

0
src/ui/SpaceNav.svelte → src/ui/nav/SpaceNav.svelte
View file

5
src/ui/Message.svelte → src/ui/room/Message.svelte
View file

@ -1,4 +1,5 @@
<script>
import * as sanitizeHtml from "sanitize-html";
export let content, author, avatarurl, timestamp;
export let header = false;
$: timediff = Date.now() - timestamp;
@ -97,7 +98,7 @@ function formatDate(d) {
<div class="message {header ? 'header' : ''}">
<div class="side">
{#if header}
<img class="avatar" src="{avatarurl}" />
<img class="avatar" alt="avatar for {author}" src="{avatarurl}" />
{:else}
<time datetime={time.iso} class="timestamp">{time.day}</time>
{/if}
@ -107,6 +108,6 @@ function formatDate(d) {
<span class="author">{author}</span>
<time datetime={time.iso} class="timestamp inline">{time.human}</time>
{/if}
<div>{content}</div>
<div>{content.body}</div>
</div>
</div>

3
src/ui/Room.svelte → src/ui/room/Room.svelte
View file

@ -1,6 +1,7 @@
<script>
import RoomContent from './RoomContent.svelte';
import RoomInput from './RoomInput.svelte';
let room = state.focusedRoom;
</script>
<style>
.room {
@ -14,5 +15,5 @@ import RoomInput from './RoomInput.svelte';
<div class="room">
<RoomContent />
<RoomInput />
<RoomInput placeholder={"Message " + ($room ?? {}).name} />
</div>

80
src/ui/room/RoomContent.svelte Normal file
View file

@ -0,0 +1,80 @@
<script>
import Message from './Message.svelte';
let timeline = state.timeline;
let container, scroller, atBottom = true;
const defaultAvatar = "mxc://celery.eu.org/Wm9T9Nnch8IUQsVaJAInkaoVsgCJlmGx";
const getUser = (event) => state.client.getUser(event.getSender());
const getDisplayName = (event) => getUser(event).displayName;
const getAvatar = (event) => state.client.mxcUrlToHttp(getUser(event).avatarUrl ?? defaultAvatar, 40, 40);
function shouldSplit(ev, prev) {
if (!prev) return true;
if (prev.getType() !== "m.room.message") return true;
if (prev.getSender() !== ev.getSender()) return true;
if (ev.getDate() - prev.getDate() < 1000 * 60 * 3) return false;
return true;
}
function handleScroll() {
atBottom = scroller.scrollTop > scroller.scrollTopMax - 20;
maybePaginate();
}
async function maybePaginate() {
if (scroller.scrollTop > 200) return;
const lastScrollHeight = scroller.scrollHeight;
const liveTimeline = state.client.getRoom(state.focusedRoomId).getLiveTimeline();
await state.client.paginateEventTimeline(liveTimeline, { backwards: true, limit: 50 });
const scrollDiff = scroller.scrollHeight - lastScrollHeight;
console.log(scroller.scrollHeight, lastScrollHeight, scrollDiff)
scroller.scrollTop += scrollDiff;
}
timeline.subscribe(() => {
if (scroller && atBottom) {
queueMicrotask(() => scroller.scrollTo(0, scroller.scrollTopMax));
}
});
state.focusedRoom.subscribe(() => {
if (scroller) {
scroller.scrollTo(0, scroller.scrollTopMax);
maybePaginate();
}
});
</script>
<style>
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: end;
overflow: hidden;
}
.scroller {
overflow-y: auto;
}
.spacer {
height: 1em;
}
</style>
<div class="content" bind:this={container}>
<div class="scroller" on:scroll={handleScroll} bind:this={scroller}>
{#each $timeline as event, i}
{#if event.getType() === "m.room.message"}
<Message
author={getUser(event).displayName}
timestamp={event.getDate()}
content={event.getContent()}
avatarurl={getAvatar(event)}
header={shouldSplit(event, $timeline[i - 1]) ? true : null}
/>
{/if}
{/each}
<div class="spacer"></div>
</div>
</div>

36
src/ui/room/RoomInput.svelte Normal file
View file

@ -0,0 +1,36 @@
<script>
export let placeholder;
let rows = 1;
function handleInput(e) {
const value = e.target.value;
if (e.key === "Backspace" || e.key === "Delete" || (e.key === "Enter" && e.shiftKey)) {
rows = Math.min(value.split("\n").length, 10);
} else if (e.key === "Enter" && value.trim()) {
state.client.sendEvent(state.focusedRoomId, null, "m.room.message", { body: value.trim() });
e.target.value = "";
}
}
</script>
<style>
.input {
padding: 12px;
margin: 0 16px 0;
border-radius: 8px;
background: #40444b;
}
.input textarea {
font: inherit;
background: none;
color: var(--fg-content);
border: none;
outline: none;
width: 100%;
height: 100%;
resize: none;
}
</style>
<div class="input">
<textarea rows={rows} on:keydown={e => setTimeout(() => handleInput(e), 1)} placeholder={placeholder}></textarea>
</div>

6
src/ui/scenes/Chat.svelte
View file

@ -1,7 +1,7 @@
<script>
import Room from '../Room.svelte';
import RoomNav from '../RoomNav.svelte';
import SpaceNav from '../SpaceNav.svelte';
import Room from '../room/Room.svelte';
import RoomNav from '../nav/RoomNav.svelte';
import SpaceNav from '../nav/SpaceNav.svelte';
</script>
<SpaceNav/>
<RoomNav/>

6
src/ui/scenes/LoginRegister.svelte
View file

@ -1,7 +1,7 @@
<script>
import Input from "../parts/Input.svelte";
import Button from "../parts/Button.svelte";
import UserId from "../parts/UserId.svelte";
import Input from "../atoms/Input.svelte";
import Button from "../atoms/Button.svelte";
import UserId from "../atoms/UserId.svelte";
let type = "login";
let localpart, homeserver, password, error;

8
vite.config.js Normal file
View file

@ -0,0 +1,8 @@
import { defineConfig } from "vite"
import { svelte } from "@sveltejs/vite-plugin-svelte"
// https://vitejs.dev/config/
export default defineConfig({
root: "src",
plugins: [svelte()],
});