compost-jekyll-theme 0.2.3 → 0.3.1

data/_data/placeholder.yml

@@ -0,0 +1,11 @@
+images:
+  - url: "public/home.png"
+    alt: "Home"
+  - url: "public/arrow_left_40x32.png"
+    alt: "Go back"
+  - url: "public/logo-hypha.png"
+    alt: "Hypha logo"
+  - url: "public/logo-distributedpress_200x35.png"
+    alt: "Distributed Press logo"    
+videos:
+  - url: "public/placeholder_video.mp4"

data/_data/theme.yml

@@ -13,6 +13,8 @@ spacers:
   12: "($spacer * 0.75)"
   40: "($spacer * 2.5)"
   80: "($spacer * 5)"
+  btn-padding-y: ".375rem"
+  btn-line-height: "1.5"
 btn_transition: "all 250ms ease-in-out"
 btn_font_size: "0.8rem"
 btn_padding_y: "1.5rem"
@@ -24,17 +26,18 @@ colors:
   blue: "#564FE3"
   light_blue: "#9995ef"
   light_gray: "#eeeeee"
+  lighter_blue: "#cccaf7"
   post: "rgba(230, 230, 230, 0.1)"
   footnote: "#888888"
-  lighter_blue: "#cccaf7"
+  primary: "$primary"
 letter_spacings:
   1: "0.1rem"
   2: "0.16rem"
   3: "0.170625em"
   4: "0.2625rem"
+  5: "0.39375rem"
   6: "0.18375rem"
   7: "0.13125rem"
-  5: "0.39375rem"
   8: "0.170625rem"
 pixel_densities:
 - "1"
@@ -72,6 +75,7 @@ sizes:
   49px: "3.0625rem"
   74px: "4.625rem"
   90px: "90px"
+  100px: "100px"
   220px: "220px"
   221px: "13.8125rem"
   333px: "20.8125rem"
@@ -106,6 +110,18 @@ opacities:
   4: "-20%"
   5: "0%"
 progress_border_radius: "0"
+transform_scales:
+  n8: "0.8"
+  1: "1"
+container_max_widths:
+  sm: "576px"
+  md: "768px"
+  lg: "1200px"
+  xl: "1201px"
+layout_class:
+  support: "background-image-site background-size-contain w-100"
+  home: "background-image-site background-size-contain w-100"
+  about: "background-image-site background-size-contain w-100"
 background_sizes:
   auto-100: "auto 100%"
   cover: "cover"
@@ -123,23 +139,11 @@ code_font_size: "1rem"
 code_background: "#cccaf7"
 code_radius: "8px"
 code_font_family: "Roboto Mono"
-container_max_widths:
-  sm: "576px"
-  md: "768px"
-  lg: "1200px"
-  xl: "1201px"
-transform_scales:
-  n8: "0.8"
-  1: "1"
 background_images:
   menu-open: "$background-menu-open"
   menu-close: "$background-menu-close"
   site: "$background-site"
   footer: "$background-footer"
-layout_class:
-  support: "background-image-site background-size-contain w-100"
-  home: "background-image-site background-size-contain w-100"
-  about: "background-image-site background-size-contain w-100"
 paragraph_margin_bottom: "0"
 headings_margin_bottom: "0"
 box_shadow: "0px 2px 4px rgba(0, 0, 0, 0.2)"

data/_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>{{ include.actor.name | strip_html }}</span>
+{% else %}
+  <span>{{ include.actor }}</span>
+{% endif %}

data/_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" translate="no">
+      {% if include.without_link %}
+        <span class="mention">{{- mention -}}</span>
+      {% else %}
+        {% include_cached external_link.html class="u-url mention" href=id text=mention %}
+      {% endif %}
+    </span>
+  {% endcapture %}
+
+  {{ mention | normalize_whitespace }}
+{% else %}
+  {{ include.actor }}
+{% endif %}

