pinkmypad

default

markdown

---
title: Pink my pad !
subtitle: Publish your pads
licence: CC-BY-SA 4.0
lang: fr
layout: cards
theme: pink
header-includes: |
  <style>
    body {font-family: sans;} 
    .pink {color: DeepPink;}
    .blue {color: blue;}
    section.level2 {flex: 2 1 400px;}
    section.largecard {flex: 2 1 100%;}
    img.center {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    div.sourceCode { background-color: lavender; }
    section.tablemono table {font-family: monospace;}
    .center {text-align: center;}
    .info { background-color: #ddd; padding: 1em;}
    div.danger, section.danger {color: #a94442;  background-color: #f2dede; border: none; padding: 1em; margin-bottom: 0.5em;}
    code, .sourceCode { background-color: lavender;}
  </style>
---

## Welcome / Bienvenue

[Pink my pad]{.pink} 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.

![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTM0Y2Y4YTU4MWQ2MGQzM2Q2NDdmMjBjN2E4NzU3ZGE1ZTA1ZjA5MiZjdD1n/l2Sqf6CokrCwXDvcA/giphy.gif)

Pink my pad est fait avec [Flask](https://flask.palletsprojects.com/) et [Pandoc](https://pandoc.org/).

## Problème sur Hedgedoc

#date:juillet2024

:::danger
**28 juin 2024**
Pink my pad n'a plus accès à l'instance `demo.hedgedoc.org`. Suite à des attaques répétées de bots, l'instance a relevé son niveau de sécurité et ne permet plus à des applications d'utiliser son API.

Vous pouvez continuer à utiliser Hedgedoc via l'instance [pad.libreon.fr](https://pad.libreon.fr). Cette instance est maintenue par [Libreon.fr](https://libreon.fr), qui est un [CHATONS](https://www.chatons.org/) (Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires).

:::

:::info
**Pour récupérer votre page Pink my pad créée sur demo.hedgedoc.org :**

1. Créez un nouveau pad sur libreon.fr en cliquant sur [pad.libreon.fr/new](https://pad.libreon.fr/new) → un nouveau pad est créé avec son identifiant propre
2. Copiez le contenu de votre pad Hedgedoc et collez le sur le nouveau pad Libreon
3. Ouvrez un nouvel onglet et chargez la page `pinkmypad.net/libreon/identifiant-pad-libreon`

:::

## Historique

[Pink my pad]{.pink} est une refonte du projet [PSnotes](https://framagit.org/laconis/psnotes), *in*disponible à l'adresse [notes.ecrituresnumeriques.ca](https://notes.ecrituresnumeriques.ca). PSnotes a été développé à la [CRC-EN](https://ecrituresnumeriques.ca/) en 2019 en amont des journées [Publishing Sphere](https://publishingsphere.ecrituresnumeriques.ca/) avec l'idée de créer un espace d'écriture et de publication libre et ouvert^[Pour en savoir plus, [un peu de lecture historico-théorique](https://these.nicolassauret.net/1.0/revuecollectif.html#produire-une-sph%C3%A8re-de-publication-linvention-de-pink-my-pad)].

L'inspiration initiale est venue de [Note(s)](https://vincent-maillard.fr/#1041), 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)]{.blue} :

- https://pad.[libreon]{.blue}.fr/[identifiant-de-mon-pad]{.pink}

- https://pinkmypad.net/[libreon]{.blue}/[identifiant-de-mon-pad]{.pink}

[Pink my pad]{.pink} 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](#services)

#howto

## Éditer une page

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

![](https://s3.hedgedoc.org/demo/uploads/ebac8303-9bff-4815-95eb-fa6d595a3733.png){.center}

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](https://www.markdowntutorial.com/fr/) pour apprendre la syntaxe Markdown en 10min
- [Référence Markdown](https://docs.framasoft.org/fr/grav/markdown.html) (via Framasoft)
- [Pandoc's markdown](https://pandoc.org/MANUAL.html#pandocs-markdown) pour aller plus loin.

#howto

## Rafraichir sa page

Il suffit de cliquer sur le bouton **[Refresh]** en haut à gauche du pad → ![](https://s3.hedgedoc.org/demo/uploads/06fa4bc1-ca26-4957-9208-c0a9d0ab0a3a.png)

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 :

```yaml
---
title: Nos notes
abstract: Toutes les notes nous concernant
author: collectif
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](https://pandoc.org/MANUAL.html).

#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:

```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]{.blue} sera de classe `blue`:
  ```markdown
  Ce [mot]{.blue} sera de classe `blue`
  ```
- identifiant sur un élément `<section class="level2" id="lastone">`
  ```markdown
  ## un titre de niveau 2 {#lastone}
  ```
- Ou encore pour définir un élément `<div class="info">`
  ```markdown
  :::info
  contenu de ma div
  :::
  ```
  Ou:
  ```markdown
  :::{.info}
  contenu de ma div
  :::
  ```

Pour aller plus loin avec Pandoc → [#divs-and-spans](https://pandoc.org/MANUAL.html#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](https://gitlab.com/laconis/pink-my-pad/-/tree/main/static).

```
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:

```css
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:

```yaml
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](https://www.zotero.org/support/dev/web_api/v3/basics)), 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](https://pandoc.org/MANUAL.html#citation-syntax).

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](https://pandoc.org/MANUAL.html#including-uncited-items-in-the-bibliography).

```yaml
bibliography: https://api.zotero.org/groups/4941986/collections/GILVWGW2/items?format=bibtex
nocite: |
  @*
```
## Appliquer un style CSL

Appliquez [le style CSL](https://biblioguides.brebeuf.qc.ca/citation/styles_bibliographiques) 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](https://www.zotero.org/styles).

Par exemple, pour un style _Chicago-fullnote-fr_:

```yaml
csl: https://www.zotero.org/styles/chicago-fullnote-bibliography-fr
```
Ou le style «Lettres et sciences humaines fr» :
```yaml
csl: https://www.zotero.org/styles/lettres-et-sciences-humaines-fr
```

## Feuille de route

[Pink my pad]{.pink} reprend les fonctionnalités de PSnotes et apporte plusieurs améliorations :

- ouverture à différents services de pad : Hedgedoc, Hackmd, Etherpad, [_you name it!_](https://gitlab.com/laconis/pink-my-pad/-/issues/1)
- intégration de différents _layout_ : `notes` (par défaut), `cards`, d'autres à venir.. [_par ici les propositions_](https://gitlab.com/laconis/pink-my-pad/-/issues/2)
- 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](https://gitlab.com/laconis/pink-my-pad/-/issues/3).

## Services {.largecard .tablemono}

Comment construire son url à partir des différents services ? quelques exemples :

service | url source | url pinkmypad
:---- | :----------- | :-----------
libreon | pad.libreon.fr/[**qrt23NnqT3y6eSFvnPUtgA**]{.pink}?edit | pinkmypad.net/libreon/**qrt23NnqT3y6eSFvnPUtgA**
~~hedgedoc~~ | ~~demo.hedgedoc.org/[**qrt23NnqT3y6eSFvnPUtgA**]{.pink}?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**
codimd.math.cnrs | https://codimd.math.cnrs.fr/**ywcr0dnPS5Wz1lBOVzF3jg** | pinkmypad.net/codimd.math.cnrs/**ywcr0dnPS5Wz1lBOVzF3jg**

Uploading file...

Edit message:

Cancel

Editing pinkmypad_net