Skip to content

website
website

Home

Last edited by Matthieu Boileau
Page history

Table des matières

Modération des offres d'emplois

Lorsqu'une personne soumet une offre d'emploi sur le site, une merge request contenant le contenu de l'offre est créée sur le dépôt gitlab website. Afin de la mettre en ligne il faut la modérer.

Pour être en charge de la modération, il faut :

  1. Avoir les notifications activées pour le merge request. Ainsi, le modérateur reçoit un mail lorsqu'une personne a soumis une offre.
  2. Avoir les droits de modération sur la liste de diffusion

Quand les personnes en charge de la modération reçoivent le mail qu'une nouvelle merge request est présente, il s'agit de :

  1. Vérifier que l'offre est pertinente pour la liste
  2. Accepter la merge request. Un mail est alors automatiquement envoyé à l'auteur de l'offre comme quoi elle est acceptée. Un deuxième mail est envoyé sur la liste lorsque l'offre est en ligne sur le site.
  3. Valider le mail pour la liste sur l'interface SYMPA.

La communauté a pris l'habitude d'envoyer les offres d'emploi directement à la liste. Il s'agit à présent de refuser ces mails en utilisant l'option "rejeter avec notification" et en sélectionnant le message par défaut. Il recevra un mail comme celui-ci, l'invitant à soumettre son offre en passant par le site.

Votre message posté à la liste calcul@listes.math.cnrs.fr a été rejeté par le modérateur 
(<mail du modérateur>) car il concerne une offre d'emploi. Nous vous invitons à soumettre 
votre offre sur notre site web ici :
https://calcul.math.cnrs.fr/job_offers/add_job_offer

Un mail sera automatiquement envoyé à la liste et votre offre aura une
meilleure visibilité sur notre site.

En vous remerciant pour votre compréhension.


(L'objet de votre message : <objet du mail de la personne>)

Avant de rédiger

Installation et utilisation de Pelican

Suivre les instructions du README.

Comment ça marche ?

Processus de conversion .rst vers .html

Lors de la génération, Pelican va :

  • parcourir chaque fichier source .rst de l'arborescence du répertoire content/ pour générer le fichier .html correspondant dans le répertoire output/ (si la métadonnée :slug: nom_du_fichier du fichier .rst existe, le fichier s'appelera nom_du_fichier.html)
  • appliquer à chaque fichier .rst un des templates de page html du thème calcul hébergés dans themes/calcul/templates/
  • charger via les fichiers template les feuilles de style et fonts stockées dans themes/calcul/static/css.

Système de templates de pages html (themes/calcul/templates/)

  • basés sur la syntaxe Jinja2
  • tous les templates héritent du template base.html et sont déclinés par type de page (article.html, category.html, etc.).

Plugins

TODO

Créer une branche de développement personnelle

Il faut créer une branche à partir de develop. Remplacer bien sûr "nom" par votre nom...

git checkout develop
git checkout -b dev-nom

Répertoire

Tout le contenu du site se trouve dans le répertoire content.

Lors de la création d'un nouvel article, il faut le mettre dans le bon répertoire selon s'il est organisé par le réseau ou le GdR :

  • événements réseau dans le répertoire content/evt_tech
  • événements GdR dans le répertoire content/evt_sci

Pour une page statique, il faut la placer dans un sous-répertoire de content en fonction de son type :

  • paysage du calcul dans content/paysage,
  • le groupe dans content/groupe.

Nom du fichier

Il faut principalement penser à rajouter l'année dans le nom du fichier d'un événement récurrent afin d'en faciliter l'organisation.

L'extension est .rst pour un fichier à la syntaxe rst.

Fichiers attachés

Avant de rajouter un fichier attaché, il faut vérifier que git-lfs est installé.

Tous les fichiers sont placés dans un sous-dossier de content/attachments. Le sous-dossier content/attachments/spip contient les fichiers importés depuis l'ancien site web sous SPIP.

Pour les fichiers liés à un événement, il est conseillé de les placer dans un sous-dossier composé de type (evt_tech ou evt_sci) et du slug de l'article, par exemple content/attachments/evt_sci/journee-da-2019 (ça vous convient @all ?).

Voir ici pour créer un lien vers un fichier attaché.

Les types de pages

Nouvel événement

@all : on est d'accord pour choisir cet article comme ref ? (@boileau: OK pour moi)

