mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use Prettier

Browse Source
This commit is contained in:
prototypa
2022-09-11 03:51:55 -04:00
parent 51362812c8
commit d909adb658
52 changed files with 1487 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
---
import Picture from "~/components/core/Picture.astro";
import PostTags from "~/components/atoms/Tags.astro";
import Picture from '~/components/core/Picture.astro';
import PostTags from '~/components/atoms/Tags.astro';
import { getPermalink } from "~/utils/permalinks";
import { findImage } from "~/utils/images";
import { getFormattedDate } from "~/utils/utils";
import { getPermalink } from '~/utils/permalinks';
import { findImage } from '~/utils/images';
import { getFormattedDate } from '~/utils/utils';
const { post } = Astro.props;
@ -12,43 +12,44 @@ const image = await findImage(post.image);
---
<article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
<a class="relative block group" href="#0">
<div
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
>
<Picture
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]}
sizes="(max-width: 900px) 400px, 900px"
alt={post.title}
aspectRatio="16:9"
/>
</div>
</a>
<div>
<header>
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
<a
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={getPermalink(post.slug, "post")}
>
{post.title}
</a>
</h2>
</header>
<p class="text-md sm:text-lg flex-grow">
{post.excerpt || post.description}
</p>
<footer class="mt-4">
<div>
<span class="text-gray-500 dark:text-slate-400">
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
</span>
</div>
<div class="mt-4">
<PostTags tags={post.tags} />
</div>
</footer>
</div>
<a class="relative block group" href={getPermalink(post.slug, 'post')}>
<div
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
>
<Picture
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]}
sizes="(max-width: 900px) 400px, 900px"
alt={post.title}
aspectRatio="16:9"
/>
</div>
</a>
<div>
<header>
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
<a
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
href={getPermalink(post.slug, 'post')}
>
{post.title}
</a>
</h2>
</header>
<p class="text-md sm:text-lg flex-grow">
{post.excerpt || post.description}
</p>
<footer class="mt-4">
<div>
<span class="text-gray-500 dark:text-slate-400">
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~
{Math.ceil(post.readingTime)} min read
</span>
</div>
<div class="mt-4">
<PostTags tags={post.tags} />
</div>
</footer>
</div>
</article>