mostrar recuadros de ayuda

app/assets/javascripts/application.js

@@ -14,6 +14,8 @@
 //= require turbolinks
 //= require jquery/dist/jquery.js
 //= require jquery.hotkeys/jquery.hotkeys
+//= require bootstrap/util
+//= require bootstrap/alert
 //= require bootstrap-markdown/js/bootstrap-markdown
 //= require markdown-it/dist/markdown-it
 //= require select2/dist/js/select2

app/assets/javascripts/help.js

@@ -0,0 +1,3 @@
+$(document).on('turbolinks:load', function() {
+  $('.alert').alert();
+});

app/controllers/application_controller.rb

@@ -8,6 +8,9 @@ class ApplicationController < ActionController::Base
     redirect_to sites_path
   end
 
+  def markdown
+  end
+
   private
 
   # Encontrar un sitio por su ID

app/views/application/markdown.haml

@@ -0,0 +1,61 @@
+- if request.referer
+  = render 'layouts/breadcrumb', crumbs: [ link_to(t('help.markdown.back'), request.referer) ] 
+
+.row
+  .col
+    %table.table.table-striped.table-responsive-md
+      %thead
+        %tr
+          %th= t('help.markdown.input')
+          %th= t('help.markdown.output')
+      %tbody
+        %tr
+          %td
+            %code= "**#{t('help.markdown.bold')}**"
+          %td
+            %strong= t('help.markdown.bold')
+        %tr
+          %td
+            %code= "_#{t('help.markdown.italic')}_"
+          %td
+            %em= t('help.markdown.italic')
+        - 7.times do |i|
+          - next if i == 0
+          %tr
+            %td
+              %code= "#{'#' * i} #{t('help.markdown.heading')} #{i}"
+            %td= raw "<h#{i}>#{t('help.markdown.heading')} #{i}</h#{i}>"
+        %tr
+          %td
+            %code= "[#{t('help.markdown.link.text')}](#{t('help.markdown.link.url')})"
+          %td= link_to t('help.markdown.link.text'), t('help.markdown.link.url')
+        %tr
+          %td
+            %code= "> #{t('help.markdown.quote')}"
+          %td
+            %blockquote.blockquote= t('help.markdown.quote')
+        %tr
+          %td
+            %code
+              - 3.times do
+                = "* #{t('help.markdown.ul')}"
+                %br
+          %td
+            %ul
+              - 3.times do
+                %li= t('help.markdown.ul')
+        %tr
+          %td
+            %code
+              - 3.times do |i|
+                = "#{i}. #{t('help.markdown.ol')}"
+                %br
+          %td
+            %ol
+              - 3.times do
+                %li= t('help.markdown.ol')
+        %tr
+          %td
+            %code= "![#{t('help.markdown.img.text')}](#{t('help.markdown.img.url')})"
+          %td
+            %img{alt: t('help.markdown.img.text'), src: t('help.markdown.img.url')}

app/views/layouts/_help.haml

@@ -0,0 +1,11 @@
+.alert.alert-info.alert-dismissible.fade.show{role: 'alert'}
+  - if help.respond_to? :each
+    %ul
+      - help.each do |h|
+        %li= raw h
+  - else
+    = raw help
+  %button.close{type: 'button',
+    data: { dismiss: 'alert' },
+    'aria-label': t('help.close') }
+    %span{'aria-hidden': true} ×

app/views/posts/_form.haml

@@ -23,10 +23,14 @@
     = select_tag 'post[dir]',
       options_for_select([[t('posts.ltr'), 'ltr'], [t('posts.rtl'), 'rtl']], direction),
       { class: 'form-control' }
+    %small.text-muted.form-text= t('posts.dir_help')
   .form-group
-    = text_field 'post', 'title', value: @post.title, class: field_class,
-      placeholder: t('posts.title')
+    = label_tag 'post_title', t('posts.title')
+    = text_field 'post', 'title', value: @post.title, class: field_class
   .form-group{class: direction}
+    = render 'layouts/help', help: [ t('help.markdown.intro'),
+      t('help.distraction_free_html'),
+      t('help.preview_html') ]
     = text_area_tag 'post[content]', @post.content, autofocus: true,
       class: 'post-content'
   .form-group
@@ -35,17 +39,16 @@
       class: 'form-control'
     %small.text-muted.form-text= t('posts.date_help')
   .form-group
+    = render 'layouts/help', help: t('help.autocomplete_html')
     = label_tag 'post_categories', t('posts.categories')
     = select_tag 'post[categories][]',
       options_for_select(@site.categories, @post.categories),
       { class: 'form-control select2', multiple: 'multiple' }
-    %small.text-muted.form-text= t('posts.tags_help')
   .form-group
     = label_tag 'post_tags', t('posts.tags')
     = select_tag 'post[tags][]',
       options_for_select(@site.tags, @post.tags),
       { class: 'form-control select2', multiple: 'multiple' }
-    %small.text-muted.form-text= t('posts.tags_help')
   .form-group
     = label_tag 'post_slug', t('posts.slug')
     = text_field 'post', 'slug', value: @post.slug,

config/locales/en.yml

@@ -2,6 +2,39 @@ en:
   errors:
     argument_error: 'Argument `%{argument}` must be an instance of %{class}'
     unknown_locale: 'Unknown %{locale} locale'
