compost-jekyll-theme 0.2.2 → 0.3.0

data/_includes/bootstrap/custom_select.html

@@ -0,0 +1,18 @@
+{% comment %}
+
+@param class [String] Extra classes
+@param extra [String] Extra attributes
+@param options [Array<Hash>] Options
+  @param selected [Boolean] Default option
+  @param extra [String] Extra attributes
+  @param value [String] Value
+  @param title [String] Title
+{% endcomment %}
+
+<select class="custom-select {{ include.class }}" {{ include.extra }}>
+  {% for options in include.options %}
+    <option {{ options.selected }} {{ options.extra }} value="{{ options.value | default: options.title | escape }}">
+      {{- options.title -}}
+    </option>
+  {% endfor %}
+</select>

data/_includes/cover_post/generic.html

@@ -22,7 +22,7 @@ La ficha de post en el índice de artículos.
 		<span class="sr-only">{{ include.alt }}</span>
 	</a>
 
-	{% include embed_responsive.html src=include.src width=700 x="700" y="350" alt=include.alt embed_class="shadow" %}
+	{% include embed_responsive.html src=include.src width=700 x="700" y="350" alt=include.alt embed_class="shadow" img_class="w-100 h-100 object-fit-cover" %}
 
 	{% include headings/h1.html text=include.title class=include.title_class %}
 

data/_includes/date.html

@@ -0,0 +1,12 @@
+{% comment %}
+  La fecha de un artículo
+
+  @param :date [String] La fecha con formato
+  @param :extra [String] Atributos extra
+{% endcomment %}
+
+<time
+	datetime="{{ include.date | date_to_xmlschema }}"
+	{{ include.extra }}>
+	{{- include.date | date_local: include.format -}}
+</time>

data/_includes/details.html

@@ -0,0 +1,26 @@
+{%- comment -%}
+
+Details: elementos con dropdown
+
+@param :component_class [String] Las clases del componente
+@param :summary_class [String] Las clases del summary
+@param :element_title [String] El título del elemento (summary)
+@param :title_class [String] Las clases del título
+@param :font_size [String] El tamaño de los íconos de abrir y cerrar
+@param :element_text [String] El texto del elemento
+@param :text_class [String] Las clases del texto
+{%- endcomment -%}
+
+{%- assign class_close = "hide-when-open " | append: include.font_size -%}
+{%- assign class_open = "show-when-open " | append: include.font_size -%}
+
+<details class="{{ include.component_class }}">
+	<summary class="d-flex justify-content-between {{ include.summary_class }}">
+		<div class="{{ include.title_class }}">{{ include.element_title }}</div>
+		{%- include fa.html icon="angle-down" class=class_close description=site.i18n.details.open -%}
+		{%- include fa.html icon="angle-up" class=class_open description=site.i18n.details.close -%}
+	</summary>
+
+	<div class="{{ include.text_class }}">{{ include.element_text }}</div>
+	<hr/>
+</details>

data/_includes/embed_responsive.html

@@ -9,11 +9,12 @@ Embed responsive
 @param :width [Integer]
 @param :height [Integer]
 @param :embed_class [String]
+@param :img_class [String]
 {%- endcomment -%}
 
-<div class="embed-responsive embed-responsive-{{ include.x }}by{{ include.y }} {{ include.embed_class }}">
+<div class="embed-responsive embed-responsive-{{ include.x }}by{{ include.y }} {{ include.embed_class }}" {{ include.extra }}>
   {% if include.src %}
-    {%- include picture.html class="embed-responsive-item" img_class="w-100 h-100 object-fit-cover" src=include.src alt=include.alt width=include.width -%}
+    {%- include picture.html class="embed-responsive-item" img_class=include.img_class src=include.src alt=include.alt width=include.width -%}
   {% else %}
     <div class="embed-responsive-item background-primary"></div>
   {% endif %}

data/_includes/external_link.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+
+Link externo.
+
+@param :href [String] La URL
+@param :class [String] Las clases del link
+{%- endcomment -%}
+
+<a
+	class="text-decoration-none {{ include.class }}"
+	href="{{ include.href | uri_escape }}"
+	{{ include.href | start_with: "https://" | value_if: 'rel="noopener" target="_blank"' }}
+	{{ include.href | start_with: "http://" | value_if: 'rel="noopener" target="_blank"' }}>
+	{{ include.text }}
+</a>

