initial commit
Generate a build and push to Cloudflare Pages / Build and Deploy to Cloudflare Pages (push) Successful in 1m24s
Generate a build and push to Cloudflare Pages / Build and Deploy to Cloudflare Pages (push) Successful in 1m24s
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.astro'
|
||||
import TableOfContents from '@/components/TableOfContents.astro'
|
||||
import { badgeVariants } from '@/components/ui/badge'
|
||||
import { badgeVariants } from '@/lib/badge-variants'
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
import { getAllProjects } from '@/lib/data-utils'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
@@ -37,93 +37,134 @@ const structuredData = {
|
||||
const currentUrl = Astro.url;
|
||||
---
|
||||
|
||||
<Layout canonicalUrl={currentUrl} isWide={true}>
|
||||
<Layout canonicalUrl={currentUrl} isWide={true}>
|
||||
<PageHead slot="head" title={project.data.name} />
|
||||
<script
|
||||
type="application/ld+json"
|
||||
is:inline
|
||||
set:html={JSON.stringify(structuredData)}
|
||||
/>
|
||||
<section
|
||||
class="grid grid-cols-[minmax(0px,1fr)_min(calc(var(--breakpoint-lg)-2rem),100%)_minmax(0px,1fr)] gap-y-6 max-w-[calc(100vw-2rem)] "
|
||||
>
|
||||
<div class="col-start-2">
|
||||
|
||||
<div class="grid grid-cols-1 xl:grid-cols-[1fr_minmax(0,60rem)_1fr] gap-4 xl:gap-6 xl:px-8">
|
||||
<!-- Header section - spans center column only on xl, full width otherwise -->
|
||||
<header class="xl:col-start-2 px-4 sm:px-6 lg:px-8 xl:px-0">
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ href: '/projects', label: 'Projects', icon: 'lucide:folder' },
|
||||
{ label: project.data.name, icon: 'lucide:folder-open' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<section class="col-start-2 flex flex-col gap-y-6 text-start">
|
||||
<div class="flex flex-col">
|
||||
<h1
|
||||
class="mb-2 text-3xl leading-tight font-medium text-pretty sm:text-5xl"
|
||||
>
|
||||
{project.data.name}
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-wrap justify-start gap-2">
|
||||
{
|
||||
project.data.tags && project.data.tags.length > 0 ? (
|
||||
project.data.tags.map((tag) => (
|
||||
<a
|
||||
href={`/tags/${tag}`}
|
||||
class={badgeVariants({ variant: 'secondary' })}
|
||||
>
|
||||
<Icon name="lucide:hash" class="size-3" />
|
||||
{tag}
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<span class="text-muted-foreground text-sm">
|
||||
No tags available
|
||||
</span>
|
||||
)
|
||||
}
|
||||
<div class="mt-6 flex flex-col gap-y-6 text-start">
|
||||
<div class="flex flex-col">
|
||||
<h1
|
||||
class="mb-2 text-3xl leading-tight font-medium text-pretty sm:text-5xl"
|
||||
>
|
||||
{project.data.name}
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-wrap justify-start gap-2">
|
||||
{
|
||||
project.data.tags && project.data.tags.length > 0 ? (
|
||||
project.data.tags.map((tag) => (
|
||||
<a
|
||||
href={`/tags/${tag}`}
|
||||
class={badgeVariants({ variant: 'secondary' })}
|
||||
>
|
||||
<Icon name="lucide:hash" class="size-3" />
|
||||
{tag}
|
||||
</a>
|
||||
))
|
||||
) : (
|
||||
<span class="text-muted-foreground text-sm">
|
||||
No tags available
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Image
|
||||
src={project.data.image}
|
||||
alt={project.data.name}
|
||||
class="col-start-2 mb-8 h-[500px] w-full rounded-3xl object-cover"
|
||||
loading="lazy"
|
||||
fetchpriority="low"
|
||||
width={1200}
|
||||
height={800}
|
||||
/>
|
||||
<Image
|
||||
src={project.data.image}
|
||||
alt={project.data.name}
|
||||
class="mt-6 h-[500px] w-full rounded-3xl object-cover"
|
||||
loading="lazy"
|
||||
fetchpriority="low"
|
||||
width={1600}
|
||||
height={1000}
|
||||
/>
|
||||
</header>
|
||||
|
||||
{headings.length > 0 && <TableOfContents headings={headings} />}
|
||||
<!-- Left sidebar (TOC) -->
|
||||
{headings.length > 0 && (
|
||||
<aside class="hidden xl:block xl:col-start-1 xl:row-start-2 justify-self-end self-stretch">
|
||||
<nav class="sticky top-24 w-48">
|
||||
<TableOfContents headings={headings} />
|
||||
</nav>
|
||||
</aside>
|
||||
)}
|
||||
|
||||
<article class="prose col-start-2 max-w-none" aria-label="Project">
|
||||
<Content />
|
||||
</article>
|
||||
<!-- Main content -->
|
||||
<main class="xl:col-start-2 xl:row-start-2 flex flex-col gap-y-6 px-4 sm:px-6 lg:px-8 xl:px-0">
|
||||
<!-- Mobile TOC -->
|
||||
{headings.length > 0 && (
|
||||
<div class="xl:hidden">
|
||||
<TableOfContents headings={headings} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<aside
|
||||
class="group col-start-2 rounded-xl border p-4 xl:sticky xl:top-26 xl:col-start-3 xl:mr-auto xl:ml-8 xl:h-[calc(100vh-5rem)] xl:max-w-fit xl:rounded-none xl:border-none xl:p-0"
|
||||
>
|
||||
<div class="flex flex-col gap-4 rounded-xl border bg-card p-4 shadow-md transition-all duration-300 group-hover:shadow-lg xl:group-hover:shadow-none xl:group-hover:shadow-none">
|
||||
<h2 class="text-lg font-semibold">Project Details</h2>
|
||||
<div class="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||
<p>{project.data.description}</p>
|
||||
<article class="prose max-w-none" aria-label="Project">
|
||||
<Content />
|
||||
</article>
|
||||
|
||||
<!-- Mobile project details -->
|
||||
<div class="xl:hidden rounded-xl border p-4">
|
||||
<div class="flex flex-col gap-4 rounded-xl border bg-card p-4 shadow-md">
|
||||
<h2 class="text-lg font-semibold">Project Details</h2>
|
||||
<div class="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||
<p>{project.data.description}</p>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 border-t" />
|
||||
|
||||
<div class="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||
<h3 class="text-base font-semibold">Project Links</h3>
|
||||
<ul class="list-disc pl-4">
|
||||
<li>
|
||||
<a href={project.data.link} target="_blank" rel="noopener noreferrer" aria-label="Project link">
|
||||
{project.data.link}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<hr class="my-4 border-t" />
|
||||
<!-- Right sidebar (Project Details) -->
|
||||
<aside class="hidden xl:block xl:col-start-3 xl:row-start-2 justify-self-start self-stretch">
|
||||
<div class="sticky top-24 w-48">
|
||||
<div class="flex flex-col gap-4 rounded-xl border bg-card p-4 shadow-md">
|
||||
<h2 class="text-lg font-semibold">Project Details</h2>
|
||||
<div class="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||
<p>{project.data.description}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||
<h3 class="text-base font-semibold">Project Links</h3>
|
||||
<ul class="list-disc pl-4">
|
||||
<li>
|
||||
<a href={project.data.link} target="_blank" rel="noopener noreferrer" aria-label="Project link">
|
||||
{project.data.link}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="my-4 border-t" />
|
||||
|
||||
<div class="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||
<h3 class="text-base font-semibold">Project Links</h3>
|
||||
<ul class="list-disc pl-4">
|
||||
<li>
|
||||
<a href={project.data.link} target="_blank" rel="noopener noreferrer" aria-label="Project link">
|
||||
{project.data.link}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user