Pink my pad !
Publish your pads
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.
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 ouvert1.
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
É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.
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.
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éfautnotes
,cards
, plus à venirtheme
: modifie les couleurs et polices de caractère. Par défautpink
,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.
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
:[mot]{.blue} sera de classe `blue` Ce
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
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 {
: #9C2F3C;
--color1: #E85163;
--color2: #99E85D;
--color3--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, , , etc..
- annotation hypothes.is
- améliorer la prise en charge des pads etherpad (html to html?)
- …
Une idée ? complétez la wish-list.
Services
Comment construire son url à partir des différents services ? quelques exemples :
service | url source | url pinkmypad |
---|---|---|
hedgedoc | demo.hedgedoc.org/qrt23NnqT3y6eSFvnPUtgA?edit | pinkmypad.net/hedgedoc/qrt23NnqT3y6eSFvnPUtgA |
hackmd | hackmd.io/pyviWF97QAm_tHQ8wjuJcw?both | pinkmypad.net/hackmd/pyviWF97QAm_tHQ8wjuJcw |
lescommuns | pad.lescommuns.org/3S_2023_Communs_soutenabilite?both# | pinkmypad.net/lescommuns/3S_2023_Communs_soutenabilite |
lamyne | pad.lamyne.org/recit-epidemyne# | pinkmypad.net/lamyne/recit-epidemyne |
numerique-en-commun | pad.numerique-en-commun.fr/monPad# | pinkmypad.net/numerique-en-commun/monPad |
framapad | https://annuel2.framapad.org/p/communs | pinkmypad.net/framapad/annuel2.framapad.org/p/communs |
ensad (etherpad) | https://pad.ensad.fr/p/monPad | pinkmypad.net/ensad/pad.ensad.fr/p/monPad |
Pour en savoir plus, un peu de lecture historico-théorique↩︎