Skip to content

Commit 445c6fc

Browse files
min050410min050410
authored
Merge pull request #26 from min050410/feature
Feature
2 parents 9845120 + ee31a9c commit 445c6fc

14 files changed

Lines changed: 363 additions & 184 deletions

File tree

‎package-lock.json‎

Lines changed: 9 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"react-syntax-highlighter": "^15.4.5",
3232
"sass": "^1.43.5",
3333
"styled-components": "^5.3.3"
34+
},
35+
"devDependencies": {
36+
"@types/node": "^17.0.0"
3437
}
3538
}

‎src/components/codeblock.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from 'react'
22
import styled from 'styled-components'
33
import Highlight, {defaultProps} from 'prism-react-renderer'
4-
import theme from 'prism-react-renderer/themes/nightOwl';
4+
import theme from 'prism-react-renderer/themes/oceanicNext';
55

66
const Pre = styled.pre`
77
text-align: left;
88
margin: 1em 0;
99
padding: 0.5em;
10-
// overflow-y: scroll;
1110
display: inline-block;
1211
`;
1312

@@ -43,7 +42,6 @@ const CodeBlock = ({children, className}) => {
4342
<span key={key} {...getTokenProps({ token, key })} />
4443
))}
4544
</LineContent> : null}
46-
4745
</Line>
4846
))}
4947
</Pre>

