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

migration of comments

Browse Source
This commit is contained in:
Michael Freno
2025-12-17 22:47:19 -05:00
parent a092c57d36
commit 1bc57c61eb
37 changed files with 3022 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/routes/account.tsx
View File

@@ -23,15 +23,20 @@ export default function AccountPage() {
// Form loading states
const [emailButtonLoading, setEmailButtonLoading] = createSignal(false);
const [displayNameButtonLoading, setDisplayNameButtonLoading] = createSignal(false);
const [displayNameButtonLoading, setDisplayNameButtonLoading] =
createSignal(false);
const [passwordChangeLoading, setPasswordChangeLoading] = createSignal(false);
const [deleteAccountButtonLoading, setDeleteAccountButtonLoading] = createSignal(false);
const [profileImageSetLoading, setProfileImageSetLoading] = createSignal(false);
const [deleteAccountButtonLoading, setDeleteAccountButtonLoading] =
createSignal(false);
const [profileImageSetLoading, setProfileImageSetLoading] =
createSignal(false);
// Password state
const [passwordsMatch, setPasswordsMatch] = createSignal(false);
const [showPasswordLengthWarning, setShowPasswordLengthWarning] = createSignal(false);
const [passwordLengthSufficient, setPasswordLengthSufficient] = createSignal(false);
const [showPasswordLengthWarning, setShowPasswordLengthWarning] =
createSignal(false);
const [passwordLengthSufficient, setPasswordLengthSufficient] =
createSignal(false);
const [passwordBlurred, setPasswordBlurred] = createSignal(false);
const [passwordError, setPasswordError] = createSignal(false);
const [passwordDeletionError, setPasswordDeletionError] = createSignal(false);
@@ -44,7 +49,8 @@ export default function AccountPage() {
// Success messages
const [showImageSuccess, setShowImageSuccess] = createSignal(false);
const [showEmailSuccess, setShowEmailSuccess] = createSignal(false);
const [showDisplayNameSuccess, setShowDisplayNameSuccess] = createSignal(false);
const [showDisplayNameSuccess, setShowDisplayNameSuccess] =
createSignal(false);
const [showPasswordSuccess, setShowPasswordSuccess] = createSignal(false);
// Form refs
@@ -59,7 +65,7 @@ export default function AccountPage() {
onMount(async () => {
try {
const response = await fetch("/api/trpc/user.getProfile", {
method: "GET",
method: "GET"
});
if (response.ok) {
@@ -99,7 +105,7 @@ export default function AccountPage() {
const response = await fetch("/api/trpc/user.updateEmail", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email }),
body: JSON.stringify({ email })
});
const result = await response.json();
@@ -128,7 +134,7 @@ export default function AccountPage() {
const response = await fetch("/api/trpc/user.updateDisplayName", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ displayName }),
body: JSON.stringify({ displayName })
});
const result = await response.json();
@@ -176,7 +182,7 @@ export default function AccountPage() {
const response = await fetch("/api/trpc/user.changePassword", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ oldPassword, newPassword }),
body: JSON.stringify({ oldPassword, newPassword })
});
const result = await response.json();
@@ -221,7 +227,7 @@ export default function AccountPage() {
const response = await fetch("/api/trpc/user.setPassword", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ password: newPassword }),
body: JSON.stringify({ password: newPassword })
});
const result = await response.json();
@@ -262,7 +268,7 @@ export default function AccountPage() {
const response = await fetch("/api/trpc/user.deleteAccount", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ password }),
body: JSON.stringify({ password })
});
const result = await response.json();
@@ -289,7 +295,7 @@ export default function AccountPage() {
await fetch("/api/trpc/auth.resendEmailVerification", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: currentUser.email }),
body: JSON.stringify({ email: currentUser.email })
});
alert("Verification email sent!");
} catch (err) {
@@ -330,44 +336,54 @@ export default function AccountPage() {
};
const handlePasswordBlur = () => {
if (!passwordLengthSufficient() && newPasswordRef && newPasswordRef.value !== "") {
if (
!passwordLengthSufficient() &&
newPasswordRef &&
newPasswordRef.value !== ""
) {
setShowPasswordLengthWarning(true);
}
setPasswordBlurred(true);
};
return (
<div class="mx-8 min-h-screen md:mx-24 lg:mx-36 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
<div class="bg-base mx-8 min-h-screen md:mx-24 lg:mx-36">
<div class="pt-24">
<Show
when={!loading() && user()}
fallback={
<div class="w-full mt-[35vh] flex justify-center">
<div class="text-xl">Loading...</div>
<div class="mt-[35vh] flex w-full justify-center">
<div class="text-text text-xl">Loading...</div>
</div>
}
>
{(currentUser) => (
<>
<div class="text-center text-3xl font-bold mb-8 text-slate-800 dark:text-slate-100">
<div class="text-text mb-8 text-center text-3xl font-bold">
Account Settings
</div>
{/* Email Section */}
<div class="mx-auto flex flex-col md:grid md:grid-cols-2 gap-6 max-w-4xl">
<div class="flex justify-center text-lg md:justify-normal items-center">
<div class="mx-auto flex max-w-4xl flex-col gap-6 md:grid md:grid-cols-2">
<div class="flex items-center justify-center text-lg md:justify-normal">
<div class="flex flex-col lg:flex-row">
<div class="whitespace-nowrap pr-1 font-semibold">Current email:</div>
<div class="pr-1 font-semibold whitespace-nowrap">
Current email:
</div>
{currentUser().email ? (
<span>{currentUser().email}</span>
) : (
<span class="font-light italic underline underline-offset-4">None Set</span>
<span class="font-light italic underline underline-offset-4">
None Set
</span>
)}
</div>
<Show when={currentUser().email && !currentUser().emailVerified}>
<Show
when={currentUser().email && !currentUser().emailVerified}
>
<button
onClick={sendEmailVerification}
class="ml-2 text-red-500 hover:text-red-600 text-sm underline"
class="text-red ml-2 text-sm underline transition-all hover:brightness-125"
>
Verify Email
</button>
@@ -380,7 +396,11 @@ export default function AccountPage() {
ref={emailRef}
type="email"
required
disabled={emailButtonLoading() || (currentUser().email !== null && !currentUser().emailVerified)}
disabled={
emailButtonLoading() ||
(currentUser().email !== null &&
!currentUser().emailVerified)
}
placeholder=" "
class="underlinedInput bg-transparent"
/>
@@ -390,29 +410,41 @@ export default function AccountPage() {
<div class="flex justify-end">
<button
type="submit"
disabled={emailButtonLoading() || (currentUser().email !== null && !currentUser().emailVerified)}
disabled={
emailButtonLoading() ||
(currentUser().email !== null &&
!currentUser().emailVerified)
}
class={`${
emailButtonLoading() || (currentUser().email !== null && !currentUser().emailVerified)
? "bg-zinc-400 cursor-not-allowed"
: "bg-blue-400 hover:bg-blue-500 active:scale-90 dark:bg-blue-600 dark:hover:bg-blue-700"
} mt-2 flex justify-center rounded px-4 py-2 text-white transition-all duration-300 ease-out`}
emailButtonLoading() ||
(currentUser().email !== null &&
!currentUser().emailVerified)
? "bg-blue cursor-not-allowed brightness-50"
: "bg-blue hover:brightness-125 active:scale-90"
} mt-2 flex justify-center rounded px-4 py-2 text-base transition-all duration-300 ease-out`}
>
{emailButtonLoading() ? "Submitting..." : "Submit"}
</button>
</div>
<Show when={showEmailSuccess()}>
<div class="text-green-500 text-sm text-center mt-2">Email updated!</div>
<div class="text-green mt-2 text-center text-sm">
Email updated!
</div>
</Show>
</form>
{/* Display Name Section */}
<div class="flex justify-center text-lg md:justify-normal items-center">
<div class="flex items-center justify-center text-lg md:justify-normal">
<div class="flex flex-col lg:flex-row">
<div class="whitespace-nowrap pr-1 font-semibold">Display Name:</div>
<div class="pr-1 font-semibold whitespace-nowrap">
Display Name:
</div>
{currentUser().displayName ? (
<span>{currentUser().displayName}</span>
) : (
<span class="font-light italic underline underline-offset-4">None Set</span>
<span class="font-light italic underline underline-offset-4">
None Set
</span>
)}
</div>
</div>
@@ -438,28 +470,35 @@ export default function AccountPage() {
disabled={displayNameButtonLoading()}
class={`${
displayNameButtonLoading()
? "bg-zinc-400 cursor-not-allowed"
: "bg-blue-400 hover:bg-blue-500 active:scale-90 dark:bg-blue-600 dark:hover:bg-blue-700"
} mt-2 flex justify-center rounded px-4 py-2 text-white transition-all duration-300 ease-out`}
? "bg-blue cursor-not-allowed brightness-50"
: "bg-blue hover:brightness-125 active:scale-90"
} mt-2 flex justify-center rounded px-4 py-2 text-base transition-all duration-300 ease-out`}
>
{displayNameButtonLoading() ? "Submitting..." : "Submit"}
</button>
</div>
<Show when={showDisplayNameSuccess()}>
<div class="text-green-500 text-sm text-center mt-2">Display name updated!</div>
<div class="text-green mt-2 text-center text-sm">
Display name updated!
</div>
</Show>
</form>
</div>
{/* Password Change/Set Section */}
<form onSubmit={handlePasswordSubmit} class="mt-8 flex w-full justify-center">
<div class="flex flex-col justify-center max-w-md w-full">
<div class="text-center text-xl font-semibold mb-4">
{currentUser().hasPassword ? "Change Password" : "Set Password"}
<form
onSubmit={handlePasswordSubmit}
class="mt-8 flex w-full justify-center"
>
<div class="flex w-full max-w-md flex-col justify-center">
<div class="mb-4 text-center text-xl font-semibold">
{currentUser().hasPassword
? "Change Password"
: "Set Password"}
</div>
<Show when={currentUser().hasPassword}>
<div class="input-group mx-4 relative mb-6">
<div class="input-group relative mx-4 mb-6">
<input
ref={oldPasswordRef}
type={showOldPasswordInput() ? "text" : "password"}
@@ -472,8 +511,10 @@ export default function AccountPage() {
<label class="underlinedInputLabel">Old Password</label>
<button
type="button"
onClick={() => setShowOldPasswordInput(!showOldPasswordInput())}
class="absolute right-0 top-2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
onClick={() =>
setShowOldPasswordInput(!showOldPasswordInput())
}
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
>
<Show when={showOldPasswordInput()} fallback={<Eye />}>
<EyeSlash />
@@ -482,7 +523,7 @@ export default function AccountPage() {
</div>
</Show>
<div class="input-group mx-4 relative mb-2">
<div class="input-group relative mx-4 mb-2">
<input
ref={newPasswordRef}
type={showPasswordInput() ? "text" : "password"}
@@ -498,7 +539,7 @@ export default function AccountPage() {
<button
type="button"
onClick={() => setShowPasswordInput(!showPasswordInput())}
class="absolute right-0 top-2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
>
<Show when={showPasswordInput()} fallback={<Eye />}>
<EyeSlash />
@@ -507,12 +548,12 @@ export default function AccountPage() {
</div>
<Show when={showPasswordLengthWarning()}>
<div class="text-red-500 text-sm text-center mb-4">
<div class="text-red mb-4 text-center text-sm">
Password too short! Min Length: 8
</div>
</Show>
<div class="input-group mx-4 relative mb-2">
<div class="input-group relative mx-4 mb-2">
<input
ref={newPasswordConfRef}
type={showPasswordConfInput() ? "text" : "password"}
@@ -523,11 +564,15 @@ export default function AccountPage() {
class="underlinedInput w-full bg-transparent pr-10"
/>
<span class="bar"></span>
<label class="underlinedInputLabel">Password Confirmation</label>
<label class="underlinedInputLabel">
Password Confirmation
</label>
<button
type="button"
onClick={() => setShowPasswordConfInput(!showPasswordConfInput())}
class="absolute right-0 top-2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
onClick={() =>
setShowPasswordConfInput(!showPasswordConfInput())
}
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
>
<Show when={showPasswordConfInput()} fallback={<Eye />}>
<EyeSlash />
@@ -535,8 +580,15 @@ export default function AccountPage() {
</button>
</div>
<Show when={!passwordsMatch() && passwordLengthSufficient() && newPasswordConfRef && newPasswordConfRef.value.length >= 6}>
<div class="text-red-500 text-sm text-center mb-4">
<Show
when={
!passwordsMatch() &&
passwordLengthSufficient() &&
newPasswordConfRef &&
newPasswordConfRef.value.length >= 6
}
>
<div class="text-red mb-4 text-center text-sm">
Passwords do not match!
</div>
</Show>
@@ -546,15 +598,15 @@ export default function AccountPage() {
disabled={passwordChangeLoading() || !passwordsMatch()}
class={`${
passwordChangeLoading() || !passwordsMatch()
? "bg-zinc-400 cursor-not-allowed"
: "bg-blue-400 hover:bg-blue-500 active:scale-90 dark:bg-blue-600 dark:hover:bg-blue-700"
} my-6 flex justify-center rounded px-4 py-2 text-white transition-all duration-300 ease-out`}
? "bg-blue cursor-not-allowed brightness-50"
: "bg-blue hover:brightness-125 active:scale-90"
} my-6 flex justify-center rounded px-4 py-2 text-base transition-all duration-300 ease-out`}
>
{passwordChangeLoading() ? "Setting..." : "Set"}
</button>
<Show when={passwordError()}>
<div class="text-red-500 text-sm text-center">
<div class="text-red text-center text-sm">
{currentUser().hasPassword
? "Password did not match record"
: "Error setting password"}
@@ -562,8 +614,9 @@ export default function AccountPage() {
</Show>
<Show when={showPasswordSuccess()}>
<div class="text-green-500 text-sm text-center">
Password {currentUser().hasPassword ? "changed" : "set"} successfully!
<div class="text-green text-center text-sm">
Password {currentUser().hasPassword ? "changed" : "set"}{" "}
successfully!
</div>
</Show>
</div>
@@ -572,11 +625,14 @@ export default function AccountPage() {
<hr class="mt-8 mb-8" />
{/* Delete Account Section */}
<div class="py-8 max-w-2xl mx-auto">
<div class="w-full rounded-md bg-red-300 px-6 pb-4 pt-8 shadow-md dark:bg-red-950">
<div class="pb-4 text-center text-xl font-semibold">Delete Account</div>
<div class="text-center text-sm mb-4 text-red-700 dark:text-red-300">
Warning: This will delete all account information and is irreversible
<div class="mx-auto max-w-2xl py-8">
<div class="bg-red w-full rounded-md px-6 pt-8 pb-4 shadow-md brightness-75">
<div class="pb-4 text-center text-xl font-semibold">
Delete Account
</div>
<div class="text-crust mb-4 text-center text-sm">
Warning: This will delete all account information and is
irreversible
</div>
<form onSubmit={deleteAccountTrigger}>
@@ -591,7 +647,9 @@ export default function AccountPage() {
class="underlinedInput bg-transparent"
/>
<span class="bar"></span>
<label class="underlinedInputLabel">Enter Password</label>
<label class="underlinedInputLabel">
Enter Password
</label>
</div>
</div>
@@ -600,15 +658,17 @@ export default function AccountPage() {
disabled={deleteAccountButtonLoading()}
class={`${
deleteAccountButtonLoading()
? "bg-zinc-400 cursor-not-allowed"
: "bg-red-500 hover:bg-red-600 active:scale-90 dark:bg-red-600 dark:hover:bg-red-700"
} mx-auto mt-4 flex justify-center rounded px-4 py-2 text-white transition-all duration-300 ease-out`}
? "bg-red cursor-not-allowed brightness-50"
: "bg-red hover:brightness-125 active:scale-90"
} mx-auto mt-4 flex justify-center rounded px-4 py-2 text-base transition-all duration-300 ease-out`}
>
{deleteAccountButtonLoading() ? "Deleting..." : "Delete Account"}
{deleteAccountButtonLoading()
? "Deleting..."
: "Delete Account"}
</button>
<Show when={passwordDeletionError()}>
<div class="text-red-500 text-sm text-center mt-2">
<div class="text-red mt-2 text-center text-sm">
Password did not match record
</div>
</Show>

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

@@ -3,85 +3,119 @@ import { useParams, 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 {
ConnectionFactory,
getUserID,
getPrivilegeLevel
} from "~/server/utils";
import { getRequestEvent } from "solid-js/web";
import { HttpStatusCode } from "@solidjs/start";
import SessionDependantLike from "~/components/blog/SessionDependantLike";
import CommentIcon from "~/components/icons/CommentIcon";
import CommentSectionWrapper from "~/components/blog/CommentSectionWrapper";
import type { Comment, CommentReaction, UserPublicData } from "~/types/comment";
// Server function to fetch post by title
const getPostByTitle = cache(async (title: string, privilegeLevel: string) => {
const getPostByTitle = cache(async (title: string) => {
"use server";
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)],
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)],
args: [decodeURIComponent(title)]
});
if (existRes.rows[0]) {
return { post: null, exists: true, comments: [], likes: [], tags: [], userCommentMap: new Map() };
return {
post: null,
exists: true,
comments: [],
likes: [],
tags: [],
userCommentArray: [],
reactionArray: [],
privilegeLevel: "anonymous" as const,
userID: null
};
}
return { post: null, exists: false, comments: [], likes: [], tags: [], userCommentMap: new Map() };
return {
post: null,
exists: false,
comments: [],
likes: [],
tags: [],
userCommentArray: [],
reactionArray: [],
privilegeLevel: "anonymous" as const,
userID: null
};
}
// Fetch comments
const commentQuery = "SELECT * FROM Comment WHERE post_id = ?";
const comments = (await conn.execute({ sql: commentQuery, args: [post.id] })).rows;
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 = ?";
const commentIDToCommenterMap = new Map();
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) {
commentIDToCommenterMap.set(user, value);
userCommentArray.push([user as UserPublicData, value]);
}
}
// Get reaction map
const reactionMap = new Map();
// 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],
args: [(comment as any).id]
});
reactionMap.set((comment as any).id, res.rows);
reactionArray.push([(comment as any).id, res.rows as CommentReaction[]]);
}
return {
post,
exists: true,
@@ -89,20 +123,18 @@ const getPostByTitle = cache(async (title: string, privilegeLevel: string) => {
likes,
tags,
topLevelComments: comments.filter((c: any) => c.parent_comment_id == null),
userCommentMap: commentIDToCommenterMap,
reactionMap,
userCommentArray,
reactionArray,
privilegeLevel,
userID
};
}, "post-by-title");
export default function PostPage() {
const params = useParams();
// TODO: Get actual privilege level and user ID from session/auth
const privilegeLevel = "anonymous";
const userID = null;
const data = createAsync(() => getPostByTitle(params.title, privilegeLevel));
const data = createAsync(() => getPostByTitle(params.title));
const hasCodeBlock = (str: string): boolean => {
return str.includes("<code") && str.includes("</code>");
};
@@ -117,154 +149,165 @@ export default function PostPage() {
}
>
<Show
when={data()}
when={data()?.post}
fallback={
<div class="w-full pt-[30vh]">
<HttpStatusCode code={404} />
<div class="text-center text-2xl">Post not found</div>
</div>
}
>
{(postData) => (
<Show
when={postData().post}
when={data()?.exists}
fallback={
<Show
when={postData().exists}
fallback={
<div class="w-full pt-[30vh]">
<HttpStatusCode code={404} />
<div class="text-center text-2xl">Post not found</div>
</div>
}
>
<div class="w-full pt-[30vh]">
<div class="text-center text-2xl">
That post is in the works! Come back soon!
</div>
<div class="flex justify-center">
<A
href="/blog"
class="mt-4 rounded border border-orange-500 bg-orange-400 px-4 py-2 text-white shadow-md transition-all duration-300 ease-in-out hover:bg-orange-500 active:scale-90 dark:border-orange-700 dark:bg-orange-700 dark:hover:bg-orange-800"
>
Back to Posts
</A>
</div>
</div>
</Show>
<div class="w-full pt-[30vh]">
<HttpStatusCode code={404} />
<div class="text-center text-2xl">Post not found</div>
</div>
}
>
{(post) => {
const p = post().post;
return (
<>
<Title>{p.title.replaceAll("_", " ")} | Michael Freno</Title>
<div class="select-none overflow-x-hidden">
<div class="z-30">
<div class="page-fade-in z-20 mx-auto h-80 sm:h-96 md:h-[50vh]">
<div class="image-overlay fixed h-80 w-full brightness-75 sm:h-96 md:h-[50vh]">
<img
src={p.banner_photo || "/blueprint.jpg"}
alt="post-cover"
class="h-80 w-full object-cover sm:h-96 md:h-[50vh]"
/>
</div>
<div
class="text-shadow fixed top-36 z-10 w-full select-text text-center tracking-widest text-white brightness-150 sm:top-44 md:top-[20vh]"
style={{ "pointer-events": "none" }}
>
<div class="z-10 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>
<div class="w-full pt-[30vh]">
<div class="text-center text-2xl">
That post is in the works! Come back soon!
</div>
<div class="flex justify-center">
<A
href="/blog"
class="border-peach bg-peach mt-4 rounded border px-4 py-2 text-base shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90"
>
Back to Posts
</A>
</div>
</div>
</Show>
}
>
{(p) => {
const postData = data()!;
// 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>
<div class="overflow-x-hidden select-none">
<div class="z-30">
<div class="page-fade-in z-20 mx-auto h-80 sm:h-96 md:h-[50vh]">
<div class="image-overlay fixed h-80 w-full brightness-75 sm:h-96 md:h-[50vh]">
<img
src={p().banner_photo || "/blueprint.jpg"}
alt="post-cover"
class="h-80 w-full object-cover sm:h-96 md:h-[50vh]"
/>
</div>
<div class="relative z-40 bg-zinc-100 pb-24 dark:bg-zinc-800">
<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:pr-8 md:pt-0">
<a href="#comments" class="mx-2">
<div class="tooltip flex flex-col">
<div class="mx-auto">
<CommentIcon strokeWidth={1} height={32} width={32} />
</div>
<div class="my-auto pl-2 pt-0.5 text-sm text-black dark:text-white">
{postData().comments.length}{" "}
{postData().comments.length === 1 ? "Comment" : "Comments"}
</div>
</div>
</a>
<div class="mx-2">
<SessionDependantLike
currentUserID={userID}
privilegeLevel={privilegeLevel}
likes={postData().likes as any[]}
type={p.category === "project" ? "project" : "blog"}
projectID={p.id}
/>
</div>
</div>
</div>
{/* Post body */}
<div class="mx-auto max-w-4xl px-4 pt-32 md:pt-40">
<div class="prose dark:prose-invert max-w-none" innerHTML={p.body} />
</div>
<Show when={privilegeLevel === "admin"}>
<div class="flex justify-center">
<A
class="z-100 h-fit rounded border border-blue-500 bg-blue-400 px-4 py-2 text-white shadow-md transition-all duration-300 ease-in-out hover:bg-blue-500 active:scale-90 dark:border-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
href={`/blog/edit/${p.id}`}
>
Edit
</A>
</div>
</Show>
{/* Comments section */}
<div id="comments" class="mx-4 pb-12 pt-12 md:mx-8 lg:mx-12">
<div class="mb-8 text-center text-2xl font-semibold">Comments</div>
<div class="mx-auto max-w-2xl rounded-lg border border-zinc-300 bg-zinc-50 p-6 text-center dark:border-zinc-700 dark:bg-zinc-900">
<p class="mb-2 text-lg text-zinc-700 dark:text-zinc-300">
Comments coming soon!
</p>
<p class="text-sm text-zinc-500 dark:text-zinc-400">
We're working on implementing a comment system for this blog.
</p>
<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-3xl font-light tracking-widest">
{p().title.replaceAll("_", " ")}
<div class="py-8 text-xl font-light tracking-widest">
{p().subtitle}
</div>
</div>
</div>
</div>
</>
);
}}
</Show>
)}
</div>
<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">
<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[]}
type={
p().category === "project" ? "project" : "blog"
}
projectID={p().id}
/>
</div>
</div>
</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>
<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}
type="blog"
reactionMap={reactionMap}
currentUserID={postData.userID || ""}
userCommentMap={userCommentMap}
/>
</div>
</div>
</div>
</>
);
}}
</Show>
</Suspense>
</>

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

