From 701b4967b437d33988cf6c6ecc3a367f28aafc82 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Fri, 23 Jul 2021 13:04:04 +0100
Subject: [PATCH] [TWIG] Microformats added to timeline, note's view and media.
 Should be backwards compatible as well.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
---
 .../imageEncoder/imageEncoderView.html.twig         |  2 +-
 .../videoEncoder/videoEncoderView.html.twig         |  2 +-
 public/assets/css/right/right.css                   | 11 +++++++++++
 templates/network/public.html.twig                  |  4 +++-
 templates/note/view.html.twig                       | 13 +++++++------
 templates/sidepanel/right/right.html.twig           |  5 ++---
 6 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/plugins/ImageEncoder/templates/imageEncoder/imageEncoderView.html.twig b/plugins/ImageEncoder/templates/imageEncoder/imageEncoderView.html.twig
index bee667efc3..8549bdd110 100644
--- a/plugins/ImageEncoder/templates/imageEncoder/imageEncoderView.html.twig
+++ b/plugins/ImageEncoder/templates/imageEncoder/imageEncoderView.html.twig
@@ -1,6 +1,6 @@
 <div>
     <figure>
-        <img src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" alt="{{ attachment.getTitle() }}">
+        <img class="u-photo" src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" alt="{{ attachment.getTitle() }}">
         <figcaption><a
                 href="{{ path('attachment_show', {'id': attachment.getId()}) }}">{{ attachment.getTitle() }}</a>
         </figcaption>
diff --git a/plugins/VideoEncoder/templates/videoEncoder/videoEncoderView.html.twig b/plugins/VideoEncoder/templates/videoEncoder/videoEncoderView.html.twig
index 636ddb9bc8..ee35b23ea9 100644
--- a/plugins/VideoEncoder/templates/videoEncoder/videoEncoderView.html.twig
+++ b/plugins/VideoEncoder/templates/videoEncoder/videoEncoderView.html.twig
@@ -1,6 +1,6 @@
 <div>
     <figure>
-        <video src="{{ path('attachment_view', {'id': attachment.getId()}) }}" controls poster="{{ path('attachment_thumbnail', thumbnail_parameters) }}">
+        <video class="u-video" src="{{ path('attachment_view', {'id': attachment.getId()}) }}" controls poster="{{ path('attachment_thumbnail', thumbnail_parameters) }}">
         </video>
         <figcaption><a
                 href="{{ path('attachment_show', {'id': attachment.getId()}) }}">{{ attachment.getTitle() }}</a>
diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css
index fca8295e61..3320eca569 100644
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@@ -29,4 +29,15 @@
 
     width: 100%;
     padding: var(--small-size);
+}
+
+input[type="file"] {
+    font-family: var(--display-font);
+}
+
+.custom-file-upload {
+    border: 1px solid #ccc;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig
index 1fac9199c6..719dbdcf0b 100644
--- a/templates/network/public.html.twig
+++ b/templates/network/public.html.twig
@@ -20,6 +20,7 @@
 {% endblock %}
 
 {% block body %}
+
     <div class="content">
 
         <div class="navigation">
@@ -59,7 +60,8 @@
             </nav>
         </div>
 
-        <div class="timeline">
+        {# Backwards compatibility with hAtom 0.1 #}
+        <div class="h-feed hfeed timeline">
             <div class="notes">
                 {% if notes is defined and notes is not empty %}
                     {% for conversation in notes %}
diff --git a/templates/note/view.html.twig b/templates/note/view.html.twig
index 2eea4edb38..9f6ee35243 100644
--- a/templates/note/view.html.twig
+++ b/templates/note/view.html.twig
@@ -1,10 +1,11 @@
-<div class="note">
+<div class="h-entry hentry note">
     <div class="note-info">
         {% set nickname = note.getActorNickname() %}
 
-        <a href="{{ path('settings_avatar') }}">
-            <img class="avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
-            <b>{{ nickname }}</b>
+        <a class="u-url" href="{{ path('settings_avatar') }}">
+            {# Microformat's h-card properties indicates a face icon is a "u-logo" #}
+            <img class="u-logo avatar" src="{{ note.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
+            <b class="p-nickname">{{ nickname }}</b>
         </a>
 
         {% set reply_to = note.getReplyToNickname() %}
@@ -12,7 +13,7 @@
             {% trans with {'%name%': reply_to} %} in reply to %name% {% endtrans %}
         {% endif %}
     </div>
-    <div class="note-content">
+    <div class="e-content entry-content note-content">
         {% block markdown %}
             {% apply markdown_to_html %}
                 {{ note.getContent() }}
@@ -39,7 +40,7 @@
         {# {% endif %} #}
     </div>
     {% if replies is defined %}
-        <div class="replies">
+        <div class="u-in-reply-to replies">
             {% for conversation in replies %}
                 {% include '/note/view.html.twig' with {'note': conversation['note'], 'skip_reply_to': true, 'have_user': have_user, 'replies': conversation['replies']} only %}
             {% endfor %}
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig
index a70be2fab5..2fdd0a7931 100644
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@@ -29,9 +29,8 @@
                 </div>
                 <div class="notice-options">
                     <div class="attachments">
-                        {{ form_widget(post_form.attachments) }}
-                        <label for="{{ post_form.attachments.vars.id }}">
-                            {{ icon('attach', 'icon icon-attach') | raw }}
+                        <label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
+                            {{ form_widget(post_form.attachments) }}
                         </label>
                     </div>
                     <div class="post">