Skip to content

Commit 0c33ac4

Browse files
alexwilsonalexwilson
committed
feat: Refactor Gatsby link out of components
1 parent 6674220 commit 0c33ac4

File tree

6 files changed

+95
-81
lines changed

6 files changed

+95
-81
lines changed

‎components/legacy-components/src/article-card/article-card.js

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,45 @@
1-
import { Link } from "gatsby"
1+
import { Link } from "@reach/router"
22
import { format as formatDate } from 'date-fns'
33
import React from "react"
44
import ResponsiveImage from '../responsive-image'
55

6-
export default function articleCard({article, withBody = true, withImage = true, withDate = true}) {
6+
export default function articleCard({ article, linkImplementation = Link, withBody = true, withImage = true, withDate = true }) {
77

88
const date = new Date(article.date)
9+
const LinkImplementation = linkImplementation
910

1011
return (
1112
<div className="alex-card">
1213

1314
<div className="alex-card__content--container">
1415

1516
<div className="alex-card__title">
16-
<h3><Link to={ article.slug }>{ article.title }</Link></h3>
17+
<h3><LinkImplementation to={article.slug}>{article.title}</LinkImplementation></h3>
1718
</div>
1819

1920
{(withBody !== false) ?
2021
<div className="alex-card__abstract">
21-
<p>
22-
{ article.content.excerpt }
23-
</p>
24-
</div>
25-
:null}
22+
<p>
23+
{article.content.excerpt}
24+
</p>
25+
</div>
26+
: null}
2627

2728
{(withDate !== false) ?
2829
<div className="alex-card__timetamp">
2930
<span className="dateline">
30-
<time dateTime={date.toISOString()}>{ formatDate(date, "d MMM yyyy") }</time>
31+
<time dateTime={date.toISOString()}>{formatDate(date, "d MMM yyyy")}</time>
3132
</span>
3233
</div>
33-
:null}
34+
: null}
3435

3536
</div>
3637

3738
{(withImage !== false && article.image && article.image.thumbnail) ?
3839
<div className="alex-card__image">
39-
<ResponsiveImage src={ article.image.thumbnail } width={ 400 } />
40+
<ResponsiveImage src={article.image.thumbnail} width={400} />
4041
</div>
41-
:null}
42+
: null}
4243

4344
</div>
4445
)

‎components/legacy-components/src/article-card/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import "./article-card.scss";
22
import ArticleCard from "./article-card"
3-
export {ArticleCard}
3+
export { ArticleCard }
44
export default ArticleCard

‎components/legacy-components/src/header/header.js

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { Link } from '@reach/router'
22
import PropTypes from "prop-types"
3-
import React, {Component} from "react"
3+
import React, { Component } from "react"
44
import promiseImageLoader from 'promise-image-loader'
55
import fetch from "isomorphic-fetch"
66

