Licence CC BY-NC-ND

Intégrer ZMarkdown à Laravel avec Ansible

Le support MarkDown par défaut de Laravel étant assez limité et postant régulièrement ici, j'ai mis en place ZMarkdown sur mon blog.

Le support MarkDown par défaut de Laravel étant assez limité et postant régulièrement sur Zeste de Savoir, j’ai mis en place ZMarkdown sur les articles de mon blog pour intégrer plus de fonctionnalités. Tout ayant été automatisé via Ansible, la maintenance est très minime.

ZMarkdown regroupe plusieurs modules autour de remark pour transformer le MarkDown en différents formats. Je n’utilise ici que la sortie HTML, mais vous pouvez très bien l’utiliser pour générer des PDF, des epubs ou du LaTeX.

Installation

On commence donc par un peu de configuration pour Ansible :

group_vars/all :

zmarkdown_root_dir: /var/www/zmarkdown/
env: production

# Web user
web_user: www
web_user_group: www

On peut ainsi commencer à installer les dépendances :

install.yml :

---
- name: Install server requirements
  hosts: all
  become: yes

  roles:
    # (les autres rôles)
    - zmarkdown

roles/zmarkdown/handlers/main.yml :

---
- name: restart zmd
  service:
    name: zmd
    enabled: true
    state: restarted

roles/zmarkdown/tasks/main.yml :

---
- name: Make sure Node.js is installed
  apt:
    update_cache: yes
    name:
      - nodejs

- name: Install "zMarkdown" package
  npm:
    name: zmarkdown
    production: true
    path: "{{ zmarkdown_root_dir }}"

- name: Change ownership of zMarkdown installation
  file:
    path: "{{ zmarkdown_root_dir }}"
    owner: "{{ web_user }}"
    group: "{{ web_user_group }}"
    state: directory
    recurse: yes

- name: Create service file
  template:
    src: zmd.service.j2
    dest: "/etc/systemd/system/zmd.service"
    mode: u=rw,g=r,o=r
  notify: restart zmd

- name: Ensure that zMarkdown is running
  uri:
    url: http://localhost:27272/
    return_content: true
  register: this
  delay: 1
  retries: 10
  until: "'zmd is running' in this.content"

roles/zmarkdown/templates/zmd.service.j2 :

# [PM2] Spawning PM2 daemon with pm2_home=/home/zds/.pm2
[Unit]
Description=zmd server
Documentation=https://pm2.keymetrics.io/
After=network.target

[Service]
Type=forking
User={{ web_user }}
LimitNOFILE=infinity
LimitNPROC=infinity
LimitCORE=infinity
Environment=PATH=/usr/bin:/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin
Environment=PM2_HOME={{ zmarkdown_root_dir }}/.pm2
Environment=ZDS_ENVIRONMENT={{ env }}
PIDFile={{ zmarkdown_root_dir }}/.pm2/pm2.pid

ExecStart={{ zmarkdown_root_dir }}/node_modules/pm2/bin/pm2 start -f {{ zmarkdown_root_dir }}/node_modules/zmarkdown/server/index.js -i 3 --max-memory-restart 150M
ExecReload={{ zmarkdown_root_dir }}/node_modules/pm2/bin/pm2 reload all
ExecStop={{ zmarkdown_root_dir }}/node_modules/pm2/bin/pm2 kill

[Install]
WantedBy=multi-user.target

Un petit coup de make server-install pour tout installer via Ansible et le service tourne !

J’utilise ici le package npm zmarkdown qui inclut tout ce qu’il faut pour faire tourner un serveur HTTP local facile à interfacer avec n’importe quel autre langage.

Utilisation

Maintenant il faut utiliser tout ça dans Laravel.

On commence avec un peu de config (config/zmd.php) :

<?php
return [
    'url' => env('ZMARKDOWN_URL', 'http://localhost:27272'),
    'html' => env('ZMARKDOWN_URL_HTML', 'http://localhost:27272/html'),
];

Et dans le modèle on enregistre automatiquement le HTML généré dès que le MarkDown change (app/Models/BlogPost.php) :

<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Http;

class BlogPost extends Model
{
    // …

    public function setContentAttribute($value)
    {
        $this->attributes['content'] = $value;
        $this->attributes['content_html'] = Http::post(config('zmarkdown.html'), [
            'md' => $value,
            'opts' => [
                'heading_shift' => 0,
                'disable_ping' => true,
                'disable_jsfiddle' => false,
                'stats' => false,
            ]
        ])->json()[0];
    }
    
    // …
}

Affichage

À l’affichage rien de plus simple :

<div class="post-content">
    <div>
        {!! $post->content_html !!}
    </div>
</div>
Attention

Cette méthode n’échappe pas le HTML généré avant affichage, c’est à vous de vous assurer que le parseur ne laisse pas passer de code malicieux !
C’est d’ailleurs en partie pour cette raison que je n’utilise ZMarkdown que pour des contenus que je maîtrise sur mon site.


Retrouvez l'article original sur mon blog

Aucun commentaire

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte