jekyll-github-code 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.
data/demo.html ADDED
@@ -0,0 +1,606 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-mode="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Jekyll GitHub Code - Demo</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --bg-primary: #0d1117;
11
+ --bg-secondary: #161b22;
12
+ --bg-tertiary: #21262d;
13
+ --text-primary: #e6edf3;
14
+ --text-secondary: #8b949e;
15
+ --accent: #58a6ff;
16
+ --accent-hover: #79c0ff;
17
+ --border: #30363d;
18
+ --success: #238636;
19
+ --error: #f85149;
20
+ }
21
+
22
+ [data-mode="light"] {
23
+ --bg-primary: #ffffff;
24
+ --bg-secondary: #f6f8fa;
25
+ --bg-tertiary: #f0f3f6;
26
+ --text-primary: #1f2328;
27
+ --text-secondary: #656d76;
28
+ --accent: #0969da;
29
+ --accent-hover: #0550ae;
30
+ --border: #d0d7de;
31
+ }
32
+
33
+ * {
34
+ margin: 0;
35
+ padding: 0;
36
+ box-sizing: border-box;
37
+ }
38
+
39
+ body {
40
+ font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
41
+ background: var(--bg-primary);
42
+ color: var(--text-primary);
43
+ line-height: 1.6;
44
+ min-height: 100vh;
45
+ }
46
+
47
+ .container {
48
+ max-width: 900px;
49
+ margin: 0 auto;
50
+ padding: 2rem;
51
+ }
52
+
53
+ header {
54
+ text-align: center;
55
+ padding: 3rem 0;
56
+ border-bottom: 1px solid var(--border);
57
+ margin-bottom: 3rem;
58
+ }
59
+
60
+ .logo {
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: center;
64
+ gap: 1rem;
65
+ margin-bottom: 1rem;
66
+ }
67
+
68
+ .logo svg {
69
+ width: 48px;
70
+ height: 48px;
71
+ color: var(--text-primary);
72
+ }
73
+
74
+ h1 {
75
+ font-size: 2.5rem;
76
+ font-weight: 700;
77
+ background: linear-gradient(135deg, var(--accent), #a371f7);
78
+ -webkit-background-clip: text;
79
+ -webkit-text-fill-color: transparent;
80
+ background-clip: text;
81
+ }
82
+
83
+ .subtitle {
84
+ color: var(--text-secondary);
85
+ font-size: 1.125rem;
86
+ margin-top: 0.5rem;
87
+ }
88
+
89
+ .theme-toggle {
90
+ position: fixed;
91
+ top: 1rem;
92
+ right: 1rem;
93
+ background: var(--bg-tertiary);
94
+ border: 1px solid var(--border);
95
+ border-radius: 8px;
96
+ padding: 0.5rem;
97
+ cursor: pointer;
98
+ color: var(--text-primary);
99
+ transition: all 0.2s ease;
100
+ }
101
+
102
+ .theme-toggle:hover {
103
+ background: var(--bg-secondary);
104
+ border-color: var(--accent);
105
+ }
106
+
107
+ .example-section {
108
+ margin-bottom: 3rem;
109
+ }
110
+
111
+ h2 {
112
+ font-size: 1.5rem;
113
+ font-weight: 600;
114
+ margin-bottom: 1rem;
115
+ color: var(--text-primary);
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 0.5rem;
119
+ }
120
+
121
+ h2::before {
122
+ content: '';
123
+ display: inline-block;
124
+ width: 4px;
125
+ height: 1.5rem;
126
+ background: linear-gradient(to bottom, var(--accent), #a371f7);
127
+ border-radius: 2px;
128
+ }
129
+
130
+ .usage-block {
131
+ background: var(--bg-secondary);
132
+ border: 1px solid var(--border);
133
+ border-radius: 8px;
134
+ padding: 1rem;
135
+ margin-bottom: 1.5rem;
136
+ font-family: 'JetBrains Mono', ui-monospace, monospace;
137
+ font-size: 0.875rem;
138
+ color: var(--accent);
139
+ overflow-x: auto;
140
+ }
141
+
142
+ p {
143
+ color: var(--text-secondary);
144
+ margin-bottom: 1rem;
145
+ }
146
+
147
+ /* GitHub Code Block Styles - Inline for demo */
148
+ .github-code-block {
149
+ --github-code-bg: #0d1117;
150
+ --github-code-header-bg: #161b22;
151
+ --github-code-border: #30363d;
152
+ --github-code-text: #e6edf3;
153
+ --github-code-text-secondary: #8b949e;
154
+ --github-code-link: #58a6ff;
155
+ --github-code-link-hover: #79c0ff;
156
+ --github-code-copy-hover: #238636;
157
+
158
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
159
+ background-color: var(--github-code-bg);
160
+ border: 1px solid var(--github-code-border);
161
+ border-radius: 8px;
162
+ margin: 16px 0;
163
+ overflow: hidden;
164
+ box-sizing: border-box;
165
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
166
+ }
167
+
168
+ .github-code-block:hover {
169
+ border-color: var(--github-code-link);
170
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
171
+ }
172
+
173
+ /* Light theme support */
174
+ [data-mode="light"] .github-code-block,
175
+ .light .github-code-block,
176
+ [data-theme="light"] .github-code-block,
177
+ .github-code-block.light {
178
+ --github-code-bg: #ffffff;
179
+ --github-code-header-bg: #f6f8fa;
180
+ --github-code-border: #d0d7de;
181
+ --github-code-text: #1f2328;
182
+ --github-code-text-secondary: #656d76;
183
+ --github-code-link: #0969da;
184
+ --github-code-link-hover: #0550ae;
185
+ }
186
+
187
+ [data-mode="light"] .github-code-block:hover,
188
+ .light .github-code-block:hover,
189
+ [data-theme="light"] .github-code-block:hover,
190
+ .github-code-block.light:hover {
191
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
192
+ }
193
+
194
+ .github-code-header {
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: space-between;
198
+ padding: 10px 16px;
199
+ background-color: var(--github-code-header-bg);
200
+ border-bottom: 1px solid var(--github-code-border);
201
+ font-size: 14px;
202
+ }
203
+
204
+ .github-code-filename {
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 8px;
208
+ color: var(--github-code-text);
209
+ min-width: 0;
210
+ overflow: hidden;
211
+ }
212
+
213
+ .github-code-filename a {
214
+ color: var(--github-code-link);
215
+ text-decoration: none;
216
+ font-weight: 600;
217
+ transition: color 0.2s ease;
218
+ }
219
+
220
+ .github-code-filename a:hover {
221
+ color: var(--github-code-link-hover);
222
+ text-decoration: underline;
223
+ }
224
+
225
+ .github-icon {
226
+ flex-shrink: 0;
227
+ color: var(--github-code-text-secondary);
228
+ }
229
+
230
+ .github-code-copy {
231
+ display: flex;
232
+ align-items: center;
233
+ justify-content: center;
234
+ padding: 6px;
235
+ background: transparent;
236
+ border: none;
237
+ border-radius: 6px;
238
+ cursor: pointer;
239
+ color: var(--github-code-text-secondary);
240
+ transition: all 0.2s ease;
241
+ flex-shrink: 0;
242
+ }
243
+
244
+ .github-code-copy:hover {
245
+ background: rgba(128, 128, 128, 0.2);
246
+ color: var(--github-code-text);
247
+ }
248
+
249
+ .github-code-copy.copied {
250
+ color: var(--github-code-copy-hover);
251
+ }
252
+
253
+ .github-code-content {
254
+ overflow-x: auto;
255
+ }
256
+
257
+ .github-code-content pre {
258
+ margin: 0;
259
+ padding: 16px;
260
+ background: transparent;
261
+ border: none;
262
+ border-radius: 0;
263
+ }
264
+
265
+ .github-code-content code {
266
+ font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
267
+ font-size: 14px;
268
+ line-height: 1.6;
269
+ color: var(--github-code-text);
270
+ background: transparent;
271
+ padding: 0;
272
+ border: none;
273
+ white-space: pre;
274
+ word-wrap: normal;
275
+ overflow-wrap: normal;
276
+ }
277
+
278
+ /* Error state */
279
+ .github-code-error {
280
+ --github-code-error-bg: #3d1f28;
281
+ --github-code-error-border: #f85149;
282
+
283
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
284
+ background-color: var(--github-code-error-bg);
285
+ border: 1px solid var(--github-code-error-border);
286
+ border-radius: 8px;
287
+ padding: 16px;
288
+ margin: 16px 0;
289
+ font-size: 14px;
290
+ color: var(--github-code-error-border);
291
+ }
292
+
293
+ .github-code-error strong {
294
+ display: block;
295
+ margin-bottom: 4px;
296
+ }
297
+
298
+ [data-mode="light"] .github-code-error,
299
+ .light .github-code-error,
300
+ [data-theme="light"] .github-code-error {
301
+ --github-code-error-bg: #ffebe9;
302
+ --github-code-error-border: #cf222e;
303
+ }
304
+
305
+ /* Syntax highlighting - Dark theme */
306
+ .token-keyword { color: #ff7b72; }
307
+ .token-string { color: #a5d6ff; }
308
+ .token-comment { color: #8b949e; }
309
+ .token-function { color: #d2a8ff; }
310
+ .token-number { color: #79c0ff; }
311
+ .token-operator { color: #c9d1d9; }
312
+
313
+ /* Syntax highlighting - Light theme */
314
+ [data-mode="light"] .token-keyword { color: #cf222e; }
315
+ [data-mode="light"] .token-string { color: #0a3069; }
316
+ [data-mode="light"] .token-comment { color: #6e7781; }
317
+ [data-mode="light"] .token-function { color: #8250df; }
318
+ [data-mode="light"] .token-number { color: #0550ae; }
319
+ [data-mode="light"] .token-operator { color: #24292f; }
320
+
321
+ footer {
322
+ text-align: center;
323
+ padding: 2rem 0;
324
+ border-top: 1px solid var(--border);
325
+ margin-top: 3rem;
326
+ color: var(--text-secondary);
327
+ }
328
+
329
+ footer a {
330
+ color: var(--accent);
331
+ text-decoration: none;
332
+ }
333
+
334
+ footer a:hover {
335
+ text-decoration: underline;
336
+ }
337
+
338
+ .features {
339
+ display: grid;
340
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
341
+ gap: 1.5rem;
342
+ margin: 2rem 0;
343
+ }
344
+
345
+ .feature {
346
+ background: var(--bg-secondary);
347
+ border: 1px solid var(--border);
348
+ border-radius: 12px;
349
+ padding: 1.5rem;
350
+ transition: transform 0.2s ease, border-color 0.2s ease;
351
+ }
352
+
353
+ .feature:hover {
354
+ transform: translateY(-2px);
355
+ border-color: var(--accent);
356
+ }
357
+
358
+ .feature h3 {
359
+ font-size: 1rem;
360
+ font-weight: 600;
361
+ margin-bottom: 0.5rem;
362
+ color: var(--text-primary);
363
+ }
364
+
365
+ .feature p {
366
+ font-size: 0.875rem;
367
+ margin: 0;
368
+ }
369
+
370
+ @media (max-width: 520px) {
371
+ .github-code-header {
372
+ flex-wrap: wrap;
373
+ gap: 8px;
374
+ }
375
+
376
+ .github-code-content pre {
377
+ padding: 12px;
378
+ }
379
+
380
+ .github-code-content code {
381
+ font-size: 12px;
382
+ }
383
+ }
384
+ </style>
385
+ </head>
386
+ <body>
387
+ <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
388
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
389
+ <circle cx="12" cy="12" r="5"/>
390
+ <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
391
+ </svg>
392
+ </button>
393
+
394
+ <div class="container">
395
+ <header>
396
+ <div class="logo">
397
+ <svg viewBox="0 0 16 16" fill="currentColor">
398
+ <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
399
+ </svg>
400
+ <h1>Jekyll GitHub Code</h1>
401
+ </div>
402
+ <p class="subtitle">Embed GitHub code snippets beautifully in your Jekyll blog</p>
403
+ </header>
404
+
405
+ <section class="features">
406
+ <div class="feature">
407
+ <h3>📄 Full Files</h3>
408
+ <p>Embed entire files from any public GitHub repository</p>
409
+ </div>
410
+ <div class="feature">
411
+ <h3>📍 Line Ranges</h3>
412
+ <p>Specify line numbers to show specific code sections</p>
413
+ </div>
414
+ <div class="feature">
415
+ <h3>🎨 Syntax Highlighting</h3>
416
+ <p>Automatic language detection with beautiful highlighting</p>
417
+ </div>
418
+ <div class="feature">
419
+ <h3>🔗 Direct Links</h3>
420
+ <p>Click the filename to view the source on GitHub</p>
421
+ </div>
422
+ </section>
423
+
424
+ <section class="example-section">
425
+ <h2>Basic Usage - Full File</h2>
426
+ <p>Embed an entire file from GitHub:</p>
427
+ <div class="usage-block">
428
+ {% github_code r0x0d/toolbox-dev/blob/main/toolbox/environment/fedora-packaging.Containerfile %}
429
+ </div>
430
+
431
+ <!-- Simulated output -->
432
+ <div class="github-code-block">
433
+ <div class="github-code-header">
434
+ <span class="github-code-filename">
435
+ <svg class="github-icon" viewBox="0 0 16 16" width="16" height="16">
436
+ <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
437
+ </svg>
438
+ <a href="https://github.com/r0x0d/toolbox-dev/blob/main/toolbox/environment/fedora-packaging.Containerfile" target="_blank" rel="noopener noreferrer">fedora-packaging.Containerfile</a>
439
+ </span>
440
+ <button class="github-code-copy" onclick="copyGitHubCode(this)" title="Copy code">
441
+ <svg viewBox="0 0 16 16" width="16" height="16">
442
+ <path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
443
+ <path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
444
+ </svg>
445
+ </button>
446
+ </div>
447
+ <div class="github-code-content">
448
+ <pre><code><span class="token-comment"># Fedora Packaging Development Container</span>
449
+ <span class="token-keyword">FROM</span> registry.fedoraproject.org/fedora:latest
450
+
451
+ <span class="token-keyword">LABEL</span> name=<span class="token-string">"fedora-packaging"</span> \
452
+ summary=<span class="token-string">"Fedora packaging development environment"</span> \
453
+ maintainer=<span class="token-string">"r0x0d"</span>
454
+
455
+ <span class="token-keyword">RUN</span> dnf install -y \
456
+ fedora-packager \
457
+ fedora-review \
458
+ rpm-build \
459
+ rpmdevtools \
460
+ mock \
461
+ && dnf clean all
462
+
463
+ <span class="token-keyword">RUN</span> rpmdev-setuptree
464
+
465
+ <span class="token-keyword">CMD</span> [<span class="token-string">"/bin/bash"</span>]</code></pre>
466
+ </div>
467
+ </div>
468
+ </section>
469
+
470
+ <section class="example-section">
471
+ <h2>Line Range - Specific Lines</h2>
472
+ <p>Embed only specific lines from a file:</p>
473
+ <div class="usage-block">
474
+ {% github_code r0x0d/toolbox-dev/blob/main/toolbox/environment/fedora-packaging.Containerfile#L5-L15 %}
475
+ </div>
476
+
477
+ <!-- Simulated output with line range -->
478
+ <div class="github-code-block">
479
+ <div class="github-code-header">
480
+ <span class="github-code-filename">
481
+ <svg class="github-icon" viewBox="0 0 16 16" width="16" height="16">
482
+ <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
483
+ </svg>
484
+ <a href="https://github.com/r0x0d/toolbox-dev/blob/main/toolbox/environment/fedora-packaging.Containerfile#L5-L15" target="_blank" rel="noopener noreferrer">fedora-packaging.Containerfile (L5-L15)</a>
485
+ </span>
486
+ <button class="github-code-copy" onclick="copyGitHubCode(this)" title="Copy code">
487
+ <svg viewBox="0 0 16 16" width="16" height="16">
488
+ <path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
489
+ <path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
490
+ </svg>
491
+ </button>
492
+ </div>
493
+ <div class="github-code-content">
494
+ <pre><code><span class="token-keyword">LABEL</span> name=<span class="token-string">"fedora-packaging"</span> \
495
+ summary=<span class="token-string">"Fedora packaging development environment"</span> \
496
+ maintainer=<span class="token-string">"r0x0d"</span>
497
+
498
+ <span class="token-keyword">RUN</span> dnf install -y \
499
+ fedora-packager \
500
+ fedora-review \
501
+ rpm-build \
502
+ rpmdevtools \
503
+ mock \
504
+ && dnf clean all</code></pre>
505
+ </div>
506
+ </div>
507
+ </section>
508
+
509
+ <section class="example-section">
510
+ <h2>Python Example</h2>
511
+ <div class="usage-block">
512
+ {% github_code octocat/Hello-World/blob/master/app.py %}
513
+ </div>
514
+
515
+ <div class="github-code-block">
516
+ <div class="github-code-header">
517
+ <span class="github-code-filename">
518
+ <svg class="github-icon" viewBox="0 0 16 16" width="16" height="16">
519
+ <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
520
+ </svg>
521
+ <a href="https://github.com/octocat/Hello-World/blob/master/app.py" target="_blank" rel="noopener noreferrer">app.py</a>
522
+ </span>
523
+ <button class="github-code-copy" onclick="copyGitHubCode(this)" title="Copy code">
524
+ <svg viewBox="0 0 16 16" width="16" height="16">
525
+ <path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
526
+ <path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
527
+ </svg>
528
+ </button>
529
+ </div>
530
+ <div class="github-code-content">
531
+ <pre><code><span class="token-comment">#!/usr/bin/env python3</span>
532
+ <span class="token-string">"""Hello World Application"""</span>
533
+
534
+ <span class="token-keyword">def</span> <span class="token-function">greet</span>(name: str) -> str:
535
+ <span class="token-string">"""Return a greeting message."""</span>
536
+ <span class="token-keyword">return</span> <span class="token-string">f"Hello, {name}!"</span>
537
+
538
+ <span class="token-keyword">def</span> <span class="token-function">main</span>():
539
+ message = greet(<span class="token-string">"World"</span>)
540
+ print(message)
541
+
542
+ <span class="token-keyword">if</span> __name__ == <span class="token-string">"__main__"</span>:
543
+ main()</code></pre>
544
+ </div>
545
+ </div>
546
+ </section>
547
+
548
+ <section class="example-section">
549
+ <h2>Error State</h2>
550
+ <p>When an invalid reference is provided, a helpful error is shown:</p>
551
+ <div class="usage-block">
552
+ {% github_code invalid-reference %}
553
+ </div>
554
+
555
+ <div class="github-code-error">
556
+ <strong>GitHub Code Error:</strong> Invalid GitHub reference: invalid-reference
557
+ </div>
558
+ </section>
559
+
560
+ <footer>
561
+ <p>
562
+ Created for Jekyll blogs with
563
+ <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener noreferrer">Chirpy theme</a>
564
+ </p>
565
+ <p style="margin-top: 0.5rem; font-size: 0.875rem;">
566
+ Open <code>demo.html</code> directly in your browser to preview • Toggle theme with the button in the top right
567
+ </p>
568
+ </footer>
569
+ </div>
570
+
571
+ <script>
572
+ function toggleTheme() {
573
+ const html = document.documentElement;
574
+ const currentMode = html.getAttribute('data-mode');
575
+ html.setAttribute('data-mode', currentMode === 'dark' ? 'light' : 'dark');
576
+ }
577
+
578
+ function copyGitHubCode(button) {
579
+ const codeBlock = button.closest('.github-code-block');
580
+ const codeElement = codeBlock.querySelector('code');
581
+ const text = codeElement.textContent;
582
+
583
+ navigator.clipboard.writeText(text).then(() => {
584
+ button.classList.add('copied');
585
+ button.innerHTML = `
586
+ <svg viewBox="0 0 16 16" width="16" height="16">
587
+ <path fill="currentColor" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
588
+ </svg>
589
+ `;
590
+
591
+ setTimeout(() => {
592
+ button.classList.remove('copied');
593
+ button.innerHTML = `
594
+ <svg viewBox="0 0 16 16" width="16" height="16">
595
+ <path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
596
+ <path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
597
+ </svg>
598
+ `;
599
+ }, 2000);
600
+ }).catch(err => {
601
+ console.error('Failed to copy code:', err);
602
+ });
603
+ }
604
+ </script>
605
+ </body>
606
+ </html>
@@ -0,0 +1,60 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_relative 'lib/jekyll-github-code/version'
4
+
5
+ Gem::Specification.new do |spec|
6
+ spec.name = 'jekyll-github-code'
7
+ spec.version = Jekyll::GitHubCode::VERSION
8
+ spec.authors = ['Rodolfo Olivieri']
9
+ spec.email = ['rodolfo.olivieri3@gmail.com']
10
+
11
+ spec.summary = 'A Jekyll plugin to embed code from GitHub repositories'
12
+ spec.description = 'Embed code snippets from GitHub repositories directly in your Jekyll ' \
13
+ 'blog posts with automatic syntax highlighting, line range support, and ' \
14
+ 'clickable links to the source.'
15
+ spec.homepage = 'https://github.com/r0x0d/jekyll-github-code'
16
+ spec.license = 'MIT'
17
+
18
+ spec.required_ruby_version = '>= 2.7.0'
19
+
20
+ spec.metadata = {
21
+ 'bug_tracker_uri' => 'https://github.com/r0x0d/jekyll-github-code/issues',
22
+ 'changelog_uri' => 'https://github.com/r0x0d/jekyll-github-code/blob/main/CHANGELOG.md',
23
+ 'documentation_uri' => 'https://github.com/r0x0d/jekyll-github-code#readme',
24
+ 'homepage_uri' => spec.homepage,
25
+ 'source_code_uri' => 'https://github.com/r0x0d/jekyll-github-code',
26
+ 'rubygems_mfa_required' => 'true'
27
+ }
28
+
29
+ # Specify which files should be added to the gem when it is released.
30
+ spec.files = Dir.chdir(__dir__) do
31
+ `git ls-files -z`.split("\x0").reject do |f|
32
+ (f == __FILE__) ||
33
+ f.match(%r{\A(?:(?:bin|test|spec|features)/|\.(?:git|travis|circleci)|appveyor)})
34
+ end
35
+ end
36
+
37
+ # If git is not available, use a fallback
38
+ if spec.files.empty?
39
+ spec.files = Dir[
40
+ 'lib/**/*',
41
+ 'assets/**/*',
42
+ 'LICENSE',
43
+ 'README.md',
44
+ 'CHANGELOG.md'
45
+ ]
46
+ end
47
+
48
+ spec.require_paths = ['lib']
49
+
50
+ # Runtime dependencies
51
+ spec.add_dependency 'jekyll', '>= 3.7', '< 5.0'
52
+ spec.add_dependency 'liquid', '>= 4.0'
53
+
54
+ # Development dependencies
55
+ spec.add_development_dependency 'minitest', '~> 5.20'
56
+ spec.add_development_dependency 'rake', '~> 13.0'
57
+ spec.add_development_dependency 'rubocop', '~> 1.57'
58
+ spec.add_development_dependency 'webmock', '~> 3.19'
59
+ end
60
+
@@ -0,0 +1,30 @@
1
+ # frozen_string_literal: true
2
+
3
+ require 'net/http'
4
+ require 'uri'
5
+
6
+ module Jekyll
7
+ module GitHubCode
8
+ # Fetches code content from GitHub
9
+ class CodeFetcher
10
+ class FetchError < StandardError; end
11
+
12
+ def self.fetch(url)
13
+ uri = URI.parse(url)
14
+ response = Net::HTTP.get_response(uri)
15
+
16
+ case response
17
+ when Net::HTTPSuccess
18
+ response.body
19
+ when Net::HTTPRedirection
20
+ fetch(response['location'])
21
+ else
22
+ raise FetchError, "Failed to fetch #{url}: #{response.code} #{response.message}"
23
+ end
24
+ rescue StandardError => e
25
+ raise FetchError, "Error fetching #{url}: #{e.message}"
26
+ end
27
+ end
28
+ end
29
+ end
30
+