wip

Author: joetannenbaum

v1/advanced/server-side-rendering.mdx

@@ -3,9 +3,9 @@ title: Server-Side Rendering (SSR)
 ---
 
 import { ClientSpecific } from "/snippets/client-specific.jsx"
-import { VueSpecific } from "/snippets/vue-specific.jsx"
 import { ReactSpecific } from "/snippets/react-specific.jsx"
 import { SvelteSpecific } from "/snippets/svelte-specific.jsx"
+import { VueSpecific } from "/snippets/vue-specific.jsx"
 
 <Warning>This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the [v2 docs](/v2) for the latest information.</Warning>
 
@@ -197,11 +197,11 @@ With the server running, you should be able to access your app within the browse
 
 Since your website is now being server-side rendered, you can instruct <VueSpecific>Vue</VueSpecific><ReactSpecific>React</ReactSpecific><SvelteSpecific>Svelte</SvelteSpecific> to "hydrate" the static markup and make it interactive instead of re-rendering all the HTML that we just generated.
 
-<vue2>Inertia automatically enables client-side hydration in Vue 2 apps, so no changes are required.
+{/* <vue2>Inertia automatically enables client-side hydration in Vue 2 apps, so no changes are required. */}
 
-</vue2><vue3>To enable client-side hydration in a Vue 3 app, update your `app.js` file to use `createSSRApp` instead of `createApp`:
+{/* </vue2><vue3>To enable client-side hydration in a Vue 3 app, update your `app.js` file to use `createSSRApp` instead of `createApp`: */}
 
-</vue3><ReactSpecific>To enable client-side hydration in a React app, update your `app.js` file to use `hydrateRoot` instead of `createRoot`:</ReactSpecific><SvelteSpecific>To enable client-side hydration in a Svelte app, set the `hydratable` compiler option to `true` in your `vite.config.js` file:</SvelteSpecific>
+{/* </vue3><ReactSpecific>To enable client-side hydration in a React app, update your `app.js` file to use `hydrateRoot` instead of `createRoot`:</ReactSpecific><SvelteSpecific>To enable client-side hydration in a Svelte app, set the `hydratable` compiler option to `true` in your `vite.config.js` file:</SvelteSpecific> */}
 
 <CodeGroup>
 
@@ -269,7 +269,7 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
 
 </CodeGroup>
 
-<SvelteSpecific>You'll also need to enable hydration in your `app.js` file:
+{/* <SvelteSpecific>You'll also need to enable hydration in your `app.js` file: */}
 
 ```diff
    import { createInertiaApp } from '@inertiajs/svelte'

v1/core-concepts/how-it-works.mdx

@@ -10,7 +10,7 @@ However, Inertia replaces your application's view layer. Instead of using server
 
 As you might expect, simply creating your frontend in JavaScript doesn't give you a single-page application experience. If you were to click a link, your browser would make a full page visit, which would then cause your client-side framework to reboot on the subsequent page load. This is where Inertia changes everything.
 
-At its core, Inertia is essentially a client-side routing library. It allows you to make page visits without forcing a full page reload. This is done using the `{`<a>`}</a>` component, a light-weight wrapper around a normal anchor link. When you click an Inertia link, Inertia intercepts the click and makes the visit via XHR instead. You can even make these visits programmatically in JavaScript using `router.visit()`.
+At its core, Inertia is essentially a client-side routing library. It allows you to make page visits without forcing a full page reload. This is done using the `<Link>` component, a light-weight wrapper around a normal anchor link. When you click an Inertia link, Inertia intercepts the click and makes the visit via XHR instead. You can even make these visits programmatically in JavaScript using `router.visit()`.
 
 When Inertia makes an XHR visit, the server detects that it's an Inertia visit and, instead of returning a full HTML response, it returns a JSON response with the JavaScript page component name and data (props). Inertia then dynamically swaps out the previous page component with the new page component and updates the browser's history state.
 

v1/core-concepts/the-protocol.mdx

@@ -10,4 +10,4 @@ This page contains a detailed specification of the Inertia protocol. Be sure to
 
 The very first request to an Inertia app is just a regular, full-page browser request, with no special Inertia headers or data. For these requests, the server returns a full HTML document.
 
-This HTML response includes the site assets (CSS, JavaScript) as well as a root `{`<div>`} in thepage's body. The root {`<div>`} serves as a mounting point for the client-side app, and includes adata-page attribute with a JSON encoded <a href="#the-page-object">page object</a> for the initialpage. Inertia uses this information to boot your client-side framework and display the initial page component.<div classname="overflow-hidden rounded"><div classname="px-6 pt-6 font-mono text-sm text-white"><div classname="text-xs font-bold uppercase text-gray-600">Request</div><div classname="mt-1"><span classname="text-blue-400">GET:</span> http://example.com/events/80</div><div><span classname="text-blue-400">Accept:</span> text/html, application/xhtml+xml</div><div classname="mt-8 text-xs font-bold uppercase text-gray-600">Response</div><div classname="mt-1">HTTP/1.1 200 OK</div><div><span classname="text-blue-400">Content-Type:</span> text/html; charset=utf-8</div></div><p><codeblock>mT5keZcVVw</codeblock></p><p><codeblock>tGbPYOhrQq</codeblock></p><p><codeblock>73mMeawQzt</codeblock></p></div></div></div>`
+{/* This HTML response includes the site assets (CSS, JavaScript) as well as a root `<div>` in the page's body. The root `<div>` serves as a mounting point for the client-side app, and includes adata-page attribute with a JSON encoded <a href="#the-page-object">page object</a> for the initialpage. Inertia uses this information to boot your client-side framework and display the initial page component.<div classname="overflow-hidden rounded"><div classname="px-6 pt-6 font-mono text-sm text-white"><div classname="text-xs font-bold uppercase text-gray-600">Request</div><div classname="mt-1"><span classname="text-blue-400">GET:</span> http://example.com/events/80</div><div><span classname="text-blue-400">Accept:</span> text/html, application/xhtml+xml</div><div classname="mt-8 text-xs font-bold uppercase text-gray-600">Response</div><div classname="mt-1">HTTP/1.1 200 OK</div><div><span classname="text-blue-400">Content-Type:</span> text/html; charset=utf-8</div></div><p><codeblock>mT5keZcVVw</codeblock></p><p><codeblock>tGbPYOhrQq</codeblock></p><p><codeblock>73mMeawQzt</codeblock></p></div></div></div>` */}

