Skip to content

Commit 9241628

Browse files
bknolesbknoles
authored
Merge pull request #294 from capripot/ronan/inertia-example-revamp
Inertia example revamp
2 parents 86efb09 + 5316326 commit 9241628

File tree

12 files changed

+615
-436
lines changed

12 files changed

+615
-436
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ react:
1717
"InertiaExample.jsx": "%{js_destination_path}/pages/inertia_example/index.jsx"
1818
copy_files:
1919
"InertiaExample.module.css": "%{js_destination_path}/pages/inertia_example/index.module.css"
20+
"../assets/rails.svg": "%{js_destination_path}/assets/rails.svg"
2021
"../assets/react.svg": "%{js_destination_path}/assets/react.svg"
2122
"../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
2223
"../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
@@ -33,6 +34,7 @@ vue:
3334
vite_plugin_import: "import vue from '@vitejs/plugin-vue'"
3435
vite_plugin_call: "vue()"
3536
copy_files:
37+
"../assets/rails.svg": "%{js_destination_path}/assets/rails.svg"
3638
"../assets/vue.svg": "%{js_destination_path}/assets/vue.svg"
3739
"../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
3840
"../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
@@ -59,6 +61,7 @@ svelte:
5961
copy_files_js:
6062
"InertiaExample.svelte": "%{js_destination_path}/pages/inertia_example/index.svelte"
6163
copy_files:
64+
"../assets/rails.svg": "%{js_destination_path}/assets/rails.svg"
6265
"../assets/svelte.svg": "%{js_destination_path}/assets/svelte.svg"
6366
"../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
6467
"../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@ def install_example_page
180180

181181
say 'Adding a route for the example Inertia controller'
182182
route "get 'inertia-example', to: 'inertia_example#index'"
183+
route "root 'inertia_example#index'" unless File.read(file_path('config/routes.rb')).match?(/^\s*root\s+/)
183184

