agregar webpacker y actiontext

se llama webpacker y el logo no es un bulto!
This commit is contained in:
f 2019-08-30 17:47:31 -03:00
parent b598022650
commit 74ec630377
No known key found for this signature in database
GPG key ID: 2AE5A13E321F953D
25 changed files with 7652 additions and 4 deletions

1
.browserslistrc Normal file
View file

@ -0,0 +1 @@
defaults

7
.gitignore vendored
View file

@ -31,3 +31,10 @@
# Ignore master key for decrypting credentials and more. # Ignore master key for decrypting credentials and more.
/config/master.key /config/master.key
/config/credentials.yml.enc /config/credentials.yml.enc
/public/packs
/public/packs-test
/node_modules
/yarn-error.log
yarn-debug.log*
.yarn-integrity

View file

@ -60,6 +60,7 @@ gem 'rugged'
gem 'sidekiq' gem 'sidekiq'
gem 'terminal-table' gem 'terminal-table'
gem 'validates_hostname' gem 'validates_hostname'
gem 'webpacker'
group :development, :test do group :development, :test do
gem 'pry' gem 'pry'

View file

@ -250,6 +250,8 @@ GEM
rack (2.0.7) rack (2.0.7)
rack-protection (2.0.7) rack-protection (2.0.7)
rack rack
rack-proxy (0.6.5)
rack
rack-test (1.1.0) rack-test (1.1.0)
rack (>= 1.0, < 3) rack (>= 1.0, < 3)
rails (6.0.0) rails (6.0.0)
@ -404,6 +406,10 @@ GEM
activemodel (>= 6.0.0) activemodel (>= 6.0.0)
bindex (>= 0.4.0) bindex (>= 0.4.0)
railties (>= 6.0.0) railties (>= 6.0.0)
webpacker (4.0.7)
activesupport (>= 4.2)
rack-proxy (>= 0.6.1)
railties (>= 4.2)
websocket-driver (0.7.1) websocket-driver (0.7.1)
websocket-extensions (>= 0.1.0) websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.4) websocket-extensions (0.1.4)
@ -470,6 +476,7 @@ DEPENDENCIES
uglifier (>= 1.3.0) uglifier (>= 1.3.0)
validates_hostname validates_hostname
web-console (>= 3.3.0) web-console (>= 3.3.0)
webpacker
BUNDLED WITH BUNDLED WITH
2.0.2 2.0.2

View file

@ -0,0 +1,38 @@
//
// Provides a drop-in pointer for the default Trix stylesheet that will
// format the toolbar and the trix-editor content (whether displayed or
// under editing). Feel free to incorporate this inclusion directly in
// any other asset bundle and remove this file.
//
//= require trix/dist/trix
// We need to override trix.csss image gallery styles to accommodate
// the <action-text-attachment> element we wrap around attachments.
// Otherwise, images in galleries will be squished by the max-width:
// 33%; rule.
.trix-content {
.attachment-gallery {
> action-text-attachment,
> .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
&.attachment-gallery--2,
&.attachment-gallery--4 {
> action-text-attachment,
> .attachment {
flex-basis: 50%;
max-width: 50%;
}
}
}
action-text-attachment {
.attachment {
padding: 0 !important;
max-width: 100% !important;
}
}
}

View file