data/_includes/fa.html

@@ -0,0 +1,11 @@
+{%- comment -%}
+
+Un ícono
+
+@param :icon [String] El ícono
+@param :class [String] Las clases
+@param :description [String] La descripción
+{%- endcomment -%}
+
+<i title="{{ include.description | escape_once }}" aria-hidden="true" class="fa fa-{{ include.icon }} {{ include.class }}">{{ include.content }}</i>
+<span class="sr-only">{{ include.description }}</span>

data/_includes/headings/with_link.html

@@ -9,7 +9,7 @@ La base para un encabezado
 
 {%- assign slug = include.text | slugify -%}
 <h{{ include.level }} id="{{ slug }}">
-  <a class="{{ include.class }}" href="#{{ slug }}">
+  <a class="{{ include.class }}" href="#{{ slug }}" data-turbo="false">
     {{- include.text -}}
   </a>
 </h{{ include.level }}>

data/_includes/theme/cards.html

@@ -0,0 +1,7 @@
+<div class="w-md-50">
+	{% include activity_pub/cards.html
+		profile=site.data.fixtures.activity_pub.users.sutty
+		activity=site.data.fixtures.activity_pub.activities.sutty
+		replies=site.data.fixtures.activity_pub.replies
+	%}
+</div>

data/_includes/theme/en_respuesta_a.html

@@ -0,0 +1 @@
+{% include activity_pub/replying_to.html activity=site.data.fixtures.activity_pub.activities.sutty %}

data/_includes/theme/fediverse_interactions.html

@@ -0,0 +1 @@
+{% include_cached bootstrap/custom_select.html options=site.i18n.fediverse_interactions %}

data/_includes/theme/llamar_modal.html

@@ -0,0 +1,21 @@
+{% capture header %}
+<h1> Hola modal </h1>
+{% endcapture %}
+
+{% capture body %}
+<h1> Hola soy un body </h1>
+{% endcapture %}
+
+{% capture footer %}
+<h1> Hola soy un footer </h1>
+{% endcapture %}
+
+<div data-controller="modal">
+    <button data-action="modal#show">Abrir</button>
+  
+    {% include activity_pub/generic_modal.html body=body %}
+  
+</div>
+
+
+  

data/_includes/theme/llamar_modal_logueo.html

@@ -0,0 +1 @@
+{% include activity_pub/button_bar.html uri="https://dweb.sutty.nl/" %}

data/_includes/theme/modal_ayuda.html

@@ -0,0 +1,2 @@
+{% assign text = site.i18n.help | markdownify | replace: '<a ', "<a target='_blank' rel='noopener' " %}
+{% include activity_pub/text_modal.html text=text fa="question-circle-o" %}

data/_includes/theme/modal_imagen.html

@@ -0,0 +1,5 @@
+{% for image in site.data.placeholder.images %}
+
+    {% include activity_pub/image_modal.html image=image %}
+
+{% endfor %}

data/_includes/theme/modal_video.html

@@ -0,0 +1,5 @@
+{% for video in site.data.placeholder.videos %}
+
+    {% include activity_pub/video_modal.html video=video %}
+
+{% endfor %}

data/_includes/theme/navigation_post.html

@@ -1,17 +1,17 @@
 <div class="mb-3">
-  {% include headings/h2.html text="Todos los botones visibles" %}
+  {% include headings/with_link.html level=2 text="Todos los botones visibles" %}
 
   {% include navigation_post.html src_previous="public/arrow_previous.png" src_home="public/home.png" alt_previous=site.i18n.previous_page src_next="public/arrow_next.png" href_previous="#biografía-de-autore-en-los-artículos" href_home="?#" href_next="#imagen-con-link-de-sección-supporters" alt_next=site.i18n.next_page %}
 </div>
 
 <div class="mb-3">
-  {% include headings/h2.html text="Cuando se llega al principio del indice de contenido" %}
+  {% include headings/with_link.html level=2 text="Cuando se llega al principio del indice de contenido" %}
 
   {% include navigation_post.html src_previous="public/arrow_previous.png" alt_previous=site.i18n.previous_page src_home="public/home.png" src_next="public/arrow_next.png" href_home="?#" href_next="#imagen-con-link-de-sección-supporters" alt_next=site.i18n.next_page %}
 </div>
 
 <div class="mb-3">
