share-to-fediverse-jekyll-theme 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 47b98dc361b40c122a8f87837196bbc6b3ba446236ea2b7d4c70f4df92d1c17f
-  data.tar.gz: efd73f30ae2459c462c571227ec60609d1621856b943a89a545898454c367423
+  metadata.gz: f70a7cb2292f13a87fb137d0a64f7def5524287846207ff44f437cf44f814028
+  data.tar.gz: 0e1b31d2799da74dad71ac45b3a470f112b25abc8781479c91f9c2382e4a1a0e
 SHA512:
-  metadata.gz: 8db51bc118cb1e0da15721f5ae1f710f3748da9a887563e6e70a90bfcba6026650d553d3c3d1c77d911d9b5dd88dc6c8261da1e6ed5fc51e9335913d0ec7dd43
-  data.tar.gz: a683e2e4a173f7e4c9b25e4d0ddd3f9d24ed855f59a41238c8128e7e61a3f4fcba25139253a4e63bbc1d948610acdf7c2214322f5ed45f22cb43cc0540e10724
+  metadata.gz: 7ab7dcb734e0f7f92a445064a4dea419d76862cb146fc7f375da47b2e136087f7821afc07979f98bec0fa3570e37a0d1d55b6003e662949041d7a00c4912521b
+  data.tar.gz: b03be2b7c6f1eb0895f0070cdbc2020ae30e18981cb142e5eebf4c291cf0f212d20fbb49a4a2b1414d780064db0fe02212a4639dd233726fc2d43cd3200d3e96

data/_data/en.yml

@@ -1,5 +1,8 @@
 ---
 locale: English
+date: '%m/%d/%Y'
+layouts:
+  post: Article
 made_by: 'Made by [Sutty](https://sutty.nl/en/).  [Follow us to the Fediverse](https://todon.nl/@sutty).'
 home:
   about: You're about to share

data/_data/en.yml.orig

@@ -0,0 +1,47 @@
+---
+locale: English
+<<<<<<< HEAD
+made_by: 'Made by [Sutty](https://sutty.nl/en/).  [Follow us to the Fediverse](https://todon.nl/@sutty).'
+home:
+  about: You're about to share
+  title: No title
+  description: No description
+  url: '#'
+=======
+date: '%m/%d/%Y'
+layouts:
+  post: Article
+menu:
+  title: Menu
+  items:
+  - title: Home
+    href: ''
+share:
+  text: Share
+  icon: share-alt
+  items:
+  - title: Fediverse
+    url: "https://fediverse.sutty.nl/en/?u=%url&t=%title&d=%description"
+    icon: mastodon-alt
+  - title: Facebook
+    url: "https://www.facebook.com/sharer/sharer.php?u=%url&t=%title%0A%0A%description"
+    icon: facebook-official
+  - title: Twitter
+    url: "https://twitter.com/intent/tweet?url=%url&text=%title%0A%0A%description&hashtags=ContamosConVoz"
+    icon: twitter
+  - title: Whatsapp
+    url: "https://api.whatsapp.com/send?text=%title%0A%0A%description%0A%0A%url"
+    icon: whatsapp
+  - title: Telegram
+    url: "https://t.me/share/url?url=%url&text=%title%0A%0A%description"
+    icon: telegram
+  - title: Tumblr
+    url: "https://www.tumblr.com/widgets/share/tool?canonicalUrl=%url&title=%title&caption=%description&tags=ContamosConVoz"
+    icon: tumblr
+  - title: Reddit
+    url: "https://reddit.com/submit?url=%url&title=ConVozContamos%20-%20%title"
+    icon: reddit
+  - title: E-mail
+    url: "mailto:?subject=%title&body=%description%0A%0A%url"
+    icon: envelope
+>>>>>>> 316041fe919fb439694e11d95c590f9056d52935

data/_data/es.yml

@@ -1,5 +1,8 @@
 ---
 locale: Castellano
+date: '%d/%m/%Y'
+layouts:
+  post: Artículo
 made_by: 'Hecho por [Sutty](https://sutty.nl/es/).  [Seguinos al Fediverso](https://todon.nl/@sutty).'
 home:
   about: Estás por compartir

data/_data/es.yml.orig

