E-JAMBON bio photo

E-JAMBON

Ce qui se conçoit bien s'exprime clairement.

Email Twitter Github

Jekyll, c’est le moteur que j’utilise pour mon blog. Pour faire des newsletter, j’ai trouvé plusieurs services. Je n’en ai trouvé aucun convaincant.

Du coup, je me suis dit que j’allais faire ça directement dans mon blog. Le seul truc qui m’a botté, c’était l’idée que ce soit bien présenté.

Je n’ai pas trouvé de plugin Jekyll pour le faire. Alors je me remonte les manches.

Note :Jekyll est fait en ruby. Si vous ne connaissez pas, ça devrait rester facile à comprendre, mais je ne vais pas détailler ruby. Il y a des [tutos]!(http://links.e-jambon.com/?searchtags=tutoriels+ruby) bien faits pour apprendre ruby.

Alors pour ceux qui ne connaissent pas Jekyll, je détaille ma démarche.

Spécifications

Pour mon premier “plugin” je voudrais un tag “embarque” qui prenne en paramètre : * une url * Mon titre * Eventuellement un commentaire sous la forme :

    embarque "url" "Mon titre" "Mon commentaire" 

Et qui crée un encart ‘cliquable’ comme celui-ci :

Mon titre

Mon commentaire, si je désire en mettre un.

Titre de l'article

Le résumé de l'article / de la page extrait depuis le lien.

Source : E-JAMBON.COM

J’ai créé une feuille de style et un modèle basique, pour les besoin de la spécification.

– template –

    <div  class="sheet">
      <a  href="http://ici.e-jambon.com/jekyll/creation-du-plugin-news-letter/"></a>
      <h1  class="sheet_title">Mon titre</h1>
      <p  class="sheet_description"> Mon commentaire, si je désire en mettre un.</p>
      <div  class="sheet_embed"> <img  src="/images/creation_plugin_newsletter/template_image.jpg"  class="image_embeded">
        <h2  class="title_embeded">Titre de l'article</h2>
        <p  class="excerpt_embeded"> Le résumé de l'article / de la page extrait depuis le lien.</p>
        <p  class="domain_name_embeded">Source : E-JAMBON.COM</p>
      </div>
    </div>

– Feuille de style vite fait –

    div.sheet {
        position:relative;
        margin: 5px;
        padding: 5px;
        border-style: solid;
        border-width: 2px;
        background-color: #F8FCF3;
        border-radius: 8px;
        box-shadow: 0px 0px 6px #555;
        font-family: Helvetica;
    }
    div.sheet a{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        text-decoration:none; /* Makes sure the link   doesn't get underlined */
        z-index:10; /* raises anchor tag above everything else in div */
        background-color:white; /*workaround to make clickable in IE */
        opacity: 0; /*workaround to make clickable in IE */
        filter: alpha(opacity=1); /*workaround to make clickable in IE */
    }
    .sheet_title {
        font-family: Helvetica ;
        font-size: 25px;
        font-weight: bolder;
        text-shadow: 0px 0px 6px #777 ;
        color: #000;
    }
    .sheet_description {
        font-family: Helvetica;
        font-size:15px;
        font-weight: normal;
        padding-left: 5px;

    }
    .sheet_embed {
        font-family: Helvetica;
        margin: 0px;
        background-color: RGBA(185, 218, 200, 0.55);
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
    }
    .image_embeded {
        border:1px;
        border-style:solid;
        margin:5px;
        width:200px;
        height:150px;
        float: left;
    }
    .sheet_embeded_link{
        font-family: Helvetica;
        display: block;
        height: 100%;
        width: 100%;
        text-decoration: none;
    }
    .title_embeded{
        font-family: Helvetica;
        margin-left: 5px;
        padding-left:5px;
    }
    .domain_name_embeded {
        margin:0px;
        padding:0px;
        text-align:right;
        font-family: Helvetica;
    }

Créer le plugin

C’est simple, direction le répertoire _plugins. Il s’agit de créer un fichier “embarque.rb” qui contiendra la classe EmbarqueTag, dérivée de Liquid::Tag. Voilà à quoi ça ressemble :

module Jekyll
  class EmbarqueTag < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @text = text
    end

    def render(context)
        "<p> @text vaut : #{@text} </p>"
    end
  end
end

Liquid::Template.register_tag('embarque', Jekyll::EmbarqueTag)

La dernière ligne consiste à enregistrer le tag et lui associer la classe que l’on vient de créer.

Et voici ce que j’obtiens quand j’utilise le ‘LiquidTag’ embarque que j’ai déclaré dans mon code comme ceci :

embarque "mon_url" "Mon titre" "Mon commentaire" 

Résultat :

    <p> @text vaut : "http://ici.e-jambon.com" "Mon titre" "Mon commentaire"</p>

Maintenant que le concept est validé, il faut récupérer les données. Je vous invite à regarder la fonction scan de la classe String

Notez : Si vous utilisez le serveur de Jekyll, il faut relancer le serveur jekyll pour qu’il prenne en compte les modifications de votre plugin.

Mise en oeuvre du tag. Utilisons le template.

Première étape : installer le css

Je vais proposer, pour l’instant, d’utiliser la méthode css spécifique à un post que j’ai déjà implémentée sur mon blog, histoire de pouvoir continuer comme si le css susmentionné était déjà accessible par le blog.Vous pouvez aussi l’intégrer directement dans votre template de base.

Deuxième étape : récupérer les données manquantes.

  1. Le titre de l’article / le nom du site / l’auteur etc…
  2. On verra avec plus de clarté ce qu’on arrive à récupérer sur un site.
  3. On fera quelques tests.
  4. L’image

Pour récupérer l’image, il va falloir aller lire la cible du lien, et récupérer des données directement sur la page. Pour ce faire, ruby dispose de quelques librairies (gem) bien pratiques. La première que je vais utiliser [MetaInspector]!(https://github.com/jaimeiniesta/metainspector) qui permet de récupérer les “méta informations” d’un site web. Lisez la doc, c’est très simple à utiliser.

Dans mon Gemfile (si vous n’en avez pas un, je vous conseille d’en utiliser un, ça rend quand même les choses plus simple, mais ce n’est pas l’objet de ce post) j’ajoute donc la ligne : gem ‘metainspector’ puis je lance un bundle update Sinon, vous pouvez l’installer manuellement : gem install metainspector

Voici ma classe, cette fois ci je mets tout dedans :

    def initialize(tag_name, params, tokens)
      super
      array_params = params.scan( /"([^"]*)"/ )
      @url = array_params[0][0];
      @title = array_params[1][0];
      @comment = array_params[2][0]; 
      @page = MetaInspector.new(@url)
    end

    def render(context)
        "<div  class='sheet'>
            <a  href='#{@url}'></a>
            <h1  class='sheet_title'>#{@title}</h1>
            <p  class='sheet_description'> #{@comment}</p>
            <div  class='sheet_embed'> <img  src='#{@page.images.best}'  class='image_embeded'>
                <h2  class='title_embeded'>#{@page.best_title}</h2>
                <p  class='excerpt_embeded'> #{@page.description}</p>
                <p  class='domain_name_embeded'>Source : #{@page.host}</p>
            </div>
        </div>"
    end

TESTONS, pour voir le résultat

copie d'écran du rendu

On remarque que le test fonctionne, MAIS :

  1. C’est moche, il faut faire un css plus joli.
  2. A chaque fois qu’on génère le site, ça va retrouver toutes les infos. Donc c’est super long. Il faut récupérer et faire un tampon.
  3. Il y a encore beaucoup à faire. (dans un prochain post…)

EDIT : J’ai mis ça dans mon github (jekyll_test).