-  {% include headings/h2.html text="Cuando se llega al final del indice de contenido" %}
+  {% include headings/with_link.html level=2 text="Cuando se llega al final del indice de contenido" %}
 
   {% include navigation_post.html src_previous="public/arrow_previous.png" alt_previous=site.i18n.previous_page src_home="public/home.png" href_previous="#biografía-de-autore-en-los-artículos" src_next="public/arrow_next.png" href_home="?#" alt_next=site.i18n.next_page %}
 </div>

data/_includes/theme/reactions.html

@@ -0,0 +1,5 @@
+{% assign reactions = site.data.fixtures.activity_pub.likes | concat: site.data.fixtures.activity_pub.shared | sort: "published" %}
+
+<div class="w-md-50">
+  {% include activity_pub/reactions.html reactions=reactions %}
+</div>

data/_includes/theme/toot_card.html

@@ -0,0 +1,4 @@
+{% include activity_pub/toot_card.html
+	profile=site.data.fixtures.activity_pub.users.sutty
+	activity=site.data.fixtures.activity_pub.activities.sutty
+%}

data/_includes/toggler/toggler.html

@@ -8,14 +8,15 @@
   @param :toggled_content [String] El contenido del elemento toggled
 {% endcomment %}
 <input
-  type="checkbox"
+  type="{{ include.type | default: 'checkbox' }}"
   class="toggler sr-only"
   data-action="body-scroll#toggle"
   autocomplete="off"
   id="{{ include.id }}"
-  name="{{ include.id }}"
+  value="{{ include.id }}"
+  name="{{ include.name | default: include.id }}"
   aria-labelledby="{{ include.id }}-label" />
 
-<div class="toggled position-absolute {{ include.toggled_class }}">
+<div class="toggled {{ include.toggled_class }}">
 	{{ include.toggled_content }}
 </div>

data/_layouts/back_cover.html

@@ -10,7 +10,7 @@ layout: "default_with_menu"
 {%- assign next = page | next: posts -%}
 
 <article id="{{ page.slug }}" class="container mx-auto max-w-780px my-4 px-20">
-  {% include embed_responsive.html src=page.image.path alt=page.image.description x=2 y=1 width=780 embed_class="shadow" %}
+  {% include embed_responsive.html src=page.image.path alt=page.image.description x=2 y=1 width=780 embed_class="shadow" img_class="w-100 h-100 object-fit-cover" %}
 
   <div class="">
     <div class="border-bottom border-gray border-width-2">

data/_layouts/default.html

@@ -41,7 +41,7 @@
     <meta name="msapplication-TileColor" content="{{ theme.bg_color }}">
     <meta name="theme-color" content="{{ theme.primary }}">
     {% seo %}
-    {%- feed_meta -%}
+    
 
     {%- if page.activity -%}
       <link href="{{ page.activity.url | absolute_url }}" rel="alternate" type="application/activity+json" />

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: "default_with_menu"
+---
+
+{{ content }}

data/_layouts/post.html

@@ -1,11 +1,10 @@
 ---
 layout: "default_with_menu"
 ---
-
-{%- assign about = site.posts | find: "layout", "about" -%}
-{%- assign back_covers = site.posts | where: "layout", "back_cover" -%}
-{%- assign posts = site.posts | where: "layout", "post" | concat: back_covers -%}
-{%- assign authors = site.posts | where: "layout", "author" -%}
+{%- assign about = site.posts | find: 'layout', 'about' -%}
+{%- assign back_covers = site.posts | where: 'layout', 'back_cover' -%}
+{%- assign posts = site.posts | where: 'layout', 'post' | concat: back_covers -%}
+{%- assign authors = site.posts | where: 'layout', 'author' -%}
 {%- assign prev = page | prev: posts -%}
 {%- assign next = page | next: posts -%}
 
@@ -15,6 +14,10 @@ layout: "default_with_menu"
   {% endif %}
 
   <div class="mt-5">
+    {% if page.activity.inReplyTo %}
+      {% include_cached activity_pub/replying_to.html activity=page.activity.inReplyTo %}
+    {% endif %}
+
     {% include headings/h1.html class="text-uppercase black hover-black letter-spacing-4 font-weight-bold mb-12" text=page.title %}
 
     {% if page.subtitle %}
