377 lines
14 KiB
TypeScript
377 lines
14 KiB
TypeScript
import { Show, Suspense, For } from "solid-js";
|
|
import {
|
|
useParams,
|
|
A,
|
|
Navigate,
|
|
query,
|
|
useSearchParams
|
|
} from "@solidjs/router";
|
|
import { Title, Meta } from "@solidjs/meta";
|
|
import { createAsync } from "@solidjs/router";
|
|
import { getRequestEvent } from "solid-js/web";
|
|
import SessionDependantLike from "~/components/blog/SessionDependantLike";
|
|
import CommentIcon from "~/components/icons/CommentIcon";
|
|
import CommentSectionWrapper from "~/components/blog/CommentSectionWrapper";
|
|
import PostBodyClient from "~/components/blog/PostBodyClient";
|
|
import type { Comment, CommentReaction, UserPublicData } from "~/types/comment";
|
|
import { useBars } from "~/context/bars";
|
|
import { TerminalSplash } from "~/components/TerminalSplash";
|
|
|
|
// Server function to fetch post by title
|
|
const getPostByTitle = query(
|
|
async (
|
|
title: string,
|
|
sortBy: "newest" | "oldest" | "highest_rated" | "hot" = "newest"
|
|
) => {
|
|
"use server";
|
|
const { ConnectionFactory, getUserID, getPrivilegeLevel } =
|
|
await import("~/server/utils");
|
|
const event = getRequestEvent()!;
|
|
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
|
|
const userID = await getUserID(event.nativeEvent);
|
|
const conn = ConnectionFactory();
|
|
|
|
let query = "SELECT * FROM Post WHERE title = ?";
|
|
if (privilegeLevel !== "admin") {
|
|
query += ` AND published = TRUE`;
|
|
}
|
|
|
|
const postResults = await conn.execute({
|
|
sql: query,
|
|
args: [decodeURIComponent(title)]
|
|
});
|
|
|
|
const post = postResults.rows[0] as any;
|
|
|
|
if (!post) {
|
|
// Check if post exists but is unpublished
|
|
const existQuery = "SELECT id FROM Post WHERE title = ?";
|
|
const existRes = await conn.execute({
|
|
sql: existQuery,
|
|
args: [decodeURIComponent(title)]
|
|
});
|
|
|
|
if (existRes.rows[0]) {
|
|
return {
|
|
post: null,
|
|
exists: true,
|
|
comments: [],
|
|
likes: [],
|
|
tags: [],
|
|
userCommentArray: [],
|
|
reactionArray: [],
|
|
privilegeLevel: "anonymous" as const,
|
|
userID: null
|
|
};
|
|
}
|
|
|
|
return {
|
|
post: null,
|
|
exists: false,
|
|
comments: [],
|
|
likes: [],
|
|
tags: [],
|
|
userCommentArray: [],
|
|
reactionArray: [],
|
|
privilegeLevel: "anonymous" as const,
|
|
userID: null
|
|
};
|
|
}
|
|
|
|
// Fetch comments with sorting
|
|
let commentQuery = "SELECT * FROM Comment WHERE post_id = ?";
|
|
|
|
// Build ORDER BY clause based on sortBy parameter
|
|
switch (sortBy) {
|
|
case "newest":
|
|
commentQuery += " ORDER BY date DESC";
|
|
break;
|
|
case "oldest":
|
|
commentQuery += " ORDER BY date ASC";
|
|
break;
|
|
case "highest_rated":
|
|
// Calculate net score (upvotes - downvotes) for each comment
|
|
commentQuery = `
|
|
SELECT c.*,
|
|
COALESCE((
|
|
SELECT COUNT(*) FROM CommentReaction
|
|
WHERE comment_id = c.id
|
|
AND type IN ('tears', 'heartEye', 'moneyEye')
|
|
), 0) - COALESCE((
|
|
SELECT COUNT(*) FROM CommentReaction
|
|
WHERE comment_id = c.id
|
|
AND type IN ('angry', 'sick', 'worried')
|
|
), 0) as net_score
|
|
FROM Comment c
|
|
WHERE c.post_id = ?
|
|
ORDER BY net_score DESC, c.date DESC
|
|
`;
|
|
break;
|
|
case "hot":
|
|
// Calculate hot score: (upvotes - downvotes) / log10(age_in_hours + 2)
|
|
commentQuery = `
|
|
SELECT c.*,
|
|
(COALESCE((
|
|
SELECT COUNT(*) FROM CommentReaction
|
|
WHERE comment_id = c.id
|
|
AND type IN ('tears', 'heartEye', 'moneyEye')
|
|
), 0) - COALESCE((
|
|
SELECT COUNT(*) FROM CommentReaction
|
|
WHERE comment_id = c.id
|
|
AND type IN ('angry', 'sick', 'worried')
|
|
), 0)) /
|
|
LOG10(((JULIANDAY('now') - JULIANDAY(c.date)) * 24) + 2) as hot_score
|
|
FROM Comment c
|
|
WHERE c.post_id = ?
|
|
ORDER BY hot_score DESC, c.date DESC
|
|
`;
|
|
break;
|
|
}
|
|
|
|
const comments = (
|
|
await conn.execute({ sql: commentQuery, args: [post.id] })
|
|
).rows;
|
|
|
|
// Fetch likes
|
|
const likeQuery = "SELECT * FROM PostLike WHERE post_id = ?";
|
|
const likes = (await conn.execute({ sql: likeQuery, args: [post.id] }))
|
|
.rows;
|
|
|
|
// Fetch tags
|
|
const tagQuery = "SELECT * FROM Tag WHERE post_id = ?";
|
|
const tags = (await conn.execute({ sql: tagQuery, args: [post.id] })).rows;
|
|
|
|
// Build commenter map
|
|
const commenterToCommentIDMap = new Map<string, number[]>();
|
|
comments.forEach((comment: any) => {
|
|
const prev = commenterToCommentIDMap.get(comment.commenter_id) || [];
|
|
commenterToCommentIDMap.set(comment.commenter_id, [...prev, comment.id]);
|
|
});
|
|
|
|
const commenterQuery =
|
|
"SELECT email, display_name, image FROM User WHERE id = ?";
|
|
|
|
// Convert to serializable array format
|
|
const userCommentArray: Array<[UserPublicData, number[]]> = [];
|
|
|
|
for (const [key, value] of commenterToCommentIDMap.entries()) {
|
|
const res = await conn.execute({ sql: commenterQuery, args: [key] });
|
|
const user = res.rows[0];
|
|
if (user) {
|
|
userCommentArray.push([user as UserPublicData, value]);
|
|
}
|
|
}
|
|
|
|
// Get reaction map as serializable array
|
|
const reactionArray: Array<[number, CommentReaction[]]> = [];
|
|
for (const comment of comments) {
|
|
const reactionQuery =
|
|
"SELECT * FROM CommentReaction WHERE comment_id = ?";
|
|
const res = await conn.execute({
|
|
sql: reactionQuery,
|
|
args: [(comment as any).id]
|
|
});
|
|
reactionArray.push([(comment as any).id, res.rows as CommentReaction[]]);
|
|
}
|
|
|
|
// Filter top-level comments (preserve sort order from SQL)
|
|
const topLevelComments = comments.filter(
|
|
(c: any) => c.parent_comment_id == null
|
|
);
|
|
|
|
return {
|
|
post,
|
|
exists: true,
|
|
comments,
|
|
likes,
|
|
tags,
|
|
topLevelComments,
|
|
userCommentArray,
|
|
reactionArray,
|
|
privilegeLevel,
|
|
userID,
|
|
sortBy
|
|
};
|
|
},
|
|
"post-by-title"
|
|
);
|
|
|
|
export default function PostPage() {
|
|
const params = useParams();
|
|
const [searchParams] = useSearchParams();
|
|
|
|
const data = createAsync(() => {
|
|
const sortBy =
|
|
(searchParams.sortBy as "newest" | "oldest" | "highest_rated" | "hot") ||
|
|
"newest";
|
|
return getPostByTitle(params.title, sortBy);
|
|
});
|
|
|
|
const hasCodeBlock = (str: string): boolean => {
|
|
return str.includes("<code") && str.includes("</code>");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Suspense fallback={<TerminalSplash />}>
|
|
<Show when={data()} fallback={null}>
|
|
{(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();
|
|
|
|
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="h-80 sm:h-96 md:h-[50vh]"></div>
|
|
|
|
{/* Content that slides over the fixed image */}
|
|
<div class="bg-surface0 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-[420px] 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>
|
|
</Suspense>
|
|
</>
|
|
);
|
|
}
|