diff --git a/lib/generators/inertia/install/frameworks.yml b/lib/generators/inertia/install/frameworks.yml index 7fdde8cf..3c7e6ecf 100644 --- a/lib/generators/inertia/install/frameworks.yml +++ b/lib/generators/inertia/install/frameworks.yml @@ -23,6 +23,7 @@ react: "InertiaExample.jsx": "%{js_destination_path}/pages/inertia_example/index.jsx" copy_files: "InertiaExample.module.css": "%{js_destination_path}/pages/inertia_example/index.module.css" + "../assets/rails.svg": "%{js_destination_path}/assets/rails.svg" "../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" @@ -39,6 +40,7 @@ vue: vite_plugin_import: "import vue from '@vitejs/plugin-vue'" vite_plugin_call: "vue()" copy_files: + "../assets/rails.svg": "%{js_destination_path}/assets/rails.svg" "../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" @@ -76,6 +78,7 @@ svelte: copy_files_js: "InertiaExample.svelte": "%{js_destination_path}/pages/inertia_example/index.svelte" copy_files: + "../assets/rails.svg": "%{js_destination_path}/assets/rails.svg" "../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" diff --git a/lib/generators/inertia/install/install_generator.rb b/lib/generators/inertia/install/install_generator.rb index 9964719f..d93541cd 100644 --- a/lib/generators/inertia/install/install_generator.rb +++ b/lib/generators/inertia/install/install_generator.rb @@ -164,6 +164,7 @@ def install_example_page say 'Adding a route for the example Inertia controller' route "get 'inertia-example', to: 'inertia_example#index'" + route "root 'inertia_example#index'" unless File.read(file_path('config/routes.rb')).match?(/^\s*root\s+/) say 'Copying page assets' copy_files = FRAMEWORKS[framework]['copy_files'].merge( diff --git a/lib/generators/inertia/install/templates/assets/rails.svg b/lib/generators/inertia/install/templates/assets/rails.svg new file mode 100644 index 00000000..92f66e7c --- /dev/null +++ b/lib/generators/inertia/install/templates/assets/rails.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lib/generators/inertia/install/templates/controller.rb b/lib/generators/inertia/install/templates/controller.rb index 369a3716..3792b4df 100644 --- a/lib/generators/inertia/install/templates/controller.rb +++ b/lib/generators/inertia/install/templates/controller.rb @@ -2,6 +2,11 @@ class InertiaExampleController < InertiaController def index - render inertia: { name: params.fetch(:name, 'World') } + render inertia: { + rails_version: Rails.version, + ruby_version: RUBY_DESCRIPTION, + rack_version: Rack.release, + inertia_rails_version: InertiaRails::VERSION, + } end end diff --git a/lib/generators/inertia/install/templates/react/InertiaExample.jsx b/lib/generators/inertia/install/templates/react/InertiaExample.jsx index aabe43f3..12bc34fe 100644 --- a/lib/generators/inertia/install/templates/react/InertiaExample.jsx +++ b/lib/generators/inertia/install/templates/react/InertiaExample.jsx @@ -1,60 +1,56 @@ import { Head } from '@inertiajs/react' -import { useState } from 'react' +import { version as react_version } from 'react' +import railsSvg from '/assets/rails.svg' import inertiaSvg from '/assets/inertia.svg' import reactSvg from '/assets/react.svg' -import viteRubySvg from '/assets/vite_ruby.svg' import cs from './index.module.css' -export default function InertiaExample({ name }) { - const [count, setCount] = useState(0) - +export default function InertiaExample({ rails_version, ruby_version, rack_version, inertia_rails_version }) { return ( - <> - - -
-

Hello {name}!

- -
- - Inertia logo - - - Vite Ruby logo - - - React logo - -
- -

Inertia + Vite Ruby + React

- -
- +
+ + + + +
+

- Edit app/frontend/pages/inertia_example/index.jsx and save to - test HMR + Edit <%= js_destination_path %>/pages/inertia_example/index.jsx and save to test HMR.

-

- Click on the Inertia, Vite Ruby, and React logos to learn more -

+ +
    +
  • +
      +
    • Rails version: {rails_version}
      • +
    • Rack version: {rack_version}
      • +
    +
    • +
  • Ruby version: {ruby_version}
    • +
  • +
      +
    • Inertia Rails version: {inertia_rails_version}
      • +
    • React version: {react_version}
      • +
    +
    • +
- +
) } diff --git a/lib/generators/inertia/install/templates/react/InertiaExample.module.css b/lib/generators/inertia/install/templates/react/InertiaExample.module.css index dea73ca3..1aae5e40 100644 --- a/lib/generators/inertia/install/templates/react/InertiaExample.module.css +++ b/lib/generators/inertia/install/templates/react/InertiaExample.module.css @@ -1,60 +1,52 @@ .root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; + box-sizing: border-box; + margin: 0; + padding: 0; + align-items: center; + background-color: #F0E7E9; + background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + color: #261B23; + display: flex; + flex-direction: column; + font-family: Sans-Serif; + font-size: calc(0.9em + 0.5vw); + font-style: normal; font-weight: 400; - color: #213547; - background-color: #ffffff; - max-width: 1280px; - margin: 0 auto; - padding: 2rem; + justify-content: center; + line-height: 1.25; + min-height: 100vh; 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; +@media (prefers-color-scheme: dark) { + .root { + background-color: #1a1a1a; + background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+); + color: #e0e0e0; + } } .logo { display: inline-block; - height: 6em; + height: 9.8vw; + min-height: 130px; padding: 1.5em; will-change: filter; transition: filter 300ms; + filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); } -.logo:hover { +.logo.inertia:hover { filter: drop-shadow(0 0 2em #646cffaa); } -.logo.vite:hover { - filter: drop-shadow(0 0 2em #e4023baa); -} .logo.react:hover { filter: drop-shadow(0 0 2em #61dafbaa); } +.logo.rails:hover { + filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6)); +} @keyframes logo-spin { from { @@ -71,10 +63,40 @@ } } +@media (prefers-color-scheme: dark) { + .logo { + filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08)); + } +} + .card { padding: 2em; + font-size: 0.7em; + color: #948e90; +} + +.footer { + bottom: 0; + left: 0; + margin: 0 2rem 2rem 2rem; + position: absolute; + right: 0; +} + +.footer ul { + list-style: none; +} + +.footer ul li { + display: inline; +} + +.footer ul ul li:after { + content: " | "; + font-weight: 300; + color: #948e90; } -.read-the-docs { - color: #888; +.footer ul ul li:last-child:after { + content: ""; } diff --git a/lib/generators/inertia/install/templates/react/InertiaExample.tsx b/lib/generators/inertia/install/templates/react/InertiaExample.tsx index 3c657e99..b5e66595 100644 --- a/lib/generators/inertia/install/templates/react/InertiaExample.tsx +++ b/lib/generators/inertia/install/templates/react/InertiaExample.tsx @@ -1,60 +1,59 @@ import { Head } from '@inertiajs/react' -import { useState } from 'react' +import { version as react_version } from 'react' +import railsSvg from '/assets/rails.svg' import inertiaSvg from '/assets/inertia.svg' import reactSvg from '/assets/react.svg' -import viteRubySvg from '/assets/vite_ruby.svg' import cs from './index.module.css' -export default function InertiaExample({ name }: { name: string }) { - const [count, setCount] = useState(0) - +export default function InertiaExample( + { rails_version, ruby_version, rack_version, inertia_rails_version }: + { rails_version: string, ruby_version: string, rack_version: string, inertia_rails_version: string } +) { return ( - <> - - -
-

Hello {name}!

- -
- - Inertia logo - - - Vite Ruby logo - - - React logo - -
- -

Inertia + Vite Ruby + React

- -
- +
+ + + + +
+

- Edit app/frontend/pages/inertia_example/index.tsx and save to - test HMR + Edit <%= js_destination_path %>/pages/inertia_example/index.jsx and save to test HMR.

-

- Click on the Inertia, Vite Ruby, and React logos to learn more -

+ +
    +
  • +
      +
    • Rails version: {rails_version}
      • +
    • Rack version: {rack_version}
      • +
    +
    • +
  • Ruby version: {ruby_version}
    • +
  • +
      +
    • Inertia Rails version: {inertia_rails_version}
      • +
    • React version: {react_version}
      • +
    +
    • +
- +
) } diff --git a/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte b/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte index 8c69883f..310e06a3 100644 --- a/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte +++ b/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte @@ -1,112 +1,146 @@ - Inertia + Vite Ruby + Svelte Example + Rails + Inertia + Svelte -
-

