inertia_rails-contrib 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e6c5bccb1afe9ba7ccd8366ea492d47c947ec2c5787ca63b871f7303ea1c598
-  data.tar.gz: 3a6eeaabc968804dfc1d2cab8e9a5064332c7e96a6d480e0ae1d34fa4fd5b967
+  metadata.gz: 27c11a71a3acff524328e14dd27d4265a5365a113a58ae636b6877dbfb294d12
+  data.tar.gz: 8150b80e446aebe35e9e5a58026d2d633ce06c693254c2849229ceeee0f30a1a
 SHA512:
-  metadata.gz: 4e275e6b29e124aeb22edf64f676112af27e037b720aafc7e22ea70eddd965491447fbb3a1e40f5f78c6117764c5327e5e809616c66f5603f7f787f9f4f54123
-  data.tar.gz: b419a7c886222c86ee2893c3741e1a6dbea59b47144723c7f187bb1ce386edbd551ad6df68eac99368db80566cd75f64256be087a04375ec6447b8f3b83dac46
+  metadata.gz: c2c94b176f794229063106b9ca1bd28a73c0b766cb657479bc75656cbc2ef4de74e94a85c61aaa64e1ae20e6659bc5cf9923c1c75fd069f224e0403eb63fab74
+  data.tar.gz: c3030cd27b25dbc309d6e3ea7a2b410563b794724fad3f7043a53d86430ea8b1fae7eb122c62bfdaa69bf9301e0da9fdec7525f114c7e98df825eee0877ff1c5

data/CHANGELOG.md

@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+## [0.3.0] - 2024-10-25
+
+Added:
+
+- [BREAKING] Svelte 5 support ([@skryukov])
+  - The `--framework=svelte` option now installs Svelte 5
+  - New `--framework=svelte4` option installs Svelte 4
+  - Support for Svelte 5 in the installation generator
+  - Support for Svelte 5 in the scaffold templates
+
+## [0.2.2] - 2024-10-09
+
+Added:
+
+- TypeScript support for the installation generator ([@skryukov])
+  Note that it doesn't include scaffold templates yet.
+
+- New `--inertia-version` option for the installation generator ([@skryukov])
+  This allows you to specify the Inertia.js version to install.
+
+- Support `tailwind.config.ts` for Tailwind CSS template guessing ([@Shaglock])
+
+Fixed:
+
+- Correct examples for default layouts in inertia entrypoints ([@skryukov])
+- Inertia attribute added to the head tag in the layout for vue ([@skryukov])
+- Remove duplicate `vite_stylesheet_tag` when Tailwind CSS is installed ([@skryukov])
+
 ## [0.2.1] - 2024-08-11
 
 Added:
@@ -41,9 +69,12 @@ Added:
 - Initial release ([@iurev], [@skryukov])
 
 [@iurev]: https://github.com/iurev
+[@Shaglock]: https://github.com/Shaglock
 [@skryukov]: https://github.com/skryukov
 
-[Unreleased]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.1...HEAD
+[Unreleased]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.2...v0.3.0
+[0.2.2]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.1.1...v0.2.0
 [0.1.1]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.1.0...v0.1.1

data/README.md

@@ -31,7 +31,8 @@ bin/rails generate inertia:install
 
 This command will:
 - Check for Vite Rails and install it if not present
-- Ask you to choose your preferred frontend framework (React, Vue, or Svelte)
+- Ask if you want to use TypeScript
+- Ask you to choose your preferred frontend framework (React, Vue, Svelte 4, or Svelte 5)
 - Ask if you want to install Tailwind CSS
 - Install necessary dependencies
 - Set up the application to work with Inertia
@@ -48,6 +49,10 @@ Would you like to install Vite Ruby? (y/n) y
 Vite Rails gem successfully installed
          run  bundle exec vite install from "."
 Vite Rails successfully installed
