hexo-comments-gitment 1.0.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.
@@ -0,0 +1,482 @@
1
+ <%- css('https://imsun.github.io/gitment/style/default.css') %>
2
+
3
+ <style>
4
+ :root {
5
+ --gm-bg-color: #fff;
6
+ --gm-bg-secondary-color: #f5f5f5;
7
+ --gm-bg-tertiary-color: #fafbfc;
8
+ --gm-text-secondary-color: #666;
9
+ --gm-comment-header-bg: #fff;
10
+ --gm-comment-header-color: #666;
11
+ --gm-text-heading-color: #1b1f23;
12
+ --gm-border-color: #cfd8dc;
13
+ --gm-btn-primary-bg: #00BCD4;
14
+ --gm-btn-primary-hover-bg: #00ACC1;
15
+ --gm-btn-primary-disabled-bg: #4DD0E1;
16
+ --gm-btn-primary-text: #fff;
17
+ --gm-like-color: #F44336;
18
+ --gm-footer-tip-hover-color: #2196F3;
19
+ --gm-spinner-fill: #333;
20
+ --gm-code-bg: rgba(27,31,35,0.05);
21
+ --gm-code-block-bg: #f5f5f5;
22
+ --gm-table-border: #dfe2e5;
23
+ --gm-kbd-border: #c6cbd1;
24
+ --gm-kbd-border-bottom: #959da5;
25
+ --gm-kbd-text: #444d56;
26
+ --gm-kbd-shadow: inset 0 -1px 0 #959da5;
27
+ --gm-blockquote-color: #6a737d;
28
+ --gm-blockquote-border: #dfe2e5;
29
+ --gm-hr-color: #e1e4e8;
30
+ --gm-h1-h2-border: #eaecef;
31
+ --gm-github-icon-fill: #fff;
32
+ --gm-github-icon-bg: #333;
33
+ --gm-comment-arrow-bg: #fff;
34
+ --gm-fold-gradient-end: rgba(255, 255, 255, .9);
35
+ --gm-header-textarea-bg-color: #fff;
36
+ --gm-header-textarea-border-color: #d1d5da;
37
+ --gm-comment-bg-color: #f9f9f9;
38
+ --gm-comment-body-color: #333;
39
+ --gm-admin-comment-bg-color: #f6f9fe;
40
+ --gm-btn-bg-color: #fff;
41
+ --gm-btn-hover-bg-color: #f3f4f6;
42
+ --gm-btn-border-color: #d1d5da;
43
+ color-scheme: light;
44
+ }
45
+
46
+ .dark-theme {
47
+ --gm-bg-color: #1a1a1a;
48
+ --gm-bg-secondary-color: #2a2a2a;
49
+ --gm-bg-tertiary-color: #333;
50
+ --gm-text-secondary-color: #999;
51
+ --gm-comment-header-bg: #444;
52
+ --gm-comment-header-color: #ccc;
53
+ --gm-text-heading-color: #e1e4e8;
54
+ --gm-border-color: #666;
55
+ --gm-btn-primary-bg: #0088a3;
56
+ --gm-btn-primary-hover-bg: #007a91;
57
+ --gm-btn-primary-disabled-bg: #3a6b7a;
58
+ --gm-btn-primary-text: #fff;
59
+ --gm-like-color: #F44336;
60
+ --gm-footer-tip-hover-color: #2196F3;
61
+ --gm-spinner-fill: #e1e4e8;
62
+ --gm-code-bg: rgba(240,246,252,0.15);
63
+ --gm-code-block-bg: #161b22;
64
+ --gm-table-border: #30363d;
65
+ --gm-kbd-border: #555;
66
+ --gm-kbd-border-bottom: #555;
67
+ --gm-kbd-text: #e1e4e8;
68
+ --gm-kbd-shadow: inset 0 -1px 0 #555;
69
+ --gm-blockquote-color: #8b949e;
70
+ --gm-blockquote-border: #3b434b;
71
+ --gm-hr-color: #30363d;
72
+ --gm-h1-h2-border: #666;
73
+ --gm-github-icon-fill: #e1e4e8;
74
+ --gm-github-icon-bg: #333;
75
+ --gm-comment-arrow-bg: #1a1a1a;
76
+ --gm-fold-gradient-end: rgba(26, 26, 26, .9);
77
+ --gm-header-textarea-bg-color: #333;
78
+ --gm-header-textarea-border-color: #555;
79
+ --gm-comment-bg-color: #252525;
80
+ --gm-comment-body-color: #e1e4e8;
81
+ --gm-admin-comment-bg-color: #1a2535;
82
+ --gm-btn-bg-color: #444;
83
+ --gm-btn-hover-bg-color: #333;
84
+ --gm-btn-border-color: #555;
85
+ color-scheme: dark;
86
+ }
87
+
88
+ .gitment-container {
89
+ color: var(--text-color) !important;
90
+
91
+ /* Links */
92
+ & a,
93
+ & a:visited {
94
+ color: var(--text-color) !important;
95
+ border-bottom: 0;
96
+ }
97
+ & a:hover {
98
+ color: var(--text-color) !important;
99
+ }
100
+
101
+ /* Spinner */
102
+ & .gitment-spinner-icon {
103
+ fill: var(--gm-spinner-fill) !important;
104
+ }
105
+
106
+ /* Header */
107
+ & .gitment-header {
108
+ border-color: var(--gm-border-color) !important;
109
+ }
110
+
111
+ & .gitment-header-issue-link,
112
+ & .gitment-header-issue-link:visited,
113
+ & .gitment-header-issue-link:hover {
114
+ color: var(--gm-text-secondary-color) !important;
115
+ }
116
+
117
+ /* Buttons */
118
+ & .gitment-btn {
119
+ background-color: var(--gm-btn-bg-color) !important;
120
+ border-color: var(--gm-btn-border-color) !important;
121
+ color: var(--text-color) !important;
122
+
123
+ &:hover {
124
+ background-color: var(--gm-btn-hover-bg-color) !important;
125
+ }
126
+ }
127
+
128
+ & .gitment-editor-submit,
129
+ & .gitment-comments-init-btn {
130
+ color: var(--gm-btn-primary-text) !important;
131
+ background-color: var(--gm-btn-primary-bg) !important;
132
+
133
+ &:hover {
134
+ background-color: var(--gm-btn-primary-hover-bg) !important;
135
+ }
136
+
137
+ &:disabled {
138
+ color: rgba(255,255,255,0.75) !important;
139
+ background-color: var(--gm-btn-primary-disabled-bg) !important;
140
+ }
141
+ }
142
+
143
+ /* Like button */
144
+ & .gitment-comment-like-btn,
145
+ & .gitment-comment-like-btn svg,
146
+ & .gitment-header-like-btn svg {
147
+ color: var(--text-color) !important;
148
+ fill: var(--text-color) !important;
149
+ }
150
+
151
+ & .gitment-comment-like-btn.liked,
152
+ & .gitment-comment-like-btn.liked svg,
153
+ & .gitment-header-like-btn.liked svg {
154
+ color: var(--gm-like-color) !important;
155
+ fill: var(--gm-like-color) !important;
156
+ }
157
+
158
+ /* Comment */
159
+ & .gitment-comment {
160
+ border-color: var(--gm-border-color) !important;
161
+ }
162
+
163
+ & .gitment-comment-main,
164
+ & .gitment-comment-body {
165
+ color: var(--gm-comment-body-color) !important;
166
+ }
167
+
168
+ & .gitment-comment-body {
169
+ background-color: var(--gm-comment-bg-color) !important;
170
+ }
171
+
172
+ & .gitment-admin-comment .gitment-comment-body {
173
+ background-color: var(--gm-admin-comment-bg-color) !important;
174
+ }
175
+
176
+ & .gitment-comment-main {
177
+ border-color: var(--gm-border-color) !important;
178
+
179
+ &::before {
180
+ border-right-color: var(--gm-border-color) !important;
181
+ }
182
+ &::after {
183
+ border-right-color: var(--gm-comment-arrow-bg) !important;
184
+ }
185
+ }
186
+
187
+ & .gitment-comment-header {
188
+ color: var(--gm-comment-header-color) !important;
189
+ background-color: var(--gm-comment-header-bg) !important;
190
+ }
191
+
192
+ & a.gitment-comment-name,
193
+ & a.gitment-comment-name:visited {
194
+ color: var(--gm-text-secondary-color) !important;
195
+ }
196
+
197
+ /* Comment body folded */
198
+ & .gitment-comment-body-folded {
199
+ &::before {
200
+ background: -webkit-linear-gradient(top, transparent, var(--gm-fold-gradient-end)) !important;
201
+ background: linear-gradient(180deg, transparent, var(--gm-fold-gradient-end)) !important;
202
+ }
203
+ &::after {
204
+ color: var(--gm-text-secondary-color) !important;
205
+ background: var(--gm-fold-gradient-end) !important;
206
+ }
207
+ }
208
+
209
+ /* Editor */
210
+ & .gitment-editor-container {
211
+ color: var(--text-color) !important;
212
+ }
213
+
214
+ & .gitment-editor-main {
215
+ border-color: var(--gm-border-color) !important;
216
+
217
+ &::before {
218
+ border-right-color: var(--gm-border-color) !important;
219
+ }
220
+ &::after {
221
+ border-right-color: var(--gm-comment-arrow-bg) !important;
222
+ }
223
+ }
224
+
225
+ & .gitment-editor-header {
226
+ border-bottom-color: var(--gm-border-color) !important;
227
+ }
228
+
229
+ & .gitment-editor-tab {
230
+ color: var(--gm-text-secondary-color) !important;
231
+
232
+ &.gitment-selected {
233
+ color: var(--text-color) !important;
234
+ background-color: var(--gm-bg-color) !important;
235
+ border-color: var(--gm-border-color) !important;
236
+ }
237
+ }
238
+
239
+ & .gitment-editor-body textarea {
240
+ background-color: var(--gm-header-textarea-bg-color) !important;
241
+ color: var(--text-color) !important;
242
+ border-color: var(--gm-header-textarea-border-color) !important;
243
+
244
+ &:focus {
245
+ background-color: var(--gm-header-textarea-bg-color) !important;
246
+ }
247
+ }
248
+
249
+ & .gitment-editor-preview {
250
+ color: var(--text-color) !important;
251
+ background-color: var(--gm-header-textarea-bg-color) !important;
252
+ }
253
+
254
+ & .gitment-editor-footer-tip {
255
+ color: var(--gm-text-secondary-color) !important;
256
+ }
257
+
258
+ & a.gitment-editor-footer-tip:hover {
259
+ color: var(--gm-footer-tip-hover-color) !important;
260
+ }
261
+
262
+ & a.gitment-editor-login-link,
263
+ & a.gitment-editor-login-link:visited {
264
+ color: var(--text-color) !important;
265
+ }
266
+ & a.gitment-editor-login-link:hover {
267
+ color: var(--gm-btn-primary-hover-bg) !important;
268
+ }
269
+
270
+ & a.gitment-editor-logout-link,
271
+ & a.gitment-editor-logout-link:visited {
272
+ color: var(--gm-text-secondary-color) !important;
273
+ }
274
+ & a.gitment-editor-logout-link:hover {
275
+ color: var(--gm-btn-primary-disabled-bg) !important;
276
+ }
277
+
278
+ /* Footer */
279
+ & .gitment-footer {
280
+ border-color: var(--gm-border-color) !important;
281
+ }
282
+
283
+ & a.gitment-footer-project-link,
284
+ & a.gitment-footer-project-link:visited {
285
+ color: var(--text-color) !important;
286
+ }
287
+
288
+ /* Comments list */
289
+ & .gitment-comments-empty,
290
+ & .gitment-comments-loading,
291
+ & .gitment-comments-error,
292
+ & .gitment-comments-null {
293
+ color: var(--text-color) !important;
294
+ }
295
+
296
+ /* Pagination */
297
+ & .gitment-comments-page-item {
298
+ color: var(--text-color) !important;
299
+ border-color: var(--gm-border-color) !important;
300
+
301
+ &:hover,
302
+ &.gitment-selected {
303
+ background-color: var(--gm-bg-secondary-color) !important;
304
+ }
305
+ }
306
+
307
+ /* Markdown content */
308
+ & .gitment-markdown {
309
+ color: var(--text-color) !important;
310
+
311
+ & a {
312
+ color: var(--text-color) !important;
313
+ }
314
+
315
+ & hr {
316
+ background-color: var(--gm-hr-color) !important;
317
+ border-bottom-color: var(--gm-hr-color) !important;
318
+ }
319
+
320
+ & h1,
321
+ & h2 {
322
+ border-bottom-color: var(--gm-h1-h2-border) !important;
323
+ }
324
+
325
+ & h1, & h2, & h3, & h4, & h5, & h6 {
326
+ color: var(--text-color) !important;
327
+ }
328
+
329
+ & h6 {
330
+ color: var(--gm-text-secondary-color) !important;
331
+ }
332
+
333
+ & blockquote {
334
+ color: var(--gm-blockquote-color) !important;
335
+ border-left-color: var(--gm-blockquote-border) !important;
336
+ }
337
+
338
+ & code {
339
+ background-color: var(--gm-code-bg) !important;
340
+ color: var(--text-color) !important;
341
+ }
342
+
343
+ & pre,
344
+ & .highlight pre {
345
+ background-color: var(--gm-code-block-bg) !important;
346
+ }
347
+
348
+ & pre > code {
349
+ background-color: transparent !important;
350
+ }
351
+
352
+ & table tr {
353
+ background-color: var(--gm-bg-color) !important;
354
+ border-top-color: var(--gm-table-border) !important;
355
+
356
+ &:nth-child(2n) {
357
+ background-color: var(--gm-bg-secondary-color) !important;
358
+ }
359
+ }
360
+
361
+ & table th,
362
+ & table td {
363
+ border-color: var(--gm-table-border) !important;
364
+ }
365
+
366
+ & kbd {
367
+ color: var(--gm-kbd-text) !important;
368
+ background-color: var(--gm-bg-tertiary-color) !important;
369
+ border-color: var(--gm-kbd-border) !important;
370
+ border-bottom-color: var(--gm-kbd-border-bottom) !important;
371
+ box-shadow: var(--gm-kbd-shadow) !important;
372
+ }
373
+
374
+ & .pl-s, & .pl-pds,
375
+ & .pl-s .pl-pse .pl-s1,
376
+ & .pl-sr, & .pl-sr .pl-cce,
377
+ & .pl-sr .pl-sre,
378
+ & .pl-sr .pl-sra {
379
+ color: var(--text-color) !important;
380
+ }
381
+
382
+ & .pl-smi, & .pl-s .pl-s1, & .pl-mi, & .pl-mb {
383
+ color: var(--text-color) !important;
384
+ }
385
+
386
+ & .pl-ii, & .pl-c2 {
387
+ color: #f8f8f8 !important;
388
+ }
389
+
390
+ & img {
391
+ background-color: var(--gm-bg-color) !important;
392
+ }
393
+ }
394
+
395
+ /* GitHub icon avatar */
396
+ & .gitment-editor-avatar .gitment-github-icon {
397
+ fill: var(--gm-github-icon-fill) !important;
398
+ background-color: var(--gm-github-icon-bg) !important;
399
+ }
400
+ }
401
+ </style>
402
+
403
+ <%- diversity_data('gitment', theme.gitment, {
404
+ js : 'https://imsun.github.io/gitment/dist/gitment.browser.js'
405
+ }) %>
406
+
407
+ <script>
408
+ const loadGitment = () => {
409
+ const loadingElement = document.getElementById('loading-gitment');
410
+ // 配色方案刷新,重新加载评论
411
+ // 加载提示被隐藏,需要再次显示
412
+ loadingElement?.classList.remove('hidden');
413
+
414
+ // 加载评论模块
415
+ Diversity.utils.loadComments('.gitment-wrap')
416
+ .then(() => Diversity.utils.getScript(conf.gitment.js, {
417
+ condition: window.Gitment
418
+ }))
419
+ .then(() => {
420
+ let issueTerm = conf.gitment.issue_term;
421
+ let gitmentId;
422
+ if (issueTerm === 'pathname')
423
+ gitmentId = window.location.pathname;
424
+ else if (issueTerm === 'url')
425
+ gitmentId = window.location.href;
426
+ else if (issueTerm === 'title')
427
+ gitmentId = document.title;
428
+ else
429
+ gitmentId = issueTerm || conf.gitment.id || window.location.href;
430
+
431
+ let confgObj = {
432
+ owner: conf.gitment.owner,
433
+ repo: conf.gitment.repo,
434
+ oauth: {
435
+ client_id: conf.gitment.client_id,
436
+ client_secret: conf.gitment.client_secret
437
+ },
438
+ id: gitmentId,
439
+ perPage: conf.gitment.per_page || 20,
440
+ maxCommentHeight: conf.gitment.max_comment_height || 250
441
+ }
442
+ if (conf.gitment.title)
443
+ confgObj.title = conf.gitment.title;
444
+ if (conf.gitment.link)
445
+ confgObj.link = conf.gitment.link;
446
+ if (conf.gitment.desc)
447
+ confgObj.desc = conf.gitment.desc;
448
+ if (conf.gitment.labels && Array.isArray(conf.gitment.labels) && conf.gitment.labels.length > 0)
449
+ confgObj.labels = conf.gitment.labels;
450
+
451
+ if (conf.gitment.proxy) {
452
+ const origOpen = XMLHttpRequest.prototype.open;
453
+ XMLHttpRequest.prototype.open = function(method, url, ...args) {
454
+ if (url === 'https://gh-oauth.imsun.net') {
455
+ return origOpen.call(this, method, conf.gitment.proxy, ...args);
456
+ }
457
+ return origOpen.call(this, method, url, ...args);
458
+ };
459
+ }
460
+ const gitment = new Gitment(confgObj);
461
+ gitment.render(document.querySelector('.gitment-wrap'));
462
+ });
463
+
464
+ // Gitment加载检测(Gitment通过DOM渲染,非iframe方案)
465
+ const observeGitmentLoaded = () => {
466
+ const container = document.querySelector('.gitment-wrap');
467
+ if (!container) return;
468
+ const observer = new MutationObserver((mutations, obs) => {
469
+ if (container.querySelector('.gitment-container')) {
470
+ loadingElement?.classList.add('hidden');
471
+ obs.disconnect();
472
+ }
473
+ });
474
+ observer.observe(container, { childList: true, subtree: true });
475
+ };
476
+ observeGitmentLoaded();
477
+ }
478
+
479
+ document.addEventListener('page:loaded', loadGitment);
480
+ document.addEventListener('color-scheme:refresh', loadGitment);
481
+ </script>
482
+