v1/getting-started/upgrade-guide.mdx

@@ -234,19 +234,19 @@ Finally, if you have defined any progress customizations, you can move them to t
 
 ```js
 createInertiaApp({
-progress: {
-color: '#29d',
-},
-// ...
+    progress: {
+        color: '#29d',
+    },
+    // ...
 })
 ```
 
 If you're using a custom progress indicator, you can disable the default progress indicator by setting the `progress` property to `false`.
 
 ```js
 createInertiaApp({
-progress: false,
-// ...
+    progress: false,
+    // ...
 })
 ```
 
@@ -256,10 +256,10 @@ We've removed the previously deprecated lowercase `app` argument from the `setup
 
 ```diff
 createInertiaApp({
-// ...
+    // ...
 -   setup({ app, props }) {
 +   setup({ App, props }) {
-// ...
+    // ...
 },
 })
 ```

v1/installation/server-side-setup.mdx

@@ -24,8 +24,7 @@ composer require inertiajs/inertia-laravel
 
 Next, setup the root template that will be loaded on the first page visit to your application. This will be used to load your site assets (CSS and JavaScript), and will also contain a root `<div>` in which to boot your JavaScript application.
 
-```html
-
+```blade
 <html>
     <head>
         <meta charset="utf-8" />
@@ -55,10 +54,11 @@ Once the middleware has been published, append the `HandleInertiaRequests` middl
 
 ```php
 use App\Http\Middleware\HandleInertiaRequests;
+
 ->withMiddleware(function (Middleware $middleware) {
-$middleware->web(append: [
-HandleInertiaRequests::class,
-]);
+    $middleware->web(append: [
+        HandleInertiaRequests::class,
+    ]);
 })
 ```
 

v1/the-basics/pages.mdx

@@ -2,9 +2,9 @@
 title: Pages
 ---
 
-import { VueSpecific } from "/snippets/vue-specific.jsx"
 import { ReactSpecific } from "/snippets/react-specific.jsx"
 import { SvelteSpecific } from "/snippets/svelte-specific.jsx"
+import { VueSpecific } from "/snippets/vue-specific.jsx"
 
 <Warning>This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the [v2 docs](/v2) for the latest information.</Warning>
 
@@ -113,7 +113,7 @@ class UserController extends Controller
 
 ## Creating Layouts
 
-While not required, for most projects it makes sense to create a site layout that all of your pages can extend. You may have noticed in our page example above that we're wrapping the page content within a `{`<layout>`}</layout>` component. Here's an example of such a component:
+{/* While not required, for most projects it makes sense to create a site layout that all of your pages can extend. You may have noticed in our page example above that we're wrapping the page content within a `{`<layout>`}</layout>` component. Here's an example of such a component: */}
 
 <CodeGroup>
 
@@ -388,14 +388,14 @@ export default Home
 
 </CodeGroup>
 
-<VueSpecific>If you're using Vue 2.7 or Vue 3, you can alternatively use the [defineOptions plugin](https://vue-macros.sxzz.moe/macros/define-options.html) to define a layout within `<script setup>`:
+{/* <VueSpecific>If you're using Vue 2.7 or Vue 3, you can alternatively use the [defineOptions plugin](https://vue-macros.sxzz.moe/macros/define-options.html) to define a layout within `<script setup>`: */}
 
-```html
+{/* ```html
 <script setup>
 import Layout from './Layout'
 defineOptions({ layout: Layout })
 </script>
-```</VueSpecific>## Default layouts
+```</VueSpecific>## Default layouts */}
 
 If you're using persistent layouts, you may find it convenient to define the default page layout in the `resolve()` callback of your application's main JavaScript file.
 

v1/the-basics/redirects.mdx

@@ -4,7 +4,7 @@ title: Redirects
 
 <Warning>This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the [v2 docs](/v2) for the latest information.</Warning>
 
-When making a non-GET Inertia request manually or via a `{`<a>`}</a>` element, you should ensure that you always respond with a proper Inertia redirect response.
+{/* When making a non-GET Inertia request manually or via a `{`<a>`}</a>` element, you should ensure that you always respond with a proper Inertia redirect response. */}
 
 For example, if your controller is creating a new user, your "store" endpoint should return a redirect back to a standard `GET` endpoint, such as your user "index" page. Inertia will automatically follow this redirect and update the page accordingly.