+Would you like to use TypeScript? (y/n) y
+Adding TypeScript support
+What framework do you want to use with Inertia? [react, vue, svelte4, svelte] (react)
+         run  npm add @types/react @types/react-dom typescript --silent from "."
 Would you like to install Tailwind CSS? (y/n) y
 Installing Tailwind CSS
          run  npm add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/container-queries --silent from "."
@@ -59,14 +64,14 @@ Adding Tailwind CSS to the application layout
 Adding Inertia's Rails adapter initializer
       create  config/initializers/inertia_rails.rb
 Installing Inertia npm packages
-What framework do you want to use with Inertia? [react, vue, svelte] (react)
-         run  npm add @inertiajs/react react react-dom @vitejs/plugin-react --silent from "."
+         run  npm add @vitejs/plugin-react react react-dom --silent from "."
+         run  npm add @inertiajs/react@latest --silent from "."
 Adding Vite plugin for react
       insert  vite.config.ts
      prepend  vite.config.ts
-Copying inertia.js entrypoint
-      create  app/frontend/entrypoints/inertia.js
-Adding inertia.js script tag to the application layout
+Copying inertia.ts entrypoint
+      create  app/frontend/entrypoints/inertia.ts
+Adding inertia.ts script tag to the application layout
       insert  app/views/layouts/application.html.erb
 Adding Vite React Refresh tag to the application layout
       insert  app/views/layouts/application.html.erb
@@ -76,11 +81,15 @@ Copying example Inertia controller
 Adding a route for the example Inertia controller
        route  get 'inertia-example', to: 'inertia_example#index'
 Copying page assets
-      create  app/frontend/pages/InertiaExample.jsx
       create  app/frontend/pages/InertiaExample.module.css
       create  app/frontend/assets/react.svg
       create  app/frontend/assets/inertia.svg
       create  app/frontend/assets/vite_ruby.svg
+      create  app/frontend/pages/InertiaExample.tsx
+      create  tsconfig.json
+      create  tsconfig.app.json
+      create  tsconfig.node.json
+      create  app/frontend/vite-env.d.ts
 Copying bin/dev
       create  bin/dev
 Inertia's Rails adapter successfully installed

data/lib/generators/inertia/install/frameworks.yml

@@ -1,41 +1,98 @@
 react:
+  inertia_package: "@inertiajs/react"
   packages:
-    - "@inertiajs/react"
+    - "@vitejs/plugin-react"
     - "react"
     - "react-dom"
-    - "@vitejs/plugin-react"
+  packages_ts:
+    - "@types/react"
+    - "@types/react-dom"
+    - "typescript"
   vite_plugin_import: "import react from '@vitejs/plugin-react'"
   vite_plugin_call: "react()"
-  copy_files:
+  copy_files_ts:
+    "InertiaExample.tsx": "%{js_destination_path}/pages/InertiaExample.tsx"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.app.json": "tsconfig.app.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
     "InertiaExample.jsx": "%{js_destination_path}/pages/InertiaExample.jsx"
+  copy_files:
     "InertiaExample.module.css": "%{js_destination_path}/pages/InertiaExample.module.css"
     "../assets/react.svg": "%{js_destination_path}/assets/react.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
 
 vue:
+  inertia_package: "@inertiajs/vue3"
   packages:
-    - "@inertiajs/vue3"
     - "vue"
     - "@vitejs/plugin-vue"
+  packages_ts:
+    - "typescript"
+    - "vue-tsc"
   vite_plugin_import: "import vue from '@vitejs/plugin-vue'"
   vite_plugin_call: "vue()"
   copy_files:
-    "InertiaExample.vue": "%{js_destination_path}/pages/InertiaExample.vue"
     "../assets/vue.svg": "%{js_destination_path}/assets/vue.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
+  copy_files_ts:
+    "InertiaExample.ts.vue": "%{js_destination_path}/pages/InertiaExample.vue"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.app.json": "tsconfig.app.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
+    "InertiaExample.vue": "%{js_destination_path}/pages/InertiaExample.vue"
 
-svelte:
+svelte4:
+  inertia_package: "@inertiajs/svelte"
   packages:
