radios-comunitarias-jekyll-theme 0.1.0

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

@@ -0,0 +1,66 @@
+---
+# Ponemos un frontmatter porque queremos que Jekyll procese este archivo
+---
+
+// El primer artículo que sea de tipo radio
+{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+
+// Pasar variables de Liquid a SASS
+$navbar-background: {{ radio.navbar_background_color | default: '#6dc381' }};
+$navbar-foreground: {{ radio.navbar_foreground_color | default: '#241f31' }};
+$social-foreground: {{ radio.social_foreground_color | default: 'white' }};
+
+// Redefinir los colores de Bootstrap en base a los elegidos, esto
+// cambia recursivamente algunas sombras y todo
+$body-bg: {{ radio.background_color | default: 'white' }};
+$body-color: {{ radio.foreground_color | default: '#241f31' }};
+$link-color: $navbar-background;
+
+// Tamaño del nombre de la radio
+$navbar-brand-font-size: 1rem;
+
+/*
+ * 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";
+@import "fork-awesome/scss/fork-awesome";
+@import "accessibility";
+@import "helpers";
+@import "toggler";
+@import "share_box";
+
+// Lo que vaya a llevar los colores de la barra de navegación
+.navbar-theme {
+  background-color: $navbar-background !important;
+  color: $navbar-foreground !important;
+
+  a {
+    color: $navbar-foreground;
+
+    @include hover() {
+      color: darken($navbar-foreground, 15%) !important;
+    }
+  }
+
+  // Define la clase que va a llevar el color de los botones de redes sociales
+  // XXX: Va dentro de navbar-theme porque es el único lugar donde los
+  // vamos a usar por ahora.
+  .social-theme {
+    color: $social-foreground !important;
+
+    // Cambiar de color los botones al pasar por encima
+    // XXX: La función viene de Bootstrap, por eso está la definición
+    // después de incluirlo.
+    @include hover() {
+      color: darken($social-foreground, 15%) !important;
+    }
+  }
+}
+
+.turbolinks-progress-bar {
+  background-color: $navbar-foreground;
+}

data/assets/js/script.js

@@ -0,0 +1,50 @@
+---
+---
+
+{% comment %}
+  TODO: Asignar esta variable una sola vez!
+{% endcomment %}
+{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+
+{% turbolinks %}
+
+// Inicia y gestiona el stream
+const streaming = (element) => {
+  // Cambiar el src para que incluya un timestamp, esto engaña a Firefox
+  // a recargar el video cuando se corta en lugar de pensar que terminó
+  // la descarga y empezar a reproducir desde el principio.
+  element.querySelectorAll('source').forEach(source => {
+    // Obtener la URL completa hasta el ?
+    source.src = source.src.split('?')[0]+'?'+Date.now().toString()
+  })
+
+  // Empezar la reproducción
+  element.load()
+  element.play()
+}
+
+// Este es el evento que espera a que cargue todo el sitio
+document.addEventListener('turbolinks:load', () => {
+  const transmission = document.querySelector('#transmission')
+
+  if ('mediaSession' in navigator) {
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: "{{ radio.description | escape }}",
+      artist: "{{ radio.title | escape }}",
+      artwork: [
+        {
+          src: '{{ radio.logo.path | thumbnail: 192 }}',
+          sizes: '192x192',
+          type: 'image/{{ radio.logo.path | split: '.' | last }}'
+        },
+      ],
+    })
+
+    navigator.mediaSession.setActionHandler('play', () => transmission.play())
+    navigator.mediaSession.setActionHandler('pause', () => transmission.pause())
+  }
+
+  // Volver a reproducir cuando se corte
+  // TODO: Agregar los tracks
+  transmission.addEventListener('ended', event => streaming(transmission))
+})

metadata

@@ -0,0 +1,279 @@
+--- !ruby/object:Gem::Specification
+name: radios-comunitarias-jekyll-theme
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- f
+- e
+- librenauta
+- void
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2020-08-29 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: jekyll-relative-urls
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+- !ruby/object:Gem::Dependency
+  name: jekyll-feed
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.9'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.9'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: jekyll-images
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+- !ruby/object:Gem::Dependency
+  name: jekyll-include-cache
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: jekyll-data
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+- !ruby/object:Gem::Dependency
+  name: jekyll-locales
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+- !ruby/object:Gem::Dependency
+  name: jekyll-turbolinks
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+description:
+email:
+- f@sutty.nl
+- e@sutty.nl
+- librenauta@riseup.net
+- v0id@riseup.net
+executables: []
+extensions: []
+extra_rdoc_files:
+- README.md
+- LICENSE.txt
+files:
+- LICENSE.txt
+- README.md
+- _data/en.yml
+- _data/es.yml
+- _data/forms/contacto.yml
+- _data/layouts/post.yml
+- _data/layouts/radio.yml
+- _includes/boolean.html
+- _includes/contact.html
+- _includes/content.html
+- _includes/email.html
+- _includes/file.html
+- _includes/footer.html
+- _includes/form/boolean.html
+- _includes/form/content.html
+- _includes/form/email.html
+- _includes/form/file.html
+- _includes/form/hidden.html
+- _includes/form/image.html
+- _includes/form/input.html
+- _includes/form/markdown_content.html
+- _includes/form/number.html
+- _includes/form/predefined_array.html
+- _includes/form/section.html
+- _includes/form/separator.html
+- _includes/form/string.html
+- _includes/form/submit.html
+- _includes/form/tel.html
+- _includes/form/text.html
+- _includes/form/url.html
+- _includes/hidden.html
+- _includes/image.html
+- _includes/input.html
+- _includes/logo.html
+- _includes/markdown_content.html
+- _includes/navbar.html
+- _includes/number.html
+- _includes/post.html
+- _includes/predefined_array.html
+- _includes/reproductor.html
+- _includes/section.html
+- _includes/separator.html
+- _includes/share.html
+- _includes/share_box.html
+- _includes/string.html
+- _includes/submit.html
+- _includes/tel.html
+- _includes/text.html
+- _includes/url.html
+- _layouts/default.html
+- _layouts/home.html
+- _layouts/post.html
+- _layouts/radio.html
+- _sass/accessibility.scss
+- _sass/helpers.scss
+- _sass/share.html
+- _sass/share_box.html
+- _sass/share_box.scss
+- _sass/toggler.scss
+- assets/css/styles.scss
+- assets/fonts/forkawesome-webfont.woff2
+- assets/js/script.js
+homepage: https://0xacab.org/sutty/jekyll/radios-comunitarias-jekyll-theme
+licenses:
+- Nonstandard
+metadata:
+  bug_tracker_uri: https://0xacab.org/sutty/jekyll/radios-comunitarias-jekyll-theme/issues
+  homepage_uri: https://0xacab.org/sutty/jekyll/radios-comunitarias-jekyll-theme
+  source_code_uri: https://0xacab.org/sutty/jekyll/radios-comunitarias-jekyll-theme
+  changelog_uri: https://0xacab.org/sutty/jekyll/radios-comunitarias-jekyll-theme/-/blob/master/CHANGELOG.md
+  documentation_uri: https://rubydoc.info/gems/radios-comunitarias-jekyll-theme
+post_install_message:
+rdoc_options:
+- "--title"
+- radios-comunitarias-jekyll-theme - Theme for community radio
+- "--main"
+- README.md
+- "--line-numbers"
+- "--inline-source"
+- "--quiet"
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key:
+specification_version: 4
+summary: Theme for community radio
+test_files: []