inertia_rails 3.13.0 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +17 -0
  3. data/lib/generators/inertia/install/frameworks.yml +3 -18
  4. data/lib/generators/inertia/install/install_generator.rb +51 -6
  5. data/lib/generators/inertia/install/templates/assets/rails.svg +9 -0
  6. data/lib/generators/inertia/install/templates/controller.rb +6 -1
  7. data/lib/generators/inertia/install/templates/react/InertiaExample.jsx +42 -46
  8. data/lib/generators/inertia/install/templates/react/InertiaExample.module.css +63 -41
  9. data/lib/generators/inertia/install/templates/react/InertiaExample.tsx +45 -46
  10. data/lib/generators/inertia/install/templates/react/inertia.jsx +1 -1
  11. data/lib/generators/inertia/install/templates/react/inertia.tsx +3 -3
  12. data/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte +103 -69
  13. data/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte +104 -69
  14. data/lib/generators/inertia/install/templates/svelte/inertia.js +1 -1
  15. data/lib/generators/inertia/install/templates/svelte/inertia.ts +1 -1
  16. data/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue +107 -70
  17. data/lib/generators/inertia/install/templates/vue/InertiaExample.vue +129 -92
  18. data/lib/generators/inertia/install/templates/vue/inertia.js +3 -3
  19. data/lib/generators/inertia/install/templates/vue/inertia.ts +3 -3
  20. data/lib/generators/inertia_templates/scaffold/templates/react/form.tsx.tt +3 -3
  21. data/lib/generators/inertia_templates/scaffold/templates/svelte/form.ts.svelte.tt +3 -3
  22. data/lib/generators/inertia_templates/scaffold/templates/svelte/new.svelte.tt +1 -1
  23. data/lib/generators/inertia_templates/scaffold/templates/svelte/new.ts.svelte.tt +1 -1
  24. data/lib/generators/inertia_templates/scaffold/templates/vue/form.ts.vue.tt +3 -3
  25. data/lib/generators/inertia_tw_templates/scaffold/templates/react/form.tsx.tt +3 -3
  26. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/form.ts.svelte.tt +3 -3
  27. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/new.svelte.tt +1 -2
  28. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/new.ts.svelte.tt +1 -1
  29. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/form.ts.vue.tt +3 -3
  30. data/lib/inertia_rails/version.rb +1 -1
  31. data/lib/inertia_rails.rb +1 -0
  32. metadata +3 -2
data/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte CHANGED
@@ -1,112 +1,146 @@
1
1
  <script>
2
+ import { VERSION } from 'svelte/compiler'
3
+
4
+ import railsSvg from '/assets/rails.svg'
2
5
  import svelteSvg from '/assets/svelte.svg'
3
6
  import inertiaSvg from '/assets/inertia.svg'
4
- import viteRubySvg from '/assets/vite_ruby.svg'
5
-
6
- let { name } = $props()
7
7
 
8
- let count = $state(0)
8
+ let { rails_version, rack_version, ruby_version, inertia_rails_version } = $props()
9
9
  </script>
10
10
 
11
11
  <svelte:head>
12
- <title>Inertia + Vite Ruby + Svelte Example</title>
12
+ <title>Rails + Inertia + Svelte</title>
13
13
  </svelte:head>
14
14
 
15
- <div class="inertia_example">
16
- <h1>Hello {name}!</h1>
17
-
18
- <div>
19
- <a href="https://inertia-rails.dev" target="_blank">
20
- <img class="logo" src={inertiaSvg} alt="Inertia logo" />
15
+ <div class="root">
16
+ <nav class="subNav">
17
+ <a href="https://rubyonrails.org" target="_blank">
18
+ <img class="logo rails" src={railsSvg} alt="Ruby on Rails Logo" />
21
19
  </a>
22
- <a href="https://vite-ruby.netlify.app" target="_blank">
23
- <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
20
+ <a href="https://inertia-rails.dev" target="_blank">
21
+ <img class="logo inertia" src={inertiaSvg} alt="Inertia logo" />
24
22
  </a>
25
23
  <a href="https://svelte.dev" target="_blank">
26
- <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
24
+ <img class="logo svelte" src={svelteSvg} alt="Svelte logo"/>
27
25
  </a>
