atridad/atridotdad
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalized

Browse Source
This commit is contained in:
Atridad Lahiji
2025-05-18 23:21:12 -06:00
parent 3d271e3c7c
commit dba6ebd497
13 changed files with 250 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/NavigationBar.tsx
View File

@@ -1,6 +1,6 @@
import { useComputed, useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import { Home, NotebookPen, FileText, CodeXml, MessageCircle } from 'lucide-preact';
import { Home, NotebookPen, FileText, CodeXml } from 'lucide-preact';
interface NavigationBarProps {
currentPath: string;

37
src/components/PostCard.astro
View File

@@ -1,8 +1,8 @@
---
import type { CollectionEntry } from 'astro:content';
import { Icon } from 'astro-icon/components';
export interface Props {
post: CollectionEntry<'blog'>;
post: CollectionEntry<'posts'>;
}
const { post } = Astro.props;
@@ -11,19 +11,17 @@ const { slug } = post;
---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
<div class="card-body p-4 sm:p-6">
<h2 class="card-title text-base-100 justify-center text-center break-words h-14 min-h-14 max-h-14 overflow-hidden">
<div class="card-body p-3">
<h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2">
{title}
</h2>
<p class="text-center text-base-100 break-words h-20 min-h-20 max-h-20 overflow-hidden text-ellipsis">
<p class="text-center text-base-100 break-words mb-3 text-base">
{blurb || 'No description available.'}
</p>
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2">
<Icon name="mdi:clock" class="text-xl" />
<span>
{new Date(pubDate).toLocaleDateString("en-us", {
month: "long",
@@ -33,15 +31,24 @@ const { slug } = post;
</span>
</div>
<div class="card-actions justify-end mt-4">
{post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-2 flex-wrap mb-2 justify-center">
{post.data.tags.map((tag: string) => (
<span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
<Icon name="mdi:tag" class="text-lg" />
{tag}
</span>
))}
</div>
)}
<div class="card-actions justify-end mt-2">
<a
href={`/blog/${slug}`}
class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
href={`/post/${slug}`}
class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
aria-label={`Read more about ${title}`}
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-lg">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
<Icon name="mdi:arrow-right" class="text-lg" />
</a>
</div>
</div>

40
src/components/ProjectCard.astro Normal file
View File

@@ -0,0 +1,40 @@
---
import { Icon } from 'astro-icon/components';
interface Project {
id: string;
name: string;
description: string;
link: string;
}
export interface Props {
project: Project;
}
const { project } = Astro.props;
---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
<div class="card-body p-6">
<h2 class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100">
{project.name}
</h2>
<p class="text-center break-words my-4 text-base-100">
{project.description}
</p>
<div class="card-actions justify-end mt-4">
<a
href={project.link}
target="_blank"
rel="noopener noreferrer"
class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
aria-label={`Visit ${project.name}`}
>
<Icon name="mdi:link" class="text-lg" />
</a>
</div>
</div>
</div>

45
src/components/ScrollUpButton.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import { ArrowUp } from 'lucide-preact';
export default function ScrollUpButton() {
const isVisible = useSignal(false);
useEffect(() => {
const checkScroll = () => {
isVisible.value = window.scrollY > 300;
};
checkScroll();
window.addEventListener("scroll", checkScroll);
return () => {
window.removeEventListener("scroll", checkScroll);
};
}, []);
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
<button
type="button"
onClick={scrollToTop}
class={`fixed bottom-20 right-4 z-20 bg-secondary hover:bg-primary
p-3 rounded-full shadow-lg transition-all duration-300
${
isVisible.value
? "opacity-70 translate-y-0"
: "opacity-0 translate-y-10 pointer-events-none"
}`}
aria-label="Scroll to top"
>
<ArrowUp class="text-lg" />
</button>
);
}