wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added blog post page, reverted back to flex blog landing, added types

Browse Source
This commit is contained in:
Wyatt J. Miller 2025-02-25 13:22:45 -05:00
parent addb2e55d9
commit c4e11c2e02
11 changed files with 75 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/components/AuthorCard.tsx
View File

@ -34,11 +34,3 @@ export default function AuthorCard({
</div>
);
}
export type Author = {
author_id: number;
first_name: string;
last_name: string;
bio: string;
image?: string;
};

6
frontend/components/Footer.tsx
View File

@ -43,12 +43,6 @@ export default function Footer() {
Email me
</div>
</a>
<a
class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
href="https://x.com/wymillerlinux"
>
<div class="flex items-center gap-2">X (Twitter)</div>
</a>
<a
class="mb-8 text-[#cdd6f4] transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer visited:text-[#bac2de]"
href="https://github.com/wymillerlinux"

11
frontend/components/PostBody.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Post } from "../types/index.ts";
export const PostBody = function PostBody({ post }: PostBodyOpts) {
return (
<div class="p-6 bg-[#313244] shadow-md text-[#f5e0dc]">{post.body}</div>
);
};
export type PostBodyOpts = {
post: Post;
};

14
frontend/components/PostCard.tsx
View File

@ -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 (
<div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
<a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.slug}`}>
<a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
<h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
<p class="text-white">
Written by{" "}
@ -21,14 +22,3 @@ export const PostCard = function PostCard({ post }: { post: Post }) {
</div>
);
};
export type Post = {
post_id: number;
author_id: number;
first_name: string;
last_name: string;
title: string;
body: string;
created_at: string;
slug: string;
};

9
frontend/components/PostCarousel.tsx
View File

@ -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 (
<div className="flex w-full bg-[#313244] p-8">
<div className="items-center justify-center">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-7xl w-full">
<div className="flex w-full justify-start items-start bg-[#313244] p-8">
<div className="max-w-7xl mx-auto">
<div className="flex flex-wrap justify-center gap-3">
{posts.map((post: Post) => (
<PostCard key={post.post_id} post={post} />
))}

26
frontend/components/PostHeader.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Post } from "../types/index.ts";
import { convertUtc } from "../lib/convertUtc.ts";
export const PostHeader = function PostHeader({ post }: PostHeaderOpts) {
return (
<div class="p-6 bg-[#313244] shadow-md">
<div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md">
<div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
<div class="space-y-2 text-center md:text-left">
<p class="text-2xl text-[#f5e0dc] font-bold sm:text-4xl">
{post.title}
</p>
<p class="text-md font-medium text-[#E39A9C] sm:text-xl italic">
by {post.first_name} {post.last_name} posted on{" "}
{convertUtc(post.created_at)}
</p>
</div>
</div>
</div>
</div>
);
};
export type PostHeaderOpts = {
post: Post;
};

2
frontend/routes/authors/[id].tsx
View File

@ -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<PageData> = {

2
frontend/routes/index.tsx
View File

@ -6,7 +6,7 @@ export default function Home() {
<div class="min-w-screen flex flex-col items-center justify-between bg-[#313244] sm:min-h-screen">
<div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
<PhotoCircle
src="https://websites.us-east-1.linodeobjects.com/IMG_1480-min.png"
src="https://wyattjmiller.us-ord-1.linodeobjects.com/IMG_1480-min.png"
alt="Wyatt's profile photo"
/>
<div class="space-y-2 text-center md:text-left">

12
frontend/routes/posts/[id].tsx
View File

@ -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<PageData> = {
};
export default function PostIdentifier({ data }: PageProps<PageData>) {
return <div className=""></div>;
const { postData } = data;
console.log(postData);
return (
<div>
<PostHeader post={postData} />
<PostBody post={postData} />
</div>
);
}

2
frontend/routes/posts/index.tsx
View File

@ -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 {

17
frontend/types/index.ts Normal file
View File

@ -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;
};