Skip to content

Commit 23d7799

Browse files
matheussmatheuss
authored
Upgrade to Next.js 13 & move from yarn to npm (#285)
* Remove package-lock.json * Upgrade to latest nextjs and move to pnpm * Statically generate the image metadata * Fix typo * Add missing file * Fix var name & find * Run nextjs new-link codemod
1 parent bfb944d commit 23d7799

File tree

12 files changed

+2147
-16504
lines changed

12 files changed

+2147
-16504
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.DS_Store
22
.next
33
node_modules
4-
.vercel
4+
.vercel
5+
plugin-images-metadata.json

‎components/blog/with-post.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ const Link = ({ href, children }) => {
3030

3131
if (IS_INTERNAL)
3232
return (
33-
<NextLink href={href}>
34-
<a className={styles.link}>{children}</a>
33+
<NextLink href={href} className={styles.link}>
34+
{children}
3535
</NextLink>
36-
)
36+
);
3737

3838
return (
3939
<a

‎components/header/index.js

+63-65
Original file line numberDiff line numberDiff line change
@@ -9,81 +9,79 @@ const ActiveLink = ({ href, children }) => {
99
const { pathname } = useRouter()
1010

1111
return (
12-
<Link href={href}>
13-
<a
14-
className={`${styles.link} ${
15-
pathname.split('/')[1] === href.split('/')[1] ? styles.active : ''
16-
}`}
17-
>
18-
{children}
19-
</a>
20-
</Link>
21-
)
12+
(<Link
13+
href={href}
14+
className={`${styles.link} ${
15+
pathname.split('/')[1] === href.split('/')[1] ? styles.active : ''
16+
}`}>
17+
18+
{children}
19+
20+
</Link>)
21+
);
2222
}
2323

2424
export default () => {
2525
const [mobileNavShown, setMobileNavShown] = useState(false)
2626

2727
const toggle = () => setMobileNavShown(!mobileNavShown)
2828

29-
return (
30-
<>
31-
<header className={styles.header}>
32-
<Link href="/">
33-
<a className={styles.logo} aria-label="Hyper logo">
34-
<Logo width={31} height={23} />
35-
</a>
36-
</Link>
29+
return <>
30+
<header className={styles.header}>
31+
<Link href="/" className={styles.logo} aria-label="Hyper logo">
3732

38-
<nav className={styles.desktopNav}>
39-
<ActiveLink href="/plugins">Plugins</ActiveLink>
40-
<ActiveLink href="/themes">Themes</ActiveLink>
41-
<a
42-
target="_blank"
43-
rel="noopener noreferrer"
44-
href="https://github.com/vercel/hyper"
45-
className={styles.link}
46-
>
47-
GitHub
48-
</a>
49-
<ActiveLink href="/#installation">Download</ActiveLink>
50-
<ActiveLink href="/blog">Blog</ActiveLink>
51-
</nav>
33+
<Logo width={31} height={23} />
5234

53-
<div className={styles.rightNav}>
54-
<SearchBar />
55-
<a
56-
href="https://vercel.com"
57-
target="_blank"
58-
rel="noopener noreferrer"
59-
className={styles.vercel}
60-
>
61-
▲
62-
</a>
63-
</div>
35+
</Link>
6436

65-
<span className={styles.toggle} onClick={toggle}>
66-
<Arrow height={14} width={26} />
67-
</span>
68-
</header>
37+
<nav className={styles.desktopNav}>
38+
<ActiveLink href="/plugins">Plugins</ActiveLink>
39+
<ActiveLink href="/themes">Themes</ActiveLink>
40+
<a
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
href="https://github.com/vercel/hyper"
44+
className={styles.link}
45+
>
46+
GitHub
47+
</a>
48+
<ActiveLink href="/#installation">Download</ActiveLink>
49+
<ActiveLink href="/blog">Blog</ActiveLink>
50+
</nav>
6951

70-
<nav
71-
className={`${styles.mobileNav} ${mobileNavShown ? styles.active : ''}`}
72-
>
73-
<Link href="/plugins">
74-
<a>Plugins</a>
75-
</Link>
76-
<Link href="/themes">
77-
<a>Themes</a>
78-
</Link>
79-
<Link href="/store/submit">
80-
<a>Submit</a>
81-
</Link>
82-
<Link href="/blog">
83-
<a>Blog</a>
84-
</Link>
52+
<div className={styles.rightNav}>
8553
<SearchBar />
86-
</nav>
87-
</>
88-
)
54+
<a
55+
href="https://vercel.com"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
className={styles.vercel}
59+
>
60+
▲
61+
</a>
62+
</div>
63+
64+
<span className={styles.toggle} onClick={toggle}>
65+
<Arrow height={14} width={26} />
66+
</span>
67+
</header>
68+
69+
<nav
70+
className={`${styles.mobileNav} ${mobileNavShown ? styles.active : ''}`}
71+
>
72+
<Link href="/plugins">
73+
Plugins
74+
</Link>
75+
<Link href="/themes">
76+
Themes
77+
</Link>
78+
<Link href="/store/submit">
79+
Submit
80+
</Link>
81+
<Link href="/blog">
82+
Blog
83+
</Link>
84+
<SearchBar />
85+
</nav>
86+
</>;
8987
}

‎components/plugin-info/index.js

+56-58
Original file line numberDiff line numberDiff line change
@@ -19,66 +19,64 @@ export default ({ npmData: plugin, variant }) => {
1919
setModalOpen(true)
2020
}
2121

22-
return (
23-
<>
24-
<InstallModal
25-
pluginName={plugin.collected.metadata.name}
26-
open={modalOpen}
27-
onClose={() => setModalOpen(false)}
28-
/>
29-
<div className={styles.root}>
30-
<>
31-
<div className={`${styles.author} ${styles.borderFollowed}`}>
32-
<Gravatar
33-
className={styles.avatar}
34-
email={plugin.collected.metadata.publisher.email}
35-
/>
36-
<span>{plugin.collected.metadata.publisher.username}</span>
37-
</div>
38-
<span className={`${styles.downloads} ${styles.borderFollowed}`}>
39-
{plugin.collected.npm.downloads[2].count > 0 ? (
40-
<>
41-
{plugin.collected.npm.downloads[2].count.toLocaleString()}{' '}
42-
downloads in the last month
43-
</>
44-
) : (
45-
<>Brand new!</>
46-
)}
47-
</span>
48-
<a
49-
href={plugin.collected.metadata.links.repository}
50-
target="_blank"
51-
rel="noopener noreferrer"
52-
className={styles.github}
53-
>
54-
<GitHub size={14} />
55-
</a>
56-
</>
57-
{variant === 'description' ? (
58-
<Link
59-
href="/store/[name]/source"
60-
as={`/store/${plugin.collected.metadata.name}/source`}
61-
>
62-
<a className={styles.link}>view source code</a>
63-
</Link>
64-
) : (
65-
<Link
66-
href="/store/[name]"
67-
as={`/store/${plugin.collected.metadata.name}`}
68-
>
69-
<a className={styles.link}>view description</a>
70-
</Link>
71-
)}
72-
<span className={styles.version}>
73-
Version {plugin.collected.metadata.version}
22+
return <>
23+
<InstallModal
24+
pluginName={plugin.collected.metadata.name}
25+
open={modalOpen}
26+
onClose={() => setModalOpen(false)}
27+
/>
28+
<div className={styles.root}>
29+
<>
30+
<div className={`${styles.author} ${styles.borderFollowed}`}>
31+
<Gravatar
32+
className={styles.avatar}
33+
email={plugin.collected.metadata.publisher.email}
34+
/>
35+
<span>{plugin.collected.metadata.publisher.username}</span>
36+
</div>
37+
<span className={`${styles.downloads} ${styles.borderFollowed}`}>
38+
{plugin.collected.npm.downloads[2].count > 0 ? (
39+
<>
40+
{plugin.collected.npm.downloads[2].count.toLocaleString()}{' '}
41+
downloads in the last month
42+
</>
43+
) : (
44+
<>Brand new!</>
45+
)}
7446
</span>
7547
<a
76-
className={`${styles.install} ${styles.loaded}`}
77-
onClick={handleOpenModal}
48+
href={plugin.collected.metadata.links.repository}
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
className={styles.github}
7852
>
79-
Install
53+
<GitHub size={14} />
8054
</a>
81-
</div>
82-
</>
83-
)
55+
</>
56+
{variant === 'description' ? (
57+
<Link
58+
href="/store/[name]/source"
59+
as={`/store/${plugin.collected.metadata.name}/source`}
60+
className={styles.link}>
61+
view source code
62+
</Link>
63+
) : (
64+
<Link
65+
href="/store/[name]"
66+
as={`/store/${plugin.collected.metadata.name}`}
67+
className={styles.link}>
68+
view description
69+
</Link>
70+
)}
71+
<span className={styles.version}>
72+
Version {plugin.collected.metadata.version}
73+
</span>
74+
<a
75+
className={`${styles.install} ${styles.loaded}`}
76+
onClick={handleOpenModal}
77+
>
78+
Install
79+
</a>
80+
</div>
81+
</>;
8482
}

