Skip to content

Commit 8cf8685

Browse files
dzinemondzinemon
committed
authors
1 parent 9e66dad commit 8cf8685

20 files changed

+889
-92
lines changed

‎gatsby-node.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ exports.createPages = async ({ graphql, actions }) => {
125125

126126
// This part here defines, that our author pages will use
127127
// a `/author/:slug/` permalink.
128-
const url = `/author/${node.slug}`
128+
const url = `/authors/${node.slug}`
129129

130130
const items = Array.from({length: totalPosts})
131131

‎src/components/AuthorCard.js

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React from "react";
22

3+
import config from "../utils/siteConfig";
4+
35
export default function AuthorCard({ post }) {
46
const { authors } = post;
57

68
if (typeof authors[1] === "object") {
79
return (
810
<section className="flex flew-row mb-6">
9-
<div className="relative mr-3" style={{
11+
<a className="relative mr-3 inline-block hover:opacity-90"
12+
href={`${config.sitePath}/authors/${authors[0].slug}`}
13+
style={{
1014
width: "49px",
1115
height: "49px",
1216
}}>
@@ -43,9 +47,11 @@ export default function AuthorCard({ post }) {
4347
)}
4448
</div>
4549
</div>
46-
</div>
50+
</a>
4751

48-
<div className="relative" style={{
52+
<a className="relative inline-block hover:opacity-80"
53+
href={`${config.sitePath}/authors/${authors[1].slug}`}
54+
style={{
4955
width: "49px",
5056
height: "49px",
5157
}}>
@@ -82,11 +88,19 @@ export default function AuthorCard({ post }) {
8288
)}
8389
</div>
8490
</div>
85-
</div>
91+
</a>
8692

8793
<div className="pl-4 flex flex-col justify-center">
8894
<p className="text-sm">
89-
<strong className="font-bold">{authors[0].name}</strong> and <strong className="font-bold">{authors[1].name}</strong>
95+
<strong className="font-bold">
96+
<a className="hover:text-sdv-secondary" href={`${config.sitePath}/authors/${authors[0].slug}`}>{authors[0].name}</a>
97+
</strong>
98+
{" "}
99+
and
100+
{" "}
101+
<strong className="font-bold">
102+
<a className="hover:text-sdv-secondary" href={`${config.sitePath}/authors/${authors[1].slug}`}>{authors[1].name}</a>
103+
</strong>
90104
</p>
91105
<p className="font-light text-xs">{post.published_at_pretty}</p>
92106
</div>
@@ -96,7 +110,10 @@ export default function AuthorCard({ post }) {
96110

97111
return (
98112
<section className="flex flew-row mb-6">
99-
<div className="relative">
113+
<a
114+
href={`${config.sitePath}/authors/${post.primary_author.slug}`}
115+
className="relative inline-block hover:opacity-80"
116+
>
100117
<div
101118
className="rounded-full bg-sdv-highlight top-0 left-0"
102119
style={{
@@ -130,9 +147,11 @@ export default function AuthorCard({ post }) {
130147
)}
131148
</div>
132149
</div>
133-
</div>
150+
</a>
134151
<div className="pl-4 flex flex-col justify-center">
135-
<p className="font-bold text-sm">{post.primary_author.name}</p>
152+
<p className="font-bold text-sm">
153+
<a className="hover:text-sdv-secondary" href={`${config.sitePath}/authors/${post.primary_author.slug}`}>{post.primary_author.name}</a>
154+
</p>
136155
<p className="font-light text-xs">{post.published_at_pretty}</p>
137156
</div>
138157
</section>

‎src/components/AuthorCardSm.js

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import React from "react";
2+
3+
export default function AuthorCardSm({ post }) {
4+
const { authors } = post;
5+
6+
if (typeof authors[1] === "object") {
7+
return (
8+
<section className="flex flew-row mb-4">
9+
<div className="relative mr-2" style={{
10+
width: "49px",
11+
height: "49px",
12+
}}>
13+
<div
14+
className="rounded-full bg-sdv-highlight top-0 left-0 h-full w-full"
15+
style={{
16+
width: "49px",
17+
height: "49px",
18+
}}
19+
>
20+
<div
21+
className="overflow-hidden rounded-full absolute bottom-0 right-0"
22+
style={{
23+
width: "46px",
24+
height: "46px",
25+
}}
26+
>
27+
{authors[0].profile_image ? (
28+
<img
29+
width={46}
30+
height={46}
31+
className="block rounded-full relative z-10 object-cover h-full"
32+
src={authors[0].profile_image}
33+
alt={authors[0].name}
34+
/>
35+
) : (
36+
<img
37+
width={46}
38+
height={46}
39+
className="block rounded-full relative z-10 object-cover h-full"
40+
src="/blog/images/icons/avatar.svg"
41+
alt={authors[0].name}
42+
/>
43+
)}
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div className="relative" style={{
49+
width: "49px",
50+
height: "49px",
51+
}}>
52+
<div
53+
className="rounded-full bg-sdv-highlight top-0 left-0 h-full w-full"
54+
style={{
55+
width: "49px",
56+
height: "49px",
57+
}}
58+
>
59+
<div
60+
className="overflow-hidden rounded-full absolute bottom-0 right-0"
61+
style={{
62+
width: "46px",
63+
height: "46px",
64+
}}
65+
>
66+
{authors[1].profile_image ? (
67+
<img
68+
width={46}
69+
height={46}
70+
className="block rounded-full relative z-10 object-cover h-full"
71+
src={authors[1].profile_image}
72+
alt={authors[1].name}
73+
/>
74+
) : (
75+
<img
76+
width={46}
77+
height={46}
78+
className="block rounded-full relative z-10 object-cover h-full"
79+
src="/blog/images/icons/avatar.svg"
80+
alt={authors[1].name}
81+
/>
82+
)}
83+
</div>
84+
</div>
85+
</div>
86+
87+
<div className="pl-3 flex flex-col justify-center">
88+
<p className="text-xs">
89+
<strong className="font-bold">{authors[0].name}</strong> and <strong className="font-bold">{authors[1].name}</strong>
90+
</p>
91+
<p className="font-light text-xs">{post.published_at_pretty}</p>
92+
</div>
93+
</section>
94+
);
95+
}
96+
97+
return (
98+
<section className="flex flew-row mb-4">
99+
<div className="relative">
100+
<div
101+
className="rounded-full bg-sdv-highlight top-0 left-0"
102+
style={{
103+
width: "49px",
104+
height: "49px",
105+
}}
106+
>
107+
<div
108+
className="overflow-hidden rounded-full absolute bottom-0 right-0"
109+
style={{
110+
width: "46px",
111+
height: "46px",
112+
}}
113+
>
114+
{post.primary_author.profile_image ? (
115+
<img
116+
width={46}
117+
height={46}
118+
className="block rounded-full relative z-10 object-cover h-full"
119+
src={post.primary_author.profile_image}
120+
alt={post.primary_author.name}
121+
/>
122+
) : (
123+
<img
124+
width={46}
125+
height={46}
126+
className="block rounded-full relative z-10 object-cover h-full"
127+
src="/blog/images/icons/avatar.svg"
128+
alt={post.primary_author.name}
129+
/>
130+
)}
131+
</div>
132+
</div>
133+
</div>
134+
<div className="pl-3 flex flex-col justify-center">
135+
<p className="font-bold text-xs">{post.primary_author.name}</p>
136+
<p className="font-light text-xs">{post.published_at_pretty}</p>
137+
</div>
138+
</section>
139+
);
140+
}

‎src/components/AuthorPost.js

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
import React from 'react'
22

3+
import config from '../utils/siteConfig'
4+
35
export default function AuthorPost({post}) {
46

57
const {authors} = post
68

79
if (typeof authors[1] === "object") {
810
return (
911
<div className="flex flex-start">
10-
{post.authors.map((item, idx) => {
12+
{post.authors.map((author, idx) => {
1113
return (
1214
<section className="flex flew-row mb-6 mr-4">
13-
<div className="relative">
15+
<a
16+
href={`${config.sitePath}/authors/${author.slug}`}
17+
className="relative inline-block hover:opacity-80"
18+
>
1419
<div
1520
className="rounded-full bg-sdv-highlight top-0 left-0"
1621
style={{
@@ -25,31 +30,31 @@ export default function AuthorPost({post}) {
2530
height: "46px",
2631
}}
2732
>
28-
{item.profile_image ? (
33+
{author.profile_image ? (
2934
<img
3035
width={46}
3136
height={46}
3237
className="block rounded-full relative z-10 object-cover h-full"
3338
src={
34-
item.profile_image
39+
author.profile_image
3540
}
36-
alt={item.name}
41+
alt={author.name}
3742
/>
3843
) : (
3944
<img
4045
width={46}
4146
height={46}
4247
className="block rounded-full relative z-10 object-cover h-full"
4348
src="/blog/images/icons/avatar.svg"
44-
alt={item.name}
49+
alt={author.name}
4550
/>
4651
)}
4752
</div>
4853
</div>
49-
</div>
54+
</a>
5055
<div className="text-xs px-4 flex flex-col justify-center">
51-
<p className="text-sm">
52-
<strong className="font-bold ">{item.name}</strong>
56+
<p className="text-sm font-bold">
57+
<a className="hover:text-sdv-secondary" href={`${config.sitePath}/authors/${author.slug}`}>{author.name}</a>
5358
</p>
5459
</div>
5560
</section>
@@ -60,8 +65,10 @@ export default function AuthorPost({post}) {
6065
}
6166

6267
return (
63-
<section className="flex flew-row mb-6">
64-
<div className="relative">
68+
<a
69+
href={`${config.sitePath}/authors/${post.primary_author.slug}`}
70+
className="flex flew-row mb-6 hover:text-sdv-secondary">
71+
<div className="relative hover:opacity-80">
6572
<div
6673
className="rounded-full bg-sdv-highlight top-0 left-0"
6774
style={{
@@ -100,10 +107,10 @@ export default function AuthorPost({post}) {
100107
</div>
101108
</div>
102109
<div className="text-xs px-4 flex flex-col justify-center">
103-
<p className="text-sm">
104-
<strong className="font-bold">{post.primary_author.name}</strong>
110+
<p className="text-sm font-bold">
111+
{post.primary_author.name}
105112
</p>
106113
</div>
107-
</section>
114+
</a>
108115
)
109116
}

‎src/components/FeaturedArticle.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
1010
export default function FeaturedArticle({ post, featuredImg }) {
1111
return (
1212
<>
13-
<Link to={post.slug} className="link-wrap flex flex-wrap rounded-10 relative w-full">
14-
<div
13+
<div className=" flex flex-wrap rounded-10 relative w-full">
14+
<a
15+
title={post.title}
16+
href={post.slug}
1517
className="w-full md:w-5/12 overflow-hidden
1618
rounded-tl-10 md:rounded-bl-10 rounded-tr-10 md:rounded-tr-none
1719
border border-t-stroke border-b-none md:border-b-stroke border-l-stroke border-r-stroke md:border-r-0
1820
bg-white justify-center relative z-10"
1921
>
2022
<div className="w-full feature-image relative h-full pb-pimg-sm md:pb-pimg-md"><img src={post.feature_image} className="absolute inset-0 md:w-full h-full object-cover object-center" alt={post.title}></img></div>
21-
</div>
23+
</a>
2224
<div
2325
className="bg-white w-full md:w-7/12 xl:pl-28
2426
lg:pl-20 md:pl-5 md:pr-5 lg:pr-10 pr-5 pl-5 md:py-10 py-5
@@ -29,7 +31,7 @@ export default function FeaturedArticle({ post, featuredImg }) {
2931
relative z-10"
3032
>
3133
<AuthorCard post={post} />
32-
<div>
34+
<a className="link-wrap" href={post.slug} title={post.title}>
3335
<h3 className="text-sdv-heading mb-4 leading-none">
3436
{post.title}{" "}
3537
</h3>
@@ -44,8 +46,8 @@ export default function FeaturedArticle({ post, featuredImg }) {
4446
<FontAwesomeIcon width="16" icon={faArrowRight} />
4547
</div>
4648
</p>
47-
</div>
49+
</a>
4850
</div>
49-
</Link> </>
51+
</div> </>
5052
);
5153
}

‎src/components/MoreArticles.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,17 @@ export default function MoreArticles() {
2323
name
2424
profile_image
2525
url
26+
slug
2627
}
2728
primary_author {
28-
name
29-
profile_image
29+
name
30+
slug
31+
bio
32+
# email
33+
profile_image
34+
twitter
35+
facebook
36+
website
3037
}
3138
meta_description
3239
meta_title

0 commit comments

Comments
 (0)