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

feat(blog): port from CRA to vite + react

Browse source
This commit is contained in:
Kim, Jimin 2023-07-07 19:18:32 +09:00
parent 8243d38270
commit e48b65b14c
109 changed files with 1493 additions and 10360 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,46 +5,11 @@ import {
faHourglass,
} from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { Link } from "react-router-dom"
import styled from "styled-components"
import { Link } from "wouter"
import MainContent from "./MainContent"
import Tag from "./Tag"
import TagList from "./TagList"
const StyledPostCard = styled(MainContent)`
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 2rem;
:hover {
cursor: pointer;
box-shadow: 0 4px 10px
${({ theme }) => theme.theme.component.card.color.hoverGlow};
}
`
const PostCardContainer = styled(Link)`
display: block;
padding: 2rem;
text-decoration: none;
padding: 0;
/* override link color */
color: ${({ theme }) => theme.theme.color.text.gray};
&:hover {
color: ${({ theme }) => theme.theme.color.text.gray};
}
`
const Title = styled.h1`
font-size: 2rem;
font-style: bold;
margin: 0;
margin-bottom: 1rem;
`
const MetaContainer = styled.small``
import Card from "@/components/Card"
import Tag from "@/components/Tag"
import TagList from "@/components/TagList"
interface PostCardData extends PostData {
content_id: string
@ -52,47 +17,44 @@ interface PostCardData extends PostData {
interface Props {
postData: PostCardData
className?: string
}
const PostCard = (props: Props) => {
const { postData } = props
export default function PostCard({ postData, className }: Props) {
const { content_id, wordCount, date, readTime, title, tags } = postData
return (
<StyledPostCard>
<PostCardContainer to={content_id}>
<Title>
{title || "No title"}
{/* show "(series)" for urls that matches regex "/series/<series-title>" */}
{/\/series\/[^/]*$/.test(content_id) && " (series)"}
</Title>
<br />
<MetaContainer>
<TagList direction="left">
{tags &&
tags.map((tag) => {
return <Tag key={title + tag} text={tag} />
})}
</TagList>
<hr />
<FontAwesomeIcon icon={faCalendar} />
&nbsp;&nbsp;&nbsp;
{date || "Unknown date"}
&nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faHourglass} />
&nbsp;&nbsp;&nbsp;
{readTime ? readTime + " read" : "unknown read time"}
&nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faBook} />
&nbsp;&nbsp;&nbsp;
{typeof wordCount === "number"
? wordCount + " words"
: "unknown length"}
</MetaContainer>
</PostCardContainer>
</StyledPostCard>
<Link href={content_id}>
<a className={`${className} w-full`}>
<Card className="cursor-pointer fill-light-text-gray text-light-text-gray hover:shadow-glow dark:fill-dark-text-gray dark:text-dark-text-gray">
<h2 className="mb-8 text-3xl">
{title}
{/* show "(series)" for urls that matches regex "/series/<series-title>" */}
{/\/series\/[^/]*$/.test(content_id) && " (series)"}
</h2>
<small>
<TagList>
{tags &&
tags.map((tag) => (
<Tag key={title + tag} text={tag} />
))}
</TagList>
<hr />
<div className="flex items-center gap-2">
<FontAwesomeIcon icon={faCalendar} />
{date || "Unknown date"}
<FontAwesomeIcon icon={faBook} />
{readTime
? readTime + " read"
: "unknown read time"}
<FontAwesomeIcon icon={faHourglass} />
{typeof wordCount === "number"
? wordCount + " words"
: "unknown length"}
</div>
</small>
</Card>
</a>
</Link>
)
}
export default PostCard