File size: 2,183 Bytes
96dd062 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | ---
import { Icon } from "astro-icon/components";
import { licenseConfig } from "@/config/licenseConfig";
import { profileConfig } from "@/config/profileConfig";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { formatDateToYYYYMMDD } from "@/utils/date-utils";
interface Props {
title: string;
id: string;
pubDate: Date;
class: string;
author: string;
sourceLink: string;
licenseName: string;
licenseUrl: string;
}
const { title, pubDate, author, sourceLink, licenseName, licenseUrl } =
Astro.props;
const className = Astro.props.class;
const profileConf = profileConfig;
const licenseConf = licenseConfig;
const postUrl = sourceLink || decodeURIComponent(Astro.url.toString());
---
<div
class={`relative transition overflow-hidden bg-(--license-block-bg) py-5 px-6 ${className}`}
>
<div class="transition font-bold text-black/75 dark:text-white/75">
{title}
</div>
<a href={postUrl} class="link text-(--primary)">
{postUrl}
</a>
<div class="flex gap-6 mt-2">
<div>
<div class="transition text-black/30 dark:text-white/30 text-sm">
{i18n(I18nKey.author)}
</div>
<div class="transition text-black/75 dark:text-white/75 line-clamp-2">
{author || profileConf.name}
</div>
</div>
<div>
<div class="transition text-black/30 dark:text-white/30 text-sm">
{i18n(I18nKey.publishedAt)}
</div>
<div class="transition text-black/75 dark:text-white/75 line-clamp-2">
{formatDateToYYYYMMDD(pubDate)}
</div>
</div>
<div>
<div class="transition text-black/30 dark:text-white/30 text-sm">
{i18n(I18nKey.license)}
</div>
<a
href={licenseName ? licenseUrl || undefined : licenseConf.url}
target="_blank"
class="link text-(--primary) line-clamp-2"
>{licenseName || licenseConf.name}</a
>
</div>
</div>
<Icon
name="fa7-brands:creative-commons"
class="transition text-[15rem] absolute pointer-events-none right-6 top-1/2 -translate-y-1/2 text-black/5 dark:text-white/5"
/>
</div>
|