8000 Merge pull request #6 from daniel-soaress/develop · lostcode-dev/lostcode-blog@23f79ec · GitHub
[go: up one dir, main page]
Skip to content

Commit 23f79ec

Browse files
lostcode-devlostcode-dev
authored
Merge pull request #6 from daniel-soaress/develop
Develop
2 parents 7a8994a + 567d3e8 commit 23f79ec

File tree

11 files changed

+185
-74
lines changed

11 files changed

+185
-74
lines changed

‎public/images/icons/book.png

1.85 KB
Loading

‎src/components/Tag/index.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import styles from './styles.module.scss';
2+
3+
type TagProps = {
4+
value: string
5+
}
6+
7+
export function Tag(props: TagProps) {
8+
const getTypeColor = (value) => {
9+
const type = value.toLowerCase();
10+
switch(type) {
11+
case 'html':
12+
return '#2B1725'
13+
case 'javascript':
14+
return '#2B2819';
15+
case 'css':
16+
return '#22142B';
17+
case 'react':
18+
return '#14122B';
19+
case 'vue':
20+
return '#142B10';
21+
default:
22+
return 'black';
23+
}
24+
}
25+
26+
return (
27+
props.value ?
28+
<div
29+
className={styles.tagContainer}
30+
style={{backgroundColor: getTypeColor(props.value)}}
31+
>
32+
<span>{ props.value}</span>
33+
</div>
34+
: <></>
35+
)
36+
}

‎src/components/Tag/styles.module.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.tagContainer {
2+
font-size: 0.7rem;
3+
font-weight: bold;
4+
5+
border-radius: 0.5rem;
6+
display: flex;
7+
padding: 0.25rem 0.5rem;
8+
text-transform: uppercase;
9+
min-width: 75px;
10+
11+
12+
span {
13+
margin: 0 auto;
14+
}
15+
}

‎src/components/index.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Search } from './Search';
2+
import { ButtonScrollTop } from './ButtonScrollTop';
3+
import { ActiveLink } from './ActiveLink';
4+
import { Header } from './Header';
5+
import { Tag } from './Tag';
6+
7+
export {
8+
Search,
9+
ButtonScrollTop,
10+
ActiveLink,
11+
Header,
12+
Tag
13+
}

‎src/pages/_app.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AppProps } from 'next/app';
2-
import { Header } from '../components/Header';
2+
import { Header } from '../components';
33
import { SessionProvider as NextAuthProvider } from 'next-auth/react';
44
import '../styles/global.scss';
55

‎src/pages/home.module.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,20 @@
1313
}
1414
}
1515