@@ -6,13 +6,14 @@ import { api } from "~/lib/api";
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 category = () =>
searchParams.category === "project" ? "project" : "blog";
const [title, setTitle] = createSignal("");
const [subtitle, setSubtitle] = createSignal("");
const [body, setBody] = createSignal("");
@@ -24,15 +25,15 @@ export default function CreatePost() {
const handleSubmit = async (e: Event) => {
e.preventDefault();
if (!userID) {
setError("You must be logged in to create a post");
return;
}
setLoading(true);
setError("");
try {
const result = await api.database.createPost.mutate({
category: category(),
@@ -42,9 +43,9 @@ export default function CreatePost() {
banner_photo: bannerPhoto() || null,
published: published(),
tags: tags().length > 0 ? tags() : null,
author_id: userID,
author_id: userID
});
if (result.data) {
// Redirect to the new post
navigate(`/blog/${encodeURIComponent(title())}`);
@@ -59,29 +60,32 @@ export default function CreatePost() {
return (
<>
<Title>Create {category() === "project" ? "Project" : "Blog Post"} | Michael Freno</Title>
<Title>
Create {category() === "project" ? "Project" : "Blog Post"} | Michael
Freno
</Title>
<Show
when={privilegeLevel === "admin"}
fallback={
<div class="w-full pt-[30vh] text-center">
<div class="text-2xl">Unauthorized</div>
<div class="text-gray-600 dark:text-gray-400 mt-4">
<div class="text-text text-2xl">Unauthorized</div>
<div class="text-subtext0 mt-4">
You must be an admin to create posts.
</div>
</div>
}
>
<div class="min-h-screen bg-white dark:bg-zinc-900 py-12 px-4">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-center mb-8">
<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"}
</h1>
<form onSubmit={handleSubmit} class="space-y-6">
{/* Title */}
<div>
<label for="title" class="block text-sm font-medium mb-2">
<label for="title" class="mb-2 block text-sm font-medium">
Title *
</label>
<input
@@ -90,14 +94,14 @@ export default function CreatePost() {
required
value={title()}
onInput={(e) => setTitle(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
class="border-surface2 bg-surface0 w-full rounded-md border px-4 py-2"
placeholder="Enter post title"
/>
</div>
{/* Subtitle */}
<div>
<label for="subtitle" class="block text-sm font-medium mb-2">
<label for="subtitle" class="mb-2 block text-sm font-medium">
Subtitle
</label>
<input
@@ -105,14 +109,14 @@ export default function CreatePost() {
type="text"
value={subtitle()}
onInput={(e) => setSubtitle(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
class="border-surface2 bg-surface0 w-full rounded-md border px-4 py-2"
placeholder="Enter post subtitle"
/>
</div>
{/* Body */}
<div>
<label for="body" class="block text-sm font-medium mb-2">
<label for="body" class="mb-2 block text-sm font-medium">
Body (HTML)
</label>
<textarea
@@ -120,14 +124,14 @@ export default function CreatePost() {
rows={15}
value={body()}
onInput={(e) => setBody(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700 font-mono text-sm"
class="w-full rounded-md border border-surface2 bg-surface0 px-4 py-2 font-mono text-sm"
placeholder="Enter post content (HTML)"
/>
</div>
{/* Banner Photo URL */}
<div>
<label for="banner" class="block text-sm font-medium mb-2">
<label for="banner" class="mb-2 block text-sm font-medium">
Banner Photo URL
</label>
<input
@@ -135,26 +139,33 @@ export default function CreatePost() {
type="text"
value={bannerPhoto()}
onInput={(e) => setBannerPhoto(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
class="border-surface2 bg-surface0 w-full rounded-md border px-4 py-2"
placeholder="Enter banner photo URL"
/>
</div>
{/* Tags */}
<div>
<label for="tags" class="block text-sm font-medium mb-2">
<label for="tags" class="mb-2 block text-sm font-medium">
Tags (comma-separated)
</label>
<input
id="tags"
type="text"
value={tags().join(", ")}
onInput={(e) => setTags(e.currentTarget.value.split(",").map(t => t.trim()).filter(Boolean))}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
onInput={(e) =>
setTags(
e.currentTarget.value
.split(",")
.map((t) => t.trim())
.filter(Boolean)
)
}
class="border-surface2 bg-surface0 w-full rounded-md border px-4 py-2"
placeholder="tag1, tag2, tag3"
/>
</div>
{/* Published */}
<div class="flex items-center gap-2">
<input
@@ -168,30 +179,30 @@ export default function CreatePost() {
Publish immediately
</label>
</div>
{/* Error message */}
<Show when={error()}>
<div class="text-red-500 text-sm">{error()}</div>
<div class="text-red text-sm">{error()}</div>
</Show>
{/* Submit button */}
<div class="flex gap-4">
<button
type="submit"
disabled={loading()}
class={`flex-1 px-6 py-3 rounded-md text-white transition-all ${
class={`flex-1 rounded-md px-6 py-3 text-base transition-all ${
loading()
? "bg-gray-400 cursor-not-allowed"
: "bg-blue-500 hover:bg-blue-600 active:scale-95"
? "bg-blue cursor-not-allowed brightness-50"
: "bg-blue hover:brightness-125 active:scale-95"
}`}
>
{loading() ? "Creating..." : "Create Post"}
</button>
<button
type="button"
onClick={() => navigate("/blog")}
class="px-6 py-3 rounded-md border border-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all"
class="border-surface2 rounded-md border px-6 py-3 transition-all hover:brightness-125"
>
Cancel
</button>

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

@@ -9,36 +9,36 @@ import { ConnectionFactory } from "~/server/utils";
// Server function to fetch post for editing
const getPostForEdit = cache(async (id: string) => {
"use server";
const conn = ConnectionFactory();
const query = `SELECT * FROM Post WHERE id = ?`;
const results = await conn.execute({
sql: query,
args: [id],
args: [id]
});
const tagQuery = `SELECT * FROM Tag WHERE post_id = ?`;
const tagRes = await conn.execute({
sql: tagQuery,
args: [id],
args: [id]
});
const post = results.rows[0];
const tags = tagRes.rows;
return { post, tags };
}, "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("");
const [subtitle, setSubtitle] = createSignal("");
const [body, setBody] = createSignal("");
@@ -47,7 +47,7 @@ export default function EditPost() {
const [tags, setTags] = createSignal<string[]>([]);
const [loading, setLoading] = createSignal(false);
const [error, setError] = createSignal("");
// Populate form when data loads
createEffect(() => {
const postData = data();
@@ -58,9 +58,9 @@ export default function EditPost() {
setBody(p.body || "");
setBannerPhoto(p.banner_photo || "");
setPublished(p.published || false);
if (postData.tags) {
const tagValues = (postData.tags as any[]).map(t => t.value);
const tagValues = (postData.tags as any[]).map((t) => t.value);
setTags(tagValues);
}
}
@@ -68,15 +68,15 @@ export default function EditPost() {
const handleSubmit = async (e: Event) => {
e.preventDefault();
if (!userID) {
setError("You must be logged in to edit posts");
return;
}
setLoading(true);
setError("");
try {
await api.database.updatePost.mutate({
id: parseInt(params.id),
@@ -86,9 +86,9 @@ export default function EditPost() {
banner_photo: bannerPhoto() || null,
published: published(),
tags: tags().length > 0 ? tags() : null,
author_id: userID,
author_id: userID
});
// Redirect to the post
navigate(`/blog/${encodeURIComponent(title())}`);
} catch (err) {
@@ -102,13 +102,13 @@ export default function EditPost() {
return (
<>
<Title>Edit Post | Michael Freno</Title>
<Show
when={privilegeLevel === "admin"}
fallback={
<div class="w-full pt-[30vh] text-center">
<div class="text-2xl">Unauthorized</div>
<div class="text-gray-600 dark:text-gray-400 mt-4">
<div class="text-subtext0 mt-4">
You must be an admin to edit posts.
</div>
</div>
@@ -122,14 +122,14 @@ export default function EditPost() {
</div>
}
>
<div class="min-h-screen bg-white dark:bg-zinc-900 py-12 px-4">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-center mb-8">Edit Post</h1>
<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">Edit Post</h1>
<form onSubmit={handleSubmit} class="space-y-6">
{/* Title */}
<div>
<label for="title" class="block text-sm font-medium mb-2">
<label for="title" class="mb-2 block text-sm font-medium">
Title *
</label>
<input
@@ -138,14 +138,14 @@ export default function EditPost() {
required
value={title()}
onInput={(e) => setTitle(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
class="w-full rounded-md border border-surface2 bg-surface0 px-4 py-2"
placeholder="Enter post title"
/>
</div>
{/* Subtitle */}
<div>
<label for="subtitle" class="block text-sm font-medium mb-2">
<label for="subtitle" class="mb-2 block text-sm font-medium">
Subtitle
</label>
<input
@@ -153,14 +153,14 @@ export default function EditPost() {
type="text"
value={subtitle()}
onInput={(e) => setSubtitle(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
class="w-full rounded-md border border-surface2 bg-surface0 px-4 py-2"
placeholder="Enter post subtitle"
/>
</div>
{/* Body */}
<div>
<label for="body" class="block text-sm font-medium mb-2">
<label for="body" class="mb-2 block text-sm font-medium">
Body (HTML)
</label>
<textarea
@@ -168,14 +168,14 @@ export default function EditPost() {
rows={15}
value={body()}
onInput={(e) => setBody(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700 font-mono text-sm"
class="w-full rounded-md border border-surface2 bg-surface0 px-4 py-2 font-mono text-sm"
placeholder="Enter post content (HTML)"
/>
</div>
{/* Banner Photo URL */}
<div>
<label for="banner" class="block text-sm font-medium mb-2">
<label for="banner" class="mb-2 block text-sm font-medium">
Banner Photo URL
</label>
<input
@@ -183,26 +183,33 @@ export default function EditPost() {
type="text"
value={bannerPhoto()}
onInput={(e) => setBannerPhoto(e.currentTarget.value)}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
class="w-full rounded-md border border-surface2 bg-surface0 px-4 py-2"
placeholder="Enter banner photo URL"
/>
</div>
{/* Tags */}
<div>
<label for="tags" class="block text-sm font-medium mb-2">
<label for="tags" class="mb-2 block text-sm font-medium">
Tags (comma-separated)
</label>
<input
id="tags"
type="text"
value={tags().join(", ")}
onInput={(e) => setTags(e.currentTarget.value.split(",").map(t => t.trim()).filter(Boolean))}
class="w-full px-4 py-2 border border-gray-300 rounded-md dark:bg-zinc-800 dark:border-zinc-700"
onInput={(e) =>
setTags(
e.currentTarget.value
.split(",")
.map((t) => t.trim())
.filter(Boolean)
)
}
class="w-full rounded-md border border-surface2 bg-surface0 px-4 py-2"
placeholder="tag1, tag2, tag3"
/>
</div>
{/* Published */}
<div class="flex items-center gap-2">
<input
@@ -216,30 +223,32 @@ export default function EditPost() {
Published
</label>
</div>
{/* Error message */}
<Show when={error()}>
<div class="text-red-500 text-sm">{error()}</div>
<div class="text-red text-sm">{error()}</div>
</Show>
{/* Submit button */}
<div class="flex gap-4">
<button
type="submit"
disabled={loading()}
class={`flex-1 px-6 py-3 rounded-md text-white transition-all ${
class={`flex-1 rounded-md px-6 py-3 text-base transition-all ${
loading()
? "bg-gray-400 cursor-not-allowed"
: "bg-blue-500 hover:bg-blue-600 active:scale-95"
? "bg-blue cursor-not-allowed brightness-50"
: "bg-blue hover:brightness-125 active:scale-95"
}`}
>
{loading() ? "Saving..." : "Save Changes"}
</button>
<button
type="button"
onClick={() => navigate(`/blog/${encodeURIComponent(title())}`)}
class="px-6 py-3 rounded-md border border-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all"
onClick={() =>
navigate(`/blog/${encodeURIComponent(title())}`)
}
class="border-surface2 rounded-md border px-6 py-3 transition-all hover:brightness-125"
>
Cancel
</button>

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

@@ -11,7 +11,7 @@ import PostSorting from "~/components/blog/PostSorting";
// Server function to fetch posts
const getPosts = cache(async (category: string, privilegeLevel: string) => {
"use server";
let query = `
SELECT
Post.id,
@@ -45,18 +45,19 @@ const getPosts = cache(async (category: string, privilegeLevel: string) => {
}
}
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;`;
const conn = ConnectionFactory();
const results = await conn.execute(query);
const posts = results.rows;
const postIds = posts.map((post: any) => post.id);
const tagQuery = postIds.length > 0
? `SELECT * FROM Tag WHERE post_id IN (${postIds.join(", ")})`
: "SELECT * FROM Tag WHERE 1=0";
const tagQuery =
postIds.length > 0
? `SELECT * FROM Tag WHERE post_id IN (${postIds.join(", ")})`
: "SELECT * FROM Tag WHERE 1=0";
const tagResults = await conn.execute(tagQuery);
const tags = tagResults.rows;
let tagMap: Record<string, number> = {};
tags.forEach((tag: any) => {
tagMap[tag.value] = (tagMap[tag.value] || 0) + 1;
@@ -67,24 +68,32 @@ const getPosts = cache(async (category: string, privilegeLevel: string) => {
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 bannerImage = () =>
category() === "project"
? "/blueprint.jpg"
: "/manhattan-night-skyline.jpg";
const pageTitle = () =>
category() === "all"
? "Posts"
: category() === "project"
? "Projects"
: "Blog";
return (
<>
<Title>{pageTitle()} | Michael Freno</Title>
<div class="min-h-screen overflow-x-hidden bg-white dark:bg-zinc-900">
<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]">
@@ -95,7 +104,7 @@ export default function BlogIndex() {
/>
</div>
<div
class="text-shadow fixed top-36 z-10 w-full select-text text-center tracking-widest text-white brightness-150 sm:top-44 md:top-[20vh]"
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">
@@ -104,8 +113,8 @@ export default function BlogIndex() {
</div>
</div>
</div>
<div class="relative z-40 mx-auto -mt-16 min-h-screen w-11/12 rounded-t-lg bg-zinc-50 pb-24 pt-8 shadow-2xl dark:bg-zinc-800 sm:-mt-20 md:mt-0 md:w-5/6 lg:w-3/4">
<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">
@@ -119,8 +128,8 @@ export default function BlogIndex() {
href="/blog?category=all"
class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
category() === "all"
? "border-orange-500 bg-orange-400 text-white dark:border-orange-700 dark:bg-orange-700"
: "border-zinc-800 hover:bg-zinc-200 dark:border-white dark:hover:bg-zinc-700"
? "border-peach bg-peach text-base"
: "border-text hover:brightness-125"
}`}
>
All
@@ -129,8 +138,8 @@ export default function BlogIndex() {
href="/blog?category=blog"
class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
category() === "blog"
? "border-orange-500 bg-orange-400 text-white dark:border-orange-700 dark:bg-orange-700"
: "border-zinc-800 hover:bg-zinc-200 dark:border-white dark:hover:bg-zinc-700"
? "border-peach bg-peach text-base"
: "border-text hover:brightness-125"
}`}
>
Blog
@@ -139,28 +148,30 @@ export default function BlogIndex() {
href="/blog?category=project"
class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
category() === "project"
? "border-blue-500 bg-blue-400 text-white dark:border-blue-700 dark:bg-blue-700"
: "border-zinc-800 hover:bg-zinc-200 dark:border-white dark:hover:bg-zinc-700"
? "border-blue bg-blue text-base"
: "border-text hover:brightness-125"
}`}
>
Projects
</A>
</div>
<PostSortingSelect type={category() === "project" ? "project" : "blog"} />
<PostSortingSelect
type={category() === "project" ? "project" : "blog"}
/>
<Show when={data() && Object.keys(data()!.tagMap).length > 0}>
<TagSelector
tagMap={data()!.tagMap}
category={category() === "project" ? "project" : "blog"}
<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="rounded border border-zinc-800 px-4 py-2 transition-all duration-300 ease-out hover:bg-zinc-200 active:scale-90 dark:border-white dark:hover:bg-zinc-700 md:mr-4"
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>
@@ -168,7 +179,7 @@ export default function BlogIndex() {
</Show>
</div>
</Suspense>
<Suspense
fallback={
<div class="mx-auto pt-48">
@@ -178,7 +189,7 @@ export default function BlogIndex() {
>
<Show
when={data() && data()!.posts.length > 0}
fallback={<div class="text-center pt-12">No posts yet!</div>}
fallback={<div class="pt-12 text-center">No posts yet!</div>}
>
<div class="mx-auto flex w-11/12 flex-col pt-8">
<PostSorting

34
src/routes/downloads.tsx
View File

@@ -21,36 +21,36 @@ export default function DownloadsPage() {
};
return (
<div class="pb-12 pt-[15vh] bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 min-h-screen">
<div class="text-center text-3xl tracking-widest dark:text-white">
<div class="bg-base min-h-screen pt-[15vh] pb-12">
<div class="text-text text-center text-3xl tracking-widest">
Downloads
</div>
<div class="pt-12">
<div class="text-center text-xl tracking-wide dark:text-white">
<div class="text-text text-center text-xl tracking-wide">
Life and Lineage
<br />
</div>
<div class="flex justify-evenly md:mx-[25vw]">
<div class="flex flex-col w-1/3">
<div class="flex w-1/3 flex-col">
<div class="text-center text-lg">Android (apk only)</div>
<button
onClick={() => download("lineage")}
class="mt-2 rounded-md bg-blue-500 px-4 py-2 text-white shadow-lg transition-all duration-200 ease-out hover:opacity-90 active:scale-95 active:opacity-90"
class="bg-blue mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
>
Download APK
</button>
<div class="text-center italic text-sm mt-2">
<div class="mt-2 text-center text-sm italic">
Note the android version is not well tested, and has performance
issues.
</div>
<div class="rule-around">Or</div>
<div class="italic mx-auto">(Coming soon)</div>
<div class="mx-auto italic">(Coming soon)</div>
<button
onClick={joinBetaPrompt}
class="transition-all mx-auto duration-200 ease-out active:scale-95"
class="mx-auto transition-all duration-200 ease-out active:scale-95"
>
<img
src="/google-play-badge.png"
@@ -85,12 +85,12 @@ export default function DownloadsPage() {
<div class="text-center text-lg">Android</div>
<button
onClick={() => download("shapes-with-abigail")}
class="mt-2 rounded-md bg-blue-500 px-4 py-2 text-white shadow-lg transition-all duration-200 ease-out hover:opacity-90 active:scale-95 active:opacity-90"
class="bg-blue mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
>
Download APK
</button>
<div class="rule-around">Or</div>
<div class="italic mx-auto">(Coming soon)</div>
<div class="mx-auto italic">(Coming soon)</div>
<button
onClick={joinBetaPrompt}
class="transition-all duration-200 ease-out active:scale-95"
@@ -116,7 +116,7 @@ export default function DownloadsPage() {
</div>
<div class="pt-12">
<div class="text-center text-xl tracking-wide dark:text-white">
<div class="text-text text-center text-xl tracking-wide">
Cork
<br />
(macOS 13 Ventura or later)
@@ -125,7 +125,7 @@ export default function DownloadsPage() {
<div class="flex justify-center">
<button
onClick={() => download("cork")}
class="my-2 rounded-md bg-blue-500 px-4 py-2 text-white shadow-lg transition-all duration-200 ease-out hover:opacity-90 active:scale-95 active:opacity-90"
class="bg-blue my-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
>
Download app
</button>
@@ -135,15 +135,15 @@ export default function DownloadsPage() {
</div>
</div>
<ul class="icons flex justify-center pb-6 pt-24 gap-4">
<ul class="icons flex justify-center gap-4 pt-24 pb-6">
<li>
<A
href="https://github.com/MikeFreno/"
target="_blank"
rel="noreferrer"
class="shaker rounded-full border border-zinc-800 dark:border-zinc-300 inline-block hover:scale-110 transition-transform"
class="shaker border-text inline-block rounded-full border transition-transform hover:scale-110"
>
<span class="m-auto p-2 block">
<span class="m-auto block p-2">
<GitHub height={24} width={24} fill={undefined} />
</span>
</A>
@@ -153,9 +153,9 @@ export default function DownloadsPage() {
href="https://www.linkedin.com/in/michael-freno-176001256/"
target="_blank"
rel="noreferrer"
class="shaker rounded-full border border-zinc-800 dark:border-zinc-300 inline-block hover:scale-110 transition-transform"
class="shaker border-text inline-block rounded-full border transition-transform hover:scale-110"
>
<span class="m-auto rounded-md p-2 block">
<span class="m-auto block rounded-md p-2">
<LinkedIn height={24} width={24} fill={undefined} />
</span>
</A>

54
src/routes/test.tsx
View File

@@ -1,4 +1,5 @@
import { createSignal, For, Show } from "solid-js";
import { api } from "~/lib/api";
type EndpointTest = {
name: string;
@@ -105,7 +106,8 @@ const routerSections: RouterSection[] = [
email: "test@example.com",
token: "eyJhbGciOiJIUzI1NiJ9...",
rememberMe: true
}
},
requiresAuth: false
},
{
name: "Request Password Reset",
@@ -287,6 +289,14 @@ const routerSections: RouterSection[] = [
published: true,
author_id: "user_123"
}
},
{
name: "Delete Post",
router: "database",
procedure: "deletePost",
method: "mutation",
description: "Delete a post and its associated data",
sampleInput: { id: 1 }
}
]
},
@@ -597,8 +607,7 @@ const routerSections: RouterSection[] = [
procedure: "emailLogin",
method: "mutation",
description: "Login with email/password (requires verified email)",
sampleInput: { email: "test@example.com", password: "password123" },
requiresAuth: true
sampleInput: { email: "test@example.com", password: "password123" }
},
{
name: "Email Verification",
@@ -873,34 +882,33 @@ export default function TestPage() {
}
}
let url = `/api/trpc/${endpoint.router}.${endpoint.procedure}`;
const options: RequestInit = {
method: endpoint.method === "query" ? "GET" : "POST",
headers: {}
};
// Navigate the router path (handles nested routers like "lineage.auth")
const routerParts = endpoint.router.split(".");
let currentRouter: any = api;
// For queries, input goes in URL parameter
if (endpoint.method === "query" && input !== undefined) {
const encodedInput = encodeURIComponent(JSON.stringify(input));
url += `?input=${encodedInput}`;
for (const part of routerParts) {
currentRouter = currentRouter[part];
if (!currentRouter) {
throw new Error(`Router path not found: ${endpoint.router}`);
}
}
// For mutations, input goes in body
if (endpoint.method === "mutation" && input !== undefined) {
options.headers = { "Content-Type": "application/json" };
options.body = JSON.stringify(input);
const procedure = currentRouter[endpoint.procedure];
if (!procedure) {
throw new Error(
`Procedure not found: ${endpoint.router}.${endpoint.procedure}`
);
}
const response = await fetch(url, options);
// Call the tRPC procedure with proper method
const data =
endpoint.method === "query"
? await procedure.query(input)
: await procedure.mutate(input);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${await response.text()}`);
}
const data = await response.json();
setResults({ ...results(), [key]: data });
} catch (error: any) {
setErrors({ ...errors(), [key]: error.message });
setErrors({ ...errors(), [key]: error.message || String(error) });
} finally {
setLoading({ ...loading(), [key]: false });
}