Skip to content

Commit

Permalink
Update designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhekaniatdba
bhekaniatdba committed Nov 5, 2024
1 parent 9b3ce61 commit 42d78ed
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 32 deletions.
46 changes: 22 additions & 24 deletions src/components/FeaturedProject.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,41 @@ import { Image } from "astro:assets"
import type { CollectionEntry } from "astro:content"
import { format } from "date-fns"
type Props = {
interface Props {
project: CollectionEntry<"projects">
}
const { project } = Astro.props
const { title, description, url, image, tech, startDate } = project.data
const {
project: {
data: { title, description, url, image, startDate },
},
} = Astro.props
---

<div class="group relative">
<!-- Image Container -->
<div class="relative overflow-hidden rounded-t-lg aspect-[16/9]">
<div
class="group relative overflow-hidden rounded-xl bg-[hsl(var(--card))] shadow-lg border border-[hsl(var(--muted))] transition-all duration-300 hover:border-[hsl(var(--primary))]"
>
{/* Image Container */}
<div class="relative w-full h-[300px] overflow-hidden">
{
image && (
<Image
src={image}
alt={title}
width={1200}
height={675}
class="object-cover w-full h-full object-top transition-transform duration-500 group-hover:scale-105"
class="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105"
/>
)
}
<div
class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[hsl(var(--background))]"
class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent pointer-events-none"
>
</div>
</div>

<!-- Content Container -->
<div
class="relative -mt-20 rounded-b-lg bg-gradient-to-b from-[hsl(var(--background))] to-[hsl(var(--background))] p-8"
>
{/* Content Container */}
<div class="relative p-8 z-10">
<div class="space-y-3">
<div class="flex items-center gap-2">
<time
Expand All @@ -53,22 +56,17 @@ const { title, description, url, image, tech, startDate } = project.data
</a>
</div>

<h3 class="text-3xl font-bold text-[hsl(var(--foreground))]">{title}</h3>
<h3
class="text-3xl font-bold text-[hsl(var(--foreground))] group-hover:text-[hsl(var(--primary))] transition-colors"
>
{title}
</h3>

<p
class="text-[hsl(var(--foreground))] max-w-2xl text-lg leading-relaxed"
class="text-[hsl(var(--muted-foreground))] max-w-2xl text-lg leading-relaxed"
>
{description}
</p>

<div class="flex flex-wrap gap-2 pt-2">
{
tech.map((item) => (
<span class="px-3 py-1.5 text-sm rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]">
{item}
</span>
))
}
</div>
</div>
</div>
</div>
130 changes: 122 additions & 8 deletions src/pages/micro/[...slug].astro
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,146 @@
---
import { getCollection, type CollectionEntry } from "astro:content"
import Prose from "../../components/Prose.astro"
import { format } from "date-fns"
import Link from "../../components/Link.astro"
import MainContainer from "../../components/MainContainer.astro"
import Micro from "../../components/Micro.astro"
import Prose from "../../components/Prose.astro"
import BaseLayout from "../../layouts/BaseLayout.astro"
export async function getStaticPaths() {
const micros = await getCollection("micro")
return micros
.filter((micro) => micro.data.published)
.filter((micro) => micro.data.published !== false)
.map((micro) => ({
params: { slug: micro.slug },
props: { micro },
}))
}
export interface Props {
type Props = {
micro: CollectionEntry<"micro">
}
const { micro } = Astro.props
const { Content } = await micro.render()
---

<BaseLayout pageTitle={micro.data.title}>
<BaseLayout pageTitle={micro.data.title ?? "Micro Post"}>
<MainContainer>
<div class="grid gap-4 mt-8">
<Micro micro={micro} />
</div>
<article class="max-w-2xl mx-auto mt-12">
{/* Header */}
<header class="mb-12">
<div
class="flex items-center gap-2 text-sm text-[hsl(var(--muted-foreground))] mb-8"
>
<Link href="/micro" class="hover:text-[hsl(var(--foreground))]">
← Back to micro
</Link>
</div>

<div class="flex items-center justify-between mb-6">
<time
datetime={micro.data.date.toISOString()}
class="text-sm text-[hsl(var(--muted-foreground))]"
>
{format(micro.data.date, "MMMM d, yyyy 'at' h:mm a")}
</time>

{/* Share buttons */}
<div class="flex items-center gap-2">
<a
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(`${micro.data.title ?? ""} https://bhekani.com/micro/${micro.slug}`)}`}
target="_blank"
rel="noopener noreferrer"
class="p-2 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
title="Share on Twitter"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
></path>
</svg>
</a>
<a
href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(`https://bhekani.com/micro/${micro.slug}`)}`}
target="_blank"
rel="noopener noreferrer"
class="p-2 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
title="Share on LinkedIn"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path
d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"
></path>
</svg>
</a>
<button
class="copy-link p-2 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
title="Copy link"
data-url={`https://bhekani.com/micro/${micro.slug}`}
>
<svg
class="w-5 h-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
></path>
</svg>
</button>
</div>
</div>

{
micro.data.title && (
<h1 class="text-3xl font-bold mb-6">{micro.data.title}</h1>
)
}
</header>

{/* Content */}
<div class="prose prose-lg dark:prose-invert max-w-none">
<Content />
</div>

{/* Footer */}
<footer class="mt-12 pt-8 border-t border-[hsl(var(--muted))]">
<nav
class="flex justify-between text-sm text-[hsl(var(--muted-foreground))]"
>
<Link href="/micro" class="hover:text-[hsl(var(--foreground))]">
← All micro posts
</Link>
</nav>
</footer>
</article>
</MainContainer>
</BaseLayout>

<script>
// Copy link functionality
document.querySelector(".copy-link")?.addEventListener("click", async (e) => {
const button = e.currentTarget as HTMLButtonElement
const url = button.dataset.url

if (url) {
await navigator.clipboard.writeText(url)

// Optional: Show feedback
const originalTitle = button.getAttribute("title")
button.setAttribute("title", "Copied!")
setTimeout(() => {
button.setAttribute("title", originalTitle || "Copy link")
}, 2000)
}
})
</script>

<style>
/* Optional: Add smooth transitions */
.prose {
transition: color 0.2s ease-in-out;
}
</style>

0 comments on commit 42d78ed

Please sign in to comment.