shimmer 0.0.30 → 0.0.32
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/Gemfile +2 -0
- data/Gemfile.lock +9 -1
- data/README.md +30 -2
- data/gemfiles/Gemfile-rails-7-0 +2 -0
- data/lib/shimmer/form.rb +2 -2
- data/lib/shimmer/utils/file_helper.rb +1 -1
- data/lib/shimmer/version.rb +1 -1
- data/src/consent.ts +35 -1
- data/src/modal.ts +5 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3a975bbc3e5b4c49127c435395b76802c7aa67de9ff4395b1fdc7727f3d31d3f
|
4
|
+
data.tar.gz: 1795a94caf3cd1464d72b79a91d8f481529adef7451c02d63cff2d7b4468efbd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 13e3dec5b12662ea7d96fae419e15395f965936f9a5170bbfa071de7039785c96171a5e1dd78149f5e6035bd38f1119df81fe0292b3539bbb739c12f97b2f40f
|
7
|
+
data.tar.gz: 1375b6e3cd93a215f1c52645c5ea5403fb94c5fd8a56878b842811c1b6fef3368fd45dbd35365fc3201a614af7fe056c067720d5e7bbed7e65ea0fdc9483d341
|
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
@@ -135,6 +135,9 @@ GEM
|
|
135
135
|
rspec (>= 2.99.0, < 4.0)
|
136
136
|
i18n (1.12.0)
|
137
137
|
concurrent-ruby (~> 1.0)
|
138
|
+
image_processing (1.12.2)
|
139
|
+
mini_magick (>= 4.9.5, < 5)
|
140
|
+
ruby-vips (>= 2.0.17, < 3)
|
138
141
|
io-console (0.6.0)
|
139
142
|
irb (1.6.2)
|
140
143
|
reline (>= 0.3.0)
|
@@ -161,6 +164,7 @@ GEM
|
|
161
164
|
marcel (1.0.2)
|
162
165
|
matrix (0.4.2)
|
163
166
|
method_source (1.0.0)
|
167
|
+
mini_magick (4.12.0)
|
164
168
|
mini_mime (1.1.2)
|
165
169
|
minitest (5.17.0)
|
166
170
|
msgpack (1.6.0)
|
@@ -294,6 +298,8 @@ GEM
|
|
294
298
|
rubocop (~> 1.33)
|
295
299
|
rubocop-capybara (~> 2.17)
|
296
300
|
ruby-progressbar (1.13.0)
|
301
|
+
ruby-vips (2.1.4)
|
302
|
+
ffi (~> 1.12)
|
297
303
|
shellany (0.0.1)
|
298
304
|
slim (4.1.0)
|
299
305
|
temple (>= 0.7.6, < 0.9)
|
@@ -356,8 +362,10 @@ DEPENDENCIES
|
|
356
362
|
dotenv-rails
|
357
363
|
guard
|
358
364
|
guard-rspec
|
365
|
+
image_processing
|
359
366
|
jbuilder
|
360
367
|
jsbundling-rails
|
368
|
+
mini_magick
|
361
369
|
propshaft
|
362
370
|
pry
|
363
371
|
pry-byebug
|
@@ -383,4 +391,4 @@ DEPENDENCIES
|
|
383
391
|
web-console
|
384
392
|
|
385
393
|
BUNDLED WITH
|
386
|
-
2.
|
394
|
+
2.4.9
|
data/README.md
CHANGED
@@ -15,7 +15,7 @@ Stack is a reusable typed component that allows you to easily manage the layout
|
|
15
15
|
To use it in a React project, you can just import and use it as you would in a normal React component:
|
16
16
|
|
17
17
|
```js
|
18
|
-
import { Stack } from "@nerdgeschoss/shimmer/components/stack";
|
18
|
+
import { Stack } from "@nerdgeschoss/shimmer/dist/components/stack";
|
19
19
|
|
20
20
|
<Stack gapTablet={4} gapDesktop={12} line>
|
21
21
|
<div></div>
|
@@ -24,7 +24,7 @@ import { Stack } from "@nerdgeschoss/shimmer/components/stack";
|
|
24
24
|
</Stack>;
|
25
25
|
```
|
26
26
|
|
27
|
-
To use it in an HTML file, you can just import the css file directly from `@nerdgeschoss/shimmer/components/stack.css` and just implement the classes as they are in the stylesheet:
|
27
|
+
To use it in an HTML file, you can just import the css file directly from `@nerdgeschoss/shimmer/dist/components/stack.css` and just implement the classes as they are in the stylesheet:
|
28
28
|
|
29
29
|
```html
|
30
30
|
<div class="stack stack--line stack--tablet-4 stack--desktop-12">
|
@@ -283,6 +283,34 @@ before_action :check_locale
|
|
283
283
|
|
284
284
|
Trying to figure out which key a certain translation on the page has? Append `?debug` to the url and `I18n.debug?` will be set - which leads to keys being printed on the page.
|
285
285
|
|
286
|
+
### 🍪 Cookies
|
287
|
+
|
288
|
+
Integrate cookie consent and add tracking capabilities such as Google Tag Manager and Google Analytics to your application with the following steps:
|
289
|
+
|
290
|
+
**Include Shimmer's Consent Module**: Add the following line to your `application_controller.rb`:
|
291
|
+
|
292
|
+
```ruby
|
293
|
+
class ApplicationController < ActionController::Base
|
294
|
+
include Shimmer::Consent
|
295
|
+
end
|
296
|
+
```
|
297
|
+
|
298
|
+
**Add Google Tag Manager and Google Analytics**:
|
299
|
+
|
300
|
+
* If you wish to include Google Tag Manager or Google Analytics, insert either of the following lines to your `application.js`:
|
301
|
+
|
302
|
+
```typescript
|
303
|
+
ui.consent.enableGoogleTagManager(GOOGLE_TAG_MANAGER_ID);
|
304
|
+
```
|
305
|
+
|
306
|
+
```typescript
|
307
|
+
ui.consent.enableGoogleAnalytics(GOOGLE_ANALYTICS_ID);
|
308
|
+
```
|
309
|
+
|
310
|
+
Replace `GOOGLE_TAG_MANAGER_ID` with your Google Tag Manager ID or `GOOGLE_ANALYTICS_ID` with your Google Analytics ID.
|
311
|
+
|
312
|
+
**User Consent**: `Shimmer::Consent` provides a [stimulus controller](src/controllers/consent.ts) for creating a cookie banner. When the 'statistic' option is submitted to the controller, the necessary tracking scripts are added to the page's head.
|
313
|
+
|
286
314
|
## Installation
|
287
315
|
|
288
316
|
Add this line to your application's Gemfile:
|
data/gemfiles/Gemfile-rails-7-0
CHANGED
data/lib/shimmer/form.rb
CHANGED
@@ -20,7 +20,7 @@ module Shimmer
|
|
20
20
|
width = options[:width]
|
21
21
|
height = options[:height]
|
22
22
|
source = image_file_path(source, width: width, height: height)
|
23
|
-
options[:loading]
|
23
|
+
options[:loading] ||= :lazy
|
24
24
|
options[:srcset] = "#{source} 1x, #{image_file_path(attachment, width: width.to_i * 2, height: height ? height.to_i * 2 : nil)} 2x" if options[:width].present?
|
25
25
|
end
|
26
26
|
super source, options
|
data/lib/shimmer/version.rb
CHANGED
data/src/consent.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { getCookie, setCookie } from "./util";
|
2
2
|
|
3
3
|
const consentCategories = ["essential", "targeting", "statistic"] as const;
|
4
|
-
export type ConsentCategory = typeof consentCategories[number];
|
4
|
+
export type ConsentCategory = (typeof consentCategories)[number];
|
5
5
|
|
6
6
|
export class Consent {
|
7
7
|
#consentListeners: Record<ConsentCategory, Array<() => void>> = {
|
@@ -63,4 +63,38 @@ export class Consent {
|
|
63
63
|
);
|
64
64
|
document.head.prepend(script);
|
65
65
|
}
|
66
|
+
|
67
|
+
async enableGoogleTagManager(
|
68
|
+
id: string,
|
69
|
+
role: ConsentCategory = "statistic"
|
70
|
+
): Promise<void> {
|
71
|
+
await this.consentFor(role);
|
72
|
+
window.gtag({
|
73
|
+
"gtm.start": new Date(),
|
74
|
+
event: "gtm.js",
|
75
|
+
});
|
76
|
+
window.gtag("config", id, { send_page_view: false }); // page view is disabled because it's tracked via the analytics stimulus controller already
|
77
|
+
const script = document.createElement("script");
|
78
|
+
script.async = true;
|
79
|
+
script.setAttribute(
|
80
|
+
"src",
|
81
|
+
`https://www.googletagmanager.com/gtm.js?id=${id}`
|
82
|
+
);
|
83
|
+
document.head.prepend(script);
|
84
|
+
|
85
|
+
// The following 'noscript' tag inclusion is primarily for compliance
|
86
|
+
// with Google's recommended installation procedure, its
|
87
|
+
// not technically necessary for functionality.
|
88
|
+
const noscript = document.createElement("noscript");
|
89
|
+
const iframe = document.createElement("iframe");
|
90
|
+
iframe.setAttribute(
|
91
|
+
"src",
|
92
|
+
`https://www.googletagmanager.com/ns.html?id=${id}`
|
93
|
+
);
|
94
|
+
iframe.setAttribute("height", "0");
|
95
|
+
iframe.setAttribute("width", "0");
|
96
|
+
iframe.setAttribute("style", "display:none;visibility:hidden");
|
97
|
+
noscript.appendChild(iframe);
|
98
|
+
document.body.prepend(noscript);
|
99
|
+
}
|
66
100
|
}
|
data/src/modal.ts
CHANGED
@@ -66,7 +66,11 @@ export class Modal {
|
|
66
66
|
closeButton.style.display = close ?? true ? "block" : "none";
|
67
67
|
root.classList.add("modal--open");
|
68
68
|
root.classList.add("modal--loading");
|
69
|
-
|
69
|
+
|
70
|
+
if (size) {
|
71
|
+
root.classList.add(`modal--${size}`);
|
72
|
+
}
|
73
|
+
|
70
74
|
frame.innerHTML = await getHTML(url);
|
71
75
|
root.classList.remove("modal--loading");
|
72
76
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: shimmer
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.32
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jens Ravens
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-
|
11
|
+
date: 2023-10-25 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email:
|