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