L'événement ANGD Python 2010 est un bon exemple dont on peut s'inspirer. Il contient la plupart des éléments de syntaxe nécessaires à rédiger un article et correspond à la forme des articles qu'on publie à présent. Le fichier source se trouve dans website/content/evt_tech/angd_python_2010.rst.

Les choses à faire :

Événement importé de Spip

Le point de départ est un fichier qui a été converti automatiquement depuis le site spip en rst avec spip2pelican. Dans cet exemple : website/content_not_clean_yet/evt_tech/spip_article-263.rst

  1. Déplacer et renommer l'article du répertoire content_not_clean_yet/ au répertoire content/
    • Changer evt_tech en evt_sci si cet événement est plutôt rattaché au GdR.
    • Faire tout ça en en informant git. Exemple depuis le répertoire website :
git mv content_not_clean_yet/evt_tech/spip_article-263.rst content/evt_tech/journee_meso_2015.rst
  1. Retoucher l'article : introduire le programme en utilisant les directives spécifiques car l'événement indico n'existent pas, il faut faire le programme à la main en référençant correctement les intervenants, supports et abstracts, etc.

Se référer aux instructions de rédaction pour un nouvel événement.

Page statique

TODO

Rédiger une page

Structure générale

Un article est composée de deux parties :

Ces deux parties doivent être séparées par une ligne blanche.

Métadonnées

Les métadonnées sont spécifiées en tout début de fichier, et séparées du contenu par une ligne blanche.

Une ligne de métadonnée commence par son nom entouré de :, suivi d'une espace puis de sa valeur. Par exemple :

J'ai gagné au loto
##################

:date: 2019-04-01
:slug: la-bonne-blague

J'ai une annonce à vous faire, blabla, on s'en fout

Les sous-sections suivantes décrivent les principales métadonnées.

title

Le titre est indiqué en début fichier, souligné par des caractères # :

J'ai gagné au loto
##################

Il faut bien faire attention a entièrement souligner le titre (pas plus, pas moins).

La syntaxe utilisant la métadonnée :

:title: J'ai gagné au loto

est aussi acceptée mais elle provoque le warning suivant dont la cause est expliquée dans cette issue :

WARNING: Document title missing in file [...]/content/blague.rst: Ensure exactly one top level section

Pensez bien au fait que ce titre peut être affiché sur plusieurs lignes dans l'en-tête de la page ce qui peut amener à des coupures gênantes : par exemple, un article avec un retour à la ligne après un. Pour l'éviter, remplacer certains espaces par des espaces insécables en utilisant la directive |_| (avec les espaces englobants), par exemple un |_| article sur le |_| calcul scientifique. N'en mettez pas trop non plus (idéalement seulement entre un article et son nom) ce qui empêcherait le titre de s'adapter à la largeur de l'affichage et, dans tous les cas, vérifiez l'affichage du titre dans l'en-tête et dans les vignettes (la liste des événements) et ce pour plusieurs tailles d'écran (outils de développement du navigateur).

date