@ -1,3 +1,4 @@
//= require_tree .
// TODO: Encontrar la forma de generar esto desde los locales de Rails // TODO: Encontrar la forma de generar esto desde los locales de Rails
$custom-file-text: ( $custom-file-text: (
en: 'Browse', en: 'Browse',

View file

@ -0,0 +1,19 @@
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
require("trix")
require("@rails/actiontext")

View file

@ -0,0 +1,14 @@
<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
<% if blob.representable? %>
<%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
<% end %>
<figcaption class="attachment__caption">
<% if caption = blob.try(:caption) %>
<%= caption %>
<% else %>
<span class="attachment__name"><%= blob.filename %></span>
<span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
<% end %>
</figcaption>
</figure>

View file

@ -8,6 +8,8 @@
= csrf_meta_tags = csrf_meta_tags
= stylesheet_link_tag 'application', media: 'all', = stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application',
'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', = javascript_include_tag 'application',
'data-turbolinks-track': 'reload' 'data-turbolinks-track': 'reload'

View file

@ -2,5 +2,6 @@
= label_tag "post_#{attribute}", post_label_t(attribute, post: post) = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
= render 'posts/attribute_feedback', = render 'posts/attribute_feedback',
post: post, attribute: attribute, metadata: metadata post: post, attribute: attribute, metadata: metadata
= text_area_tag "post[#{attribute}]", metadata.value, = rich_text_area_tag "post[#{attribute}]",
**field_options(attribute, metadata) sanitize_markdown(metadata.value, tags: all_html_tags),
**field_options(attribute, metadata), class: ''

72
babel.config.js Normal file
View file

@ -0,0 +1,72 @@
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
require('@babel/preset-env').default,
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
require('@babel/preset-env').default,
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
require('babel-plugin-macros'),
require('@babel/plugin-syntax-dynamic-import').default,
isTestEnv && require('babel-plugin-dynamic-import-node'),
require('@babel/plugin-transform-destructuring').default,
[
require('@babel/plugin-proposal-class-properties').default,
{
loose: true
}
],
[
require('@babel/plugin-proposal-object-rest-spread').default,
{
useBuiltIns: true
}
],
[
require('@babel/plugin-transform-runtime').default,
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
require('@babel/plugin-transform-regenerator').default,
{
async: false
}
]
].filter(Boolean)
}
}

20
bin/webpack Executable file
View file

@ -0,0 +1,20 @@
#!/usr/bin/env ruby
# frozen_string_literal: true
ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require 'rubygems'
require 'bundler/setup'
require 'webpacker'
require 'webpacker/webpack_runner'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::WebpackRunner.run(ARGV)
end

20
bin/webpack-dev-server Executable file
View file

@ -0,0 +1,20 @@
#!/usr/bin/env ruby
# frozen_string_literal: true
ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV'] ||= 'development'
require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
Pathname.new(__FILE__).realpath)
require 'rubygems'
require 'bundler/setup'
require 'webpacker'
require 'webpacker/dev_server_runner'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::DevServerRunner.run(ARGV)
end

View file

@ -0,0 +1,5 @@
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

View file

@ -0,0 +1,3 @@
const { environment } = require('@rails/webpacker')
module.exports = environment

View file

@ -0,0 +1,5 @@
process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

5
config/webpack/test.js Normal file
View file

@ -0,0 +1,5 @@
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()

95
config/webpacker.yml Normal file
View file

@ -0,0 +1,95 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true

View file

@ -0,0 +1,16 @@
# frozen_string_literal: true
# This migration comes from action_text (originally 20180528164100)
class CreateActionTextTables < ActiveRecord::Migration[6.0]
def change
create_table :action_text_rich_texts do |t|
t.string :name, null: false
t.text :body, size: :long
t.references :record, null: false, polymorphic: true, index: false
t.timestamps
t.index %i[record_type record_id name], name: 'index_action_text_rich_texts_uniqueness', unique: true
end
end
end

View file

@ -12,7 +12,17 @@
# #
# It's strongly recommended that you check this file into your version control system. # It's strongly recommended that you check this file into your version control system.
ActiveRecord::Schema.define(version: 20_190_829_163_530) do ActiveRecord::Schema.define(version: 20_190_829_180_743) do
create_table 'action_text_rich_texts', force: :cascade do |t|
t.string 'name', null: false
t.text 'body'
t.string 'record_type', null: false
t.integer 'record_id', null: false
t.datetime 'created_at', precision: 6, null: false
t.datetime 'updated_at', precision: 6, null: false
t.index %w[record_type record_id name], name: 'index_action_text_rich_texts_uniqueness', unique: true
end
create_table 'active_storage_attachments', force: :cascade do |t| create_table 'active_storage_attachments', force: :cascade do |t|
t.string 'name', null: false t.string 'name', null: false
t.string 'record_type', null: false t.string 'record_type', null: false

