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

moved post card to separate component

Browse source
This commit is contained in:
Kim, Jimin 2021-08-01 10:39:25 +09:00
parent 4bccb7f883
commit 05b1b63347
2 changed files with 106 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

103
source/src/components/PostCard.tsx Normal file
View file

@ -0,0 +1,103 @@
import React from "react"
import marked from "marked"
import styled from "styled-components"
import { Link } from "react-router-dom"
import theming from "../theming"
import Tag from "../components/Tag"
const StyledTitle = styled.h1`
font-size: 2rem;
font-style: bold;
margin-bottom: 1rem;
`
const StyledLink = styled(Link)`
text-decoration: none;
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "black",
dark: "white",
})};
&:hover {
text-decoration: underline;
}
`
const StyledPostCard = styled.div`
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 20px;
padding: 1rem 2rem 2rem 2rem;
`
const StyledPostCardContent = styled.div`
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "grey",
dark: "darkgrey",
})};
`
interface PostCardProps {
postData: {
url: string
title: string | undefined
preview: string
tags: string[]
date: string | undefined
}
}
export default class PostCard extends React.Component<PostCardProps> {
render() {
return (
<StyledPostCard
key={this.props.postData.url}
className="card main-content"
>
<StyledTitle>
<StyledLink
to={`${process.env.PUBLIC_URL}${this.props.postData.url}`}
>
{this.props.postData?.title
? this.props.postData.title
: "No title"}
</StyledLink>
</StyledTitle>
<small>
<table>
{this.props.postData.tags.map((tag) => {
return (
<td key={this.props.postData.title + tag}>
<Tag text={tag} />
</td>
)
})}
</table>
Published on{" "}
{this.props.postData?.date
? this.props.postData.date
: "Unknown date"}
</small>
<hr />
<StyledPostCardContent
className="link-color"
dangerouslySetInnerHTML={{
__html: marked(this.props.postData.preview),
}}
></StyledPostCardContent>
<small>
<StyledLink
to={process.env.PUBLIC_URL + this.props.postData.url}
>
<u>Read more</u>
</StyledLink>
</small>
</StyledPostCard>
)
}
}

75
source/src/pages/PostList.tsx
View file

@ -3,14 +3,13 @@
*/
import React from "react"
import { Link } from "react-router-dom"
import styled from "styled-components"
import marked from "marked"
import { Helmet } from "react-helmet-async"
import theming from "../theming"
import posts from "../data/map.json"
import Tag from "../components/Tag"
import PostCard from "../components/PostCard"
const StyledPostList = styled.div`
padding-top: 2rem;
@ -29,41 +28,6 @@ const StyledH1 = styled.h1`
margin: 0;
`
const StyledTitle = styled.h1`
font-size: 2rem;
font-style: bold;
margin-bottom: 1rem;
`
const StyledLink = styled(Link)`
text-decoration: none;
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "black",
dark: "white",
})};
&:hover {
text-decoration: underline;
}
`
const StyledPostCard = styled.div`
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 20px;
padding: 1rem 2rem 2rem 2rem;
`
const StyledPostCardContent = styled.div`
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "grey",
dark: "darkgrey",
})};
`
interface PostListProps {
title: string
howMany?: number
@ -115,40 +79,7 @@ export default class PostList extends React.Component<
for (const postIndex in recentPosts) {
const [url, post] = recentPosts[postIndex]
PostCards.push(
<StyledPostCard key={url} className="card main-content">
<StyledTitle>
<StyledLink to={`${process.env.PUBLIC_URL}${url}`}>
{post?.title ? post.title : "No title"}
</StyledLink>
</StyledTitle>
<small>
<table>
{post.tags.map((tag) => {
return (
<td key={post.title + tag}>
<Tag text={tag} />
</td>
)
})}
</table>
Published on {post?.date ? post.date : "Unknown date"}
</small>
<hr />
<StyledPostCardContent
className="link-color"
dangerouslySetInnerHTML={{
__html: marked(post.preview),
}}
></StyledPostCardContent>
<small>
<StyledLink to={`${process.env.PUBLIC_URL}${url}`}>
<u>Read more</u>
</StyledLink>
</small>
</StyledPostCard>
)
PostCards.push(<PostCard postData={{ url: url, ...post }} />)
}
this.setState({