Skip to content

Commit 25c2969

Browse files
e-schneide-schneid
authored
refactor: create a consolidated link component (#2070)
1 parent 84032e6 commit 25c2969

10 files changed

Lines changed: 145 additions & 121 deletions

File tree

‎packages/website/components/blog/cards.js‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Button from '../button'
2-
import Link from 'next/link'
32
import React from 'react'
43
import Tags from '../tags'
54
import countly from '../../lib/countly'
5+
import Link from '../link'
66
import Img from '../cloudflareImage'
77

88
// custom styles from /styles/blog.css
@@ -16,33 +16,34 @@ import Img from '../cloudflareImage'
1616
*/
1717

1818
export const Card = ({ post }) => (
19-
<Link href={`/blog/post/${post.slug}`}>
20-
<a className="bg-white justify-self-center w-card hologram card right interactive cursor-pointer">
21-
<Img
22-
src={post.thumbnail}
23-
alt={`Banner for ${post.title}`}
24-
className="object-cover object-center w-full card-thumb aspect-video"
25-
/>
26-
<div className="p-5 flex flex-col flex-auto">
27-
<div className="mb-2">{post.tags && <Tags tags={post.tags} />}</div>
28-
<div className="overflow-hidden mb-2">
29-
<h1 className="chicagoflf text-xl" title={post.title}>
30-
{post.title}
31-
</h1>
32-
</div>
33-
<p className="line-clamp-2 mb-2 text-base" title={post.description}>
34-
{post.description}
35-
</p>
36-
<div className="blog-card-meta">
37-
<span className="darker-gray text-sm mr-2 block sm:inline-block">
38-
{post.author}
39-
</span>
40-
<span className="darker-gray text-sm block sm:inline-block">
41-
{post.date}
42-
</span>
43-
</div>
19+
<Link
20+
href={`/blog/post/${post.slug}`}
21+
className="bg-white justify-self-center w-card hologram card right interactive cursor-pointer"
22+
>
23+
<Img
24+
src={post.thumbnail}
25+
alt={`Banner for ${post.title}`}
26+
className="object-cover object-center w-full card-thumb aspect-video"
27+
/>
28+
<div className="p-5 flex flex-col flex-auto">
29+
<div className="mb-2">{post.tags && <Tags tags={post.tags} />}</div>
30+
<div className="overflow-hidden mb-2">
31+
<h1 className="chicagoflf text-xl" title={post.title}>
32+
{post.title}
33+
</h1>
4434
</div>
45-
</a>
35+
<p className="line-clamp-2 mb-2 text-base" title={post.description}>
36+
{post.description}
37+
</p>
38+
<div className="blog-card-meta">
39+
<span className="darker-gray text-sm mr-2 block sm:inline-block">
40+
{post.author}
41+
</span>
42+
<span className="darker-gray text-sm block sm:inline-block">
43+
{post.date}
44+
</span>
45+
</div>
46+
</div>
4647
</Link>
4748
)
4849

‎packages/website/components/button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback } from 'react'
22

3-
import Link from 'next/link'
3+
import Link from './link'
44
import clsx from 'clsx'
55
import countly from '../lib/countly'
66

