docs: misc

docs/components/ViteLazyTranspilingContradiction.tsx

@@ -7,8 +7,8 @@ import React from 'react'
 function ViteLazyTranspilingContradiction() {
   return (
     <>
-      contradicts <Link href="/lazy-transpiling">Vite's lazy-transpiling approach</Link> and, therefore, significantly
-      slows down development speed
+      contradicts <Link href="/lazy-transpiling">Vite's lazy-transpiling approach</Link> and it would, therefore,
+      significantly slow down development speed
     </>
   )
 }

docs/pages/config/+Page.mdx

@@ -198,7 +198,7 @@ export default {
 }
 ```
 
-This enables Vike to load the file `/pages/+config.js` without having to load `LayoutDefault.jsx`. Vike can quickly load all your `+config.js` files, without having to load any runtime code.
+This enables Vike to load the file `/pages/+config.js` without having to load `LayoutDefault.jsx`. This means that Vike can quickly load all your `+config.js` files without having to load any runtime code.
 
 > These fake imports, which we call *pointer imports*, apply only to `+config.js` files. Imports in other `+` files are normal imports as usual.
 

docs/pages/prefetchStaticAssets/+Page.mdx

@@ -10,8 +10,6 @@ export default {
 }
 ```
 
-> The `prefetchStaticAssets` setting requires <Link href="/client-routing">Client Routing</Link>.
-
 By default,
 the static assets of `/some-url` are loaded as soon as the user hovers his mouse over a link `<a href="/some-url">`.
 This means that static assets are often already loaded before even the user clicks on the link.
@@ -34,10 +32,12 @@ export default {
 }
 ```
 
-> Viewport prefetching is disabled in development. (Because preloading pages <ViteLazyTranspilingContradiction />.)
+> Viewport prefetching is disabled in development. (Because preloading pages that eargly <ViteLazyTranspilingContradiction />.)
 
 > Only static assets are prefetched: the `pageContext` of pages isn't prefetched, see [#246](https://github.com/vikejs/vike/issues/246).
 
+> The `prefetchStaticAssets` setting requires <Link href="/client-routing">Client Routing</Link>.
+
 
 ## Override for individual links
 
@@ -57,18 +57,30 @@ You can programmatically call <code>prefetch('/some/url')</code>, see <Link href
 You can viewport prefetch for mobile users while only hover prefetch for desktop users:
 
 ```js
+// /pages/+prefetchStaticAssets.js
+
 // For small screens, such as mobile, viewport prefetching can be a sensible strategy
 export const prefetchStaticAssets =
   window.matchMedia('(max-width: 600px)').matches ? 'viewport' : 'hover'
 ```
 
 ```js
+// /pages/+prefetchStaticAssets.js
+
 // Or we enable viewport prefetching for any device without a mouse: mobile and tablets (but
 // not laptops that have a touch display).
 export const prefetchStaticAssets =
   window.matchMedia('(any-hover: none)').matches ? 'viewport' : 'hover'
 ```
 
+> Make sure to define such dynamic/runtime code in a `+prefetchStaticAssets.js` file.
+>
+> (Don't define it inside a `+config.js` file because `window.matchMedia()` only exists in the browser and it would <Link href="/config#pointer-imports">prevent Vike from loading `+config.js` files</Link>.)
+
 See also:
  - [MDN > Web API > Window > matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
  - [Stack Overflow > Detecting that the browser has no mouse and is touch-only](https://stackoverflow.com/questions/7838680/detecting-that-the-browser-has-no-mouse-and-is-touch-only/52854585#52854585)
+
+## See also
+
+- <Link href="/preloading" />

docs/pages/preloading/+Page.mdx

@@ -1,10 +1,17 @@
 import { Link } from '@brillout/docpress'
 
-> **What is preloading?** Preloading denotes the practice of loading assets (JavaScript, CSS, images, etc.) before the browser discovers them in HTML/CSS/JavaScript code. That way we reduce the network round trips required before the browser starts discovering and loading all dependencies.
+> **What is preloading?** Preloading denotes the practice of loading assets (JavaScript, CSS, images, etc.) before the browser discovers them in HTML/CSS/JavaScript code. That way you can reduce the network round trips required before the browser starts discovering and loading all dependencies.
 
-By default, Vike automatically inject tags to our HTML, such as `<script type="module" src="script.js">`, `<link rel="stylesheet" type="text/css" href="style.css">`, and `<link rel="preload" href="font.ttf" as="font" type="font/ttf">`. It does so using a preload strategy that works for most users, but we can use `injectFilter()` to implement a custom preload strategy.
+By default, Vike automatically inject tags to your HTML such as:
+- `<script type="module" src="script.js">`
+- `<link rel="stylesheet" type="text/css" href="style.css">`
+- `<link rel="preload" href="font.ttf" as="font" type="font/ttf">`
 
-To improve preloading performance, we can use [Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) which Vike automatically generates.
+It does so using a preload strategy that works for most users, but you can use <Link href="#injectfilter" /> to implement a custom preload strategy.
+
+To improve preloading performance, you can use <Link href="#early-hints" /> which Vike automatically generates.
+
+> See also <Link href="/prefetchStaticAssets" />.
 
 
 ## Early Hints
@@ -28,8 +35,9 @@ app.get('*', async (req, res) => {
 type PageContext = {
   httpResponse: {
     earlyHints: {
-      earlyHintLink: string, // Header Line for the Early Hint Header
-      assetType: "image" | "script" | "font" | "style" | "audio" | "video" | "document" | "fetch" | "track" | "worker" | "embed" | "object" | null
+      earlyHintLink: string // Header Line for the Early Hint Header
+      assetType: "image" | "script" | "font" | "style" | "audio" | "video" | "document" |
+                 "fetch" | "track" | "worker" | "embed" | "object" | null
       mediaType: string // MIME type
       src: string // Asset's URL
       isEntry: boolean // true  ⇒ asset is an entry
@@ -49,7 +57,7 @@ See also:
 
 ## `injectFilter()`
 
-If Vike's default preload strategy doesn't work for us, we can customize which and where preload/asset tags are injected.
+If Vike's default preload strategy doesn't work for you, you can customize which and where preload/asset tags are injected.
 
 ```ts
 // /renderer/+onRenderHtml.js
@@ -92,5 +100,6 @@ By using <Link href="/getGlobalContext">`getGlobalContextSync()` or `getGlobalCo
 ## See also
 
 - <Link href="/injectFilter" />
+- <Link href="/prefetchStaticAssets" />
 - <Link href="/streaming" />
 - <Link href="/getGlobalContext" />