28
- </div>
26
+ </nav>
29
27
 
30
- <h2>Inertia + Vite Ruby + Svelte</h2>
28
+ <div class="footer">
29
+ <div class="card">
30
+ <p>
31
+ Edit <code><%= js_destination_path %>/pages/inertia_example/index.svelte</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
32
+ </p>
33
+ </div>
31
34
 
32
- <div class="card">
33
- <button onclick={() => count++}>
34
- count is {count}
35
- </button>
36
- <p>
37
- Edit <code>app/frontend/pages/inertia_example/index.svelte</code> and save to test
38
- HMR
39
- </p>
35
+ <ul>
36
+ <li>
37
+ <ul>
38
+ <li><strong>Rails version:</strong> {rails_version}</li>
39
+ <li><strong>Rack version:</strong> {rack_version}</li>
40
+ </ul>
41
+ </li>
42
+ <li><strong>Ruby version:</strong> {ruby_version}</li>
43
+ <li>
44
+ <ul>
45
+ <li><strong>Inertia Rails version:</strong> {inertia_rails_version}</li>
46
+ <li><strong>Svelte version:</strong> {VERSION}</li>
47
+ </ul>
48
+ </li>
49
+ </ul>
40
50
  </div>
41
- <p class="read-the-docs">
42
- Click on the Inertia, Vite Ruby, and Svelte logos to learn more
43
- </p>
44
51
  </div>
45
52
 
46
53
  <style>