@@ -24,28 +27,30 @@ layout: "default_with_menu"
     {% unless page.authors == empty %}
       <p class="lead text-uppercase letter-spacing-5">
         {% for author in page.authors %}
-          {{ author.title }}{% unless forloop.last %} {{ site.i18n.and }} {% endunless %}
+          {{ author.title -}}
+          {%- unless forloop.last %} {{ site.i18n.and }} {% endunless %}
         {% endfor %}
       </p>
     {% endunless %}
 
     <div
-      class="source-serif lead-md pt-20 content"
-      data-controller="footnotes"
-      data-action="resize@window->footnotes#resize"
       data-footnotes-container-width-value="{{ site.data.theme.footnotes_container_width }}"
       data-footnotes-sidenote-width-value="{{ site.data.theme.footnotes_sidenote_width }}"
       data-footnotes-padding-left-value="{{ site.data.theme.footnotes_padding_left }}"
       data-footnotes-offset-left-value="{{ site.data.theme.footnotes_offset_left }}"
       data-footnotes-footnote-class="{{ site.data.theme.footnotes_footnote_class | join: " " }}"
       data-footnotes-footnote-toggled-class="{{ site.data.theme.footnotes_footnote_toggled_class | join: " " }}"
-      data-footnotes-sidenote-class="{{ site.data.theme.footnotes_sidenote_class | join: " " }}">
+      data-footnotes-sidenote-class="{{ site.data.theme.footnotes_sidenote_class | join: " " }}"
+      class="source-serif lead-md pt-20 content"
+      data-controller="footnotes"
+      data-action="resize@window->footnotes#resize"
+    >
       {{ content }}
     </div>
   </div>
 
   <footer class="d-flex flex-column align-items-center mt-60">
-    {% unless page.authors == empty or page.show_biography == false  %}
+    {% unless page.authors == empty or page.show_biography == false %}
       {% for author in page.authors %}
         {% include biography.html text=author.content %}
       {% endfor %}
@@ -55,6 +60,10 @@ layout: "default_with_menu"
       {% include license_block.html title=page.license content=about.license %}
     {% endif %}
 
+    {% if page.activity %}
+      {% include activity_pub/interactions.html activity=page.activity profile=site.actor %}
+    {% endif %}
+
     {% include navigation_post.html src_previous="public/arrow_previous.png" src_home="public/home.png" src_next="public/arrow_next.png" href_previous=prev.url href_home="?#" href_next=next.url %}
   </footer>
 </article>

data/_layouts/support.html

@@ -12,28 +12,29 @@ layout: "default_with_menu"
   data-controller="support-us"
   data-support-us-monetization-url-value="{{ page.monetization_url }}"
   id="{{ page.slug }}" class="container mx-auto max-w-780px py-4 mt-lg-5 px-20">
-	{% include headings/h1.html class="text-uppercase black hover-black letter-spacing-4 font-weight-bold mb-4" text=page.title %}
+
+  {% include headings/h1.html class="text-uppercase black hover-black letter-spacing-4 font-weight-bold mb-4" text=page.title %}
 
 	<p class="lead-md content">{{ page.description }}</p>
 
 	<div class="row row-cols-2 justify-content-center my-80 no-gutters">
-		{% for button in buttons %}
-			<div class="col d-flex p-1">
-				{% if button.layout == "button" %}
-					{% include buttons/with_link.html href=button.link text=button.title %}
-				{% elsif button.layout == "button_copy" %}
-					{% include buttons/with_copy.html copy=button.text text=button.title %}
-				{% endif %}
-			</div>
-		{% endfor %}
+    {% for button in buttons %}
+      <div class="col d-flex p-1">
+        {% if button.layout == "button" %}
+          {% include buttons/with_link.html href=button.link text=button.title %}
+        {% elsif button.layout == "button_copy" %}
+          {% include buttons/with_copy.html copy=button.text text=button.title %}
+        {% endif %}
+      </div>
+    {% endfor %}
 	</div>
 
