Use Prettier
This commit is contained in:
@@ -1,43 +1,43 @@
|
||||
---
|
||||
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 { getFormattedDate } from "~/utils/utils";
|
||||
import { getFormattedDate } from '~/utils/utils';
|
||||
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
|
||||
<article>
|
||||
<header>
|
||||
<p class="max-w-3xl mx-auto text-center">
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
|
||||
</p>
|
||||
<h1
|
||||
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
|
||||
>
|
||||
{post.title}
|
||||
</h1>
|
||||
{
|
||||
post.image && (
|
||||
<Picture
|
||||
src={post.image}
|
||||
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 900]}
|
||||
sizes="(max-width: 900px) 400px, 900px"
|
||||
alt={post.description}
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</header>
|
||||
<div
|
||||
class="container mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
|
||||
>
|
||||
<Fragment set:html={post.body} />
|
||||
</div>
|
||||
<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
|
||||
<PostTags tags={post.tags} />
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<header>
|
||||
<p class="max-w-3xl mx-auto text-center">
|
||||
<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
|
||||
</p>
|
||||
<h1
|
||||
class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
|
||||
>
|
||||
{post.title}
|
||||
</h1>
|
||||
{
|
||||
post.image && (
|
||||
<Picture
|
||||
src={post.image}
|
||||
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 900]}
|
||||
sizes="(max-width: 900px) 400px, 900px"
|
||||
alt={post.description}
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</header>
|
||||
<div
|
||||
class="container mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
|
||||
>
|
||||
<Fragment set:html={post.body} />
|
||||
</div>
|
||||
<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
|
||||
<PostTags tags={post.tags} />
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
Reference in New Issue
Block a user