75
doc/editor.md Normal file
View file

@ -0,0 +1,75 @@
# Editor de texto
Tenemos varias posibilidades para editores de texto:
# [Trix](https://trix-editor.org/)
Es el editor WYSIWYG integrado a Rails 6. Es simple, liviano, de
relativa fácil extensibilidad, se pueden subir archivos directamente,
pero:
* No soporta markdown, con lo que hay que convertir de HTML a MD
internamente
* Hay que agregarle botones para H2-H6 porque solo tiene H1
* No soporta tablas, aunque alguien lo logró hacer si hiciera falta.
(Podemos abrir un editor de ethercalc o simil quizas y tomar los datos
importándolos en HTML).
# [Codemirror](https://codemirror.net/)
Es un editor de texto con resaltado de sintaxis, pero:
* Como no es WYSIWYG, la gente se puede asustar. Solo serviría para
quienes se animan a (o quieren) escribir directamente con MD
* Habría que desarrollar una vista previa
* Habría que hacer una interfaz para vincular imágenes y otras cosas
# [ACE](https://ace.c9.io/)
Es un editor de texto como Codemirror aunque con más opciones y más
liviano (?), pero:
* Ídem codemirror
# [TUI-Editor](https://ui.toast.com/tui-editor/)
Es un editor WYSIWYG para Markdown, soporta tablas y un montón de
features, pero:
* Está hecho en jQuery
* El JS es gigante y es super complejo, con lo que no podríamos
extenderlo si hiciera falta
* No modifica un textarea con lo que no hay relación inmediata entre el
texto escrito y lo que se envía luego, puede haber bugs donde no
mandemos o no guardemos todo el texto.
* Tiene analytics incorporadas aunque se pueden deshabilitar
# Editor para Sutty
Por ahora vamos a ir con Trix ya que es el que más características
básicas tiene por la cantidad de esfuerzo que insume. Nos interesa dar
la posibilidad de una edición más hacker (!), así que quizás integremos
ACE o Codemirror más adelante.
# Arquitectura
Todos los campos de metadatos de tipo `content` se van a convertir en
editores Trix.
Trix envía HTML, que se convierte a Markdown con reverse_markdown. Al
cargar el texto para editar, hay que volver a convertirlo a HTML para
que Trix lo entienda. No tiene que haber incompatibilidades porque en
cada edición se van a degradar los textos sino.
# TODO
* Soportar ~tachado~ en reverse_markdown
* Soportar <figure>
* No escapar los bloques de cita al sanitizar
* Crear plugin que convierta imagenes remotas en locales
* Probar qué otros adjuntos soporta trix y limitarlos (?)
* Que los <br> de trix se conviertan en parrafos

View file

@ -2,11 +2,17 @@
"name": "sutty", "name": "sutty",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@rails/actiontext": "^6.0.0",
"@rails/webpacker": "^4.0.7",
"codemirror": "^5.48.2", "codemirror": "^5.48.2",
"commonmark": "^0.29.0", "commonmark": "^0.29.0",
"input-tag": "https://0xacab.org/sutty/input-tag.git", "input-tag": "https://0xacab.org/sutty/input-tag.git",
"table-dragger": "^1.0.2", "table-dragger": "^1.0.2",
"trix": "^1.0.0",
"tui-editor": "^1.4.5", "tui-editor": "^1.4.5",
"zepto": "^1.2.0" "zepto": "^1.2.0"
},
"devDependencies": {
"webpack-dev-server": "^3.8.0"
} }
} }

12
postcss.config.js Normal file
View file

@ -0,0 +1,12 @@
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}

View file

@ -0,0 +1,4 @@
# one:
# record: name_of_fixture (ClassOfFixture)
# name: content
# body: <p>In a <i>million</i> stars!</p>

7211
yarn.lock

File diff suppressed because it is too large Load diff