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.

Historique

Pink my pad est une refonte du projet PSnotes, disponible à 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 Hedgedoc :

• https://demo.hedgedoc.org/identifiant-de-mon-pad

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

Pink my pad fonctionne pour le moment avec les domaines :

• demo.hedgedoc.org
• pad.lescommuns.org
• pad.lamyne.org
• pad.numerique-en-commun.fr
• hackmd.io
• framapad.org
• pad.ensad.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: mono;}
  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: mono;}
    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>

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?)
• …

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