data/_includes/activity_pub/button.html

@@ -0,0 +1,22 @@
+{%- comment -%}
+  Un botón con link, por ejemplo para Support Us.  Si el link es externo,
+  agregar el parámetro de seguridad noopener.
+
+  @param :fa [String]
+  @param :header [Capture] el contenido del encabezado
+  @param :body [Capture] el contenido del cuerpo principal
+  @param :footer [Capture] el contenido del footer
+  @param :header_class [String] las clases que lleva el encabezado
+  @param :body_class [String] las clases que lleva el cuerpo principal
+  @param :footer_class [String] las clases que lleva el footer
+  @param :content_class [String] las clases que lleva todo el bloque de contenido
+  @param :button_class [String] las clases que lleva cada botón
+{%- endcomment -%}
+
+<div class="d-inline {{include.button_class}}" data-controller="modal">
+  <button class="btn btn-sm" data-action="click->modal#show">
+    {%- include_cached fa.html icon=include.fa class="lead" description=include.description -%}
+  </button>
+
+  {% include activity_pub/generic_modal.html header=include.header body=include.body footer=include.footer header_class=include.header_class body_class=include.body_class footer_class=include.footer_class content_class=include.content_class %}
+</div>

data/_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="d-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>

data/_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="border-left border-gray-light border-width-3 pl-3">
+      {%
+        include activity_pub/cards.html
+        profile=reply.attributedTo
+        activity=reply
+        replies=reply.replies
+      %}
+    </blockquote>
+  {% endfor %}
+{% endif %}

data/_includes/activity_pub/fediverse_interactions.html

@@ -0,0 +1,2 @@
+{% assign extra = 'data-action="tabs#toggle" data-tabs-target="value"' %}
+{% include_cached bootstrap/custom_select.html extra=extra options=site.i18n.fediverse_interactions %}

data/_includes/activity_pub/generic_modal.html

@@ -0,0 +1,55 @@
+{%- comment -%}
+  Modal preparado para recibir contenido + header y footer
+
+  @param :header [Capture] contenido del header
+  @param :body [Capture] contenido del modal
+  @param :footer [Capture] contenido del footer
+  @param :header_class [String] clases del header
+  @param :body_class [String] clases del cuerpo principal
+  @param :footer_class [String] clases del header
+  @param :content_class [String] clases todo el bloque
+{%- endcomment -%}
+
+{% assign header = include.header %}
+{% assign header_class = include.header_class %}
+{% assign body = include.body %}
+{% assign body_class = include.body_class %}
+{% assign footer = include.footer %}
+{% assign footer_class = include.footer_class %}
+{% assign content_class = include.content_class %}
+
+<div
+  class="modal fade mw-100vw"
+  tabindex="-1"
+  aria-hidden="true"
+  data-modal-target="modal"
+  data-action="keydown->modal#hideWithEscape"
+>
+  <div class="modal-backdrop fade zindex-backdrop" data-modal-target="backdrop" data-action="click->modal#hide"></div>
+  <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg zindex-modal" role="document">
+    <div class="modal-content {{content_class}}">
+      {% if header %}
+        <div class="modal-header {{header_class}}">
+          {{ header }}
+        </div>
+      {% else %}
+        <div class="modal-header justify-content-end border-bottom-0 p-0 {{header_class}}">
+          <span class="px-3 py-2 m-0 h1 font-weight-bold" type="button" data-action="click->modal#hide">&times</span>
+          <span class="sr-only">{{ site.i18n.close }}</span>
+        </div>
+      {% endif %}
+
+      <div class="modal-body {{body_class}}">
+        {{ body }}
+      </div>
+
+      <div class="modal-footer flex-nowrap {{footer_class}}">
+        {% if footer %}
+          {{ footer }}
+        {% else %}
+          <button class="btn btn-secondary m-0" type="button" data-action="modal#hide">{{ site.i18n.close }}</button>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/activity_pub/image_modal.html