‎packages/website/components/footer.js‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback } from 'react'
2-
import Link from 'next/link'
2+
import Link from './link'
33
import Discord from '../icons/discord'
44
import Twitter from '../icons/twitter'
55
import Github from '../icons/github'
@@ -69,35 +69,32 @@ export default function Footer() {
6969
</span>
7070
<Dot />
7171
<span className="block lg:inline-block my-4">
72-
<Link href="/terms">
73-
<a
74-
className="nspink no-underline underline-hover align-middle"
75-
onClick={onLinkClick}
76-
>
77-
Terms of Service
78-
</a>
72+
<Link
73+
className="nspink no-underline underline-hover align-middle"
74+
onClick={onLinkClick}
75+
href="/terms"
76+
>
77+
Terms of Service
7978
</Link>
8079
</span>
8180
<Dot />
8281
<span className="block lg:inline-block my-4">
83-
<Link href="/faq">
84-
<a
85-
className="nspink no-underline underline-hover align-middle"
86-
onClick={onLinkClick}
87-
>
88-
FAQ
89-
</a>
82+
<Link
83+
href="/faq"
84+
className="nspink no-underline underline-hover align-middle"
85+
onClick={onLinkClick}
86+
>
87+
FAQ
9088
</Link>
9189
</span>
9290
<Dot />
9391
<span className="block lg:inline-block my-4">
94-
<Link href="/stats">
95-
<a
96-
className="nspink no-underline underline-hover align-middle"
97-
onClick={onLinkClick}
98-
>
99-
Stats
100-
</a>
92+
<Link
93+
href="/stats"
94+
className="nspink no-underline underline-hover align-middle"
95+
onClick={onLinkClick}
96+
>
97+
Stats
10198
</Link>
10299
</span>
103100
<Dot />

‎packages/website/components/link.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import Link from 'next/link'
3+
4+
/**
5+
* @param {Object} props
6+
* @param {object | string} props.href
7+
* @param {string} [props.className]
8+
* @param {number} [props.tabIndex]
9+
* @param {string} [props.id]
10+
* @param {React.MouseEventHandler} [props.onClick]
11+
* @param {React.ReactNode | string} props.children
12+
* @returns {JSX.Element}
13+
*/
14+
const WrappedLink = ({ tabIndex = 0, href = '', children, ...otherProps }) => (
15+
<Link href={href} {...otherProps}>
16+
<a
17+
href="replace"
18+
{...otherProps}
19+
tabIndex={tabIndex}
20+
onClick={otherProps.onClick}
21+
>
22+
{children}
23+
</a>
24+
</Link>
25+
)
26+
27+
export default WrappedLink

‎packages/website/components/navbar.js‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useCallback, useMemo, useRef, useState } from 'react'
44
import Button from './button.js'
55
import Cross from '../icons/cross'
66
import Hamburger from '../icons/hamburger'
7-
import Link from 'next/link'
7+
import Link from './link'
88
import clsx from 'clsx'
99
import countly from '../lib/countly'
1010
import { getMagic } from '../lib/magic.js'
@@ -153,13 +153,12 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
153153
<Hamburger className="w-4 m2" aria-label="Toggle Navbar" />
154154
</Button>
155155
</div>
156-
<Link href={{ pathname: '/', query: version ? { version } : null }}>
157-
<a
158-
className="nav-logo-link flex no-underline align-middle"
159-
onClick={onLinkClick}
160-
>
161-
<Logo dark={logo.isDark} />
162-
</a>
156+
<Link
157+
className="nav-logo-link flex no-underline align-middle"
158+
href={{ pathname: '/', query: version ? { version } : null }}
159+
onClick={onLinkClick}
160+
>
161+
<Logo dark={logo.isDark} />
163162
</Link>
164163
<div className="flex items-center">
165164
<div className="desktop-nav-items">
@@ -170,17 +169,16 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
170169
key={`nav-link-${index}`}
171170
onClick={item.onClick}
172171
>
173-
<Link href={item.link || ''}>
174-
<a
175-
key={item.name}
176-
className={clsx(
177-
'text-xl text-black no-underline underline-hover align-middle',
178-
{ mr4: index === ITEMS.length - 1 }
179-
)}
180-
onClick={item.tracking ? item.tracking : onLinkClick}
181-
>
182-
{item.name}
183-
</a>
172+
<Link
173+
href={item.link || ''}
174+
key={item.name}
175+
className={clsx(
176+
'text-xl text-black no-underline underline-hover align-middle',
177+
{ mr4: index === ITEMS.length - 1 }
178+
)}
179+
onClick={item.tracking ? item.tracking : onLinkClick}
180+
>
181+
{item.name}
184182
</Link>
185183
{index !== ITEMS.length - 2 && (
186184
<span className="mx-2 align-middle font-bold text-black">
@@ -231,10 +229,11 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
231229
aria-hidden={isMenuOpen}
232230
>
233231
<div className="flex flex-col items-center text-center mt-8">
234-
<Link href="/">
235-
<a className="mobile-nav-menu-logo flex no-underline align-middle">
236-
<Logo dark={logo.isDark} />
237-
</a>
232+
<Link
233+
href="/"
234+
className="mobile-nav-menu-logo flex no-underline align-middle"
235+
>
236+
<Logo dark={logo.isDark} />
238237
</Link>
239238
</div>
240239
<div className="mobile-nav-items text-center flex flex-col items-center justify-center flex-auto overflow-y-scroll">
@@ -245,16 +244,15 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
245244
key={`menu-nav-link-${index}`}
246245
onClick={item.onClick}
247246
>
248-
<Link href={item.link || ''}>
249-
<a
250-
className={clsx(
251-
'mobile-nav-link align-middle chicagoflf',
252-
logo.isDark ? 'black' : 'white'
253-
)}
254-
onClick={item.tracking ? item.tracking : onMobileLinkClick}
255-
>
256-
{item.name}
257-
</a>
247+
<Link
248+
href={item.link || ''}
249+
className={clsx(
250+
'mobile-nav-link align-middle chicagoflf',
251+
logo.isDark ? 'black' : 'white'
252+
)}
253+
onClick={item.tracking ? item.tracking : onMobileLinkClick}
254+
>
255+
{item.name}
258256
</Link>
259257
</div>
260258
))}

