Git Product home page Git Product logo

mosaico's Introduction

Mosaico - Responsive Email Template Editor

Mosaico is a JavaScript library (or maybe a single page application) supporting the editing of email templates. The great thing is that Mosaico itself does not define what you can edit or what styles you can change: this is defined by the template. This makes Mosaico very flexible.

Mosaico Screenshot

At this time we provide a single template to illustrate some best practice examples: more templates will come soon! Please get in touch with us if you want to make your email html template "Mosaico ready".

Live demo

On https://mosaico.io you can see a live demo of Mosaico: the live deploy has a custom backend (you don't see it) and some customization (custom Moxiemanager integration, customized onboarding slideshow, contextual menu, and some other small bits), but 95% of what you see is provided by this library. You will also see a second working template there: we are still working to open source it. Stay tuned!

News

Subscribe to our newsletter to get updates: http://mosaico.voxmail.it/user/register

More Docs from the Wiki

Mosaico Basics

Developer Notes

Build/Run Build Status

You need NodeJS v6.0 or higher + ImageMagick

this may raise warnings about Knockout, ignore them. It will probably fail on some colorpicker dependency, just run it again and will work:

  npm install

if you don't have it, install grunt-cli globally

  npm install -g grunt-cli

compile and run a local webserver (http://127.0.0.1:9006) with incremental build and livereload

  grunt

IMPORTANT in order to use image uploading/processing feature in Node you need imageMagick installed in your environment. e.g. running "convert" and "identify" on the command line should output imageMagick command line help (if you are on Windows and install imageMagick 7.x then make sure to install "legacy utilities").

If you create your own template you can generate the needed "thumbnails"/"block thumbnails" by running:

grunt makeThumbs:main:yourtemplatename

NOTE we have reports that default Ubuntu node package have issues with building Mosaico via Grunt. If you see a Fatal error: watch ENOSPC then have a look at voidlabs#82

Docker

We bundle a small Dockerfile based on centos7 to test mosaico with no need to install dependencies.

docker build -t mosaico/mosaico .
docker run -p 9006:9006 mosaico/mosaico

then open a browser to point to the port 9006 of your docker machine IP.

Serving via Apache PHP or Django?

First you have to build it using grunt, then you can read (https://github.com/voidlabs/mosaico/wiki/Serving-Mosaico).

Access Interpreting wrote a sample PHP backend so you can start from there if you want to use Mosaico with an Apache/PHP backend.

Ryan Nowakowski wrote a Python/Django backend and also wrote a test-suite in Python to help testing Mosaico backends

Are you having issues with Mosaico?

See the CONTRIBUTING file

Contact Us

Please contact us if you have ideas, suggestions or, even better, you want to collaborate on this project or you need COMMERCIAL support: [email protected] . Please DON'T write to this email to get free support: use Git issues for that.

mosaico's People

Contributors

hiswe avatar bago avatar bwl21 avatar morloi avatar abernier avatar danskii avatar psyafter avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar Grégory Van Gilsen avatar

mosaico's Issues

EDITOR – add the possibility to preview in a browser

Actuellement si on veut vérifier le mailing il n'y que la possibilité de se l'envoyer par mail, ou de télécharger le fichier html.

Si on veut pouvoir sauvegarder toutes les images associées à une création on est obligé de :

  • télécharger le fichier HTML
  • l'ouvrir dans un navigateur
  • faire fichier -> enregistrer sous
  • et ainsi accéder à la liste complète des images

Il pourrait être utile de :

  • faire une pré-visualisation dans le navigateur
  • faire fichier -> enregistrer sous
  • et ainsi accéder à la liste complète des images

HEROKU – monitoring

En vue de maîtrisé les coûts, il serait intéressant de pouvoir surveiller l'application afin de pouvoir optimiser les besoins de ressources de cette dernière

Force redirect to https

  • forcer le https si option serveur activée
  • corriger les urls d'images de mosaico en edres
  • test dev
  • test stage

pour tester

Toute url en http devrait être redirigée en https

par exemple :

description du problème

Quand le site est en https, l'éditeur ne fonctionne plus et/ou mal

Failed to load resource: net::ERR_INSECURE_RESPONSE

screen shot 2016-08-02 at 15 16 14 1

Unable to use ESP tags

In the generated HTML, special characters are encoded, it is a problem for some of them when we need to use ESP tags.

By example "Hello <% FIRSTNAME %>" is transformed into "Hello &lt; FIRSTNAME &gt;" when exported.


  • Create a simple test case
  • Make an automated test
  • Deploy test server
  • Test Badsender
  • Deploy prod
  • Test Badsender prod

Image src

Hello,

Another problem linked to the ESP issue is the way the images are called. They are not directly called in the src code, instead they are called via parameters, and Adobe Neolane can't download the images in its system.

A workaround would be to be able to download a zip with the HTML and all the images and with the path to images in a relative path (like images/my_image.jpg)

Email name edition

Hello,

We would like to be able to edit the email name not only in the home page but also on the email creation page


  • Show actual creation name in the editor
  • On double click, convert to input
  • On ok (button)
    • save to DB
    • revert to plain text
  • On cancel (button)
    • revert to previous name
    • revert to plain text
  • deploy on dev
  • badsender validation
  • deploy on prod
  • test prod badsender

COMPANY – migration

Pour résoudre les tickets #18 et #20

  • Étapes de dev :
    • Interface de création des sociétés
    • Interface de migration d'un utilisateur
    • Modification home utilisateur : un utilisateur voit tout les templates et les créations de sa société (lié à #19)
    • Script de copie DB prod -> DB dev
    • Script de copies DB stage -> DB prod (#44)
    • Script de backup de DB prod
    • Création des pages de maintenance/erreur (#26)
    • Corrections retours Grégory
  • déploiement dev :
    • Test avec Badsender d'une migration à partir de la DB de dev
  • déploiement stage :
    • Test avec Badsender d'une migration à partir d'un copie DB de la prod
    • Mode maintenance de l'application prod (lié à #26)
    • Modification depuis le stage d'une copie de la DB prod
    • Déploiement de la DB modifiée sur la prod
    • Déploiement code en production
    • Enlever le mode maintenance

USER – add a “deactivate mode”

Un utilisateur ne doit plus être suprimable, mais désactivable.

En effet, s'il est supprimé les infos de compte seront perdu et les templates qu'il aura crée n'auront plus accès à son nom

  • comportement
    • user désactivable depuis l'admin
    • créations préservées
    • impossible de se connecter sur un user désactivé
  • test dev
  • test prod

Import mailing adobe campaign

Adobe campaign should be able to download all the assets from a generated mailing

  • test sushishop
  • correction de l'issue #32
  • test Sushishop depuis le dev
  • test avec le client d'un zip avec les caractères spéciaux encodés
  • réponse consultant logs d'erreurs
  • test shushishop depuis la prod suite au déploiement de #32 (meilleur temps de réponse ?)

HEROKU – custom maintenance/error page

Les pages devraient

  • être aux couleurs de badsender
  • pouvoir fournir des informations utiles aux utilisateurs.
    Par exemple, un email ou téléphone de contact

  • Création de la page d'erreur
  • Création de la page de maintenance
  • Validation des templates par BS
  • Déploiement sur un S3
  • Configuration des instances :
    • dev
    • stage
    • production

EDITOR – missing translations

À partir du template “tutorial badsender”

En console.warn

app.js:101 Missing translation string for Fake image editor : using default string
app.js:101 Missing translation string for <p>Fake image editor</p> : using default string
app.js:101 Missing translation string for Creation has been saved : using default string

En console.log

editor.js:181 TODO WARN Missing label for object  template
editor.js:181 TODO WARN Missing label for object  HeaderAndText
editor.js:181 TODO WARN Missing label for object  HeaderAndText
editor.js:204 TODO missing label for theme section  undefined HeaderAndText
editor.js:181 TODO WARN Missing label for object  buttonBlock
editor.js:181 TODO WARN Missing label for object  buttonBlock
editor.js:204 TODO missing label for theme section  undefined buttonBlock
editor.js:178 TODO WARN Missing label for property  backgroundColor
editor.js:181 TODO WARN Missing label for object  fixedlist
editor.js:178 TODO WARN Missing label for property  listsize
editor.js:181 TODO WARN Missing label for object  fixedlist
editor.js:204 TODO missing label for theme section  undefined fixedlist
editor.js:178 TODO WARN Missing label for property  color
editor.js:181 TODO WARN Missing label for object  theme
editor.js:178 TODO WARN Missing label for property  bodyTheme
editor.js:178 TODO WARN Missing label for property  backgroundColor
editor.js:178 TODO WARN Missing label for property  color

Nom email téléchargés

  • nom email
  • ajout de la date

Les email téléchargés devraient avoir pour nom le titre de la création + la date génération

Add multi-level users in the backend

Currently, a set of Master Templates and created email is linked to a single user. It is not possible to share Master template or created emails between users.

We would like to be able to create User groups (who are going to be companies). Inside these user groups, the users need to be able to share the master templates and see/edit/duplicate the created emails of each others.

Thanks

comptes sociétés v2 – multiuser

La fonctionnalité attendue est la suivante:
1 compte société au sein duquel existent des comptes utilisateurs.

  • Les templates de la société sont commun à tous les utilisateurs de la société
  • Le super-admin peut créer des utilisateurs pour chaque société
  • Pas de password-less connection
  • Les créations sont communes à tous les utilisateurs de la société

Remarques de @Hiswe

  • enlever la possibilité pour une société de se connecter
  • Un compte société est directement activé
  • Quid de création existante ?

--> À voir au cas par cas. Il faudra probablement fusionner certains comptes.

COMPANY – clean migration code

Suite au #45, il faudra procéder à la suppression du code de migration, ainsi que du code utilisé uniquement dans l'ancien type d'organisation

  • nettoyage du code
  • test dev
  • test stage

Home page d'un compte société

La home page d'un compte société ne peut être accessible que par un super admin.

Sur cette page:

  • Voir la liste des membres de la société
  • Pouvoir en ajouter/éditer un utilisateur laisser langue par utilisateur
  • Voir la liste des création de la société et possibilité de les éditer ou d'en créer

Ajout d'un environnement de pre-prod

Ajout d'un environnement de pre-prod afin de pouvoir tester les nouvelles fonctionnalités dans un environnement qui utilise déjà les tables de production.


  • Création du stage
  • Création du script de déploiement du stage
  • Test badsender (vérification que le stage est identique à la prod)

FRONT – Ajout de block d'images cassés

  • fix problem
  • deploy test
  • test badsender
badsender-lib-core.js:10424 Uncaught ReferenceError: Unable to process binding "block: function (){return $data }"
Message: Unable to process binding "template: function (){return (typeof templateMode !='undefined'&& templateMode =='wysiwyg') || image().url() ?'anonymous-89019':'anonymous-14926' }"
Message: Unable to process binding "template: function (){return 'anonymous-14926' }"
Message: Unable to process binding "wysiwygImg: function (){return { _data:$data,_item:image,_template:'anonymous-73956',_editTemplate:'img-wysiw…rc,_width:imageWidth(),_height:null,_align:undefined,_size:'w'+imageWidth() +'',_method:undefined,_placeholdersrc:{ width:imageWidth(),height:150,text:'w'+imageWidth() +''},_stylebind:{ width:imageWidth()}} }"
Message: Unable to process binding "template: function (){return _template }"
Message: Unable to process binding "wysiwygSrc: function (){return { width:imageWidth(),height:null,src:image().src,placeholder:{ width:imageWidth(),height:150,text:'w'+imageWidth() +''}} }"
Message: options is not defined

IMAGES – refactor url

  • Modifications à effectuer
    • modification du routing des images serveur & mosaico
    • cohabitation avec l'ancien code (1 mois)
    • renommage des images
  • test Badsender Dev
  • test Badsender Stage
  • test Badsender Prod
  • déploiement en production coordonné avec Badsender (réupload des images de preview edres)

Ce qui est attendu

http://builder.badsender.com/img/?method=resize&params=440%2Cnull&src=%2Fimg%2F57767da32f037e03000a7bd7-video.jpg

devrait être :

http://builder.badsender.com/img/resize/440xnull/2F57767da32f037e03000a7bd7-video.jpg

ainsi que renommer (url friendly) les images uploadées

Bien faire attention au path des images une fois le mailing téléchargé

Problème actuel relevé

Exemple d'url qui ne fonctionne pas (voir #29 (comment)) :

http://builder.badsender.com/img/?method=resize&params=440%252Cnull&src=%252Fimg%252F57767da32f037e03000a7bd7-tyrsa.jpg

Il semble que l'url est encodée 2 fois :

var url = 'http://builder.badsender.com/img/?method=resize&params=440%252Cnull&src=%252Fimg%252F57767da32f037e03000a7bd7-tyrsa.jpg';
var decodedUrl = decodeURIComponent(url);

http://builder.badsender.com/img/?method=resize&params=440%2Cnull&src=%2Fimg%2F57767da32f037e03000a7bd7-tyrsa.jpg

var redecodedUrl = decodeURIComponent(decodedUrl);

http://builder.badsender.com/img/?method=resize&params=440,null&src=/img/57767da32f037e03000a7bd7-tyrsa.jpg

Amélioration listing email

Sur la page de listing des emails:

  • pagination
  • tri
  • Sortir le listing des créations dans une page propre (home)
  • Créer une page de nouvelle création à partir d'un wireframe
  • filtres (nom, date de création rechercher)

  • maquettes
  • suppression du bloc “en savoir plus”
  • enlever les liens de filtre sur le tableau
  • ajouter une croix de suppression des filtres quand filtre actif et fermé
  • pagination en 10, 25 et 50
  • ajout des fonctionnalités :
    • tri (nom, utilisateur, wireframe, dates)
    • filtres (nom contient, dates de création/update, utilisateurs, wireframes)
  • déplacement du logo badsender (en vecto dans le header)
  • test dev
  • test stage

WYSIWYG text bar typo en px et non en pt

Lors du choix de la taille de typo, l'unité doit être en px et non en pt


  • change to 8px 10px 12px 14px 18px 24px 36px
  • deploy dev
  • deploy prod
  • test prod badsender

Update WYSIWYG text bar

Hello,

We would like to update the toolbar that appear when we edit a text:

  1. We would like to remove the "Headings" and "Blocks" options in the format option:
    image

  2. We would like to be able to choose more color from the color picker (either on the text color or background text color). Ideally, with to possibilities for the user to either use a more evovlved color picker and a possibility to enter the hexadecimal value for a color.
    So instead of this,
    image
    Having something like this:
    image

  3. We would like to have the possibility to change the font size in the toolbar.


  • remove the "Headings" and "Blocks" options in the format option
  • choose more color from the color picker (either on the text color or background text color).
  • change the font size
  • Mettre sur le dev
  • Test Badsender
  • Deploy prod || voir aussi #15 (changement taille pt en px)
  • test prod badsender

Problème image GIF

Hello,

Lors de l'utilisation d'une image qui est un GIF animé, le builder semble complètement perdre les pédales, ce qui rend l'import de GIF animé impossible.

Le test peut-être fait avec le GIF animé ci-joint:
gif_anime_emialing_recette_quinoa
Le problème se pose dans tous les templates, même ceux de Mosaico.


  • test 2 gifs
  • correction du problème
  • deploy test
  • test badsender
  • deploy prod
  • test prod badsender

WYSIWYG text bar bug

Sometimes the text bar stays on the screen even when we click somewhere else and scroll elsewhere.

Issue can sometimes be reproduced by

  1. click in an editable text
  2. click on another block (but not an element in a block)

This issue can be marked as low prio


  • Find a way to always reproduce
  • patch
  • deploy dev
  • test badsender dev
  • deploy prod
  • test badsender prod

Problème d'overlay dans le picker couleur

  • test dev
  • test stage

Hello,

Il semble y avoir un problème d'Overlay dans le picker de couleur du menu de droite sur le builder:
image

Il semblerait qu'ajouter un attribut z-index:1000 à la classe CSS .mo .evo-pop résolve le problème.

IMAGES – cache resized images

Logs sans et avec resize :

  • connect=0ms service=347ms
  • connect=0ms service=2219ms
2016-08-30T10:02:01.321301+00:00 heroku[router]: at=info method=GET path="/img/57c5509994f5380a00b3c439-gif_anime_lunchbox_juillet_espagne.gif" host=badsender-stage.herokuapp.com request_id=1ad69608-12fc-4dc4-83cf-a9d6cd28c935 fwd="180.183.159.173" dyno=web.1 connect=0ms service=347ms status=200 bytes=430117
2016-08-30T10:02:21.437061+00:00 heroku[router]: at=info method=GET path="/resize/600xnull/57c5509994f5380a00b3c439-gif_anime_lunchbox_juillet_espagne.gif" host=badsender-stage.herokuapp.com request_id=b62dd7e3-da98-43d0-8c86-163cdfe249f8 fwd="180.183.159.173" dyno=web.1 connect=0ms service=2219ms status=200 bytes=994257

–––

edit 2 septembre

Message d'alerte envoyé par Heroku suite au redimensionnement d'un GIF. 11 secondes…

2016-09-01 10:16:51.245
370 <158>1 2016-09-01T10:16:50.807493+00:00 heroku router - - at=info method=GET path="/resize/600xnull/57c7ffd91c4b3e0a005b0784-gif_anime_lunchbox_juillet_espagne.gif" host=badsender-stage.herokuapp.com request_id=230dfc04-d679-43fa-b360-b3ad70d600a8 fwd="109.128.77.12" dyno=web.1 connect=1ms service=11740ms status=200 bytes=994800

edit 23 septembre

  • ne pas resizer un gif s'il est déjà à la bonne taille #76
  • test dev
  • test stage
  • controle :
    • cache côté client

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.