-    - "@inertiajs/svelte"
-    - "svelte"
-    - "@sveltejs/vite-plugin-svelte"
+    - "svelte@4"
+    - "@sveltejs/vite-plugin-svelte@3"
+  packages_ts:
+    - "@tsconfig/svelte@4"
+    - "svelte-check"
+    - "typescript"
+    - "tslib"
   vite_plugin_import: "import { svelte } from '@sveltejs/vite-plugin-svelte'"
   vite_plugin_call: "svelte()"
+  copy_files_ts:
+    "InertiaExample.ts.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
+    "InertiaExample.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
   copy_files:
     "svelte.config.js": "svelte.config.js"
+    "../assets/svelte.svg": "%{js_destination_path}/assets/svelte.svg"
+    "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
+    "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
+
+svelte:
+  inertia_package: "@inertiajs/svelte"
+  packages:
+    - "svelte@5"
+    - "@sveltejs/vite-plugin-svelte@4"
+  packages_ts:
+    - "@tsconfig/svelte@5"
+    - "svelte-check"
+    - "typescript"
+    - "tslib"
+  vite_plugin_import: "import { svelte } from '@sveltejs/vite-plugin-svelte'"
+  vite_plugin_call: "svelte()"
+  copy_files_ts:
+    "InertiaExample.ts.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
     "InertiaExample.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+  copy_files:
+    "svelte.config.js": "svelte.config.js"
     "../assets/svelte.svg": "%{js_destination_path}/assets/svelte.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"

data/lib/generators/inertia/install/install_generator.rb

@@ -18,6 +18,12 @@ module Inertia
         enum: FRAMEWORKS.keys,
         default: nil
 
+      class_option :inertia_version, type: :string, default: "latest",
+        desc: "The version of Inertia.js to install"
+
+      class_option :typescript, type: :boolean, default: false,
+        desc: "Whether to use TypeScript"
+
       class_option :package_manager, type: :string, default: nil, enum: %w[npm yarn bun pnpm],
         desc: "The package manager you want to use to install Inertia's npm packages"
 
@@ -39,8 +45,15 @@ module Inertia
       def install
         say "Installing Inertia's Rails adapter"
 
+        if inertia_resolved_version.version == "0"
+          say_error "Could not find the Inertia.js package version #{options[:inertia_version]}.", :red
+          exit(false)
+        end
+
         install_vite unless ruby_vite_installed?
 
+        install_typescript if typescript?
+
         install_tailwind if install_tailwind?
 
         install_inertia
@@ -62,6 +75,7 @@ module Inertia
 
         say "Installing Inertia npm packages"
         add_packages(*FRAMEWORKS[framework]["packages"])
+        add_packages(inertia_package)
 
         unless File.read(vite_config_path).include?(FRAMEWORKS[framework]["vite_plugin_import"])
           say "Adding Vite plugin for #{framework}"
@@ -69,32 +83,43 @@ module Inertia
           prepend_file vite_config_path, "#{FRAMEWORKS[framework]["vite_plugin_import"]}\n"
         end
 
-        say "Copying inertia.js entrypoint"
-        template "#{framework}/inertia.js", js_file_path("entrypoints/inertia.js")
+        say "Copying #{inertia_entrypoint} entrypoint"
+        template "#{framework}/#{inertia_entrypoint}", js_file_path("entrypoints/#{inertia_entrypoint}")
 
         if application_layout.exist?
-          say "Adding inertia.js script tag to the application layout"
+          say "Adding #{inertia_entrypoint} script tag to the application layout"
           headers = <<-ERB
-    <%= vite_javascript_tag "inertia" %>
+    <%= #{vite_tag} "inertia" %>
     <%= inertia_headers %>
           ERB