Hello {name}!

- -
- - +
+
+ -

Inertia + Vite Ruby + Svelte

+
+
+

+ Edit <%= js_destination_path %>/pages/inertia_example/index.svelte and save to test HMR. +

+
-
- -

- Edit app/frontend/pages/inertia_example/index.svelte and save to test - HMR -

+
    +
  • +
      +
    • Rails version: {rails_version}
      • +
    • Rack version: {rack_version}
      • +
    +
    • +
  • Ruby version: {ruby_version}
    • +
  • +
      +
    • Inertia Rails version: {inertia_rails_version}
      • +
    • Svelte version: {VERSION}
      • +
    +
    • +
-

- Click on the Inertia, Vite Ruby, and Svelte logos to learn more -

diff --git a/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte b/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte index 9ec790c8..66b24d4b 100644 --- a/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte +++ b/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte @@ -1,112 +1,147 @@ - Inertia + Vite Ruby + Svelte Example + Ruby on Rails + Inertia + Svelte -
-

Hello {name}!

- -
- - +
+
+ -

Inertia + Vite Ruby + Svelte

+
+
+

+ Edit <%= js_destination_path %>/pages/inertia_example/index.svelte and save to test HMR. +

+
-
- -

- Edit app/frontend/pages/inertia_example/index.svelte and save to test - HMR -