@@ -0,0 +1,47 @@
+---
+locale: Castellano
+<<<<<<< HEAD
+made_by: 'Hecho por [Sutty](https://sutty.nl/es/).  [Seguinos al Fediverso](https://todon.nl/@sutty).'
+home:
+  about: Estás por compartir
+  title: No hay un título
+  description: No hay una descripción
+  url: '#'
+=======
+date: '%d/%m/%Y'
+layouts:
+  post: Artículo
+menu:
+  title: Menú
+  items:
+  - title: Inicio
+    href: ''
+share:
+  text: Compartir
+  icon: share-alt
+  items:
+  - title: Fediverso
+    url: "https://fediverse.sutty.nl/es/?u=%url&t=%title&d=%description"
+    icon: mastodon-alt
+  - title: Facebook
+    url: "https://www.facebook.com/sharer/sharer.php?u=%url&t=%title%0A%0A%description"
+    icon: facebook-official
+  - title: Twitter
+    url: "https://twitter.com/intent/tweet?url=%url&text=%title%0A%0A%description&hashtags=ContamosConVoz"
+    icon: twitter
+  - title: Whatsapp
+    url: "https://api.whatsapp.com/send?text=%title%0A%0A%description%0A%0A%url"
+    icon: whatsapp
+  - title: Telegram
+    url: "https://t.me/share/url?url=%url&text=%title%0A%0A%description"
+    icon: telegram
+  - title: Tumblr
+    url: "https://www.tumblr.com/widgets/share/tool?canonicalUrl=%url&title=%title&caption=%description&tags=ContamosConVoz"
+    icon: tumblr
+  - title: Reddit
+    url: "https://reddit.com/submit?url=%url&title=ConVozContamos%20-%20%title"
+    icon: reddit
+  - title: Correo
+    url: "mailto:?subject=%title&body=%description%0A%0A%url"
+    icon: envelope
+>>>>>>> 316041fe919fb439694e11d95c590f9056d52935

data/_includes/share.html

@@ -0,0 +1,12 @@
+{% assign url = site.url | append: include.url | uri_escape %}
+{% assign title = include.title | default: site.title | uri_escape %}
+{% assign description = include.description | default: '' | uri_escape %}
+
+<a
+  target="_blank"
+  title="{{ include.share.title }}"
+  class="d-flex flex-column align-items-center p-3"
+  href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
+  <i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
+  <span>{{ include.share.title }}</span>
+</a>

data/_includes/share_box.html

@@ -0,0 +1,16 @@
+<input type="checkbox" id="share" class="toggler" autocomplete="off" />
+
+<label class="share btn border btn-block" for="share">
+  {{ site.i18n.share.text }}
+  <i class="fa fa-{{ site.i18n.share.icon }}"></i>
+
+  <div class="share-box toggled d-flex align-items-center justify-content-center">
+    <div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
+      {% for share in site.i18n.share.items %}
+        <div class="col-4">
+          {% include_cached share.html share=share url=include.url title=include.title description=include.description %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</label>

data/_sass/accessibility.scss

@@ -0,0 +1,13 @@
+* {
+  scroll-behavior: smooth;
+}
+
+/*
+ * Deshabilita animaciones si la usuaria las tiene deshabilitadas
+ */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    scroll-behavior: auto;
+    animation: none !important;
+  }
+}

data/_sass/helpers.scss

