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

got frontend working with backend project

Browse Source
This commit is contained in:
Wyatt J. Miller
2024-11-27 00:35:32 -05:00
parent 66ba89c0b1
commit 0093589a4b
11 changed files with 250 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/routes/_404.tsx
View File

@ -8,18 +8,11 @@ export default function Error404() {
</Head>
<div class="px-4 py-8 mx-auto bg-[#86efac]">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
<img
class="my-6"
src="/logo.svg"
width="128"
height="128"
alt="the Fresh logo: a sliced lemon dripping with juice"
/>
<h1 class="text-4xl font-bold">404 - Page not found</h1>
<p class="my-4">
The page you were looking for doesn't exist.
</p>
<a href="/" class="underline">Go back home</a>
<p class="my-4">The page you were looking for doesn't exist.</p>
<a href="/" class="underline">
Go back home
</a>
</div>
</div>
</>

0
frontend/routes/authors/[id].tsx Normal file
View File

0
frontend/routes/authors/index.tsx Normal file
View File

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

@ -1,3 +1,16 @@
export default function PostIdentifier() {
return null;
import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
import { useFetch } from "../../lib/useFetch.tsx";
interface PostResponse {
post_id: number;
first_nane: string;
last_name: string;
title: string;
body: string;
created_at: string;
}
export default function PostIdentifier(props: PageProps) {
console.log(props.data);
return <div>BLOG POST #{props.params.id}</div>;
}

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

@ -1,52 +1,84 @@
export default function Posts() {
// import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
import { PostCarousel } from "../../islands/PostCarousel.tsx";
// export interface PostItems {
// title: string;
// author: string;
// publish_date: string;
// truncated_content: string;
// }
//
// export interface PostReponse {
// new_posts: Array<PostItems>;
// popular_posts: Array<PostItems>;
// hot_posts: Array<PostItems>;
// }
//
// export interface PostResponseOne {
// post_id: number;
// first_name: string;
// last_name: string;
// title: string;
// body: string;
// created_at: string;
// }
//
// export const handler: Handlers<Array<PostCard>> = {
// GET(_req: Request, ctx: FreshContext) {
// const results = fetch(`${Deno.env.get("BASE_URI")}/posts/all`);
// return ctx.render(results.then((resp) => resp.json()));
// },
// };
import { Handlers, PageProps } from "$fresh/server.ts";
import { Post } from "../../islands/PostCard.tsx";
interface PageData {
featuredPosts: Post[];
hotPosts: Post[];
popularPosts: Post[];
}
export const handler: Handlers<PageData> = {
async GET(_: any, ctx: any) {
const [featuredResult, hotResult, popularResult] = await Promise.all([
fetch(`${Deno.env.get("BASE_URI")}/posts/all`),
fetch(`${Deno.env.get("BASE_URI")}/posts/hot`),
fetch(`${Deno.env.get("BASE_URI")}/posts/popular`),
]);
// Parse all JSON responses concurrently
const [featuredPosts, hotPosts, popularPosts] = await Promise.all([
featuredResult.json(),
hotResult.json(),
popularResult.json(),
]);
return ctx.render({
featuredPosts,
hotPosts,
popularPosts,
});
},
};
export default function PostPage({ data }: PageProps<PageData>) {
const { featuredPosts, hotPosts, popularPosts } = data;
return (
<div class="min-w-screen flex flex-col items-center justify-between bg-gray-100 dark:bg-gray-700 sm:min-h-screen">
<div class="space-y-2 text-center md:text-left">
<h1 class="text-2xl text-white font-bold sm:text-4xl">Blog posts</h1>
<h2 class="text-md font-medium text-cyan-700 dark:text-cyan-200 sm:text-xl">
A lot of them!
</h2>
</div>
<div class="h-screen bg-gray-700 flex items-center justify-center">
<div class="flex bg-gray-700 space-x-4">
<div class="p-6 bg-gray-700 rounded-lg shadow-md">
<h2 class="text-grey-900 text-lg font-bold mb-2">Blog Post 1</h2>
<p>Written by Wyatt Miller</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Senectus
aliquet fusce habitant sem integer lectus curae quisque. Tincidunt
vitae adipiscing justo et nulla. Faucibus imperdiet turpis maximus
nam natoque suscipit platea. Feugiat imperdiet malesuada enim diam
primis. Vitae sollicitudin molestie cubilia tempus nunc dignissim
adipiscing.
</p>
</div>
<div class="p-6 bg-gray-700 rounded-lg shadow-md">
<h2 class="text-grey-900 text-lg font-bold mb-2">Blog Post 2</h2>
<p>Written by Wyatt Miller</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Senectus
aliquet fusce habitant sem integer lectus curae quisque. Tincidunt
vitae adipiscing justo et nulla. Faucibus imperdiet turpis maximus
nam natoque suscipit platea. Feugiat imperdiet malesuada enim diam
primis. Vitae sollicitudin molestie cubilia tempus nunc dignissim
adipiscing.
</p>
</div>
<div class="p-6 bg-gray-700 rounded-lg shadow-md">
<h2 class="text-grey-900 text-lg font-bold mb-2">Blog Post 3</h2>
<p>Written by Wyatt Miller</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Senectus
aliquet fusce habitant sem integer lectus curae quisque. Tincidunt
vitae adipiscing justo et nulla. Faucibus imperdiet turpis maximus
nam natoque suscipit platea. Feugiat imperdiet malesuada enim diam
primis. Vitae sollicitudin molestie cubilia tempus nunc dignissim
adipiscing.
</p>
</div>
</div>
</div>
<div class="space-y-12 py-8">
<section>
<h2 class="text-2xl font-bold mb-4">Featured Posts</h2>
<PostCarousel posts={featuredPosts} />
</section>
<section>
<h2 class="text-2xl font-bold mb-4">Recent Posts</h2>
<PostCarousel posts={hotPosts} />
</section>
<section>
<h2 class="text-2xl font-bold mb-4">Popular Posts</h2>
<PostCarousel posts={popularPosts} />
</section>
</div>
);
}