@@ -0,0 +1,27 @@
+{%- comment -%}
+  Modal con imagen
+
+  @param :image [Image] la imagen que queremos en el modal, contiene url y alt text
+{%- endcomment -%}
+
+{% assign alt = include.image.name | strip_html | escape %}
+{% assign src = include.image.url | strip_html | uri_escape %}
+{% assign extra = 'data-action="click->modal#show"' %}
+
+{% capture body %}
+    <img class="background-white mw-100" title="{{ alt }}" alt="{{ alt }}" src="{{ src }}">
+{% endcapture %}
+
+<div class="{{ include.extra }} px-1" data-controller="modal">
+  {%
+    include embed_responsive.html
+    x=16
+    y=9
+    src=src
+    alt=alt
+    extra=extra
+    width=300
+    img_class="cursor-pointer min-w-100px w-100 object-fit-cover"
+  %}
+  {% 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>

data/_includes/activity_pub/interactions.html

@@ -0,0 +1,78 @@
+{% comment %}
+  @param activity [ActivityDrop]
+{% endcomment %}
+
+{% assign items = site.i18n.fediverse_interactions %}
+{% assign reactions = '' | split: ',' %}
+{% assign activities = reactions %}
+
+{% if page.activity.replies.available %}
+  {% assign activities = page.activity.replies.all_items | sort: 'published' %}
+{% endif %}
+
+{% if include.activity.likes.available %}
+  {% assign reactions = reactions | concat: include.activity.likes.all_items %}
+{% endif %}
+
+{% if include.activity.shares.available %}
+  {% assign reactions = reactions | concat: include.activity.shares.all_items %}
+{% endif %}
+
+{% assign reactions = reactions | sort: 'published' %}
+
+{% assign all_interactions = activities | concat: reactions | sort: 'published' %}
+
+<div class="w-100" data-controller="tabs" data-tabs-hide-class="hide" data-tabs-show-class="show">
+  {% include_cached activity_pub/button_bar.html uri=include.activity.id profile=include.profile %}
+
+  <hr>
+
+  <h3 class="text-uppercase">{{ site.i18n.ver_interacciones }}</h3>
+
+  <div class="d-flex flex-row align-items-center mt-2 mb-5">
+    {% include_cached activity_pub/fediverse_interactions.html %}
+
+    {% assign text = site.i18n.help | markdownify | replace: '<a ', "<a target='_blank' rel='noopener' " %}
+    {% include_cached activity_pub/text_modal.html text=text fa="question-circle-o" %}
+  </div>
+
+  <div class="w-100 d-none fade hide" data-tabs-target="tab" id="conversation">
+    {% unless activities == empty %}
+      {% for activity in activities %}
+        {% include_cached activity_pub/cards.html activity=activity profile=activity.attributedTo replies=activity.replies %}
+      {% endfor %}
+    {% else %}
+      <p class="h1">
+        {{ site.i18n.no_interactions_yet.conversation }}
+        <p>
+    {% endunless %}
+  </div>
+
+  <div class="w-100 d-none fade hide" data-tabs-target="tab" id="reactions">
+    {% unless reactions == empty %}
+      {% include_cached activity_pub/reactions.html reactions=reactions %}
+    {% else %}
+      <p class="h1">
+        {{ site.i18n.no_interactions_yet.reactions }}
+        <p>
+    {% endunless %}
+  </div>
+
+  <div class="w-100 fade show" data-tabs-target="tab" id="both">
+    {% unless all_interactions == empty %}
+      {% for interaction in all_interactions %}
+        {% assign minus = forloop.index0 | minus: 1 %}
+        {% assign previous = all_interactions[minus] %}
+        {% if interaction.type == 'Announce' or interaction.type == 'Like' %}
+          {% include_cached activity_pub/reaction.html activity=interaction previous=previous %}
+        {% else %}
+          {% include_cached activity_pub/cards.html activity=interaction profile=interaction.attributedTo replies=interaction.replies %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      <p class="h1">
+        {{ site.i18n.no_interactions_yet.both }}
+        <p>
+    {% endunless %}
+  </div>
+</div>

data/_includes/activity_pub/login_modal.html

@@ -0,0 +1,70 @@
+{%- comment -%}
+  Modal para loguearse al fediverso
+
+  @param :action [String] acción que le usuarie quiere realizar desde el fediverso
+  @param :fa [String] nombre del ícono que usa fork-awesome
+  @param :uri [String] la URL sobre la que se interactúa
+  @param :profile [ActivityDrop] Actor
+{%- endcomment -%}
+
+{% assign action = include.action %}
+{% assign fa = include.fa %}
+{% capture name %}
+  {% include_cached activity_pub/actor.html actor=include.profile %}
+{% endcapture %}
+
+{% capture header %}
+<div class="d-flex align-items-center h1 justify-content-center w-100">
+    <span class="d-flex responsive-header font-weight-bold text-center">
+        <i class="fa fa-{{fa}} text-primary mr-2"></i>
+        <span>
+        {{ site.i18n.login_modal[action.title].text | replace: "$usuarie", name }}
+        </span>
+        <div>
+            <span class="px-3 py-2 m-0 h1" type="button" data-action="click->modal#hide">&times</span>
+            <span class="sr-only">{{ site.i18n.close }}</span>
+        </div>
+    </span>
+</div>
+{% endcapture %}
+
+{% capture body %}
+<p class="mb-2">{{site.i18n.login_modal.top_text | markdownify | replace: "$action", site.i18n.login_modal[action.title].title }}</p>
+<div class="mt-3 mb-2 h5">{{site.i18n.login_modal.question | markdownify}}</div>
+<div class="mb-3">
+  <form
+    class="needs-validation"
+    data-controller="authorize-interaction"
+    data-action="authorize-interaction#submit:prevent"
+    data-authorize-interaction-uri-value="{{ include.uri | strip_html | absolute_url | uri_escape }}"
+    >
+    <div class="form-row align-items-center border-lg border-lg-primary py-1">
+      <div class="col-12 col-lg mb-1 mb-lg-0">
+        <label class="sr-only">{{site.i18n.login_modal.placeholder}}</label>
+        <input
+          class="form-control border border-primary border-lg-0"
+          placeholder="{{site.i18n.login_modal.placeholder}}"
+          autocomplete="impp"
+          required
+          data-authorize-interaction-target="instance"
+          data-action="authorize-interaction#revalid"
+          type="search"/>
+        <div class="invalid-feedback">
+          {{- site.i18n.login_modal.authorize_interaction_unsupported -}}
+        </div>
+      </div>
+
+      <div class="col-12 col-lg-auto">
+        <button class="btn btn-primary btn-block py-btn-padding-y lh-btn-line-height f-16 font-weight-bold" type="submit">{{ site.i18n.take_me_home }}</button>
+      </div>
+    </div>
+  </form>
+</div>
+<small class="d-block mb-2">{{site.i18n.login_modal.small_text}}</small>
+<span>{{site.i18n.login_modal.bottom_text | markdownify}}</span>
+{% endcapture %}
+
+{% capture footer %}
+{% endcapture %}
+
+{% include activity_pub/button.html header=header body=body footer=footer header_class="justify-content-center border-bottom-0" body_class="justify-content-center" footer_class="border-top-0" content_class="p-2" button_class="mx-1" fa=action.icon description=include.description %}

data/_includes/activity_pub/reaction.html

@@ -0,0 +1,45 @@
+{%- 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="d-flex">
+  <div class="d-flex flex-column gray px-2 text-right">
+    {% include_cached date.html date=published format=site.i18n.date.format %}
+    {% include_cached date.html date=published format=site.i18n.time.format %}
+  </div>
+
+  <div class="flex-column px-2 flex-grow-1">
+    {% if include.previous.actor == include.activity.actor %}
+      <div class="d-flex">
+        <p class="transparent hover-transparent">
+          {% include_cached activity_pub/actor.html actor=include.activity.actor %}
+        </p>
+      </div>
+      <div class="d-flex">
+        <p class="transparent hover-transparent">
+          {% include_cached activity_pub/actor_mention.html actor=include.activity.actor without_link=true %}
+        </p>
+      </div>
+    {% else %}
+      <div class="d-flex">
+        <p class="">{% include_cached activity_pub/actor.html actor=include.activity.actor %}</p>
+      </div>
+      <div class="d-flex">
+        {% include_cached activity_pub/actor_mention.html actor=include.activity.actor %}
+      </div>
+    {% endif %}
+  </div>
+
+  <div class="flex-column align-self-center px-2 lead">
+    {% assign icon = include.activity.type | equals: 'Announce' | ternary: 'retweet', 'star-o' %}
+    {% assign description = site.i18n.activities[include.activity.type] %}
+
+    {%- include_cached fa.html icon=icon class="lead" description=description -%}
+  </div>
+</div>

data/_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 %}

data/_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_cached 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="py-5 pr-5">
+    <span class="h2">
+      {{- site.i18n.reply.text -}}
+    </span>
+
+    {% include_cached external_link.html href=uri class="h2" text=text %}
+  </div>
+{% endif %}

data/_includes/activity_pub/text_modal.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+  Modal para mostrar texto
+
+  @param :text [String] contenido del modal
+  @param :fa [String] nombre del ícono que usa fork-awesome
+{%- endcomment -%}
+
+{% capture body %}
+{{ include.text }}
+{% endcapture %}
+
+{% capture footer %}
+{% endcapture %}
+
+{% assign fa = include.fa %}
+{% include activity_pub/button.html body=body footer=footer body_class="justify-content-center" footer_class="border-top-0 d-none" content_class="p-2" fa=fa %}

data/_includes/activity_pub/toot_card.html

@@ -0,0 +1,95 @@
+{%- 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="d-flex flex-column media {{ include.component_class }}">
+  <div class="d-flex">
+    {%
+      include embed_responsive.html
+      x=1
+      y=1
+      src=include.profile.icon.url
+      alt=include.profile.icon.name
+      width=40
+      embed_class="mr-2 align-self-center w-49px"
+      img_class="h-100 object-fit-cover"
+    %}
+
+    <div class="">
+      <p>{% include_cached activity_pub/actor.html actor=include.profile %}</p>
+      <p>{% include_cached activity_pub/actor_mention.html actor=include.profile %}</p>
+    </div>
+  </div>
+
+  <div class="media-body w-100">
+    {% capture content %}
+			<div class="content mt-2">
+				{{ include.activity.content | sanitize_html }}
+			</div>
+
+			{% unless include.activity.attachment == empty %}
+				<div class="row no-gutters mt-2">
+					{% 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="ml-3 lead"
+      %}
+    {% else %}
+      {{ content }}
+    {% endif %}
+
+    <div class="d-flex gray justify-content-between my-2 align-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_cached 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>

data/_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 -}}

data/_includes/activity_pub/video_modal.html

@@ -0,0 +1,20 @@
+{%- comment -%}
+  Modal con imagen
+
+  @param :image [Image] la imagen que queremos en el modal, contiene url y alt text
+{%- endcomment -%}
+
+{% capture body %}
+  <video src="{{include.video.url}}" controls></video>
+{% endcapture %}
+
+<div class="{{ include.extra }} px-1" data-controller="modal">
+  <div class="embed-responsive embed-responsive-16by9">
+    <video
+      class="cursor-pointer min-w-100px w-100 embed-responsive-item object-fit-cover"
+      src="{{include.video.url}}"
+      data-action="click->modal#show"
+    ></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>