47
- .inertia_example {
48
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
49
- line-height: 1.5;
50
- font-weight: 400;
51
- color: #213547;
52
- background-color: #ffffff;
53
- max-width: 1280px;
54
- margin: 0 auto;
55
- padding: 2rem;
56
- text-align: center;
57
- }
58
-
59
- h1 {
60
- font-size: 3.2em;
61
- line-height: 1.1;
54
+ :global(body) {
55
+ margin: 0;
56
+ padding: 0;
62
57
  }
63
58
 
64
- h2 {
65
- font-size: 2.6em;
66
- line-height: 1.1;
59
+ .root {
60
+ box-sizing: border-box;
61
+ margin: 0;
62
+ padding: 0;
63
+ align-items: center;
64
+ background-color: #F0E7E9;
65
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
66
+ background-position: center center;
67
+ background-repeat: no-repeat;
68
+ background-size: cover;
69
+ color: #261B23;
70
+ display: flex;
71
+ flex-direction: column;
72
+ font-family: Sans-Serif;
73
+ font-size: calc(0.9em + 0.5vw);
74
+ font-style: normal;
75
+ font-weight: 400;
76
+ justify-content: center;
77
+ line-height: 1.25;
78
+ min-height: 100vh;
79
+ text-align: center;
67
80
  }
68
81
 
69
- button {
70
- border-radius: 8px;
71
- border: 1px solid transparent;
72
- padding: 0.6em 1.2em;
73
- font-size: 1em;
74
- font-weight: 500;
75
- font-family: inherit;
76
- background-color: #f9f9f9;
77
- cursor: pointer;
78
- transition: border-color 0.25s;
79
- }
80
- button:hover {
81
- border-color: #646cff;
82
- }
83
- button:focus,
84
- button:focus-visible {
85
- outline: 4px auto -webkit-focus-ring-color;
82
+ @media (prefers-color-scheme: dark) {
83
+ .root {
84
+ background-color: #1a1a1a;
85
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+);
86
+ color: #e0e0e0;
87
+ }
86
88
  }
87
89
 
88
90
  .logo {
89
91
  display: inline-block;
90
- height: 6em;
92
+ height: 9.8vw;
93
+ min-height: 130px;
91
94
  padding: 1.5em;
92
95
  will-change: filter;
93
96
  transition: filter 300ms;
97
+ filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
94
98
  }
95
- .logo:hover {
99
+ .logo.inertia:hover {
96
100
  filter: drop-shadow(0 0 2em #646cffaa);
97
101
  }
98
- .logo.vite:hover {
99
- filter: drop-shadow(0 0 2em #e4023baa);
100
- }
101
102
  .logo.svelte:hover {
102
103
  filter: drop-shadow(0 0 2em #ff3e00aa);
103
104
  }
105
+ .logo.rails:hover {
106
+ filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6));
107
+ }
108
+
109
+ @media (prefers-color-scheme: dark) {
110
+ .logo {
111
+ filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08));
112
+ }
113
+ }
104
114
 
105
115
  .card {
106
116
  padding: 2em;
117
+ font-size: 0.7em;
118
+ color: #948e90;
119
+ }
120
+
121
+ .footer {
122
+ bottom: 0;
123
+ left: 0;
124
+ margin: 0 2rem 2rem 2rem;
125
+ position: absolute;
126
+ right: 0;
127
+ }
128
+
129
+ .footer ul {
130
+ list-style: none;
131
+ }
132
+
133
+ .footer ul li {
134
+ display: inline;
135
+ }
136
+
137
+ .footer ul ul li:after {
138
+ content: " | ";
139
+ font-weight: 300;
140
+ color: #948e90;
107
141
  }
108
142
 
109
- .read-the-docs {
110
- color: #888;
143
+ .footer ul ul li:last-child:after {
144
+ content: "";
111
145
  }
112
146
  </style>
data/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte CHANGED
@@ -1,112 +1,147 @@
1
1
  <script lang="ts">
2
+ import { VERSION } from 'svelte/compiler'
3
+
4
+ import railsSvg from '/assets/rails.svg'
2
5
  import svelteSvg from '/assets/svelte.svg'
3
6
  import inertiaSvg from '/assets/inertia.svg'
4
- import viteRubySvg from '/assets/vite_ruby.svg'
5
-
6
- let { name }: { name: string } = $props()
7
7
 
8
- let count = $state(0)
8
+ let { rails_version, rack_version, ruby_version, inertia_rails_version }:
9
+ { rails_version: string, rack_version: string, ruby_version: string, inertia_rails_version: string } = $props()
9
10
  </script>
10
11
 
11
12
  <svelte:head>
12
- <title>Inertia + Vite Ruby + Svelte Example</title>
13
+ <title>Ruby on Rails + Inertia + Svelte</title>
13
14
  </svelte:head>
14
15
 
15
- <div class="inertia_example">
16
- <h1>Hello {name}!</h1>
17
-
18
- <div>
19
- <a href="https://inertia-rails.dev" target="_blank">
20
- <img class="logo" src={inertiaSvg} alt="Inertia logo" />
16
+ <div class="root">
17
+ <nav class="subNav">
18
+ <a href="https://rubyonrails.org" target="_blank">
19
+ <img class="logo rails" src={railsSvg} alt="Ruby on Rails Logo" />
21
20
  </a>
22
- <a href="https://vite-ruby.netlify.app" target="_blank">
23
- <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
21
+ <a href="https://inertia-rails.dev" target="_blank">
22
+ <img class="logo inertia" src={inertiaSvg} alt="Inertia logo" />
24
23
  </a>
25
24
  <a href="https://svelte.dev" target="_blank">
26
- <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
25
+ <img class="logo svelte" src={svelteSvg} alt="Svelte logo"/>
27
26
  </a>
28
- </div>
27
+ </nav>
29
28
 
30
- <h2>Inertia + Vite Ruby + Svelte</h2>
29
+ <div class="footer">
30
+ <div class="card">
31
+ <p>
32
+ Edit <code><%= js_destination_path %>/pages/inertia_example/index.svelte</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
33
+ </p>
34
+ </div>
31
35
 
32
- <div class="card">
33
- <button onclick={() => count++}>
34
- count is {count}
35
- </button>
36
- <p>
37
- Edit <code>app/frontend/pages/inertia_example/index.svelte</code> and save to test
38
- HMR
39
- </p>
36
+ <ul>
37
+ <li>
38
+ <ul>
39
+ <li><strong>Rails version:</strong> {rails_version}</li>
40
+ <li><strong>Rack version:</strong> {rack_version}</li>
41
+ </ul>
42
+ </li>
43
+ <li><strong>Ruby version:</strong> {ruby_version}</li>
44
+ <li>
45
+ <ul>
46
+ <li><strong>Inertia Rails version:</strong> {inertia_rails_version}</li>
47
+ <li><strong>Svelte version:</strong> {VERSION}</li>
48
+ </ul>
49
+ </li>
50
+ </ul>
40
51
  </div>
41
- <p class="read-the-docs">
42
- Click on the Inertia, Vite Ruby, and Svelte logos to learn more
43
- </p>
44
52
  </div>
45
53
 
46
54
  <style>
47
- .inertia_example {
48
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
49
- line-height: 1.5;
50
- font-weight: 400;
51
- color: #213547;
52
- background-color: #ffffff;
53
- max-width: 1280px;
54
- margin: 0 auto;
55
- padding: 2rem;
56
- text-align: center;
57
- }
58
-
59
- h1 {
60
- font-size: 3.2em;
61
- line-height: 1.1;
55
+ :global(body) {
56
+ margin: 0;
57
+ padding: 0;
62
58
  }
63
59
 
64
- h2 {
65
- font-size: 2.6em;
66
- line-height: 1.1;
60
+ .root {
61
+ box-sizing: border-box;
62
+ margin: 0;
63
+ padding: 0;
64
+ align-items: center;
65
+ background-color: #F0E7E9;
66
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
67
+ background-position: center center;
68
+ background-repeat: no-repeat;
69
+ background-size: cover;
70
+ color: #261B23;
71
+ display: flex;
72
+ flex-direction: column;
73
+ font-family: Sans-Serif;
74
+ font-size: calc(0.9em + 0.5vw);
75
+ font-style: normal;
76
+ font-weight: 400;
77
+ justify-content: center;
78
+ line-height: 1.25;
79
+ min-height: 100vh;
80
+ text-align: center;
67
81
  }
68
82
 
69
- button {
70
- border-radius: 8px;
71
- border: 1px solid transparent;
72
- padding: 0.6em 1.2em;
73
- font-size: 1em;
74
- font-weight: 500;
75
- font-family: inherit;
76
- background-color: #f9f9f9;
77
- cursor: pointer;
78
- transition: border-color 0.25s;
79
- }
80
- button:hover {
81
- border-color: #646cff;
82
- }
83
- button:focus,
84
- button:focus-visible {
85
- outline: 4px auto -webkit-focus-ring-color;
83
+ @media (prefers-color-scheme: dark) {
84
+ .root {
85
+ background-color: #1a1a1a;
86
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+);
87
+ color: #e0e0e0;
88
+ }
86
89
  }
87
90
 
88
91
  .logo {
89
92
  display: inline-block;
90
- height: 6em;
93
+ height: 9.8vw;
94
+ min-height: 130px;
91
95
  padding: 1.5em;
92
96
  will-change: filter;
93
97
  transition: filter 300ms;
98
+ filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
94
99
  }
95
- .logo:hover {
100
+ .logo.inertia:hover {
96
101
  filter: drop-shadow(0 0 2em #646cffaa);
97
102
  }
98
- .logo.vite:hover {
99
- filter: drop-shadow(0 0 2em #e4023baa);
100
- }
101
103
  .logo.svelte:hover {
102
104
  filter: drop-shadow(0 0 2em #ff3e00aa);
103
105
  }
106
+ .logo.rails:hover {
107
+ filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6));
108
+ }
109
+
110
+ @media (prefers-color-scheme: dark) {
111
+ .logo {
112
+ filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08));
113
+ }
114
+ }
104
115
 
105
116
  .card {
106
117
  padding: 2em;
118
+ font-size: 0.7em;
119
+ color: #948e90;
120
+ }
121
+
122
+ .footer {
123
+ bottom: 0;
124
+ left: 0;
125
+ margin: 0 2rem 2rem 2rem;
126
+ position: absolute;
127
+ right: 0;
128
+ }
129
+
130
+ .footer ul {
131
+ list-style: none;
132
+ }
133
+
134
+ .footer ul li {
135
+ display: inline;
136
+ }
137
+
138
+ .footer ul ul li:after {
139
+ content: " | ";
140
+ font-weight: 300;
141
+ color: #948e90;
107
142
  }
108
143
 
109
- .read-the-docs {
110
- color: #888;
144
+ .footer ul ul li:last-child:after {
145
+ content: "";
111
146
  }
112
147
  </style>
data/lib/generators/inertia/install/templates/svelte/inertia.js CHANGED
@@ -39,7 +39,7 @@ createInertiaApp({
39
39
 
40
40
  defaults: {
41
41
  form: {
42
- forceIndicesArrayFormatInFormData: true,
42
+ forceIndicesArrayFormatInFormData: false,
43
43
  },
44
44
  future: {
45
45
  useDataInertiaHeadAttribute: true,
data/lib/generators/inertia/install/templates/svelte/inertia.ts CHANGED
@@ -39,7 +39,7 @@ createInertiaApp({
39
39
 
40
40
  defaults: {
41
41
  form: {
42
- forceIndicesArrayFormatInFormData: true,
42
+ forceIndicesArrayFormatInFormData: false,
43
43
  },
44
44
  future: {
45
45
  useDataInertiaHeadAttribute: true,
data/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue CHANGED
@@ -1,117 +1,154 @@
1
1
  <template>
2
- <Head title="Inertia + Vite Ruby + Vue Example" />
2
+ <Head title="Ruby on Rails + Inertia + Vue" />
3
3
 
4
4
  <div class="root">
5
- <h1 class="h1">Hello {{ name }}!</h1>
6
-
7
- <div>
8
- <a href="https://inertia-rails.dev" target="_blank">
9
- <img class="logo" :src="inertiaSvg" alt="Inertia logo" />
5
+ <nav class="subNav">
6
+ <a href="https://rubyonrails.org" target="_blank">
7
+ <img class="logo rails" :src="railsSvg" alt="Ruby on Rails Logo" />
10
8
  </a>
11
- <a href="https://vite-ruby.netlify.app" target="_blank">
12
- <img class="logo vite" :src="viteRubySvg" alt="Vite Ruby logo" />
9
+ <a href="https://inertia-rails.dev" target="_blank">
10
+ <img class="logo inertia" :src="inertiaSvg" alt="Inertia logo" />
13
11
  </a>
14
12
  <a href="https://vuejs.org" target="_blank">
15
- <img class="logo vue" :src="vueSvg" alt="Vue logo" />
13
+ <img class="logo vue" :src="vueSvg" alt="Vue logo"/>
16
14
  </a>
17
- </div>
15
+ </nav>
18
16
 
19
- <h2 class="h2">Inertia + Vite Ruby + Vue</h2>
17
+ <div class="footer">
18
+ <div class="card">
19
+ <p>
20
+ Edit <code><%= js_destination_path %>/pages/inertia_example/index.ts.vue</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
21
+ </p>
22
+ </div>
20
23
 
21
- <div class="card">
22
- <button class="button" type="button" @click="count++">
23
- count is {{ count }}
24
- </button>
25
- <p>
26
- Edit <code>app/frontend/pages/inertia_example/index.vue</code> and save to test
27
- HMR
28
- </p>
24
+ <ul>
25
+ <li>
26
+ <ul>
27
+ <li><strong>Rails version:</strong> {{ rails_version }}</li>
28
+ <li><strong>Rack version:</strong> {{ rack_version }}</li>
29
+ </ul>
30
+ </li>
31
+ <li><strong>Ruby version:</strong> {{ ruby_version }}</li>
32
+ <li>
33
+ <ul>
34
+ <li><strong>Inertia Rails version:</strong> {{ inertia_rails_version }}</li>
35
+ <li><strong>Vue version:</strong> {{ vue_version }}</li>
36
+ </ul>
37
+ </li>
38
+ </ul>
29
39
  </div>
30
- <p class="readTheDocs">
31
- Click on the Inertia, Vite Ruby, and Vue logos to learn more
32
- </p>
33
40
  </div>
34
41
  </template>
35
42
 
36
- <script setup lang="ts">
43
+ <script setup>
37
44
  import { Head } from '@inertiajs/vue3'
38
- import { ref } from 'vue'
45
+ import { version as vue_version } from 'vue';
39
46
 
47
+ import railsSvg from '/assets/rails.svg'
40
48
  import inertiaSvg from '/assets/inertia.svg'
41
- import viteRubySvg from '/assets/vite_ruby.svg'
42
49
  import vueSvg from '/assets/vue.svg'
43
50
 
44
51
  defineProps({
45
- name: String,
52
+ rails_version: String,
53
+ rack_version: String,
54
+ ruby_version: String,
55
+ inertia_rails_version: String,
46
56
  })
47
-
48
- const count = ref(0)
49
57
  </script>
50
58
 
59
+ <style global>
60
+ body {
61
+ margin: 0;
62
+ padding: 0;
63
+ }
64
+ </style>
65
+
51
66
  <style scoped>
52
67
  .root {
53
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
54
- line-height: 1.5;
68
+ box-sizing: border-box;
69
+ margin: 0;
70
+ padding: 0;
71
+ align-items: center;
72
+ background-color: #F0E7E9;
73
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
74
+ background-position: center center;
75
+ background-repeat: no-repeat;
76
+ background-size: cover;
77
+ color: #261B23;
78
+ display: flex;
79
+ flex-direction: column;
80
+ font-family: Sans-Serif;
81
+ font-size: calc(0.9em + 0.5vw);
82
+ font-style: normal;
55
83
  font-weight: 400;
56
- color: #213547;
57
- background-color: #ffffff;
58
- max-width: 1280px;
59
- margin: 0 auto;
60
- padding: 2rem;
84
+ justify-content: center;
85
+ line-height: 1.25;
86
+ min-height: 100vh;
61
87
  text-align: center;
62
88
  }
63
89
 
64
- .h1 {
65
- font-size: 3.2em;
66
- line-height: 1.1;
67
- }
68
-
69
- .h2 {
70
- font-size: 2.6em;
71
- line-height: 1.1;
72
- }
73
-
74
- .button {
75
- border-radius: 8px;
76
- border: 1px solid transparent;
77
- padding: 0.6em 1.2em;
78
- font-size: 1em;
79
- font-weight: 500;
80
- font-family: inherit;
81
- background-color: #f9f9f9;
82
- cursor: pointer;
83
- transition: border-color 0.25s;
84
- }
85
- .button:hover {
86
- border-color: #646cff;
87
- }
88
- .button:focus,
89
- .button:focus-visible {
90
- outline: 4px auto -webkit-focus-ring-color;
90
+ @media (prefers-color-scheme: dark) {
91
+ .root {
92
+ background-color: #1a1a1a;
93
+ background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+);
94
+ color: #e0e0e0;
95
+ }
91
96
  }
92
97
 
93
98
  .logo {
94
99
  display: inline-block;
95
- height: 6em;
100
+ height: 9.8vw;
101
+ min-height: 130px;
96
102
  padding: 1.5em;
97
103
  will-change: filter;
98
104
  transition: filter 300ms;
105
+ filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
99
106
  }
100
- .logo:hover {
107
+ .logo.inertia:hover {
101
108
  filter: drop-shadow(0 0 2em #646cffaa);
102
109
  }
103
- .logo.vite:hover {
104
- filter: drop-shadow(0 0 2em #e4023baa);
105
- }
106
110
  .logo.vue:hover {
107
- filter: drop-shadow(0 0 2em #41b883aa);
111
+ filter: drop-shadow(0 0 2em #61dafbaa);
112
+ }
113
+ .logo.rails:hover {
114
+ filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6));
115
+ }
116
+
117
+ @media (prefers-color-scheme: dark) {
118
+ .logo {
119
+ filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08));
120
+ }
108
121
  }
109
122
 
110
123
  .card {
111
124
  padding: 2em;
125
+ font-size: 0.7em;
126
+ color: #948e90;
127
+ }
128
+
129
+ .footer {
130
+ bottom: 0;
131
+ left: 0;
132
+ margin: 0 2rem 2rem 2rem;
133
+ position: absolute;
134
+ right: 0;
135
+ }
136
+
137
+ .footer ul {
138
+ list-style: none;
139
+ }
140
+
141
+ .footer ul li {
142
+ display: inline;
143
+ }
144
+
145
+ .footer ul ul li:after {
146
+ content: " | ";
147
+ font-weight: 300;
148
+ color: #948e90;
112
149
  }
113
150
 
114
- .readTheDocs {
115
- color: #888;
151
+ .footer ul ul li:last-child:after {
152
+ content: "";
116
153
  }
117
154
  </style>