Implement replies

Gemfile

@@ -13,6 +13,7 @@ gem "html-proofer"
 gem 'nokogiri'
 gem 'ruby-brs'
 gem "webrick", "~> 1.8"
+gem 'sutty-liquid', '~> 0.12.2'
 
 group :jekyll_plugins do
   gem "jekyll-feed", 

_config.yml

@@ -12,6 +12,7 @@ rss: "/feed.xml"
 url: "https://hypha.coop"
 lang: "en"
 footer: Hypha Worker Co-operative Inc.<br>Ontario Corporation No. 5019866
+locale: "en"
 
 description: >-
   We cultivate collective growth and meaningful livelihoods through learning and building technologies together.

_includes/activity_pub/actor.html

@@ -0,0 +1,11 @@
+{% comment %}
+  Render actor's name if it's available, otherwise just return the link.
+
+  @param actor [ActivityDrop] Actor
+{% endcomment %}
+
+{% if include.actor.available %}
+  <span class="word-wrap">{{ include.actor.name | strip_html }}</span>
+{% else %}
+  <span class="word-wrap">{{ include.actor }}</span>
+{% endif %}

_includes/activity_pub/actor_mention.html

@@ -0,0 +1,28 @@
+{% comment %}
+  @param actor [ActivityDrop] Actor
+  @param without_link [Boolean] Don't link
+{% endcomment %}
+
+{% if include.actor.available %}
+  {% assign id = include.actor.id | strip_html %}
+  {% assign instance_hostname = id | split: '/' %}
+  {% assign instance_hostname = instance_hostname[2] %}
+
+  {% capture mention %}
+    @<span>{{- include.actor.preferredUsername | strip_html -}}@{{- instance_hostname -}}</span>
+  {% endcapture %}
+
+  {% capture mention %}
+    <span class="h-card word-wrap pl2" translate="no">
+      {% if include.without_link %}
+        <span class="mention">{{- mention -}}</span>
+      {% else %}
+        {% include external_link.html class="u-url mention" href=id text=mention %}
+      {% endif %}
+    </span>
+  {% endcapture %}
+
+  {{ mention | normalize_whitespace }}
+{% else %}
+  {{ include.actor }}
+{% endif %}

_includes/activity_pub/button_bar.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+  Botonera para botones de íconos.
+
+  @param :uri [String] La URL sobre la que se interactua
+  @param :profile [ActivityDrop] Actor
+{%- endcomment -%}
+
+{% assign uri = include.uri | default: include.url | default: 'YOU FORGOT THIS PARAM' | strip_html %}
+{% assign actions = site.data.actions.actions %}
+
+<div class="flex">
+  {% for action in actions %}
+    {% assign fa = action.icon %}
+    {% include activity_pub/login_modal.html action=action fa=fa uri=uri profile=include.profile description=action.title %}
+  {% endfor %}
+</div>

_includes/activity_pub/cards.html

@@ -0,0 +1,28 @@
+{%- comment -%}
+  Nested cards
+
+  @param :profile [ActivityDrop] Actor
+  @param :activity [ActivityDrop] Note
+  @param :replies [ActivityDrop] Collection
+{%- endcomment -%}
+
+{%
+  include activity_pub/toot_card.html
+  profile=include.profile
+  activity=include.activity
+  component_class="my-3"
+%}
+
+{% if include.replies.available %}
+  {% assign replies = include.replies.all_items | sort: 'published' %}
+  {% for reply in replies %}
+    <blockquote class="bl b--moon-gray bw3 pl3">
+      {%
+        include activity_pub/cards.html
+        profile=reply.attributedTo
+        activity=reply
+        replies=reply.replies
+      %}
+    </blockquote>
+  {% endfor %}
+{% endif %}

_includes/activity_pub/interactions.html

