new version

CHANGELOG.md

@@ -6,6 +6,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.15.7] - 2024-12-03
+### Added
+- Comments from Bluesky.
+
+### Fixed
+- Improved comments responsiveness.
+- Title of the 404 page.
+
 ## [0.15.6] - 2024-10-17
 ### Fixed
 - Updated CMS to the latest version [#27].
@@ -239,6 +247,7 @@ First version
 [#24]: https://github.com/lumeland/theme-simple-blog/issues/24
 [#27]: https://github.com/lumeland/theme-simple-blog/issues/27
 
+[0.15.7]: https://github.com/lumeland/theme-simple-blog/compare/v0.15.6...v0.15.7
 [0.15.6]: https://github.com/lumeland/theme-simple-blog/compare/v0.15.5...v0.15.6
 [0.15.5]: https://github.com/lumeland/theme-simple-blog/compare/v0.15.4...v0.15.5
 [0.15.4]: https://github.com/lumeland/theme-simple-blog/compare/v0.15.3...v0.15.4

_cms.ts

@@ -109,7 +109,12 @@ cms.collection(
       fields: [
         {
           name: "src",
-          label: "Link to mastodon post",
+          label: "Link to Mastodon post",
+          type: "url",
+        },
+        {
+          name: "bluesky",
+          label: "Link to Bluesky post",
           type: "url",
         },
       ],

deno.json

@@ -1,6 +1,6 @@
 {
   "imports": {
-    "lume/": "https://deno.land/x/lume@v2.3.3/",
+    "lume/": "https://deno.land/x/lume@v2.4.2/",
     "lume/cms/": "https://cdn.jsdelivr.net/gh/lumeland/[email protected]/"
   },
   "tasks": {

plugins.ts

@@ -78,7 +78,7 @@ export default function (userOptions?: Options) {
     // Mastodon comment system
     site.remoteFile(
       "/js/comments.js",
-      "https://unpkg.com/@oom/mastodon-comments@0.2.2/src/comments.js",
+      "https://cdn.jsdelivr.net/npm/@oom/mastodon-comments@0.3.1/src/comments.js",
     );
   };
 }

src/404.md

@@ -1,4 +1,5 @@
 ---
+title: Content not found
 layout: layouts/base.vto
 url: /404.html
 ---

src/_data/i18n.yml

@@ -20,4 +20,8 @@ comments:
   title: Comments
   description: |
     You can leave a comment by replying to <a href=":src:">this Mastodon post</a> from your own account on Mastodon or any other ActivityPub-capable social network that can exchange replies with Mastodon.
+  description_bluesky: |
+    You can leave a comment by replying to <a href=":bluesky:">this Bluesky post</a> from your own account.
+  description_all: |
+    You can leave a comment by replying to <a href=":src:">this Mastodon post</a> or <a href=":bluesky:">this Bluesky post</a> from your own account.
   empty: No comments yet

src/_includes/css/comments.css

@@ -23,7 +23,6 @@
   border: solid 1px var(--color-line);
   color: var(--color-dim);
   font: var(--font-small);
-  container-type: inline-size;
 
   @media (max-width: 450px) {
     margin-left: calc(-15vw / 2);
@@ -43,6 +42,18 @@
     margin: 0;
     padding: 0;
   }
+
+  & li {
+    container-type: inline-size;
+
+    ul {
+      margin-top: 2em;
+      padding-top: 2em;
+      border-top: solid 1px var(--color-line);
+      margin-left: min(var(--indent), 10cqw);
+    }
+  }
+
   & li + li {
     margin-top: 2em;
     padding-top: 2em;
@@ -51,15 +62,9 @@
   & article {
     max-width: 600px;
   }
-  & ul ul {
-    margin-top: 2em;
-    padding-top: 2em;
-    border-top: solid 1px var(--color-line);
-    margin-left: var(--indent);
-  }
   > ul {
     --avatar-size: clamp(32px, 10cqw, 50px);
-    --indent: min(10cqw, var(--avatar-size) + 15px);
+    --indent: calc(var(--avatar-size) + 15px);
   }
 
   .comment-avatar {
@@ -97,12 +102,22 @@
   }
   .comment-time {
     font-size: small;
+    display: flex;
+    column-gap: .3em;
+    align-items: center;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor
+    }
   }
   .comment-address {
     color: currentColor;
     text-decoration: none;
     display: block;
     padding-left: var(--indent);
+    margin-top: .2em;
   }
   .comment-address:hover {
     text-decoration: underline;

src/_includes/layouts/post.vto

@@ -49,13 +49,19 @@ bodyClass: body-post
   </aside>
   {{ /if }}
 
-  {{ if it.comments?.src }}
+  {{ if comments?.src || comments?.bluesky }}
   <aside class="comments-section">
     <header class="comments-header">
       <h2>{{ i18n.comments.title }}</h2>
-      <p>{{ i18n.comments.description.replace(":src:", it.comments.src) }}</p>
+      {{ if comments.bluesky && comments.src }}
+      <p>{{ i18n.comments.description_all.replace(":src:", comments.src).replace(":bluesky:", comments.bluesky) }}</p>
+      {{ else if comments.src }}
+      <p>{{ i18n.comments.description.replace(":src:", comments.src) }}</p>
+      {{ else }}
+      <p>{{ i18n.comments.description_bluesky.replace(":bluesky:", comments.bluesky) }}</p>
+      {{ /if }}
     </header>
-    <mastodon-comments src="{{ it.comments.src }}" cache="{{ it.comments.cache ?? 60 }}" class="comments">
+    <mastodon-comments bluesky="{{ it.comments.bluesky}}" mastodon="{{ it.comments.src }}" cache="{{ it.comments.cache ?? 60 }}" class="comments">
       {{ i18n.comments.empty }}
     </mastodon-comments>
   {{ /if }}

src/posts/firstpost.md

@@ -12,7 +12,6 @@ comments:
   src: 'https://mastodon.gal/@misteroom/110810445656343599'
 draft: false
 ---
-
 Leverage agile frameworks to provide a robust synopsis for high level overviews.
 Iterative approaches to corporate strategy foster collaborative thinking to
 further the overall value proposition. Organically grow the holistic world view