Messing around
This commit is contained in:
parent
0b4889763e
commit
a5a39844a3
GPG key ID:
649733FCD94AFBBA
36 changed files with 2001 additions and 1 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
dist
|
||||
10
README.md
10
README.md
|
|
@ -1,3 +1,11 @@
|
|||
# frontend-web
|
||||
|
||||
todo
|
||||
work in progress, todo: write readme.md
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
$ pnpm install
|
||||
$ pnpm run dev # for development
|
||||
$ pnpm run build # for production
|
||||
```
|
||||
|
|
|
|||
8
config.md
Normal file
8
config.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# config/interactions
|
||||
|
||||
detailing the degrees of freedom
|
||||
|
||||
## threads
|
||||
|
||||
- show/hide unread threads
|
||||
- show/hide ignored threads
|
||||
19
design.md
Normal file
19
design.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# design notes
|
||||
|
||||
## colors
|
||||
|
||||
- text:
|
||||
- text dim:
|
||||
- text bright:
|
||||
- background:
|
||||
- background-dim:
|
||||
- background-dim-2:
|
||||
- background-dim-3:
|
||||
- accent:
|
||||
- link:
|
||||
|
||||
## fonts
|
||||
|
||||
- main: Atkinson Hyperlegible
|
||||
- display:
|
||||
- monospace:
|
||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>jackwagon</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
20
package.json
Normal file
20
package.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "frontend-sdk",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"sdk": "git+https://git.celery.eu.org/jackwagon/sdk-ts",
|
||||
"solid-js": "^1.8.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.69.5",
|
||||
"typescript": "^5.3.2",
|
||||
"vite": "^5.0.5",
|
||||
"vite-plugin-solid": "^2.7.2"
|
||||
}
|
||||
}
|
||||
1230
pnpm-lock.yaml
Normal file
1230
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
222
src/App.scss
Normal file
222
src/App.scss
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
#root {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
grid-template-areas: "nav-spaces header header header"
|
||||
"nav-spaces nav-rooms main sidebar"
|
||||
"status status main sidebar";
|
||||
grid-template-columns: 64px 256px 1fr 256px;
|
||||
grid-template-rows: 64px 1fr 72px;
|
||||
}
|
||||
|
||||
#header {
|
||||
background: var(--background-3);
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
#main {
|
||||
background: var(--background-1);
|
||||
grid-area: main;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > .timeline {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
& > .actions {
|
||||
height: 72px;
|
||||
background: var(--background-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
gap: 8px;
|
||||
|
||||
& > .create-thread {
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
|
||||
& > div {
|
||||
padding: 4px;
|
||||
background: #46c;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-rooms {
|
||||
background: var(--background-2);
|
||||
grid-area: nav-rooms;
|
||||
|
||||
& > ul {
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
|
||||
&:hover {
|
||||
background: #ffffff33;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-spaces {
|
||||
background: var(--background-4);
|
||||
grid-area: nav-spaces;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background: var(--background-2);
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
#status {
|
||||
background: var(--background-3);
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
.timeline-thread {
|
||||
--title-font-size: calc(1rem * 1.2);
|
||||
--info-font-size: calc(1rem * 1);
|
||||
display: grid;
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
grid-template-columns: var(--title-font-size) 1fr;
|
||||
grid-template-rows: var(--title-font-size) var(--info-font-size);
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: #00000022;
|
||||
}
|
||||
|
||||
& > .icon {
|
||||
background: #34363b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
& > .title {
|
||||
font-size: var(--title-font-size);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
& > .info {
|
||||
grid-column: 1 / 3;
|
||||
font-size: var(--info-font-size);
|
||||
color: var(--foreground-2);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
padding: 4px;
|
||||
background: #555;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
background: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
contain: content;
|
||||
// padding: 4px;
|
||||
|
||||
&.compact {
|
||||
--name-width: 144px;
|
||||
|
||||
&.title {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
& .name {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
margin-left: 8px;
|
||||
max-width: var(--name-width);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& .content {
|
||||
margin-left: calc(var(--name-width) + 16px);
|
||||
}
|
||||
|
||||
& .avatar, & .space {
|
||||
margin-left: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&.cozy {
|
||||
&.title {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
& .name {
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
& .content {
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
& .avatar, & .space {
|
||||
margin-left: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
& .avatar, & .space {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
|
||||
&.avatar {
|
||||
background: #822eba;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
color: #822eba;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #00000022;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 72px;
|
||||
background: var(--background-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
gap: 8px;
|
||||
|
||||
& > textarea {
|
||||
background: var(--background-1);
|
||||
border: solid var(--background-4) 1px;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
147
src/App.tsx
Normal file
147
src/App.tsx
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
import { VoidProps, createSignal, onCleanup } from "solid-js";
|
||||
import "./App.scss";
|
||||
import { Client, Room, Timeline } from "sdk";
|
||||
|
||||
function App() {
|
||||
const client = new Client({
|
||||
baseUrl: "http://localhost:6167",
|
||||
deviceId: "PFXhfDYmCc",
|
||||
token: "Ebh15YkyCBJSFjP11oimVEtAdqL9ZXcl",
|
||||
userId: "@user:localhost",
|
||||
});
|
||||
|
||||
const [rooms, setRooms] = createSignal({ count: 0, rooms: [] as Array<Room> });
|
||||
const [room, setRoom] = createSignal(null as null | Room);
|
||||
const [asdf, setAsdf] = createSignal(true);
|
||||
|
||||
Object.assign(globalThis, { client });
|
||||
|
||||
client.lists.subscribe("rooms", {
|
||||
ranges: [[0, 120]],
|
||||
required_state: [["m.room.name", ""],["m.room.topic", ""]],
|
||||
// timeline_limit: 3,
|
||||
} as any);
|
||||
|
||||
client.on("list", (name, list) => {
|
||||
if (name === "rooms") setRooms({ ...list });
|
||||
});
|
||||
|
||||
client.start();
|
||||
onCleanup(() => client.stop());
|
||||
|
||||
const [offset, setOffset] = createSignal(0);
|
||||
const interval = setInterval(() => setOffset(offset() + 1), 100);
|
||||
onCleanup(() => clearInterval(interval));
|
||||
|
||||
return (
|
||||
<>
|
||||
<header id="header" onClick={() => setAsdf(!asdf())}>
|
||||
{room()?.id} {room()?.getState("m.room.name")?.content.name}
|
||||
</header>
|
||||
<main id="main">{asdf() ? <>
|
||||
<Threads />
|
||||
<div class="actions">
|
||||
<TimelineActions />
|
||||
</div>
|
||||
</> : <>
|
||||
<EventTimeline timeline={room()?.timelines.live || undefined} />
|
||||
<div class="input">
|
||||
<textarea placeholder="input text here"></textarea>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</main>
|
||||
<nav id="nav-rooms">
|
||||
<ul>
|
||||
<li onClick={() => setRoom(null)}>home</li>
|
||||
{rooms().rooms.map(i => <li onClick={() => setRoom(i)}>{i.getState("m.room.name")?.content.name}</li>)}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="nav-spaces"></nav>
|
||||
<div id="sidebar">
|
||||
<EventTimeline timeline={room()?.timelines.live} />
|
||||
<div class="input">
|
||||
<textarea placeholder="input text here"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<footer id="status"></footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function Threads() {
|
||||
return (
|
||||
<div class="timeline">
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
<ThreadsItem />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EventTimeline(props: VoidProps<{ timeline: Timeline | undefined }>) {
|
||||
return (
|
||||
<div class="timeline">
|
||||
{props.timeline?.events.map(i => <Message event={i} />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Message(props: VoidProps<{ event: any }>) {
|
||||
const title = Math.random() > .5;
|
||||
const compact = false;
|
||||
|
||||
return <div class="message" classList={{ title, [compact ? "compact" : "cozy"]: true }}>
|
||||
{title && !compact && <div class="avatar"></div>}
|
||||
{title && compact && <div class="name">{props.event.sender}</div>}
|
||||
<div class="content">
|
||||
{title && !compact && <div class="name">{props.event.sender}</div>}
|
||||
<div class="body">{props.event.content.body || `event: (${props.event.type})`}</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function ThreadsItem() {
|
||||
return <div class="timeline-thread">
|
||||
<div class="icon"></div>
|
||||
<div class="title">Thread title</div>
|
||||
<div class="info">Info here, date created, other options</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
function TimelineActions() {
|
||||
return <>
|
||||
<Toggle enabled="[x] Include ignored" disabled="[ ] Include ignored" initial={false} />
|
||||
<Toggle enabled="[x] Unread" disabled="[ ] Unread" initial={false} />
|
||||
<Toggle enabled="[x] Watching" disabled="[ ] Watching" initial={false} />
|
||||
<div class="create-thread">
|
||||
<div>New thread</div>
|
||||
<div>+</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
function Toggle(props: { enabled: string, disabled: string, initial: boolean }) {
|
||||
const [disabled, setDisabled] = createSignal(props.initial);
|
||||
return (
|
||||
<div
|
||||
class="toggle"
|
||||
classList={{ disabled: disabled() }}
|
||||
onClick={() => setDisabled(!disabled())}
|
||||
>{disabled() ? props.enabled : props.disabled}</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
93
src/assets/fonts/atkinson-hyperlegible/OFL.txt
Normal file
93
src/assets/fonts/atkinson-hyperlegible/OFL.txt
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
Copyright 2020 Braille Institute of America, Inc.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold-extended-italic.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold-extended-italic.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold-extended.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold-extended.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold-italic.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold-italic.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty-bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iosevka/iosevka-zesty-extended-italic.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty-extended-italic.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iosevka/iosevka-zesty-extended.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty-extended.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iosevka/iosevka-zesty-italic.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty-italic.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/iosevka/iosevka-zesty.ttf
Normal file
BIN
src/assets/fonts/iosevka/iosevka-zesty.ttf
Normal file
Binary file not shown.
1
src/assets/solid.svg
Normal file
1
src/assets/solid.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
39
src/fonts.scss
Normal file
39
src/fonts.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url(./assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
src: url(./assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Bold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url(./assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Italic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
src: url(./assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-BoldItalic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Iosevka Zesty";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url(./assets/fonts/iosevka/iosevka-zesty.ttf);
|
||||
}
|
||||
39
src/index.scss
Normal file
39
src/index.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
@import "./fonts.scss";
|
||||
|
||||
:root {
|
||||
font: 16px/1.5 "Atkinson Hyperlegible", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
--background-1: #24262b;
|
||||
--background-2: #1e2024;
|
||||
--background-3: #191b1d;
|
||||
--background-4: #17181a;
|
||||
--foreground-1: #eae8efdd;
|
||||
--foreground-2: #eae8efb4;
|
||||
|
||||
color: var(--foreground-1);
|
||||
|
||||
// --background-1: #1a1923;
|
||||
// --background-2: #14131d;
|
||||
// --background-3: #100e18;
|
||||
// --background-4: #0a0e11;
|
||||
|
||||
/*
|
||||
--fg-text: #c7c6ca;
|
||||
--fg-link: #b18cf3;
|
||||
--fg-dimmed: #7f879b;
|
||||
*/
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
7
src/index.tsx
Normal file
7
src/index.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/* @refresh reload */
|
||||
import { render } from "solid-js/web";
|
||||
import "./index.scss";
|
||||
import App from "./App";
|
||||
|
||||
const root = document.getElementById("root");
|
||||
render(() => <App />, root!);
|
||||
20
src/interesting.tsx
Normal file
20
src/interesting.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
function Dots(props: any) {
|
||||
return (
|
||||
<svg width="100%">
|
||||
<line stroke-dasharray="
|
||||
10, 10, 30, 10, 30, 10, 30, 30,
|
||||
10, 10, 30, 30,
|
||||
30, 10, 10, 10, 30, 10, 10, 30,
|
||||
30, 10, 10, 10, 30, 30,
|
||||
10, 10, 30, 10, 30, 30,
|
||||
10, 10, 30, 30,
|
||||
30, 10, 30, 10, 10, 30,
|
||||
30, 10, 30, 10, 30, 30,
|
||||
30, 10, 10, 30"
|
||||
x1="0" y1="5px" x2="100%" y2="5px"
|
||||
style="stroke: var(--background-2)" stroke-width="10"
|
||||
stroke-dashoffset={props.offset()}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
46
src/service.ts
Normal file
46
src/service.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
// A *service worker*, to cache and provide data offline
|
||||
|
||||
// self.addEventListener("install", () => {
|
||||
|
||||
// });
|
||||
|
||||
// self.addEventListener("fetch", (event) => {
|
||||
// // const { request } = event;
|
||||
// // if (request.url === "/" && request.method === "GET") {
|
||||
|
||||
// // event.respondWith(
|
||||
// // fetch(request).catch(function(error) {
|
||||
// // // `fetch()` throws an exception when the server is unreachable but not
|
||||
// // // for valid HTTP responses, even `4xx` or `5xx` range.
|
||||
// // console.error(
|
||||
// // '[onfetch] Failed. Serving cached offline fallback ' +
|
||||
// // error
|
||||
// // );
|
||||
// // return caches.open('offline').then(function(cache) {
|
||||
// // return cache.match('offline.html');
|
||||
// // });
|
||||
// // })
|
||||
// // );
|
||||
// // }
|
||||
// });
|
||||
|
||||
// /*
|
||||
// self.addEventListener('install', function(event) {
|
||||
// // Put `offline.html` page into cache
|
||||
// var offlineRequest = new Request('offline.html');
|
||||
// event.waitUntil(
|
||||
// fetch(offlineRequest).then(function(response) {
|
||||
// return caches.open('offline').then(function(cache) {
|
||||
// console.log('[oninstall] Cached offline page', response.url);
|
||||
// return cache.put(offlineRequest, response);
|
||||
// });
|
||||
// })
|
||||
// );
|
||||
// });
|
||||
|
||||
// self.addEventListener('push', function(event) {
|
||||
// event.waitUntil(
|
||||
// self.registration.showNotification(title, { body })
|
||||
// );
|
||||
// });
|
||||
// */
|
||||
21
src/state.ts
Normal file
21
src/state.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
// (possibly persisted) state in the app
|
||||
|
||||
interface GlobalState {
|
||||
// - popups
|
||||
// - emoji picker
|
||||
// - recent rooms
|
||||
// - main is threads, timeline
|
||||
// - sidebar is members, timeline
|
||||
}
|
||||
|
||||
interface RoomState {
|
||||
// - scroll position
|
||||
// - new thread config
|
||||
// - uploading files
|
||||
}
|
||||
|
||||
interface ThreadState {
|
||||
// - scroll position
|
||||
// - message config (input, reply, edit)
|
||||
// - uploading files
|
||||
}
|
||||
19
src/util.ts
Normal file
19
src/util.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
class Lru {
|
||||
private items: Array<string> = [];
|
||||
|
||||
constructor(
|
||||
public readonly max: number,
|
||||
private dispose: (id: string) => void,
|
||||
) {
|
||||
if (max <= 0) throw new Error("max can't be zero");
|
||||
}
|
||||
|
||||
touch(id: string) {
|
||||
const idx = this.items.indexOf(id);
|
||||
if (idx !== -1) this.items.splice(idx, 1);
|
||||
this.items.push(id);
|
||||
if (this.items.length > this.max) {
|
||||
this.dispose(this.items.shift()!);
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
1
src/worker.ts
Normal file
1
src/worker.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
// A *shared worker*, to efficiently sync between multiple sessions?
|
||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import solid from 'vite-plugin-solid'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solid()],
|
||||
})
|
||||
Loading…
Reference in a new issue