-          headers += "\n      <%= vite_stylesheet_tag \"application\" %>" if install_tailwind?
-
           insert_into_file application_layout.to_s, headers, after: "<%= vite_client_tag %>\n"
 
           if framework == "react" && !application_layout.read.include?("vite_react_refresh_tag")
             say "Adding Vite React Refresh tag to the application layout"
             insert_into_file application_layout.to_s, "<%= vite_react_refresh_tag %>\n    ", before: "<%= vite_client_tag %>"
-            gsub_file application_layout.to_s, /<title>/, "<title inertia>"
           end
+
+          gsub_file application_layout.to_s, /<title>/, "<title inertia>" unless svelte?
         else
           say_error "Could not find the application layout file. Please add the following tags manually:", :red
           say_error "-  <title>...</title>"
           say_error "+  <title inertia>...</title>"
           say_error "+  <%= inertia_headers %>"
           say_error "+  <%= vite_react_refresh_tag %>" if framework == "react"
-          say_error "+  <%= vite_javascript_tag \"inertia\" %>"
+          say_error "+  <%= #{vite_tag} \"inertia\" %>"
+        end
+      end
+
+      def install_typescript
+        say "Adding TypeScript support"
+        if svelte? && inertia_resolved_version.release < Gem::Version.new("1.3.0")
+          say "WARNING: @inertiajs/svelte < 1.3.0 does not support TypeScript (resolved version: #{inertia_resolved_version}).", :yellow
+          say "Skipping TypeScript support for @inertiajs/svelte", :yellow
+          @typescript = false
+          return
         end
+
+        add_packages(*FRAMEWORKS[framework]["packages_ts"])
       end
 
       def install_example_page
@@ -105,7 +130,8 @@ module Inertia
         route "get 'inertia-example', to: 'inertia_example#index'"
 
         say "Copying page assets"
-        FRAMEWORKS[framework]["copy_files"].each do |source, destination|
+        copy_files = FRAMEWORKS[framework]["copy_files"].merge(FRAMEWORKS[framework]["copy_files_#{typescript? ? "ts" : "js"}"])
+        copy_files.each do |source, destination|
           template "#{framework}/#{source}", file_path(destination % {js_destination_path: js_destination_path})
         end
       end
@@ -222,10 +248,36 @@ module Inertia
         @install_tailwind = options[:install_tailwind] || yes?("Would you like to install Tailwind CSS? (y/n)", :green)
       end
 
+      def typescript?
+        return @typescript if defined?(@typescript)
+
+        @typescript = options[:typescript] || yes?("Would you like to use TypeScript? (y/n)", :green)
+      end
+
+      def inertia_entrypoint
+        "inertia.#{typescript? ? "ts" : "js"}"
+      end
+
+      def vite_tag
+        typescript? ? "vite_typescript_tag" : "vite_javascript_tag"
+      end
+
+      def inertia_resolved_version
+        @inertia_resolved_version ||= Gem::Version.new(`npm show @inertiajs/core@#{options[:inertia_version]} version`.strip)
+      end
+
       def verbose?
         options[:verbose]
       end
 
+      def svelte?
+        framework.start_with? "svelte"
+      end
+
+      def inertia_package
+        "#{FRAMEWORKS[framework]["inertia_package"]}@#{options[:inertia_version]}"
+      end
+
       def framework
         @framework ||= options[:framework] || ask("What framework do you want to use with Inertia?", :green, limited_to: FRAMEWORKS.keys, default: "react")
       end

data/lib/generators/inertia/install/templates/react/InertiaExample.tsx

