bbaovanc.com/layouts/partials/comments.html

<!-- idk why this is even required
    vim: ft=html
-->
<style>
#isso-thread > h4 {
    color: var(--text-1);
    margin-bottom: 8px;
}

#isso-root .isso-comment:not(:first-of-type),
.isso-follow-up .isso-comment {
    border-color: var(--background-highlight);
}

.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-author,
.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-page-author-suffix,
.isso-comment > .isso-text-wrapper > .isso-comment-footer,
.isso-comment > .isso-text-wrapper > .isso-comment-footer .isso-votes {
    color: var(--text-1);
    opacity: 80%;
}

.isso-comment.isso-is-page-author > .isso-text-wrapper {
    background-color: var(--background-accent);
}
.isso-comment.isso-is-page-author > .isso-text-wrapper > .isso-comment-header > .isso-author {
    color: var(--link-color);
}

.isso-postbox > .isso-form-wrapper .isso-preview {
    color: var(--text-1);
    background: var(--background-1);
}

.isso-comment > .isso-text-wrapper > .isso-comment-footer a,
.isso-comment > .isso-text-wrapper > .isso-comment-footer a:hover {
    color: var(--link-color) !important;
}

.isso-comment > .isso-text-wrapper > .isso-comment-footer a:hover {
    text-decoration: underline;
}

.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper input,
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input,
#isso-thread .isso-textarea,
.isso-postbox > .isso-form-wrapper .isso-preview {
    color: var(--text-1);
    background-color: var(--background-1);
    border-color: var(--background-2) !important;
}

.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input:hover {
    background-color: var(--background-2);
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input:active {
    background-color: var(--background-highlight);
}

#isso-thread .isso-textarea {
    margin-bottom: 4px;
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper {
    display: inline-flex;
    flex-direction: column;
    margin-right: 4px;
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper input {
    order: 1;
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper label {
    order: 2;
    font-size: small;
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
    margin-left: 4px;
    margin-top: 0;
}
@media screen and (max-width: 600px) {
    .isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper {
        display: block;
        margin-right: 0;
    }
}

@media print {
    .comments {
        break-before: always;
    }
    .isso-comment > .isso-text-wrapper {
        break-inside: avoid;
    }

    .isso-postbox,
    .isso-feedlink {
        display: none;
    }
}
</style>


<h2 style="margin-bottom: 0;">Comments</h2>
<small>
    <p style="margin: 0;">
        If you provide an email address, you can enable notifications for
        replies to your comment. It will not be shown publicly.
    </p>
</small>

<noscript>
    <i>Enable JavaScript to see the comment section.</i>
</noscript>

{{ $url := .Permalink }}
{{ if .IsTranslated }}
    {{ with index .AllTranslations 0 }}
        {{ $url = .Permalink }}
    {{ end }}
{{ end }}


<script data-isso-id="{{ $url }}"
        data-isso-default-lang="{{ .Language.Lang }}"
        data-isso-css="true"
        data-isso-max-comments-top="10"
        data-isso-max-comments-nested="5"
        data-isso-reveal-on-click="5"
        {{/*
        data-isso-avatar-bg="#111"
        data-isso-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
        */}}
        data-isso-vote="true"
        {{/*
        data-isso-vote-levels=""
        */}}
        data-isso-feed="true"
        data-isso-require-email="false"
        data-isso-reply-notifications="true"
        data-isso-reply-notifications-default-enabled="true"

        {{ with (.GetTerms "authors") }}
            {{ $authorHashes := slice }}
            {{ range . }}
                {{ with .Params.issoUserID }}
                    {{ $authorHashes = $authorHashes | append . }}
                {{ end }}
            {{ end }}

            data-isso-page-author-hashes="{{ delimit $authorHashes "," }}"
        {{ end }}

        src="https://isso.bbaovanc.com/js/embed.min.js">
</script>

<section id="isso-thread"></section>