Skip to content

Commit 25d4a35

Browse files
JiaeKJiaeK
committed
Updated NextJS to v.13
* Update next-transpile-modules to v.10 * Switch to @next/mdx * Adjust transpileModules * Remove child <a> tags of <link>
1 parent 2456665 commit 25d4a35

File tree

14 files changed

+3930
-1139
lines changed

14 files changed

+3930
-1139
lines changed

‎next.config.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const remarkSlug = require("remark-slug");
66
const transpileModules = ["rescript"].concat(bsconfig["bs-dependencies"]);
77
const withTM = require("next-transpile-modules")(transpileModules);
88

9-
const withMdx = require("./plugins/next-mdx")({
9+
const withMdx = require("@next/mdx")({
1010
extension: /\.mdx?$/,
1111
options: {
1212
remarkPlugins: [remarkSlug],
@@ -61,4 +61,7 @@ const config = {
6161
},
6262
};
6363

64-
module.exports = withMdx(withTM(config));
64+
module.exports = withMdx({
65+
transpilePackages: transpileModules,
66+
...config,
67+
});

‎package-lock.json

Lines changed: 3807 additions & 1003 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,25 @@
99
},
1010
"dependencies": {
1111
"@headlessui/react": "^1.2.0",
12-
"@mdx-js/loader": "^1.5.5",
12+
"@mdx-js/loader": "^1.6.22",
1313
"@next/mdx": "^8.1.0",
1414
"@rescript/react": "^0.10.3",
1515
"@ryyppy/rescript-promise": "2.1.0",
1616
"codemirror": "^5.54.0",
1717
"docson": "^2.1.0",
18+
"eslint-config-next": "^13.1.1",
1819
"fuse.js": "^6.4.3",
1920
"gentype": "^3.44.0",
2021
"glob": "^7.1.4",
2122
"gray-matter": "^4.0.2",
2223
"highlight.js": "^10.5.0",
2324
"lz-string": "^1.4.4",
24-
"next": "^12.3.4",
25+
"next": "^13.1.1",
2526
"next-transpile-modules": "^9.1.0",
2627
"postcss": "^8.3.0",
2728
"prettier": "^1.18.2",
28-
"react": "17.0.1",
29-
"react-dom": "17.0.1",
29+
"react": "^18.2.0",
30+
"react-dom": "^18.2.0",
3031
"remark-parse": "^7.0.1",
3132
"remark-slug": "^5.1.2",
3233
"remark-stringify": "^7.0.3",
@@ -42,9 +43,10 @@
4243
"update-index": "node scripts/extract-indices.mjs && node scripts/extract-tocs.mjs && node scripts/extract-syntax.mjs && node scripts/generate_feed.mjs > public/blog/feed.xml"
4344
},
4445
"devDependencies": {
46+
"@mdx-js/react": "^1.6.22",
4547
"autoprefixer": "^10.2.6",
4648
"cssnano": "^4.1.10",
47-
"esbuild-loader": "^2.13.1",
49+
"esbuild-loader": "^2.20.0",
4850
"postcss-cli": "^8.3.0",
4951
"reanalyze": "^2.16.0",
5052
"rescript": "^10.1.0-rc.4",

‎src/Blog.res

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -101,23 +101,22 @@ module BlogCard = {
101101
<Badge badge />
102102
</div>
103103
}}
104-
<Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
105-
<a className="relative hl-title block mb-4 pt-9/16">
106-
{
107-
let className = "absolute top-0 h-full w-full object-cover"
108-
switch previewImg {
109-
| Some(src) => <img className src />
110-
| None => <img className src=defaultPreviewImg />
111-
}
104+
<Link
105+
href="/blog/[slug]"
106+
_as={"/blog/" ++ slug}
107+
className="relative hl-title block mb-4 pt-9/16">
108+
{
109+
let className = "absolute top-0 h-full w-full object-cover"
110+
switch previewImg {
111+
| Some(src) => <img className src />
112+
| None => <img className src=defaultPreviewImg />
112113
}
113-
</a>
114+
}
114115
</Link>
115116
</div>
116117
<div className="px-2">
117118
<Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
118-
<a>
119-
<h2 className="hl-4"> {React.string(title)} </h2>
120-
</a>
119+
<h2 className="hl-4"> {React.string(title)} </h2>
121120
</Link>
122121
<div className="captions text-gray-40 pt-1">
123122
{switch category {
@@ -157,23 +156,21 @@ module FeatureCard = {
157156
~maxHeight="25.4375rem",
158157
(),
159158
)}>
160-
<Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
161-
<a className="relative block pt-2/3">
162-
{switch badge {
163-
| Some(badge) =>
164-
<div className="absolute z-10 top-0 mt-10 ml-4 lg:-ml-4">
165-
<Badge badge />
166-
</div>
167-
| None => React.null
168-
}}
169-
{
170-
let className = "absolute top-0 h-full w-full object-cover"
171-
switch previewImg {
172-
| Some(src) => <img className src />
173-
| None => <img className src=defaultPreviewImg />
174-
}
159+
<Link href="/blog/[slug]" _as={"/blog/" ++ slug} className="relative block pt-2/3">
160+
{switch badge {
161+
| Some(badge) =>
162+
<div className="absolute z-10 top-0 mt-10 ml-4 lg:-ml-4">
163+
<Badge badge />
164+
</div>
165+
| None => React.null
166+
}}
167+
{
168+
let className = "absolute top-0 h-full w-full object-cover"
169+
switch previewImg {
170+
| Some(src) => <img className src />
171+
| None => <img className src=defaultPreviewImg />
175172
}
176-
</a>
173+
}
177174
</Link>
178175
</div>
179176
<div
@@ -206,9 +203,7 @@ module FeatureCard = {
206203
</div>
207204
</div>
208205
<Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
209-
<a>
210-
<Button> {React.string("Read Article")} </Button>
211-
</a>
206+
<Button> {React.string("Read Article")} </Button>
212207
</Link>
213208
</div>
214209
</section>

‎src/BlogArticle.res

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -187,11 +187,9 @@ let default = (props: props) => {
187187
<div className="text-24 sm:text-32 text-center text-gray-80 font-medium">
188188
{React.string("Want to read more?")}
189189
</div>
190-
<Next.Link href="/blog">
191-
<a className="text-fire hover:text-fire-70">
192-
{React.string("Back to Overview")}
193-
<Icon.ArrowRight className="ml-2 inline-block" />
194-
</a>
190+
<Next.Link href="/blog" className="text-fire hover:text-fire-70">
191+
{React.string("Back to Overview")}
192+
<Icon.ArrowRight className="ml-2 inline-block" />
195193
</Next.Link>
196194
</div>
197195
</div>

‎src/Packages.res

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -306,12 +306,12 @@ module InfoSidebar = {
306306
<div>
307307
<h2 className=h2> {React.string("Guidelines")} </h2>
308308
<ul className="space-y-4">
309-
<Next.Link href="/docs/guidelines/publishing-packages">
310-
<a className=link> {React.string("Publishing ReScript npm packages")} </a>
309+
<Next.Link href="/docs/guidelines/publishing-packages" className=link>
310+
{React.string("Publishing ReScript npm packages")}
311311
</Next.Link>
312312
/* <li> */
313-
/* <Next.Link href="/docs/guidelines/writing-bindings"> */
314-
/* <a className=link> {React.string("Writing Bindings & Libraries")} </a> */
313+
/* <Next.Link href="/docs/guidelines/writing-bindings" className=link> */
314+
/* {React.string("Writing Bindings & Libraries")} */
315315
/* </Next.Link> */
316316
/* </li> */
317317
</ul>

‎src/bindings/Next.res

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ module Link = {
6161
~shallow: option<bool>=?,
6262
~passHref: option<bool>=?,
6363
~children: React.element,
64+
~className: option<string>=?,
65+
~target: string=?,
66+
~hrefRel: string=?,
6467
) => React.element = "default"
6568
}
6669

‎src/bindings/Next.resi

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ module Link: {
6161
~shallow: option<bool>=?,
6262
~passHref: option<bool>=?,
6363
~children: React.element,
64+
~className: option<string>=?,
65+
~target: string=?,
66+
~hrefRel: string=?,
6467
) => React.element
6568
}
6669

‎src/components/CodeExample.res

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -230,13 +230,12 @@ module Toggle = {
230230
| Some({code: ""}) => React.null
231231
| Some(tab) =>
232232
let playgroundLinkButton =
233-
<Next.Link href={`/try?code=${LzString.compressToEncodedURIComponent(tab.code)}}`}>
234-
<a target="_blank">
235-
// ICON Link to PLAYGROUND
236-
<Icon.ExternalLink
237-
className="text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
238-
/>
239-
</a>
233+
<Next.Link
234+
href={`/try?code=${LzString.compressToEncodedURIComponent(tab.code)}}`} target="_blank">
235+
// ICON Link to PLAYGROUND
236+
<Icon.ExternalLink
237+
className="text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
238+
/>
240239
</Next.Link>
241240

242241
let copyButton = <CopyButton code={tab.code} />

‎src/components/Footer.res

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ let make = () => {
4646
<Section title="About">
4747
<ul className="text-16 text-gray-80-tr space-y-2">
4848
<li>
49-
<Next.Link href="/community#core-team">
50-
<a className={linkClass}> {React.string("Team")} </a>
49+
<Next.Link href="/community#core-team" className={linkClass}>
50+
{React.string("Team")}
5151
</Next.Link>
5252
</li>
5353
<li>

‎src/components/Markdown.res

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,9 @@ module UrlBox = {
9494
<Icon.ArrowRight className="ml-1" />
9595
</a>
9696
} else {
97-
<Next.Link href>
98-
<a className="flex items-center">
99-
{React.string(text)}
100-
<Icon.ArrowRight className="ml-1" />
101-
</a>
97+
<Next.Link href className="flex items-center">
98+
{React.string(text)}
99+
<Icon.ArrowRight className="ml-1" />
102100
</Next.Link>
103101
}
104102
<div className="md-url-box text-16 border-l-2 border-gray-60 my-6 py-6 pl-8 pr-10 bg-gray-5">
@@ -413,11 +411,12 @@ module A = {
413411
| [pathname] => Js.String2.replaceByRe(pathname, regex, "")
414412
| _ => href
415413
}
416-
<Next.Link href>
417-
<a
418-
href rel="noopener noreferrer" className="no-underline text-fire hover:underline" ?target>
419-
children
420-
</a>
414+
<Next.Link
415+
href
416+
hrefRel="noopener noreferrer"
417+
className="no-underline text-fire hover:underline"
418+
?target>
419+
children
421420
</Next.Link>
422421
}
423422
}

‎src/components/Navigation.res

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,7 @@ module DocsSection = {
142142
if isAbsolute {
143143
<a href rel="noopener noreferrer" className=""> content </a>
144144
} else {
145-
<Next.Link href>
146-
<a className=""> content </a>
147-
</Next.Link>
145+
<Next.Link href className=""> content </Next.Link>
148146
}
149147
}
150148
}
@@ -232,9 +230,7 @@ module DocsSection = {
232230

233231
<li key=text>
234232
<span className="text-fire mr-2"> {React.string(`-`)} </span>
235-
<Link href>
236-
<a className=linkClass> {React.string(text)} </a>
237-
</Link>
233+
<Link href className=linkClass> {React.string(text)} </Link>
238234
</li>
239235
})
240236
->React.array}
@@ -380,25 +376,21 @@ module MobileNav = {
380376
<DocSearch.Textbox id="docsearch-mobile" />
381377
</li>
382378
<li className=base>
383-
<Link href="/try">
384-
<a className={linkOrActiveLink(~target="/try", ~route)}>
385-
{React.string("Playground")}
386-
</a>
379+
<Link href="/try" className={linkOrActiveLink(~target="/try", ~route)}>
380+
{React.string("Playground")}
387381
</Link>
388382
</li>
389383
<li className=base>
390-
<Link href="/blog">
391-
<a className={linkOrActiveLinkSubroute(~target="/blog", ~route)}>
392-
{React.string("Blog")}
393-
</a>
384+
<Link href="/blog" className={linkOrActiveLinkSubroute(~target="/blog", ~route)}>
385+
{React.string("Blog")}
394386
</Link>
395387
</li>
396388
/*
397389
<li className=base>
398-
<Link href="/community">
399-
<a className={linkOrActiveLink(~target="/community", ~route)}>
390+
<Link href="/community" className={linkOrActiveLink(~target="/community", ~route)}>
391+
400392
{React.string("Community")}
401-
</a>
393+
402394
</Link>
403395
</li>
404396
*/
@@ -546,24 +538,23 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
546538
className="flex ml-10 space-x-5 w-full max-w-320"
547539
style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
548540
{collapsibleElements->React.array}
549-
<Link href="/docs/manual/latest/api">
550-
<a className={linkOrActiveApiSubroute(~route)}> {React.string("API")} </a>
541+
<Link href="/docs/manual/latest/api" className={linkOrActiveApiSubroute(~route)}>
542+
{React.string("API")}
551543
</Link>
552-
<Link href="/try">
553-
<a className={"hidden xs:block " ++ linkOrActiveLink(~target="/try", ~route)}>
554-
{React.string("Playground")}
555-
</a>
544+
<Link
545+
href="/try"
546+
className={"hidden xs:block " ++ linkOrActiveLink(~target="/try", ~route)}>
547+
{React.string("Playground")}
556548
</Link>
557-
<Link href="/blog">
558-
<a
559-
className={"hidden xs:block " ++ linkOrActiveLinkSubroute(~target="/blog", ~route)}>
560-
{React.string("Blog")}
561-
</a>
549+
<Link
550+
href="/blog"
551+
className={"hidden xs:block " ++ linkOrActiveLinkSubroute(~target="/blog", ~route)}>
552+
{React.string("Blog")}
562553
</Link>
563-
<Link href="/community">
564-
<a className={"hidden xs:block " ++ linkOrActiveLink(~target="/community", ~route)}>
565-
{React.string("Community")}
566-
</a>
554+
<Link
555+
href="/community"
556+
className={"hidden xs:block " ++ linkOrActiveLink(~target="/community", ~route)}>
557+
{React.string("Community")}
567558
</Link>
568559
</div>
569560
<div className="hidden md:flex items-center">

‎src/layouts/LandingPageLayout.res

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,10 @@ exports.Button = Button;`,
9696
</div>
9797
/* ---Link to Playground--- */
9898
<div>
99-
<Next.Link href={`/try?code=${LzString.compressToEncodedURIComponent(example.res)}}`}>
100-
<a
101-
className="captions md:px-0 border-b border-gray-40 hover:border-gray-60 text-gray-60">
102-
{React.string("Edit this example in Playground")}
103-
</a>
99+
<Next.Link
100+
href={`/try?code=${LzString.compressToEncodedURIComponent(example.res)}}`}
101+
className="captions md:px-0 border-b border-gray-40 hover:border-gray-60 text-gray-60">
102+
{React.string("Edit this example in Playground")}
104103
</Next.Link>
105104
</div>
106105
//
@@ -636,13 +635,13 @@ module CuratedResources = {
636635
className="grid grid-flow-col grid-cols-2 grid-rows-2 lg:grid-cols-4 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto">
637636
{cards
638637
->Belt.Array.mapWithIndex((i, card) =>
639-
<Next.Link key={Belt.Int.toString(i)} href={card.href}>
640-
<a
641-
className="hover:bg-gray-80 bg-gray-90 px-4 md:px-8 pb-0 md:pb-8 relative rounded-xl md:min-w-[196px]">
642-
<img className="h-[53px] absolute mt-6" src=card.imgSrc />
643-
<h5 className="text-gray-10 hl-4 mt-32 h-12"> {card.title} </h5>
644-
<div className="text-gray-40 mt-2 mb-8 body-sm"> {React.string(card.descr)} </div>
645-
</a>
638+
<Next.Link
639+
key={Belt.Int.toString(i)}
640+
href={card.href}
641+
className="hover:bg-gray-80 bg-gray-90 px-4 md:px-8 pb-0 md:pb-8 relative rounded-xl md:min-w-[196px]">
642+
<img className="h-[53px] absolute mt-6" src=card.imgSrc />
643+
<h5 className="text-gray-10 hl-4 mt-32 h-12"> {card.title} </h5>
644+
<div className="text-gray-40 mt-2 mb-8 body-sm"> {React.string(card.descr)} </div>
646645
</Next.Link>
647646
)
648647
->React.array}

0 commit comments

Comments
 (0)