From c4e11c2e02a80e4a5bd3f3a61bf8fc5b68826dfd Mon Sep 17 00:00:00 2001 From: "Wyatt J. Miller" Date: Tue, 25 Feb 2025 13:22:45 -0500 Subject: [PATCH] added blog post page, reverted back to flex blog landing, added types --- frontend/components/AuthorCard.tsx | 8 -------- frontend/components/Footer.tsx | 6 ------ frontend/components/PostBody.tsx | 11 +++++++++++ frontend/components/PostCard.tsx | 14 ++------------ frontend/components/PostCarousel.tsx | 9 +++++---- frontend/components/PostHeader.tsx | 26 ++++++++++++++++++++++++++ frontend/routes/authors/[id].tsx | 2 +- frontend/routes/index.tsx | 2 +- frontend/routes/posts/[id].tsx | 12 +++++++++++- frontend/routes/posts/index.tsx | 2 +- frontend/types/index.ts | 17 +++++++++++++++++ 11 files changed, 75 insertions(+), 34 deletions(-) create mode 100644 frontend/components/PostBody.tsx create mode 100644 frontend/components/PostHeader.tsx create mode 100644 frontend/types/index.ts diff --git a/frontend/components/AuthorCard.tsx b/frontend/components/AuthorCard.tsx index 8663d5b..373c575 100644 --- a/frontend/components/AuthorCard.tsx +++ b/frontend/components/AuthorCard.tsx @@ -34,11 +34,3 @@ export default function AuthorCard({ ); } - -export type Author = { - author_id: number; - first_name: string; - last_name: string; - bio: string; - image?: string; -}; diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx index 084bc15..6ac63fe 100644 --- a/frontend/components/Footer.tsx +++ b/frontend/components/Footer.tsx @@ -43,12 +43,6 @@ export default function Footer() { Email me - -
X (Twitter)
- {post.body} + ); +}; + +export type PostBodyOpts = { + post: Post; +}; diff --git a/frontend/components/PostCard.tsx b/frontend/components/PostCard.tsx index da3f039..a38e1ae 100644 --- a/frontend/components/PostCard.tsx +++ b/frontend/components/PostCard.tsx @@ -1,10 +1,11 @@ import { convertUtc } from "../lib/convertUtc.ts"; import { truncateString } from "../lib/truncate.ts"; +import { Post } from "../types/index.ts"; export const PostCard = function PostCard({ post }: { post: Post }) { return (
- +

{post.title}

Written by{" "} @@ -21,14 +22,3 @@ export const PostCard = function PostCard({ post }: { post: Post }) {

); }; - -export type Post = { - post_id: number; - author_id: number; - first_name: string; - last_name: string; - title: string; - body: string; - created_at: string; - slug: string; -}; diff --git a/frontend/components/PostCarousel.tsx b/frontend/components/PostCarousel.tsx index efa6c30..7421147 100644 --- a/frontend/components/PostCarousel.tsx +++ b/frontend/components/PostCarousel.tsx @@ -1,4 +1,5 @@ -import { Post, PostCard } from "./PostCard.tsx"; +import { PostCard } from "./PostCard.tsx"; +import { Post } from "../types/index.ts"; interface PostOpts { posts: Post[]; @@ -6,9 +7,9 @@ interface PostOpts { export const PostCarousel = function PostCarousel({ posts }: PostOpts) { return ( -
-
-
+
+
+
{posts.map((post: Post) => ( ))} diff --git a/frontend/components/PostHeader.tsx b/frontend/components/PostHeader.tsx new file mode 100644 index 0000000..1f38e5a --- /dev/null +++ b/frontend/components/PostHeader.tsx @@ -0,0 +1,26 @@ +import { Post } from "../types/index.ts"; +import { convertUtc } from "../lib/convertUtc.ts"; + +export const PostHeader = function PostHeader({ post }: PostHeaderOpts) { + return ( +
+
+
+
+

+ {post.title} +

+

+ by {post.first_name} {post.last_name} posted on{" "} + {convertUtc(post.created_at)} +

+
+
+
+
+ ); +}; + +export type PostHeaderOpts = { + post: Post; +}; diff --git a/frontend/routes/authors/[id].tsx b/frontend/routes/authors/[id].tsx index a847fe1..d8b3d41 100644 --- a/frontend/routes/authors/[id].tsx +++ b/frontend/routes/authors/[id].tsx @@ -1,6 +1,6 @@ import { FreshContext, Handlers, PageProps } from "$fresh/server.ts"; import AuthorCard from "../../components/AuthorCard.tsx"; -import { Post } from "../../components/PostCard.tsx"; +import { Post } from "../../types/index.ts"; import { PostCarousel } from "../../components/PostCarousel.tsx"; export const handler: Handlers = { diff --git a/frontend/routes/index.tsx b/frontend/routes/index.tsx index 4938fbc..230127a 100644 --- a/frontend/routes/index.tsx +++ b/frontend/routes/index.tsx @@ -6,7 +6,7 @@ export default function Home() {
diff --git a/frontend/routes/posts/[id].tsx b/frontend/routes/posts/[id].tsx index 92e5e90..390663c 100644 --- a/frontend/routes/posts/[id].tsx +++ b/frontend/routes/posts/[id].tsx @@ -1,4 +1,6 @@ import { FreshContext, Handlers, PageProps } from "$fresh/server.ts"; +import { PostHeader } from "../../components/PostHeader.tsx"; +import { PostBody } from "../../components/PostBody.tsx"; interface PageData { post_id: number; @@ -24,5 +26,13 @@ export const handler: Handlers = { }; export default function PostIdentifier({ data }: PageProps) { - return
; + const { postData } = data; + console.log(postData); + + return ( +
+ + +
+ ); } diff --git a/frontend/routes/posts/index.tsx b/frontend/routes/posts/index.tsx index 5ff08a2..48696cc 100644 --- a/frontend/routes/posts/index.tsx +++ b/frontend/routes/posts/index.tsx @@ -1,7 +1,7 @@ import { PostCarousel } from "../../components/PostCarousel.tsx"; import { Handlers, PageProps } from "$fresh/server.ts"; -import { Post } from "../../components/PostCard.tsx"; +import { Post } from "../../types/index.ts"; import * as hi from "jsr:@preact-icons/hi2"; interface PageData { diff --git a/frontend/types/index.ts b/frontend/types/index.ts new file mode 100644 index 0000000..329e9ec --- /dev/null +++ b/frontend/types/index.ts @@ -0,0 +1,17 @@ +export type Post = { + post_id: number; + author_id: number; + first_name: string; + last_name: string; + title: string; + body: string; + created_at: string; +}; + +export type Author = { + author_id: number; + first_name: string; + last_name: string; + bio: string; + image?: string; +};