‎packages/website/lib/faqContent.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import InlineCode from '../components/inline-code'
2-
import Link from 'next/link'
2+
import Link from '../components/link'
33

44
const faqContent = {
55
longTermVision: (
@@ -40,8 +40,8 @@ const faqContent = {
4040
Data will be available in IPFS indefinitely as well as stored in
4141
long-term, redundant Filecoin storage deals with the global community of
4242
miners. See the{' '}
43-
<Link href="/terms">
44-
<a className="text-white">Terms of Service</a>
43+
<Link href="/terms" className="text-white">
44+
Terms of Service
4545
</Link>{' '}
4646
for details.
4747
</p>
@@ -52,8 +52,8 @@ const faqContent = {
5252
per individual upload! Each upload can include a single file or a
5353
directory of files. (If you are using the HTTP API, you&apos;ll need to do
5454
some manual splitting for files over 100MB. See the{' '}
55-
<Link href="/api-docs">
56-
<a className="text-white">HTTP API docs</a>
55+
<Link href="/api-docs" className="text-white">
56+
HTTP API docs
5757
</Link>{' '}
5858
for details.) Currently, the rate limit will be triggered if the API
5959
receives more than 30 requests using the same API key within a 10 second
@@ -159,8 +159,8 @@ const faqContent = {
159159
<p className="lh-copy text-white mb4">
160160
<strong>Try updating to Node version 14 or later</strong>. We no longer
161161
offer support for versions prior to v14 (
162-
<Link href="/faq/#why-no-support-for-node-pre-14">
163-
<a className="text-white">see here</a>
162+
<Link href="/faq/#why-no-support-for-node-pre-14" className="text-white">
163+
see here
164164
</Link>
165165
). This error can occur when attempting to use{' '}
166166
<a
@@ -179,8 +179,8 @@ const faqContent = {
179179
<strong>Try updating to Node version 14 or later</strong>. This error can
180180
occur because of having an old version of Node. We no longer offer support
181181
for Node versions prior to v14 (
182-
<Link href="/faq/#why-no-support-for-node-pre-14">
183-
<a className="text-white">see here</a>
182+
<Link href="/faq/#why-no-support-for-node-pre-14" className="text-white">
183+
see here
184184
</Link>
185185
). With Node v14 or greater, you should be able to use{' '}
186186
<InlineCode>import</InlineCode> if you are using ESM Modules, otherwise

‎packages/website/pages/faq.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Link from 'next/link'
1+
import Link from '../components/link'
22
import HashLink from '../components/hashlink.js'
33
import InlineCode from '../components/inline-code.js'
44
import faqContent from '../lib/faqContent'
@@ -93,10 +93,12 @@ const faqs = [
9393
const TOC = () => (
9494
<div className="flex flex-col py-1 max-w-3xl">
9595
{faqs.map((faq, index) => (
96-
<Link href={`/faq/#${hashify(faq.question)}`} key={`faq-item${index}`}>
97-
<a className="text-white my-2 underline">
98-
{faq.error ? `Why am I seeing: ${faq.error}` : faq.question}
99-
</a>
96+
<Link
97+
href={`/faq/#${hashify(faq.question)}`}
98+
key={`faq-item${index}`}
99+
className="text-white my-2 underline"
100+
>
101+
{faq.error ? `Why am I seeing: ${faq.error}` : faq.question}
100102
</Link>
101103
))}
102104
</div>

‎packages/website/pages/index.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import countly from '../lib/countly.js'
44
import Hero from '../components/hero.js'
55
import HashLink from '../components/hashlink.js'
66
import Step from '../components/step.js'
7-
import Link from 'next/link'
7+
import Link from '../components/link'
88
import Button from '../components/button'
99
import { TrustedBy } from '../components/trustedByLogos'
1010

@@ -332,14 +332,12 @@ function GettingStarted() {
332332
<li>
333333
<Step>1</Step>
334334
<p className="chicagoflf text-base sm:text-xl mx-auto mb-8 leading-normal">
335-
<Link href="/login">
336-
<a className="nsnavy" onClick={onClickHandler}>
337-
Create an NFT.Storage account
338-
</a>
335+
<Link href="/login" className="nsnavy" onClick={onClickHandler}>
336+
Create an NFT.Storage account
339337
</Link>{' '}
340338
and start uploading your files to IPFS. Or download and use our{' '}
341-
<Link href="/docs/how-to/nftup">
342-
<a className="nsnavy">NFTUp application</a>
339+
<Link href="/docs/how-to/nftup" className="nsnavy">
340+
NFTUp application
343341
</Link>
344342
{'. '}
345343
Your data will be accessible on the IPFS network where it is

0 commit comments

Comments
 (0)