docs: add a compact giscus comment section to most pages

aphp · Nov 15, 2024 · fe81659 · fe81659
1 parent 1ebc7d7
commit fe81659
Show file tree

Hide file tree

Showing 3 changed files with 490 additions and 0 deletions.
diff --git a/docs/assets/overrides/partials/comments.html b/docs/assets/overrides/partials/comments.html
@@ -0,0 +1,54 @@
+{% if page.url.split("/")[0] in ["concepts", "tutorials", "pipes", "tokenizers", "data", "utilities"] %}
+<script src="https://giscus.app/client.js"
+        data-repo="aphp/edsnlp"
+        data-repo-id="R_kgDOG97JnA"
+        data-category="Announcements"
+        loading="lazy"
+        data-category-id="DIC_kwDOG97JnM4CkS1h"
+        data-mapping="title"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="bottom"
+        data-theme="https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_light.css"
+        data-lang="en"
+        crossorigin="anonymous"
+        async>
+</script>
+
+<!-- Synchronize Giscus theme with palette -->
+<script>
+    var giscus = document.querySelector("script[src*=giscus]")
+
+    // Set palette on initial load
+    var palette = __md_get("__palette")
+    if (palette && typeof palette.color === "object") {
+        var theme = palette.color.scheme === "slate"
+            ? "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_dark.css"
+            : "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_light.css"
+
+        // Instruct Giscus to set theme
+        giscus.setAttribute("data-theme", theme)
+    }
+
+    // Register event handlers after documented loaded
+    document.addEventListener("DOMContentLoaded", function () {
+        var ref = document.querySelector("[data-md-component=palette]")
+        ref.addEventListener("change", function () {
+            var palette = __md_get("__palette")
+            if (palette && typeof palette.color === "object") {
+                var theme = palette.color.scheme === "slate"
+                    ? "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_dark.css"
+                    : "https://aphp.github.io/edsnlp/master/assets/stylesheets/giscus_light.css"
+
+                // Instruct Giscus to change theme
+                var frame = document.querySelector(".giscus-frame")
+                frame.contentWindow.postMessage(
+                    {giscus: {setConfig: {theme}}},
+                    "https://giscus.app"
+                )
+            }
+        })
+    })
+</script>
+{% endif %}
diff --git a/docs/assets/stylesheets/giscus_dark.css b/docs/assets/stylesheets/giscus_dark.css
@@ -0,0 +1,218 @@
+/*! MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */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;
+
+  /*! 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)}
+
+/* Hide closed discussions */
+
+.gsc-comment:has(.gsc-comment-content.minimized) .gsc-replies {
+    display: none;
+}
+
+.gsc-comment:has(.gsc-comment-content.minimized) {
+    display: none;
+}
+
+.gsc-timeline:has(.gsc-comment-content.minimized):after {
+    content: "Some dicussions were closed";
+    font-size: 0.875rem;
+    font-style: italic;
+    color: var(--color-fg-muted, var(--color-text-secondary));
+}
+
+/* Styling:
+* The main goal of this is to make it more compact, re-ordering elements to stack them horizontally, removing
+* unnecessary padding and margins, and dropping some irrelevant buttons (like the markdown helper link) */
+
+.gsc-timeline {
+    gap: 0.5rem;
+}
+
+.gsc-main {
+    gap: 0.25rem;
+}
+
+.gsc-comments {
+    gap: 0.8rem
+}
+
+.gsc-comment-header {
+    padding-inline-end:0.5rem;
+    padding-inline-start:0.5rem;
+    padding-top: .5rem;
+    grid-area: header;
+}
+
+.gsc-comment-content {
+    padding: 0.5rem 0.75rem;
+}
+
+.gsc-comment-reactions {
+    align-items: center;
+    margin-inline-start:0.5rem
+}
+
+.gsc-comment-box-textarea {
+    min-height: 58px !important;
+}
+
+.gsc-box-preview {
+    min-height: 58px !important;
+    padding-bottom: 0.5rem;
+}
+
+.gsc-reply-box {
+    padding-inline-end: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-inline-start: 0.5rem;
+    padding-top: 0.5rem;
+}
+
+.gsc-reply {
+    padding: 0 0.5rem 0;
+}
+
+.gsc-comment-box, .gsc-reply-box {
+    grid-area: reply;
+    border-bottom-left-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem;
+}
+
+.gsc-replies {
+    grid-area: replies;
+}
+
+.gsc-reactions-count + div {}
+
+#__next .gsc-reactions-count + div {
+    margin-top: 0.25rem;
+}
+
+.gsc-comment-footer {
+    grid-area: reactions;
+    padding-inline-end: 0.5rem;
+    padding-top: .5rem;
+    margin-bottom: 0;
+    justify-content: end;
+    flex: 0;
+}
+
+.gsc-comment-content {
+    grid-area: content;
+}
+
+.gsc-comment > div {
+    display: grid;
+    grid-template-areas:
+        "header reactions"
+        "content content"
+        "replies replies"
+        "reply reply";
+    grid-template-rows: auto;
+}
+
+.gsc-comment-replies-count {
+    margin-inline-end: 0rem;
+}
+
+.gsc-tl-line {
+    inset-inline-start: 22px;
+}
+
+.gsc-reply > div.flex > div.w-full {
+    display: grid;
+    grid-template:
+        "header reactions"
+        "content content";
+}
+
+.gsc-reply-content {
+    grid-area: content;
+}
+
+.gsc-reply-footer {
+    grid-area: reactions;
+    justify-content: end;
+}
+
+.gsc-reply-header {
+    grid-area: header;
+}
+
+.gsc-reply-reactions {
+    gap: 0;
+    margin-inline-end: 0;
+}
+
+.gsc-comment-box-textarea-extras {
+    display: none;
+}
+
+.gsc-timeline .gsc-reactions-popover.open.left:before {
+    inset-inline-end: 9px;
+    inset-inline-start: unset;
+}
+
+.gsc-timeline .gsc-reactions-popover.top {
+    inset-inline-end: -.375rem;
+    inset-inline-start: unset;
+}
+
+.gsc-timeline .gsc-reactions-popover.open.left:after {
+    inset-inline-end: 10px;
+    inset-inline-start: unset;
+}
+
+.gsc-comment-box-textarea {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+.gsc-comment-box {
+    display: grid;
+    grid-template:
+        "header buttons"
+        "content content";
+    grid-template-columns: auto minmax(0,max-content);
+}
+
+.gsc-comment-box-tabs {
+    grid-area: header;
+}
+
+.gsc-comment-box-main {
+    grid-area: content;
+}
+
+.gsc-comment-box-bottom {
+    grid-area: buttons;
+    background-color: var(--color-canvas-subtle, var(--color-bg-tertiary));
+    margin: 0px;
+    align-items: center;
+    border-bottom-width: 1px;
+    border-start-end-radius: .25rem;
+    border-start-start-radius: 0;
+    padding-right: 0.5rem;
+    justify-content: end;
+    gap: 0.5rem;
+}
+
+.gsc-comment-box-md-toolbar {
+    margin-top: 0px;
+}
+
+.gsc-comment-box-is-reply > .gsc-comment-box-bottom {
+    border-top-width: 1px;
+    border-top-right-radius: 0;
+}
+
+.gsc-comment-box-preview {
+    min-height: 58px !important;
+}
+
+/* Otherwise some popup overflow the iframe */
+.gsc-reactions {
+    margin-top: 0.95em;
+}