radios-comunitarias-jekyll-theme 0.3.0rc0 → 0.3.0rc1

data/_data/theme.yml

@@ -0,0 +1,142 @@
+---
+vendor_prefixes:
+- ""
+- "-webkit-"
+- "-ms-"
+- "-o-"
+- "-moz-"
+bezier: "cubic-bezier(0.75, 0, 0.25, 1);"
+colors:
+  black: "#000000"
+  white: "#ffffff"
+  transparent: "transparent"
+theme_colors: "$colors"
+spacer: "1rem"
+spacers:
+  20: "($spacer * 1.25)"
+  50: "($spacer * 3.125)"
+  150: "9.375rem"
+paragraph_margin_bottom: "0"
+headings_margin_bottom: "0"
+label_margin_bottom: "0"
+sizes:
+  20px: "1.25rem"
+  100vh: "100vh"
+opacities:
+  0: "-100%"
+  1: "-80%"
+  2: "-60%"
+  3: "-40%"
+  4: "-20%"
+  5: "0%"
+paragraph_margin_bottom: 0
+headings_margin_bottom: 0
+label_margin_bottom: 0
+enable_responsive_font_sizes: true
+directions:
+- "top"
+- "right"
+- "bottom"
+- "left"
+font_sizes:
+  16: "1"
+  18: "1.125"
+  20: "1.25"
+  22: "1.375"
+  24: "1.5"
+  26: "1.625"
+display1_size: "6rem"
+display2_size: "5.55rem"
+display3_size: "5rem"
+display4_size: "4.5rem"
+lead_font_size: "1.25rem"
+letter_spacings:
+  1: "0.1rem"
+  2: "0.16rem"
+text_decoration_lines:
+- "none"
+- "underline"
+- "overline"
+- "line-through"
+text_decoration_styles:
+- "solid"
+- "double"
+- "dotted"
+- "dashed"
+- "wavy"
+hyphens:
+- "none"
+- "auto"
+- "manual"
+cursors:
+- "pointer"
+- "none"
+- "help"
+- "not-allowed"
+- "progress"
+- "text"
+- "wait"
+events:
+- "none"
+- "auto"
+objects:
+- "contain"
+- "cover"
+- "fill"
+- "none"
+- "scale-down"
+overflows:
+- "auto"
+- "hidden"
+- "scroll"
+overflow_axis:
+- "x"
+- "y"
+scrolls:
+- "auto"
+- "smooth"
+svg_attributes:
+- "fill"
+- "stroke"
+embed_responsive_aspect_ratios:
+- "(1 1)"
+- "(4 3)"
+- "(16 9)"
+- "(21 9)"
+aligns:
+- "left"
+- "center"
+- "right"
+svg_attributes:
+- "stroke"
+- "fill"
+pixel_densities:
+- "1"
+- "1.5"
+- "2"
+background_sizes:
+  cover: "cover"
+  auto: "auto"
+  contain: "contain"
+background_positions_x:
+- "center"
+- "top"
+background_positions_y:
+- "center"
+- "left"
+- "right"
+grid_breakpoints:
+  xs: "0"
+  sm: "576px"
+  md: "768px"
+  lg: "992px"
+  xl: "1200px"
+border_width: "1px"
+border_widths:
+  1: "1px"
+  2: "2px"
+  3: "3px"
+  4: "4px"
+  5: "5px"
+transform_scales:
+- "1"

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 %}