-    <div class="lead-md content">
-      {{-
-        page.section_1
-        | replace: "BALANCE", '<code data-support-us-target="balance"></code>'
-        | replace: "DATE", '<span data-support-us-target="date"></span>' -}}
-    </div>
+	<div class="lead-md content">
+		{{-
+			page.section_1
+			| replace: "BALANCE", '<code data-support-us-target="balance"></code>'
+			| replace: "DATE", '<span data-support-us-target="date"></span>' -}}
+	</div>
 
 	<div class="my-4">
 		{% for goal in goals %}

data/_sass/content.scss

@@ -70,16 +70,16 @@
     }
   }
 
-  a {
-    word-break: break-word !important;
-    word-wrap: break-word !important;
-  }
-
   blockquote {
     border-left: 4px solid rgba(0, 0, 0, 0.2);
     margin-left: 0.75em;
     padding-left: 0.5em;
   }
+
+  a {
+    word-break: break-word !important;
+    word-wrap: break-word !important;
+  }
 }
 
 footer .content a {
@@ -91,3 +91,13 @@ small,
   @include font-size($small-font-size);
   font-weight: unset;
 }
+
+.mw-100vw {
+  max-width: 100vw;
+}
+
+@media (min-width: 768px) {
+  .responsive-header {
+    min-height: $h1-font-size * $headings-line-height;
+  }
+}

data/_sass/details.scss

@@ -0,0 +1,28 @@
+details {
+	summary {
+		.show-when-open {
+			display: none;
+		}
+
+		.hide-when-open {
+			display: block;
+		}
+	}
+
+	&[open] {
+		summary {
+			.show-when-open {
+				display: block;
+			}
+
+			.hide-when-open {
+				display: none;
+			}
+		}
+	}
+
+	& > summary {
+		list-style: none;
+		&::-webkit-details-marker { display: none; }
+	}
+}

data/_sass/utilities.scss

@@ -46,6 +46,17 @@
         }
       }
 
+      /// Cambiar el fondo al pasar por encima o hacer foco
+      ///
+      /// @example html
+      ///   <div class="background-black background-hover-red"></div>
+      .background-hover#{$infix}-#{$color} {
+        &:hover,
+        &:focus-within {
+          background-color: var(--#{$color});
+        }
+      }
+
       @each $attr in $svg-attributes {
         /// Poder cambiar el relleno o la línea de un SVG
         ///
@@ -170,6 +181,11 @@
       .lh#{$infix}-#{$spacer} {
         line-height: $length !important;
       }
+
+      ///   <div class="rounded-3"></div>
+      .rounded#{$infix}-#{$spacer} {
+        border-radius: $length !important;
+      }
     }
 
     /// Anchos y altos en base a `$sizes` definido por Bootstrap.  Para
@@ -243,17 +259,17 @@
 .zindex-popover { z-index: 1060; }
 .zindex-tooltip { z-index: 1070; }
 
+b,
+strong {
+  font-weight: $font-weight-bold;
+}
+
 code {
   background-color: $code-background;
   border-radius: $code-radius;
   font-family: $code-font-family;
 }
 
-b,
-strong {
-  font-weight: $font-weight-bold;
-}
-
 .rotate {
   width: 60px;
   transform: rotate(90deg);

data/assets/css/styles.scss

@@ -14,6 +14,7 @@ $background-menu-close: '../../{{ about.background_image_close.path | default: "
 {{ site.data.theme | yaml_to_scss }}
 
 @import "bootstrap/scss/bootstrap";
+@import "fork-awesome/scss/fork-awesome";
 @import "utilities";
 @import "open_sans";
 @import "open_sans_wght_700";
@@ -22,3 +23,4 @@ $background-menu-close: '../../{{ about.background_image_close.path | default: "
 @import "roboto_mono_ital_wght_0_400_0_700_1_400_1_700";
 @import "content";
 @import "toggler";
+@import "details";

data/assets/fonts/forkawesome-webfont.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f91811e523692628f27cc96c18c1468a22f9322032ab9068559101363167a12
+size 3232

data/assets/js/pack.3KYIYXYU.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c0478868100645b14e51a522e1e688bf71d144a947e595d95ada633c7d7ad430
+size 853718

data/assets/js/pack.3KYIYXYU.js.map

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4400dc7eace00b355666bb97becfcbbd4fda219d87c57c9f47af606294bb729b
+size 2478951