Skip to content

Commit fe81659

Browse files
percevalwpercevalw
committed
docs: add a compact giscus comment section to most pages
1 parent 1ebc7d7 commit fe81659

File tree

3 files changed

+490
-0
lines changed

3 files changed

+490
-0
lines changed

‎docs/assets/overrides/partials/comments.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{% if page.url.split("/")[0] in ["concepts", "tutorials", "pipes", "tokenizers", "data", "utilities"] %}
2+
<script src="https://giscus.app/client.js"
3+
data-repo="aphp/edsnlp"
4+
data-repo-id="R_kgDOG97JnA"
5+
data-category="Announcements"
6+
loading="lazy"
7+
data-category-id="DIC_kwDOG97JnM4CkS1h"
8+
data-mapping="title"
9+
data-strict="0"
10+
data-reactions-enabled="1"
11+
data-emit-metadata="0"
12+
data-input-position="bottom"
13+
data-theme="https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_light.css"
14+
data-lang="en"
15+
crossorigin="anonymous"
16+
async>
17+
</script>
18+
19+
<!-- Synchronize Giscus theme with palette -->
20+
<script>
21+
var giscus = document.querySelector("script[src*=giscus]")
22+
23+
// Set palette on initial load
24+
var palette = __md_get("__palette")
25+
if (palette && typeof palette.color === "object") {
26+
var theme = palette.color.scheme === "slate"
27+
? "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_dark.css"
28+
: "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_light.css"
29+
30+
// Instruct Giscus to set theme
31+
giscus.setAttribute("data-theme", theme)
32+
}
33+
34+
// Register event handlers after documented loaded
35+
document.addEventListener("DOMContentLoaded", function () {
36+
var ref = document.querySelector("[data-md-component=palette]")
37+
ref.addEventListener("change", function () {
38+
var palette = __md_get("__palette")
39+
if (palette && typeof palette.color === "object") {
40+
var theme = palette.color.scheme === "slate"
41+
? "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_dark.css"
42+
: "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_light.css"
43+
44+
// Instruct Giscus to change theme
45+
var frame = document.querySelector(".giscus-frame")
46+
frame.contentWindow.postMessage(
47+
{giscus: {setConfig: {theme}}},
48+
"https://giscus.app"
49+
)
50+
}
51+
})
52+
})
53+
</script>
54+
{% endif %}

‎docs/assets/stylesheets/giscus_dark.css

