mirror of
https://github.com/anotherhadi/blog.git
synced 2026-04-04 04:12:11 +02:00
init
This commit is contained in:
Hadi
221
src/layouts/ProjectLayout.astro
Normal file
221
src/layouts/ProjectLayout.astro
Normal file
@@ -0,0 +1,221 @@
|
||||
---
|
||||
import Layout from "./Layout.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import TagBadge from "../components/TagBadge.astro";
|
||||
import { ChevronLeft, ExternalLink } from "@lucide/astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image: any;
|
||||
tags: string[];
|
||||
demoLink?: string;
|
||||
url?: string;
|
||||
sourceLink?: string;
|
||||
}
|
||||
|
||||
const { title, description, image, tags, demoLink, url, sourceLink } =
|
||||
Astro.props;
|
||||
---
|
||||
|
||||
<Layout title={`${title} - Another Hadi`} description={description}>
|
||||
<article class="max-w-4xl mx-auto px-4 py-20">
|
||||
<!-- Back button -->
|
||||
<div class="mb-8">
|
||||
<a href="/projects" class="btn btn-ghost btn-sm">
|
||||
<ChevronLeft size={18} />
|
||||
Back to Projects
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Featured Image -->
|
||||
<!-- TODO: Future Enhancement - Support multiple images/project gallery -->
|
||||
{
|
||||
image && (
|
||||
<figure class="mb-8 rounded-2xl overflow-hidden">
|
||||
<Image
|
||||
src={image}
|
||||
alt={title}
|
||||
class="w-full aspect-video object-cover"
|
||||
width={1200}
|
||||
height={630}
|
||||
/>
|
||||
</figure>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- Project Header -->
|
||||
<header class="mb-8">
|
||||
<h1 class="text-5xl font-bold mb-4">{title}</h1>
|
||||
<p class="text-xl text-base-content/70 mb-6">{description}</p>
|
||||
|
||||
<!-- Prominent Action Buttons -->
|
||||
{
|
||||
(demoLink || sourceLink) && (
|
||||
<div class="flex flex-wrap gap-3 mb-6">
|
||||
{demoLink && (
|
||||
<a
|
||||
href={demoLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-primary gap-2"
|
||||
>
|
||||
<ExternalLink class="size-5" />
|
||||
Live Demo
|
||||
</a>
|
||||
)}
|
||||
{url && (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-soft gap-2"
|
||||
>
|
||||
<ExternalLink class="size-4" />
|
||||
Website
|
||||
</a>
|
||||
)}
|
||||
{sourceLink && (
|
||||
<a
|
||||
href={sourceLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-soft gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z" />
|
||||
</svg>
|
||||
View Source
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</header>
|
||||
|
||||
<!-- Tags -->
|
||||
{
|
||||
tags && tags.length > 0 && (
|
||||
<div class="flex flex-wrap gap-2 mt-4">
|
||||
{tags.map((tag) => (
|
||||
<TagBadge tag={tag} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Project Content -->
|
||||
<div class="prose-content max-w-none">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="divider mt-12"></div>
|
||||
|
||||
<!-- Back to projects link -->
|
||||
<div class="text-center mt-8">
|
||||
<a href="/projects" class="btn btn-primary"> View All Projects </a>
|
||||
</div>
|
||||
</article>
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
.prose-content {
|
||||
color: inherit;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.prose-content h1,
|
||||
.prose-content h2,
|
||||
.prose-content h3,
|
||||
.prose-content h4,
|
||||
.prose-content h5,
|
||||
.prose-content h6 {
|
||||
font-weight: 700;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.prose-content h1 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.prose-content h2 {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.prose-content h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.prose-content p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.prose-content a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose-content ul,
|
||||
.prose-content ol {
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 1.5rem;
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.prose-content ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.prose-content ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.prose-content li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.prose-content code {
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
|
||||
.prose-content pre {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.prose-content pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.prose-content blockquote {
|
||||
border-left-width: 4px;
|
||||
padding-left: 1rem;
|
||||
font-style: italic;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.prose-content img {
|
||||
border-radius: 0.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.prose-content strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user