rails_app_generator 0.1.4 → 0.1.7
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.
- checksums.yaml +4 -4
- data/.builders/generators/project-plan.rb +8 -4
- data/CHANGELOG.md +21 -0
- data/after_templates/README.md +16 -1
- data/after_templates/rag_tailwind_emulating_bootstrap/Procfile.dev +3 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/application.html.erb +20 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/application.tailwind.css +514 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/application_controller.rb +15 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/home/_example.html.erb +285 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/home/bootstrap.html.erb +5 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/home/home_controller.rb +12 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/home/index.html.erb +0 -0
- data/after_templates/rag_tailwind_emulating_bootstrap/home/tailwind.html.erb +5 -0
- data/after_templates/rag_tailwind_emulating_bootstrap.rb +37 -0
- data/after_templates/rag_tailwind_hotwire_flash.rb +23 -0
- data/after_templates/rag_tailwind_hotwire_form_search/_theme_changer.html.erb +31 -31
- data/after_templates/rag_tailwind_hotwire_form_search/application_helper.rb +0 -2
- data/after_templates/rag_tailwind_hotwire_form_search/index.html.erb +0 -1
- data/after_templates/rag_tailwind_hotwire_form_search/search_controller.js +16 -0
- data/after_templates/rag_tailwind_hotwire_form_search/theme_changer_controller.js +13 -0
- data/after_templates/rag_tailwind_hotwire_form_search.rb +12 -1
- data/docs/images/tailwind.png +0 -0
- data/docs/images/tailwind_daisyui.png +0 -0
- data/docs/images/tailwind_emulating_bootstrap.png +0 -0
- data/docs/images/tailwind_hotwire.png +0 -0
- data/docs/images/tailwind_hotwire_form.png +0 -0
- data/docs/images/tailwind_hotwire_form_search.png +0 -0
- data/docs/project-plan/project.drawio +46 -34
- data/docs/project-plan/project_done.svg +1 -1
- data/docs/project-plan/project_in_progress.svg +1 -1
- data/docs/project-plan/project_todo.svg +1 -1
- data/docs/videos.md +43 -0
- data/lib/rails_app_generator/app_generator.rb +49 -18
- data/lib/rails_app_generator/version.rb +1 -1
- data/package-lock.json +2 -2
- data/package.json +1 -1
- data/profiles/rag-tailwind-emulating-bootstrap.json +12 -0
- data/profiles/rag-tailwind-hotwire-flash.json +11 -0
- metadata +24 -2
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
<%#
|
|
2
|
+
The components were found here: https://tailwindcss.com/docs/customizing-components/
|
|
3
|
+
Another useful tool for inferring tailwind classes for components is here: https://usewindy.com/
|
|
4
|
+
%>
|
|
5
|
+
|
|
6
|
+
<h2 class="text-3xl leading-tight mb-2">Alerts</h2>
|
|
7
|
+
|
|
8
|
+
<div class="alert alert-primary">
|
|
9
|
+
A simple primary alert‚ check it out!
|
|
10
|
+
</div>
|
|
11
|
+
<div class="alert alert-secondary">
|
|
12
|
+
A simple secondary alert‚ check it out!
|
|
13
|
+
</div>
|
|
14
|
+
<div class="alert alert-success">
|
|
15
|
+
A simple success alert‚ check it out!
|
|
16
|
+
</div>
|
|
17
|
+
<div class="alert alert-danger">
|
|
18
|
+
A simple danger alert‚ check it out!
|
|
19
|
+
</div>
|
|
20
|
+
<div class="alert alert-warning">
|
|
21
|
+
A simple warning alert‚ check it out!
|
|
22
|
+
</div>
|
|
23
|
+
<div class="alert alert-info">
|
|
24
|
+
A simple info alert‚ check it out!
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<h2>Buttons</h2>
|
|
28
|
+
|
|
29
|
+
<button type="button" class="btn btn-primary">Primary</button>
|
|
30
|
+
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
31
|
+
<button type="button" class="btn btn-success">Success</button>
|
|
32
|
+
<button type="button" class="btn btn-danger">Danger</button>
|
|
33
|
+
<button type="button" class="btn btn-warning">Warning</button>
|
|
34
|
+
<button type="button" class="btn btn-info">Info</button>
|
|
35
|
+
<button type="button" class="btn btn-light">Light</button>
|
|
36
|
+
<button type="button" class="btn btn-dark">Dark</button>
|
|
37
|
+
<button type="button" class="btn btn-link">Link</button>
|
|
38
|
+
|
|
39
|
+
<br><br>
|
|
40
|
+
|
|
41
|
+
<h2>Cards</h2>
|
|
42
|
+
|
|
43
|
+
<div class="card" style="width: 18rem;">
|
|
44
|
+
<img src="https://dummyimage.com/640x4:3/" class="card-img-top" alt="...">
|
|
45
|
+
<div class="card-body">
|
|
46
|
+
<h5 class="card-title">Card title</h5>
|
|
47
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
48
|
+
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<br><br>
|
|
53
|
+
|
|
54
|
+
<div class="card">
|
|
55
|
+
<div class="card-body">
|
|
56
|
+
This is some text within a card body.
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<br><br>
|
|
61
|
+
|
|
62
|
+
<div class="card" style="width: 18rem;">
|
|
63
|
+
<div class="card-body">
|
|
64
|
+
<h5 class="card-title">Card title</h5>
|
|
65
|
+
<h6 class="card-subtitle mb-2 text-gray-600">Card subtitle</h6>
|
|
66
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
67
|
+
<a href="#" class="card-link">Card link</a>
|
|
68
|
+
<a href="#" class="card-link">Another link</a>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<br>
|
|
73
|
+
|
|
74
|
+
<h2>Dropdowns</h2>
|
|
75
|
+
|
|
76
|
+
<div class="dropdown">
|
|
77
|
+
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
78
|
+
Dropdown button
|
|
79
|
+
</button>
|
|
80
|
+
<div class="dropdown-menu">
|
|
81
|
+
<a class="dropdown-item" href="#">Action</a>
|
|
82
|
+
<a class="dropdown-item" href="#">Another action</a>
|
|
83
|
+
<div class="dropdown-divider"></div>
|
|
84
|
+
<a class="dropdown-item" href="#">Something else here</a>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<br>
|
|
89
|
+
|
|
90
|
+
<h2>Forms</h2>
|
|
91
|
+
|
|
92
|
+
<form>
|
|
93
|
+
<div class="form-group">
|
|
94
|
+
<label for="exampleInputEmail1">Email address</label>
|
|
95
|
+
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
|
96
|
+
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="form-group">
|
|
99
|
+
<label for="exampleInputPassword1">Password</label>
|
|
100
|
+
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
101
|
+
</div>
|
|
102
|
+
<div class="form-group form-check">
|
|
103
|
+
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
|
104
|
+
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
|
105
|
+
</div>
|
|
106
|
+
<button type="submit" class="btn btn-primary">Submit</button>
|
|
107
|
+
</form>
|
|
108
|
+
|
|
109
|
+
<br>
|
|
110
|
+
<br>
|
|
111
|
+
|
|
112
|
+
<h2 class="text-3xl leading-tight mb-2">List Groups</h2>
|
|
113
|
+
|
|
114
|
+
<ul class="list-group">
|
|
115
|
+
<li class="list-group-item active">Cras justo odio</li>
|
|
116
|
+
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
117
|
+
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
118
|
+
<li class="list-group-item">Vestibulum at eros</li>
|
|
119
|
+
</ul>
|
|
120
|
+
|
|
121
|
+
<br>
|
|
122
|
+
<br>
|
|
123
|
+
|
|
124
|
+
<div class="list-group">
|
|
125
|
+
<a href="#" class="list-group-item list-group-item-action active">
|
|
126
|
+
Cras justo odio
|
|
127
|
+
</a>
|
|
128
|
+
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
|
129
|
+
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
|
130
|
+
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<br>
|
|
134
|
+
<br>
|
|
135
|
+
|
|
136
|
+
<h2 class="text-3xl leading-tight mb-2">Modals</h2>
|
|
137
|
+
|
|
138
|
+
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
|
|
139
|
+
<div class="modal-dialog" role="document">
|
|
140
|
+
<div class="modal-content">
|
|
141
|
+
<div class="modal-header">
|
|
142
|
+
<h5 class="modal-title">Modal title</h5>
|
|
143
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
144
|
+
<span aria-hidden="true">×</span>
|
|
145
|
+
</button>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="modal-body">
|
|
148
|
+
<p>Modal body text goes here.</p>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="modal-footer">
|
|
151
|
+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
152
|
+
<button type="button" class="btn btn-primary">Save changes</button>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">
|
|
159
|
+
Launch simple modal
|
|
160
|
+
</button>
|
|
161
|
+
|
|
162
|
+
<br>
|
|
163
|
+
<br>
|
|
164
|
+
|
|
165
|
+
<h2>Navbars</h2>
|
|
166
|
+
|
|
167
|
+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
168
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
|
169
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
|
170
|
+
<span class="navbar-toggler-icon"></span>
|
|
171
|
+
</button>
|
|
172
|
+
<div class="collapse navbar-collapse show" id="navbarNavAltMarkup">
|
|
173
|
+
<div class="navbar-nav">
|
|
174
|
+
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
|
175
|
+
<a class="nav-item nav-link" href="#">Features</a>
|
|
176
|
+
<a class="nav-item nav-link" href="#">Pricing</a>
|
|
177
|
+
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</nav>
|
|
181
|
+
|
|
182
|
+
<br>
|
|
183
|
+
|
|
184
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
185
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
|
186
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
|
187
|
+
<span class="navbar-toggler-icon"></span>
|
|
188
|
+
</button>
|
|
189
|
+
<div class="collapse navbar-collapse show" id="navbarNavAltMarkup">
|
|
190
|
+
<div class="navbar-nav">
|
|
191
|
+
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
|
192
|
+
<a class="nav-item nav-link" href="#">Features</a>
|
|
193
|
+
<a class="nav-item nav-link" href="#">Pricing</a>
|
|
194
|
+
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
</nav>
|
|
198
|
+
|
|
199
|
+
<br>
|
|
200
|
+
<nav class="navbar navbar-light bg-light">
|
|
201
|
+
<a class="navbar-brand">Navbar</a>
|
|
202
|
+
<form class="form-inline">
|
|
203
|
+
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
|
204
|
+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
|
205
|
+
</form>
|
|
206
|
+
</nav>
|
|
207
|
+
|
|
208
|
+
<br>
|
|
209
|
+
|
|
210
|
+
<nav class="navbar navbar-dark bg-dark">
|
|
211
|
+
<a class="navbar-brand">Navbar</a>
|
|
212
|
+
<form class="form-inline">
|
|
213
|
+
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
|
214
|
+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
|
215
|
+
</form>
|
|
216
|
+
</nav>
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
<br>
|
|
220
|
+
|
|
221
|
+
<h2>Tables</h2>
|
|
222
|
+
|
|
223
|
+
<table class="table">
|
|
224
|
+
<thead>
|
|
225
|
+
<tr>
|
|
226
|
+
<th scope="col">#</th>
|
|
227
|
+
<th scope="col">First</th>
|
|
228
|
+
<th scope="col">Last</th>
|
|
229
|
+
<th scope="col">Handle</th>
|
|
230
|
+
</tr>
|
|
231
|
+
</thead>
|
|
232
|
+
<tbody>
|
|
233
|
+
<tr>
|
|
234
|
+
<th scope="row">1</th>
|
|
235
|
+
<td>Mark</td>
|
|
236
|
+
<td>Otto</td>
|
|
237
|
+
<td>@mdo</td>
|
|
238
|
+
</tr>
|
|
239
|
+
<tr>
|
|
240
|
+
<th scope="row">2</th>
|
|
241
|
+
<td>Jacob</td>
|
|
242
|
+
<td>Thornton</td>
|
|
243
|
+
<td>@fat</td>
|
|
244
|
+
</tr>
|
|
245
|
+
<tr>
|
|
246
|
+
<th scope="row">3</th>
|
|
247
|
+
<td>Larry</td>
|
|
248
|
+
<td>the Bird</td>
|
|
249
|
+
<td>@twitter</td>
|
|
250
|
+
</tr>
|
|
251
|
+
</tbody>
|
|
252
|
+
</table>
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
<br><br>
|
|
256
|
+
|
|
257
|
+
<table class="table table-bordered">
|
|
258
|
+
<thead>
|
|
259
|
+
<tr>
|
|
260
|
+
<th scope="col">#</th>
|
|
261
|
+
<th scope="col">First</th>
|
|
262
|
+
<th scope="col">Last</th>
|
|
263
|
+
<th scope="col">Handle</th>
|
|
264
|
+
</tr>
|
|
265
|
+
</thead>
|
|
266
|
+
<tbody>
|
|
267
|
+
<tr>
|
|
268
|
+
<th scope="row">1</th>
|
|
269
|
+
<td>Mark</td>
|
|
270
|
+
<td>Otto</td>
|
|
271
|
+
<td>@mdo</td>
|
|
272
|
+
</tr>
|
|
273
|
+
<tr>
|
|
274
|
+
<th scope="row">2</th>
|
|
275
|
+
<td>Jacob</td>
|
|
276
|
+
<td>Thornton</td>
|
|
277
|
+
<td>@fat</td>
|
|
278
|
+
</tr>
|
|
279
|
+
<tr>
|
|
280
|
+
<th scope="row">3</th>
|
|
281
|
+
<td colspan="2">Larry the Bird</td>
|
|
282
|
+
<td>@twitter</td>
|
|
283
|
+
</tr>
|
|
284
|
+
</tbody>
|
|
285
|
+
</table>
|
|
File without changes
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
# Rails 7 using Tailwind CSS and Reusable Styles
|
|
4
|
+
|
|
5
|
+
require 'pry'
|
|
6
|
+
|
|
7
|
+
self.local_template_path = File.join(File.dirname(__FILE__), File.basename(__FILE__, '.*'))
|
|
8
|
+
|
|
9
|
+
gac 'base rails 7 image created'
|
|
10
|
+
|
|
11
|
+
add_controller('home', 'index', 'bootstrap', 'tailwind')
|
|
12
|
+
route("root 'home#index'")
|
|
13
|
+
|
|
14
|
+
css_install('tailwind')
|
|
15
|
+
css_install('bootstrap')
|
|
16
|
+
|
|
17
|
+
force_copy
|
|
18
|
+
|
|
19
|
+
copy_file 'home/index.html.erb' , 'app/views/home/index.html.erb'
|
|
20
|
+
copy_file 'home/bootstrap.html.erb' , 'app/views/home/bootstrap.html.erb'
|
|
21
|
+
copy_file 'home/tailwind.html.erb' , 'app/views/home/tailwind.html.erb'
|
|
22
|
+
copy_file 'home/_example.html.erb' , 'app/views/home/_example.html.erb'
|
|
23
|
+
copy_file 'home/home_controller.rb' , 'app/controllers/home_controller.rb'
|
|
24
|
+
|
|
25
|
+
copy_file 'application.html.erb' , 'app/views/layouts/application.html.erb'
|
|
26
|
+
copy_file 'application_controller.rb' , 'app/controllers/application_controller.rb'
|
|
27
|
+
copy_file 'application.tailwind.css' , 'app/assets/stylesheets/application.tailwind.css'
|
|
28
|
+
copy_file 'Procfile.dev' , 'Procfile.dev'
|
|
29
|
+
|
|
30
|
+
replacement_script = <<-JSON
|
|
31
|
+
"build:css_bootstrap": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application_bootstrap.css --no-source-map --load-path=node_modules",
|
|
32
|
+
"build:css_tailwind": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application_tailwind.css --minify"
|
|
33
|
+
JSON
|
|
34
|
+
|
|
35
|
+
gsub_file 'package.json', /^(.*?)"build:css"(.*?)$/, replacement_script
|
|
36
|
+
|
|
37
|
+
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
# Rails 7 hotwire and flash messages
|
|
4
|
+
|
|
5
|
+
require 'pry'
|
|
6
|
+
|
|
7
|
+
self.local_template_path = File.join(File.dirname(__FILE__), File.basename(__FILE__, '.*'))
|
|
8
|
+
|
|
9
|
+
gac 'base rails 7 image created'
|
|
10
|
+
|
|
11
|
+
add_controller('home', 'index', 'about')
|
|
12
|
+
route("root 'home#index'")
|
|
13
|
+
|
|
14
|
+
after_bundle do
|
|
15
|
+
setup_db
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
def setup_db
|
|
19
|
+
add_scaffold('title', 'body:text')
|
|
20
|
+
db_migrate
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
|
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
<div class="dropdown">
|
|
2
2
|
<label tabindex="0" class="btn m-1">Select Theme</label>
|
|
3
|
-
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
|
|
4
|
-
<li data-value="">Default</li>
|
|
5
|
-
<li data-value="aqua">Aqua</li>
|
|
6
|
-
<li data-value="black">Black</li>
|
|
7
|
-
<li data-value="bumblebee">Bumblebee</li>
|
|
8
|
-
<li data-value="cmyk">Cmyk</li>
|
|
9
|
-
<li data-value="corporate">Corporate</li>
|
|
10
|
-
<li data-value="cupcake">Cupcake</li>
|
|
11
|
-
<li data-value="cyberpunk">Cyberpunk</li>
|
|
12
|
-
<li data-value="dark">Dark</li>
|
|
13
|
-
<li data-value="dracula">Dracula</li>
|
|
14
|
-
<li data-value="emerald">Emerald</li>
|
|
15
|
-
<li data-value="fantasy">Fantasy</li>
|
|
16
|
-
<li data-value="forest">Forest</li>
|
|
17
|
-
<li data-value="garden">Garden</li>
|
|
18
|
-
<li data-value="halloween">Halloween</li>
|
|
19
|
-
<li data-value="light">Light</li>
|
|
20
|
-
<li data-value="lofi">Lofi</li>
|
|
21
|
-
<li data-value="luxury">Luxury</li>
|
|
22
|
-
<li data-value="pastel">Pastel</li>
|
|
23
|
-
<li data-value="retro">Retro</li>
|
|
24
|
-
<li data-value="synthwave">Synthwave</li>
|
|
25
|
-
<li data-value="valentine">Valentine</li>
|
|
26
|
-
<li data-value="wireframe">Wireframe</li>
|
|
27
|
-
<li data-value="autumn">Autumn</li>
|
|
28
|
-
<li data-value="business">Business</li>
|
|
29
|
-
<li data-value="acid">Acid</li>
|
|
30
|
-
<li data-value="lemonade">Lemonade</li>
|
|
31
|
-
<li data-value="night">Night</li>
|
|
32
|
-
<li data-value="coffee">Coffee</li>
|
|
33
|
-
<li data-value="winter">Winter</li>
|
|
3
|
+
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52" data-controller='theme-changer' >
|
|
4
|
+
<li data-value="" data-action="click->theme-changer#select">Default</li>
|
|
5
|
+
<li data-value="aqua" data-action="click->theme-changer#select">Aqua</li>
|
|
6
|
+
<li data-value="black" data-action="click->theme-changer#select">Black</li>
|
|
7
|
+
<li data-value="bumblebee" data-action="click->theme-changer#select">Bumblebee</li>
|
|
8
|
+
<li data-value="cmyk" data-action="click->theme-changer#select">Cmyk</li>
|
|
9
|
+
<li data-value="corporate" data-action="click->theme-changer#select">Corporate</li>
|
|
10
|
+
<li data-value="cupcake" data-action="click->theme-changer#select">Cupcake</li>
|
|
11
|
+
<li data-value="cyberpunk" data-action="click->theme-changer#select">Cyberpunk</li>
|
|
12
|
+
<li data-value="dark" data-action="click->theme-changer#select">Dark</li>
|
|
13
|
+
<li data-value="dracula" data-action="click->theme-changer#select">Dracula</li>
|
|
14
|
+
<li data-value="emerald" data-action="click->theme-changer#select">Emerald</li>
|
|
15
|
+
<li data-value="fantasy" data-action="click->theme-changer#select">Fantasy</li>
|
|
16
|
+
<li data-value="forest" data-action="click->theme-changer#select">Forest</li>
|
|
17
|
+
<li data-value="garden" data-action="click->theme-changer#select">Garden</li>
|
|
18
|
+
<li data-value="halloween" data-action="click->theme-changer#select">Halloween</li>
|
|
19
|
+
<li data-value="light" data-action="click->theme-changer#select">Light</li>
|
|
20
|
+
<li data-value="lofi" data-action="click->theme-changer#select">Lofi</li>
|
|
21
|
+
<li data-value="luxury" data-action="click->theme-changer#select">Luxury</li>
|
|
22
|
+
<li data-value="pastel" data-action="click->theme-changer#select">Pastel</li>
|
|
23
|
+
<li data-value="retro" data-action="click->theme-changer#select">Retro</li>
|
|
24
|
+
<li data-value="synthwave" data-action="click->theme-changer#select">Synthwave</li>
|
|
25
|
+
<li data-value="valentine" data-action="click->theme-changer#select">Valentine</li>
|
|
26
|
+
<li data-value="wireframe" data-action="click->theme-changer#select">Wireframe</li>
|
|
27
|
+
<li data-value="autumn" data-action="click->theme-changer#select">Autumn</li>
|
|
28
|
+
<li data-value="business" data-action="click->theme-changer#select">Business</li>
|
|
29
|
+
<li data-value="acid" data-action="click->theme-changer#select">Acid</li>
|
|
30
|
+
<li data-value="lemonade" data-action="click->theme-changer#select">Lemonade</li>
|
|
31
|
+
<li data-value="night" data-action="click->theme-changer#select">Night</li>
|
|
32
|
+
<li data-value="coffee" data-action="click->theme-changer#select">Coffee</li>
|
|
33
|
+
<li data-value="winter" data-action="click->theme-changer#select">Winter</li>
|
|
34
34
|
</select>
|
|
35
35
|
</div>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
|
+
import debounce from "debounce";
|
|
3
|
+
|
|
4
|
+
// Connects to data-controller="search"
|
|
5
|
+
export default class extends Controller {
|
|
6
|
+
initialize() {
|
|
7
|
+
this.submit = debounce(this.submit.bind(this), 300);
|
|
8
|
+
}
|
|
9
|
+
connect() {
|
|
10
|
+
console.log('Search');
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
submit(_event) {
|
|
14
|
+
this.element.requestSubmit();
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
|
2
|
+
|
|
3
|
+
// Connects to data-controller="theme-changer"
|
|
4
|
+
export default class extends Controller {
|
|
5
|
+
connect() {
|
|
6
|
+
// console.log('Theme Changer');
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
select(event) {
|
|
10
|
+
var html = document.querySelector('html');
|
|
11
|
+
html.setAttribute("data-theme", event.target.getAttribute('data-value'));
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -6,6 +6,15 @@
|
|
|
6
6
|
# This builds on top of: Ruby on Rails Forms With Hotwire
|
|
7
7
|
# https://www.youtube.com/watch?v=-n7IbUFKjoM
|
|
8
8
|
|
|
9
|
+
require 'pry'
|
|
10
|
+
# frozen_string_literal: true
|
|
11
|
+
|
|
12
|
+
# How To Build a Powerful Search Form With Hotwire
|
|
13
|
+
# https://www.youtube.com/watch?v=4MUEQVxUbm4
|
|
14
|
+
|
|
15
|
+
# This builds on top of: Ruby on Rails Forms With Hotwire
|
|
16
|
+
# https://www.youtube.com/watch?v=-n7IbUFKjoM
|
|
17
|
+
|
|
9
18
|
require 'pry'
|
|
10
19
|
|
|
11
20
|
self.local_template_path = File.join(File.dirname(__FILE__), File.basename(__FILE__, '.*'))
|
|
@@ -47,7 +56,9 @@ after_bundle do
|
|
|
47
56
|
copy_file '_flash.html.erb' , 'app/views/shared/_flash.html.erb'
|
|
48
57
|
copy_file '_theme_changer.html.erb' , 'app/views/shared/_theme_changer.html.erb'
|
|
49
58
|
|
|
50
|
-
add_stimulus('search')
|
|
59
|
+
# add_stimulus('search')
|
|
60
|
+
copy_file 'search_controller.js' , 'app/javascript/controllers/search_controller.js'
|
|
61
|
+
copy_file 'theme_changer_controller.js' , 'app/javascript/controllers/theme_changer_controller.js'
|
|
51
62
|
|
|
52
63
|
# Install tailwind directly, instead of via the --css=tailwind option so that we can configure 3rd party plugins
|
|
53
64
|
# gem "jsbundling-rails"
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|