Pink my pad !

Welcome / Bienvenue

Pink my pad est une application toute simple qui transforme vos pads en une page web statique.

Ça sert à quoi ? Cela offre un espace de publication plus stable, personnalisable à volonté, et ouvert à la discussion.

Pink my pad est fait avec Flask et Pandoc.

Problème sur Hedgedoc

#date:juillet2024

Historique

Pink my pad est une refonte du projet PSnotes, indisponible à l’adresse notes.ecrituresnumeriques.ca. PSnotes a été développé à la CRC-EN en 2019 en amont des journées Publishing Sphere avec l’idée de créer un espace d’écriture et de publication libre et ouvert¹.

L’inspiration initiale est venue de Note(s), développé par Émile Greis et Vincent Maillard.

Créer une nouvelle page

Pour créer une nouvelle page sur pinkmypad.net, récupérez l’identifiant de votre pad et copiez-le dans la barre d’adresse de votre navigateur :

Par exemple pour le service Libreon (Hedgedoc) :

• https://pad.libreon.fr/identifiant-de-mon-pad

• https://pinkmypad.net/libreon/identifiant-de-mon-pad

Pink my pad fonctionne pour le moment avec les domaines :

• pad.libreon.fr
• demo.hedgedoc.org
• pad.lescommuns.org
• pad.lamyne.org
• pad.numerique-en-commun.fr
• hackmd.io
• framapad.org
• pad.ensad.fr
• codimd.math.cnrs.fr

→ exemples ci-dessous

#howto

Éditer une page

Il suffit de cliquer sur le lien [edit on …] en haut à gauche de la page

Le pad correspondant s’ouvre en mode édition. L’édition ne sera possible que si l’auteur du pad a ouvert les droits d’édition, ou si le pad vous appartient.

Les pads basés sur Hedgedoc ou HackMD sont au format Markdown. Pandoc propose une syntaxe enrichie pour aller plus loin avec le format.

Ressources Markdown:

• Tutoriel pour apprendre la syntaxe Markdown en 10min
• Référence Markdown (via Framasoft)
• Pandoc’s markdown pour aller plus loin.

#howto

Rafraichir sa page

Il suffit de cliquer sur le bouton [Refresh] en haut à gauche du pad →

La page se met à jour avec les dernières modifications apportés au pad source.

#howto

Ajouter des tags

Pinkmypad gère deux types de tags:

• tags simples : #monmotclé
• tags catégorisés : #date:20230420 #todo:urgent #younameit:asyoulike

Un clic sur un tag permet de filtrer les sections et de n’afficher que les sections contenant le tag cliqué.

Personnaliser sa page

Vous pouvez personnaliser votre page en ajoutant un en-tête YAML au début de votre pad. L’en-tête permet de jouer sur plusieurs éléments :

• ajouter des métadonnées au pad (title, abstract, author, date) et à la page publiée
• configurer la page publiée sur pinkmypad :
  • layout: modifie la disposition des blocs HTML. Par défaut notes, cards, plus à venir
  • theme: modifie les couleurs et polices de caractère. Par défaut pink, blue, plus à venir
• ajouter des règles CSS

Exemple d’en-tête yaml :

---
title: Nos notes
abstract: Toutes les notes nous concernant
author: collectif
date: 2023-04-20
layout: cards
theme: pink
header-includes: |
  <style>
  body {font-family: monospace;}
  img {border: 2px solid deeppink; }
  </style>
---

Vous pouvez le copier-coller (sans oublier les ---) et modifier les valeurs.

L’en-tête peut aussi lister des options et des variables spécifiques à Pandoc. Pour aller plus loin, voir Pandoc User’s Guide.

#howto

Ajouter des règles CSS

Pour définir de nouvelles règles CSS à votre page publiée, ajouter les lignes suivantes dans l’en-tête yaml:

header-includes: |
  <style>
    body {font-family: monospace;}
    h2#lastone {color: black;}
    .blue {color: blue;}
  </style>

