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

continued nojs improvements

Browse Source
This commit is contained in:
Michael Freno
2025-12-22 15:37:47 -05:00
parent 8f7b4cb6ea
commit ad2cde6afc
6 changed files with 317 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
AGENTS.md
View File

@@ -1,12 +1,6 @@
# Agent Guidelines for freno-dev # Agent Guidelines for freno-dev
## Build/Lint/Test Commands ### Tech Stack
- **Dev**: `bun dev` (starts Vinxi dev server)
- **Build**: `bun build` (production build)
- **Start**: `bun start` (production server)
- **No tests configured** - No test runner or test scripts exist yet
## Tech Stack
- **Framework**: SolidJS with SolidStart (Vinxi) - **Framework**: SolidJS with SolidStart (Vinxi)
- **Routing**: @solidjs/router - **Routing**: @solidjs/router
- **API**: tRPC v10 with Zod validation - **API**: tRPC v10 with Zod validation

27
src/app.css
View File

@@ -259,6 +259,33 @@ body {
/* Note: JS will add inline styles and reactive classList that override these defaults */ /* Note: JS will add inline styles and reactive classList that override these defaults */
/* Blog banner fallbacks - similar to main layout */
.blog-banner-image {
/* Full width by default on mobile */
width: 100vw;
margin-left: 0;
}
.blog-banner-text {
/* Full width by default on mobile */
width: 100vw;
margin-left: 0;
}
@media (min-width: 768px) {
.blog-banner-image {
/* Account for sidebars on desktop */
width: calc(100vw - 600px);
margin-left: 300px;
}
.blog-banner-text {
/* Account for sidebars on desktop */
width: calc(100vw - 600px);
margin-left: 300px;
}
}
.cursor-typing { .cursor-typing {
display: inline-block; display: inline-block;
width: 2px; width: 2px;

21
src/app.tsx
View File

@@ -3,9 +3,9 @@ import { FileRoutes } from "@solidjs/start/router";
import { import {
createEffect, createEffect,
ErrorBoundary, ErrorBoundary,
Suspense,
onMount, onMount,
onCleanup onCleanup,
Suspense
} from "solid-js"; } from "solid-js";
import "./app.css"; import "./app.css";
import { LeftBar, RightBar } from "./components/Bars"; import { LeftBar, RightBar } from "./components/Bars";
@@ -189,7 +189,7 @@ function AppLayout(props: { children: any }) {
<div class="flex max-w-screen flex-row"> <div class="flex max-w-screen flex-row">
<LeftBar /> <LeftBar />
<div <div
class="bg-base relative h-screen overflow-x-hidden overflow-y-scroll py-16" class="bg-base relative h-screen overflow-x-hidden overflow-y-scroll"
style={ style={
barsInitialized() barsInitialized()
? { ? {
@@ -198,10 +198,19 @@ function AppLayout(props: { children: any }) {
} }
: undefined : undefined
} }
onMouseUp={handleCenterTapRelease}
onTouchEnd={handleCenterTapRelease}
> >
<Suspense fallback={<TerminalSplash />}>{props.children}</Suspense> <noscript>
<div class="bg-yellow text-crust border-text fixed top-0 z-150 ml-16 border-b-2 p-4 text-center font-semibold md:ml-64">
JavaScript is disabled. Features will be limited.
</div>
</noscript>
<div
class="py-16"
onMouseUp={handleCenterTapRelease}
onTouchEnd={handleCenterTapRelease}
>
<Suspense fallback={<TerminalSplash />}>{props.children}</Suspense>
</div>
</div> </div>
<RightBar /> <RightBar />
</div> </div>

5
src/entry-server.tsx
View File

@@ -12,11 +12,6 @@ export default createHandler(() => (
{assets} {assets}
</head> </head>
<body> <body>
<noscript>
<div style="position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background-color: var(--color-yellow); color: var(--color-crust); padding: 1rem; text-align: center; font-weight: 600; border-bottom: 2px solid var(--color-text);">
JavaScript is disabled. Features will be limited.
</div>
</noscript>
<div id="app">{children}</div> <div id="app">{children}</div>
{scripts} {scripts}
</body> </body>

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

@@ -1,4 +1,4 @@
import { Show, Suspense, For } from "solid-js"; import { Show, For } from "solid-js";
import { import {
useParams, useParams,
A, A,
@@ -222,13 +222,20 @@ const getPostByTitle = query(
export default function PostPage() { export default function PostPage() {
const params = useParams(); const params = useParams();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const { centerWidth, leftBarSize, barsInitialized } = useBars();
const data = createAsync(() => { const data = createAsync(
const sortBy = () => {
(searchParams.sortBy as "newest" | "oldest" | "highest_rated" | "hot") || const sortBy =
"newest"; (searchParams.sortBy as
return getPostByTitle(params.title, sortBy); | "newest"
}); | "oldest"
| "highest_rated"
| "hot") || "newest";
return getPostByTitle(params.title, sortBy);
},
{ deferStream: true }
);
const hasCodeBlock = (str: string): boolean => { const hasCodeBlock = (str: string): boolean => {
return str.includes("<code") && str.includes("</code>"); return str.includes("<code") && str.includes("</code>");
@@ -236,164 +243,171 @@ export default function PostPage() {
return ( return (
<> <>
<Suspense fallback={<TerminalSplash />}> <Show when={data()} fallback={<TerminalSplash />}>
<Show when={data()} fallback={null}> {(loadedData) => (
{(loadedData) => ( <Show when={loadedData().post} fallback={<Navigate href="/404" />}>
<Show when={loadedData().post} fallback={<Navigate href="/404" />}> {(p) => {
{(p) => { const postData = loadedData();
const postData = loadedData();
// Convert arrays back to Maps for component // Convert arrays back to Maps for component
const userCommentMap = new Map<UserPublicData, number[]>( const userCommentMap = new Map<UserPublicData, number[]>(
postData.userCommentArray || [] postData.userCommentArray || []
); );
const reactionMap = new Map<number, CommentReaction[]>( const reactionMap = new Map<number, CommentReaction[]>(
postData.reactionArray || [] postData.reactionArray || []
); );
const { centerWidth, leftBarSize } = useBars();
return ( return (
<> <>
<Title> <Title>
{p().title.replaceAll("_", " ")} | Michael Freno {p().title.replaceAll("_", " ")} | Michael Freno
</Title> </Title>
<Meta <Meta
name="description" name="description"
content={ content={
p().subtitle || p().subtitle ||
`Read ${p().title.replaceAll("_", " ")} by Michael Freno on the freno.me blog.` `Read ${p().title.replaceAll("_", " ")} by Michael Freno on the freno.me blog.`
} }
/> />
<div class="relative overflow-x-hidden"> <div class="relative overflow-x-hidden">
{/* Fixed banner image background */} {/* Fixed banner image background */}
<div class="fixed top-0 left-0 z-0 h-80 w-full sm:h-96 md:h-[50vh]"> <div class="fixed top-0 left-0 z-0 h-80 w-full sm:h-96 md:h-[50vh]">
<div class="absolute inset-0 h-full w-full overflow-hidden brightness-75"> <div class="absolute inset-0 h-full w-full overflow-hidden brightness-75">
<img <img
src={p().banner_photo || "/blueprint.jpg"} src={p().banner_photo || "/blueprint.jpg"}
alt="post-cover" alt="post-cover"
class="h-full object-cover select-none" class="blog-banner-image h-full object-cover select-none"
style={{ style={
width: `${centerWidth()}px`, barsInitialized()
"margin-left": `${leftBarSize()}px`, ? {
"pointer-events": "none" width: `${centerWidth()}px`,
}} "margin-left": `${leftBarSize()}px`,
/> "pointer-events": "none"
</div> }
<div : {
class="text-shadow text-text absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest brightness-150 select-text" "pointer-events": "none"
style={{ }
width: `${centerWidth()}px`, }
"margin-left": `${leftBarSize()}px`
}}
>
<div class="text-3xl font-light tracking-widest">
{p().title.replaceAll("_", " ")}
<div class="py-8 text-xl font-light tracking-widest">
{p().subtitle}
</div>
</div>
</div>
</div>
{/* Spacer to push content down */}
<div class="-mt-[10vh] h-80 sm:h-96 md:h-[50vh]" />
{/* Content that slides over the fixed image */}
<div class="bg-base relative z-40 pb-24">
<div class="top-4 flex w-full flex-col justify-center md:absolute md:flex-row md:justify-between">
<div class="">
<div class="flex justify-center italic md:justify-start md:pl-24">
<div>
Written {new Date(p().date).toDateString()}
<br />
By Michael Freno
</div>
</div>
<div class="flex max-w-105 flex-wrap justify-center italic md:justify-start md:pl-24">
<For each={postData.tags as any[]}>
{(tag) => (
<div class="group relative m-1 h-fit w-fit rounded-xl bg-purple-600 px-2 py-1 text-sm">
<div class="text-white">{tag.value}</div>
</div>
)}
</For>
</div>
</div>
<div class="flex flex-row justify-center pt-4 md:pt-0 md:pr-8">
<a href="#comments" class="mx-2">
<div class="tooltip flex flex-col">
<div class="mx-auto hover:brightness-125">
<CommentIcon
strokeWidth={1}
height={32}
width={32}
/>
</div>
<div class="text-text my-auto pt-0.5 pl-2 text-sm">
{postData.comments.length}{" "}
{postData.comments.length === 1
? "Comment"
: "Comments"}
</div>
</div>
</a>
<div class="mx-2">
<SessionDependantLike
currentUserID={postData.userID}
privilegeLevel={postData.privilegeLevel}
likes={postData.likes as any[]}
projectID={p().id}
/>
</div>
</div>
</div>
{/* Post body */}
<PostBodyClient
body={p().body}
hasCodeBlock={hasCodeBlock(p().body)}
/> />
</div>
<Show when={postData.privilegeLevel === "admin"}> <div
<div class="flex justify-center"> class="text-shadow text-text blog-banner-text absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest brightness-150 select-text"
<A style={
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" barsInitialized()
href={`/blog/edit/${p().id}`} ? {
> width: `${centerWidth()}px`,
Edit "margin-left": `${leftBarSize()}px`
</A> }
: undefined
}
>
<div class="text-3xl font-light tracking-widest">
{p().title.replaceAll("_", " ")}
<div class="py-8 text-xl font-light tracking-widest">
{p().subtitle}
</div> </div>
</Show>
{/* Comments section */}
<div
id="comments"
class="mx-4 pt-12 pb-12 md:mx-8 lg:mx-12"
>
<CommentSectionWrapper
privilegeLevel={postData.privilegeLevel}
allComments={postData.comments as Comment[]}
topLevelComments={
postData.topLevelComments as Comment[]
}
id={p().id}
reactionMap={reactionMap}
currentUserID={postData.userID || ""}
userCommentMap={userCommentMap}
/>
</div> </div>
</div> </div>
</div> </div>
</>
); {/* Spacer to push content down */}
}} <div class="-mt-[10vh] h-80 sm:h-96 md:h-[50vh]" />
</Show>
)} {/* Content that slides over the fixed image */}
</Show> <div class="bg-base relative z-40 pb-24">
</Suspense> <div class="top-4 flex w-full flex-col justify-center md:absolute md:flex-row md:justify-between">
<div class="">
<div class="flex justify-center italic md:justify-start md:pl-24">
<div>
Written {new Date(p().date).toDateString()}
<br />
By Michael Freno
</div>
</div>
<div class="flex max-w-105 flex-wrap justify-center italic md:justify-start md:pl-24">
<For each={postData.tags as any[]}>
{(tag) => (
<div class="group relative m-1 h-fit w-fit rounded-xl bg-purple-600 px-2 py-1 text-sm">
<div class="text-white">{tag.value}</div>
</div>
)}
</For>
</div>
</div>
<div class="flex flex-row justify-center pt-4 md:pt-0 md:pr-8">
<a href="#comments" class="mx-2">
<div class="tooltip flex flex-col">
<div class="mx-auto hover:brightness-125">
<CommentIcon
strokeWidth={1}
height={32}
width={32}
/>
</div>
<div class="text-text my-auto pt-0.5 pl-2 text-sm">
{postData.comments.length}{" "}
{postData.comments.length === 1
? "Comment"
: "Comments"}
</div>
</div>
</a>
<div class="mx-2">
<SessionDependantLike
currentUserID={postData.userID}
privilegeLevel={postData.privilegeLevel}
likes={postData.likes as any[]}
projectID={p().id}
/>
</div>
</div>
</div>
{/* Post body */}
<PostBodyClient
body={p().body}
hasCodeBlock={hasCodeBlock(p().body)}
/>
<Show when={postData.privilegeLevel === "admin"}>
<div class="flex justify-center">
<A
class="border-blue bg-blue z-100 h-fit rounded border px-4 py-2 text-base shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90"
href={`/blog/edit/${p().id}`}
>
Edit
</A>
</div>
</Show>
{/* Comments section */}
<div
id="comments"
class="mx-4 pt-12 pb-12 md:mx-8 lg:mx-12"
>
<CommentSectionWrapper
privilegeLevel={postData.privilegeLevel}
allComments={postData.comments as Comment[]}
topLevelComments={
postData.topLevelComments as Comment[]
}
id={p().id}
reactionMap={reactionMap}
currentUserID={postData.userID || ""}
userCommentMap={userCommentMap}
/>
</div>
</div>
</div>
</>
);
}}
</Show>
)}
</Show>
</> </>
); );
} }

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

@@ -1,63 +1,129 @@
import { Show, Suspense } from "solid-js"; import { Show } from "solid-js";
import { useSearchParams, A } from "@solidjs/router"; import { useSearchParams, A, query } from "@solidjs/router";
import { Title } from "@solidjs/meta"; import { Title } from "@solidjs/meta";
import { createAsync } from "@solidjs/router"; import { createAsync } from "@solidjs/router";
import { api } from "~/lib/api"; import { getRequestEvent } from "solid-js/web";
import PostSortingSelect from "~/components/blog/PostSortingSelect"; import PostSortingSelect from "~/components/blog/PostSortingSelect";
import TagSelector from "~/components/blog/TagSelector"; import TagSelector from "~/components/blog/TagSelector";
import PostSorting from "~/components/blog/PostSorting"; import PostSorting from "~/components/blog/PostSorting";
import { TerminalSplash } from "~/components/TerminalSplash"; import { TerminalSplash } from "~/components/TerminalSplash";
// Server function to fetch all posts
const getPosts = query(async () => {
"use server";
const { ConnectionFactory, getPrivilegeLevel } =
await import("~/server/utils");
const { withCache } = await import("~/server/cache");
const event = getRequestEvent()!;
const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
return withCache(`posts-${privilegeLevel}`, 5 * 60 * 1000, async () => {
const conn = ConnectionFactory();
// Fetch all posts with aggregated data
let postsQuery = `
SELECT
p.id,
p.title,
p.subtitle,
p.body,
p.banner_photo,
p.date,
p.published,
p.category,
p.author_id,
p.reads,
p.attachments,
COUNT(DISTINCT pl.user_id) as total_likes,
COUNT(DISTINCT c.id) as total_comments
FROM Post p
LEFT JOIN PostLike pl ON p.id = pl.post_id
LEFT JOIN Comment c ON p.id = c.post_id
`;
if (privilegeLevel !== "admin") {
postsQuery += ` WHERE p.published = TRUE`;
}
postsQuery += ` GROUP BY p.id, p.title, p.subtitle, p.body, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments`;
postsQuery += ` ORDER BY p.date ASC;`;
const postsResult = await conn.execute(postsQuery);
const posts = postsResult.rows;
const tagsQuery = `
SELECT t.value, t.post_id
FROM Tag t
JOIN Post p ON t.post_id = p.id
${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
ORDER BY t.value ASC
`;
const tagsResult = await conn.execute(tagsQuery);
const tags = tagsResult.rows;
const tagMap: Record<string, number> = {};
tags.forEach((tag: any) => {
const key = `${tag.value}`;
tagMap[key] = (tagMap[key] || 0) + 1;
});
return { posts, tags, tagMap, privilegeLevel };
});
}, "posts");
export default function BlogIndex() { export default function BlogIndex() {
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const sort = () => searchParams.sort || "newest"; const sort = () => searchParams.sort || "newest";
const filters = () => searchParams.filter || ""; const filters = () => searchParams.filter || "";
const data = createAsync(() => api.blog.getPosts.query()); const data = createAsync(() => getPosts(), { deferStream: true });
return ( return (
<> <>
<Title>Blog | Michael Freno</Title> <Title>Blog | Michael Freno</Title>
<div class="mx-auto pt-8 pb-24"> <div class="mx-auto pt-8 pb-24">
<Suspense fallback={<TerminalSplash />}> <Show when={data()} fallback={<TerminalSplash />}>
<div class="flex flex-row justify-around gap-4 px-4"> {(loadedData) => (
<PostSortingSelect /> <>
<div class="flex flex-row justify-around gap-4 px-4">
<PostSortingSelect />
<Show when={data() && Object.keys(data()!.tagMap).length > 0}> <Show when={Object.keys(loadedData().tagMap).length > 0}>
<TagSelector tagMap={data()!.tagMap} /> <TagSelector tagMap={loadedData().tagMap} />
</Show> </Show>
<Show when={data()?.privilegeLevel === "admin"}> <Show when={loadedData().privilegeLevel === "admin"}>
<div class="mt-2 flex justify-center md:mt-0 md:justify-end"> <div class="mt-2 flex justify-center md:mt-0 md:justify-end">
<A <A
href="/blog/create" href="/blog/create"
class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4" class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
> >
Create Post Create Post
</A> </A>
</div>
</Show>
</div> </div>
</Show>
</div>
</Suspense>
<Suspense fallback={<TerminalSplash />}> <Show
<Show when={loadedData().posts.length > 0}
when={data() && data()!.posts.length > 0} fallback={<div class="pt-12 text-center">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">
<div class="mx-auto flex w-11/12 flex-col pt-8"> <PostSorting
<PostSorting posts={loadedData().posts}
posts={data()!.posts} tags={loadedData().tags}
tags={data()!.tags} privilegeLevel={loadedData().privilegeLevel}
privilegeLevel={data()!.privilegeLevel} filters={filters()}
filters={filters()} sort={sort()}
sort={sort()} />
/> </div>
</div> </Show>
</Show> </>
</Suspense> )}
</Show>
</div> </div>
</> </>
); );