looking decent

2025-12-17 23:22:12 -05:00
parent 1bc57c61eb
commit 4b64f50670
23 changed files with 179 additions and 266 deletions
--- a/src/routes/blog/[title]/index.tsx
+++ b/src/routes/blog/[title]/index.tsx
@@ -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}
--- a/src/routes/blog/create/index.tsx
+++ b/src/routes/blog/create/index.tsx
@@ -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">
--- a/src/routes/blog/edit/[id]/index.tsx
+++ b/src/routes/blog/edit/[id]/index.tsx
@@ -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>
--- a/src/routes/blog/index.tsx
+++ b/src/routes/blog/index.tsx
@@ -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>
    </>
  );