Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: initial commit

Browse Source 
(cherry picked from commit 44c4d7b9521fe449e61edc614446195861932f8c)
This commit is contained in:
saicaca
2023-09-26 14:27:38 +08:00
parent 02b0a65314
commit 124843848f
58 changed files with 13083 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/PostMetadata.astro Normal file
View File

@@ -0,0 +1,78 @@
---
import {formatDateToYYYYMMDD} from "../utils/date-utils";
import { Icon } from 'astro-icon/components';
interface Props {
class: string;
pubDate: Date;
tags: string[];
categories: string[];
}
const {pubDate, tags, categories} = Astro.props;
const className = Astro.props.class;
---
<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-3", className]}>
<!-- publish date -->
<div class="flex items-center">
<div class="meta-icon"
>
<Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
</div>
<span class="text-black/50 dark:text-white/50 text-sm font-medium">{formatDateToYYYYMMDD(pubDate)}</span>
</div>
<!-- categories -->
<div class="flex items-center">
<div class="meta-icon"
>
<Icon name="material-symbols:menu-rounded" class="text-xl"></Icon>
</div>
<div class="flex flex-row">
{categories && categories.map(category => <div
class="with-divider"
>
<a href=`/archive/category/${category}`
class="transition text-black/50 dark:text-white/50 text-sm font-medium
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
{category}
</a>
</div>)}
{!categories && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">Uncategorized</div>}
</div>
</div>
<!-- tags -->
<div class="flex items-center">
<div class="meta-icon"
>
<Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
</div>
<div class="flex flex-row">
{tags.map(tag => <div
class="with-divider"
>
<a href=`/archive/tag/${tag}`
class="transition text-black/50 dark:text-white/50 text-sm font-medium
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
{tag}
</a>
</div>)}
</div>
</div>
</div>
<style>
@tailwind components;
@layer components {
.meta-icon {
@apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
text-[var(--btn-content)] dark:text-[var(--primary)] mr-2
}
.with-divider {
@apply before:content-['/'] before:mx-[6px] before:text-[var(--meta-divider)] before:text-sm
before:font-medium before:first-of-type:hidden before:transition
}
}
</style>