+  help:
+    close: 'Close help'
+    markdown:
+      intro: 'The text is formatted using a syntax called Markdwon, a
+      simple format that can be easily written just by remembering some
+      rules, and that can be converted to a web page, or to PDF and ePub
+      files.  You can use the buttons below for basic formatting.  If
+      you need help, here you have a <a href="/markdown">markdown
+      cheatsheet</a>.'
+      back: 'Go back'
+      input: 'If we write...'
+      output: 'We get...'
+      bold: 'Bold'
+      italic: 'Emphasis'
+      heading: 'Title'
+      link:
+        text: 'A link'
+        url: 'https://example.org'
+      quote: 'A quote from a text we liked'
+      ul: 'Our TODO list'
+      ol: 'Steps for our machiavelic plans'
+      img:
+        text: 'Kéfir island'
+        url: 'https://kefir.red/images/isla.png'
+    distraction_free_html: 'You can a distraction free writing session
+    by clicking the <span class="fa fa-expand"></span> button'
+    preview_html: 'Click the <span class="fa fa-search"></span> preview
+    button to see the results.'
+    autocomplete_html: "Some of these fields can be auto-completed.  If
+    you know what to put on them, just start writing and the
+    auto-complete will suggest available options.  If the option doesn't
+    exist, finish writing and press <kbd>Enter</kbd> to add a new one.
+    To empty the field, click the &times; button on your right."
   login:
     email: 'E-mail'
     password: 'Password'
@@ -36,9 +69,11 @@ en:
     tags: 'Tags'
     tags_help: 'Comma separated!'
     categories: 'Categories'
-    categories_help: 'Comma separated!'
+    tags: 'Tags'
     slug: 'Slug'
-    slug_help: 'This is the name of the article on the URL, ie. /title/.  You can leave it empty.'
+    slug_help: 'This is the name of the article on the URL, ie. /title/.
+    You can leave it empty.  If you changed the title and you want to
+    change the file name, empty this field.'
     cover: 'Cover'
     cover_help: 'Path to the cover'
     layout: 'Layout'

config/locales/es.yml

@@ -2,6 +2,38 @@ es:
   errors:
     argument_error: 'El argumento `%{argument}` debe ser una instancia de %{class}'
     unknown_locale: 'El idioma %{locale} es desconocido'
+  help:
+    close: 'Cerrar ayuda'
+    markdown:
+      intro: 'El formato del texto se llama Markdown.  Es un formato
+      simple que puede ser escrito recordando unas pocas reglas y que
+      luego puede ser convertido a una página web, o un PDF, o un ePub.
+      Puedes usar los botones para dar formato básico a tu texto.  Para
+      cuestiones más avanzadas, aquí tienes un <a
+      href="/markdown">recordatorio de markdown</a>.'
+      back: 'Volver'
+      input: 'Si escribimos...'
+      output: 'Obtenemos...'
+      bold: 'Negrita'
+      italic: 'Énfasis'
+      heading: 'Título'
+      link:
+        text: 'Un vínculo'
+        url: 'https://ejemplo.org'
+      quote: 'Un recorte de texto que nos gustó'
+      ul: 'Lista de cosas para hacer'
+      ol: 'Pasos para un plan maquiavélico'
+      img:
+        text: 'La isla de Kéfir'
+        url: 'https://kefir.red/images/isla.png'
+    distraction_free_html: 'Puedes escribir sin distracciones presionando el botón <span class="fa fa-expand"></span>'
+    preview_html: 'Utiliza el botón de <span class="fa fa-search"></span> previsualización para ver el texto generado'
+    autocomplete_html: 'Algunos de estos campos se autocompletan.  Si ya
+    sabes qué quieres poner, solo empieza a escribir y el autocompletado
+    te sugerirá las opciones disponibles.  Si no existe lo que quieres
+    poner, termina de escribir y presiona <kbd>Entrar</kbd> para agregar
+    opciones que aun no existen.  Para vaciar las opciones, usa el botón
+    &times; a la derecha.'
   login:
     email: 'Dirección de correo'
     password: 'Contraseña'
@@ -34,9 +66,11 @@ es:
     date_help: '¡Esto cambia el orden de los artículos!'
     title: 'Título'
     categories: 'Categorías'
-    categories_help: '¡Separadas por comas!'
+    tags: 'Etiquetas'
     slug: 'Nombre la URL'
-    slug_help: 'Esto es el nombre del artículo en la URL, por ejemplo /título/.  Puedes dejarlo vacío.'
+    slug_help: 'Esto es el nombre del artículo en la URL, por ejemplo
+    /título/.  Puedes dejarlo vacío.  Si cambiaste el título y quieres
+    que la URL cambie, borra el contenido de este campo.'
     cover: 'Portada'
     cover_help: 'La dirección de la portada'
     layout: 'Plantilla'
@@ -67,6 +101,7 @@ es:
     rtl: 'Derecha a izquierda'
     ltr: 'Izquierda a derecha'
     dir: 'Dirección del texto'
+    dir_help: 'Cambiar la dirección del texto, por ej. el árabe se lee de derecha a izquierda'
     logger:
       rm: 'Eliminado %{path}'
     errors:

config/routes.rb

@@ -3,6 +3,7 @@ Rails.application.routes.draw do
 
   get 'login/new', to: 'login#new'
   post 'login', to: 'login#create'
+  get 'markdown', to: 'application#markdown'
 
   resources :sites, only: [ :index, :show ] do
     resources :posts