184185
say 'Copying page assets'
185186
copy_files = FRAMEWORKS[framework]['copy_files'].merge(

‎lib/generators/inertia/install/templates/assets/rails.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎lib/generators/inertia/install/templates/controller.rb‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22

33
class InertiaExampleController < InertiaController
44
def index
5-
render inertia: { name: params.fetch(:name, 'World') }
5+
render inertia: {
6+
rails_version: Rails.version,
7+
ruby_version: RUBY_DESCRIPTION,
8+
rack_version: Rack.release,
9+
inertia_rails_version: InertiaRails::VERSION,
10+
}
611
end
712
end

‎lib/generators/inertia/install/templates/react/InertiaExample.jsx‎

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,56 @@
11
import { Head } from '@inertiajs/react'
2-
import { useState } from 'react'
2+
import { version as react_version } from 'react'
33

4+
import railsSvg from '/assets/rails.svg'
45
import inertiaSvg from '/assets/inertia.svg'
56
import reactSvg from '/assets/react.svg'
6-
import viteRubySvg from '/assets/vite_ruby.svg'
77

88
import cs from './index.module.css'
99

10-
export default function InertiaExample({ name }) {
11-
const [count, setCount] = useState(0)
12-
10+
export default function InertiaExample({ rails_version, ruby_version, rack_version, inertia_rails_version }) {
1311
return (
14-
<>
15-
<Head title="Inertia + Vite Ruby + React Example" />
16-
17-
<div className={cs.root}>
18-
<h1 className={cs.h1}>Hello {name}!</h1>
19-
20-
<div>
21-
<a href="https://inertia-rails.dev" target="_blank">
22-
<img className={cs.logo} src={inertiaSvg} alt="Inertia logo" />
23-
</a>
24-
<a href="https://vite-ruby.netlify.app" target="_blank">
25-
<img
26-
className={`${cs.logo} ${cs.vite}`}
27-
src={viteRubySvg}
28-
alt="Vite Ruby logo"
29-
/>
30-
</a>
31-
<a href="https://react.dev" target="_blank">
32-
<img
33-
className={`${cs.logo} ${cs.react}`}
34-
src={reactSvg}
35-
alt="React logo"
36-
/>
37-
</a>
38-
</div>
39-
40-
<h2 className={cs.h2}>Inertia + Vite Ruby + React</h2>
41-
42-
<div className="card">
43-
<button
44-
className={cs.button}
45-
onClick={() => setCount((count) => count + 1)}
46-
>
47-
count is {count}
48-
</button>
12+
<div className={cs.root}>
13+
<Head title="Ruby on Rails + Inertia + React" />
14+
15+
<nav className={cs.subNav}>
16+
<a href="https://rubyonrails.org" target="_blank">
17+
<img className={`${cs.logo} ${cs.rails}`} alt="Ruby on Rails Logo" src={railsSvg} />
18+
</a>
19+
<a href="https://inertia-rails.dev" target="_blank">
20+
<img className={`${cs.logo} ${cs.inertia}`} src={inertiaSvg} alt="Inertia logo" />
21+
</a>
22+
<a href="https://react.dev" target="_blank">
23+
<img
24+
className={`${cs.logo} ${cs.react}`}
25+
src={reactSvg}
26+
alt="React logo"
27+
/>
28+
</a>
29+
</nav>
30+
31+
<div className={cs.footer}>
32+
<div className={cs.card}>
4933
<p>
50-
Edit <code>app/frontend/pages/inertia_example/index.jsx</code> and save to
51-
test HMR
34+
Edit <code><%= js_destination_path %>/pages/inertia_example/index.jsx</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
5235
</p>
5336
</div>
54-
<p className={cs.readTheDocs}>
55-
Click on the Inertia, Vite Ruby, and React logos to learn more
56-
</p>
37+
38+
<ul>
39+
<li>
40+
<ul>
41+
<li><strong>Rails version:</strong> {rails_version}</li>
42+
<li><strong>Rack version:</strong> {rack_version}</li>
43+
</ul>
44+
</li>
45+
<li><strong>Ruby version:</strong> {ruby_version}</li>
46+
<li>
47+
<ul>
48+
<li><strong>Inertia Rails version:</strong> {inertia_rails_version}</li>
49+
<li><strong>React version:</strong> {react_version}</li>
50+
</ul>
51+
</li>
52+
</ul>
5753
</div>
58-
</>
54+
</div>
5955
)
6056
}

‎lib/generators/inertia/install/templates/react/InertiaExample.module.css‎

Lines changed: 63 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,52 @@
11
.root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
align-items: center;
6+
background-color: #F0E7E9;
7+
background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
8+
background-position: center center;
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
color: #261B23;
12+
display: flex;
13+
flex-direction: column;
14+
font-family: Sans-Serif;
15+
font-size: calc(0.9em + 0.5vw);
16+
font-style: normal;
417
font-weight: 400;
5-
color: #213547;
6-
background-color: #ffffff;
7-
max-width: 1280px;
8-
margin: 0 auto;
9-
padding: 2rem;
18+
justify-content: center;
19+
line-height: 1.25;
20+
min-height: 100vh;
1021
text-align: center;
1122
}
1223

13-
.h1 {
14-
font-size: 3.2em;
15-
line-height: 1.1;
16-
}
17-
18-
.h2 {
19-
font-size: 2.6em;
20-
line-height: 1.1;
21-
}
22-
23-
.button {
24-
border-radius: 8px;
25-
border: 1px solid transparent;
26-
padding: 0.6em 1.2em;
27-
font-size: 1em;
28-
font-weight: 500;
29-
font-family: inherit;
30-
background-color: #f9f9f9;
31-
cursor: pointer;
32-
transition: border-color 0.25s;
33-
}
34-
.button:hover {
35-
border-color: #646cff;
36-
}
37-
.button:focus,
38-
.button:focus-visible {
39-
outline: 4px auto -webkit-focus-ring-color;
24+
@media (prefers-color-scheme: dark) {
25+
.root {
26+
background-color: #1a1a1a;
27+
background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+);
28+
color: #e0e0e0;
29+
}
4030
}
4131

4232
.logo {
4333
display: inline-block;
44-
height: 6em;
34+
height: 9.8vw;
35+
min-height: 130px;
4536
padding: 1.5em;
4637
will-change: filter;
4738
transition: filter 300ms;
39+
filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
4840
}
49-
.logo:hover {
41+
.logo.inertia:hover {
5042
filter: drop-shadow(0 0 2em #646cffaa);
5143
}
52-
.logo.vite:hover {
53-
filter: drop-shadow(0 0 2em #e4023baa);
54-
}
5544
.logo.react:hover {
5645
filter: drop-shadow(0 0 2em #61dafbaa);
5746
}
47+
.logo.rails:hover {
48+
filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6));
49+
}
5850

5951
@keyframes logo-spin {
6052
from {
@@ -71,10 +63,40 @@
7163
}
7264
}
7365

66+
@media (prefers-color-scheme: dark) {
67+
.logo {
68+
filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08));
69+
}
70+
}
71+
7472
.card {
7573
padding: 2em;
74+
font-size: 0.7em;
75+
color: #948e90;
76+
}
77+
78+
.footer {
79+
bottom: 0;
80+
left: 0;
81+
margin: 0 2rem 2rem 2rem;
82+
position: absolute;
83+
right: 0;
84+
}
85+
86+
.footer ul {
87+
list-style: none;
88+
}
89+
90+
.footer ul li {
91+
display: inline;
92+
}
93+
94+
.footer ul ul li:after {
95+
content: " | ";
96+
font-weight: 300;
97+
color: #948e90;
7698
}
7799

78-
.read-the-docs {
79-
color: #888;
100+
.footer ul ul li:last-child:after {
101+
content: "";
80102
}

0 commit comments

Comments
 (0)