pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

refactor(blog): improve meta tags styling

Browse source
This commit is contained in:
Kim, Jimin 2023-07-09 10:46:32 +09:00
parent db632c817a
commit 76f5293dcb
2 changed files with 24 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/blog/src/components/PostCard.tsx
View file

@ -40,7 +40,7 @@ export default function PostCard({ postData, className }: Props) {
))}
</TagList>
<hr />
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center gap-x-4">
<div className="flex items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faCalendar} />
{date || "Unknown date"}

21
apps/blog/src/pages/Page/Meta.tsx
View file

@ -9,37 +9,38 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
export default function Meta(props: { fetchedPage: PageData }) {
return (
<div className="text-light-text-gray dark:text-dark-text-gray">
<div className="flex flex-wrap gap-x-4 text-light-text-gray dark:text-dark-text-gray">
{/* posts count */}
{props.fetchedPage.length > 0 && (
<>
<div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faFile} />
&nbsp;&nbsp;
{props.fetchedPage.length} post
{props.fetchedPage.length > 1 && "s"}{" "}
&nbsp;&nbsp;&nbsp;&nbsp;
</>
</div>
)}
{/* date */}
<div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faCalendar} />
&nbsp;&nbsp;
{props.fetchedPage.date || "Unknown date"}
&nbsp;&nbsp;&nbsp;&nbsp;
</div>
{/* read time */}
<div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faHourglass} />
&nbsp;&nbsp;
{props.fetchedPage.readTime
? props.fetchedPage.readTime + " read"
: "unknown length"}
&nbsp;&nbsp;&nbsp;&nbsp;
</div>
{/* word count */}
<div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faBook} />
&nbsp;&nbsp;
{props.fetchedPage.wordCount
? props.fetchedPage.wordCount +
" word" +
(props.fetchedPage.wordCount > 1 && "s")
: "unknown words"}
</div>
</div>
)
}