Skip to content

Commit eb5d7ea

Browse files
andydevsandydevs
committed
Grab work experience content from contentful
1 parent 49db52c commit eb5d7ea

File tree

4 files changed

+1276
-74
lines changed

4 files changed

+1276
-74
lines changed

‎gatsby-config.js‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,24 @@ module.exports = {
2424
DEV_SSR: false
2525
},
2626
plugins: [
27+
'gatsby-plugin-react-helmet',
28+
'gatsby-plugin-scroll-reveal',
29+
'gatsby-plugin-styled-components',
30+
{
31+
resolve: 'gatsby-plugin-manifest',
32+
options: {
33+
name: 'Andydevs',
34+
short_name: 'Andydevs',
35+
icon: 'assets/graphics/logo.svg'
36+
}
37+
},
38+
{
39+
resolve: 'gatsby-plugin-google-fonts',
40+
options: {
41+
fonts: ['rubik:300,300i,500,600,800'],
42+
display: 'swap'
43+
}
44+
},
2745
{
2846
resolve: 'gatsby-plugin-react-svg',
2947
options: {
@@ -32,6 +50,9 @@ module.exports = {
3250
}
3351
}
3452
},
53+
54+
'gatsby-transformer-sharp',
55+
'gatsby-plugin-image',
3556
{
3657
resolve: 'gatsby-plugin-sharp',
3758
options: {
@@ -42,34 +63,17 @@ module.exports = {
4263
}
4364
}
4465
},
45-
'gatsby-transformer-sharp',
46-
'gatsby-plugin-image',
47-
{
48-
resolve: 'gatsby-plugin-manifest',
49-
options: {
50-
name: 'Andydevs',
51-
short_name: 'Andydevs',
52-
icon: 'assets/graphics/logo.svg'
53-
}
54-
},
55-
{
56-
resolve: 'gatsby-plugin-google-fonts',
57-
options: {
58-
fonts: ['rubik:300,300i,500,600,800'],
59-
display: 'swap'
60-
}
61-
},
62-
'gatsby-plugin-styled-components',
63-
'gatsby-plugin-react-helmet',
64-
'gatsby-plugin-scroll-reveal',
65-
'gatsby-transformer-yaml',
66+
67+
6668
{
6769
resolve: 'gatsby-source-contentful',
6870
options: {
6971
spaceId: 'ki8v6ao5nutn',
7072
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
7173
}
7274
},
75+
76+
'gatsby-transformer-yaml',
7377
{
7478
resolve: 'gatsby-source-filesystem',
7579
options: {

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,13 @@
1818
"@fortawesome/free-brands-svg-icons": "^6.4.2",
1919
"@fortawesome/free-solid-svg-icons": "^6.4.2",
2020
"@fortawesome/react-fontawesome": "^0.2.0",
21+
"@mdx-js/mdx": "^3.0.1",
22+
"@mdx-js/react": "^3.0.1",
2123
"@tsparticles/engine": "^3.4.0",
2224
"@tsparticles/react": "^3.0.0",
2325
"@tsparticles/slim": "^3.4.0",
2426
"babel-plugin-styled-components": "^2.1.4",
27+
"date-fns": "^3.6.0",
2528
"gatsby": "^5.12.3",
2629
"gatsby-cli": "^5.12.0",
2730
"gatsby-plugin-google-fonts": "^1.0.1",
@@ -40,6 +43,7 @@
4043
"react": "^18.2.0",
4144
"react-dom": "^18.2.0",
4245
"react-helmet": "^6.1.0",
46+
"react-remark": "^2.1.0",
4347
"styled-components": "^6.0.7",
4448
"tsparticles-slim": "^2.12.0"
4549
},

‎src/sections/work.js‎

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react'
22
import { useStaticQuery, graphql } from 'gatsby'
3+
import { format } from 'date-fns'
34
import styled from 'styled-components'
45
import Section from '../components/section'
6+
import { Remark } from 'react-remark'
57

68
const Title = styled.h3`
79
font-weight: 600;
@@ -71,27 +73,19 @@ const WorkHighlight = styled.li`
7173

7274
export default function Work() {
7375
// Query
74-
const {
75-
allWorkYaml: { nodes: workunits }
76-
} = useStaticQuery(graphql`
76+
const work = useStaticQuery(graphql`
7777
query WorkQuery {
78-
allWorkYaml {
78+
allContentfulWorkExperience(sort: {endDate: DESC}) {
7979
nodes {
8080
id
81-
company
81+
companyName
8282
jobTitle
83-
timeline {
84-
current
85-
start {
86-
month
87-
year
88-
}
89-
end {
90-
month
91-
year
92-
}
83+
details {
84+
details
9385
}
94-
highlights
86+
startDate
87+
endDate
88+
currentlyWorking
9589
}
9690
}
9791
}
@@ -109,37 +103,41 @@ export default function Work() {
109103
</h1>
110104
<WorkTable>
111105
<tbody>
112-
{workunits.map(
113-
({ id, company, jobTitle, timeline, highlights }) => (
114-
<tr
115-
key={id}
116-
data-sal="slide-up"
117-
data-sal-duration="500"
118-
data-sal-easing="ease"
119-
>
120-
<WorkHeader>
121-
<Title>{company}</Title>
122-
<Subtitle>{jobTitle}</Subtitle>
123-
<Subtitle>
124-
{timeline.start.month}{' '}
125-
{timeline.start.year}
126-
&nbsp; &mdash; &nbsp;
127-
{timeline.current
128-
? 'Present'
129-
: `${timeline.end.month} ${timeline.end.year}`}
130-
</Subtitle>
131-
</WorkHeader>
132-
<WorkHighlights>
133-
<WorkHighlightsList>
134-
{highlights.map((highlight, index) => (
135-
<WorkHighlight key={index}>
136-
{highlight}
137-
</WorkHighlight>
138-
))}
139-
</WorkHighlightsList>
140-
</WorkHighlights>
141-
</tr>
142-
)
106+
{work.allContentfulWorkExperience.nodes.map(
107+
({ id, companyName, jobTitle, details, startDate, endDate, currentlyWorking }) => {
108+
let start = new Date(startDate)
109+
let end = endDate && new Date(endDate)
110+
let datefmt = 'MMMM yyyy'
111+
return (
112+
<tr
113+
key={id}
114+
data-sal="slide-up"
115+
data-sal-duration="500"
116+
data-sal-easing="ease"
117+
>
118+
<WorkHeader>
119+
<Title>{companyName}</Title>
120+
<Subtitle>{jobTitle}</Subtitle>
121+
<Subtitle>
122+
{format(start, datefmt)}
123+
&nbsp; &mdash; &nbsp;
124+
{currentlyWorking ? 'Present' : format(end, datefmt)}
125+
</Subtitle>
126+
</WorkHeader>
127+
<WorkHighlights>
128+
<Remark
129+
rehypeReactOptions={{
130+
components: {
131+
ul: (props) => <WorkHighlightsList {...props}/>,
132+
li: (props) => <WorkHighlight {...props}/>
133+
}
134+
}}>
135+
{details.details}
136+
</Remark>
137+
</WorkHighlights>
138+
</tr>
139+
)
140+
}
143141
)}
144142
</tbody>
145143
</WorkTable>

0 commit comments

Comments
 (0)