diff --git a/src/docs/_maps_/articles.ts b/src/docs/_maps_/articles.ts
index f979c34..8f79044 100644
--- a/src/docs/_maps_/articles.ts
+++ b/src/docs/_maps_/articles.ts
@@ -12,6 +12,18 @@ const articles = [
time_to_read: 5,
difficulty: 'Non spécifié',
stepped_guide_available: false,
+ },
+ {
+ id: 351101,
+ slug: 'login-pronote',
+ markdown: 'getting-started/login-pronote.md',
+ image: '/articles/cover/login-pronote.png',
+ imageAlt: 'Image montrant un téléphone sur l\'application mobile Pronote avec une flèche pointant vers un téléphone sur l\'application mobile Papillon',
+ title: 'Connexion à PRONOTE avec Papillon',
+ description: 'Tu trouveras ici comment réussir à te connecter au service PRONOTE sur Papillon.',
+ time_to_read: 10,
+ difficulty: 'Facile',
+ stepped_guide_available: false,
}
]
diff --git a/src/docs/_maps_/collections.ts b/src/docs/_maps_/collections.ts
index 0e9bc98..8a22579 100644
--- a/src/docs/_maps_/collections.ts
+++ b/src/docs/_maps_/collections.ts
@@ -6,7 +6,7 @@ const collections = [
slug: 'getting-started',
icon: Rocket,
name: 'Démarrer avec Papillon',
- articlesId: []
+ articlesId: [351101]
},
{
id: 3524,
diff --git a/src/docs/getting-started/login-pronote.md b/src/docs/getting-started/login-pronote.md
new file mode 100644
index 0000000..670c864
--- /dev/null
+++ b/src/docs/getting-started/login-pronote.md
@@ -0,0 +1,329 @@
+# Introduction
+
+Si ton établissement utilise PRONOTE, alors tu es au bon endroit. PRONOTE dispose de 4 méthodes de connexion :
+
+- **Localisation :** Papillon utilise ta localisation pour trouver les établissements proches de toi.
+- **Adresse :** Papillon te demandera la ville dans laquelle se situe ton établissement pour trouver ton établissement.
+- **QR code :** cette méthode requiert un ordinateur. Utilise la fonction QR code de PRONOTE pour te connecter sur Papillon.
+- **URL de connexion :** utilise l’URL de connexion de ton instance PRONOTE pour trouver ton établissement.
+
+# 📍 Méthode n°1 : Localisation
+
+> **🚨 Attention**
+> Certains établissements refusent d’apparaître dans cette liste. Mais ne t’en fait pas, Papillon fonctionne pour toi. Utilise la méthode par QR code ou bien par URL de connexion.
+
+
+
+## 1 – Installe l’application Papillon
+
+Rends-toi sur l'App Store ou le Google Play Store, puis rends-toi dans la page recherche. Saisis "Papillon" et installe l'application.
+
+
+
+## 2 – Ouvre l’application Papillon, puis continue
+
+Une fois le téléchargement de l'application Papillon terminé, tu peux l'ouvrir. Elle te guidera pour commencer ta connexion. Pour commencer, tu peux dès maintenant cliquer sur « Commençons ! »
+
+
+
+## 3 – Sélectionne « PRONOTE »
+
+Il est désormais temps de sélectionner ton service scolaire. Dans cet article, nous utilisons PRONOTE. Sélectionne donc PRONOTE, puis clique sur confirmer.
+
+
+
+## 4 – Sélectionne « Utiliser ma position »
+
+Pour cette méthode, nous allons utiliser la localisation. Sélectionne « Utiliser ma position », puis clique sur confirmer. Si Papillon n’a pas déjà eu accès à ta position, celle-ci te sera demandée. Clique sur « Demander l’accès », puis autorise Papillon.
+
+
+
+## 5 – Trouve ton établissement
+
+Tu as à présent la liste des établissements autour de toi. Plus qu’à trouver le tien et à cliquer dessus.
+
+> **🫥 Je ne trouve pas mon établissement…**
+Certains établissements refusent d’apparaître dans cette liste. Tu peux tout de même te connecter avec la méthode du QR code ou bien par l’URL de connexion.
+
+Et si tu es quelqu’un de sympa, tu peux reporter le problème afin que nous ajoutions à la main ton établissement à la liste. Pour ce faire, c’est [ici](https://github.com/PapillonApp/support/issues/new/choose).
+>
+
+
+
+## 6 – Utilise l’ENT
+
+**Si ton établissement utilise un ENT (espace numérique de travail)**, ce message devrait apparaître. Dans ce cas, clique sur « Utiliser l’ENT » pour te connecter.
+
+**Si Papillon fait erreur (oups)**, tu peux cliquer sur « Identifiants » et te connecter avec tes identifiants.
+
+**Si aucun message n’apparaît**, utilise tes identifiants pour te connecter, puis tu peux passer à l'étape 8.
+
+
+
+## 7 – Connecte-toi avec le navigateur
+
+Dernière étape avant de personnaliser Papillon, utilise le navigateur pour te connecter comme tu en as l’habitude. Une fois que tu serras connecté, tu serras automatiquement envoyé vers l’étape suivante.
+
+
+
+## 8 – Bravo ! Tu as réussi !
+
+Youhou ! Tu es connecté ! Dernière étape avant de commencer, personnaliser Papillon. Pour ce faire, clique sur « Personnaliser Papillon ». Mais bien sûr, si tu es trop pressé, rien ne t'empêche de continuer en cliquant sur « Ignorer cette étape ».
+
+
+
+## 9 – Sélectionne ta couleur favorite.
+
+Sélectionne ta couleur favorite, et celle-ci apparaîtra dans tout Papillon ! Cool, n’est-ce pas ? Personnellement, le vert reste ma couleur préférée… 🤩
+
+
+
+## 10 — Profite bien ! ✌️
+
+Bravo, tu as réussi à te connecter. Fais le tour et reste curieux. Si tu as besoin d’aide, n’hésite pas à regarder nos autres tutoriels sur le site. Et n’oublie pas : si tu rencontres des difficultés, nous sommes là pour t’aider. N'hésite pas à nous contacter vers notre e-mail : [support@papillon.bzh](mailto:support@papillon.bzh), que l’on discute afin de résoudre ton problème !
+
+# 🏠 Méthode n°2 : **Adresse**
+
+> **🚨 Attention**
+> Certains établissements refusent d’apparaître dans cette liste. Mais ne t’en fait pas, Papillon fonctionne pour toi. Utilise la méthode par QR code ou bien par URL de connexion.
+
+
+
+## 1 – Installe l’application Papillon
+
+Rends-toi sur l'App Store ou le Google Play Store, puis rends-toi dans la page recherche. Saisis "Papillon", puis installe l'application.
+
+
+
+## 2 – Ouvre l’application Papillon, puis continue
+
+Une fois le téléchargement de l'application Papillon terminé, tu peux l'ouvrir. Elle te guidera pour commencer ta connexion. Pour commencer, tu peux dès maintenant cliquer sur « Commençons ! »
+
+
+
+## 3 – Sélectionne « PRONOTE »
+
+Il est désormais temps de sélectionner ton service scolaire. Dans cet article, nous utilisons PRONOTE. Sélectionne donc PRONOTE, puis clique sur confirmer.
+
+
+
+## 4 – Sélectionne « Rechercher une ville »
+
+Pour continuer, sélectionne « Rechercher une ville », puis clique sur confirmer. Ici, nous avons besoin de la ville où se situe ton établissement.
+
+
+
+## 5 – Cherche le nom de la ville de ton établissement
+
+Une fois sur la page, cherche la ville de ton établissement. La liste des villes qui correspondent à ta recherche devrait apparaitre, plus qu’à trouver ta ville et à cliquer dessus.
+
+
+
+## 6 – Trouve ton établissement
+
+Tu as désormais la liste des établissements autour de toi. Plus qu’à trouver le tien et à cliquer dessus.
+
+> **🫥 Je ne trouve pas mon établissement…**
+> Certains établissements refusent d’apparaître dans cette liste. Tu peux tout de même te connecter avec la méthode du QR code ou bien par l’URL de connexion.
+> Et si tu es quelqu’un de sympa, tu peux reporter le problème afin que nous ajoutions à la main ton établissement à la liste. Pour ce faire, c’est [ici](https://github.com/PapillonApp/support/issues/new/choose).
+
+
+
+## 6 – Utilise l’ENT
+
+**Si ton établissement utilise un ENT (espace numérique de travail)**, ce message devrait apparaître. Dans ce cas, clique sur « Utiliser l’ENT » pour te connecter.
+
+**Si Papillon fait erreur (oups)**, tu peux cliquer sur « Identifiants » et te connecter avec tes identifiants.
+
+**Si aucun message n’apparaît**, utilise tes identifiants pour te connecter, puis tu peux passer à l'étape 8.
+
+
+
+## 7 – Connecte-toi avec le navigateur
+
+Dernière étape avant de personnaliser Papillon, utilise le navigateur pour te connecter comme tu en as l’habitude. Une fois que tu serras connecté, tu serras automatiquement envoyé vers l’étape suivante.
+
+
+
+## 8 – Bravo ! Tu as réussi !
+
+Youhou ! Tu es connecté ! Dernière étape avant de commencer, personnaliser Papillon. Pour ce faire, clique sur « Personnaliser Papillon ». Mais bien sûr, si tu es trop pressé, rien ne t'empêche de continuer en cliquant sur « Ignorer cette étape ».
+
+
+
+## 9 – Sélectionne ta couleur favorite
+
+Sélectionne ta couleur favorite, et celle-ci apparaîtra dans tout Papillon ! Cool, n’est-ce pas ? Personnellement, le vert reste ma couleur préférée… 🤩
+
+
+
+## 10 — Profite bien ! ✌️
+
+Bravo, tu as réussi à te connecter. Fais le tour et reste curieux. Si tu as besoin d’aide, n’hésite pas à regarder nos autres tutoriels sur le site. Et n’oublie pas : si tu rencontres des difficultés, nous sommes là pour t’aider. N'hésite pas à nous contacter vers notre e-mail : [support@papillon.bzh](mailto:support@papillon.bzh), que l’on discute afin de résoudre ton problème !
+
+# 📸 Méthode n°3 : QR code
+
+> **🖥️ Ordinateur requis**
+>Pour cette méthode, tu devras avoir un ordinateur ou un iPad avec toi. Si tu ne l’as pas avec toi maintenant, reviens quand tu en auras un à disposition.
+
+
+
+## 1 – Installe l’application Papillon
+
+Rends-toi sur l'App Store ou le Google Play Store, puis rends-toi dans la page recherche. Saisis "Papillon", puis installe l'application.
+
+
+
+## 2 – Ouvre ton ordinateur et connecte-toi comme tu en as l’habitude
+
+Le temps que Papillon s’installe, tu peux utiliser ton navigateur et te connecter à ton ENT comme tu en as l’habitude.
+
+
+
+## 3 – Depuis ton ENT, ouvre Pronote
+
+Sur ton ENT, tu dois trouver l’application Pronote, puis tu devrais arriver sur ton compte Pronote.
+
+
+
+## 4 – Clique sur l’icône de QR code
+
+Sur Pronote, une icône en forme de QR code apparaît avec tes informations sur la barre supérieure de celui-ci. Lorsque tu cliqueras dessus, un dialogue va apparaitre.
+
+
+
+## 5 – Créer un code à 4 chiffres, puis cliquer sur « Générer le QR code »
+
+Dans le champ de texte, tu devras créer un code de vérification temporaire. Tu n’as pas à t’en souvenir, et ce ne te sera demandé que pour configurer Papillon. Tu peux donc très bien utiliser des mots de passe faibles comme « 0000 » ou « 1234 ». Une fois ton code choisi, clique sur le bouton « Générer le QR code ».
+
+
+
+## 6 – Sur ton téléphone, ouvre l’application Papillon puis continue
+
+Une fois que le QR code s’affiche, tu peux dès à présent reprendre ton téléphone et ouvrir Papillon. L’application te guidera pour commencer ta connexion. Pour commencer, tu peux cliquer sur « Commençons ! ».
+
+
+
+## 7 – Sélectionne « PRONOTE »
+
+Il est désormais temps de sélectionner ton service scolaire. Dans cet article, nous utilisons PRONOTE. Sélectionne donc PRONOTE, puis clique sur confirmer.
+
+
+
+## 8 – Sélectionne « J’ai un QR code »
+
+Pour continuer, sélectionne « J’ai un QR code », puis clique sur confirmer. Ici, nous avons besoin de ta caméra pour scanner ton QR code. Si une demande de permission t'est demandée, pense bien à l’accepter.
+
+
+
+## 9 – Scanne le QR code visible sur ton ordinateur
+
+Il est maintenant temps de tendre tes bras et de mettre le QR code visible sur ton ordinateur dans le cadre de ton téléphone. Une fois que ton téléphone arrivera à le lire, un nouvel écran apparaîtra.
+
+
+
+## 10 – Tape ton code à 4 chiffres, puis clique sur « Confirmer »
+
+Tu te souviens de ton code temporaire de tout à l’heure ? Il est temps de t’en servir. Pour ce faire, il te suffit de l’écrire dans le champ de texte. Une fois que tu as fini, clique sur « Confirmer ».
+
+
+
+## 11 – Bravo ! Tu as réussi !
+
+Youhou ! Tu es connecté ! Dernière étape avant de commencer, personnaliser Papillon. Pour ce faire, clique sur « Personnaliser Papillon ». Mais bien sûr, si tu es trop pressé, rien ne t'empêche de continuer en cliquant sur « Ignorer cette étape ».
+
+
+
+## 12 – Sélectionne ta couleur favorite
+
+Sélectionne ta couleur favorite, et celle-ci apparaîtra dans tout Papillon ! Cool, n’est-ce pas ? Personnellement, le vert reste ma couleur préférée… 🤩
+
+
+
+## 13 — Profite bien ! ✌️
+
+Bravo, tu as réussi à te connecter. Fais le tour et reste curieux. Si tu as besoin d’aide, n’hésite pas à regarder nos autres tutoriels sur le site. Et n’oublie pas : si tu rencontres des difficultés, nous sommes là pour t’aider. N'hésite pas à nous contacter vers notre e-mail : [support@papillon.bzh](mailto:support@papillon.bzh), que l’on discute afin de résoudre ton problème !
+
+# 🔗 Méthode n°4 : L’URL de connexion
+
+
+
+## 1 – Installe l’application Papillon
+
+Rends-toi sur l'App Store ou le Google Play Store, puis rends-toi dans la page recherche. Saisis "Papillon", puis installe l'application.
+
+
+
+## 2 – Rends-toi dans ton navigateur et connecte-toi comme tu en as l’habitude
+
+Pendant que nous téléchargeons Papillon, tu peux te rendre dans ton navigateur (Safari / Chrome / Firefox…) puis te connecter à PRONOTE comme tu as l’habitude de faire.
+
+
+
+## 3 – Sur PRONOTE, copie l’URL visible dans la barre de recherche
+
+Une fois connecté sur PRONOTE, rends-toi dans ta barre de recherche, puis copie toute l’URL.
+
+
+
+## 4 – Ouvre l’application Papillon puis continue
+
+Une fois l’URL copiée, ouvre Papillon. L’application te guidera pour commencer ta connexion. Pour commencer, tu peux cliquer sur « Commençons ! ».
+
+
+
+## 5 – Sélectionne « PRONOTE »
+
+Il est désormais temps de sélectionner ton service scolaire. Dans cet article, nous utilisons PRONOTE. Sélectionne donc PRONOTE, puis clique sur confirmer.
+
+
+
+## 6 – Sélectionne « J’ai une URL de connexion »
+
+Pour continuer, sélectionne « J’ai une URL de connexion », puis clique sur confirmer. Sur iOS, Papillon peut demander à récupérer le presse-papier. Pense bien à autoriser celui-ci pour gagner du temps sur le remplissage. 😉
+
+
+
+## 7 – Colle l’URL dans le champ de texte
+
+Si ce n’est pas fait automatiquement, tu peux coller l’URL de ton établissement dans le champ de texte. Une fois terminé, tu peux cliquer sur « Confirmer ».
+
+
+
+## 8 – Utilise l’ENT
+
+**Si ton établissement utilise un ENT (espace numérique de travail)**, ce message devrait apparaître. Dans ce cas, clique sur « Utiliser l’ENT » pour te connecter.
+
+**Si Papillon fait erreur (oups)**, tu peux cliquer sur « Identifiants » et te connecter avec tes identifiants.
+
+**Si aucun message n’apparaît**, utilise tes identifiants pour te connecter, puis tu peux passer à l'étape 10.
+
+
+
+## 9 – Connecte-toi avec le navigateur
+
+Dernière étape avant de personnaliser Papillon, utilise le navigateur pour te connecter comme tu en as l’habitude. Une fois que tu serras connecté, tu serras automatiquement envoyé vers l’étape suivante.
+
+
+
+## 10 – Bravo ! Tu as réussi !
+
+Youhou ! Tu es connecté ! Dernière étape avant de commencer, personnaliser Papillon. Pour ce faire, clique sur « Personnaliser Papillon ». Mais bien sûr, si tu es trop pressé, rien ne t'empêche de continuer en cliquant sur « Ignorer cette étape ».
+
+
+
+## 11 – Sélectionne ta couleur favorite
+
+Sélectionne ta couleur favorite, et celle-ci apparaîtra dans tout Papillon ! Cool, n’est-ce pas ? Personnellement, le vert reste ma couleur préférée… 🤩
+
+
+
+## 12 – Profite bien ! ✌️
+
+Bravo, tu as réussi à te connecter. Fais le tour et reste curieux. Si tu as besoin d’aide, n’hésite pas à regarder nos autres tutoriels sur le site. Et n’oublie pas : si tu rencontres des difficultés, nous sommes là pour t’aider. N'hésite pas à nous contacter vers notre e-mail : [support@papillon.bzh](mailto:support@papillon.bzh), que l’on discute afin de résoudre ton problème !
+
+# Conclusion
+
+Si tout se passe bien, tu devrais déjà être en train de profiter pleinement de Papillon. Fais le tour et reste curieux. Si tu as besoin d’aide, n’hésite pas à regarder nos autres tutoriels sur le site.
+
+Si tu rencontres des difficultés à te connecter, nous sommes là pour t’aider. N'hésite pas à nous contacter vers notre e-mail : [support@papillon.bzh](mailto:support@papillon.bzh), que l’on discute ensemble afin de résoudre ton problème !
\ No newline at end of file
diff --git a/static/articles/assets/351101/computer_educonnect.png b/static/articles/assets/351101/computer_educonnect.png
new file mode 100644
index 0000000..87fc543
Binary files /dev/null and b/static/articles/assets/351101/computer_educonnect.png differ
diff --git a/static/articles/assets/351101/computer_ent.png b/static/articles/assets/351101/computer_ent.png
new file mode 100644
index 0000000..d9cf41a
Binary files /dev/null and b/static/articles/assets/351101/computer_ent.png differ
diff --git a/static/articles/assets/351101/computer_qr.png b/static/articles/assets/351101/computer_qr.png
new file mode 100644
index 0000000..13e0ee8
Binary files /dev/null and b/static/articles/assets/351101/computer_qr.png differ
diff --git a/static/articles/assets/351101/computer_qr_pass.png b/static/articles/assets/351101/computer_qr_pass.png
new file mode 100644
index 0000000..0117632
Binary files /dev/null and b/static/articles/assets/351101/computer_qr_pass.png differ
diff --git a/static/articles/assets/351101/papillon_address.png b/static/articles/assets/351101/papillon_address.png
new file mode 100644
index 0000000..025ff18
Binary files /dev/null and b/static/articles/assets/351101/papillon_address.png differ
diff --git a/static/articles/assets/351101/papillon_address_search.png b/static/articles/assets/351101/papillon_address_search.png
new file mode 100644
index 0000000..3690539
Binary files /dev/null and b/static/articles/assets/351101/papillon_address_search.png differ
diff --git a/static/articles/assets/351101/papillon_appstore.png b/static/articles/assets/351101/papillon_appstore.png
new file mode 100644
index 0000000..d8565c4
Binary files /dev/null and b/static/articles/assets/351101/papillon_appstore.png differ
diff --git a/static/articles/assets/351101/papillon_colors.png b/static/articles/assets/351101/papillon_colors.png
new file mode 100644
index 0000000..193ab28
Binary files /dev/null and b/static/articles/assets/351101/papillon_colors.png differ
diff --git a/static/articles/assets/351101/papillon_ent_alert_etab_list.png b/static/articles/assets/351101/papillon_ent_alert_etab_list.png
new file mode 100644
index 0000000..772b7a3
Binary files /dev/null and b/static/articles/assets/351101/papillon_ent_alert_etab_list.png differ
diff --git a/static/articles/assets/351101/papillon_ent_alert_url.png b/static/articles/assets/351101/papillon_ent_alert_url.png
new file mode 100644
index 0000000..4775eda
Binary files /dev/null and b/static/articles/assets/351101/papillon_ent_alert_url.png differ
diff --git a/static/articles/assets/351101/papillon_ent_login.png b/static/articles/assets/351101/papillon_ent_login.png
new file mode 100644
index 0000000..7c53416
Binary files /dev/null and b/static/articles/assets/351101/papillon_ent_login.png differ
diff --git a/static/articles/assets/351101/papillon_etab_list.png b/static/articles/assets/351101/papillon_etab_list.png
new file mode 100644
index 0000000..9a5b26e
Binary files /dev/null and b/static/articles/assets/351101/papillon_etab_list.png differ
diff --git a/static/articles/assets/351101/papillon_home.png b/static/articles/assets/351101/papillon_home.png
new file mode 100644
index 0000000..d36b7cc
Binary files /dev/null and b/static/articles/assets/351101/papillon_home.png differ
diff --git a/static/articles/assets/351101/papillon_location.png b/static/articles/assets/351101/papillon_location.png
new file mode 100644
index 0000000..e56865a
Binary files /dev/null and b/static/articles/assets/351101/papillon_location.png differ
diff --git a/static/articles/assets/351101/papillon_paste_url.png b/static/articles/assets/351101/papillon_paste_url.png
new file mode 100644
index 0000000..f3b4d12
Binary files /dev/null and b/static/articles/assets/351101/papillon_paste_url.png differ
diff --git a/static/articles/assets/351101/papillon_pronote_selected.png b/static/articles/assets/351101/papillon_pronote_selected.png
new file mode 100644
index 0000000..43d73d9
Binary files /dev/null and b/static/articles/assets/351101/papillon_pronote_selected.png differ
diff --git a/static/articles/assets/351101/papillon_qrcode.png b/static/articles/assets/351101/papillon_qrcode.png
new file mode 100644
index 0000000..8a1e416
Binary files /dev/null and b/static/articles/assets/351101/papillon_qrcode.png differ
diff --git a/static/articles/assets/351101/papillon_qrcode_pass.png b/static/articles/assets/351101/papillon_qrcode_pass.png
new file mode 100644
index 0000000..65c010c
Binary files /dev/null and b/static/articles/assets/351101/papillon_qrcode_pass.png differ
diff --git a/static/articles/assets/351101/papillon_qrcode_scan.png b/static/articles/assets/351101/papillon_qrcode_scan.png
new file mode 100644
index 0000000..1e536d5
Binary files /dev/null and b/static/articles/assets/351101/papillon_qrcode_scan.png differ
diff --git a/static/articles/assets/351101/papillon_success_login.png b/static/articles/assets/351101/papillon_success_login.png
new file mode 100644
index 0000000..9c6d7cb
Binary files /dev/null and b/static/articles/assets/351101/papillon_success_login.png differ
diff --git a/static/articles/assets/351101/papillon_url.png b/static/articles/assets/351101/papillon_url.png
new file mode 100644
index 0000000..a20ba8c
Binary files /dev/null and b/static/articles/assets/351101/papillon_url.png differ
diff --git a/static/articles/assets/351101/papillon_welcome.png b/static/articles/assets/351101/papillon_welcome.png
new file mode 100644
index 0000000..3ce4727
Binary files /dev/null and b/static/articles/assets/351101/papillon_welcome.png differ
diff --git a/static/articles/assets/351101/web_copy.png b/static/articles/assets/351101/web_copy.png
new file mode 100644
index 0000000..93a0c19
Binary files /dev/null and b/static/articles/assets/351101/web_copy.png differ
diff --git a/static/articles/assets/351101/web_login.png b/static/articles/assets/351101/web_login.png
new file mode 100644
index 0000000..d5f39c5
Binary files /dev/null and b/static/articles/assets/351101/web_login.png differ
diff --git a/static/articles/cover/login-pronote.png b/static/articles/cover/login-pronote.png
new file mode 100644
index 0000000..e9913c2
Binary files /dev/null and b/static/articles/cover/login-pronote.png differ