+
    +
  • +
      +
    • Rails version: {rails_version}
      • +
    • Rack version: {rack_version}
      • +
    +
    • +
  • Ruby version: {ruby_version}
    • +
  • +
      +
    • Inertia Rails version: {inertia_rails_version}
      • +
    • Svelte version: {VERSION}
      • +
    +
    • +
-

- Click on the Inertia, Vite Ruby, and Svelte logos to learn more -

diff --git a/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue b/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue index fc637a43..a6d93366 100644 --- a/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue +++ b/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue @@ -1,117 +1,154 @@ - + + diff --git a/lib/generators/inertia/install/templates/vue/InertiaExample.vue b/lib/generators/inertia/install/templates/vue/InertiaExample.vue index 49b4170d..088ff436 100644 --- a/lib/generators/inertia/install/templates/vue/InertiaExample.vue +++ b/lib/generators/inertia/install/templates/vue/InertiaExample.vue @@ -1,117 +1,154 @@ + + diff --git a/spec/generators/install/install_generator_spec.rb b/spec/generators/install/install_generator_spec.rb index f58a27a7..9db9f0f4 100644 --- a/spec/generators/install/install_generator_spec.rb +++ b/spec/generators/install/install_generator_spec.rb @@ -276,14 +276,15 @@ def expect_example_page_for(framework, ext: 'js') when :svelte file('pages/inertia_example/index.svelte') do if ext == 'ts' - contains('let { name }: { name: string } = $props()') + contains('let { rails_version, rack_version, ruby_version, inertia_rails_version }:') else - contains('let { name } = $props()') + contains('let { rails_version, rack_version, ruby_version, inertia_rails_version } = $props()') end end file('assets/svelte.svg') end + file('assets/rails.svg') file('assets/inertia.svg') file('assets/vite_ruby.svg') end