@@ -0,0 +1,73 @@
+{% comment %}
+  @param activity [ActivityDrop]
+{% endcomment %}
+
+<!-- Initialize variables -->
+{% assign items = site.i18n.fediverse_interactions %}
+{% assign reactions = '' | split: ',' %}
+{% assign activities = '' | split: ',' %}
+
+<!-- Filter replies -->
+{% if page.activity.replies.available %}
+  {% assign activities = page.activity.replies.all_items | where_exp: "item", "item.inReplyTo" | sort: 'published' %}
+{% endif %}
+
+<!-- Optional: Filter and sort reactions if needed -->
+{% assign reactions = reactions | sort: 'published' %}
+
+<!-- Combine replies and reactions if necessary -->
+{% assign all_interactions = activities %}
+
+<!-- Render Replies -->
+{% unless activities == empty %}
+<div class="w-100" data-controller="tabs" data-tabs-hide-class="hide" data-tabs-show-class="show">
+
+  <!-- Conversations (Replies Only) -->
+  <div class="w-100 dn" data-tabs-target="tab" id="conversation">
+    {% unless activities == empty %}
+      {% for activity in activities %}
+        <div class="activity-card">
+          <div class="activity-content">
+            {% include activity_pub/cards.html activity=activity profile=activity.attributedTo replies=activity.replies %}
+          </div>
+        </div>
+      {% endfor %}
+    {% else %}
+      <p class="f1 lh-title">
+        {{ site.i18n.no_interactions_yet.conversation }}
+      </p>
+    {% endunless %}
+  </div>
+
+  <!-- Reactions Tab -->
+  <div class="w-100 dn dn" data-tabs-target="tab" id="reactions">
+    {% unless reactions == empty %}
+      {% include activity_pub/reactions.html reactions=reactions %}
+    {% else %}
+      <p class="f1 lh-title">
+        {{ site.i18n.no_interactions_yet.reactions }}
+      </p>
+    {% endunless %}
+  </div>
+
+  <!-- Combined Interactions (Replies Only) -->
+  <div class="w-100 show bt bw2 b--light-gray mt5" data-tabs-target="tab" id="both">
+    <h2 style="font-size: 2.25rem; margin-top: 4rem;">
+      Replies from the Fediverse
+    </h2>
+    {% unless all_interactions == empty %}
+      {% for interaction in all_interactions %}
+        {% if interaction.inReplyTo %}
+          <div class="interaction-card">
+            {% include activity_pub/cards.html activity=interaction profile=interaction.attributedTo replies=interaction.replies %}
+          </div>
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      <p class="f1 lh-title">
+        {{ site.i18n.no_interactions_yet.both }}
+      </p>
+    {% endunless %}
+  </div>
+</div>
+{% endunless %}

_includes/activity_pub/reaction.html

@@ -0,0 +1,42 @@
+{%- comment -%}
+  Reacción
+
+  @param :activity [String] Reacción de le usuarie
+  @param :fa [String] nombre del ícono que usa fork-awesome
+  @param :actor [String] Usuarie
+{%- endcomment -%}
+
+{% assign published = include.activity.published | strip_html %}
+
+<div class="flex">
+<div class="flex flex flex-column gray ph2 tr">
+    {% include date.html date=published format=site.i18n.date.format %}
+  </div>
+<div class="flex flex-column ph2 flex-grow-1">
+    {% if include.previous.actor == include.activity.actor %}
+      <div class="flex">
+<p class="transparent hover-bg-transparent">
+          {% include activity_pub/actor.html actor=include.activity.actor %}
+        </p>
+</div>
+<div class="flex">
+<p class="transparent hover-bg-transparent">
+          {% include activity_pub/actor_mention.html actor=include.activity.actor without_link=true %}
+        </p>
+</div>
+    {% else %}
+      <div class="flex">
+<p class="">{% include activity_pub/actor.html actor=include.activity.actor %}</p>
+</div>
+<div class="flex">
+        {% include activity_pub/actor_mention.html actor=include.activity.actor %}
+      </div>
+    {% endif %}
+  </div>
+<div class="flex flex-column self-center ph2 f4 lh-copy">
+    {% assign icon = include.activity.type | equals: 'Announce' | ternary: 'retweet', 'star-o' %}
+    {% assign description = site.i18n.activities[include.activity.type] %}
+
+    {%- include fa.html icon=icon class="lead" description=description -%}
+  </div>
+</div>

_includes/activity_pub/reactions.html

@@ -0,0 +1,17 @@
+{%- comment -%}
+  Reacciones
+
+  @param :reactions [Array] Reacciones
+  @param :actor [String] Usuarie
+{%- endcomment -%}
+
+{% for reaction in include.reactions %}
+  {% assign minus = forloop.index0 | minus: 1 %}
+  {% assign previous = include.reactions[minus] %}
+
+  {%
+    include activity_pub/reaction.html
+    activity=reaction
+    previous=previous
+  %}
+{% endfor %}

_includes/activity_pub/replying_to.html

@@ -0,0 +1,23 @@
+{%- comment -%}
+  Texto + enlace al post/artículo al cual se responde
+
+  @param :activity [ActivityDrop] Activity
+{%- endcomment -%}
+
+{% if include.activity.available %}
+  {%- capture uri -%}
+    {%- include activity_pub/url.html activity=include.activity -%}
+  {%- endcapture -%}
+
+  {% capture text %}
+    {{- include.activity.name | default: include.activity.summary | strip_html | default: site.i18n.reply.link_text -}}
+  {% endcapture %}
+
+  <div class="pv5 pr5">
+<span class="f2 lh-title">
+      {{- site.i18n.reply.text -}}
+    </span>
+
+    {% include external_link.html href=uri class="h2" text=text %}
+  </div>
+{% endif %}

