Skip to content

Commit 85ec059

Browse files
dc7290dc7290
committed
コンポーネント実装完了
1 parent f9c7192 commit 85ec059

File tree

20 files changed

+703
-42
lines changed

20 files changed

+703
-42
lines changed

‎src/components/Banner/Banner.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,13 @@ const Component: React.VFC<Props> = ({ banner, id }) => (
2020
target="banner"
2121
>
2222
<picture>
23-
<source srcSet={`${banner.image.url}?w=300&fm=webp, ${banner.image.url}?w=600&fm=webp 2x`} type="image/webp" />
23+
<source
24+
data-srcset={`${banner.image.url}?w=300&fm=webp, ${banner.image.url}?w=600&fm=webp 2x`}
25+
type="image/webp"
26+
/>
2427
<img
25-
className={styles.image}
26-
src={banner.image.url}
28+
className={'lazyload ' + styles.image}
29+
data-src={banner.image.url}
2730
alt={banner.alt}
2831
width={banner.image.width}
2932
height={banner.image.height}

‎src/components/BlogDetailLayout/BlogDetailLayout.module.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
.category {
2+
display: inline-block;
3+
padding: 2px 10px;
4+
border-radius: 3px;
5+
color: #fff;
6+
margin-top: 10px;
7+
font-size: 14px;
8+
font-weight: bold;
9+
}
10+
11+
@media (min-width: 1160px) {
12+
.main {
13+
display: flex;
14+
justify-content: space-between;
15+
margin-top: 40px;
16+
}
17+
18+
.ogimageWrap {
19+
position: relative;
20+
overflow: hidden;
21+
border-radius: 5px;
22+
}
23+
24+
.ogimage {
25+
display: block;
26+
width: 100%;
27+
}
28+
29+
.container {
30+
position: relative;
31+
flex: 1;
32+
background-color: #fff;
33+
margin-left: 80px;
34+
-webkit-font-smoothing: antialiased;
35+
}
36+
37+
.title {
38+
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
39+
Arial, sans-serif;
40+
display: block;
41+
font-weight: bold;
42+
font-size: 40px;
43+
color: #2b2c30;
44+
}
45+
}
46+
47+
@media (min-width: 820px) and (max-width: 1160px) {
48+
.main {
49+
display: flex;
50+
justify-content: space-between;
51+
margin-top: 40px;
52+
align-items: strech;
53+
}
54+
55+
.ogimageWrap {
56+
position: relative;
57+
overflow: hidden;
58+
border-radius: 5px;
59+
}
60+
61+
.ogimage {
62+
display: block;
63+
width: 100%;
64+
}
65+
66+
.container {
67+
position: relative;
68+
flex: 1;
69+
background-color: #fff;
70+
margin-left: 80px;
71+
-webkit-font-smoothing: antialiased;
72+
}
73+
74+
.title {
75+
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
76+
Arial, sans-serif;
77+
display: block;
78+
font-weight: bold;
79+
font-size: 40px;
80+
color: #2b2c30;
81+
}
82+
}
83+
@media (min-width: 600px) and (max-width: 820px) {
84+
.main {
85+
display: flex;
86+
justify-content: space-between;
87+
margin-top: 40px;
88+
align-items: strech;
89+
}
90+
91+
.ogimageWrap {
92+
position: relative;
93+
overflow: hidden;
94+
border-radius: 5px;
95+
}
96+
97+
.ogimage {
98+
display: block;
99+
width: 100%;
100+
}
101+
102+
.container {
103+
position: relative;
104+
flex: 1;
105+
background-color: #fff;
106+
margin-left: 80px;
107+
-webkit-font-smoothing: antialiased;
108+
}
109+
110+
.title {
111+
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
112+
Arial, sans-serif;
113+
display: block;
114+
font-weight: bold;
115+
font-size: 40px;
116+
color: #2b2c30;
117+
}
118+
}
119+
@media (max-width: 600px) {
120+
.main {
121+
display: flex;
122+
flex-direction: column-reverse;
123+
margin-top: 30px;
124+
}
125+
126+
.ogimageWrap {
127+
position: relative;
128+
overflow: hidden;
129+
width: calc(100% + 32px);
130+
margin: 0 -16px;
131+
}
132+
133+
.ogimage {
134+
display: block;
135+
width: 100%;
136+
}
137+
138+
.container {
139+
position: relative;
140+
flex: 1;
141+
background-color: #fff;
142+
-webkit-font-smoothing: antialiased;
143+
}
144+
145+
.title {
146+
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
147+
Arial, sans-serif;
148+
display: block;
149+
font-weight: bold;
150+
font-size: 24px;
151+
color: #2b2c30;
152+
}
153+
}

‎src/components/BlogDetailLayout/BlogDetailLayout.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react'
2+
3+
import { Banner } from '~/src/types/microCMS/api/Banner'
4+
import { Blog } from '~/src/types/microCMS/api/Blog'
5+
import { Category } from '~/src/types/microCMS/api/Category'
6+
7+
import { Breadcrumb } from '../Breadcrumb'
8+
import { Conversion } from '../Conversion'
9+
import { Layout } from '../Layout'
10+
import { Meta } from '../Meta'
11+
import { Partner } from '../Partner'
12+
import { Post } from '../Post'
13+
import { RelatedBlogs } from '../RelatedBlogs'
14+
import { Share } from '../Share'
15+
import { Toc } from '../Toc'
16+
import { TocProps } from '../Toc/Toc'
17+
import { Writer } from '../Writer'
18+
19+
import styles from './BlogDetailLayout.module.css'
20+
21+
type ContainerProps = {
22+
banner: Banner
23+
categories: Category[]
24+
content: Blog
25+
toc: TocProps['toc']
26+
popularArticles: Blog[]
27+
latestArticles: Blog[]
28+
}
29+
30+
export type { ContainerProps as BlogDetailLayoutProps }
31+
32+
type Props = ContainerProps
33+
34+
const Component: React.VFC<Props> = ({ content, toc, ...layoutProps }) => (
35+
<Layout {...layoutProps}>
36+
<div className={styles.ogimageWrap}>
37+
<picture>
38+
<source
39+
media="(min-width: 1160px)"
40+
type="image/webp"
41+
srcSet={`${content.ogimage.url}?w=820&fm=webp, ${content.ogimage.url}?w=1640&fm=webp 2x`}
42+
/>
43+
<source
44+
media="(min-width: 820px)"
45+
type="image/webp"
46+
srcSet={`${content.ogimage.url}?w=740&fm=webp, ${content.ogimage.url}?w=1480&fm=webp 2x`}
47+
/>
48+
<source
49+
media="(min-width: 768px)"
50+
type="image/webp"
51+
srcSet={`${content.ogimage.url}?w=728&fm=webp, ${content.ogimage.url}?w=1456&fm=webp 2x`}
52+
/>
53+
<source
54+
media="(max-width: 768px)"
55+
type="image/webp"
56+
srcSet={`${content.ogimage.url}?w=375&fm=webp, ${content.ogimage.url}?w=750&fm=webp 2x`}
57+
/>
58+
<img src={content.ogimage.url + '?w=820&q=100'} className={styles.ogimage} alt="" />
59+
</picture>
60+
</div>
61+
<Breadcrumb category={content.category} />
62+
<div className={styles.main}>
63+
<Share id={content.id} title={content.title} />
64+
<div className={styles.container}>
65+
<h1 className={styles.title}>{content.title}</h1>
66+
<Meta
67+
createdAt={content.publishedAt ?? content.createdAt}
68+
author={content.writer?.name}
69+
category={content.category}
70+
/>
71+
{content.toc_visible && <Toc toc={toc} />}
72+
<Post body={content.body} />
73+
{content.writer && <Writer writer={content.writer} />}
74+
{content.partner && <Partner partner={content.partner} />}
75+
<Conversion id={content.id} />
76+
{content.related_blogs.length > 0 && <RelatedBlogs blogs={content.related_blogs} />}
77+
</div>
78+
</div>
79+
</Layout>
80+
)
81+
82+
const Container: React.VFC<ContainerProps> = (props) => {
83+
return <Component {...props} />
84+
}
85+
86+
export default Container

‎src/components/BlogDetailLayout/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as BlogDetailLayout } from './BlogDetailLayout'

0 commit comments

Comments
 (0)