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

refactor(blog): improve meta tags styling #76

Merged
developomp merged 1 commit from improve-meta-tags into master 2023-07-09 10:48:24 +09:00
Conversation 0 Commits 1 Files changed 2 +24 -23
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> </TagList>
<hr /> <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"> <div className="flex items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faCalendar} /> <FontAwesomeIcon icon={faCalendar} />
{date || "Unknown date"} {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 }) { export default function Meta(props: { fetchedPage: PageData }) {
return ( 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 */} {/* posts count */}
{props.fetchedPage.length > 0 && ( {props.fetchedPage.length > 0 && (
<> <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faFile} /> <FontAwesomeIcon icon={faFile} />
&nbsp;&nbsp;
{props.fetchedPage.length} post {props.fetchedPage.length} post
{props.fetchedPage.length > 1 && "s"}{" "} {props.fetchedPage.length > 1 && "s"}{" "}
&nbsp;&nbsp;&nbsp;&nbsp; </div>
</>
)} )}
{/* date */} {/* date */}
<div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faCalendar} /> <FontAwesomeIcon icon={faCalendar} />
&nbsp;&nbsp;
{props.fetchedPage.date || "Unknown date"} {props.fetchedPage.date || "Unknown date"}
&nbsp;&nbsp;&nbsp;&nbsp; </div>
{/* read time */} {/* read time */}
<div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faHourglass} /> <FontAwesomeIcon icon={faHourglass} />
&nbsp;&nbsp;
{props.fetchedPage.readTime {props.fetchedPage.readTime
? props.fetchedPage.readTime + " read" ? props.fetchedPage.readTime + " read"
: "unknown length"} : "unknown length"}
&nbsp;&nbsp;&nbsp;&nbsp; </div>
{/* word count */} {/* word count */}
<div className="flex flex-nowrap items-center gap-2 whitespace-nowrap">
<FontAwesomeIcon icon={faBook} /> <FontAwesomeIcon icon={faBook} />
&nbsp;&nbsp;
{props.fetchedPage.wordCount {props.fetchedPage.wordCount
? props.fetchedPage.wordCount + ? props.fetchedPage.wordCount +
" word" + " word" +
(props.fetchedPage.wordCount > 1 && "s") (props.fetchedPage.wordCount > 1 && "s")
: "unknown words"} : "unknown words"}
</div> </div>
</div>
) )
} }