Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

39 lines
1.2 KiB

---
import type { ChangelogFileType } from '../../lib/changelog';
import { DateTime } from 'luxon';
interface Props {
changelog: ChangelogFileType;
}
const { changelog } = Astro.props;
const { data: frontmatter } = changelog;
const { Content } = await changelog.render();
const formattedDate = DateTime.fromJSDate(frontmatter.date).toFormat(
'dd LLL, yyyy',
);
---
<div class='relative'>
<span
class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
></span>
<div class='mb-3 flex items-center gap-2'>
<span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
{formattedDate}
</span>
<span class='truncate text-base font-medium'>
{frontmatter.title}
</span>
</div>
<div class='rounded-xl border bg-white p-6'>
<div
class='prose prose-sm prose-h2:mt-3 prose-h2:text-lg prose-h2:font-medium prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-ul:rounded-lg prose-ul:bg-gray-100 prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 [&>ul>li]:my-0 [&>ul>li]:mb-1 [&>ul]:mt-3'
>
<Content />
</div>
</div>
</div>