‎src/components/header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ const Header = () => {
1818
</div>
1919
<div className="filter wrap">
2020
<div className="filter img"></div>
21-
<div className="filter text">필터 설정</div>
21+
<div className="filter text">필터설정</div>
2222
</div>
2323
</div>
2424
<div className="head content">
25-
<a href="https://github.com/min050410/TIL"><span>소개</span></a>
25+
<a href="https://github.com/min050410/min050410"><span>소개</span></a>
2626
<a href="https://github.com/min050410"><span>깃허브</span></a>
2727
<a href="#"><span>다크모드</span></a>
2828
<div className="mod">

‎src/md/Flask.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 테스트용 포스트입니다
1+
# FLASK 튜토리얼
22
> <a href="https://github.com/min050410/Flask-take-notes/tree/master">View my code</a>
33
44
### 개발시에 시간이 오래 걸렸거나 헷갈렸던 것들 모임

src/md/indexpost.tsx renamed to src/md/popular.tsx

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,64 +3,45 @@
33
// title : title of post
44
// filename : ref post mdx
55
// img : img filename
6-
// tag : post tag(max 3)
76

8-
const posts = [
7+
8+
const popular = [
99
{
1010
id: 1,
1111
title: 'Flask 튜토리얼',
1212
filename: 'Flask',
1313
img: 'flask',
14-
tag: '#python',
15-
tag2: '#flask',
16-
tag3: '#backend',
17-
1814
},
1915
{
2016
id: 2,
2117
title: 'CORS와 해결방법',
2218
filename: 'Cors',
2319
img: 'CORS',
24-
tag: '#cors',
25-
tag2: '#frontend',
26-
tag3: '#backend',
2720
},
2821
{
2922
id: 3,
3023
title: 'Window 터미널 꾸미기',
3124
filename: 'Ohmyposh',
3225
img: 'ohmyposh',
33-
tag: '#terminal',
34-
tag2: '#window',
35-
tag3: '',
3626
},
3727
{
3828
id: 4,
3929
title: '자료구조 정리',
4030
filename: 'Structure',
4131
img: 'datastucture',
42-
tag: '#C',
43-
tag2: '#tree',
44-
tag3: '#graph',
4532
},
4633
{
4734
id: 5,
4835
title: 'RN camera 튜토리얼',
4936
filename: 'Camera',
5037
img: 'camera',
51-
tag: '#react',
52-
tag2: '#module',
53-
tag3: '',
5438
},
5539
{
5640
id: 6,
5741
title: 'TypeScript 개발일지',
5842
filename: 'Typescript',
5943
img: 'react-native',
60-
tag: '#react',
61-
tag2: '#ts',
62-
tag3: '',
6344
}
6445
];
6546

66-
export default posts;
47+
export default popular;

‎src/md/recent.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// 배열에 모든 mdx 저장
2+
// id : post index
3+
// title : title of post
4+
// filename : ref post mdx
5+
// img : img filename
6+
// tag : post tag(max 3)
7+
8+
const recent = [
9+
{
10+
id: 1,
11+
title: 'Flask 튜토리얼',
12+
filename: 'Flask',
13+
img: 'flask',
14+
date: '12월 11일',
15+
tag: 'python',
16+
tag2: 'flask',
17+
tag3: 'backend',
18+
},
19+
{
20+
id: 2,
21+
title: 'CORS와 해결방법',
22+
filename: 'Cors',
23+
img: 'CORS',
24+
date: '12월 9일',
25+
tag: 'cors',
26+
tag2: 'frontend',
27+
tag3: 'backend',
28+
},
29+
{
30+
id: 3,
31+
title: 'Window 터미널 꾸미기',
32+
filename: 'Ohmyposh',
33+
img: 'ohmyposh',
34+
date: '11월 30일',
35+
tag: 'terminal',
36+
tag2: 'window',
37+
tag3: '',
38+
},
39+
{
40+
id: 4,
41+
title: '자료구조 정리',
42+
filename: 'Structure',
43+
img: 'datastucture',
44+
date: '11월 25일',
45+
tag: 'C',
46+
tag2: 'tree',
47+
tag3: 'graph',
48+
},
49+
{
50+
id: 5,
51+
title: 'RN camera 튜토리얼',
52+
filename: 'Camera',
53+
date: '11월 22일',
54+
img: 'camera',
55+
tag: 'react',
56+
tag2: 'module',
57+
tag3: '',
58+
},
59+
{
60+
id: 6,
61+
title: 'TypeScript 개발일지',
62+
filename: 'Typescript',
63+
date: '11월 12일',
64+
img: 'react-native',
65+
tag: 'react',
66+
tag2: 'ts',
67+
tag3: '',
68+
}
69+
];
70+
71+
export default recent;

‎src/pages/index.tsx‎

Lines changed: 51 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,71 @@ import { Link } from 'gatsby';
33
import { useState } from 'react';
44

55
//components
6-
import posts from '../md/indexpost'
6+
import recent from '../md/recent'
7+
import popular from '../md/popular'
78
import Header from '../components/header'
89

910
//styles
1011
import '../styles/card.sass';
12+
import '../styles/recent.sass'
1113

1214
const IndexPage = () => {
1315
const [isHover, setHover] = useState(false);
1416
const [ID, setID] = useState(-1);
1517

16-
const postlist = posts.map((post) =>
17-
// setID(post.id),
18+
const popular_list = popular.map((post) =>
1819
(
1920
<div className="card">
2021
<div className="imgbox">
2122
<img
2223
src={require(`../assets/images/${post.img}.png`).default}
2324
alt={post.img}
24-
// onMouseOver={() => setHover(true)}
25-
onMouseOver={function(){
25+
onMouseOver={function () {
2626
setHover(true)
2727
setID(post.id)
2828
}}
29-
onMouseOut={function(){
30-
setHover(true)
29+
onMouseOut={function () {
30+
setHover(false)
3131
setID(-1)
3232
}}
3333
/>
34-
{(isHover && ID==post.id)?<img className="copylink" src={require(`../assets/images/copylink.png`).default}></img>:null}
34+
{(isHover && ID == post.id) ? <img
35+
className="star"
36+
src="https://user-images.githubusercontent.com/45661217/146631169-54b842c2-d174-488b-9192-02780e57b2a5.png"
37+
></img> : null}
3538
</div>
3639
<Link to="postitem/" state={{ myProp: post.filename }}>
3740
<h3>{post.title}</h3>
38-
{/* <span>{post.tag}</span>
39-
{ (post.tag2) ? <span>{post.tag2}</span> : null }
40-
{ (post.tag3) ? <span>{post.tag3}</span> : null } */}
41+
</Link>
42+
</div>
43+
));
44+
45+
const recent_list = recent.map((post) =>
46+
(
47+
<div className="recent_content">
48+
<Link to="postitem/" state={{ myProp: post.filename }}>
49+
<div className="post">
50+
<div className="left">
51+
{/* <Link to="postitem/" state={{ myProp: post.filename }}> */}
52+
<div className="imgbox">
53+
<img
54+
src={require(`../assets/images/${post.img}.png`).default}
55+
alt={post.img}
56+
/>
57+
</div>
58+
<div id="text_group">
59+
<h3>{post.title}</h3>
60+
<div>{post.date}</div>
61+
</div>
62+
{/* star */}
63+
{/* <img className="copylink" src="https://user-images.githubusercontent.com/45661217/146631169-54b842c2-d174-488b-9192-02780e57b2a5.png"></img> */}
64+
</div>
65+
<div className="tag">
66+
{(post.tag) ? <span>{post.tag}</span> : null}
67+
{(post.tag2) ? <span>{post.tag2}</span> : null}
68+
{(post.tag3) ? <span>{post.tag3}</span> : null}
69+
</div>
70+
</div>
4171
</Link>
4272
</div>
4373
));
@@ -49,14 +79,16 @@ const IndexPage = () => {
4979
</head>
5080
<body>
5181
<Header />
52-
<div className="popular">인기있는 포스트</div>
53-
<div className="container">
54-
{postlist}
55-
{/* {(posts[posts.length - 1].id) % 2 === 1 ?
56-
(<Link to="#">
57-
<div className="card">
58-
</div>
59-
</Link>) : null} */}
82+
<div className="fade_in">
83+
<div className="header">인기있는 블로그</div>
84+
<div className="container">
85+
{popular_list}
86+
87+
</div>
88+
<div className="header">최근 블로그</div>
89+
<div className="horizontal_container">
90+
{recent_list}
91+
</div>
6092
</div>
6193
</body>
6294
</main>

‎src/pages/postitem.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ const Postimport = ({ location }) => {
2828
</MDXProvider>
2929
</div>
3030
</div>
31+
32+
3133
</main>
34+
3235
)
3336
}
3437
}

0 commit comments

Comments
 (0)