16+
.imgContainer {
17+
object-fit: cover;
18+
display: block;
19+
padding-right: 1rem;
20+
21+
span {
22+
position: relative!important;
23+
width: 100%!important;
24+
height: 100%!important;
25+
display: block!important;
26+
}
27+
}
28+
29+
1630
.hand{
1731
display: inline-block;
1832
animation: rotate 0.75s infinite alternate;

‎src/pages/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ export default function Home({ }) {
1818
</p>
1919
</section>
2020

21-
<img src="/images/avatar.png" alt="lostCode coding" />
21+
<div className={styles.imgContainer}>
22+
<img src="/images/avatar.png" alt="lostCode coding" />
23+
</div>
2224
</main>
2325
</>
2426
)

‎src/pages/posts/[slug].tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { GetServerSideProps } from "next";
22
import Head from "next/head";
33
import { RichText } from "prismic-dom";
4-
54
import { getPrismicClient } from "../../services/prismic";
6-
75
import styles from './post.module.scss';
86

97
interface PostProps {
@@ -27,7 +25,7 @@ export default function Post ({ post }: PostProps) {
2725
<article className={styles.post}>
2826
<h1>{post.title}</h1>
2927
<time>{post.updatedAt}</time>
30-
<img src={post.image} alt="turururu" />
28+
<img src={post.image} alt={post.title} />
3129
<div className={styles.postContent} dangerouslySetInnerHTML={{ __html: post.content }} />
3230
</article>
3331
</main>

‎src/pages/posts/index.tsx

Lines changed: 67 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,76 @@
11
import { GetStaticProps } from 'next';
2-
import Head from 'next/head';
32
import { getPrismicClient, listPostPrismic } from '../../services/prismic';
4-
import { Search } from '../../components/Search';
5-
import { ButtonScrollTop } from '../../components/ButtonScrollTop';
3+
import { Search, ButtonScrollTop, Tag } from '../../components';
64
import styles from './styles.module.scss';
75
import Prismic from '@prismicio/client';
86
import { RichText } from 'prismic-dom';
9-
import Link from 'next/link';
107
import { useState } from 'react';
118
import InfiniteScroll from 'react-infinite-scroll-component';
9+
import Head from 'next/head';
10+
import Image from 'next/image';
11+
import Link from 'next/link';
1212

1313
type Post = {
1414
slug: string;
1515
title: string;
1616
excerpt: string;
17+
tag: string;
1718
image: string;
19+
timeOfRead: string;
1820
updatedAt: string;
1921
}
2022

2123
interface PostsProps {
2224
allPosts: Post[];
2325
}
2426

27+
const pageSize = 4;
28+
const fetch = 'template-post.title,template-post.content,template-post.image,template-post.tags';
29+
const q = '[at(document.type,"template-post")]';
30+
31+
const handlerPosts = (posts) => {
32+
let countPost = 0;
33+
return posts.map(post => {
34+
countPost++;
35+
const excerpt = post.data.content.find(content => content.type === 'paragraph')?.text ?? '';
36+
const isMultipleFour = countPost % 4 === 0;
37+
const timeOfRead = calcTimeOfRead(post)
38+
const previewText = isMultipleFour ? excerpt.slice(0, 600) : excerpt.slice(0, 200);
39+
return {
40+
slug: post.uid,
41+
title: RichText.asText(post.data.title),
42+
excerpt: excerpt.length > 200 ? `${previewText}...` : '',
43+
image: post.data.image.url ?? '',
44+
tag: post.data?.tags ? RichText.asText(post.data.tags) : '',
45+
timeOfRead,
46+
updatedAt: new Date(post.last_publication_date).toLocaleDateString('pt-BR',
47+
{
48+
day: '2-digit',
49+
month: '2-digit',
50+
year: 'numeric'
51+
})
52+
}
53+
})
54+
}
55+
56+
const calcTimeOfRead = (post) => {
57+
const num_words = RichText.asText(post.data.content)?.split(' ').length;
58+
const num_imgs = 1;
59+
let height_imgs = 0;
60+
for(let i = 0; i < num_imgs; i++) {
61+
height_imgs += (i <= 9) ? 12 - i : 3;
62+
}
63+
const seconds = (num_words / 265 * 60) + height_imgs;
64+
return Math.round(seconds/60);
65+
}
66+
2567
export default function Posts({ allPosts }: PostsProps) {
2668
const [currentPage, setCurrentPage] = useState(2);
2769
const [posts, setPosts] = useState(allPosts);
2870
const [search, setSearch] = useState('');
2971
const [hasMore, setHasMore] = useState(true);
3072
const [loadingSearch, setLoadingSearch] = useState(false);
3173

32-
const pageSize = 4;
33-
const fetch = 'template-post.title,template-post.content,template-post.image';
34-
const q = '[at(document.type,"template-post")]';
35-
3674
const getMorePost = async () => {
3775
if (loadingSearch) return;
3876
const params = { currentPage, pageSize, fetch, q };
@@ -49,28 +87,6 @@ export default function Posts({ allPosts }: PostsProps) {
4987
}
5088
};
5189

52-
const handlerPosts = (posts) => {
53-
let countPost = 0;
54-
return posts.map(post => {
55-
countPost++;
56-
const excerpt = post.data.content.find(content => content.type === 'paragraph')?.text ?? '';
57-
const isMultipleFour = countPost % 4 === 0;
58-
const previewText = isMultipleFour ? excerpt.slice(0, 600) : excerpt.slice(0, 200);
59-
return {
60-
slug: post.uid,
61-
title: RichText.asText(post.data.title),
62-
excerpt: excerpt.length > 200 ? `${previewText}...` : '',
63-
image: post.data.image.url ?? '',
64-
updatedAt: new Date(post.last_publication_date).toLocaleDateString('pt-BR',
65-
{
66-
day: '2-digit',
67-
month: 'long',
68-
year: 'numeric'
69-
})
70-
}
71-
})
72-
}
73-
7490
const searchPosts = async (searchText) => {
7591
setLoadingSearch(true);
7692
const params = { currentPage: 1, pageSize, fetch, q };
@@ -106,7 +122,7 @@ export default function Posts({ allPosts }: PostsProps) {
106122
</Head>
107123
<main className={styles.container}>
108124
<ButtonScrollTop
109-
show={posts.length > 4}/>
125+
show={posts.length > 4} />
110126
<div className={styles.posts}>
111127
<Search
112128
handleSearch={searchPosts}
@@ -121,10 +137,24 @@ export default function Posts({ allPosts }: PostsProps) {
121137
{
122138
posts.map(post => (
123139
<div key={post.slug} F438 className={styles.postContainer}>
124-
<img src={post.image} alt={post.image} />
140+
<div className={styles.imgContainer}>
141+
<Image
142+
src={post.image}
143+
alt={post.title}
144+
layout="fill"
145+
objectFit="cover"
146+
>
147+
</Image>
148+
</div>
125149
<Link href={`/posts/${post.slug}`} key={post.slug}>
126150
<a>
127-
<time>{post.updatedAt}</time>
151+
<div className={styles.subTitle}>
152+
<time>{post.updatedAt}</time>
153+
<div>
154+
<Image src="/images/icons/book.png" width={20} height={20} alt="livro aberto" />
155+
<span>{post.timeOfRead} min</span></div>
156+
<Tag value={post.tag}></Tag>
157+
</div>
128158
<strong>{post.title}</strong>
129159
<p>
130160
{post.excerpt}
@@ -159,32 +189,13 @@ export const getStaticProps: GetStaticProps = async () => {
159189
const response = await prismic.query<any>(
160190
[Prismic.predicates.at('document.type', 'template-post')],
161191
{
162-
fetch: ['template-post.title', 'template-post.content', 'template-post.image'],
163-
pageSize: 4,
164192
page: 1,
165-
orderings: '[document.first_publication_date desc]'
193+
fetch: fetch.split(','),
194+
pageSize,
195+
orderings: '[document.last_publication_date desc]'
166196
},
167197
)
168-
169-
let countPost = 0;
170-
const allPosts = response.results.map(post => {
171-
countPost++;
172-
const excerpt = post.data.content.find(content => content.type === 'paragraph')?.text ?? '';
173-
const isMultipleFour = countPost % 4 === 0;
174-
const previewText = isMultipleFour ? excerpt.slice(0, 600) : excerpt.slice(0, 200);
175-
return {
176-
slug: post.uid,
177-
title: RichText.asText(post.data.title),
178-
excerpt: excerpt.length > 200 ? `${previewText}...` : '',
179-
image: post.data.image.url ?? '',
180-
updatedAt: new Date(post.last_publication_date).toLocaleDateString('pt-BR',
181-
{
182-
day: '2-digit',
183-
month: 'long',
184-
year: 'numeric'
185-
})
186-
}
187-
})
198+
const allPosts = handlerPosts(response.results);
188199

189200
return {
190201
props: {

‎src/pages/posts/styles.module.scss

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@
55
min-height: calc(100vh - 6.5rem);
66
}
77

8+
.imgContainer {
9+
object-fit: cover;
10+
width: 50%;
11+
height: 250px;
12+
display: block;
13+
padding-right: 1rem;
14+
15+
span {
16+
position: relative!important;
17+
width: 100%!important;
18+
height: 100%!important;
19+
display: block!important;
20+
}
21+
}
22+
823
.notData {
924

1025
padding-bottom: 8px;
@@ -44,7 +59,7 @@
4459
&:nth-child(even) {
4560
flex-direction: row-reverse;
4661

47-
img {
62+
.imgContainer {
4863
padding-right: 0rem;
4964
padding-left: 1rem;
5065
}
@@ -63,8 +78,7 @@
6378
padding-bottom: 1rem;
6479
margin-top: 2rem;
6580

66-
a,
67-
img {
81+
a, .imgContainer {
6882
width: 100%;
6983
padding: 0;
7084
}
@@ -74,14 +88,6 @@
7488
text-align: justify;
7589
}
7690
}
77-
78-
img {
79-
display: block;
80-
width: 50%;
81-
height: 250px;
82-
object-fit: cover;
83-
padding-right: 1rem;
84-
}
8591
}
8692

8793
.posts {
@@ -92,9 +98,25 @@
9298
display: block;
9399
width: 50%;
94100

101+
.subTitle {
102+
display: flex;
103+
justify-content: space-between;
104+
align-items: center;
105+
106+
div:first-of-type {
107+
display: flex;
108+
justify-content: center;
109+
align-items: center;
110+
111+
span {
112+
margin-left: 0.5rem;
113+
}
114+
}
115+
}
116+
95117
time {
96118
font-size: 0.9rem;
97-
display: flex;
119+
display: inline;
98120
align-items: center;
99121
color: var(--white);
100122
}

0 commit comments

Comments
 (0)
0