Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

looking decent

Browse Source
This commit is contained in:
Michael Freno
2025-12-17 23:22:12 -05:00
parent 1bc57c61eb
commit 4b64f50670
23 changed files with 179 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

1
package.json
View File

@@ -21,6 +21,7 @@
"@typeschema/valibot": "^0.13.4",
"bcrypt": "^6.0.0",
"google-auth-library": "^10.5.0",
"highlight.js": "^11.11.1",
"jose": "^6.1.3",
"motion": "^12.23.26",
"solid-js": "^1.9.5",

23
src/app.css
View File

@@ -381,9 +381,32 @@ input[type="checkbox"]::before {
input[type="checkbox"]:checked::before {
transform: scale(1);
}
.shaker:hover {
animation: shaker 0.5s ease;
}
.tooltip {
position: relative;
}
.tooltip .tooltip-text {
visibility: hidden;
min-width: fit-content;
background-color: var(--color-mantle);
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.rule-around {
display: flex;
align-items: center;

8
src/components/blog/Card.tsx
View File

@@ -21,7 +21,6 @@ export interface Post {
export interface CardProps {
post: Post;
privilegeLevel: "anonymous" | "admin" | "user";
linkTarget: "blog" | "project";
}
export default function Card(props: CardProps) {
@@ -36,7 +35,7 @@ export default function Card(props: CardProps) {
</div>
</Show>
<DeletePostButton
type={props.linkTarget === "blog" ? "Blog" : "Project"}
type="Blog"
postID={props.post.id}
/>
</div>
@@ -46,9 +45,7 @@ export default function Card(props: CardProps) {
src={
props.post.banner_photo
? props.post.banner_photo
: props.linkTarget === "blog"
? "/bitcoin.jpg"
: "/blueprint.jpg"
: "/bitcoin.jpg"
}
alt={props.post.title.replaceAll("_", " ") + " banner"}
class="h-full w-full object-cover"
@@ -74,7 +71,6 @@ export default function Card(props: CardProps) {
</div>
<CardLinks
postTitle={props.post.title}
linkTarget={props.linkTarget}
privilegeLevel={props.privilegeLevel}
postID={props.post.id}
/>

9
src/components/blog/CardLinks.tsx
View File

@@ -5,7 +5,6 @@ import LoadingSpinner from "~/components/LoadingSpinner";
export interface CardLinksProps {
postTitle: string;
postID: number;
linkTarget: string;
privilegeLevel: string;
}
@@ -19,12 +18,8 @@ export default function CardLinks(props: CardLinksProps) {
href={`/blog/${props.postTitle}`}
onClick={() => setReadLoading(true)}
class={`${
readLoading()
? "bg-zinc-400"
: props.linkTarget === "project"
? "bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700"
: "bg-orange-400 hover:bg-orange-500"
} mb-1 ml-2 flex rounded px-4 py-2 font-light text-white shadow transition-all duration-300 ease-out active:scale-90`}
readLoading() ? "bg-zinc-400" : "bg-lavender hover:brightness-125"
} mb-1 ml-2 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
>
<Show when={readLoading()} fallback="Read">
<LoadingSpinner height={24} width={24} />

5
src/components/blog/CommentBlock.tsx
View File

@@ -159,8 +159,7 @@ export default function CommentBlock(props: CommentBlockProps) {
const isAnonymous = () => props.privilegeLevel === "anonymous";
const replyIconColor = () =>
location.pathname.split("/")[1] === "blog" ? "#fb923c" : "#60a5fa";
const replyIconColor = () => "#fb923c";
return (
<>
@@ -344,7 +343,6 @@ export default function CommentBlock(props: CommentBlockProps) {
isReply={true}
privilegeLevel={props.privilegeLevel}
parent_id={props.comment.id}
type={props.category}
post_id={props.projectID}
currentUserID={props.currentUserID}
socket={props.socket}
@@ -360,7 +358,6 @@ export default function CommentBlock(props: CommentBlockProps) {
{(childComment) => (
<CommentBlock
comment={childComment}
category={props.category}
projectID={props.projectID}
recursionCount={1}
allComments={props.allComments}

10
src/components/blog/CommentInputBlock.tsx
View File

@@ -23,9 +23,7 @@ export default function CommentInputBlock(props: CommentInputBlockProps) {
<div class="flex w-full justify-center select-none">
<div class="h-fit w-3/4 md:w-1/2">
<form onSubmit={newCommentWrapper}>
<div
class={`textarea-group ${props.type === "blog" ? "blog" : ""}`}
>
<div class="textarea-group blog">
<textarea
ref={bodyRef}
required
@@ -46,9 +44,7 @@ export default function CommentInputBlock(props: CommentInputBlockProps) {
class={`${
props.commentSubmitLoading
? "bg-zinc-400"
: props.type === "project"
? "border-blue-500 bg-blue-400 hover:bg-blue-500 dark:border-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
: "border-orange-500 bg-orange-400 hover:bg-orange-500"
: "border-orange-500 bg-orange-400 hover:bg-orange-500"
} rounded border px-4 py-2 font-light text-white shadow-md transition-all duration-300 ease-in-out active:scale-90`}
>
Submit
@@ -61,7 +57,7 @@ export default function CommentInputBlock(props: CommentInputBlockProps) {
} else {
return (
<div class="flex w-full justify-center">
<div class={`textarea-group ${props.type === "blog" ? "blog" : ""}`}>
<div class="textarea-group blog">
<textarea
required
disabled

4
src/components/blog/CommentSection.tsx
View File

@@ -5,7 +5,6 @@ import type {
UserPublicData,
ReactionType,
ModificationType,
PostType,
PrivilegeLevel,
SortingMode
} from "~/types/comment";
@@ -24,7 +23,6 @@ interface CommentSectionProps {
privilegeLevel: PrivilegeLevel;
allComments: Comment[];
topLevelComments: Comment[];
type: PostType;
postID: number;
reactionMap: Map<number, CommentReaction[]>;
currentUserID: string;
@@ -66,7 +64,6 @@ export default function CommentSection(props: CommentSectionProps) {
<CommentInputBlock
isReply={false}
privilegeLevel={props.privilegeLevel}
type={props.type}
post_id={props.postID}
socket={undefined}
currentUserID={props.currentUserID}
@@ -91,7 +88,6 @@ export default function CommentSection(props: CommentSectionProps) {
<CommentSorting
topLevelComments={props.topLevelComments}
privilegeLevel={props.privilegeLevel}
type={props.type}
postID={props.postID}
allComments={props.allComments}
reactionMap={props.reactionMap}

13
src/components/blog/CommentSectionWrapper.tsx
View File

@@ -134,7 +134,7 @@ export default function CommentSectionWrapper(
socket.send(
JSON.stringify({
action: "channelUpdate",
postType: props.type,
postType: "blog",
postID: props.id,
invoker_id: props.currentUserID
})
@@ -150,7 +150,7 @@ export default function CommentSectionWrapper(
JSON.stringify({
action: "commentCreation",
commentBody: commentBody,
postType: props.type,
postType: "blog",
postID: props.id,
parentCommentID: parentCommentID,
invokerID: props.currentUserID
@@ -160,7 +160,7 @@ export default function CommentSectionWrapper(
// Fallback to HTTP API if WebSocket unavailable
const domain = import.meta.env.VITE_DOMAIN;
const res = await fetch(
`${domain}/api/database/comments/create/${props.type}/${props.id}`,
`${domain}/api/database/comments/create/blog/${props.id}`,
{
method: "POST",
body: JSON.stringify({
@@ -242,7 +242,7 @@ export default function CommentSectionWrapper(
JSON.stringify({
action: "commentUpdate",
commentBody: body,
postType: props.type,
postType: "blog",
postID: props.id,
commentID: comment_id,
invokerID: props.currentUserID
@@ -297,7 +297,7 @@ export default function CommentSectionWrapper(
deleteType: deletionType,
commentID: commentID,
invokerID: props.currentUserID,
postType: props.type,
postType: "blog",
postID: props.id
})
);
@@ -397,7 +397,7 @@ export default function CommentSectionWrapper(
socket.send(
JSON.stringify({
action: "commentReaction",
postType: props.type,
postType: "blog",
postID: props.id,
commentID: commentID,
invokerID: props.currentUserID,
@@ -511,7 +511,6 @@ export default function CommentSectionWrapper(
privilegeLevel={props.privilegeLevel}
allComments={allComments()}
topLevelComments={topLevelComments()}
type={props.type}
postID={props.id}
reactionMap={currentReactionMap()}
currentUserID={props.currentUserID}

1
src/components/blog/CommentSorting.tsx
View File

@@ -57,7 +57,6 @@ export default function CommentSorting(props: CommentSortingProps) {
>
<CommentBlock
comment={topLevelComment}
category={props.type}
projectID={props.postID}
recursionCount={1}
allComments={props.allComments}

32
src/components/blog/PostBodyClient.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { createEffect, onMount } from "solid-js";
import hljs from "highlight.js";
import "highlight.js/styles/github-dark.css";
export interface PostBodyClientProps {
body: string;
hasCodeBlock: boolean;
}
export default function PostBodyClient(props: PostBodyClientProps) {
let contentRef: HTMLDivElement | undefined;
// Apply syntax highlighting when component mounts and when body changes
createEffect(() => {
if (props.hasCodeBlock && contentRef) {
// Small delay to ensure DOM is ready
setTimeout(() => {
hljs.highlightAll();
}, 100);
}
});
return (
<div class="mx-auto max-w-4xl px-4 pt-32 md:pt-40">
<div
ref={contentRef}
class="prose dark:prose-invert max-w-none"
innerHTML={props.body}
/>
</div>
);
}

15
src/components/blog/PostSorting.tsx
View File

@@ -11,7 +11,6 @@ export interface PostSortingProps {
posts: Post[];
tags: Tag[];
privilegeLevel: "anonymous" | "admin" | "user";
type: "blog" | "project";
filters?: string;
sort?: string;
}
@@ -35,12 +34,12 @@ export default function PostSorting(props: PostSortingProps) {
const sortedPosts = () => {
const posts = filteredPosts();
switch (props.sort) {
case "newest":
return [...posts].reverse();
case "oldest":
return [...posts];
case "oldest":
return [...posts].reverse();
case "most liked":
return [...posts].sort((a, b) => b.total_likes - a.total_likes);
case "most read":
@@ -56,7 +55,7 @@ export default function PostSorting(props: PostSortingProps) {
<Show
when={!(props.posts.length > 0 && filteredPosts().length === 0)}
fallback={
<div class="pt-12 text-center text-2xl italic tracking-wide">
<div class="pt-12 text-center text-2xl tracking-wide italic">
All posts filtered out!
</div>
}
@@ -64,11 +63,7 @@ export default function PostSorting(props: PostSortingProps) {
<For each={sortedPosts()}>
{(post) => (
<div class="my-4">
<Card
post={post}
privilegeLevel={props.privilegeLevel}
linkTarget={props.type}
/>
<Card post={post} privilegeLevel={props.privilegeLevel} />
</div>
)}
</For>

20
src/components/blog/PostSortingSelect.tsx
View File

@@ -11,9 +11,7 @@ const sorting = [
{ val: "Most Comments" }
];
export interface PostSortingSelectProps {
type: "blog" | "project";
}
export interface PostSortingSelectProps {}
export default function PostSortingSelect(props: PostSortingSelectProps) {
const [selected, setSelected] = createSignal(sorting[0]);
@@ -42,11 +40,7 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
<button
type="button"
onClick={() => setIsOpen(!isOpen())}
class={`${
props.type === "project"
? "focus-visible:border-blue focus-visible:ring-offset-blue"
: "focus-visible:border-peach focus-visible:ring-offset-peach"
} bg-surface0 focus-visible:ring-opacity-75 relative w-full cursor-default rounded-lg py-2 pr-10 pl-3 text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm`}
class="focus-visible:border-peach focus-visible:ring-offset-peach bg-surface0 focus-visible:ring-opacity-75 relative w-full cursor-default rounded-lg py-2 pr-10 pl-3 text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm"
>
<span class="block truncate">{selected().val}</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -68,9 +62,7 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
onClick={() => handleSelect(sort)}
class={`relative w-full cursor-default py-2 pr-4 pl-10 text-left select-none ${
selected().val === sort.val
? props.type === "project"
? "bg-blue text-base brightness-75"
: "bg-peach text-base brightness-75"
? "bg-peach text-base brightness-75"
: "text-text hover:brightness-125"
}`}
>
@@ -82,11 +74,7 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
{sort.val}
</span>
<Show when={selected().val === sort.val}>
<span
class={`${
props.type === "project" ? "text-blue" : "text-peach"
} absolute inset-y-0 left-0 flex items-center pl-3`}
>
<span class="text-peach absolute inset-y-0 left-0 flex items-center pl-3">
<Check
strokeWidth={1}
height={24}

21
src/components/blog/SessionDependantLike.tsx
View File

@@ -12,7 +12,6 @@ export interface SessionDependantLikeProps {
currentUserID: string | undefined | null;
privilegeLevel: "admin" | "user" | "anonymous";
likes: PostLike[];
type: "blog" | "project";
projectID: number;
}
@@ -59,13 +58,11 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
const getLikeIconColor = () => {
if (hasLiked()) {
return props.type === "project" ? "fill-blue-400" : "fill-orange-400";
return "fill-orange-400";
}
if (hovering()) {
return props.type === "project"
? "fill-blue-400 dark:fill-blue-600"
: "fill-orange-400 dark:fill-orange-500";
return "fill-orange-400 dark:fill-orange-500";
}
return "fill-black dark:fill-white";
@@ -96,13 +93,7 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
onMouseOver={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
>
<div
class={`${
props.type === "project"
? "hover:text-blue-400"
: "hover:text-orange-400"
} tooltip flex flex-col text-black dark:text-white`}
>
<div class="hover:text-orange-400 tooltip flex flex-col text-black dark:text-white">
<div class="mx-auto">
<LikeIcon
strokeWidth={1}
@@ -113,11 +104,7 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
</div>
<div
class={`${
hasLiked()
? props.type === "project"
? "text-blue-400"
: "text-orange-400"
: ""
hasLiked() ? "text-orange-400" : ""
} mx-auto flex pl-2 transition-colors duration-200 ease-in`}
>
{likeCount()} {likeCount() === 1 ? "Like" : "Likes"}

7
src/components/blog/TagSelector.tsx
View File

@@ -3,7 +3,6 @@ import { useNavigate, useLocation, useSearchParams } from "@solidjs/router";
export interface TagSelectorProps {
tagMap: Record<string, number>;
category: "blog" | "project";
}
export default function TagSelector(props: TagSelectorProps) {
@@ -72,11 +71,7 @@ export default function TagSelector(props: TagSelectorProps) {
ref={buttonRef}
type="button"
onClick={toggleMenu}
class={`${
props.category === "project"
? "border-blue bg-blue hover:brightness-125"
: "border-peach bg-peach hover:brightness-125"
} mt-2 rounded border px-4 py-2 text-base font-light shadow-md transition-all duration-300 ease-in-out active:scale-90 md:mt-0`}
class="border-blue bg-lavender mt-2 rounded border px-4 py-2 text-base font-light shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90 md:mt-0"
>
Filters
</button>

12
src/routes/blog/[title]/index.tsx
View File

@@ -13,6 +13,7 @@ import { HttpStatusCode } from "@solidjs/start";
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";
// Server function to fetch post by title
@@ -260,9 +261,6 @@ export default function PostPage() {
currentUserID={postData.userID}
privilegeLevel={postData.privilegeLevel}
likes={postData.likes as any[]}
type={
p().category === "project" ? "project" : "blog"
}
projectID={p().id}
/>
</div>
@@ -270,9 +268,10 @@ export default function PostPage() {
</div>
{/* Post body */}
<div class="mx-auto max-w-4xl px-4 pt-32 md:pt-40">
<div class="prose max-w-none" innerHTML={p().body} />
</div>
<PostBodyClient
body={p().body}
hasCodeBlock={hasCodeBlock(p().body)}
/>
<Show when={postData.privilegeLevel === "admin"}>
<div class="flex justify-center">
@@ -297,7 +296,6 @@ export default function PostPage() {
postData.topLevelComments as Comment[]
}
id={p().id}
type="blog"
reactionMap={reactionMap}
currentUserID={postData.userID || ""}
userCommentMap={userCommentMap}

36
src/routes/blog/create/index.tsx
View File

@@ -1,18 +1,27 @@
import { Show, createSignal } from "solid-js";
import { useSearchParams, useNavigate } from "@solidjs/router";
import { Title } from "@solidjs/meta";
import { cache, createAsync } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";
import { getPrivilegeLevel, getUserID } from "~/server/utils";
import { api } from "~/lib/api";
// Server function to get auth state
const getAuthState = cache(async () => {
"use server";
const event = getRequestEvent()!;
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
const userID = await getUserID(event.nativeEvent);
return { privilegeLevel, userID };
}, "auth-state");
export default function CreatePost() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
// TODO: Get actual privilege level from session/auth
const privilegeLevel = "anonymous";
const userID = null;
const category = () =>
searchParams.category === "project" ? "project" : "blog";
const authState = createAsync(() => getAuthState());
const [title, setTitle] = createSignal("");
const [subtitle, setSubtitle] = createSignal("");
@@ -26,7 +35,7 @@ export default function CreatePost() {
const handleSubmit = async (e: Event) => {
e.preventDefault();
if (!userID) {
if (!authState()?.userID) {
setError("You must be logged in to create a post");
return;
}
@@ -36,14 +45,14 @@ export default function CreatePost() {
try {
const result = await api.database.createPost.mutate({
category: category(),
category: "blog",
title: title(),
subtitle: subtitle() || null,
body: body() || null,
banner_photo: bannerPhoto() || null,
published: published(),
tags: tags().length > 0 ? tags() : null,
author_id: userID
author_id: authState()!.userID
});
if (result.data) {
@@ -60,13 +69,10 @@ export default function CreatePost() {
return (
<>
<Title>
Create {category() === "project" ? "Project" : "Blog Post"} | Michael
Freno
</Title>
<Title>Create Blog Post | Michael Freno</Title>
<Show
when={privilegeLevel === "admin"}
when={authState()?.privilegeLevel === "admin"}
fallback={
<div class="w-full pt-[30vh] text-center">
<div class="text-text text-2xl">Unauthorized</div>
@@ -79,7 +85,7 @@ export default function CreatePost() {
<div class="bg-base min-h-screen px-4 py-12">
<div class="mx-auto max-w-4xl">
<h1 class="mb-8 text-center text-4xl font-bold">
Create {category() === "project" ? "Project" : "Blog Post"}
Create Blog Post
</h1>
<form onSubmit={handleSubmit} class="space-y-6">

18
src/routes/blog/edit/[id]/index.tsx
View File

@@ -3,6 +3,8 @@ import { useParams, useNavigate } from "@solidjs/router";
import { Title } from "@solidjs/meta";
import { createAsync } from "@solidjs/router";
import { cache } from "@solidjs/router";
import { getRequestEvent } from "solid-js/web";
import { getPrivilegeLevel, getUserID } from "~/server/utils";
import { api } from "~/lib/api";
import { ConnectionFactory } from "~/server/utils";
@@ -10,6 +12,10 @@ import { ConnectionFactory } from "~/server/utils";
const getPostForEdit = cache(async (id: string) => {
"use server";
const event = getRequestEvent()!;
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
const userID = await getUserID(event.nativeEvent);
const conn = ConnectionFactory();
const query = `SELECT * FROM Post WHERE id = ?`;
const results = await conn.execute({
@@ -26,17 +32,13 @@ const getPostForEdit = cache(async (id: string) => {
const post = results.rows[0];
const tags = tagRes.rows;
return { post, tags };
return { post, tags, privilegeLevel, userID };
}, "post-for-edit");
export default function EditPost() {
const params = useParams();
const navigate = useNavigate();
// TODO: Get actual privilege level from session/auth
const privilegeLevel = "anonymous";
const userID = null;
const data = createAsync(() => getPostForEdit(params.id));
const [title, setTitle] = createSignal("");
@@ -69,7 +71,7 @@ export default function EditPost() {
const handleSubmit = async (e: Event) => {
e.preventDefault();
if (!userID) {
if (!data()?.userID) {
setError("You must be logged in to edit posts");
return;
}
@@ -86,7 +88,7 @@ export default function EditPost() {
banner_photo: bannerPhoto() || null,
published: published(),
tags: tags().length > 0 ? tags() : null,
author_id: userID
author_id: data()!.userID
});
// Redirect to the post
@@ -104,7 +106,7 @@ export default function EditPost() {
<Title>Edit Post | Michael Freno</Title>
<Show
when={privilegeLevel === "admin"}
when={data()?.privilegeLevel === "admin"}
fallback={
<div class="w-full pt-[30vh] text-center">
<div class="text-2xl">Unauthorized</div>

183
src/routes/blog/index.tsx
View File

@@ -3,15 +3,19 @@ import { useSearchParams, A } from "@solidjs/router";
import { Title } from "@solidjs/meta";
import { createAsync } from "@solidjs/router";
import { cache } from "@solidjs/router";
import { ConnectionFactory } from "~/server/utils";
import { getRequestEvent } from "solid-js/web";
import { ConnectionFactory, getPrivilegeLevel } from "~/server/utils";
import PostSortingSelect from "~/components/blog/PostSortingSelect";
import TagSelector from "~/components/blog/TagSelector";
import PostSorting from "~/components/blog/PostSorting";
// Server function to fetch posts
const getPosts = cache(async (category: string, privilegeLevel: string) => {
const getPosts = cache(async () => {
"use server";
const event = getRequestEvent()!;
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
let query = `
SELECT
Post.id,
@@ -36,13 +40,6 @@ const getPosts = cache(async (category: string, privilegeLevel: string) => {
if (privilegeLevel !== "admin") {
query += ` WHERE Post.published = TRUE`;
if (category !== "all") {
query += ` AND Post.category = '${category}'`;
}
} else {
if (category !== "all") {
query += ` WHERE Post.category = '${category}'`;
}
}
query += ` GROUP BY Post.id, Post.title, Post.subtitle, Post.body, Post.banner_photo, Post.date, Post.published, Post.category, Post.author_id, Post.reads, Post.attachments ORDER BY Post.date DESC;`;
@@ -63,147 +60,71 @@ const getPosts = cache(async (category: string, privilegeLevel: string) => {
tagMap[tag.value] = (tagMap[tag.value] || 0) + 1;
});
return { posts, tags, tagMap };
return { posts, tags, tagMap, privilegeLevel };
}, "blog-posts");
export default function BlogIndex() {
const [searchParams] = useSearchParams();
// TODO: Get actual privilege level from session/auth
const privilegeLevel = "anonymous";
const category = () => searchParams.category || "all";
const sort = () => searchParams.sort || "newest";
const filters = () => searchParams.filter || "";
const data = createAsync(() => getPosts(category(), privilegeLevel));
const bannerImage = () =>
category() === "project"
? "/blueprint.jpg"
: "/manhattan-night-skyline.jpg";
const pageTitle = () =>
category() === "all"
? "Posts"
: category() === "project"
? "Projects"
: "Blog";
const data = createAsync(() => getPosts());
return (
<>
<Title>{pageTitle()} | Michael Freno</Title>
<Title>Blog | Michael Freno</Title>
<div class="bg-base min-h-screen overflow-x-hidden">
<div class="z-30">
<div class="page-fade-in z-20 mx-auto h-80 sm:h-96 md:h-[30vh]">
<div class="image-overlay fixed h-80 w-full brightness-75 sm:h-96 md:h-[50vh]">
<img
src={bannerImage()}
alt="post-cover"
class="h-80 w-full object-cover sm:h-96 md:h-[50vh]"
/>
<div class="relative mx-auto min-h-screen rounded-t-lg pt-8 pb-24 shadow-2xl">
<Suspense
fallback={
<div class="mx-auto pt-48">
<div class="text-center">Loading...</div>
</div>
<div
class="text-shadow fixed top-36 z-10 w-full text-center tracking-widest text-white brightness-150 select-text sm:top-44 md:top-[20vh]"
style={{ "pointer-events": "none" }}
>
<div class="z-10 text-5xl font-light tracking-widest">
{pageTitle()}
</div>
</div>
</div>
</div>
}
>
<div class="flex flex-col justify-center gap-4 md:flex-row md:justify-around">
<PostSortingSelect />
<div class="bg-surface0 relative z-40 mx-auto -mt-16 min-h-screen w-11/12 rounded-t-lg pt-8 pb-24 shadow-2xl sm:-mt-20 md:mt-0 md:w-5/6 lg:w-3/4">
<Suspense
fallback={
<div class="mx-auto pt-48">
<div class="text-center">Loading...</div>
</div>
}
>
<div class="flex flex-col justify-center gap-4 md:flex-row md:justify-around">
<div class="flex justify-center gap-2 md:justify-start">
<Show when={data() && Object.keys(data()!.tagMap).length > 0}>
<TagSelector tagMap={data()!.tagMap} />
</Show>
<Show when={data()?.privilegeLevel === "admin"}>
<div class="mt-2 flex justify-center md:mt-0 md:justify-end">
<A
href="/blog?category=all"
class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
category() === "all"
? "border-peach bg-peach text-base"
: "border-text hover:brightness-125"
}`}
href="/blog/create"
class="border-text rounded border px-4 py-2 transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
>
All
Create Post
</A>
<A
href="/blog?category=blog"
class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
category() === "blog"
? "border-peach bg-peach text-base"
: "border-text hover:brightness-125"
}`}
>
Blog
</A>
<A
href="/blog?category=project"
class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
category() === "project"
? "border-blue bg-blue text-base"
: "border-text hover:brightness-125"
}`}
>
Projects
</A>
</div>
<PostSortingSelect
type={category() === "project" ? "project" : "blog"}
/>
<Show when={data() && Object.keys(data()!.tagMap).length > 0}>
<TagSelector
tagMap={data()!.tagMap}
category={category() === "project" ? "project" : "blog"}
/>
</Show>
<Show when={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 transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
>
Create Post
</A>
</div>
</Show>
</div>
</Suspense>
<Suspense
fallback={
<div class="mx-auto pt-48">
<div class="text-center">Loading posts...</div>
</div>
}
>
<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={privilegeLevel}
type={category() === "project" ? "project" : "blog"}
filters={filters()}
sort={sort()}
/>
</div>
</Show>
</Suspense>
</div>
</div>
</Suspense>
<Suspense
fallback={
<div class="mx-auto pt-48">
<div class="text-center">Loading posts...</div>
</div>
}
>
<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>
</div>
</>
);

6
src/routes/sitemap.xml.ts
View File

@@ -9,12 +9,6 @@ export async function GET(event: APIEvent) {
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.freno.me/projects</loc>
<lastmod>${new Date().toISOString()}</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.freno.me/blog</loc>
<lastmod>${new Date().toISOString()}</lastmod>

6
src/routes/test.tsx
View File

@@ -242,7 +242,7 @@ const routerSections: RouterSection[] = [
},
{
name: "Database - Posts",
description: "CRUD operations for blog/project posts",
description: "CRUD operations for blog posts",
endpoints: [
{
name: "Get Post by ID",
@@ -258,14 +258,14 @@ const routerSections: RouterSection[] = [
procedure: "getPostByTitle",
method: "query",
description: "Fetch post with comments, likes, and tags",
sampleInput: { category: "project", title: "My Project" }
sampleInput: { category: "blog", title: "My Blog Post" }
},
{
name: "Create Post",
router: "database",
procedure: "createPost",
method: "mutation",
description: "Create a new blog/project post",
description: "Create a new blog post",
sampleInput: {
category: "blog",
title: "Test Post",

8
src/server/api/routers/database.ts
View File

@@ -138,7 +138,7 @@ export const databaseRouter = createTRPCRouter({
getPostById: publicProcedure
.input(z.object({
category: z.enum(["blog", "project"]),
category: z.literal("blog"),
id: z.number(),
}))
.query(async ({ input }) => {
@@ -174,7 +174,7 @@ export const databaseRouter = createTRPCRouter({
getPostByTitle: publicProcedure
.input(z.object({
category: z.enum(["blog", "project"]),
category: z.literal("blog"),
title: z.string(),
}))
.query(async ({ input, ctx }) => {
@@ -216,7 +216,7 @@ export const databaseRouter = createTRPCRouter({
});
return {
project: postResults.rows[0],
post: postResults.rows[0],
comments: commentResults.rows,
likes: likeResults.rows,
tagResults: tagResults.rows,
@@ -231,7 +231,7 @@ export const databaseRouter = createTRPCRouter({
createPost: publicProcedure
.input(z.object({
category: z.enum(["blog", "project"]),
category: z.literal("blog"),
title: z.string(),
subtitle: z.string().nullable(),
body: z.string().nullable(),

7
src/types/comment.ts
View File

@@ -79,8 +79,6 @@ export interface BackupResponse {
export type PrivilegeLevel = "admin" | "user" | "anonymous";
export type PostType = "blog" | "project";
export type SortingMode = "newest" | "oldest" | "highest_rated" | "hot";
export type DeletionType = "user" | "admin" | "database";
@@ -96,7 +94,6 @@ export interface CommentSectionWrapperProps {
allComments: Comment[];
topLevelComments: Comment[];
id: number;
type: PostType;
reactionMap: Map<number, CommentReaction[]>;
currentUserID: string;
userCommentMap: Map<UserPublicData, number[]>;
@@ -104,7 +101,6 @@ export interface CommentSectionWrapperProps {
export interface CommentSectionProps {
privilegeLevel: PrivilegeLevel;
type: PostType;
postID: number;
allComments: Comment[];
topLevelComments: Comment[];
@@ -127,7 +123,6 @@ export interface CommentSectionProps {
export interface CommentBlockProps {
comment: Comment;
category: PostType;
projectID: number;
recursionCount: number;
allComments: Comment[] | undefined;
@@ -156,7 +151,6 @@ export interface CommentInputBlockProps {
isReply: boolean;
parent_id?: number;
privilegeLevel: PrivilegeLevel;
type: PostType;
post_id: number;
socket: WebSocket | undefined;
currentUserID: string;
@@ -167,7 +161,6 @@ export interface CommentInputBlockProps {
export interface CommentSortingProps {
topLevelComments: Comment[];
privilegeLevel: PrivilegeLevel;
type: PostType;
postID: number;
allComments: Comment[];
reactionMap: Map<number, CommentReaction[]>;