@@ -0,0 +1,60 @@
+import { Head } from '@inertiajs/react'
+import { useState } from 'react'
+
+import reactSvg from '/assets/react.svg'
+import inertiaSvg from '/assets/inertia.svg'
+import viteRubySvg from '/assets/vite_ruby.svg'
+
+import cs from './InertiaExample.module.css'
+
+export default function InertiaExample({ name }: { name: string }) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <Head title="Inertia + Vite Ruby + React Example" />
+
+      <div className={cs.root}>
+        <h1 className={cs.h1}>Hello {name}!</h1>
+
+        <div>
+          <a href="https://inertia-rails.netlify.app" target="_blank">
+            <img className={cs.logo} src={inertiaSvg} alt="Inertia logo" />
+          </a>
+          <a href="https://vite-ruby.netlify.app" target="_blank">
+            <img
+              className={`${cs.logo} ${cs.vite}`}
+              src={viteRubySvg}
+              alt="Vite Ruby logo"
+            />
+          </a>
+          <a href="https://react.dev" target="_blank">
+            <img
+              className={`${cs.logo} ${cs.react}`}
+              src={reactSvg}
+              alt="React logo"
+            />
+          </a>
+        </div>
+
+        <h2 className={cs.h2}>Inertia + Vite Ruby + React</h2>
+
+        <div className="card">
+          <button
+            className={cs.button}
+            onClick={() => setCount((count) => count + 1)}
+          >
+            count is {count}
+          </button>
+          <p>
+            Edit <code>app/frontend/pages/InertiaExample.jsx</code> and save to
+            test HMR
+          </p>
+        </div>
+        <p className={cs.readTheDocs}>
+          Click on the Inertia, Vite Ruby, and React logos to learn more
+        </p>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia/install/templates/react/inertia.ts

@@ -0,0 +1,36 @@
+import { createInertiaApp } from '@inertiajs/react'
+import { createElement, ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+type ResolvedComponent = { default: ReactNode, layout?: (page: ReactNode) => ReactNode }
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.tsx', { eager: true })
+    return pages[`../pages/${name}.tsx`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.tsx`]
+    // page.default.layout ||= (page) => createElement(Layout, null, page)
+    // return page
+  },
+
+  setup({ el, App, props }) {
+    const root = createRoot(el)
+
+    root.render(createElement(App, props))
+  },
+})

data/lib/generators/inertia/install/templates/react/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+  },
+  "include": ["<%= js_destination_path %>"]
+}

data/lib/generators/inertia/install/templates/react/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

data/lib/generators/inertia/install/templates/react/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

data/lib/generators/inertia/install/templates/react/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

data/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte

@@ -3,13 +3,9 @@
   import inertiaSvg from '/assets/inertia.svg'
   import viteRubySvg from '/assets/vite_ruby.svg'
 
-  export let name
+  let { name } = $props()
 
-  let count = 0
-
-  function handleClick() {
-    count += 1
-  }
+  let count = $state(0)
 </script>
 
 <svelte:head>
@@ -34,7 +30,7 @@
   <h2>Inertia + Vite Ruby + Svelte</h2>
 
   <div class="card">
-    <button on:click={handleClick}>
+    <button onclick={() => count++}>
       count is {count}
     </button>
     <p>

data/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+
+  let { name }: { name: string } = $props()
+
+  let count = $state(0)
+</script>
+
+<svelte:head>
+  <title>Inertia + Vite Ruby + Svelte Example</title>
+</svelte:head>
+
+<div class="inertia_example">
+  <h1>Hello {name}!</h1>
+
+  <div>
+    <a href="https://inertia-rails.netlify.app" target="_blank">
+      <img class="logo" src={inertiaSvg} alt="Inertia logo" />
+    </a>
+    <a href="https://vite-ruby.netlify.app" target="_blank">
+      <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank">
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+    </a>
+  </div>
+
+  <h2>Inertia + Vite Ruby + Svelte</h2>
+
+  <div class="card">
+    <button onclick={() => count++}>
+      count is {count}
+    </button>
+    <p>
+      Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
+      HMR
+    </p>
+  </div>
+  <p class="read-the-docs">
+    Click on the Inertia, Vite Ruby, and Svelte logos to learn more
+  </p>
+</div>
+
+<style>
+  .inertia_example {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #213547;
+    background-color: #ffffff;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+
+  h2 {
+    font-size: 2.6em;
+    line-height: 1.1;
+  }
+
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+  button:hover {
+    border-color: #646cff;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  .logo {
+    display: inline-block;
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.vite:hover {
+    filter: drop-shadow(0 0 2em #e4023baa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+</style>