diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 3aa3fcd..e6ec0d7 100644 --- a/app/assets/javascripts/application.js +++ b/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 diff --git a/app/assets/javascripts/help.js b/app/assets/javascripts/help.js new file mode 100644 index 0000000..130bd3c --- /dev/null +++ b/app/assets/javascripts/help.js @@ -0,0 +1,3 @@ +$(document).on('turbolinks:load', function() { + $('.alert').alert(); +}); diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 72679cf..5200e60 100644 --- a/app/controllers/application_controller.rb +++ b/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 diff --git a/app/views/application/markdown.haml b/app/views/application/markdown.haml new file mode 100644 index 0000000..b23c919 --- /dev/null +++ b/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 "#{t('help.markdown.heading')} #{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')} diff --git a/app/views/layouts/_help.haml b/app/views/layouts/_help.haml new file mode 100644 index 0000000..7a821e2 --- /dev/null +++ b/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} × diff --git a/app/views/posts/_form.haml b/app/views/posts/_form.haml index 2ac0dd4..0bb21c6 100644 --- a/app/views/posts/_form.haml +++ b/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, diff --git a/config/locales/en.yml b/config/locales/en.yml index b2bb5ae..1b16508 100644 --- a/config/locales/en.yml +++ b/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 markdown + cheatsheet.' + 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 button' + preview_html: 'Click the 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 Enter to add a new one. + To empty the field, click the × 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' diff --git a/config/locales/es.yml b/config/locales/es.yml index f41c630..185ebb5 100644 --- a/config/locales/es.yml +++ b/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 recordatorio de markdown.' + 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 ' + preview_html: 'Utiliza el botón de 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 Entrar para agregar + opciones que aun no existen. Para vaciar las opciones, usa el botón + × 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: diff --git a/config/routes.rb b/config/routes.rb index 329fb11..c02ed68 100644 --- a/config/routes.rb +++ b/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