feat: implement blog template
This commit is contained in:
Alejandro Laguna
@@ -1,7 +1,8 @@
|
||||
<!-- ---
|
||||
---
|
||||
import "../../styles/global.css"
|
||||
import Layout from "../../layouts/Layout.astro"
|
||||
import { getCollection } from 'astro:content';
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
const posts = (await getCollection('workshop')).sort(
|
||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||
@@ -9,31 +10,88 @@ const posts = (await getCollection('workshop')).sort(
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<section class="max-w-3xl mb-10 sm:mb-14">
|
||||
<section class="max-w-7xl mb-10 sm:mb-14">
|
||||
<h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
|
||||
<p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
|
||||
I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time... </p>
|
||||
<p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify max-w-3xl">
|
||||
I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<ul class="space-y-4">
|
||||
{/* Grid layout for posts */}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
{posts.map((post) => (
|
||||
<li class="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-md transition-shadow">
|
||||
<a href={`/workshop/${post.id}/`} class="block">
|
||||
<h4 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
|
||||
{post.data.title}
|
||||
</h4>
|
||||
{post.data.pubDate && (
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
|
||||
{new Date(post.data.pubDate).toLocaleDateString()}
|
||||
</p>
|
||||
<article class="group rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-lg transition-all duration-300 overflow-hidden flex flex-col">
|
||||
<a href={`/workshop/${post.id}/`} class="block flex flex-col h-full">
|
||||
{/* Hero Image */}
|
||||
{post.data.heroImage && (
|
||||
<div class="aspect-video overflow-hidden">
|
||||
<Image
|
||||
src={post.data.heroImage}
|
||||
alt={post.data.title}
|
||||
width={800}
|
||||
height={450}
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="p-4 sm:p-6 flex flex-col flex-grow">
|
||||
{/* Title */}
|
||||
<h2 class="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-neutral-100 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors mb-2 line-clamp-2">
|
||||
{post.data.title}
|
||||
</h2>
|
||||
|
||||
{/* Subtitle/Description */}
|
||||
{post.data.description && (
|
||||
<p class="text-sm sm:text-base text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-3 leading-relaxed flex-grow">
|
||||
{post.data.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{post.data.tags && post.data.tags.length > 0 && (
|
||||
<div class="flex flex-wrap gap-1.5 mb-4">
|
||||
{post.data.tags.slice(0, 3).map((tag) => (
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors">
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
{post.data.tags.length > 3 && (
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-400">
|
||||
+{post.data.tags.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Publication Date */}
|
||||
{post.data.pubDate && (
|
||||
<div class="flex items-center text-xs sm:text-sm text-neutral-500 dark:text-neutral-400 mt-auto">
|
||||
<svg class="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<time datetime={post.data.pubDate.toISOString()}>
|
||||
{new Date(post.data.pubDate).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
{post.data.updatedDate && (
|
||||
<span class="ml-1 sm:ml-2 text-xs hidden sm:inline">
|
||||
(Updated {new Date(post.data.updatedDate).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</article>
|
||||
))}
|
||||
</ul>
|
||||
</Layout> -->
|
||||
---
|
||||
import WorkInProgress from "../../components/WorkInProgress.astro"
|
||||
---
|
||||
|
||||
<WorkInProgress />
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user