_includes/activity_pub/toot_card.html

@@ -0,0 +1,94 @@
+{%- comment -%}
+  Toot card
+
+  @param :component_class [String] Las clases del componente
+  @param :profile [String]
+  @param :activity [String]
+{%- endcomment -%}
+
+{% assign extra_class = include.activity.attachment | size | equals: 1 | ternary: 'col', 'col-6' %}
+
+<div class="flex flex flex-column flex">
+<div class="flex items-center">
+    {%
+      include embed_responsive.html
+      x=1
+      y=1
+      src=include.profile.icon.url
+      alt=include.profile.icon.name
+      width=40
+      embed_class="mr-2 w-49px"
+      img_class="h-100 object-fit-cover"
+    %}
+
+    <div class="flex flex-row">
+<p>{% include activity_pub/actor.html actor=include.profile %}</p>
+<p>{% include activity_pub/actor_mention.html actor=include.profile %}</p>
+</div>
+</div>
+<div class="flex-auto w-100 ml3">
+    {% capture content %}
+			<div class="content mt0">
+				{{ include.activity.content | sanitize_html }}
+			</div>
+
+			{% unless include.activity.attachment == empty %}
+				<div class="flex flex-wrap nl1 nr1 mt0">
+					{% for attachment in include.activity.attachment %}
+						{% if attachment.mediaType == "video/mp4" %}
+							{% include activity_pub/video_modal.html video=attachment extra=extra_class %}
+						{% else %}
+							{% include activity_pub/image_modal.html image=attachment extra=extra_class %}
+						{% endif %}
+					{% endfor %}
+				</div>
+			{% endunless %}
+		{% endcapture %}
+
+    {% if include.activity.sensitive %}
+      {% capture summary_title %}
+        <strong>{{ site.i18n.sensitive }}:</strong> {{ include.activity.summary }}
+      {% endcapture %}
+
+      {%
+        include details.html
+        element_title=summary_title
+        element_text=content
+        summary_class="align-items-center btn-lg btn-secondary p-2 text-left f-16"
+        component_class="my-3"
+        font_size="ml3 lead"
+      %}
+    {% else %}
+      {{ content }}
+    {% endif %}
+
+    <div class="flex gray justify-between mv2 items-center">
+      {%- assign timestamp_field = include.activity.updated | ternary: 'updated', 'published' -%}
+      {%- assign timestamp = include.activity[timestamp_field] -%}
+
+      {%- capture timestamp -%}
+        {% include date.html date=timestamp format=site.i18n.date_time.format %}
+      {%- endcapture -%}
+
+      {%- capture uri -%}
+        {%- include activity_pub/url.html activity=include.activity -%}
+      {%- endcapture -%}
+
+      {% include external_link.html href=uri text=timestamp %}
+
+      <div>
+        {% if include.activity.shares.totalItems %}
+          {%- include fa.html icon="retweet" class="px-1" description=site.i18n.total_shares content=include.activity.shares.totalItems -%}
+        {% endif %}
+
+        {% if include.activity.likes.totalItems %}
+          {%- include fa.html icon="star-o" class="px-1" description=site.i18n.total_likes content=include.activity.likes.totalItems -%}
+        {% endif %}
+      </div>
+
+      {%- include fa.html icon="globe" description=site.i18n.globe -%}
+    </div>
+
+    {% include activity_pub/button_bar.html uri=include.activity.id profile=include.profile %}
+  </div>
+</div>

_includes/activity_pub/url.html

@@ -0,0 +1,8 @@
+{%- comment -%}
+  Finds the URL
+
+  @param activity [ActivityDrop]
+{%- endcomment -%}
+
+{%- assign uri = include.activity.url | find: 'rel', 'canonical' -%}
+{{- uri.href | default: include.activity.url | default: include.activity.id | strip_html -}}

_includes/activity_pub/video_modal.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+  Modal con imagen
+
+  @param :image [Image] la imagen que queremos en el modal, contiene url y alt text
+{%- endcomment -%}
+
+{% capture body %}
+  <video controls="" src="{{include.video.url}}"></video>
+{% endcapture %}
+
+<div class="ph1" data-controller="modal">
+<div class="aspect-ratio aspect-ratio--16x9">
+<video class="pointer min-w-100 w-100 aspect-ratio--object cover" data-action="click-&gt;modal#show" src="{{include.video.url}}"></video>
+</div>
+  {% include activity_pub/generic_modal.html header_class="text-white" body=body body_class="d-flex justify-content-center" footer_class="d-none" content_class="background-transparent border-0" %}
+</div>