MentionUnited new plugin & refactoring

source/_posts/2022/Creating-Icon-Font-from-SVG-Files.md

@@ -28,7 +28,7 @@ In another project I had used [Fontello](https://fontello.com/), where you can b
 
 And yes [gulp-iconfont](https://www.npmjs.com/package/gulp-iconfont) from [Nicolas Froidure](https://github.com/nfroidure) was exactly what I needed.
 
-![gulp-iconfont on GitHub](..\Creating-Icon-Font-from-SVG-Files/gulp-iconfont.png)
+![gulp-iconfont on GitHub](Creating-Icon-Font-from-SVG-Files/gulp-iconfont.png)
 
 ---
 

source/_posts/2023/Add-Link-to-Trello-on-Android-via-Share-Menu.md

@@ -25,7 +25,7 @@ I have been collecting interesting links in various Trello boards for many years
 
 However, the official Trello Android App has the problem eversince that, when you want to create a URL as a Trello card in the browser, the URL is entered in the ``Description`` and not as an ``Attachment``, where it actually belongs.
 
-![Share Link with Trello App](share-trello-app.png)
+![Share Link with Trello App](Add-Link-to-Trello-on-Android-via-Share-Menu/share-trello-app.png)
 
 I have solved this for myself for years using a **bookmarklet** in the Chrome browser (see {% post_link Add-website-to-Trello-card-the-better-way %}) and get along quite well with it. However, there is one catch, that has annoyed me ever since:  
 I find an interesting link in the Mastodon WebApp, for example, and tap on it. What opens, however, is the WebView integrated in Android and not my standard Chrome browser, in which the bookmarklet would be available. So, for links that I want to store, I always have to open the WebView menu and select "Open in Chrome Browser". I cannot use the general SHARE menu. At least not so far ... :)
@@ -56,7 +56,7 @@ javascript: (function (win, name, desc) {
 
 If you want to use this bookmarklet, you have to remove all line breaks from the code, decode the url and save it as a bookmark ... or you visit [https://trello.com/add-card](https://trello.com/add-card) and drag the link "Send to Trello" to your bookmark list. It comes out the same.
 
-![Create Link Card via Trello Add Card Page](trello-add-page.png)
+![Create Link Card via Trello Add Card Page](Add-Link-to-Trello-on-Android-via-Share-Menu/trello-add-page.png)
 
 As I said above, the Trello Bookmarklet e.g. Add Card page works differently to the Android app from the same company in terms of the URL. Are different departments not talking to each other?
 
@@ -82,13 +82,13 @@ All these shortcuts can be used to send any HTTP requests and process the respon
 
 For my case, I need a scripting shortcut to process the information shared by the Android sharing dialogue to call the Add Card page. This is done via static variables that are created in HTTP Shortcuts and can then be used later in the script:
 
-![Setting Up Variables](httpshortcuts-variables.png)
+![Setting Up Variables](Add-Link-to-Trello-on-Android-via-Share-Menu/httpshortcuts-variables.png)
 
 Creating the shortcut is quite simple, as you can see from the screenshots. Select the type, assign a name, perhaps a suitable icon and (importantly) tick the option **Show as app shortcut on launcher and promote as Direct Share target**, which ensures that the shortcut appears in the Android Share menu.
 
-![Shortcuts List and Creating/Editing Shortcut](httpshortcuts-shortcut.png)
+![Shortcuts List and Creating/Editing Shortcut](Add-Link-to-Trello-on-Android-via-Share-Menu/httpshortcuts-shortcut.png)
 
-![Scripting Shortcut Settings](httpshortcuts-shortcut-settings.png)
+![Scripting Shortcut Settings](Add-Link-to-Trello-on-Android-via-Share-Menu/httpshortcuts-shortcut-settings.png)
 
 The script is no less straightforward, because it simply assembles the URL to the Trello Add Card page with the static variables and opens it using the app's built-in JavaScript function ``openUrl``:
 
@@ -120,4 +120,4 @@ The result is convincing and frees me from the bookmarklet on my smartphone, but
 
 The HTTP Shortcuts app, however, has really got me hooked. I see a lot of potential for automating things on my smartphone and will keep you updated as I develop more solutions with it. Thank you Roland for this gem ...
 
-![Shortcut as Share Target](httpshortcuts-share.png)
+![Shortcut as Share Target](Add-Link-to-Trello-on-Android-via-Share-Menu/httpshortcuts-share.png)

source/_posts/2023/Handling-IPTC-metadata-on-Android-and-Windows.md

@@ -29,11 +29,11 @@ Now, however, I take pictures on the go with my Pixel smartphone and process the
 
 <!-- more -->
 
-![Google Photos Properties](google-photos-properties.png)
+![Google Photos Properties](Handling-IPTC-metadata-on-Android-and-Windows/google-photos-properties.png)
 
 Downloading the image via Google Photos and giving it a name and a few keywords using on-board tools under Windows doesn't work either. There is the display of metadata in File Explorer under PROPERTIES and DETAILS, but editing TITLE or DESCRIPTION does not lead to IPTC metadata either, because these are **not supported by Microsoft**.
 
-![Windows Explorer Properties Metadata](windows-explorer-properties-metadata.png)
+![Windows Explorer Properties Metadata](Handling-IPTC-metadata-on-Android-and-Windows/windows-explorer-properties-metadata.png)
 
 Now you can ask yourself why IPTC is not important to the big companies, especially since it doesn't seem to be the problem technically, as Adobe and other companies prove, but so what ... I need a solution for my problem.
 
@@ -45,7 +45,7 @@ For Android, there is probably no better image metadata app than [**EXIF Pro**](
 
 In my case, I just have to select the image in the app and use ADD in the IPTC section to select the ``ObjectName`` (for the name) and ``Keywords`` (for the keywords), enter the values and save the file. Done.
 
-![Android EXIF Pro](android-exif-pro.png)
+![Android EXIF Pro](Handling-IPTC-metadata-on-Android-and-Windows/android-exif-pro.png)
 
 The app is based on the platform-independent Perl library [**ExifTool by Phil Harvey**](https://exiftool.org/) ... and as often as you research for ways to manipulate image metadata and whatever platform on the net, you will always come across Phil's tool. It is the gold standard in this area, so to speak. The list of supported formats is more than impressive and that of meta formats leaves nothing to be desired.
 
@@ -71,7 +71,7 @@ exiftool
 
 Okay ... You don't buy Windows to use the command line. There is also a GUI called [ExifToolGUI for Windows v5.xx](https://exiftool.org/gui/) by Bogdan Hrastnik. It is already more than 10 years old and also comes without an installer, but it works great ... if you have understood the somewhat strange concept of workspaces and adding new fields to them, or if you have somehow muddled your way through.
 
-![ExifTool GUI Editing](exiftool-gui-edit.png)
+![ExifTool GUI Editing](Handling-IPTC-metadata-on-Android-and-Windows/exiftool-gui-edit.png)
 
 ---
 

themes/landscape/layout/_partial/post/interaction.ejs

@@ -43,14 +43,18 @@
 <div id="article-interactions" class="article-interactions" data-pagefind-ignore>
   <h2>Interactions</h2>
 
-  <div id="interactions-container" class="interactions">
-    <div class="loading">Loading</div>
-  </div>
+  <div class="message loading">Loading</div>
+
+  <div id="interactions-likes-placeholder"></div>
+  <div id="interactions-reposts-placeholder"></div>
+  <div id="interactions-bookmarks-placeholder"></div>
+  <div id="interactions-list-placeholder"></div>
 
   <%- js('js/mentions-united.js') %>
   <%- js('js/mentions-united-provider_webmentions.js') %>
+  <%- js('js/mentions-united-renderer_total-number.js') %>
+  <%- js('js/mentions-united-renderer_avatars-by-type.js') %>
   <%- js('js/mentions-united-renderer_list.js') %>
-  <%- js('js/mentions-united-renderer_totalnumber.js') %>
   <% if (synDevTo) { %><%- js('js/mentions-united-provider_devto.js'); %><% } %>
   <% if (synPixelfed) { %><%- js('js/mentions-united-provider_pixelfed.js'); %><% } %>
 
@@ -66,14 +70,27 @@
             targetUrl: "<%- post.permalink %>",
             tryResolveTitle: true
           }),
-          new MentionsUnitedRenderer_List({
-            containerId: "interactions-container"
-          }), 
           new MentionsUnitedRenderer_TotalNumber({
             placeholderId: "interactions-totalnumber-placeholder",
-            jumpToId: "article-interactions",
             pageKey: "<%- post.slug %>",
-            afterInsert: () => { initScrollAnchorLink(".interactions-totalnumber", 80); }
+            anchorTargetId: "article-interactions",
+            afterRender: () => { initScrollAnchorLink(".interactions-totalnumber", 80); }
+          }),
+          new MentionsUnitedRenderer_AvatarsByType({
+            placeholderId: "interactions-likes-placeholder",
+            typeVerb: "like"
+          }),
+          new MentionsUnitedRenderer_AvatarsByType({
+            placeholderId: "interactions-reposts-placeholder",
+            typeVerb: "repost"
+          }),
+          new MentionsUnitedRenderer_AvatarsByType({
+            placeholderId: "interactions-bookmarks-placeholder",
+            typeVerb: "bookmark"
+          }),
+          new MentionsUnitedRenderer_List({
+            placeholderId: "interactions-list-placeholder",
+            skipTypes: "like,repost,bookmark"
           })
         ]);
 
@@ -87,11 +104,21 @@
       <% if (synPixelfed) { %>
       mentionsUnited.register(new MentionsUnitedProvider_Pixelfed({ 
         sourceUrl: "<%- synPixelfed.url %>",
-        apiUrl: "https://mentionsunited-api-proxy.up.railway.app/pixelfed"
+        apiBaseUrl: "https://mentionsunited-api-proxy.up.railway.app/pixelfed"
       }));
       <% } %>
 
-      mentionsUnited.load();
+      mentionsUnited.load()
+        .then(() => { return mentionsUnited.show(); })
+        .then((count) => { 
+          let msg = document.querySelector(".article-interactions .message");
+          if (count === 0) {
+            msg.classList.remove("loading");
+            msg.innerHTML = "No interactions yet";
+          } else {
+            msg.remove();
+          }
+         })
     });
   </script>