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

chore: change eslint & prettier config

Browse source
This commit is contained in:
Kim, Jimin 2023-06-29 15:53:51 +09:00
parent fc827d74fe
commit b43871c516
103 changed files with 3581 additions and 3543 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,9 +5,9 @@ import { PostData } from "@developomp-site/blog-content/src/types/types"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
faBook,
faCalendar,
faHourglass,
faBook,
faCalendar,
faHourglass,
} from "@fortawesome/free-solid-svg-icons"
import Tag from "./Tag"
@ -15,85 +15,85 @@ import TagList from "./TagList"
import MainContent from "./MainContent"
const PostCard = styled(MainContent)`
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 2rem;
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};
}
: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;
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};
}
/* 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;
font-size: 2rem;
font-style: bold;
margin: 0;
margin-bottom: 1rem;
`
const MetaContainer = styled.small``
interface PostCardData extends PostData {
content_id: string
content_id: string
}
interface Props {
postData: PostCardData
postData: PostCardData
}
export default (props: Props) => {
const { postData } = props
const { content_id, wordCount, date, readTime, title, tags } = postData
const { postData } = props
const { content_id, wordCount, date, readTime, title, tags } = postData
return (
<PostCard>
<PostCardContainer to={content_id}>
<Title>
{title || "No title"}
{/* show "(series)" for urls that matches regex "/series/<series-title>" */}
{/\/series\/[^/]*$/.test(content_id) && " (series)"}
</Title>
return (
<PostCard>
<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 />
<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>
</PostCard>
)
<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>
</PostCard>
)
}