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

modified PostCarousel to use grid, among other things

Browse Source
This commit is contained in:
Wyatt J. Miller 2024-12-10 14:08:03 -05:00
parent 637f0b47dd
commit addb2e55d9
5 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/components/AuthorCard.tsx
View File

@ -9,11 +9,13 @@ export default function AuthorCard({
}) {
return (
<div
class={isIdentified
? "p-6 bg-[#45475a] rounded-lg shadow-md"
: "p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105"}
class={
isIdentified
? "p-6 bg-[#313244] shadow-md"
: "p-6 bg-[#313244] shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105"
}
>
<div class="min-w-screen flex flex-col items-center justify-between bg-[#313244] sm:min-h-screen">
<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">
<PhotoCircle
src={author.image ?? "/logo.svg"}

28
frontend/components/Footer.tsx
View File

@ -1,3 +1,5 @@
import * as hi from "jsr:@preact-icons/hi2";
export default function Footer() {
return (
<footer class="bg-[#313244] text-[#cdd6f4] py-8">
@ -7,51 +9,59 @@ export default function Footer() {
<div class="space-y-2">
<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="/posts.rss"
href={`${Deno.env.get("BASE_URI_API")}/posts/rss`}
>
<div class="flex items-center gap-2">
<hi.HiOutlineRss />
RSS
</div>
</a>
<br />
<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="/sitemap.xml"
>
<div class="flex items-center gap-2">
<hi.HiOutlineMap />
Sitemap
</div>
</a>
</div>
<div>
<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]">
<div class="flex items-center gap-2">
<hi.HiOutlineBriefcase />
Resume
</div>
</a>
<br />
<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="mailto:wjmiller2016@gmail.com"
>
<div class="flex items-center gap-2">
<hi.HiOutlineEnvelope />
Email me
</div>
</a>
<br />
<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"
>
X
<div class="flex items-center gap-2">X (Twitter)</div>
</a>
<br />
<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"
>
GitHub
<div class="flex items-center gap-2">GitHub</div>
</a>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-4 text-center">
<p class="text-sm text-gray-400">
© {new Date().getFullYear()}{" "}
Miller Web Solutions. All Rights Reserved. Hosted by Akamai.
© {new Date().getFullYear()} Miller Web Solutions. All Rights
Reserved. Hosted by Akamai.
</p>
</div>
</div>

3
frontend/components/PostCard.tsx
View File

@ -4,7 +4,7 @@ import { truncateString } from "../lib/truncate.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.post_id}`}>
<a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.slug}`}>
<h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
<p class="text-white">
Written by{" "}
@ -30,4 +30,5 @@ export type Post = {
title: string;
body: string;
created_at: string;
slug: string;
};

12
frontend/components/PostCarousel.tsx
View File

@ -6,12 +6,12 @@ interface PostOpts {
export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
return (
<div class="post-carousel flex flex-col items-center justify-between bg-[#313244]">
<div class="flex items-center justify-center">
<div class="flex space-x-4">
{posts.map((post: Post) => {
return <PostCard post={post} />;
})}
<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">
{posts.map((post: Post) => (
<PostCard key={post.post_id} post={post} />
))}
</div>
</div>
</div>

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

@ -12,7 +12,7 @@ interface PageData {
}
export const handler: Handlers<PageData> = {
async GET(_: any, ctx: any) {
async GET(_, ctx) {
const [featuredResult, recentResult, hotResult, popularResult] =
await Promise.all([
fetch(`${Deno.env.get("BASE_URI_API")}/posts/featured`),
@ -22,8 +22,8 @@ export const handler: Handlers<PageData> = {
]);
// parse all JSON responses concurrently
const [featuredPosts, recentPosts, hotPosts, popularPosts] = await Promise
.all([
const [featuredPosts, recentPosts, hotPosts, popularPosts] =
await Promise.all([
featuredResult.json(),
recentResult.json(),
hotResult.json(),
@ -52,7 +52,7 @@ export default function PostPage({ data }: PageProps<PageData>) {
Featured Posts
</h2>
</div>
<div className="text-lg font-thin italic text-white text-center flex">
<div className="text-lg font-thin italic text-white mb-4 text-center flex">
Ignite the impossible
</div>
<PostCarousel posts={featuredPosts} />