‎components/plugin-info/install-modal.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@ export default ({ pluginName, open, onClose }) => {
3939
<p>Run the following command in Hyper:</p>
4040
<pre>hyper i {pluginName}</pre>
4141
<span className={styles.buttons}>
42-
<Link href="/store/security-notice">
43-
<a className={styles.security}>Security Notice</a>
42+
<Link href="/store/security-notice" className={styles.security}>
43+
Security Notice
4444
</Link>
4545
<button onClick={handleClick} disabled={copied}>
4646
{copied ? 'Copied' : 'Copy'}
4747
</button>
4848
</span>
4949
</div>
5050
</div>
51-
)
51+
);
5252
}

‎components/plugin-list/index.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,31 @@ export default ({ query, plugins, filteredBy }) =>
66
filteredBy === 'featured' ? (
77
<div className={styles.featuredWrapper}>
88
{plugins.map((plugin) => (
9-
<Link
9+
(<Link
1010
key={plugin.name}
1111
href="/store/[name]"
1212
as={`/store/${plugin.name}`}
13-
>
14-
<a className={styles.featuredElemContent}>
15-
<Plugin {...plugin} query={query} featured={true} />
16-
</a>
17-
</Link>
13+
className={styles.featuredElemContent}>
14+
15+
<Plugin {...plugin} query={query} featured={true} />
16+
17+
</Link>)
1818
))}
1919
</div>
2020
) : (
2121
<div className={styles.listWrapper}>
2222
{plugins.map((plugin) => (
23-
<Link
23+
(<Link
2424
key={plugin.name}
2525
href="/store/[name]"
2626
as={`/store/${plugin.name}`}
27-
>
28-
<a className={styles.listElemContainer}>
29-
<div className={styles.listElemContent}>
30-
<Plugin {...plugin} query={query} featured={false} />
31-
</div>
32-
</a>
33-
</Link>
27+
className={styles.listElemContainer}>
28+
29+
<div className={styles.listElemContent}>
30+
<Plugin {...plugin} query={query} featured={false} />
31+
</div>
32+
33+
</Link>)
3434
))}
3535
</div>
3636
)

