continued nojs improvements
This commit is contained in:
Michael Freno
27
src/app.css
27
src/app.css
@@ -259,6 +259,33 @@ body {
|
||||
|
||||
/* Note: JS will add inline styles and reactive classList that override these defaults */
|
||||
|
||||
/* Blog banner fallbacks - similar to main layout */
|
||||
.blog-banner-image {
|
||||
/* Full width by default on mobile */
|
||||
width: 100vw;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.blog-banner-text {
|
||||
/* Full width by default on mobile */
|
||||
width: 100vw;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blog-banner-image {
|
||||
/* Account for sidebars on desktop */
|
||||
width: calc(100vw - 600px);
|
||||
margin-left: 300px;
|
||||
}
|
||||
|
||||
.blog-banner-text {
|
||||
/* Account for sidebars on desktop */
|
||||
width: calc(100vw - 600px);
|
||||
margin-left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-typing {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
|
||||
21
src/app.tsx
21
src/app.tsx
@@ -3,9 +3,9 @@ import { FileRoutes } from "@solidjs/start/router";
|
||||
import {
|
||||
createEffect,
|
||||
ErrorBoundary,
|
||||
Suspense,
|
||||
onMount,
|
||||
onCleanup
|
||||
onCleanup,
|
||||
Suspense
|
||||
} from "solid-js";
|
||||
import "./app.css";
|
||||
import { LeftBar, RightBar } from "./components/Bars";
|
||||
@@ -189,7 +189,7 @@ function AppLayout(props: { children: any }) {
|
||||
<div class="flex max-w-screen flex-row">
|
||||
<LeftBar />
|
||||
<div
|
||||
class="bg-base relative h-screen overflow-x-hidden overflow-y-scroll py-16"
|
||||
class="bg-base relative h-screen overflow-x-hidden overflow-y-scroll"
|
||||
style={
|
||||
barsInitialized()
|
||||
? {
|
||||
@@ -198,10 +198,19 @@ function AppLayout(props: { children: any }) {
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onMouseUp={handleCenterTapRelease}
|
||||
onTouchEnd={handleCenterTapRelease}
|
||||
>
|
||||
<Suspense fallback={<TerminalSplash />}>{props.children}</Suspense>
|
||||
<noscript>
|
||||
<div class="bg-yellow text-crust border-text fixed top-0 z-150 ml-16 border-b-2 p-4 text-center font-semibold md:ml-64">
|
||||
JavaScript is disabled. Features will be limited.
|
||||
</div>
|
||||
</noscript>
|
||||
<div
|
||||
class="py-16"
|
||||
onMouseUp={handleCenterTapRelease}
|
||||
onTouchEnd={handleCenterTapRelease}
|
||||
>
|
||||
<Suspense fallback={<TerminalSplash />}>{props.children}</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
<RightBar />
|
||||
</div>
|
||||
|
||||
@@ -12,11 +12,6 @@ export default createHandler(() => (
|
||||
{assets}
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<div style="position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background-color: var(--color-yellow); color: var(--color-crust); padding: 1rem; text-align: center; font-weight: 600; border-bottom: 2px solid var(--color-text);">
|
||||
JavaScript is disabled. Features will be limited.
|
||||
</div>
|
||||
</noscript>
|
||||
<div id="app">{children}</div>
|
||||
{scripts}
|
||||
</body>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Show, Suspense, For } from "solid-js";
|
||||
import { Show, For } from "solid-js";
|
||||
import {
|
||||
useParams,
|
||||
A,
|
||||
@@ -222,13 +222,20 @@ const getPostByTitle = query(
|
||||
export default function PostPage() {
|
||||
const params = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { centerWidth, leftBarSize, barsInitialized } = useBars();
|
||||
|
||||
const data = createAsync(() => {
|
||||
const sortBy =
|
||||
(searchParams.sortBy as "newest" | "oldest" | "highest_rated" | "hot") ||
|
||||
"newest";
|
||||
return getPostByTitle(params.title, sortBy);
|
||||
});
|
||||
const data = createAsync(
|
||||
() => {
|
||||
const sortBy =
|
||||
(searchParams.sortBy as
|
||||
| "newest"
|
||||
| "oldest"
|
||||
| "highest_rated"
|
||||
| "hot") || "newest";
|
||||
return getPostByTitle(params.title, sortBy);
|
||||
},
|
||||
{ deferStream: true }
|
||||
);
|
||||
|
||||
const hasCodeBlock = (str: string): boolean => {
|
||||
return str.includes("<code") && str.includes("</code>");
|
||||
@@ -236,164 +243,171 @@ export default function PostPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Suspense fallback={<TerminalSplash />}>
|
||||
<Show when={data()} fallback={null}>
|
||||
{(loadedData) => (
|
||||
<Show when={loadedData().post} fallback={<Navigate href="/404" />}>
|
||||
{(p) => {
|
||||
const postData = loadedData();
|
||||
<Show when={data()} fallback={<TerminalSplash />}>
|
||||
{(loadedData) => (
|
||||
<Show when={loadedData().post} fallback={<Navigate href="/404" />}>
|
||||
{(p) => {
|
||||
const postData = loadedData();
|
||||
|
||||
// Convert arrays back to Maps for component
|
||||
const userCommentMap = new Map<UserPublicData, number[]>(
|
||||
postData.userCommentArray || []
|
||||
);
|
||||
const reactionMap = new Map<number, CommentReaction[]>(
|
||||
postData.reactionArray || []
|
||||
);
|
||||
const { centerWidth, leftBarSize } = useBars();
|
||||
// Convert arrays back to Maps for component
|
||||
const userCommentMap = new Map<UserPublicData, number[]>(
|
||||
postData.userCommentArray || []
|
||||
);
|
||||
const reactionMap = new Map<number, CommentReaction[]>(
|
||||
postData.reactionArray || []
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>
|
||||
{p().title.replaceAll("_", " ")} | Michael Freno
|
||||
</Title>
|
||||
<Meta
|
||||
name="description"
|
||||
content={
|
||||
p().subtitle ||
|
||||
`Read ${p().title.replaceAll("_", " ")} by Michael Freno on the freno.me blog.`
|
||||
}
|
||||
/>
|
||||
return (
|
||||
<>
|
||||
<Title>
|
||||
{p().title.replaceAll("_", " ")} | Michael Freno
|
||||
</Title>
|
||||
<Meta
|
||||
name="description"
|
||||
content={
|
||||
p().subtitle ||
|
||||
`Read ${p().title.replaceAll("_", " ")} by Michael Freno on the freno.me blog.`
|
||||
}
|
||||
/>
|
||||
|
||||
<div class="relative overflow-x-hidden">
|
||||
{/* Fixed banner image background */}
|
||||
<div class="fixed top-0 left-0 z-0 h-80 w-full sm:h-96 md:h-[50vh]">
|
||||
<div class="absolute inset-0 h-full w-full overflow-hidden brightness-75">
|
||||
<img
|
||||
src={p().banner_photo || "/blueprint.jpg"}
|
||||
alt="post-cover"
|
||||
class="h-full object-cover select-none"
|
||||
style={{
|
||||
width: `${centerWidth()}px`,
|
||||
"margin-left": `${leftBarSize()}px`,
|
||||
"pointer-events": "none"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="text-shadow text-text absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest brightness-150 select-text"
|
||||
style={{
|
||||
width: `${centerWidth()}px`,
|
||||
"margin-left": `${leftBarSize()}px`
|
||||
}}
|
||||
>
|
||||
<div class="text-3xl font-light tracking-widest">
|
||||
{p().title.replaceAll("_", " ")}
|
||||
<div class="py-8 text-xl font-light tracking-widest">
|
||||
{p().subtitle}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spacer to push content down */}
|
||||
<div class="-mt-[10vh] h-80 sm:h-96 md:h-[50vh]" />
|
||||
|
||||
{/* Content that slides over the fixed image */}
|
||||
<div class="bg-base relative z-40 pb-24">
|
||||
<div class="top-4 flex w-full flex-col justify-center md:absolute md:flex-row md:justify-between">
|
||||
<div class="">
|
||||
<div class="flex justify-center italic md:justify-start md:pl-24">
|
||||
<div>
|
||||
Written {new Date(p().date).toDateString()}
|
||||
<br />
|
||||
By Michael Freno
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex max-w-105 flex-wrap justify-center italic md:justify-start md:pl-24">
|
||||
<For each={postData.tags as any[]}>
|
||||
{(tag) => (
|
||||
<div class="group relative m-1 h-fit w-fit rounded-xl bg-purple-600 px-2 py-1 text-sm">
|
||||
<div class="text-white">{tag.value}</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center pt-4 md:pt-0 md:pr-8">
|
||||
<a href="#comments" class="mx-2">
|
||||
<div class="tooltip flex flex-col">
|
||||
<div class="mx-auto hover:brightness-125">
|
||||
<CommentIcon
|
||||
strokeWidth={1}
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</div>
|
||||
<div class="text-text my-auto pt-0.5 pl-2 text-sm">
|
||||
{postData.comments.length}{" "}
|
||||
{postData.comments.length === 1
|
||||
? "Comment"
|
||||
: "Comments"}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="mx-2">
|
||||
<SessionDependantLike
|
||||
currentUserID={postData.userID}
|
||||
privilegeLevel={postData.privilegeLevel}
|
||||
likes={postData.likes as any[]}
|
||||
projectID={p().id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Post body */}
|
||||
<PostBodyClient
|
||||
body={p().body}
|
||||
hasCodeBlock={hasCodeBlock(p().body)}
|
||||
<div class="relative overflow-x-hidden">
|
||||
{/* Fixed banner image background */}
|
||||
<div class="fixed top-0 left-0 z-0 h-80 w-full sm:h-96 md:h-[50vh]">
|
||||
<div class="absolute inset-0 h-full w-full overflow-hidden brightness-75">
|
||||
<img
|
||||
src={p().banner_photo || "/blueprint.jpg"}
|
||||
alt="post-cover"
|
||||
class="blog-banner-image h-full object-cover select-none"
|
||||
style={
|
||||
barsInitialized()
|
||||
? {
|
||||
width: `${centerWidth()}px`,
|
||||
"margin-left": `${leftBarSize()}px`,
|
||||
"pointer-events": "none"
|
||||
}
|
||||
: {
|
||||
"pointer-events": "none"
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
<Show when={postData.privilegeLevel === "admin"}>
|
||||
<div class="flex justify-center">
|
||||
<A
|
||||
class="border-blue bg-blue z-100 h-fit rounded border px-4 py-2 text-base shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90"
|
||||
href={`/blog/edit/${p().id}`}
|
||||
>
|
||||
Edit
|
||||
</A>
|
||||
</div>
|
||||
<div
|
||||
class="text-shadow text-text blog-banner-text absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest brightness-150 select-text"
|
||||
style={
|
||||
barsInitialized()
|
||||
? {
|
||||
width: `${centerWidth()}px`,
|
||||
"margin-left": `${leftBarSize()}px`
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<div class="text-3xl font-light tracking-widest">
|
||||
{p().title.replaceAll("_", " ")}
|
||||
<div class="py-8 text-xl font-light tracking-widest">
|
||||
{p().subtitle}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Comments section */}
|
||||
<div
|
||||
id="comments"
|
||||
class="mx-4 pt-12 pb-12 md:mx-8 lg:mx-12"
|
||||
>
|
||||
<CommentSectionWrapper
|
||||
privilegeLevel={postData.privilegeLevel}
|
||||
allComments={postData.comments as Comment[]}
|
||||
topLevelComments={
|
||||
postData.topLevelComments as Comment[]
|
||||
}
|
||||
id={p().id}
|
||||
reactionMap={reactionMap}
|
||||
currentUserID={postData.userID || ""}
|
||||
userCommentMap={userCommentMap}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Show>
|
||||
)}
|
||||
</Show>
|
||||
</Suspense>
|
||||
|
||||
{/* Spacer to push content down */}
|
||||
<div class="-mt-[10vh] h-80 sm:h-96 md:h-[50vh]" />
|
||||
|
||||
{/* Content that slides over the fixed image */}
|
||||
<div class="bg-base relative z-40 pb-24">
|
||||
<div class="top-4 flex w-full flex-col justify-center md:absolute md:flex-row md:justify-between">
|
||||
<div class="">
|
||||
<div class="flex justify-center italic md:justify-start md:pl-24">
|
||||
<div>
|
||||
Written {new Date(p().date).toDateString()}
|
||||
<br />
|
||||
By Michael Freno
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex max-w-105 flex-wrap justify-center italic md:justify-start md:pl-24">
|
||||
<For each={postData.tags as any[]}>
|
||||
{(tag) => (
|
||||
<div class="group relative m-1 h-fit w-fit rounded-xl bg-purple-600 px-2 py-1 text-sm">
|
||||
<div class="text-white">{tag.value}</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center pt-4 md:pt-0 md:pr-8">
|
||||
<a href="#comments" class="mx-2">
|
||||
<div class="tooltip flex flex-col">
|
||||
<div class="mx-auto hover:brightness-125">
|
||||
<CommentIcon
|
||||
strokeWidth={1}
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</div>
|
||||
<div class="text-text my-auto pt-0.5 pl-2 text-sm">
|
||||
{postData.comments.length}{" "}
|
||||
{postData.comments.length === 1
|
||||
? "Comment"
|
||||
: "Comments"}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="mx-2">
|
||||
<SessionDependantLike
|
||||
currentUserID={postData.userID}
|
||||
privilegeLevel={postData.privilegeLevel}
|
||||
likes={postData.likes as any[]}
|
||||
projectID={p().id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Post body */}
|
||||
<PostBodyClient
|
||||
body={p().body}
|
||||
hasCodeBlock={hasCodeBlock(p().body)}
|
||||
/>
|
||||
|
||||
<Show when={postData.privilegeLevel === "admin"}>
|
||||
<div class="flex justify-center">
|
||||
<A
|
||||
class="border-blue bg-blue z-100 h-fit rounded border px-4 py-2 text-base shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90"
|
||||
href={`/blog/edit/${p().id}`}
|
||||
>
|
||||
Edit
|
||||
</A>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Comments section */}
|
||||
<div
|
||||
id="comments"
|
||||
class="mx-4 pt-12 pb-12 md:mx-8 lg:mx-12"
|
||||
>
|
||||
<CommentSectionWrapper
|
||||
privilegeLevel={postData.privilegeLevel}
|
||||
allComments={postData.comments as Comment[]}
|
||||
topLevelComments={
|
||||
postData.topLevelComments as Comment[]
|
||||
}
|
||||
id={p().id}
|
||||
reactionMap={reactionMap}
|
||||
currentUserID={postData.userID || ""}
|
||||
userCommentMap={userCommentMap}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Show>
|
||||
)}
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,63 +1,129 @@
|
||||
import { Show, Suspense } from "solid-js";
|
||||
import { useSearchParams, A } from "@solidjs/router";
|
||||
import { Show } from "solid-js";
|
||||
import { useSearchParams, A, query } from "@solidjs/router";
|
||||
import { Title } from "@solidjs/meta";
|
||||
import { createAsync } from "@solidjs/router";
|
||||
import { api } from "~/lib/api";
|
||||
import { getRequestEvent } from "solid-js/web";
|
||||
import PostSortingSelect from "~/components/blog/PostSortingSelect";
|
||||
import TagSelector from "~/components/blog/TagSelector";
|
||||
import PostSorting from "~/components/blog/PostSorting";
|
||||
import { TerminalSplash } from "~/components/TerminalSplash";
|
||||
|
||||
// Server function to fetch all posts
|
||||
const getPosts = query(async () => {
|
||||
"use server";
|
||||
const { ConnectionFactory, getPrivilegeLevel } =
|
||||
await import("~/server/utils");
|
||||
const { withCache } = await import("~/server/cache");
|
||||
const event = getRequestEvent()!;
|
||||
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
|
||||
|
||||
return withCache(`posts-${privilegeLevel}`, 5 * 60 * 1000, async () => {
|
||||
const conn = ConnectionFactory();
|
||||
|
||||
// Fetch all posts with aggregated data
|
||||
let postsQuery = `
|
||||
SELECT
|
||||
p.id,
|
||||
p.title,
|
||||
p.subtitle,
|
||||
p.body,
|
||||
p.banner_photo,
|
||||
p.date,
|
||||
p.published,
|
||||
p.category,
|
||||
p.author_id,
|
||||
p.reads,
|
||||
p.attachments,
|
||||
COUNT(DISTINCT pl.user_id) as total_likes,
|
||||
COUNT(DISTINCT c.id) as total_comments
|
||||
FROM Post p
|
||||
LEFT JOIN PostLike pl ON p.id = pl.post_id
|
||||
LEFT JOIN Comment c ON p.id = c.post_id
|
||||
`;
|
||||
|
||||
if (privilegeLevel !== "admin") {
|
||||
postsQuery += ` WHERE p.published = TRUE`;
|
||||
}
|
||||
|
||||
postsQuery += ` GROUP BY p.id, p.title, p.subtitle, p.body, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments`;
|
||||
postsQuery += ` ORDER BY p.date ASC;`;
|
||||
|
||||
const postsResult = await conn.execute(postsQuery);
|
||||
const posts = postsResult.rows;
|
||||
|
||||
const tagsQuery = `
|
||||
SELECT t.value, t.post_id
|
||||
FROM Tag t
|
||||
JOIN Post p ON t.post_id = p.id
|
||||
${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
|
||||
ORDER BY t.value ASC
|
||||
`;
|
||||
|
||||
const tagsResult = await conn.execute(tagsQuery);
|
||||
const tags = tagsResult.rows;
|
||||
|
||||
const tagMap: Record<string, number> = {};
|
||||
tags.forEach((tag: any) => {
|
||||
const key = `${tag.value}`;
|
||||
tagMap[key] = (tagMap[key] || 0) + 1;
|
||||
});
|
||||
|
||||
return { posts, tags, tagMap, privilegeLevel };
|
||||
});
|
||||
}, "posts");
|
||||
|
||||
export default function BlogIndex() {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const sort = () => searchParams.sort || "newest";
|
||||
const filters = () => searchParams.filter || "";
|
||||
|
||||
const data = createAsync(() => api.blog.getPosts.query());
|
||||
const data = createAsync(() => getPosts(), { deferStream: true });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>Blog | Michael Freno</Title>
|
||||
|
||||
<div class="mx-auto pt-8 pb-24">
|
||||
<Suspense fallback={<TerminalSplash />}>
|
||||
<div class="flex flex-row justify-around gap-4 px-4">
|
||||
<PostSortingSelect />
|
||||
<Show when={data()} fallback={<TerminalSplash />}>
|
||||
{(loadedData) => (
|
||||
<>
|
||||
<div class="flex flex-row justify-around gap-4 px-4">
|
||||
<PostSortingSelect />
|
||||
|
||||
<Show when={data() && Object.keys(data()!.tagMap).length > 0}>
|
||||
<TagSelector tagMap={data()!.tagMap} />
|
||||
</Show>
|
||||
<Show when={Object.keys(loadedData().tagMap).length > 0}>
|
||||
<TagSelector tagMap={loadedData().tagMap} />
|
||||
</Show>
|
||||
|
||||
<Show when={data()?.privilegeLevel === "admin"}>
|
||||
<div class="mt-2 flex justify-center md:mt-0 md:justify-end">
|
||||
<A
|
||||
href="/blog/create"
|
||||
class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
|
||||
>
|
||||
Create Post
|
||||
</A>
|
||||
<Show when={loadedData().privilegeLevel === "admin"}>
|
||||
<div class="mt-2 flex justify-center md:mt-0 md:justify-end">
|
||||
<A
|
||||
href="/blog/create"
|
||||
class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
|
||||
>
|
||||
Create Post
|
||||
</A>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<TerminalSplash />}>
|
||||
<Show
|
||||
when={data() && data()!.posts.length > 0}
|
||||
fallback={<div class="pt-12 text-center">No posts yet!</div>}
|
||||
>
|
||||
<div class="mx-auto flex w-11/12 flex-col pt-8">
|
||||
<PostSorting
|
||||
posts={data()!.posts}
|
||||
tags={data()!.tags}
|
||||
privilegeLevel={data()!.privilegeLevel}
|
||||
filters={filters()}
|
||||
sort={sort()}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</Suspense>
|
||||
<Show
|
||||
when={loadedData().posts.length > 0}
|
||||
fallback={<div class="pt-12 text-center">No posts yet!</div>}
|
||||
>
|
||||
<div class="mx-auto flex w-11/12 flex-col pt-8">
|
||||
<PostSorting
|
||||
posts={loadedData().posts}
|
||||
tags={loadedData().tags}
|
||||
privilegeLevel={loadedData().privilegeLevel}
|
||||
filters={filters()}
|
||||
sort={sort()}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user