@@ -1,3 +1,18 @@
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+
+/*
+ * Crea una propiedad con prefijos de navegador
+ */
+$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+@mixin vendor-prefix($property, $definition...) {
+  @each $prefix in $vendor-prefixes {
+    #{$prefix}$property: $definition;
+  }
+}
+
+/*
+ * Crea clases para asignar colores según la lista de colores.
+ */
 @each $color, $_ in $colors {
   .background-#{$color} {
     background-color: var(--#{$color});

data/_sass/helpers.scss.orig

@@ -0,0 +1,57 @@
+<<<<<<< HEAD
+=======
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+
+/*
+ * Crea una propiedad con prefijos de navegador
+ */
+$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+@mixin vendor-prefix($property, $definition...) {
+  @each $prefix in $vendor-prefixes {
+    #{$prefix}$property: $definition;
+  }
+}
+
+/*
+ * Crea clases para asignar colores según la lista de colores.
+ */
+>>>>>>> 316041fe919fb439694e11d95c590f9056d52935
+@each $color, $_ in $colors {
+  .background-#{$color} {
+    background-color: var(--#{$color});
+  }
+
+  .#{$color} {
+    color: var(--#{$color});
+
+    ::-moz-selection,
+    ::selection {
+      background: var(--#{$color});
+      color: white;
+    }
+
+    svg {
+      * {
+        fill: var(--#{$color});
+      }
+    }
+
+    .form-control {
+      border-color: var(--#{$color});
+    }
+
+    .btn {
+      background-color: var(--#{$color});
+      color: white;
+      border-color: var(--#{$color});
+    }
+
+    hr {
+      border-color: var(--#{$color});
+    }
+
+    a {
+      color: var(--#{$color});
+    }
+  }
+}

data/_sass/share.html

@@ -0,0 +1,12 @@
+{% assign url = site.url | append: include.url | uri_escape %}
+{% assign title = include.title | default: site.title | uri_escape %}
+{% assign description = include.description | default: '' | uri_escape %}
+
+<a
+  target="_blank"
+  title="{{ include.share.title }}"
+  class="d-flex flex-column align-items-center p-3"
+  href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
+  <i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
+  <span>{{ include.share.title }}</span>
+</a>

data/_sass/share_box.html

@@ -0,0 +1,16 @@
+<input type="checkbox" id="share" class="toggler" autocomplete="off" />
+
+<label class="share btn border btn-block" for="share">
+  {{ site.i18n.share.text }}
+  <i class="fa fa-{{ site.i18n.share.icon }}"></i>
+
+  <div class="share-box toggled d-flex align-items-center justify-content-center">
+    <div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
+      {% for share in site.i18n.share.items %}
+        <div class="col-4">
+          {% include_cached share.html share=share url=include.url title=include.title description=include.description %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</label>

data/_sass/share_box.scss

@@ -0,0 +1,26 @@
+input[type="checkbox"].toggler {
+  &:focus + label {
+    outline: none;
+  }
+}
+
+.share-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0,0,0,.5);
+
+  @include vendor-prefix(transition, all 0.2s $bezier);
+
+  a {
+    border: $border-width solid transparent;
+
+    &:focus,
+    &:hover {
+      text-decoration: none;
+      border: $border-width solid $border-color;
+    }
+  }
+}

data/_sass/toggler.scss

@@ -0,0 +1,39 @@
+/*
+ * Desplegar menúes sin javascript!
+ * 
+ * Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
+ */
+
+// Comenzamos con un input checkbox con la clase toggler
+input[type="checkbox"].toggler {
+  // Lo ocultamos pero todavía queremos que se le pueda dar foco con el
+  // teclado
+  opacity: 0;
+  position: absolute;
+
+  // Ocultamos el elemento colapsable
+  & ~ label {
+    .toggled {
+      z-index: 10;
+      visibility: hidden;
+    }
+  }
+
+  // Al tildar el input, mostramos el elemento
+  &:checked ~ label {
+    .toggled {
+      visibility: visible;
+    }
+  }
+
+  & + label {
+    border: none;
+    outline: none;
+    z-index: 11;
+  }
+
+  // Dar una guía visual de que estamos enfocando el input
+  &:focus + label {
+    outline: 1px dotted grey ;
+  }
+}

data/assets/css/styles.scss

@@ -20,4 +20,5 @@ $colors: (
  * Los archivos se encuentran en node_modules/bootstrap/scss
  */
 @import "bootstrap/scss/bootstrap";
+@import "accessibility";
 @import "helpers";

data/assets/css/styles.scss.orig

@@ -0,0 +1,31 @@
+---
+# Ponemos un frontmatter porque queremos que Jekyll procese este archivo
+---
+
+$mastodon: #191b22;
+$mastodon-grey: #9baec8;
+$success: $mastodon-grey;
+
+$colors: (
+  "transparent": transparent,
+  "mastodon": $mastodon,
+  "mastodon-grey": $mastodon-grey
+);
+
+/*
+ * XXX: Solo importar los archivos necesarios de bootstrap para
+ * facilitar la reducción de CSS.  Por ahora pedimos todo para poder
+ * empezar a trabajar en el HTML sin pensar en CSS.
+ *
+ * Los archivos se encuentran en node_modules/bootstrap/scss
+ */
+@import "bootstrap/scss/bootstrap";
+<<<<<<< HEAD
+@import "helpers";
+=======
+@import "fork-awesome/scss/fork-awesome";
+@import "accessibility";
+@import "helpers";
+@import "toggler";
+@import "share_box";
+>>>>>>> 316041fe919fb439694e11d95c590f9056d52935

data/assets/js/script.js

@@ -19,7 +19,7 @@ const searchToObject = () => {
 }
 
 
-document.addEventListener('DOMContentLoaded', e => {
+document.addEventListener('{%- if site.turbolinks.enabled -%}turbolinks:load{%- else -%}DOMContentLoaded{%- endif -%}', () => {
   const urlShared = searchToObject();
 
   document.querySelectorAll('a[lang]').forEach(a => a.href += window.location.search);

data/assets/js/script.js.orig

@@ -0,0 +1,67 @@
+---
+---
+
+<<<<<<< HEAD
+// https://stackoverflow.com/a/7090123
+const searchToObject = () => {
+  var pairs = window.location.search.substring(1).split("&"),
+    obj = {},
+    pair,
+    i;
+
+  for (i in pairs) {
+    if (pairs[i] === "") continue;
+
+    pair = pairs[i].split("=");
+    obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+  }
+
+  return obj;
+}
+
+
+document.addEventListener('DOMContentLoaded', e => {
+  const urlShared = searchToObject();
+
+  document.querySelectorAll('a[lang]').forEach(a => a.href += window.location.search);
+
+  ['t','d','u'].forEach(field => {
+    if (urlShared[field] === undefined) return;
+
+    document.querySelector(`#${field}`).innerText = urlShared[field];
+  });
+
+  document.querySelector('#text').value = Object.values(urlShared).join("\n\n");
+
+  document.querySelector('form').addEventListener('submit', e => {
+    e.target.action = document.querySelector('#instance').value + '/share';
+=======
+document.addEventListener('{%- if site.turbolinks.enabled -%}turbolinks:load{%- else -%}DOMContentLoaded{%- endif -%}', () => {
+  document.querySelectorAll('.share').forEach(share => {
+    share.addEventListener('click', event => {
+      if (!Navigator.share) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const title = document.querySelector('title').text;
+
+      try {
+        const text = document.querySelector('meta[property="og:description"]').content;
+      } catch {
+        const text = '';
+      }
+
+      try {
+        const url = document.querySelector('link[rel=canonical]').href;
+      } catch {
+        const url = document.location.href;
+      }
+
+      const data = { title: title, text: text, url: url };
+
+      if (Navigator.canShare(data)) Navigator.share(data).then();
+    });
+>>>>>>> 316041fe919fb439694e11d95c590f9056d52935
+  });
+});

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: share-to-fediverse-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - f
@@ -149,7 +149,9 @@ files:
 - README.md
 - _config.yml
 - _data/en.yml
+- _data/en.yml.orig
 - _data/es.yml
+- _data/es.yml.orig
 - _data/forms/contacto.yml
 - _data/forms/fediverse.yml
 - _data/layouts/post.yml
@@ -181,6 +183,8 @@ files:
 - _includes/predefined_array.html
 - _includes/section.html
 - _includes/separator.html
+- _includes/share.html
+- _includes/share_box.html
 - _includes/string.html
 - _includes/submit.html
 - _includes/text.html
@@ -188,9 +192,17 @@ files:
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/post.html
+- _sass/accessibility.scss
 - _sass/helpers.scss
+- _sass/helpers.scss.orig
+- _sass/share.html
+- _sass/share_box.html
+- _sass/share_box.scss
+- _sass/toggler.scss
 - assets/css/styles.scss
+- assets/css/styles.scss.orig
 - assets/js/script.js
+- assets/js/script.js.orig
 homepage: https://0xacab.org/sutty/jekyll/share-to-fediverse-jekyll-theme
 licenses:
 - Nonstandard