Skip to content

Commit 379fbb8

Browse files
aaronryuaaronryu
committed
Merge branch 'master' of github.com:aaronryu/aaronryu.github.io
2 parents 0c9273c + 5535912 commit 379fbb8

3 files changed

Lines changed: 121 additions & 24 deletions

File tree

‎src/templates/archive/main-category.tsx‎

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { css } from "@emotion/react"
2-
import styled from "@emotion/styled"
3-
import { Link } from "gatsby"
4-
import * as React from "react"
5-
import { CategoryArticle } from "."
6-
import SubCategoryArticles from "./sub-category"
1+
import { css } from '@emotion/react'
2+
import styled from '@emotion/styled'
3+
import { Link } from 'gatsby'
4+
import * as React from 'react'
5+
import { CategoryArticle } from '.'
6+
import SubCategoryArticles from './sub-category'
77

88
export const CategoryLine = styled(`div`)({
99
content: '""',
@@ -84,19 +84,23 @@ export const CategorySubConnectedNestedLine = styled(CategoryLine)({
8484
},
8585
})
8686

87-
export const sliceStringWithMax = (str: string, max: number) =>
88-
(str.length >= max)
89-
? `${str.slice(0, max)}...`
90-
: str
87+
export const sliceStringWithMax = (str: string, max: number) =>
88+
str.length >= max ? `${str.slice(0, max)}...` : str
9189

92-
const MainCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, categories: Array<CategoryArticle> }> = ({ maxTitleLength, categories }) => (
90+
const MainCategoryArticles: React.FunctionComponent<{
91+
maxTitleLength: number
92+
categories: Array<CategoryArticle>
93+
}> = ({ maxTitleLength, categories }) => (
9394
<React.Fragment>
9495
{categories.map(each => {
9596
const mainCategory = each.category // .join(' - ')
96-
const hasSubCategory = each.subCategories && (each.subCategories.length > 0)
97+
const hasSubCategory = each.subCategories && each.subCategories.length > 0
9798
return (
9899
<MainCategoryBox key={mainCategory}>
99-
<MainCategoryTitle category={mainCategory} articleCount={each.count} />
100+
<MainCategoryTitle
101+
category={mainCategory}
102+
articleCount={each.count}
103+
/>
100104
<ul css={styles.articles} key={mainCategory}>
101105
{hasSubCategory && <CategoryMainLine />}
102106
{each.articles.map(article => (
@@ -107,38 +111,73 @@ const MainCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, ca
107111
</li>
108112
))}
109113
</ul>
110-
{hasSubCategory && <SubCategoryArticles maxTitleLength={maxTitleLength - 3} categories={each.subCategories!} />}
114+
{hasSubCategory && (
115+
<SubCategoryArticles
116+
maxTitleLength={maxTitleLength - 3}
117+
categories={each.subCategories!}
118+
/>
119+
)}
111120
</MainCategoryBox>
112121
)
113122
})}
114123
</React.Fragment>
115124
)
116125

117126
const ChevronRight = () => (
118-
<a css={css`position: relative; left: -5px`}>
127+
<a
128+
css={css`
129+
position: relative;
130+
left: -5px;
131+
`}
132+
>
119133
<svg height="20" viewBox="0 0 18 18" width="24" fill="var(--text-link)">
120134
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"></path>
121135
</svg>
122136
</a>
123137
)
124138

125139
const MainCategoryTitle: React.FunctionComponent<{
126-
category: string,
127-
articleCount: number,
140+
category: string
141+
articleCount: number
128142
}> = ({ category, articleCount }) => {
129143
return (
130-
<div css={[styles.categoryHeader, css`background-color: var(--text-link-background);`]}>
144+
<div
145+
css={[
146+
styles.categoryHeader,
147+
css`
148+
background-color: var(--text-link-background);
149+
`,
150+
]}
151+
>
131152
<ChevronRight />
132153
<strong css={styles.categoryTitle}>{category}</strong>
133-
<span css={[styles.categoryTitle, css`margin: 0 10px 0 auto;`]}>{articleCount}</span>
154+
<span
155+
css={[
156+
styles.categoryTitle,
157+
css`
158+
margin: 0 10px 0 auto;
159+
`,
160+
]}
161+
>
162+
{articleCount}
163+
</span>
134164
</div>
135165
)
136166
}
137167

138168
const MainCategoryBox: React.FunctionComponent<{
139-
children: React.ReactNode, props?: any
169+
children: React.ReactNode
170+
props?: any
140171
}> = ({ children, props }) => (
141-
<div css={[styles.categoryBox, css`margin: 0px 10px 10px;`]} {...props}>
172+
<div
173+
css={[
174+
styles.categoryBox,
175+
css`
176+
margin: 0px 10px 10px;
177+
`,
178+
]}
179+
{...props}
180+
>
142181
{children}
143182
</div>
144183
)
@@ -148,7 +187,7 @@ export const styles = {
148187
border: 1px solid var(--text-link);
149188
border-radius: 10px;
150189
padding: 10px;
151-
190+
152191
@media only screen and (max-width: 700px) {
153192
margin: 8px;
154193
}
@@ -204,7 +243,7 @@ export const styles = {
204243
font-weight: 100;
205244
font-size: 0.96rem;
206245
@media only screen and (max-width: 700px) {
207-
font-size: 0.90rem;
246+
font-size: 0.9rem;
208247
}
209248
`,
210249
articleTitle: css`
@@ -213,4 +252,4 @@ export const styles = {
213252
`,
214253
}
215254

216-
export default MainCategoryArticles
255+
export default MainCategoryArticles

‎src/templates/archive/nested-category.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,35 @@ import * as React from "react"
55
import { CategoryArticle } from "."
66
import { CategoryLine, CategoryMainConnectedNestedLine, CategorySubConnectedNestedLine, sliceStringWithMax, styles } from "./main-category"
77

8+
const CategoryMainConnectedNestedLine = styled(CategoryLine)({
9+
left: `-20px`,
10+
top: `-1.1rem`,
11+
height: `calc(100% + 1.5rem + 1.5rem)`,
12+
// | -1.0rem + 1.3rem | = 2.6rem -> CategoryMainLine
13+
'@media only screen and (max-width: 700px)': {
14+
top: `-1.0rem`,
15+
height: `calc(100% + 1.5rem + 1.3rem)`,
16+
},
17+
'@media only screen and (max-width: 600px)': {
18+
top: `-1.0rem`,
19+
height: `calc(100% + 1.5rem + 1.3rem)`,
20+
},
21+
})
22+
23+
const CategorySubConnectedNestedLine = styled(CategoryLine)({
24+
left: `21px`,
25+
top: `-1.1rem`,
26+
height: `calc(100% + 1.5rem + 1.1rem)`,
27+
'@media only screen and (max-width: 700px)': {
28+
top: `-1.0rem`,
29+
height: `calc(100% + 1.5rem + 1.0rem)`,
30+
},
31+
'@media only screen and (max-width: 600px)': {
32+
top: `-1.0rem`,
33+
height: `calc(100% + 1.5rem + 1.2rem)`,
34+
},
35+
})
36+
837
const NestedCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, categories: Array<CategoryArticle> }> = ({ maxTitleLength, categories }) => (
938
<React.Fragment>
1039
{categories.map((each, index) => {

‎src/templates/archive/sub-category.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,35 @@ import { CategoryArticle } from "."
66
import { CategoryLine, CategoryMainConnectedSubLine, CategorySubLine, sliceStringWithMax, styles } from "./main-category"
77
import NestedCategoryArticles from "./nested-category"
88

9+
const CategoryMainConnectedSubLine = styled(CategoryLine)({
10+
left: `14px`,
11+
top: `-1.5rem`,
12+
height: `calc(100% + 1.5rem + 1.5rem)`,
13+
// | -1.1rem + 1.2rem | = 2.6rem -> CategoryMainLine
14+
'@media only screen and (max-width: 700px)': {
15+
top: `-1.1rem`,
16+
height: `calc(100% + 1.5rem + 1.2rem)`,
17+
},
18+
'@media only screen and (max-width: 600px)': {
19+
top: `-1.1rem`,
20+
height: `calc(100% + 1.5rem + 1.2rem)`,
21+
},
22+
})
23+
24+
const CategorySubLine = styled(CategoryLine)({
25+
left: `55px`,
26+
top: `-0.2rem`,
27+
height: `calc(100% + 1.5rem + 0.0rem)`,
28+
'@media only screen and (max-width: 700px)': {
29+
top: `-0.1rem`,
30+
height: `calc(100% + 1.5rem - 0.1rem)`,
31+
},
32+
'@media only screen and (max-width: 600px)': {
33+
top: `-0.1rem`,
34+
height: `calc(100% + 1.5rem + 0.0rem)`,
35+
},
36+
})
37+
938
const SubCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, categories: Array<CategoryArticle> }> = ({ maxTitleLength, categories }) => (
1039
<React.Fragment>
1140
{categories.map((each, index) => {

0 commit comments

Comments
 (0)