77
const NavItemFactory = (linkImplementation) => {
88
const LinkImplementation = (linkImplementation) ? linkImplementation : Link;
9-
const NavItem = ({url, rel, active, children}) => {
9+
const NavItem = ({ url, rel, active, children }) => {
1010
const classList = ["alex-header__nav-item"]
1111
if (active) classList.push("alex-header__nav-item--active")
1212
return (
13-
<li className={classList.join(' ')}>
14-
<LinkImplementation rel={rel} to={url}>{children}</LinkImplementation>
15-
</li>
13+
<li className={classList.join(' ')}>
14+
<LinkImplementation rel={rel} to={url}>{children}</LinkImplementation>
15+
</li>
1616
);
1717
}
1818

@@ -23,7 +23,7 @@ const NavSpacer = () => (
2323
<li className="alex-header__nav-item alex-header__nav-item--spacer"></li>
2424
)
2525

26-
const Icon = ({src, title}) => (
26+
const Icon = ({ src, title }) => (
2727
<img
2828
src={src}
2929
// onerror={`"this.src='https://imagecdn.app/v2/image/${encodeURIComponent(icon)}?format=png&width=90'"`}
@@ -51,15 +51,15 @@ class HeaderImage extends Component {
5151
.then(() => this.setState({
5252
preloadedImage: actualSrc
5353
}))
54-
.catch(() => {})
54+
.catch(() => { })
5555
}
5656

5757
imageService(url, params = []) {
5858
return `https://imagecdn.app/v2/image/${encodeURIComponent(url)}?${params.join('&')}`
5959
}
6060

6161
render() {
62-
const {src} = this.props
62+
const { src } = this.props
6363
return <div className={`alex-header-image`}>
6464
<picture className={`alex-header-image--container`}>
6565
<img
@@ -71,14 +71,14 @@ class HeaderImage extends Component {
7171
'height=60',
7272
'quality=low',
7373
'format=jpg'
74-
]): null} />
74+
]) : null} />
7575
<img
7676
alt="Header"
7777
className={`alex-header-image__main`}
7878
src={this.state.preloadedImage}
7979
style={{
8080
opacity: this.props.blur !== true && this.state.preloadedImage !== undefined ? 1 : 0
81-
}}/>
81+
}} />
8282
</picture>
8383
</div>
8484
}
@@ -111,7 +111,7 @@ class Header extends Component {
111111
try {
112112
const response = await fetch('https://source.unsplash.com/collection/33719360/0x0')
113113
if (response.ok && response.url) {
114-
const {origin, pathname} = new URL(response.url)
114+
const { origin, pathname } = new URL(response.url)
115115
this.setState({
116116
backgroundImage: `${origin}${pathname}`
117117
})
@@ -121,7 +121,7 @@ class Header extends Component {
121121
}
122122

123123
render() {
124-
const {pathname} = this.props.location
124+
const { pathname } = this.props.location
125125
const name = this.props.name ? this.props.name : "Alex Wilson"
126126
const intro = this.props.intro ? this.props.intro : "On products, engineering & everything in-between."
127127

@@ -133,53 +133,56 @@ class Header extends Component {
133133
<div className="alex-header--container">
134134

135135
<div className="alex-header__about">
136-
<h1 className="alex-header__name">{name}</h1>
137-
{intro && <span className="alex-header__intro">{intro}</span>}
136+
<h1 className="alex-header__name">{name}</h1>
137+
{intro && <span className="alex-header__intro">{intro}</span>}
138138
</div>
139139

140140

141141
<nav ref={this.headerNav} class="alex-header__nav--container">
142-
<a
143-
className="alex-header__menu-button" role="button"
144-
aria-pressed={this.state.navigationExpanded}
145-
onClick={() => {this.setState({
146-
navigationExpanded: !this.state.navigationExpanded
147-
})
148-
}}
149-
>
150-
<span></span>
151-
<span></span>
152-
<span></span>
153-
</a>
154-
<ul className="alex-header__nav" id="menu" aria-expanded={this.state.navigationExpanded}>
155-
<this.navItem url="/" active={pathname === "/"}>Home</this.navItem>
156-
<this.navItem url="/about-me/" active={pathname.startsWith("/about-me/")}>About Me</this.navItem>
157-
<this.navItem url="/blog/" active={pathname.startsWith("/blog/")||pathname.startsWith("/content/")}>Writing</this.navItem>
158-
<this.navItem url="/talks/" active={pathname.startsWith("/talks/")}>Speaking</this.navItem>
159-
<this.navItem url="/consultancy/" active={pathname.startsWith("/consultancy/")}>Hire Me</this.navItem>
160-
161-
<NavSpacer />
162-
163-
<this.navItem url="https://mastodon.social/@alexwilson" rel='me'><Icon src="/svg/mastodon.svg" title="Mastodon" /></this.navItem>
164-
<this.navItem url="https://twitter.com/alexwilsonv1" rel='me'><Icon src="/svg/twitter.svg" title="Twitter" /></this.navItem>
165-
<this.navItem url="https://www.linkedin.com/in/alex-/" rel='me'><Icon src="/svg/linkedin.svg" title="LinkedIn" /></this.navItem>
166-
<this.navItem url="https://github.com/alexwilson" rel='me'><Icon src="/svg/github.svg" title="Github" /></this.navItem>
167-
</ul>
142+
<a
143+
className="alex-header__menu-button" role="button"
144+
aria-pressed={this.state.navigationExpanded}
145+
onClick={() => {
146+
this.setState({
147+
navigationExpanded: !this.state.navigationExpanded
148+
})
149+
}}
150+
>
151+
<span></span>
152+
<span></span>
153+
<span></span>
154+
</a>
155+
<ul className="alex-header__nav" id="menu" aria-expanded={this.state.navigationExpanded}>
156+
<this.navItem url="/" active={pathname === "/"}>Home</this.navItem>
157+
<this.navItem url="/about-me/" active={pathname.startsWith("/about-me/")}>About Me</this.navItem>
158+
<this.navItem url="/blog/" active={pathname.startsWith("/blog/") || pathname.startsWith("/content/")}>Writing</this.navItem>
159+
<this.navItem url="/talks/" active={pathname.startsWith("/talks/")}>Speaking</this.navItem>
160+
<this.navItem url="/consultancy/" active={pathname.startsWith("/consultancy/")}>Hire Me</this.navItem>
161+
162+
<NavSpacer />
163+
164+
<this.navItem url="https://mastodon.social/@alexwilson" rel='me'><Icon src="/svg/mastodon.svg" title="Mastodon" /></this.navItem>
165+
<this.navItem url="https://twitter.com/alexwilsonv1" rel='me'><Icon src="/svg/twitter.svg" title="Twitter" /></this.navItem>
166+
<this.navItem url="https://www.linkedin.com/in/alex-/" rel='me'><Icon src="/svg/linkedin.svg" title="LinkedIn" /></this.navItem>
167+
<this.navItem url="https://github.com/alexwilson" rel='me'><Icon src="/svg/github.svg" title="Github" /></this.navItem>
168+
</ul>
168169
</nav>
169170

170-
</div>
171-
</header>)
171+
</div>
172+
</header>)
172173
}
173174
}
174175

175176
Header.propTypes = {
176177
siteTitle: PropTypes.string,
177178
image: PropTypes.string,
179+
location: PropTypes.object
178180
}
179181

180182
Header.defaultProps = {
181183
siteTitle: `Alex Wilson`,
182184
image: null,
185+
location: { pathname: "/" }
183186
}
184187

185188
export default Header

‎services/personal-website/src/components/article-card.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import { ArticleCard } from '@alexwilson/legacy-components/src/article-card';
3+
import { Link } from 'gatsby';
4+
5+
export default (props) => <ArticleCard linkImplementation={Link} {...props} />

‎services/personal-website/src/components/related-articles.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import { useStaticQuery, graphql } from "gatsby"
3-
import ArticleCard from "@alexwilson/legacy-components/src/article-card"
3+
import ArticleCard from "./article-card"
44

5-
export default ({article: currentArticle}) => {
5+
export default ({ article: currentArticle }) => {
66
const data = useStaticQuery(graphql`
77
query RelatedArticles {
88
posts: allContent(
@@ -38,7 +38,7 @@ export default ({article: currentArticle}) => {
3838
if (article.contentId === currentArticle.contentId) continue;
3939
if (relatedArticles.size >= maxArticles) break;
4040

41-
const isWeeknote = (article.topics.filter(({topic}) => topic == "weeknotes").length > 0)
41+
const isWeeknote = (article.topics.filter(({ topic }) => topic == "weeknotes").length > 0)
4242

4343
// Hack to reduce relevance of weeknotes.
4444
if (granularity >= 1 && isWeeknote) {
@@ -65,7 +65,7 @@ export default ({article: currentArticle}) => {
6565
<>
6666
{Array.from(relatedArticles.values()).map(
6767
(article) => <ArticleCard key={article.contentId} article={article} withBody={false} withDate={false}
68-
/>)}
68+
/>)}
6969
</>
7070
)
7171
}

‎services/personal-website/src/pages/index.js

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
import React from "react"
22
import { graphql } from 'gatsby'
33

4-
import ArticleCard from "@alexwilson/legacy-components/src/article-card"
4+
import ArticleCard from "../components/article-card"
55
import Layout from "../components/layout"
66
import SEO from "../components/seo"
77

88
const IndexPage = ({ data, location }) => (
99
<Layout location={location}>
10-
<SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
10+
<SEO title="Home" />
1111
<div className="alex-home">
12-
<section className="alex-home__section">
13-
</section>
14-
<section className="alex-home__section">
15-
<h2><a className="heading" href="/blog/">Latest Writing</a></h2>
16-
<div className="alex-home__tilestack">
17-
{data.allButWeeknotes.nodes.map((node) =>
18-
<div key={node.contentId} className="alex-home__tilestack-item">
19-
<ArticleCard article={node} withImage={false} withDate={false} />
20-
</div>
21-
)}
12+
<section className="alex-home__section">
13+
</section>
14+
<section className="alex-home__section">
15+
<h2><a className="heading" href="/blog/">Latest Writing</a></h2>
16+
<div className="alex-home__tilestack">
17+
{data.allButWeeknotes.nodes.map((node) =>
18+
<div key={node.contentId} className="alex-home__tilestack-item">
19+
<ArticleCard article={node} withImage={false} withDate={false} />
2220
</div>
23-
</section>
24-
<section className="alex-home__section">
25-
<h2><a className="heading" href="/topic/weeknotes">Latest Weeknotes</a></h2>
26-
<div className="alex-home__tilestack">
27-
{data.onlyWeeknotes.nodes.map((node) =>
28-
<div key={node.contentId} className="alex-home__tilestack-item">
29-
<ArticleCard article={node} withImage={false} withDate={false} />
30-
</div>
31-
)}
21+
)}
22+
</div>
23+
</section>
24+
<section className="alex-home__section">
25+
<h2><a className="heading" href="/topic/weeknotes">Latest Weeknotes</a></h2>
26+
<div className="alex-home__tilestack">
27+
{data.onlyWeeknotes.nodes.map((node) =>
28+
<div key={node.contentId} className="alex-home__tilestack-item">
29+
<ArticleCard article={node} withImage={false} withDate={false} />
3230
</div>
33-
</section>
31+
)}
32+
</div>
33+
</section>
3434
</div>
3535
</Layout>
3636
)
@@ -71,6 +71,11 @@ export const query = graphql`
7171
}
7272
}
7373
}
74+
site {
75+
siteMetadata {
76+
siteUrl
77+
}
78+
}
7479
}
7580
7681
`

0 commit comments

Comments
 (0)