outro_rails 0.1.2 → 0.1.3
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/README.md +119 -2
- data/app/assets/stylesheets/outro_rails/outro_rails.css +43 -6
- data/lib/outro_rails/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8d1544866af71417119790ec084b44de4ff270903b7bdf33ba2c0d2f95cc9257
|
|
4
|
+
data.tar.gz: 27059e769f71d34a51cfcfb983fd459b59924efd7b9c50cc7084b4ce14a334d9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3c9c0292527b0b0fcc2751d378ef674904349a7b0ffe92e90ef6a2db583c90bb016a7dbde7fe14534e89935267e5e4c4eaeebf7e00450a22b6add906518855ce
|
|
7
|
+
data.tar.gz: 88e8182cbbd5957fc1c381a6ce9dd1f7e44a610b8d6e1739a364fc62aafd33310ebf8bc8f0b78034234eb2377429af00fd4216d286f288bae94305392a7ac99a
|
data/README.md
CHANGED
|
@@ -41,13 +41,126 @@ bin/rails outro_rails:seed
|
|
|
41
41
|
|
|
42
42
|
Seeding is idempotent, so it's safe to re-run at any time.
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
Finally, make the engine's CSS and JavaScript available to your app. The
|
|
45
|
+
quickest version is to add two tags to your layout:
|
|
45
46
|
|
|
46
|
-
```
|
|
47
|
+
```erb
|
|
47
48
|
<%= stylesheet_link_tag "outro_rails/outro_rails", 'data-turbo-track': 'reload' %>
|
|
48
49
|
<%= javascript_include_tag "outro_rails/outro_rails", 'data-turbo-track': 'reload', defer: true %>
|
|
49
50
|
```
|
|
50
51
|
|
|
52
|
+
If you'd rather fold the engine's assets into your existing bundles, see
|
|
53
|
+
[Assets](#assets) below.
|
|
54
|
+
|
|
55
|
+
## Assets
|
|
56
|
+
|
|
57
|
+
The engine ships two files inside the gem:
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
app/assets/stylesheets/outro_rails/outro_rails.css
|
|
61
|
+
app/assets/javascripts/outro_rails/outro_rails.js
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Both are plain CSS and plain JavaScript with no build step of their own. The
|
|
65
|
+
stylesheet is scoped entirely under `.outro`, so it can't leak into the rest
|
|
66
|
+
of your app, and it declares no font, text color, or link color. Those
|
|
67
|
+
inherit from your application.
|
|
68
|
+
|
|
69
|
+
You only need these assets on *your* pages, the ones rendering the
|
|
70
|
+
`outro_rails/chord_charts/chart` partial. The engine's own mounted pages load
|
|
71
|
+
them through the engine's layout, so they keep working no matter which option
|
|
72
|
+
below you pick.
|
|
73
|
+
|
|
74
|
+
There are three ways to get them onto your pages. Options 1 and 3 work under
|
|
75
|
+
both Sprockets and Propshaft. Option 2 is Sprockets-only.
|
|
76
|
+
|
|
77
|
+
### Option 1: Link tags
|
|
78
|
+
|
|
79
|
+
Rails adds every engine's `app/assets` directories to the asset load path
|
|
80
|
+
automatically, under either pipeline, so the logical paths resolve with no
|
|
81
|
+
configuration at all:
|
|
82
|
+
|
|
83
|
+
```erb
|
|
84
|
+
<%= stylesheet_link_tag "outro_rails/outro_rails", 'data-turbo-track': 'reload' %>
|
|
85
|
+
<%= javascript_include_tag "outro_rails/outro_rails", 'data-turbo-track': 'reload', defer: true %>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
This costs two extra requests, both fingerprinted and cached.
|
|
89
|
+
|
|
90
|
+
### Option 2: Sprockets manifests (Sprockets only)
|
|
91
|
+
|
|
92
|
+
If your app still builds `application.js` and `application.css` through
|
|
93
|
+
Sprockets directives, require the engine's files from your manifests:
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
// app/assets/javascripts/application.js
|
|
97
|
+
//= require outro_rails/outro_rails
|
|
98
|
+
//= require_tree .
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
```css
|
|
102
|
+
/* app/assets/stylesheets/application.css
|
|
103
|
+
*= require outro_rails/outro_rails
|
|
104
|
+
*= require_tree .
|
|
105
|
+
*/
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
Then remove the two tags from Option 1 from your layout.
|
|
109
|
+
|
|
110
|
+
### Option 3: Bundled with yarn (jsbundling-rails / cssbundling-rails)
|
|
111
|
+
|
|
112
|
+
This applies whether the built files are then served by Sprockets or by
|
|
113
|
+
Propshaft. Both pipelines just serve whatever esbuild and dart-sass write
|
|
114
|
+
into `app/assets/builds`, so the setup below is identical either way.
|
|
115
|
+
|
|
116
|
+
Neither build tool knows anything about the Rails asset load path. esbuild
|
|
117
|
+
resolves bare imports through `node_modules`; dart-sass resolves `@use`
|
|
118
|
+
through its `--load-path` list. The gem is in neither place, so both need to
|
|
119
|
+
be pointed at it explicitly.
|
|
120
|
+
|
|
121
|
+
`bundle info outro_rails --path` prints the installed gem's directory, which
|
|
122
|
+
keeps this correct across gem upgrades. In `package.json`:
|
|
123
|
+
|
|
124
|
+
```json
|
|
125
|
+
{
|
|
126
|
+
"scripts": {
|
|
127
|
+
"build": "NODE_PATH=\"$(bundle info outro_rails --path)/app/assets/javascripts:node_modules\" esbuild app/javascript/application.js --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
|
|
128
|
+
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --load-path=$(bundle info outro_rails --path)/app/assets/stylesheets"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Keep whatever flags your scripts already have and add the `NODE_PATH`
|
|
134
|
+
assignment and the second `--load-path`. If your CSS build is split across
|
|
135
|
+
several scripts, the `--load-path` goes on the `sass` invocation. `NODE_PATH`
|
|
136
|
+
needs both entries.
|
|
137
|
+
|
|
138
|
+
Now import the assets by their logical paths:
|
|
139
|
+
|
|
140
|
+
```scss
|
|
141
|
+
// app/assets/stylesheets/application.bootstrap.scss
|
|
142
|
+
@use 'outro_rails/outro_rails';
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
```js
|
|
146
|
+
// app/javascript/application.js
|
|
147
|
+
import './controllers'
|
|
148
|
+
import 'outro_rails/outro_rails'
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Then remove the two tags from Option 1 from your layout.
|
|
152
|
+
|
|
153
|
+
#### Rebuilding
|
|
154
|
+
|
|
155
|
+
The engine's files live outside the directories your watchers watch, so
|
|
156
|
+
nothing rebuilds them automatically. Run the builds yourself after the first
|
|
157
|
+
setup and after every `bundle update outro_rails`:
|
|
158
|
+
|
|
159
|
+
```sh
|
|
160
|
+
yarn build
|
|
161
|
+
yarn build:css
|
|
162
|
+
```
|
|
163
|
+
|
|
51
164
|
## Usage
|
|
52
165
|
To view the chord library and music theory tools, mount the engine in your
|
|
53
166
|
routes.rb:
|
|
@@ -202,6 +315,10 @@ Rails.application.config.to_prepare do
|
|
|
202
315
|
end
|
|
203
316
|
```
|
|
204
317
|
|
|
318
|
+
Note that once engine pages render in your layout, they load whatever assets
|
|
319
|
+
that layout loads. If you took Option 2 or Option 3 above, the engine's CSS
|
|
320
|
+
and JavaScript are already in those bundles and nothing further is needed.
|
|
321
|
+
|
|
205
322
|
### Authorizing Chart Edits
|
|
206
323
|
|
|
207
324
|
The chart's own content (artist, title, body, key, ...) is edited through
|
|
@@ -84,7 +84,8 @@
|
|
|
84
84
|
max-width: var(--outro-container-width);
|
|
85
85
|
margin-left: auto;
|
|
86
86
|
margin-right: auto;
|
|
87
|
-
padding:
|
|
87
|
+
padding: var(--outro-container-padding,
|
|
88
|
+
clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem));
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
.outro-header {
|
|
@@ -134,6 +135,7 @@
|
|
|
134
135
|
padding: 0.3rem clamp(0.6rem, 2vw, 0.95rem);
|
|
135
136
|
border: 1px solid var(--outro-border);
|
|
136
137
|
border-radius: var(--outro-radius-sm);
|
|
138
|
+
background-color: var(--outro-surface, transparent);
|
|
137
139
|
color: inherit;
|
|
138
140
|
font-size: 0.875rem;
|
|
139
141
|
font-weight: 500;
|
|
@@ -166,7 +168,7 @@
|
|
|
166
168
|
}
|
|
167
169
|
|
|
168
170
|
.outro-chip--link:hover {
|
|
169
|
-
background: var(--outro-tint);
|
|
171
|
+
background-image: linear-gradient(var(--outro-tint), var(--outro-tint));
|
|
170
172
|
border-color: var(--outro-border-strong);
|
|
171
173
|
transform: skew(var(--outro-skew)) translateY(-1px);
|
|
172
174
|
}
|
|
@@ -179,7 +181,7 @@
|
|
|
179
181
|
.outro-chip--current {
|
|
180
182
|
font-weight: 600;
|
|
181
183
|
border: none;
|
|
182
|
-
background:
|
|
184
|
+
background-color: transparent;
|
|
183
185
|
padding-left: 0.25rem;
|
|
184
186
|
padding-right: 0.25rem;
|
|
185
187
|
}
|
|
@@ -283,9 +285,43 @@
|
|
|
283
285
|
padding: var(--outro-card-padding);
|
|
284
286
|
border: 1px solid var(--outro-border);
|
|
285
287
|
border-radius: var(--outro-radius);
|
|
288
|
+
background-color: var(--outro-surface, transparent);
|
|
286
289
|
box-shadow: var(--outro-shadow);
|
|
287
290
|
}
|
|
288
291
|
|
|
292
|
+
.outro-panel {
|
|
293
|
+
padding: var(--outro-card-padding);
|
|
294
|
+
border: 1px solid var(--outro-border);
|
|
295
|
+
border-radius: var(--outro-radius);
|
|
296
|
+
background-color: var(--outro-surface, transparent);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.outro-select,
|
|
300
|
+
.outro-input,
|
|
301
|
+
.outro-textarea {
|
|
302
|
+
padding: var(--outro-control-padding);
|
|
303
|
+
border: 1px solid var(--outro-border-strong);
|
|
304
|
+
border-radius: var(--outro-radius-sm);
|
|
305
|
+
background-color: var(--outro-surface, transparent);
|
|
306
|
+
color: inherit;
|
|
307
|
+
font: inherit;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.outro-button {
|
|
311
|
+
display: inline-flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
gap: 0.45rem;
|
|
314
|
+
padding: 0.4rem 0.9rem;
|
|
315
|
+
border: 1px solid var(--outro-border-strong);
|
|
316
|
+
border-radius: var(--outro-radius-sm);
|
|
317
|
+
background-color: var(--outro-surface, transparent);
|
|
318
|
+
color: inherit;
|
|
319
|
+
font: inherit;
|
|
320
|
+
line-height: 1.2;
|
|
321
|
+
text-decoration: none;
|
|
322
|
+
cursor: pointer;
|
|
323
|
+
}
|
|
324
|
+
|
|
289
325
|
.outro-card--link {
|
|
290
326
|
transition: transform 0.16s ease, box-shadow 0.16s ease,
|
|
291
327
|
border-color 0.16s ease;
|
|
@@ -383,6 +419,7 @@
|
|
|
383
419
|
padding: var(--outro-card-padding);
|
|
384
420
|
border: 1px solid var(--outro-border);
|
|
385
421
|
border-radius: var(--outro-radius);
|
|
422
|
+
background-color: var(--outro-surface, transparent);
|
|
386
423
|
}
|
|
387
424
|
|
|
388
425
|
.outro-empty {
|
|
@@ -407,7 +444,7 @@
|
|
|
407
444
|
padding: var(--outro-control-padding);
|
|
408
445
|
border: 1px solid var(--outro-border-strong);
|
|
409
446
|
border-radius: var(--outro-radius-sm);
|
|
410
|
-
background: transparent;
|
|
447
|
+
background-color: var(--outro-surface, transparent);
|
|
411
448
|
color: inherit;
|
|
412
449
|
font: inherit;
|
|
413
450
|
}
|
|
@@ -419,7 +456,7 @@
|
|
|
419
456
|
padding: 0.4rem 0.9rem;
|
|
420
457
|
border: 1px solid var(--outro-border-strong);
|
|
421
458
|
border-radius: var(--outro-radius-sm);
|
|
422
|
-
background: transparent;
|
|
459
|
+
background-color: var(--outro-surface, transparent);
|
|
423
460
|
color: inherit;
|
|
424
461
|
font: inherit;
|
|
425
462
|
line-height: 1.2;
|
|
@@ -436,7 +473,7 @@
|
|
|
436
473
|
}
|
|
437
474
|
|
|
438
475
|
.outro-button:hover {
|
|
439
|
-
background: var(--outro-tint);
|
|
476
|
+
background-image: linear-gradient(var(--outro-tint), var(--outro-tint));
|
|
440
477
|
}
|
|
441
478
|
|
|
442
479
|
.outro-label {
|
data/lib/outro_rails/version.rb
CHANGED