Skip to content

Commit ef15521

Browse files
jderochervlkjderochervlk
committed
add preloading and prefetching
1 parent 3d54463 commit ef15521

File tree

4 files changed

+34
-7
lines changed

4 files changed

+34
-7
lines changed

‎app/root.res‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,12 @@ let default = () => {
5252
<html>
5353
<head>
5454
<style> {React.string("html {opacity:0;}")} </style>
55-
<link rel="preconnect" href={mainCss} />
55+
<link rel="preload" href={mainCss} as_="css" />
56+
<link rel="preload" href="/fonts/subset-Inter-Bold.woff2" as_="font" />
57+
<link rel="preload" href="/fonts/subset-Inter-Regular.woff2" as_="font" />
58+
<link rel="preload" href="/fonts/subset-Inter-SemiBold.woff2" as_="font" />
59+
<link rel="preload" href="/fonts/subset-Inter-Medium.woff2" as_="font" />
60+
5661
<link rel="stylesheet" href={mainCss} />
5762

5863
<Links />

‎src/bindings/ReactRouter.res‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,16 @@ module Scripts = {
4747
}
4848

4949
module Link = {
50+
type prefetch = [#none | #intent | #render | #viewport]
51+
5052
@module("react-router") @react.component
5153
external make: (
5254
~children: React.element=?,
5355
~className: string=?,
5456
~target: string=?,
5557
~to: Path.t,
5658
~preventScrollReset: bool=?,
59+
~prefetch: prefetch=?,
5760
) => React.element = "Link"
5861

5962
module Path = {
@@ -68,6 +71,7 @@ module Link = {
6871
~id: string=?,
6972
~to: to,
7073
~preventScrollReset: bool=?,
74+
~prefetch: prefetch=?,
7175
) => React.element = "Link"
7276
}
7377

@@ -81,6 +85,7 @@ module Link = {
8185
~to: string,
8286
~preventScrollReset: bool=?,
8387
~relative: string=?,
88+
~prefetch: prefetch=?,
8489
) => React.element = "Link"
8590
}
8691
}

‎src/components/Navigation.res‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,39 +109,47 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
109109
>
110110
<div className="flex justify-between items-center h-full w-full max-w-1280">
111111
<div className="h-8 w-8 lg:h-10 lg:w-32">
112-
<ReactRouter.Link.String
112+
<Link.String
113+
prefetch={#intent}
113114
to="/"
114115
className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold"
115116
>
116117
<img src="/nav-logo@2x.png" className="lg:hidden" />
117118
<img src="/nav-logo-full@2x.png" className="hidden lg:block" />
118-
</ReactRouter.Link.String>
119+
</Link.String>
119120
</div>
120121

121122
/* Desktop horizontal navigation */
122123
<div
123124
className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative"
124125
>
125126
<div className="flex ml-10 space-x-5 w-full text-gray-40 max-w-104">
126-
<Link to=#"/docs/manual/introduction" className={isDocRouteActive(~route)}>
127+
<Link
128+
to=#"/docs/manual/introduction"
129+
className={isDocRouteActive(~route)}
130+
prefetch=#intent
131+
>
127132
{React.string("Docs")}
128133
</Link>
129134

130135
<Link
131136
to=#"/try"
137+
prefetch=#intent
132138
className={"hidden xs:block " ++ linkOrActiveLink(~target=#"/try", ~route)}
133139
>
134140
{React.string("Playground")}
135141
</Link>
136142

137143
<Link
138144
to=#"/blog"
145+
prefetch=#intent
139146
className={"hidden xs:block " ++ linkOrActiveLinkSubroute(~target=#"/blog", ~route)}
140147
>
141148
{React.string("Blog")}
142149
</Link>
143150

144151
<Link
152+
prefetch=#intent
145153
to=#"/community/overview"
146154
className={"hidden xs:block " ++
147155
linkOrActiveLink(~target=#"/community/overview", ~route)}
@@ -150,6 +158,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
150158
</Link>
151159

152160
<Link
161+
prefetch=#intent
153162
to=#"/packages"
154163
className={"hidden xs:block " ++ linkOrActiveLink(~target=#"/packages", ~route)}
155164
>
@@ -208,20 +217,28 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
208217
>
209218
<div className="flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
210219
<Link
220+
prefetch=#intent
211221
to=#"/docs/manual/introduction"
212222
className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}
213223
>
214224
{React.string("Language Manual")}
215225
</Link>
216-
<Link to=#"/docs/manual/api" className={isActiveLink(~includes="/api", ~route)}>
226+
<Link
227+
prefetch=#intent
228+
to=#"/docs/manual/api"
229+
className={isActiveLink(~includes="/api", ~route)}
230+
>
217231
{React.string("API")}
218232
</Link>
219233
<Link
220-
to=#"/syntax-lookup" className={isActiveLink(~includes="/syntax-lookup", ~route)}
234+
prefetch=#intent
235+
to=#"/syntax-lookup"
236+
className={isActiveLink(~includes="/syntax-lookup", ~route)}
221237
>
222238
{React.string("Syntax Lookup")}
223239
</Link>
224240
<Link
241+
prefetch=#intent
225242
to=#"/docs/react/introduction"
226243
className={isActiveLink(~includes="/docs/react/", ~route)}
227244
>

‎src/layouts/LandingPageLayout.res‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ module Intro = {
1212
compiler toolchain that scales to any codebase size.`)}
1313
</h2>
1414
<div className="mt-4 mb-2">
15-
<ReactRouter.Link to=#"/docs/manual/installation">
15+
<ReactRouter.Link to=#"/docs/manual/installation" prefetch=#viewport>
1616
<Button> {React.string("Get started")} </Button>
1717
</ReactRouter.Link>
1818
</div>

0 commit comments

Comments
 (0)