one post: never gonna get this small enough :(
This commit is contained in:
parent
4eef51001c
commit
03a1d1f5e4
2 changed files with 50 additions and 52 deletions
|
@ -13,6 +13,7 @@ export const Post = ({
|
||||||
posted,
|
posted,
|
||||||
link,
|
link,
|
||||||
id,
|
id,
|
||||||
|
alt_text = true,
|
||||||
}: {
|
}: {
|
||||||
children?: ComponentChildren;
|
children?: ComponentChildren;
|
||||||
|
|
||||||
|
@ -25,6 +26,7 @@ export const Post = ({
|
||||||
posted: string;
|
posted: string;
|
||||||
link?: string;
|
link?: string;
|
||||||
id?: string;
|
id?: string;
|
||||||
|
alt_text?: boolean;
|
||||||
}) => (
|
}) => (
|
||||||
<div class="post">
|
<div class="post">
|
||||||
<Top
|
<Top
|
||||||
|
@ -33,6 +35,7 @@ export const Post = ({
|
||||||
posted={posted}
|
posted={posted}
|
||||||
link={link}
|
link={link}
|
||||||
id={id}
|
id={id}
|
||||||
|
alt_text={alt_text}
|
||||||
/>
|
/>
|
||||||
<Hrish />
|
<Hrish />
|
||||||
<div class="post-inner">
|
<div class="post-inner">
|
||||||
|
@ -48,7 +51,7 @@ export const Post = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Hrish />
|
<Hrish />
|
||||||
<Bottom n_comments={n_comments} />
|
<Bottom n_comments={n_comments} alt_text={alt_text} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -59,34 +62,9 @@ render_and_copy(
|
||||||
username="mehbark"
|
username="mehbark"
|
||||||
posted="6 hr. ago"
|
posted="6 hr. ago"
|
||||||
n_comments={2}
|
n_comments={2}
|
||||||
|
alt_text={false}
|
||||||
>
|
>
|
||||||
one post isn't really enough for me
|
one post isn't really enough for me
|
||||||
</Post>
|
</Post>
|
||||||
<Post
|
|
||||||
headline="@onepost says"
|
|
||||||
username="onepost"
|
|
||||||
display_name="one post per user"
|
|
||||||
posted="6 hr. ago"
|
|
||||||
n_comments={1}
|
|
||||||
>
|
|
||||||
i don't really make the rules i'm just a bot
|
|
||||||
</Post>
|
|
||||||
<Post
|
|
||||||
headline="@onepost says"
|
|
||||||
username="onepost"
|
|
||||||
display_name="one post per user"
|
|
||||||
posted="5 hr. ago"
|
|
||||||
n_comments={11}
|
|
||||||
>
|
|
||||||
wait a minute! i didn't say that! you're putting posts in my mouth!
|
|
||||||
</Post>
|
|
||||||
<Post
|
|
||||||
headline="my bad"
|
|
||||||
username="mehbark"
|
|
||||||
posted="3 hr. ago"
|
|
||||||
n_comments={0}
|
|
||||||
>
|
|
||||||
happens all the time. nothing personal, kid.
|
|
||||||
</Post>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,31 +2,49 @@ import { ComponentChildren } from "preact";
|
||||||
import { Main, mk_class_wrapper, render_and_copy } from "./common.tsx";
|
import { Main, mk_class_wrapper, render_and_copy } from "./common.tsx";
|
||||||
|
|
||||||
// i heard you liked posts, so i put a post in your post so you can post while you post
|
// i heard you liked posts, so i put a post in your post so you can post while you post
|
||||||
const ReblogIcon = () => (
|
const ReblogIcon = ({ alt_text = true }: { alt_text?: boolean }) =>
|
||||||
|
alt_text ? (
|
||||||
<img
|
<img
|
||||||
src="https://static.pyrope.net/cohost-reblog.png"
|
src="https://static.pyrope.net/cohost-reblog.png"
|
||||||
alt="the cohost reblog icon"
|
alt="the cohost reblog icon"
|
||||||
class="reblog"
|
class="reblog"
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
<img src="https://static.pyrope.net/cohost-reblog.png" class="reblog" />
|
||||||
);
|
);
|
||||||
|
|
||||||
const LikeIcon = () => (
|
const LikeIcon = ({ alt_text = true }: { alt_text?: boolean }) =>
|
||||||
|
alt_text ? (
|
||||||
<img
|
<img
|
||||||
src="https://static.pyrope.net/cohost-like.png"
|
src="https://static.pyrope.net/cohost-like.png"
|
||||||
alt="the cohost like icon"
|
alt="the cohost like icon"
|
||||||
class="like"
|
class="like"
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
<img src="https://static.pyrope.net/cohost-like.png" class="like" />
|
||||||
);
|
);
|
||||||
|
|
||||||
const OptionsIcon = () => (
|
const OptionsIcon = ({ alt_text = true }: { alt_text?: boolean }) =>
|
||||||
|
alt_text ? (
|
||||||
<img
|
<img
|
||||||
src="https://static.pyrope.net/cohost-post-options.png"
|
src="https://static.pyrope.net/cohost-post-options.png"
|
||||||
alt="the cohost icon for post options"
|
alt="the cohost icon for post options"
|
||||||
class="options"
|
class="options"
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src="https://static.pyrope.net/cohost-post-options.png"
|
||||||
|
class="options"
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const Bottom = ({ n_comments }: { n_comments: number }) => (
|
export const Bottom = ({
|
||||||
|
n_comments,
|
||||||
|
alt_text = true,
|
||||||
|
}: {
|
||||||
|
n_comments: number;
|
||||||
|
alt_text?: boolean;
|
||||||
|
}) => (
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<div class="bottom-inner">
|
<div class="bottom-inner">
|
||||||
<a
|
<a
|
||||||
|
@ -34,8 +52,8 @@ export const Bottom = ({ n_comments }: { n_comments: number }) => (
|
||||||
href="https://413.gay"
|
href="https://413.gay"
|
||||||
>{`${n_comments} comments`}</a>
|
>{`${n_comments} comments`}</a>
|
||||||
<div class="interactions">
|
<div class="interactions">
|
||||||
<ReblogIcon />
|
<ReblogIcon alt_text={alt_text} />
|
||||||
<LikeIcon />
|
<LikeIcon alt_text={alt_text} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -61,12 +79,14 @@ export const Top = ({
|
||||||
username,
|
username,
|
||||||
link,
|
link,
|
||||||
posted,
|
posted,
|
||||||
|
alt_text = true,
|
||||||
}: {
|
}: {
|
||||||
display_name?: string;
|
display_name?: string;
|
||||||
username: string;
|
username: string;
|
||||||
posted: string;
|
posted: string;
|
||||||
link?: string;
|
link?: string;
|
||||||
id?: string;
|
id?: string;
|
||||||
|
alt_text?: boolean;
|
||||||
}) => (
|
}) => (
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="top-info">
|
<div class="top-info">
|
||||||
|
@ -82,7 +102,7 @@ export const Top = ({
|
||||||
{posted}
|
{posted}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<OptionsIcon />
|
<OptionsIcon alt_text={alt_text} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue