365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better links in Post Items

Browse Source
This commit is contained in:
prototypa
2024-05-07 23:45:50 -04:00
parent 78808fabd3
commit 502cecc005
2 changed files with 53 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/blog/GridItem.astro
View File

@@ -13,13 +13,16 @@ export interface Props {
const { post } = Astro.props;
const image = await findImage(post.image);
const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') : '';
---
<article class="mb-6 transition">
<div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
{
image && (
<a href={getPermalink(post.permalink, 'post')}>
image &&
(link ? (
<a href={link}>
<Image
src={image}
class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
@@ -33,24 +36,34 @@ const image = await findImage(post.image);
decoding="async"
/>
</a>
)
) : (
<Image
src={image}
class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 900]}
width={400}
sizes="(max-width: 900px) 400px, 900px"
alt={post.title}
aspectRatio="16:9"
layout="cover"
loading="lazy"
decoding="async"
/>
))
}
</div>
<h3 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
{
!APP_BLOG?.post?.isEnabled ? (
post.title
) : (
<a
href={getPermalink(post.permalink, 'post')}
class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
>
<h3 class="mb-2 text-xl font-bold leading-tight sm:text-2xl font-heading">
link ? (
<a class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
{post.title}
</h3>
</a>
) : (
post.title
)
}
</h3>
<p class="text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>
</article>

26
src/components/blog/ListItem.astro
View File

@@ -23,7 +23,8 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
<article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${image ? 'md:grid-cols-2' : ''}`}>
{
image && (
image &&
(link ? (
<a class="relative block group" href={link ?? 'javascript:void(0)'}>
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
{image && (
@@ -41,7 +42,23 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
)}
</div>
</a>
)
) : (
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
{image && (
<Image
src={image}
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 900]}
width={900}
sizes="(max-width: 900px) 400px, 900px"
alt={post.title}
aspectRatio="16:9"
loading="lazy"
decoding="async"
/>
)}
</div>
))
}
<div class="mt-2">
<header>
@@ -74,7 +91,10 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
{
link ? (
<a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
<a
class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
href={link}
>
{post.title}
</a>
) : (