autismjs/monorepo
1
0
Fork 0
mirror of https://github.com/autismjs/monorepo.git synced 2026-01-09 17:17:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix event handler

Browse Source
This commit is contained in:
tsukino
2023-12-27 07:45:53 -08:00
parent 2b5b7f3072
commit 9b8a98e3af
23 changed files with 360 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/protocol/src/services/browser.ts
View File

@@ -260,11 +260,8 @@ export class Autism extends EventEmitter2 {
this.p2p.on(`pubsub:${PubsubTopics.Global}`, this.#onGlobalPubSub);
this.p2p.once('peer:connect', this.#startSync);
console.log('starting db');
await this.db.start();
console.log('starting p2p');
await this.p2p.start();
console.log('started');
this.p2p.handle(ProtocolType.V1Info, this.#handleGetInfo);
this.p2p.handle(ProtocolType.V1Sync, this.#handleSync);

5
packages/web/lib/style.css
View File

@@ -46,6 +46,11 @@ html {
--green-900: #1D8348;
--green-1000: #186A3B;
--shadow-sm: 0 1px 2px 0 rgb var(--slate-100);
--shadow: 0 1px 3px 0 var(--slate-200), 0 1px 2px -1px var(--slate-200);
--shadow-md: 0 4px 6px -1px var(--slate-200), 0 2px 4px -2px var(--slate-200);
--shadow-lg: 0 10px 15px -3px var(--slate-200), 0 4px 6px -4px var(--slate-200);
--text-3xs: .5rem;
--text-2xs: .625rem;
--text-xs: .75rem;

22
packages/web/lib/ui.ts
View File

@@ -4,7 +4,6 @@ interface CustomElementConstructor {
new (): CustomElement;
}
const count = 0;
interface ICustomElement extends HTMLElement {
state: any;
render: () => VNode;
@@ -17,8 +16,7 @@ export class CustomElement extends HTMLElement implements ICustomElement {
css: string;
html: string;
#tree?: VNode;
#lastAttrUpdated = 0;
#attrUpdateTimeout: any;
$?: any;
get tree() {
return this.#tree;
@@ -99,6 +97,7 @@ type VNodeProps = {
children?: VNode[];
style?: CSSStyleDeclaration;
content?: string;
oninput?: () => void;
cache?: boolean;
};
@@ -109,6 +108,7 @@ export class VNode {
attributes = new Map<string, string>();
children: VNode[] = [];
style?: CSSStyleDeclaration;
oninput?: () => void;
parentNode?: VNode;
content?: string;
#el?: any;
@@ -120,6 +120,7 @@ export class VNode {
this.attributes = options.attributes || new Map();
this.style = options.style;
this.content = options.content;
this.oninput = options.oninput;
this.children = options.children || [];
for (const node of this.children) {
@@ -218,6 +219,12 @@ export class VNode {
el.textContent = this.content;
}
if (this.oninput) {
// @ts-ignore
// el.oninput = onchange;
el.addEventListener('input', this.oninput);
}
frag.append(el);
for (const child of this.children) {
@@ -236,7 +243,7 @@ type DOMOptions = {
style?: CSSStyleDeclaration;
className?: string;
children?: VNode[];
cache?: boolean;
oninput?(): void;
} & { [key: string]: string };
type VNodeOption = VNode | string | (() => VNode | VNode[]);
@@ -331,7 +338,7 @@ export const h = (
function reduceOption(props: VNodeProps, opts: DOMOptions): VNodeProps {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { content, cache, children, className, style, id, ...rest } = opts;
const { oninput, content, children, className, style, id, ...rest } = opts;
const newProps = { ...props };
@@ -343,9 +350,10 @@ export const h = (
if (style) newProps.style = style;
if (id) newProps.id = id;
if (children) newProps.children = children.concat(children);
if (cache) newProps.cache = cache;
if (content) newProps.content = content;
if (oninput) newProps.oninput = oninput;
for (const [key, value] of Object.entries(rest)) {
newProps.attributes.set(key, value || '');
}
@@ -369,10 +377,12 @@ export function connect(
oldonmount.call(this);
if (getStore instanceof Observable) {
this.$ = getStore;
getStore.subscribe(this.update);
} else if (typeof getStore === 'function') {
const stores = getStore(this);
this.$ = stores;
if (stores instanceof Observable) {
stores.subscribe(this.update);
} else {

7
packages/web/src/components/Button/index.css
View File

@@ -1,16 +1,17 @@
button {
transition: opacity 200ms;
transition: opacity 100ms ease-in-out;
display: var(--display, flex);
flex-flow: var(--flex-flow, row);
align-items: var(--align-items, center);
padding: var(--padding, 0.125rem 0.25rem);
padding: var(--padding, 0.25rem 0.5rem);
cursor: pointer;
border: var(--border, 1px solid var(--slate-200));
gap: var(--gap, 0);
font-family: var(--font-family, --font-sans);
font-family: var(--font-family, var(--font-sans));
font-size: var(--font-size, 0.875rem);
color: var(--color, var(--black));
background-color: var(--background-color, var(--slate-100));
width: var(--width);
opacity: 0.9;
}
button:hover {

2
packages/web/src/components/Button/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"index.css"}

7
packages/web/src/components/Button/index.scss
View File

@@ -1,16 +1,17 @@
button {
transition: opacity 200ms;
transition: opacity 100ms ease-in-out;
display: var(--display, flex);
flex-flow: var(--flex-flow, row);
align-items: var(--align-items, center);
padding: var(--padding, .125rem .25rem);
padding: var(--padding, .25rem .5rem);
cursor: pointer;
border: var(--border, 1px solid var(--slate-200));
gap: var(--gap, 0);
font-family: var(--font-family, --font-sans);
font-family: var(--font-family, var(--font-sans));
font-size: var(--font-size, .875rem);
color: var(--color, var(--black));
background-color: var(--background-color, var(--slate-100));
width: var(--width);
opacity: .9;
&:hover {

173
packages/web/src/components/LeftSidebar/index.css Normal file
View File

@@ -0,0 +1,173 @@
.post {
display: grid;
background: var(--white);
grid-template-columns: 3.5rem auto;
grid-template-rows: auto auto auto;
padding: 0.5rem;
font-size: var(--font-size, var(--text-base));
border: var(--border, none);
cursor: default;
}
profile-image {
--display: inline-block;
--width: 3rem;
--height: 3rem;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
--margin: 0 .5rem 0 0;
}
.top {
display: flex;
flex-flow: row nowrap;
align-items: center;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
gap: 0.25rem;
}
.top .creator {
font-weight: var(--font-semibold);
}
.top .userId {
color: var(--slate-300);
font-weight: var(--font-light);
}
.top .createAt-top {
display: flex;
flex-flow: row nowrap;
align-items: center;
color: var(--slate-300);
gap: 0.25rem;
font-weight: var(--font-light);
}
.content {
display: flex;
flex-flow: row nowrap;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
padding: 0.25rem 0;
font-weight: var(--font-normal);
line-height: 1.3125;
}
.bottom {
display: flex;
flex-flow: row nowrap;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
gap: 0.25rem;
}
.bottom c-button {
--gap: .5rem;
--font-family: var(--font-mono);
--font-size: var(--text-base);
--padding: .125rem .25rem;
}
.bottom c-button img {
width: var(--text-base);
height: var(--text-base);
}
.comment-btn {
--color: var(--blue-500);
--background-color: var(--blue-200);
--border: 1px solid var(--blue-300);
}
.repost-btn {
--color: var(--green-500);
--background-color: var(--green-200);
--border: 1px solid var(--green-300);
}
.like-btn {
--color: var(--red-500);
--background-color: var(--red-200);
--border: 1px solid var(--red-300);
}
.left-sidebar {
display: flex;
flex-flow: column nowrap;
width: 20rem;
flex: 1 0 auto;
gap: 0.25rem;
}
.left-sidebar c-button {
--width: 100%;
}
.left-sidebar .editor .post {
grid-template-columns: auto auto;
grid-template-rows: auto auto auto auto;
padding: 0;
}
.left-sidebar .editor .post profile-image {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
--margin: 0 .5rem .5rem 0;
--box-shadow: var(--shadow);
padding: 1rem 0 0 1rem;
}
.left-sidebar .editor .post .top {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
padding: 0 1rem;
}
.left-sidebar .editor .post .bottom {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
padding: 0 1rem 1rem;
}
.left-sidebar .editor .post textarea.content {
transition: background-color 100ms ease-in-out, border 100ms ease-in-out;
outline: none;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
background-color: var(--white);
font-size: var(--text-sm);
font-family: var(--font-sans);
margin: 0.5rem;
border: 1px solid var(--slate-100);
border-radius: 4px;
resize: none;
padding: 0.5rem;
cursor: pointer;
color: var(--slate-800);
font-weight: var(--font-normal);
}
.left-sidebar .editor .post textarea.content::placeholder {
color: var(--slate-200);
}
.left-sidebar .editor .post textarea.content:hover {
border: 1px solid var(--slate-200);
background-color: var(--slate-50);
}
.left-sidebar .editor .post textarea.content:active, .left-sidebar .editor .post textarea.content:focus-within {
border: 1px solid var(--slate-400);
background-color: var(--slate-50);
cursor: text;
}
/*# sourceMappingURL=index.css.map */

1
packages/web/src/components/LeftSidebar/index.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../Post/index.scss","index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AClGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EAEE;EACA;EACA","file":"index.css"}

87
packages/web/src/components/LeftSidebar/index.scss Normal file
View File

@@ -0,0 +1,87 @@
@import "../Post/index.scss";
.left-sidebar {
display: flex;
flex-flow: column nowrap;
width: 20rem;
flex: 1 0 auto;
gap: .25rem;
c-button {
--width: 100%;
}
.editor {
.post {
grid-template-columns: auto auto;
grid-template-rows: auto auto auto auto;
padding: 0;
profile-image {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
--margin: 0 .5rem .5rem 0;
--box-shadow: var(--shadow);
padding: 1rem 0 0 1rem;
}
.top {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
padding: 0 1rem;
}
.bottom {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
padding: 0 1rem 1rem;
}
textarea.content {
transition: background-color 100ms ease-in-out, border 100ms ease-in-out;
outline: none;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
background-color: var(--white);
font-size: var(--text-sm);
font-family: var(--font-sans);
margin: 0.5rem;
border: 1px solid var(--slate-100);
border-radius: 4px;
resize: none;
padding: .5rem;
cursor: pointer;
color: var(--slate-800);
font-weight: var(--font-normal);
&::placeholder {
color: var(--slate-200);
}
&:hover {
border: 1px solid var(--slate-200);
background-color: var(--slate-50);
}
&:active,
&:focus-within {
border: 1px solid var(--slate-400);
background-color: var(--slate-50);
cursor: text;
}
}
}
}
}

47
packages/web/src/components/LeftSidebar/index.ts
View File

@@ -1,5 +1,48 @@
import { CustomElement, register } from '../../../lib/ui.ts';
import { connect, CustomElement, h, register } from '../../../lib/ui.ts';
import css from './index.scss';
import { Observable } from '../../../lib/state.ts';
export default class LeftSidebar extends CustomElement {}
@connect(() => {
const content = new Observable('');
return {
content,
};
})
export default class LeftSidebar extends CustomElement {
css = css.toString();
render() {
const creator = '';
const name = 'Anonymous';
const handle = '0x1234';
const content = this.$.content.$;
return h(
`div.left-sidebar`,
h(
'div.editor',
h(
'div.post',
h('profile-image', {
creator: creator,
}),
h('div.top', h('div.creator', name), h('div.userId', handle)),
//@ts-ignore
h('textarea.content', {
content: content,
rows: '6',
placeholder: 'Say something here',
onchange: (event: any) => {
this.$.content.$ = event.target.value;
},
}),
h('div.bottom', h('c-button', {}, 'Submit')),
),
),
h('c-button', 'Import Private Key'),
h('c-button', 'Generate Private Key'),
);
}
}
register('left-sidebar', LeftSidebar);

1
packages/web/src/components/Post/index.css
View File

@@ -71,6 +71,7 @@ profile-image {
--gap: .5rem;
--font-family: var(--font-mono);
--font-size: var(--text-base);
--padding: .125rem .25rem;
}
.bottom c-button img {
width: var(--text-base);

2
packages/web/src/components/Post/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"index.css"}

1
packages/web/src/components/Post/index.scss
View File

@@ -74,6 +74,7 @@ profile-image {
--gap: .5rem;
--font-family: var(--font-mono);
--font-size: var(--text-base);
--padding: .125rem .25rem;
img {
width: var(--text-base);

4
packages/web/src/components/Post/index.ts
View File

@@ -25,8 +25,8 @@ export default class Post extends CustomElement {
css = css.toString();
render() {
const p = $node.getPost(this.state.hash);
const u = $node.getUser(p?.creator || '');
const p = this.$.post?.$;
const u = this.$.user?.$;
const creator = p?.json.creator || '';
const createat = fromNow(p?.json.createdAt) || '';

4
packages/web/src/components/ProfileImage/index.css
View File

@@ -2,10 +2,12 @@ img {
display: var(--display, block);
width: var(--width, 2rem);
height: var(--height, 2rem);
border: var(--border, none);
border-radius: var(--border-radius, 2px);
padding: var(--padding, 0);
margin: var(--margin, 0);
background-color: var(--slate-50);
background-color: var(--background-color, var(--slate-50));
box-shadow: var(--box-shadow);
}
/*# sourceMappingURL=index.css.map */

2
packages/web/src/components/ProfileImage/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}

4
packages/web/src/components/ProfileImage/index.scss
View File

@@ -2,8 +2,10 @@ img {
display: var(--display, block);
width: var(--width, 2rem);
height: var(--height, 2rem);
border: var(--border, none);
border-radius: var(--border-radius, 2px);
padding: var(--padding, 0);
margin: var(--margin, 0);
background-color: var(--slate-50);
background-color: var(--background-color, var(--slate-50));
box-shadow: var(--box-shadow);
}

11
packages/web/src/components/ProfileImage/index.ts
View File

@@ -13,16 +13,13 @@ export default class ProfileImage extends CustomElement {
css = css.toString();
render() {
const { creator } = this.state;
const user = $node.getUser(creator || '');
let url =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABNZJREFUeF7tnFmW6jAMRJP975Ut0CcNnc5gR6XRcmL+HtFQqitDMzzm1+v1nsbN1oF5nqa3zNZ5ALFlUao2T9OE4ukXCGdKynNOLU4s0bdUigZSE2AojPIr+3VLK1YglkWzG5hZH31CMquvaku4XqAkNZD1DwqwoZ4v2AgM0+vRVDiLVANZ5HQxO+ib7yx0dRMg66x0P9AWfljD1nyxFxm2QEylIcW0GLT5lEZ+fRAIvzAl9enXq68moFfqFA/qemL3s0m/PCHZxCbmei2NYST4kAVawWgMVgTCbJqqq5AF/gOuQm2BCN67ARz3DyHNpCUYlPhtEgqEHksasdix3ND3VKV9/PPcgGAbU48qXcFq+pvm2cENCCb6CRZjTvxFNQbCE9t1NLh7sUBAUWmN3+j3GsUByDzN0/vw9OolPyE65qjHcDUQZn9jB9t2Nx6mzz97QxGENvvgLZwQZxVG5Y3KeCy5qmbxIQsaFgpSacub7DX7fJtX6nnZkcoOcNVP6mTDEcByYABh2aULRh7p3IBcN0ekgcMblgI74mECbW5ASNWnV0R+b9ZyfeHGk7MyAphAFFIVqYx5DEIpodR13feimEAM5tWWAPwgW1jUIJvIAkRA/OfRdEBz0biNsVTK9joVW+H1BSLMli0BkQVoAUJcpAUUFZ2QAF2PbWEE5MYrG7waRkBiVMPY4UCmbq+626cp6JuLTN2PCC/CqRNDWXZ1Qp4A+jZA0A1EoFrWQvptYxoAaTku1574+HggCXhIJEhyJP+1LB7IcekEkwpS4lcd6bgb5PMPGsiaJLChkCKogox2mxgayG1GLQ9iuiCaYsvn6e/xmXrQuuGkHnJCcEP4hGxr3wAIaEjhCZRvvjIDkEoAOVQACtKSTYrQbTqNAE/IMDGKLwjERk7XWIPEhwKxwdp3FYrrAJKM7wYIxa6knJfDi07m1EmOzzTjhDTgfvWjpWcgbPDsBDsLGra2G2JfiTwhN5zZy0tR3aO/JJC1yyCj+44oiAsHon9OByUlCGu4fDogCby7k4RlD3yBWGyaRY2OqPkCuTCi7PNy73LL96s+UXvRDEgfS2uFAa/jCAQX0QccnUrUDR4QtKpOO/uBzq1dg8JlIFfGN4fi6ZLzcED5IpDLPKCoh2WN2tZHcRJ08ZDF6ciJ9cDlVPM7VuR0vOcQzdyRU2l0Vt+RiBkgDoi1Sc3qlcBs76uAA3kOIJ5gQQhbCQOIJxBB7fZABFskmLObFCEQwkVjk5FySMyJiijJl+0eSEKBvuPnqy48IT6DxO9DfEfKuVRAKLF3vv63Gu5A8u1gbqyOQAYKCfpfICfr1jsiTV0PbcpPDCXmSnLMT0gkQsnAa06EUEEPcyAqk0ay37dOBMvRLQ75rOfMfCdEPp3rh0n/sgoCDTXnA9LtOQGFb776Xnwjv/R7WYbAaZVOzZzK0vNUIlA96hOCNhJPok1ML3A/oBqI1q+m+QlhNQWS0A96P5xFxwNxHoh29CpCKa6ajtVdotyBYFJ0Nt4pmwckm7vZ9BQ3gyeSB6TBKvLGaSDQuGV6IMbzfsq5U5Y3UAGRt3Wx+VzUU6CoNp2kAhJkq28b2iNGf30xBZBK8+/d+6t6oQxXug5VADnObW+6fcX8rPhAnuhSIEc+kEBxT2z1A58ObwvXw1MMAAAAAElFTkSuQmCC';
if (user?.profileImageUrl) {
url = user.profileImageUrl;
if (this.$.profileImageUrl) {
url = this.$.profileImageUrl;
} else if (this.state.creator) {
url = 'data:image/svg+xml;utf8,' + minidenticon(creator, 50, 50);
url =
'data:image/svg+xml;utf8,' + minidenticon(this.state.creator, 50, 50);
}
return h('img', { src: url });

6
packages/web/src/pages/App/index.css
View File

@@ -6,6 +6,7 @@
height: calc(100% - 2rem);
overflow: hidden;
padding: 1rem;
gap: 0.5rem;
}
.posts {
@@ -28,9 +29,4 @@
border: 1px solid var(--slate-100);
}
.sidebar {
width: 12rem;
flex: 1 0 auto;
}
/*# sourceMappingURL=index.css.map */

2
packages/web/src/pages/App/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA","file":"index.css"}

6
packages/web/src/pages/App/index.scss
View File

@@ -6,6 +6,7 @@
height: calc(100% - 2rem);
overflow: hidden;
padding: 1rem;
gap: 0.5rem;
}
.posts {
@@ -27,8 +28,3 @@
flex: 0 0 auto;
border: 1px solid var(--slate-100);
}
.sidebar {
width: 12rem;
flex: 1 0 auto;
}

5
packages/web/src/pages/App/index.ts
View File

@@ -1,6 +1,8 @@
import { connect, CustomElement, h, register } from '../../../lib/ui.ts';
import $node from '../../state/node.ts';
import '../../components/Post';
import '../../components/LeftSidebar';
import css from './index.scss';
@connect($node.$globalPosts)
@@ -10,9 +12,10 @@ export default class App extends CustomElement {
render() {
return h(
'div.app',
h('left-sidebar'),
h(
'div.posts',
$node.$globalPosts.$.map((hash) => {
this.$.$?.map((hash: string) => {
return h(`post-card`, { hash });
}),
),

2
packages/web/src/state/node.ts
View File

@@ -14,7 +14,7 @@ export class NodeStore {
constructor() {
const node = new Autism({
bootstrap: [
'/ip4/192.168.86.24/tcp/60513/ws/p2p/12D3KooWBQns6iojm1whaL4VrrGvMsg2kMmqoxNMCwEGDg27G6Pq',
'/ip4/192.168.86.24/tcp/56199/ws/p2p/12D3KooWFYeg3L3ew9tboKrQPxtMDyTEs77cJKJkYp2YLhuvZ21M',
],
});