Styled docs with markdown syntax

This commit is contained in:
Alberto Miedes Garcés
2016-11-29 23:45:21 +01:00
parent e694b9c934
commit 9f4688a08a

View File

@@ -1,6 +1,6 @@
# Personalización # Personalización
Puedes modificar consul y ponerle tu propia imagen, para esto debes primero hacer un fork de https://github.com/consul/consul creando un repositorio nuevo en Github. Puedes usar otro servicio como Gitlab, pero no te olvides de poner el enlace en el footer a tu repositorio en cumplimiento con la licencia de este proyecto (GPL Affero 3). Puedes modificar consul y ponerle tu propia imagen, para esto debes primero hacer un fork de [https://github.com/consul/consul](https://github.com/consul/consul) creando un repositorio nuevo en Github. Puedes usar otro servicio como Gitlab, pero no te olvides de poner el enlace en el footer a tu repositorio en cumplimiento con la licencia de este proyecto (GPL Affero 3).
Hemos creado una estructura específica donde puedes sobreescribir y personalizar la aplicación para que puedas actualizar sin que tengas problemas al hacer merge y se sobreescriban por error tus cambios. Intentamos que Consul sea una aplicación Ruby on Rails lo más plain vanilla posible para facilitar el acceso de nuevas desarrolladoras. Hemos creado una estructura específica donde puedes sobreescribir y personalizar la aplicación para que puedas actualizar sin que tengas problemas al hacer merge y se sobreescriban por error tus cambios. Intentamos que Consul sea una aplicación Ruby on Rails lo más plain vanilla posible para facilitar el acceso de nuevas desarrolladoras.
@@ -8,31 +8,32 @@ Hemos creado una estructura específica donde puedes sobreescribir y personaliza
Para adaptarlo puedes hacerlo a través de los directorios que están en custom dentro de: Para adaptarlo puedes hacerlo a través de los directorios que están en custom dentro de:
* config/locales/custom/ * `config/locales/custom/`
* app/assets/images/custom/ * `app/assets/images/custom/`
* app/views/custom/ * `app/views/custom/`
* app/controllers/custom/ * `app/controllers/custom/`
* app/models/custom/ * `app/models/custom/`
Aparte de estos directorios también cuentas con ciertos ficheros para: Aparte de estos directorios también cuentas con ciertos ficheros para:
* app/assets/stylesheets/custom.css * `app/assets/stylesheets/custom.css`
* app/assets/javascripts/custom.js * `app/assets/javascripts/custom.js`
* Gemfile_custom * `Gemfile_custom`
* config/application.custom.rb * `config/application.custom.rb`
### Internacionalización ### Internacionalización
Si quieres modificar algún texto de la web deberías encontrarlos en los ficheros formato YML disponibles en *config/locales/*. Puedes leer la [guía de internacionalización](http://guides.rubyonrails.org/i18n.html) de Ruby on Rails sobre como funciona este sistema. Si quieres modificar algún texto de la web deberías encontrarlos en los ficheros formato YML disponibles en `config/locales/`. Puedes leer la [guía de internacionalización](http://guides.rubyonrails.org/i18n.html) de Ruby on Rails sobre como funciona este sistema.
Las adaptaciones los debes poner en el directorio *config/locales/custom/*, recomendamos poner solo los textos que quieras personalizar. Por ejemplo si quieres personalizar el texto de "Ayuntamiento de Madrid, 2016" que se encuentra en el footer en todas las páginas, primero debemos ubicar en que plantilla se encuentra (app/views/layouts/_footer.html.erb), vemos que en el código pone lo siguiente: Las adaptaciones los debes poner en el directorio `config/locales/custom/`, recomendamos poner solo los textos que quieras personalizar. Por ejemplo si quieres personalizar el texto de "Ayuntamiento de Madrid, 2016" que se encuentra en el footer en todas las páginas, primero debemos ubicar en que plantilla se encuentra (`app/views/layouts/_footer.html.erb`), vemos que en el código pone lo siguiente:
```
```ruby
<%= t("layouts.footer.copyright", year: Time.current.year) %> <%= t("layouts.footer.copyright", year: Time.current.year) %>
``` ```
Y que en el fichero config/locales/es.yml sigue esta estructura (solo ponemos lo relevante para este caso): Y que en el fichero `config/locales/es.yml` sigue esta estructura (solo ponemos lo relevante para este caso):
``` ```yml
es: es:
layouts: layouts:
footer: footer:
@@ -40,11 +41,11 @@ es:
``` ```
Si creamos el fichero config/locales/custom/es.yml y modificamos "Ayuntamiento de Madrid" por el nombre de la organización que se este haciendo la modificación. Recomendamos directamente copiar los ficheros config/locales/ e ir revisando y corrigiendo las que querramos, borrando las líneas que no querramos traducir. Si creamos el fichero `config/locales/custom/es.yml` y modificamos "Ayuntamiento de Madrid" por el nombre de la organización que se este haciendo la modificación. Recomendamos directamente copiar los ficheros `config/locales/` e ir revisando y corrigiendo las que querramos, borrando las líneas que no querramos traducir.
### Imágenes ### Imágenes
Si quieres sobreescribir alguna imagen debes primero fijarte el nombre que tiene, por defecto se encuentran en *app/assets/images*. Por ejemplo si quieres modificar *app/assets/images/logo_header.png* debes poner otra con ese mismo nombre en el directorio app/assets/images/custom. Los iconos que seguramente quieras modificar son: Si quieres sobreescribir alguna imagen debes primero fijarte el nombre que tiene, por defecto se encuentran en `app/assets/images`. Por ejemplo si quieres modificar `app/assets/images/logo_header.png` debes poner otra con ese mismo nombre en el directorio `app/assets/images/custom`. Los iconos que seguramente quieras modificar son:
* apple-touch-icon-200.png * apple-touch-icon-200.png
* icon_home.png * icon_home.png
@@ -55,13 +56,13 @@ Si quieres sobreescribir alguna imagen debes primero fijarte el nombre que tiene
### Vistas (HTML) ### Vistas (HTML)
Si quieres modificar el HTML de alguna página puedes hacerlo copiando el HTML de *app/views* y poniendolo en *app/views/custom* respetando los subdirectorios que encuentres ahí. Por ejemplo si quieres modificar *app/views/pages/conditions.html* debes copiarlo y modificarla en app/views/custom/pages/conditions.html.erb Si quieres modificar el HTML de alguna página puedes hacerlo copiando el HTML de `app/views` y poniendolo en `app/views/custom` respetando los subdirectorios que encuentres ahí. Por ejemplo si quieres modificar `app/views/pages/conditions.html` debes copiarlo y modificarla en `app/views/custom/pages/conditions.html.erb`
### CSS ### CSS
Si quieres cambiar algun selector CSS (de las hojas de estilo) puedes hacerlo en el fichero *app/assets/stylesheets/custom.scss*. Por ejemplo si quieres cambiar el color del header (.top-links) puedes hacerlo agregando: Si quieres cambiar algun selector CSS (de las hojas de estilo) puedes hacerlo en el fichero `app/assets/stylesheets/custom.scss`. Por ejemplo si quieres cambiar el color del header (`.top-links`) puedes hacerlo agregando:
``` ```css
.top-links { .top-links {
background: red; background: red;
} }
@@ -71,9 +72,9 @@ Usamos un preprocesador de CSS, [SASS, con la sintaxis SCSS](http://sass-lang.co
### Javascript ### Javascript
Si quieres agregar código Javascript puedes hacerlo en el fichero *app/assets/javascripts/custom.js". Por ejemplo si quieres que salga una alerta puedes poner lo siguiente: Si quieres agregar código Javascript puedes hacerlo en el fichero `app/assets/javascripts/custom.js`. Por ejemplo si quieres que salga una alerta puedes poner lo siguiente:
``` ```js
$(function(){ $(function(){
alert('foobar'); alert('foobar');
}); });
@@ -81,11 +82,11 @@ $(function(){
### Modelos ### Modelos
Si quieres agregar modelos nuevos, o modificar o agregar métodos a uno ya existente puedes hacerlo en *app/models/custom*. En el caso de los modelos antiguos debes primero hacer un require de la dependencia. Si quieres agregar modelos nuevos, o modificar o agregar métodos a uno ya existente puedes hacerlo en `app/models/custom`. En el caso de los modelos antiguos debes primero hacer un require de la dependencia.
Por ejemplo en el caso del Ayuntamiento de Madrid se requiere comprobar que el código postal durante la verificación sigue un cierto formato (empieza con 280). Esto se realiza creando este fichero en *app/models/custom/verification/residence.rb*: Por ejemplo en el caso del Ayuntamiento de Madrid se requiere comprobar que el código postal durante la verificación sigue un cierto formato (empieza con 280). Esto se realiza creando este fichero en `app/models/custom/verification/residence.rb`:
``` ```ruby
require_dependency Rails.root.join('app', 'models', 'verification', 'residence').to_s require_dependency Rails.root.join('app', 'models', 'verification', 'residence').to_s
class Verification::Residence class Verification::Residence
@@ -116,10 +117,10 @@ class Verification::Residence
end end
``` ```
No olvides poner los tests relevantes en *spec/models/custom*, siguiendo con el ejemplo pondriamos lo siguiente en *spec/models/custom/residence_spec.rb*: No olvides poner los tests relevantes en `spec/models/custom`, siguiendo con el ejemplo pondriamos lo siguiente en `spec/models/custom/residence_spec.rb`:
``` ```ruby
require 'rails_helper' require 'rails_helper'
describe Verification::Residence do describe Verification::Residence do
@@ -162,20 +163,20 @@ TODO
### Gemfile ### Gemfile
Para agregar librerías (gems) nuevas puedes hacerlo en el fichero *Gemfile_custom*. Por ejemplo si quieres agregar la gema [rails-footnotes](https://github.com/josevalim/rails-footnotes) debes hacerlo agregandole Para agregar librerías (gems) nuevas puedes hacerlo en el fichero `Gemfile_custom`. Por ejemplo si quieres agregar la gema [rails-footnotes](https://github.com/josevalim/rails-footnotes) debes hacerlo agregandole
``` ```ruby
gem 'rails-footnotes', '~> 4.0' gem 'rails-footnotes', '~> 4.0'
``` ```
Y siguiendo el flujo clásico en Ruby on Rails (bundle install y seguir con los pasos específicos de la gema en la documentación) Y siguiendo el flujo clásico en Ruby on Rails (`bundle install` y seguir con los pasos específicos de la gema en la documentación)
### application.rb ### application.rb
Cuando necesites extender o modificar el *config/application.rb* puedes hacerlo a través del fichero *config/application_custom.rb*. Por ejemplo si quieres modificar el idioma por defecto al inglés pondrías lo siguiente: Cuando necesites extender o modificar el `config/application.rb` puedes hacerlo a través del fichero `config/application_custom.rb`. Por ejemplo si quieres modificar el idioma por defecto al inglés pondrías lo siguiente:
``` ```ruby
module Consul module Consul
class Application < Rails::Application class Application < Rails::Application
config.i18n.default_locale = :en config.i18n.default_locale = :en