jekyll-hover-popup 0.1.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 (11) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +75 -0
  4. data/assets/jekyll-hover-popup/hover_popup.css +269 -0
  5. data/assets/jekyll-hover-popup/hover_popup.js +1010 -0
  6. data/lib/jekyll/hover_popup/asset_file.rb +17 -0
  7. data/lib/jekyll/hover_popup/generator.rb +34 -0
  8. data/lib/jekyll/hover_popup/hooks.rb +48 -0
  9. data/lib/jekyll/hover_popup/version.rb +5 -0
  10. data/lib/jekyll-hover-popup.rb +6 -0
  11. metadata +68 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: d63efd95a8a8c0663ada349b6f86443adab6c5f318844970d3a9cf53f0f5d1f3
4
+ data.tar.gz: 0b2c7eb510757f54ab7dfd6c4e32c87c18d1bb2957d3f7baf036a98b6b7e7a83
5
+ SHA512:
6
+ metadata.gz: 445a20c75c6f77dd738ba690ad581be8d4bbb7f75c3386907c8018750e7ffc3b170b4d8287127126da03f87962cb82059d3aa3c1627a970c6b90d4af6211f88b
7
+ data.tar.gz: ff9122128563cb9b802ebb06b8290166fa61d8cf65c8fbfa83d7bc3eb19f60204f8eb0a4dcfec7a04949d96319dca55c1a4e8de8d0c23258cfd066ab55d66eb7
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,75 @@
1
+ # jekyll-hover-popup
2
+
3
+ A Jekyll plugin for [Just the Docs](https://github.com/just-the-docs/just-the-docs) sites that shows in-page hover previews for internal documentation links.
4
+
5
+ Inspired by the hover window behavior in [5etools](https://github.com/5etools/5etools-src).
6
+
7
+ ## Features
8
+
9
+ - Hover an internal link to preview its target content in a floating window
10
+ - Hold **Shift** while hovering (or when leaving the link) to pin the preview
11
+ - Pinned windows show **Follow link** and **Close** (Ctrl/Cmd+click Close to close all)
12
+ - Pinned links do not open additional previews on further hovers
13
+ - Section links (`#heading-id`) show only that section; page links show the full page content
14
+ - External links and non-page links are ignored
15
+ - Popup windows are resizable (8 drag handles) and styled from the host page's computed theme
16
+ - Exposes `window.JekyllHoverPopup` for other plugins (for example, image map region clicks)
17
+
18
+ ## Install
19
+
20
+ Add to your site `Gemfile`:
21
+
22
+ ```ruby
23
+ group :jekyll_plugins do
24
+ gem "jekyll-hover-popup", path: "/path/to/hover-popup"
25
+ end
26
+ ```
27
+
28
+ Then in `_config.yml`:
29
+
30
+ ```yml
31
+ plugins:
32
+ - jekyll-hover-popup
33
+ ```
34
+
35
+ ## Configuration
36
+
37
+ Optional `_config.yml` settings:
38
+
39
+ ```yml
40
+ hover_popup:
41
+ enabled: true
42
+ assets_path: /assets/jekyll-hover-popup
43
+ hover_delay_ms: 0
44
+ nav_hover_preview: true
45
+ ```
46
+
47
+ Set `nav_hover_preview: false` to disable hover previews for links inside navigation elements (`.site-nav`, `nav`, `[role="navigation"]`, etc.).
48
+
49
+ ## JavaScript API
50
+
51
+ When loaded, the plugin exposes:
52
+
53
+ ```js
54
+ window.JekyllHoverPopup.openLink({
55
+ href: "#section-id",
56
+ title: "Section title",
57
+ clientX: 120,
58
+ clientY: 240,
59
+ isPermanent: true,
60
+ });
61
+
62
+ window.JekyllHoverPopup.openContent({
63
+ title: "Custom preview",
64
+ pageUrl: "/docs/page/",
65
+ content: document.createElement("div"),
66
+ clientX: 120,
67
+ clientY: 240,
68
+ isPermanent: true,
69
+ maxWidth: "min(96vw, 1200px)",
70
+ });
71
+ ```
72
+
73
+ ## License
74
+
75
+ MIT
data/assets/jekyll-hover-popup/hover_popup.css ADDED
@@ -0,0 +1,269 @@
1
+ :root {
2
+ --jhp-body-bg: Canvas;
3
+ --jhp-body-color: CanvasText;
4
+ --jhp-header-bg: ButtonFace;
5
+ --jhp-link-color: LinkText;
6
+ --jhp-border-color: color-mix(in srgb, CanvasText 18%, transparent);
7
+ --jhp-shadow-color: color-mix(in srgb, CanvasText 28%, transparent);
8
+ --jhp-accent-hover: color-mix(in srgb, CanvasText 10%, transparent);
9
+ --jhp-error-color: #b00020;
10
+ --jhp-font-family: inherit;
11
+ --jhp-font-size: inherit;
12
+ --jhp-line-height: inherit;
13
+ }
14
+
15
+ .jhp-hwin {
16
+ position: fixed;
17
+ z-index: 10000;
18
+ display: flex;
19
+ flex-direction: column;
20
+ min-width: 150px;
21
+ max-width: min(92vw, 900px);
22
+ box-shadow: 0 0 12px 0 var(--jhp-shadow-color);
23
+ background: var(--jhp-body-bg);
24
+ color: var(--jhp-body-color);
25
+ font-family: var(--jhp-font-family);
26
+ font-size: var(--jhp-font-size);
27
+ line-height: var(--jhp-line-height);
28
+ border: 1px solid var(--jhp-border-color);
29
+ animation: jhp-fade-in 150ms ease-out;
30
+ color-scheme: inherit;
31
+ }
32
+
33
+ @keyframes jhp-fade-in {
34
+ from {
35
+ opacity: 0;
36
+ }
37
+ to {
38
+ opacity: 1;
39
+ }
40
+ }
41
+
42
+ .jhp-border {
43
+ position: relative;
44
+ flex-shrink: 0;
45
+ min-height: 3px;
46
+ }
47
+
48
+ .jhp-border--top {
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
52
+ gap: 0.5rem;
53
+ min-height: 1.25rem;
54
+ max-height: 1.25rem;
55
+ padding: 0 0.25rem;
56
+ background: var(--jhp-header-bg);
57
+ border-bottom: 1px solid var(--jhp-border-color);
58
+ user-select: none;
59
+ cursor: default;
60
+ }
61
+
62
+ .jhp-hwin__header {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: space-between;
66
+ gap: 0.5rem;
67
+ flex: 1;
68
+ min-width: 0;
69
+ }
70
+
71
+ .jhp-hwin[data-perm="true"] .jhp-border--top {
72
+ cursor: move;
73
+ }
74
+
75
+ .jhp-border--bottom {
76
+ min-height: 3px;
77
+ border-top: 1px solid var(--jhp-border-color);
78
+ background: var(--jhp-header-bg);
79
+ }
80
+
81
+ .jhp-hwin__title {
82
+ flex: 1;
83
+ min-width: 0;
84
+ overflow: hidden;
85
+ text-overflow: ellipsis;
86
+ white-space: nowrap;
87
+ font-size: 0.75rem;
88
+ font-weight: 600;
89
+ display: block;
90
+ }
91
+
92
+ .jhp-hwin[data-perm="false"] .jhp-hwin__title {
93
+ font-weight: 500;
94
+ opacity: 0.85;
95
+ }
96
+
97
+ .jhp-hwin__actions {
98
+ display: none;
99
+ align-items: center;
100
+ gap: 0.25rem;
101
+ flex-shrink: 0;
102
+ }
103
+
104
+ .jhp-hwin[data-perm="true"] .jhp-hwin__actions {
105
+ display: flex;
106
+ }
107
+
108
+ .jhp-hwin__btn {
109
+ appearance: none;
110
+ border: none;
111
+ background: transparent;
112
+ color: inherit;
113
+ font: inherit;
114
+ font-size: 0.6875rem;
115
+ line-height: 1;
116
+ padding: 0.125rem 0.25rem;
117
+ cursor: pointer;
118
+ border-radius: 2px;
119
+ text-decoration: none;
120
+ }
121
+
122
+ .jhp-hwin__btn:hover,
123
+ .jhp-hwin__btn:focus-visible {
124
+ background: var(--jhp-accent-hover);
125
+ outline: none;
126
+ }
127
+
128
+ .jhp-hwin__btn--link {
129
+ color: var(--jhp-link-color);
130
+ font-weight: 600;
131
+ }
132
+
133
+ .jhp-hwin__content {
134
+ overflow: auto;
135
+ contain: paint;
136
+ max-height: 92vh;
137
+ min-height: 20px;
138
+ padding: 0.75rem 1rem;
139
+ background: var(--jhp-body-bg);
140
+ color: var(--jhp-body-color);
141
+ }
142
+
143
+ /* Fix for floating bullet points.
144
+ JTD list markers use absolute ::before pseudo-elements. Without
145
+ position: relative on li, they anchor to .jhp-hwin (position: fixed)
146
+ and stay put while the scrollable text moves. */
147
+ .jhp-hwin__content ul > li,
148
+ .jhp-hwin__content ol > li {
149
+ position: relative;
150
+ }
151
+
152
+ .jhp-hwin__content main,
153
+ .jhp-hwin__content .jhp-section {
154
+ margin: 0;
155
+ }
156
+
157
+ .jhp-hwin__content h1,
158
+ .jhp-hwin__content h2,
159
+ .jhp-hwin__content h3,
160
+ .jhp-hwin__content h4,
161
+ .jhp-hwin__content h5,
162
+ .jhp-hwin__content h6 {
163
+ margin-top: 0;
164
+ }
165
+
166
+ .jhp-hwin__content .anchor-heading {
167
+ display: none;
168
+ }
169
+
170
+ .jhp-hwin__loading {
171
+ padding: 1rem;
172
+ font-size: 0.8125rem;
173
+ opacity: 0.7;
174
+ }
175
+
176
+ .jhp-hwin__error {
177
+ padding: 1rem;
178
+ font-size: 0.8125rem;
179
+ color: var(--jhp-error-color);
180
+ }
181
+
182
+ .jhp-resize {
183
+ position: absolute;
184
+ touch-action: none;
185
+ }
186
+
187
+ .jhp-resize-n {
188
+ top: -4px;
189
+ right: 4px;
190
+ left: 4px;
191
+ height: 4px;
192
+ cursor: ns-resize;
193
+ }
194
+
195
+ .jhp-resize-ne {
196
+ top: -6px;
197
+ right: -6px;
198
+ width: 10px;
199
+ height: 10px;
200
+ cursor: ne-resize;
201
+ }
202
+
203
+ .jhp-resize-e {
204
+ top: 4px;
205
+ right: -4px;
206
+ bottom: 4px;
207
+ width: 4px;
208
+ cursor: ew-resize;
209
+ }
210
+
211
+ .jhp-resize-se {
212
+ right: -6px;
213
+ bottom: -6px;
214
+ width: 10px;
215
+ height: 10px;
216
+ cursor: se-resize;
217
+ }
218
+
219
+ .jhp-resize-s {
220
+ bottom: 1px;
221
+ right: 4px;
222
+ left: 4px;
223
+ height: 2px;
224
+ cursor: ns-resize;
225
+ }
226
+
227
+ .jhp-resize-sw {
228
+ bottom: -6px;
229
+ left: -6px;
230
+ width: 10px;
231
+ height: 10px;
232
+ cursor: sw-resize;
233
+ }
234
+
235
+ .jhp-resize-w {
236
+ top: 4px;
237
+ bottom: 4px;
238
+ left: -4px;
239
+ width: 4px;
240
+ cursor: ew-resize;
241
+ }
242
+
243
+ .jhp-resize-nw {
244
+ top: -6px;
245
+ left: -6px;
246
+ width: 10px;
247
+ height: 10px;
248
+ cursor: nw-resize;
249
+ }
250
+
251
+ @media (pointer: coarse) {
252
+ .jhp-resize-n,
253
+ .jhp-resize-s {
254
+ height: 8px;
255
+ }
256
+
257
+ .jhp-resize-e,
258
+ .jhp-resize-w {
259
+ width: 8px;
260
+ }
261
+
262
+ .jhp-resize-ne,
263
+ .jhp-resize-nw,
264
+ .jhp-resize-se,
265
+ .jhp-resize-sw {
266
+ width: 16px;
267
+ height: 16px;
268
+ }
269
+ }