+218
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
/*! MIT License
2+
* Copyright (c) 2018 GitHub Inc.
3+
* https://github.com/primer/primitives/blob/main/LICENSE
4+
*/main{--color-prettylights-syntax-comment:#8b949e;--color-prettylights-syntax-constant:#79c0ff;--color-prettylights-syntax-entity:#d2a8ff;--color-prettylights-syntax-storage-modifier-import:#c9d1d9;--color-prettylights-syntax-entity-tag:#7ee787;--color-prettylights-syntax-keyword:#ff7b72;--color-prettylights-syntax-string:#a5d6ff;--color-prettylights-syntax-variable:#ffa657;--color-prettylights-syntax-brackethighlighter-unmatched:#f85149;--color-prettylights-syntax-invalid-illegal-text:#f0f6fc;--color-prettylights-syntax-invalid-illegal-bg:#8e1519;--color-prettylights-syntax-carriage-return-text:#f0f6fc;--color-prettylights-syntax-carriage-return-bg:#b62324;--color-prettylights-syntax-string-regexp:#7ee787;--color-prettylights-syntax-markup-list:#f2cc60;--color-prettylights-syntax-markup-heading:#1f6feb;--color-prettylights-syntax-markup-italic:#c9d1d9;--color-prettylights-syntax-markup-bold:#c9d1d9;--color-prettylights-syntax-markup-deleted-text:#ffdcd7;--color-prettylights-syntax-markup-deleted-bg:#67060c;--color-prettylights-syntax-markup-inserted-text:#aff5b4;--color-prettylights-syntax-markup-inserted-bg:#033a16;--color-prettylights-syntax-markup-changed-text:#ffdfb6;--color-prettylights-syntax-markup-changed-bg:#5a1e02;--color-prettylights-syntax-markup-ignored-text:#c9d1d9;--color-prettylights-syntax-markup-ignored-bg:#1158c7;--color-prettylights-syntax-meta-diff-range:#d2a8ff;--color-prettylights-syntax-brackethighlighter-angle:#8b949e;--color-prettylights-syntax-sublimelinter-gutter-mark:#484f58;--color-prettylights-syntax-constant-other-reference-link:#a5d6ff;--color-btn-text:#c9d1d9;--color-btn-bg:#21262d;--color-btn-border:#f0f6fc1a;--color-btn-shadow:0 0 #0000;--color-btn-inset-shadow:0 0 #0000;--color-btn-hover-bg:#30363d;--color-btn-hover-border:#8b949e;--color-btn-active-bg:#282e33;--color-btn-active-border:#6e7681;--color-btn-selected-bg:#161b22;--color-btn-primary-text:#fff;--color-btn-primary-bg:#238636;--color-btn-primary-border:#f0f6fc1a;--color-btn-primary-shadow:0 0 #0000;--color-btn-primary-inset-shadow:0 0 #0000;--color-btn-primary-hover-bg:#2ea043;--color-btn-primary-hover-border:#f0f6fc1a;--color-btn-primary-selected-bg:#238636;--color-btn-primary-selected-shadow:0 0 #0000;--color-btn-primary-disabled-text:#ffffff80;--color-btn-primary-disabled-bg:#23863699;--color-btn-primary-disabled-border:#f0f6fc1a;--color-action-list-item-default-hover-bg:#b1bac41f;--color-segmented-control-bg:#6e76811a;--color-segmented-control-button-bg:#0d1117;--color-segmented-control-button-selected-border:#6e7681;--color-fg-default:#e6edf3;--color-fg-muted:#7d8590;--color-fg-subtle:#6e7681;--color-canvas-default:#0d1117;--color-canvas-overlay:#161b22;--color-canvas-inset:#010409;--color-canvas-subtle:#161b22;--color-border-default:#30363d;--color-border-muted:#21262d;--color-neutral-muted:#6e768166;--color-accent-fg:#2f81f7;--color-accent-emphasis:#1f6feb;--color-accent-muted:#388bfd66;--color-accent-subtle:#388bfd1a;--color-success-fg:#3fb950;--color-attention-fg:#d29922;--color-attention-muted:#bb800966;--color-attention-subtle:#bb800926;--color-danger-fg:#f85149;--color-danger-muted:#f8514966;--color-danger-subtle:#f851491a;--color-primer-shadow-inset:0 0 #0000;--color-scale-gray-7:#21262d;--color-scale-blue-8:#0c2d6b;
5+
6+
/*! Extensions from @primer/css/alerts/flash.scss */--color-social-reaction-bg-hover:var(--color-scale-gray-7);--color-social-reaction-bg-reacted-hover:var(--color-scale-blue-8)}main .pagination-loader-container{background-image:url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)}main .gsc-loading-image{background-image:url(https://github.githubassets.com/images/mona-loading-dark.gif)}
7+
8+
/* Hide closed discussions */
9+
10+
.gsc-comment:has(.gsc-comment-content.minimized) .gsc-replies {
11+
display: none;
12+
}
13+
14+
.gsc-comment:has(.gsc-comment-content.minimized) {
15+
display: none;
16+
}
17+
18+
.gsc-timeline:has(.gsc-comment-content.minimized):after {
19+
content: "Some dicussions were closed";
20+
font-size: 0.875rem;
21+
font-style: italic;
22+
color: var(--color-fg-muted, var(--color-text-secondary));
23+
}
24+
25+
/* Styling:
26+
* The main goal of this is to make it more compact, re-ordering elements to stack them horizontally, removing
27+
* unnecessary padding and margins, and dropping some irrelevant buttons (like the markdown helper link) */
28+
29+
.gsc-timeline {
30+
gap: 0.5rem;
31+
}
32+
33+
.gsc-main {
34+
gap: 0.25rem;
35+
}
36+
37+
.gsc-comments {
38+
gap: 0.8rem
39+
}
40+
41+
.gsc-comment-header {
42+
padding-inline-end:0.5rem;
43+
padding-inline-start:0.5rem;
44+
padding-top: .5rem;
45+
grid-area: header;
46+
}
47+
48+
.gsc-comment-content {
49+
padding: 0.5rem 0.75rem;
50+
}
51+
52+
.gsc-comment-reactions {
53+
align-items: center;
54+
margin-inline-start:0.5rem
55+
}
56+
57+
.gsc-comment-box-textarea {
58+
min-height: 58px !important;
59+
}
60+
61+
.gsc-box-preview {
62+
min-height: 58px !important;
63+
padding-bottom: 0.5rem;
64+
}
65+
66+
.gsc-reply-box {
67+
padding-inline-end: 0.5rem;
68+
padding-bottom: 0.5rem;
69+
padding-inline-start: 0.5rem;
70+
padding-top: 0.5rem;
71+
}
72+
73+
.gsc-reply {
74+
padding: 0 0.5rem 0;
75+
}
76+
77+
.gsc-comment-box, .gsc-reply-box {
78+
grid-area: reply;
79+
border-bottom-left-radius: 0.3rem;
80+
border-bottom-right-radius: 0.3rem;
81+
}
82+
83+
.gsc-replies {
84+
grid-area: replies;
85+
}
86+
87+
.gsc-reactions-count + div {}
88+
89+
#__next .gsc-reactions-count + div {
90+
margin-top: 0.25rem;
91+
}
92+
93+
.gsc-comment-footer {
94+
grid-area: reactions;
95+
padding-inline-end: 0.5rem;
96+
padding-top: .5rem;
97+
margin-bottom: 0;
98+
justify-content: end;
99+
flex: 0;
100+
}
101+
102+
.gsc-comment-content {
103+
grid-area: content;
104+
}
105+
106+
.gsc-comment > div {
107+
display: grid;
108+
grid-template-areas:
109+
"header reactions"
110+
"content content"
111+
"replies replies"
112+
"reply reply";
113+
grid-template-rows: auto;
114+
}
115+
116+
.gsc-comment-replies-count {
117+
margin-inline-end: 0rem;
118+
}
119+
120+
.gsc-tl-line {
121+
inset-inline-start: 22px;
122+
}
123+
124+
.gsc-reply > div.flex > div.w-full {
125+
display: grid;
126+
grid-template:
127+
"header reactions"
128+
"content content";
129+
}
130+
131+
.gsc-reply-content {
132+
grid-area: content;
133+
}
134+
135+
.gsc-reply-footer {
136+
grid-area: reactions;
137+
justify-content: end;
138+
}
139+
140+
.gsc-reply-header {
141+
grid-area: header;
142+
}
143+
144+
.gsc-reply-reactions {
145+
gap: 0;
146+
margin-inline-end: 0;
147+
}
148+
149+
.gsc-comment-box-textarea-extras {
150+
display: none;
151+
}
152+
153+
.gsc-timeline .gsc-reactions-popover.open.left:before {
154+
inset-inline-end: 9px;
155+
inset-inline-start: unset;
156+
}
157+
158+
.gsc-timeline .gsc-reactions-popover.top {
159+
inset-inline-end: -.375rem;
160+
inset-inline-start: unset;
161+
}
162+
163+
.gsc-timeline .gsc-reactions-popover.open.left:after {
164+
inset-inline-end: 10px;
165+
inset-inline-start: unset;
166+
}
167+
168+
.gsc-comment-box-textarea {
169+
border-bottom-left-radius: inherit;
170+
border-bottom-right-radius: inherit;
171+
}
172+
173+
.gsc-comment-box {
174+
display: grid;
175+
grid-template:
176+
"header buttons"
177+
"content content";
178+
grid-template-columns: auto minmax(0,max-content);
179+
}
180+
181+
.gsc-comment-box-tabs {
182+
grid-area: header;
183+
}
184+
185+
.gsc-comment-box-main {
186+
grid-area: content;
187+
}
188+
189+
.gsc-comment-box-bottom {
190+
grid-area: buttons;
191+
background-color: var(--color-canvas-subtle, var(--color-bg-tertiary));
192+
margin: 0px;
193+
align-items: center;
194+
border-bottom-width: 1px;
195+
border-start-end-radius: .25rem;
196+
border-start-start-radius: 0;
197+
padding-right: 0.5rem;
198+
justify-content: end;
199+
gap: 0.5rem;
200+
}
201+
202+
.gsc-comment-box-md-toolbar {
203+
margin-top: 0px;
204+
}
205+
206+
.gsc-comment-box-is-reply > .gsc-comment-box-bottom {
207+
border-top-width: 1px;
208+
border-top-right-radius: 0;
209+
}
210+
211+
.gsc-comment-box-preview {
212+
min-height: 58px !important;
213+
}
214+
215+
/* Otherwise some popup overflow the iframe */
216+
.gsc-reactions {
217+
margin-top: 0.95em;
218+
}

0 commit comments

Comments
 (0)