mirror of
https://github.com/saicaca/fuwari.git
synced 2025-03-13 23:24:42 +08:00
93 lines
3.7 KiB
Plaintext
93 lines
3.7 KiB
Plaintext
---
|
|
import PostMetadata from "./PostMetadata.astro";
|
|
interface Props {
|
|
class: string;
|
|
entry: any;
|
|
title: string;
|
|
url: string;
|
|
published: Date;
|
|
tags: string[];
|
|
categories: string[];
|
|
image: string;
|
|
description: string;
|
|
words: number;
|
|
}
|
|
const { entry, title, url, published, tags, categories, image, description, words } = Astro.props;
|
|
const className = Astro.props.class;
|
|
// console.log(Astro.props);
|
|
import ImageBox from "./misc/ImageBox.astro";
|
|
import ButtonTag from "./control/ButtonTag.astro";
|
|
import { Icon } from 'astro-icon/components';
|
|
import Button from "./control/Button.astro";
|
|
import {i18n} from "../i18n/translation";
|
|
import I18nKey from "../i18n/i18nKey";
|
|
|
|
const hasCover = image !== undefined && image !== null && image !== '';
|
|
|
|
const coverWidth = "28%";
|
|
|
|
const { remarkPluginFrontmatter } = await entry.render();
|
|
|
|
---
|
|
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
|
|
<div class:list={["pl-9 pr-9 md:pr-2 pt-4 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
|
|
<a href={url}
|
|
class="transition w-full block font-bold mb-3 text-3xl
|
|
text-black/90 dark:text-white/90
|
|
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
|
|
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
|
|
before:absolute md:before:top-[35px] before:left-[18px]
|
|
">
|
|
{title}
|
|
</a>
|
|
|
|
<!-- metadata -->
|
|
<PostMetadata published={published} tags={tags} categories={categories} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
|
|
|
|
<div class="transition text-black/75 dark:text-white/75 mb-4">
|
|
{ description }
|
|
</div>
|
|
|
|
<div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
|
|
<div>{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
|
|
<div>|</div>
|
|
<div>{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{hasCover && <a href={url} aria-label={title}
|
|
class:list={["group",
|
|
"max-h-[20vh] md:max-h-none mx-4 mt-4 md:mx-0 md:mt-0",
|
|
"md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
|
|
]} >
|
|
<div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
|
|
<div class="absolute z-20 w-full h-full flex items-center justify-center ">
|
|
<Icon name="material-symbols:chevron-right-rounded"
|
|
class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
|
|
</Icon>
|
|
</div>
|
|
<ImageBox src={image} alt="Cover Image of the Post"
|
|
class="w-full h-full">
|
|
</ImageBox>
|
|
</a>}
|
|
|
|
{!hasCover &&
|
|
<a href={url} aria-label={title} class="hidden md:block">
|
|
<Button name="Enter the Post" width="52px" height="full" class="absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95">
|
|
<Icon name="material-symbols:chevron-right-rounded"
|
|
class="transition text-[var(--primary)] text-4xl mx-auto">
|
|
</Icon>
|
|
</Button>
|
|
</a>
|
|
}
|
|
|
|
</div>
|
|
|
|
<style lang="stylus" define:vars={{coverWidth}}>
|
|
:root
|
|
--btn-enter-bg oklch(0.98 0.005 var(--hue))
|
|
--btn-enter-bg-dark oklch(0.2 0.02 var(--hue))
|
|
|
|
</style>
|