La date de création de la page (et non de l'événement), au format YYYY-MM-DD.

slug

C'est l'identifiant unique de la page qui servira comme base pour le nom du fichier html généré.

Par défaut, il est généré automatiquement à partir du titre de la page mais il est fortement conseillé de le spécifier manuellement. Idéalement, il ne devrait contenir que des lettres minuscules, non accentuées et où les espaces et les ponctuations ont été remplacées par un tiret d'union - (en évitant les tirets consécutifs).

On peut également penser à rajouter l'année de l'événement dans le slug afin d'éviter les collisions pour événements récurrents (même problématique que pour le nom de fichier).

category

Cette métadonnée est uniquement utile pour les événements. Il peut prendre une des deux valeurs :

  • journee pour les journées,
  • formation pour les formations.

Cette information est utilisée lors de la construction du site pour référencer l'article, soit dans la page Nos journées, soit dans la page Nos Formations.

start_date

La date de début de l'événement, au format YYYY-MM-DD.

end_date

La date de fin de l'événement, au format YYYY-MM-DD.

place

La ville où a lieu l'événement.

attendees

Le nombre de participants attendus ou observés à l'événement. Ce champ est optionnel.

tags

Un ou plusieurs tags, séparés par des virgules, permettant de filtrer les événements ou pages. Par exemple :

:tags: benchmarks, python

Dans l'optique d'utiliser ces tags pour faire un "nuage de tags" ou autre, il est préférable d'utiliser des tags compréhensibles, c'est-à-dire en français avec des espaces et des accents.

À noter qu'il n'est pas nécessaire de spécifier l'appartenance d'un événement aux activités du GDR ou du réseau métier, ce tag étant automatiquement rajouté en fonction du dossier de stockage (evt_sci ou evt_tech).

template

Permet de spécifier quel template Jinja2 utiliser pour le rendu HTML.

Cette métadonnée est inutile pour les événements (le template associé aux articles est automatiquement utilisé) mais est nécessaire pour les pages statiques (TODO).

summary

Permet de spécifier un résumé. Par exemple, pour un événement, ce sera le texte qui sera affiché sous son titre si il est mis en avant sur la page d'accueil.

Syntaxe RST

Voici une référence pour la syntaxe RST ou bien la documentation officielle.

Kit de survie pour rédiger en RST

Liens internes
`Liste des méso-centres en France <mesocentres_en_France.html>`_

Crée un lien interne vers la page mesocentres_en_France.html, page générée à partir d'un fichier rst dont le slug est mesocentres_en_France

Liens internes vers un fichier
`Avril 2014 <attachments/spip/IMG/pdf/2013_rapport_meso.pdf>`_

Crée un lien vers le pdf 2013_rapport_meso.pdf dont le texte est Avril 2014.

Attention : on ne peut pas avoir 2 fois le même texte comme lien sur la même page.

Listes et énumérations

Les listes et énumérations se spécifient d'une manière équivalente à la syntaxe Markdown :

  • un point d'une liste commence par *, +, -, ... suivie d'une espace et du texte,
  • un point d'une énumération commence par un nombre arabe, romain ou une lettre, suivie d'une espace et du texte.

Les différents points d'une même liste ou énumération doivent présenter le même alignement. De même, si le contenu d'un point est sur plusieurs lignes (texte long, plusieurs paragraphes, sous-liste, ...), ce contenu doit être aligné avec celui de la première ligne du point. Par exemple :


- item 1
- item 2 avec du texte
  un peu plus long.

  Voir même un nouveau
  paragraphe...
- item 3

Contrairement au Markdown, toute liste ou énumération doit être précédée et suivie d'une ligne blanche, sinon ce sera considéré comme une description et la ligne précédant la liste sera en gras. Ceci est particulièrement vrai pour les sous-listes. Par exemple :


- item 1
- item 2 avec un peu
  de texte.

  - item 2.1
  - item 2.2

  On continue la description de l'item 2.
- item 3

ce qui donnera un rendu équivalant à :

  • item 1

  • item 2 avec un peu de texte.

    • item 2.1
    • item 2.2

    On continue la description de l'item 2.

  • item 3

Substitutions

Il est possible de déclarer des macros pour éviter les répétitions ou pour inclure dans du texte le résultat d'une directive (une image en particulier). Voir la documentation officielle.

Substitution par du texte

On spécifie le nom de la substitution entre |, suivi de la directive replace avec le texte à insérer. On y fait appel en utilisant ce nom également encadré de |.

L'exemple parle de lui-même :

Le groupe Calcul est à la fois un |Gdr| et un réseau métier.

.. |GdR| replace:: Groupement de Recherche
Substitution par une image

De même, on peut utiliser ce mécanisme pour insérer une image "en ligne" (c'est-à-dire sans retour à la ligne) dans du texte :


Depuis 2009, ce groupe s'est structuré au sein du |CNRS| en un Groupement de Recherche
et un réseau métier et continue à œuvrer pour la communauté ...

.. |CNRS| image:: ../attachments/img/LOGO_CNRS_2019_CMJN_small.jpg
    :target: http://www.cnrs.fr
    :width: 35 px
    :alt: logo CNRS

(voir https://calcul-dev.math.unistra.fr/develop/pages/presentation_groupe.html#presentation)

Substitution par une url

On peut également insérer automatiquement un lien avec une syntaxe de déclaration alternative. L'appel se fait alors en suffixant le nom (éventuellement entouré de | ou de quotes) par un _ :

Dans le cadre de sa veille technologique [...], le Groupe Calcul entretient des liens avec [...] l'AMIES_,
la SMAI_, l'INRIA_, etc.

.. _AMIES: https://www.agence-maths-entreprises.fr
.. _SMAI: http://smai.emath.fr
.. _Inria: https://www.inria.fr
Où déclarer ces substitutions ?

Pour un besoin local, il suffit d'insérer ces déclarations de substitutions dans le document même (par exemple à la fin).

Si le besoin est plus global, il est conseillé de rajouter ces déclarations dans le fichier plugins/rst_include/include.rst qui est automatiquement inséré dans tous les fichiers rst traités.

Figures et images

Il existe deux manières d'insérer une image et qui ont des options communes :

  • width pour spécifier la largeur de l'image (en pixels ou pourcentage),
  • height pour spécifier la hauteur de l'image en pixels,
  • scale pour mettre à l'échelle l'image, en pourcentage (se cumule avec width et height si spécifiés),
  • alt pour donner une description de l'image quand celle-ci ne peut être affichée (accessibilité),
  • target pour faire pointer l'image vers une url donnée.

Voir la documentation officielle.

Figure

Avec la directive figure, l'image est affichée de manière centrée, de manière indépendante (affichage "block") avec éventuellement une légende (comme contenu de la directive).

Plusieurs figures consécutives s'afficheront donc chacune sur une ligne séparée.

    .. figure:: ../attachments/img/calcul.png
        :width: 100%
        :alt: Image situant le réseau et le GdR au croisement des disciplines et en interaction avec ses partenaires

        Le Groupe Calcul à la croisée des thématiques en interaction avec ses partenaires.

(voir https://calcul-dev.math.unistra.fr/develop/pages/presentation_groupe.html#presentation)

Image

La directive image permet l'affichage simple d'une image sans encadrement (affichage "inline").

En particulier, plusieurs images consécutives s'afficheront les unes à côté des autres.

        .. image:: attachments/spip/Documents/Journees/avril2013/logo_smai.jpg
            :height: 100
            :alt: logo SMAI

        .. image:: attachments/spip/Documents/Journees/avril2013/logo_sif.png
            :height: 100
            :alt: logo SIF

(voir https://calcul-dev.math.unistra.fr/develop/2013-04-journee-histoire-calcul.html#description)

Il est possible de centrer une ou plusieurs images en les englobant dans une directive container avec la classe text-align-center :

    .. container:: text-align-center

        .. image:: attachments/spip/Documents/Journees/avril2013/logo_smai.jpg
            :height: 100
            :alt: logo SMAI

        .. image:: attachments/spip/Documents/Journees/avril2013/logo_sif.png
            :height: 100
            :alt: logo SIF

On peut également insérer une image "en ligne" dans du texte en utilisant une substitution :


Depuis 2009, ce groupe s'est structuré au sein du |CNRS| en un Groupement de Recherche
et un réseau métier et continue à œuvrer pour la communauté ...

.. |CNRS| image:: ../attachments/img/LOGO_CNRS_2019_CMJN_small.jpg
    :target: http://www.cnrs.fr
    :width: 35 px
    :alt: logo CNRS

(voir https://calcul-dev.math.unistra.fr/develop/pages/presentation_groupe.html#presentation)

Container

La directive container permet de regrouper plusieurs éléments RST dans un même div et d'y appliquer les classes spécifiées en paramètre de la directive.

L'utilisation typique est l'affichage centré de plusieurs image :

    .. container:: text-align-center

        .. image:: attachments/spip/Documents/Journees/avril2013/logo_smai.jpg
            :height: 100
            :alt: logo SMAI

        .. image:: attachments/spip/Documents/Journees/avril2013/logo_sif.png
            :height: 100
            :alt: logo SIF

        Ce texte s'affichera également de manière centrée et peut donc faire office de légende.

(voir https://calcul-dev.math.unistra.fr/develop/pages/presentation_groupe.html#presentation)

Directives personnalisées

En plus de la syntaxe "officielle", certaines directives ont été spécifiquement rajoutées ou personnalisées.

section

Indique une section de page.

schedule

Indique le début du programme d'un événement.

day

Dans un programme, indique le jour d'un événement.

event

Dans un programme, indique un exposé.

break_event

Dans un programme, indique une pause.

button

Permet de rajouter un lien interne ou externe sous forme de bouton centré (voir par exemple https://calcul-dev.math.unistra.fr/develop/pages/presentation_groupe.html#le-reseau).

Le texte du bouton est spécifié sur la même ligne que la directive et l'url avec l'option :target: :

.. button:: En savoir plus
    :target: plus-d-infos.html

Par défaut, le lien s'ouvre dans la fenêtre courante. Il est toutefois possible de l'ouvrir dans une nouvelle fenêtre (conseillé pour les liens externes) avec l'option :blank: définie à True :

.. button:: En savoir plus
    :target: plus-d-infos.html
    :blank: True

Les sections d'une page

Le début du contenu d'un événement doit commencer par .. contents:: afin de générer la table des matières.

Le reste du contenu d'une page doit être découpé en sections indiquées par .. section:: suivi du nom de la section. Il est également conseillé de spécifier sur la ligne suivante une classe pour personnaliser le rendu de cette section.

Par exemple :

.. contents::

.. section:: Description de l'article
    :class: description

    Voici un premier paragraphe
    sur plusieurs lignes.

    Un second paragraphe.

.. section:: Organisation
   :class: orga

   Voici la liste des organisateurs:

   - Dupont
   - Dupond

Attention à l'indentation et à l'alignement du contenu !!!

Les sous-sections suivantes décrivent les principales sections et les classes associées.

Description

C'est la section par défaut servant pour décrire l'événement ou indiquer des informations supplémentaires.

La classe à utiliser est description

Programme

Cette section devrait être remplie automatiquement par Indico. En attendant et pour les anciens événements non référencés sur Indico, il faut remplir une section dédiée au programme et qui utilise la classe programme.

Le début du programme commence alors par .. schedule:: et se suit par la description des différentes journées de l'événement.

Jour

Une journée est spécifiée par .. day:: suivi de sa date au format DD-MM-YYYY (le format anglais doit probablement aussi fonctionner).

Exposé

Sous une journée donnée, on ajoute une présentation avec .. event:: suivi du titre de la présentation.

Comme propriétés de la présentation, il faut spécifier son heure de début, heure de fin et les noms des orateurs. S'en suit le résumé (optionnel) de la présentation).

Par exemple :

.. section:: Programme
    :class: programme

    .. schedule::

        .. day:: 01-04-2019

            .. event:: Une super présentation
                :begin: 08:00
                :end: 10:00
                :speaker: Dupond

                Dans cette présentation, on va parler de plein de choses
                super intéressantes.

            .. event:: Une autre présentation
                :begin: 10:00
                :end: 11:00
                :speaker: Dupont
Supports des exposés

Pour un exposé donné, on peut spécifier un support à télécharger (ou un lien web) avec la propriété support suivi du lien interne ou de l'url :

    .. event:: Une super présentation
        :begin: 08:00
        :end: 10:00
        :speaker: Dupond
        :support: attachments/.../support1.pdf

On peut spécifier plusieurs supports en fournissant un lien par ligne après la déclaration de l'option :

    :support:
        attachments/.../support1.pdf
        attachments/.../support2.pdf

La liste des supports s'affiche alors quand on clique sur l'icône de téléchargement.

On peut également spécifier un titre pour chaque support (dans le cas simple ou multiple) en utilisant la syntaxe Markdown [titre](url) :

    :support: [Les slides](attachments/.../support1.pdf)

pour un unique support, ou :

    :support:
        [Les slides](attachments/.../support1.pdf)
        [La vidéo](attachments/.../support2.avi)

en cas de supports multiples.

Pause

On peut spécifier une pause avec .. break_event:: suivi de sa description et d'un horaire de début et de fin.

Organisateurs

Pour spécifier la liste des organisateurs, du comité scientifique ou autre, il faut créer une section avec la classe orga.

Dans cette section, toute liste sera formatée de manière spécifique.

Partenaires et logos

Parfois les événements sont organisés de manière conjointe avec d'autres groupes / instituts. Une section de classe description est utilisée et les logos stockés dans le dépôt sont affichés de manière centrée. Merci d'enrichir la base de logos en ajoutant ceux qui n'y sont pas encore. On peut trouver ici le rendu du snippet ci-dessous.

.. section:: Partenaires
    :class: description

    .. container:: text-align-center

        .. image:: attachments/logo-partenaires/eocoe.png
           :alt: Projet H2020 EoCoE
           :target: https://www.eocoe2.eu/
           :height: 100px
        .. image:: attachments/logo-partenaires/cnrs.png
           :alt: CNRS
           :target: https://www.cnrs.fr
           :height: 100px

Autre

Pour d'autre contenu, se référer à la section description.

Vérifier le rendu en local

make devserver

et ouvrir son navigateur préféré sur http://localhost:8000

Pousser ses modifications

Une fois que le rendu de la page est satisfaisant, indexer la modification dans une branche qui porte votre nom préfixé par dev- : dev-nom

Pousser sur gitlab :

git push --set-upstream origin dev-nom