Vous pouvez alors ajouter autant de règles que nécessaires aux objets HTML de la page publiée.

Pandoc est capable d’interpréter des classes et des identifiants associés aux différents éléments du pad en respectant cette syntaxe markdown:

• span → Ce mot sera de classe blue:

  Ce [mot]{.blue} sera de classe `blue`

• identifiant sur un élément <section class="level2" id="lastone">

  ## un titre de niveau 2 {#lastone}

• Ou encore pour définir un élément <div class="info">

  :::info
  contenu de ma div
  :::

  Ou:

  :::{.info}
  contenu de ma div
  :::

Pour aller plus loin avec Pandoc → #divs-and-spans

#howto

Layout & Theme

Pink my pad produit une structure HTML sur laquelle sont appliqués une disposition (layout) et un thème (theme).

Vous voulez proposer une nouvelle disposition ou un nouveau thème ? Le code est ouvert.

static
├── pinkmypad.css # styles principaux
├── notes.css     # layout par défaut
├── cards.css     # layout en cartes
├── pink.css      # theme 
└── blue.css      # theme

Vous pouvez intervenir sur le thème facilement en définissant de nouvelles couleurs, en ajoutant dans l’en-tête YAML:

header-include: |
  <style>
  :root {
    --color1: #9C2F3C;
    --color2: #E85163;
    --color3: #99E85D;
    --back: #fdfdfd;
    --front: #1a1a1a;
  }
  </style>

Intégrer une collection Zotero

Il est possible de publier les références bibliographiques d’un groupe ou d’une collection Zotero publics. Pour cela, ajoutez simplement l’URL du groupe ou de la collection dans l’en-tête yaml, en utilisant la clé bibliography.

Par exemple:

bibliography: https://api.zotero.org/groups/4941986/collections/GILVWGW2/items?format=bibtex

Notez la structure de l’URL (voir la documentation de l’API Zotero), ainsi que le paramètre items?format=bibtex indispensable pour obtenir un format bibtex :

api.zotero.org/
    groups/<identifiant du groupe>/
    collections/<identifiant de la collection>/ (si nécessaire)
    items?format=bibtex

Comment citer une référence Zotero

Par défaut, seules les références citées dans le texte seront publiées en fin de document dans la bibliographie. Pour citer une référence, il faut utiliser la clé bibtex de la référence entre crochet (par exemple [@cardon_algorithmes_2018]). Les clés bibtex peut être trouvées en consultant le fichier bibtex téléchargé à partir de l’url précédente.

Pour aller plus loin dans la syntaxe Markdown de citation, voir Pandoc/comment citer une référence en markdown.

Pour afficher en bibliographie toutes les références de la collection, utilisez la clé nocite et le joker @*. Voir Pandoc/comment inclure les références non-citées.

bibliography: https://api.zotero.org/groups/4941986/collections/GILVWGW2/items?format=bibtex
nocite: |
  @*

Appliquer un style CSL

Appliquez le style CSL de votre choix en ajoutant dans l’en-tête YAML la clé-valeur csl: <url du style>, en vous référant au catalogue de styles CSL de Zotero.

Par exemple, pour un style Chicago-fullnote-fr:

csl: https://www.zotero.org/styles/chicago-fullnote-bibliography-fr

Ou le style «Lettres et sciences humaines fr» :

csl: https://www.zotero.org/styles/lettres-et-sciences-humaines-fr

Feuille de route

Pink my pad reprend les fonctionnalités de PSnotes et apporte plusieurs améliorations :

• ouverture à différents services de pad : Hedgedoc, Hackmd, Etherpad, you name it!
• intégration de différents layout : notes (par défaut), cards, d’autres à venir.. par ici les propositions
• lien vers une page sommaire
• mots-clés simples et catégorisés : #date:20230420, #author:Nicolas, #ecriture, etc..
• annotation hypothes.is
• améliorer la prise en charge des pads etherpad (html to html?)
• bibliographie à partir d’une collection Zotero
• …

Une idée ? complétez la wish-list.