‎components/plugin-theme-showcase/index.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,21 @@ export default ({ plugins, variant, filter = 'featured' }) => (
77
<Page title={`Hyper™ Store - ${variant === 'theme' ? 'Themes' : 'Plugins'}`}>
88
<nav className={styles.nav}>
99
<div className={styles.filters}>
10-
<Link href={variant === 'plugin' ? '/plugins' : '/themes'}>
11-
<a className={filter === 'featured' ? styles.active : ''}>Featured</a>
10+
<Link
11+
href={variant === 'plugin' ? '/plugins' : '/themes'}
12+
className={filter === 'featured' ? styles.active : ''}>
13+
Featured
1214
</Link>
1315
<Link
1416
href={variant === 'plugin' ? '/plugins/newest' : '/themes/newest'}
15-
>
16-
<a className={filter === 'newest' ? styles.active : ''}>Newest</a>
17+
className={filter === 'newest' ? styles.active : ''}>
18+
Newest
1719
</Link>
1820
</div>
19-
<Link href="/store/submit">
20-
<a className={styles.submitButton}>
21-
{`Submit a ${variant === 'theme' ? 'theme' : 'plugin'}`}
22-
</a>
21+
<Link href="/store/submit" className={styles.submitButton}>
22+
23+
{`Submit a ${variant === 'theme' ? 'theme' : 'plugin'}`}
24+
2325
</Link>
2426
</nav>
2527
<PluginsList plugins={plugins} filteredBy={filter} />

0 commit comments

Comments
 (0)