7 files changed, 138 insertions(+), 3 deletions(-)

M assets/scss/_variables.scss
M assets/scss/main.scss
M config.toml
M i18n/en.toml
M i18n/fr.toml
A layouts/partials/post-comments.html
M layouts/post/single.html

@@ 14,6 14,10 @@ $secondary: rgba-to-rgb($secondary);
 $disabled: rgba-to-rgb($disabled);
 $dividers: rgba-to-rgb($dividers);
 $border: 1px solid $dividers;
+$muted: lighten($text, 5%);
+
+$comment-bg-even: darken($white, 5%);
+$comment-bg-odd: darken($white, 2.5%);
 
 $link-color: #00254d;
 


@@ 24,6 28,10 @@ $dark-grey: darken($dark-background, 5%);
 $dark-link-color: lighten($link-color, 75%);
 $dark-dividers: darken($dividers, 50%);
 $dark-border: 1px solid $dark-dividers;
+$dark-muted: darken($dark-text, 10%);
+
+$dark-comment-bg-even: lighten($dark-background, 5%);
+$dark-comment-bg-odd: lighten($dark-background, 2.5%);
 
 // Fonts!
 $default-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

@@ 52,12 52,12 @@ pre {
     white-space: pre;
     overflow: auto;
     word-break: normal;
+
     @include small-only {
         font-size: $font-size-small;
     }
 }
 
-
 // Top navbar
 nav {
     border-bottom: $border;


@@ 166,7 166,7 @@ ul.nav {
 }
 
 // Article header
-article header {
+main > article > header {
     padding-bottom: 1rem;
     margin-bottom: 1.5rem;
     border-bottom: $border;


@@ 185,7 185,7 @@ article header {
 }
 
 // Article content
-article {
+main > article {
     p > img:first-child,
     p > video:first-child {
         display: block;


@@ 272,3 272,80 @@ article.book-review {
         text-align: center;
     }
 }
+
+// Comments
+#comments {
+    margin-top: $xlg-pad;
+
+    font-size: $font-size-small;
+
+    color: $muted;
+    border-top: $border;
+    @include dark-mode {
+        color: $dark-muted;
+        border-top: $dark-border;
+    }
+
+    code, pre {
+        font-size: $font-size-small;
+    }
+    pre {
+        padding: .5em;
+    }
+
+    article {
+        margin-top: $font-size-small;
+        width: calc(100% - #{2 * $md-pad});
+
+        border-top: $border;
+        border-bottom: $border;
+        @include dark-mode {
+            border-top: $dark-border;
+            border-bottom: $dark-border;
+        }
+
+        &.by-owner {
+            color: $text;
+            @include dark-mode {
+                color: $dark-text;
+            }
+            header {
+                font-weight: bold;
+            }
+        }
+
+        &:nth-child(2n) {
+            background-color: $comment-bg-even;
+            @include dark-mode {
+                background-color: $dark-comment-bg-even;
+            }
+        }
+        &:nth-child(2n+1) {
+            background-color: $comment-bg-odd;
+            @include dark-mode {
+                background-color: $dark-comment-bg-odd;
+            }
+        }
+    }
+
+    header {
+        display: flex;
+
+        padding-top: .25em;
+        padding-bottom: .25em;
+        margin-bottom: .25em;
+
+        border-bottom: $border;
+        @include dark-mode {
+            border-bottom: $dark-border;
+        }
+    }
+    .author {
+        flex: 1 0 0;
+    }
+
+    header, .comment {
+        padding-left: $md-pad;
+        padding-right: $md-pad;
+    }
+}

@@ 49,6 49,8 @@ unsafe = true
 
 [params]
   excludeRecentTypes = ["page", "portfolio"]
+  commentsEmail = "~schnouki/schnouki.net-comments@lists.sr.ht"
+  commentsInbox = "https://lists.sr.ht/~schnouki/schnouki.net-comments"
 
   [params.copyright]
     holder = "Thomas Jost"

@@ 9,3 9,12 @@ other = "Find this book:"
 
 [bookReview]
 other = "Book review:"
+
+[commentsTitle]
+other = "Comments"
+
+[commentsPrompt]
+other = "Join the conversation by <a href=\"{{ .mailtoURL }}\">sending an email</a>. Your comment will be added here and to the <a href=\"{{ .inboxURL }}\">public inbox</a> after moderation."
+
+[commentsEmailSubject]
+other = "A comment about \"{{ .Title }}\" ({{ .Permalink }})"

@@ 9,3 9,12 @@ other = "Trouver ce livre :"
 
 [bookReview]
 other = "Fiche de lecture :"
+
+[commentsTitle]
+other = "Commentaires"
+
+[commentsPrompt]
+other = "Rejoignez la conversation en <a href=\"{{ .mailURL }}\">envoyant un email</a>. Votre commentaire sera ajouté ici et à l'<a href=\"{{ .inboxURL }}\">archive publique</a> après modération."
+
+[commentsEmailSubject]
+other = "Commentaire sur \"{{ .Title }}\" ({{ .Permalink }})"

@@ 0,0 1,28 @@
+{{ if (or (not (isset .Params "comments")) .Params.comments) }}
+{{- $page := . }}
+{{- $emailSubject := i18n "commentsEmailSubject" . }}
+{{- $emailURL :=  printf "mailto:%s?subject=%s" .Site.Params.commentsEmail (replace $emailSubject "\"" "%22") }}
+{{- $renderOpt := dict "display" "block" "markup" "goldmark" }}
+<section id="comments">
+    <h2>{{ i18n "commentsTitle" }}</h2>
+    <p>{{ i18n "commentsPrompt" (dict "mailtoURL" (safeURL $emailURL) "inboxURL" .Site.Params.commentsInbox) | safeHTML }}</p>
+
+    {{- if .Params.comments }}
+    {{- with (index .Site.Data.comments .Params.comments) }}
+    {{- range .comments }}
+    <article{{ if .is_owner }} class="by-owner"{{ end }}>
+        <header>
+            <span class="author">{{ .author }}</span>
+            <span>
+                {{ partial "icons" "feather/calendar" }} <time class="comment-date" datetime="{{ time.Format "2006-01-02T15:04:05Z07:00" .date }}">{{ time.Format "2 Jan 2006 at 15:04" .date }}</time>
+            </span>
+        </header>
+        <div class="comment">
+            {{ .text | $page.RenderString $renderOpt | chomp}}
+        </div>
+    </article>
+    {{- end }}
+    {{- end }}
+    {{- end }}
+</section>
+{{ end }}

@@ 2,5 2,7 @@
 <article id="content">
     {{ partial "post-header.html" . }}
     {{ .Content }}
+
+    {{ partial "post-comments.html" . }}
 </article>
 {{ end }}