Compare commits

...

14 commits

Author SHA1 Message Date
914f8b07de NextJS + StaticCms (not functional) 2023-03-31 00:13:35 +02:00
92da748a2b Merge pull request 'Du contenu pour exemples' (#26) from features/content into develop
Reviewed-on: #26
2023-03-30 18:38:03 +00:00
b582ebe39f Premiers jets bios 2023-03-30 20:34:05 +02:00
fe560703dc fix some lines 2023-03-30 20:33:51 +02:00
de1cf03fc6 Ajout d'une fiche très pratique pour Matrix - changer les adresses d'un salon 2023-03-30 16:10:52 +02:00
a89a644ad7 Ajout de 2 ateliers à manger 2023-03-30 15:56:56 +02:00
0e8c6d2130 Fix sémantique version -> vues 2023-03-30 14:50:07 +02:00
9d1cf3bf2b Fix graph 2023-03-30 14:44:20 +02:00
195bf8f0a6 Quelques corrections sur les liens et ajout d'émojis. Fixes #9 @10min 2023-03-30 14:34:20 +02:00
374d997ddd Merge pull request 'features/docs' (#25) from features/docs into develop
Reviewed-on: #25
2023-03-30 12:17:43 +00:00
b8e5d40f9e Page d'index. closes #9 @5h30min 2023-03-30 14:06:47 +02:00
214314f8c6 Initialisation de la documentation de developpement.
Premiers jets de spécification.

about #24 @2h, #5 @45min
2023-03-29 17:38:57 +02:00
595f29aad5 Modele - compte-rendu.md de reunion
closes #7 @1h
2023-03-29 17:38:57 +02:00
e0fd4ea2b8 Premier jets sur les décisions
Renommage
Modele
Pas de gatsby

Co-Authored-by: grinche

closes #8 @20min, closes #23 @1h40min

_resources/modele-decision.md
2023-03-29 17:38:57 +02:00
43 changed files with 9932 additions and 0 deletions

3
.eslintrc.json Normal file
View file

@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}

36
.gitignore vendored Normal file
View file

@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

View file

@ -1,2 +1,26 @@
# hlilo-website
## Par où commencer
```bash
yarn dev
```
Ouvrir [http://localhost:3000](http://localhost:3000).
## Voir aussi
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## En savoir plus
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

19
config.json Normal file
View file

@ -0,0 +1,19 @@
{
"base_url": "https://example.com",
"site_title": "Next.js Static CMS Blog",
"site_description": "example.com",
"site_keywords": [
{
"keyword": "Next.js"
},
{
"keyword": "Static CMS"
},
{
"keyword": "React"
}
],
"posts_per_page": 5,
"twitter_account": "@my-account",
"github_account": "myaccount"
}

View file

@ -0,0 +1,118 @@
# [UN MARQUEUR 1] UN TITRE 1
## Date & lieu
* 📅 UNE DATE
* 🔗 UN LIEN DE SONDAGE
* 🗺️ UN LIEU
* 🔗 UN LIEN DE CARTE OU D'OUTIL DE VISIO
## Courte description
UNE COURTE DESCRIPTION 1
## Participant⋅es
* ✅ UNE PARTICIPANTE 1
* ✅ UN PARTICIPANT 2
* 🚫 UN ABSENT 1
### Animation / Scribe
* 🗣️ UNE PARTICIPANTE 1
* 📝 UN PARTICIPANT 2
### Convié⋅es
* 💺 UNE CONVIEE 1
* 💺 UN CONVIE 2
### Invité⋅es
* 🤔 UNE INVITEE 1
* 🤔 UN INVITE 2
## Ordre Du Jour (ODJ)
* 👋 Présentation / Tour de table | 🕑 0-10min
* 📌 UN ODJ Obligatoire 1 | 🕑 UN TEMPS ESTIME 1
* 🎈 UN ODJ Optionnel 1 | 🕑 UN TEMPS ESTIME 2
* 👋 Conclusion / Tour de table | 🕑 0-10min
## Description
### Annonces
* 📢 UNE ANNONCE 1
* ⚠️ UNE PRECAUTION 1
* 🚨 UNE ALERTE 1
* ✅ UNE TACHE OU DECISION VALIDEE 1
* 🚫 UNE TACHE OU DECISION ANNULEE 1
* ⚖️ UNE DECISION A PRENDRE 1
* ❓ UNE QUESTION 1
* 📌 UNE TACHE A FAIRE 1
* 🚧 UN CHANTIER EN COUR OU A ORGANISER 1
* 🧳 UN DEPLACEMENT 1
* 📅 UN RDV DE FIXE 1
### Feuille de route | ~DATE PROCHAIN RDV
### Tour de table
#### 👋 UNE PARTICIPANTE 1
UN TEXTE 1
#### 👋 UN PARTICIPANT 2
UN TEXTE 2
### 📝 UN SUJET 1
DES NOTES 1
### 📝 UN ODJ Obligatoire 1
DES NOTES 2
### 📝UN ODJ Optionnel 1
DES NOTES 3
### 📝 UN TRUC PAS PREVU 1
DES NOTES 4
## FAQs
### ❓ UNE QUESTION 1
UNE REPONSE 1
## Versions
### v0.0.2
_date: 00 janvier 0000 | Auteurice2_
* Travail 2
* Travail 3
### v0.0.1
_date: 00 janvier 0000 | Auteurice1, Auteurice2_
* Travail 1

View file

@ -0,0 +1,71 @@
# <UN TITRE ICI>
## Très courte description
<UNE PHRASE ICI>
## Courte description
<QUELQUES PHRASES ICI (optionel)>
## Description
<QUELQUES PHRASES ICI (optionel)>
### Alternatives considérées
* 👀 <ALTERNATIVE 1>
* 👀 <ALTERNATIVE 2>
* 👀 <ALTERNATIVE 3>
### Élements moteur de la décision
* 🧲 <BESOIN 1>
* 🧲 <BESOIN 2>
* 🧲 <BESOIN 3>
## Conclusion
* ✅ **<ALTERNATIVE RETENUE 1>**
* 🤔 **<ALTERNATIVE EVENTUELLE 2 >**
### Conséquences
* 👍 <CONSEQUENCE POSITIVE 1>
* 👍 <CONSEQUENCE POSITIVE 2>
* 👎 <CONSEQUENCE NEGATIVE 1>
### Comparaison (Optionel)
#### <ALTERNATIVE 1>
* 👍 <ARGUMENT 1 PRO>
* 👍 <ARGUMENT 2 PRO>
* 👎 <ARGUMENT 1 CONTRA>
#### <ALTERNATIVE 2>
* 👍 <ARGUMENT 1 PRO>
* 👍 <ARGUMENT 2 PRO>
* 👎 <ARGUMENT 1 CONTRA>
#### <ALTERNATIVE 3>
* 👍 <ARGUMENT 1 PRO>
* 👍 <ARGUMENT 2 PRO>
* 👎 <ARGUMENT 1 CONTRA>
## Aller plus loin
* 🧐 <RESOURCE 1>
* 🧐 <RESOURCE 2>

View file

@ -0,0 +1,85 @@
# Prendre et documenter des décisions
## Très courte description
**Patron de conception** afin de **documenter et justifiés les choix**, par exemple les **choix d'architectures** (**ADR**) dans l'industrie logiciels.
## Courte description
Il existe un patron de conception qui s'applique aux décisions architecturales, [ADR](https://adr.github.io/).
Ce patron peut-être **étendu à tout types de décisions**.
## Par où commencer ?
Voir le modèle proposé ici [_resources/model-decision.md](./_resources/modele-decision.md)
## Description
Les décisions ont besoins d'être **réfléchies** et **documentées**.
Les resources ci-dessous proposent des guides et exemples d'implémentations.
* [Markdown (ADR)](ADRhttps://adr.github.io/madr/) | _propose des modèles et outils pour maintenir une liste de décisions en Markdown_
* [Saisie de décision](https://schubmat.github.io/DecisionCapture/) | _encore des modèles_
#### Définition
##### **Architectural decision (AD)** _Décision architecturale_
**Choix justifié qui répond à une exigence** fonctionnelle ou non fonctionnelle **significative** sur le plan architectural.
Les **décisions d'architecture** répondent à des **exigences importantes** ; elles sont perçues comme **difficiles à prendre** et/ou **coûteuses à modifier**.
##### Architecturally Significant Requirement (ASR)
Les **exigences architecturallement significatives** sont celles qui ont un effet **mesurable** sur l'architecture.
Il s'agit d'**un sous-ensemble d'exigences**, le sous-ensemble qui affecte l'architecture d'un système de **manière mesurable** et **identifiable**.
## En savoir plus
* **ADR**: https://adr.github.io/
* **Saisie de Décision**: https://schubmat.github.io/DecisionCapture/
### Voir aussi
##### Exemples
* https://forge.liiib.re/libre.sh/libre.sh/-/tree/develop/docs
## License
[CC BY-SA 2.0 FR](https://creativecommons.org/licenses/by-sa/2.0/fr/)
### Autheurices
* grincheuxx
* reminec @ acides.org (Tedomum.net)
_Librement traduit depuis adr.github.io_
## Versions
### v0.1.0
_Date : 26 mars 2023 | Temps rédaction : 25min_ | reminec
* Reformatage
* Editions
* Ne concerne plus que les ADR mais toutes les décisions
### v0.0.2
_Date : 17 mars 2023 | Temps rédaction : 30min_ | reminec
* Reformatage
* Editions
### v0.0.1
_Date : 17 mars 2023 | Temps rédaction : 30min_ | reminec, grincheuxx
* Introduction à l'ADR par 2 novices sans experts
## Remerciements
* [PierreO.](https://mastodon.indie.host/@pierreozoux) @ [indiehosters.net](https://indiehosters.net) - Pour avoir soufflé ce patron de conception

View file

@ -0,0 +1,101 @@
# CR-2023-03-17 | Synapse | Tedomum.net
## Très courte description
Infra | Debug | Synapse - Pic d'utilisation CPUs
## Courte description
> _À L'occasion d'une session improvisée de **documentation croisée** : kaiyou debug l'instance synapse de (tedomum.net) qui rencontre des pics CPU. reminec prends des notes pour engrenger du savoir sur synapse / Matrix._
## Description
### Salons #Synapse
**#Synapse** modèlise la **relation** entre les **salons** via un **Graphe Orienté Acyclique** (DAG)[Voir plus bas].
Celui-ci se voit **distribué** et **répliqué** sur les différents serveurs.
> ⚠️ De temps en temps, ce processus peut occasionner des nécessités d'**opérations de maintenance**.
![Schéma de Graphe Orienté Acyclique](https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Tred-G.svg/220px-Tred-G.svg.png)
_Ne boucle pas sur lui même (Ex: les noeuds ne peuvent former un cercle)_
Voir [Wikipedia - Graphe Orienté Acyclique](https://fr.wikipedia.org/wiki/Graphe_orient%C3%A9_acyclique)
#### En savoir plus
* #Synapse Room DAG Concept (https://github.com/matrix-org/synapse/blob/develop/docs/development/room-dag-concepts.md)
* #Matrix - Rooms (https://spec.matrix.org/unstable/rooms/)
### Opérations de maintenance
#### Nettoyage des 'extremites' des salons
#Synapse peut rencontrer quelques défauts dus à la nature distribuée du **DAG** répliqué.
Des **pics de CPUs** interviennent lors de la résolution d'état des salons (room).
Une opération de maintenance peut être nécessaire.
Pour récupérer **la liste des salons à nettoyer**, executer cette requette SQL :
```sql
select room_id, count(*) c from event_forward_extremities group by room_id order by c desc limit 20;
```
Puis appeler l'API dédiée à cette effet
```sh
synadm DELETE 'v1/rooms/!fzfHhoTplYBEXfWOaI:matrix.org/forward_extremities'
```
### Bug connu
#### #Synapse - 'Extremites' des salons qui grossissent
Status : Ouvert
##### Description
_Le souci est toujours celui-là : https://github.com/matrix-org/synapse/issues/1760_
Il y a toujours des **défauts** dus à la nature distribuée du DAG répliqué, et l'algo de résolution d'état pour une room qui **explose en performances quand le nombre d'extrémités** (occurrences du défaut si l'on veut) **grandit**.
##### Correction
* **opération de maintenance** régulière : Nettoyage des extremities des salons
##### Détection
* pic de CPUs
### Définitions
#### Graphe Orienté Acyclique
**English** : _Directed acyclic graph_
Grosso modo un DAG c'est un arbre dont les branches peuvent se croiser, mais qui va dans une direction globale et ne boucle pas sur lui même.
[Illustration d'un DAG Graphe Orienté Acyclique]
##### Exemples
Un historique git.
##### En savoir plus
https://fr.wikipedia.org/wiki/Graphe_orient%C3%A9_acyclique
## Licenses
CC-BY-SA
## Auteurices
* kaiyou @ acides.org (Tedomum.net)
* reminec @ acides.org (Tedomum.net)
## Versions
### v1.0.1
_Date: 18 mars 2023 | Temps : 5min_
* Corrections mineurs sur le formatage
### v1.0.0
_Date : 17 mars 2023 | Temps rédaction : 1h_
* Initialisation du document & formatage

View file

@ -0,0 +1,281 @@
# Atelier 18 mars 2023
## Très courte description
CR | Atelier | Gestion de communauté (Mastodon/Matrix), gitlab runner
## Participant⋅es
* ✅ kaiyou 🧪 [ACIDES.org](https://acides.org) 🏴‍☠️🌈 [Tedomum.net](https://tedomum.net)
* ✅ reminec 🤪 | 🧪 [ACIDES.org](https://acides.org) 🏴‍☠️🌈 [Tedomum.net](https://tedomum.net)
## Ordre Du Jour (ODJ)
* 👋 Tour de table
* 📌 reminec présente et **candidate** pour un projet **ACIDES.org**
* 📌 **mise en place d'un salon vocal** dans l'**espace Matrix** Tedomum
* 📌 **mise en place** d'un **runner gitlab** sur le cluster kubernetes **kity**
* 📌 **Build** de l'image Element via le runner
* 📌 **M.à.j** du service Element
* 👋 Conclusion | 🕑 0-10min
## Description
L'atelier a durée ~1h15
### 📝 #Candidature #ACIDES
> * reminec **présente** l'ébauche de son initiative qu'il veut animer au sein du labo [ACIDES.org](https://acides.org).
> * kaiyou **approuve l'initiative** et le fait de la ranger sous le labo [ACIDES.org](https://acides.org)
L'ébauche se compose pour le moment d'une équipe ```lost-in-learn``` sur une instance cryptpad(😍) hébergée chez deuxfleur.fr
#### Présentation
[Voir le index.md](https://git.deuxfleurs.fr/ACIDES-hlilo/hlilo-website/src/branch/develop/data/pages/index.md)
#### A faire
* 📌 Trouver un nom qui respecte la convention posée par acides.org
* 📌 Mettre en place un espace Matrix
### 📝 #Tedomum
💡 Tedomum possède un **salon public** pour les **alertes de monitoring**.
#### 📝 #Tedomum - Gestion de communauté (#COMA)
_⚠ Attention à ne pas diluer le contenu tant qu'il n'y pas nécessité de segmenter_
##### 📝 #Mastodon
###### Tâches à réaliser
* 📌 Il faut au moins distinguer 2 comptes
* **Compte COMA** : Utiliser pour la communication externe
* **Compte status des services** : Utiliser pour annoncer les interruptions de services, les services actuellement en défaut.
###### Idées
* ⚖️ Il doit être possible de brancher les alertes de monitoring sur le compte mastodon dédiés au suivis des services.
* ⚠️ _Attention toutefois à ce que le monitoring ne flood pas les envois_
##### 📝 Salons Matrix
###### Tâches abouties
* ✅ **Salon vocal/visio créé** (Le salon vocal possède une zone de tchat écrit)
* ⚠️ Le **partage d'écran** ne marche que dans le **client Web**
* ✅ Salon ajouté à l'espace matrix Tedomum
* ✅ **Ajout des droits d'admins** de reminec sur les espaces Tedomum et ACIDES.
###### Tâches à réaliser
* 📌 Revoir la consistence dans le nommage des Espaces / Salons (et leur alias) | _S'inspirer de NixOS qui joue avec une arborescence de nommage._
Le but recherché est de **favoriser la distinction** entre le **salon général**, et l'**espace d'accueil**.
#### 📝 #Tedomum #K8s #Kity
* 💡 Le noeud Bambino est le moins sollicité.
##### Tâches effectuées
* ✅ Nouveau namespace ```tedomum-runner```
* ✅ Push du travail en l'état sur le repo FluxCD (HelmChart gitlab-runner)
* ✅ Nous avons **désactivé le runner global** pour taper sur le runner nouvellement mis en place.
* 💡_Nous avons un **runner global** hébergé en **dehors kity** (sur Japet, un dédié OVH pour les builds)._
~~**runner non fonctionnel en l'état**~~
### 📝 #K8s, #Gitlab & #GitlabRunner
> * 📝 Version déployée chez Tedomum au jours de l'écriture : gitlab-v15.9.3
> * 🔗 https://docs.gitlab.com/runner/executors/kubernetes.html
#### 📝 #HelmChart | gitlab-runner
* 🔗 https://artifacthub.io/packages/helm/gitlab/gitlab-runner
##### values.yaml
* ✅ Personnalisation des valeurs suivantes :
* gitlabUrl
* runnerRegistrationToken
* runnerToken
* concurrent
* nodeSelector
_WARNING: Support for registration tokens and runner parameters in the 'register' command has been deprecated in GitLab Runner 15.6 and will be replaced with support for authentication tokens._
#### Difficultés rencontrés
##### Documentation & dépréciations
La documentation gitlab est un tantinet brouillonne :
* 🚨 L'ancienne façon d'enregistrer un runner est **dépréciée**.
* ⚠️ La nouvelle façon est documentée, mais **pas encore livrée dans l'interface** (prévu pour v15.10.x)
##### Vrac de la séance
###### 🪚 Premier essai - build Element via le runner
❌ Échec - Le build est plannifié sur le noeud chez Orlinum.
💡 #Tedomum #Kity Pas de traffic sortant depuis le noeud Orlinum.
> WARNING: The 'register' command has been deprecated in GitLab Runner 15.6 and will be replaced with a 'deploy' command. For more information, see #380872 (closed)
> The register command will be preserved with some changes, which should limit the impact to users.
_nodeSelector : Page de doc en 404 https://kubernetes.io/docs/user-guide/node-selection/_
###### 🪚 Deuxieme essai
* ⚠️ Échoué car il cherche à dialoguer via ipv6, non dispo pour le moment dans le cluster.
Après investigation, c'est la résolution DNS du cluster qui échouait pour 1/3 requtes, puisqu'un des pods du cluster-dns était sur un noeud dont le DNS était configuré en IPv6 mais ne disposant pas d'IPv6.
✅ En corrigeant le resolv.conf du noeud pour fournir un nameserver en IPv4, l'ensemble est reparti.
## Connaissances
### Vocabulaire
#### 👩‍🎓 Race condition
L'un dépend de l'autre mais la dépendance n'est pas respectée pendant l'execution.
#### 👩‍🎓 COMA - COmmunity MAnagement
Gestion de communauté
### 👩‍🎓 SOPS - Secrets OPerationS (by Mozilla)
#### Très courte definition
Permets de **chiffrer/déchiffrer** du texte ou du binaire.
#### Description
Il gère nativement les formats de fichiers suivants en **préservant les clefs** :
* json
* yaml
* env
* ini
Alternative à :
* ansible-vault
* HashiCorp vault
#### Voir plus loin
* https://blog.stephane-robert.info/post/devops-secret-sops/
### 👩‍🎓 lunarVim
Une configuration de neoVIM
### 👩‍🎓 bat
#### Courte Description
Clone de ```cat```, avec :
* La gestion de coloration de syntaxique
* l'intégration de git
* l'affichage des caractères non imprimable
* pagination automatique
#### Voir plus loin
* https://github.com/sharkdp/bat
## FAQ
### #Gitlab & #GitlabRunner
###### ❓ Est-ce que le nodeSelector est pour les builds ou pour le runner lui même ?
###### ❓ Comment choisir les noeuds sur lesquels les builds seront lancées ?
###### ❓ Comment on crée un runner via l'interface ?
L'ancienne façon est encore disponible, mais dépréciée.
La nouvelle est documenté mais pas encore livrée dans l'interface.
https://docs.gitlab.com/ee/architecture/blueprints/runner_tokens/
> Gitlab 15.9.x ne possède pas encore l'UI pour faire face à la dépréciation de l'ancienne façon.
> _Prévue pour v15.10.x_
###### ❓ Comment on configure un #GitlabRunner via le #HelmChart ?
* ✅ Il faut écrire un ```config.toml```,
* 🚨 c'est **déprécié** via le ```values.yaml```.
## #Astuces
### #Matrix
#### 💡 Salon de monitoring
Comme les salons sont distribués et répliqués entre les instances, il est recommandé de **rejoindre le salon de monitoring** avec un **2e compte hébergé ailleurs** que sur l'instance monitorée. Ainsi, les **messages seront consultable** via cette autre instance.
## Post-Scriptum
### 🤔 Evaluer la valeur ajoutée de l'atelier et du rendu
* la **pertinence d'un tel document**
* la pertinence de **prendre un temps imprévu** pour aborder des **sujets connexes** à l'atelier si ça **consomme du temps précieux** pour la réalisation de la **tâche initialement prévue**
### ⚖️ Réutilisation du contenu
Il y a t'il moyen de nourrir, extraire, et faciliter une curation de contenu via une convention qui se dessine :
* Objet
* Duree
* Topos
* Tâches
* aboutie
* effectuée
* à réaliser
* Difficultés
* Connaissances
* Vocabulaire
* Astuces
* FAQ
Dans l'idée, ça nourrit au moins une section 'Quoi de neuf chez Tedomum' via l'```objet``` qui se transformerait en ```titre``` et le ```topos``` en ```description```.
### ❓ Est-ce pertinent de vouloir s'approcher d'une documentation croisée dans un atelier où il est prévu de tomber des tâches ?
Choix cornélien qui se dessine :
* Peut-être opportun de ralentir un chouilla le rythme ?
* Au contraire, laisser filer
* Peut-être un mélange des 2 au cas par cas ?
## Licenses
CC-BY-SA
## Crédits
### Auteurices
* reminec 🤪 | 🧪 [ACIDES.org](https://acides.org) 🏴‍☠️🌈 [Tedomum.net](https://tedomum.net)
### Relectures
* kaiyou
## Versions
### v1.1.0
_Date: 30 mars 2023 | Temp rédaction : 30min | reminec_
* reformatage avant publication
### v1.0.0
_Date : 18 mars 2023 | Temps rédaction : 3h30 | reminec_
* Prise de notes durant l'atelier
* Interviews de kaiyou pour approfondir
* Enrichissement
* Formatage
## Remerciements
**kaiyou @ acides.org (Tedomum.net)** | Pour son expertise et le temps pris pour s'arrêter sur des sujets connexes à l'atelier.

View file

@ -0,0 +1,62 @@
# Pseudo
## Très courte description
Une ligne
## Description
Un ou plusieurs petit paragaphes.
## Occupations
### Une activité
Description de l'activité
### Une autre
### ...
## Profiles
* Fédiverse
* [Mastodon](https://xxx.yyy/@pseudo) | `@pseudo@xxx.yyy`
* Matrix
* Profils:
* `@pseudo:xxx.yyy`
* Me retrouver :
* [adresse](https://liendinvitation)
* forges
* https://git.xxx.yyy/pseudo
* forum
* https://forum.xxx.yyy/u/pseudo
## Détails
* 👀 Observe
* #...
* 🤔 Intention
* #...
* 🧐 Intéresse
* #...
* 🤓 Maitrise [---/+++]
* [-+] #...
* 🛸 Découvre
* #...
* 🪚 Pratique [---/+++]
* [-+] #...
* 😤 S'Indigne
* #...
* 😊 Espère
* #...
* ⚠️ Propension
* #...
* 😕 Remarque
* #...
* 🤨 Constate
* #...

View file

@ -0,0 +1,211 @@
# reminec
## Très courte définition
Ne travail plus à sa propre perte 😕 | Part vite dans la lune pour tout le reste 🤩
## Description
Trouve qu'on s'y prend gauche pour nos _engagements_.
Succincte liste :
1. Le rapport à l'autre, _c't'honte_ !
2. Le bouleversement climatique
3. Les tensions sur des _ressources_ finies
Nous trouvant bien malàdroite ;
Tente des trucs pour
* Faire face au 2. et 3.
* En commençant par régler le 1.
* Rester calme _~~Vieux cons !~~_
Parole de gaucher !
## Occupations
### ACIDES/hlilo 🧪 Labo [ACIDES.org](https://acides.org) 🏴‍☠️🌈 [Tedomum.net](https://tedomum.net)
#### Courte Description
_Hyper lost in learning, Overview_
> `ACIDES/hlilo` est une initiative pour tenter de facilité la croisée entre l'apprentissage et la pratique.
> C'est pour l'instant un endroit où quelques zinzins contribuent ensemble ;
> Ça pourrait aussi être un bidule culturel où l'on fabrique des trucs.
>
> _Bref ... ;_
Ça se passe sur l'**espace Matrix [#acides-hlilo:tedomum.net](https://matrix.to/#/#acides-hlilo:tedomum.net)** et les **salons recommandés**.
#### Voir aussi
> Laboratoire dinformatique démocratique, éthique et solidaire
>
> ACIDES (actions collectives pour une informatique démocratique, éthique et solidaire) est une initiative de soutien technique et logistique aux actions collectives locales pour une informatique plus adaptée à notre société et nos besoins. Plus démocratique, donnant à chacun sa place dacteur plutôt que dutilisateur, sa responsabilité et le contrôle des moyens mis en œuvre pour répondre à ses besoins. Plus éthique, au-delà de la licéité, en proposant et en reposant sur des modèles moraux dont les hypothèses, les choix et les limites sont explicités. Plus solidaire, en renforçant les possibilités et en incitant à lentraide entre acteurs modestes de lInternet.
>
> ACIDES na pas de forme légale établie. En tant que collectif de fait, nous privilégions laction : il sagit de participer pour y disposer dune voix. Toute forme de participation est la bienvenue, pas exclusivement technique ; la critique et les retours dexpérience sont les formes les plus précieuses de participation sur lesquelles nous comptons. En revanche, nous ne menons pas de réflexion exclusive, il sagit de prototyper, de publier, de documenter, afin de contribuer aux actions collectives.
### Offlure2023 (12-14 mai 2023)
#### Description
_Site en chantier, sortira-t-il un jour ?_
Offlure2023 est un évènement à côté du [NESP2023](https://www.nesp2023.com/appel-national).
> [NESP2023](https://www.nesp2023.com/appel-national) :
>
> _Nous, collectifs, coordinations, organisations syndicales, associatives et politiques, décidons de converger pour reconquérir nos services publics afin de faire de la lutte pour leur défense, leur développement et leur démocratisation un combat central pour les décennies à venir. Par cette dynamique pluraliste nous souhaitons notamment engager le débat public sur le choix de société que nous souhaitons._
[Signer l'appel !](https://www.nesp2023.com/appel-national)
### Culture & Mediation numérique
#### Description
**Accompagnement** d'un collectif _(p'tit label de musique indépendant)_ ;
Dans la **compréhension** et l'**usage** du numérique.
Ce qui devrais m'amener en toute logique à :
* Apporter une dose de **culture numérique**
* Apporter une dose d'exertises
* **documentation d'usages**
* des **conseils**
* des **formations**
* **Prendre le temps**
* Avant de déployer un outil
* Pour prendre du recul sur ceux déjà en place
* **Imaginer** des trucs
* **Pratiquer ensemble**
* Pour prendre en main les outils
## Profiles
* Fédiverse
* [Mastodon](https://mastodon.tedomum.net/@reminec) | `@reminec@mastodon.tedomum.net`
* Matrix
* Profils:
* `@reminec:tedomum.net`
* Me retrouver :
* [#tedomum:tedomum.net](https://matrix.to/#/#tedomum:tedomum.net)
* [#acides-space:tedomum.net](https://matrix.to/#/#acides-space:tedomum.net)
* [#acides-hlilo:tedomum.net](https://matrix.to/#/#acides-hlilo:tedomum.net)
* forges
* https://forge.tedomum.net/reminec
* https://git.deuxfleurs.fr/reminec
* forum
* https://forum.chatons.org/u/reminec
## Détails
* Observe
* @CHATONS
* @Framasoft
* #Education
* #Apprentissage
* #CultureTropRare
* #Malveillances
* #ACIDES
* #DesTrucsLunaires
* #PasDeMedNumSansCulture
* #ServicesDifficilementPublic
* #EtatPlusTresSocial
* #MacherSurLaTete
* #CestMieuxSurLesPieds
* #LesMafieuxBienSapes
* #ThierryBreton
* #...
* #EmmanuelMacron _(Fond du panier)_
* #LesMafieusesTropPolies
* #AnneLauvergeon
* #MyriamElKhomri
* Intentions
* #Collaborer
* #Partager
* #Pratiquer
* #Apprendre
* #FairedesTrucsCool
* #StopAuxTrucsMoches
* #EnAvant _(Vu qu'on court derrière)_
* #EcouterDeLaTechno24h _(si j'veux)_
* #CritiquesAutoCritiques
* #Penser
* #Impensées
* Intéresse
* #Fédiverse
* #EntreHebergement
* #K8s
* #WebSemantic
* #ActivityPub
* #CultureEtMedNum
* Maitrise [---/+++]
* [ - ] #Scss
* [-+] #Css3
* [ +] #Html5
* [-+] #Ansible
* [-+] #Docker
* [ +] #DockerCompose
* [-+] #Traefik
* [-+] #ApiPlatform
* [ +] #Symfony
* [ +] #Php
* Découvre
* #Coma _(COmmunity MAnagement)_
* #Pédagogie
* #Git _(Quand c'est bien fait)_
* #React
* #NextJS
* #StaticCms
* #ArchitectureLogiciel
* #GestionDeProjet
* Pratique [---/+++]
* [ +] #LinuxDebianUbuntuLinuxMint
* [-+] #Programmation
* [-+] #ArchitectureLogiciel
* [-+] #GestionDeProjet
* [-+] #COMA
* [-+] #CultureEtMedNum
* S'Indigne
* #Lâcheté
* #MauvaiseFois
* #CoupDeSang
* #PrendreDesGensPourDesCons
* #PrendreDesGensPourDesIncapables
* #OppressionsDansleBoulot
* #OppressionsToutCourt
* #QuandOnSaitPasDireOups
* Espère
* #FaireRedescendreLesSattelisés
* #FaireDecollerLesTerreATerre
* #EntreHebergement
* #AcidesHepto
* #ACidesHlilo
* #AcidesHopto
* #PleinDeReves
* #PleinDeRaves
* Propension
* #Indigner
* #Enthousiasmer
* #Sarcasme _(Cherche à bien le doser)_
* #Satire _(itou)_
* #TraitsDEsprits
* #BoireTropDeCafés
* #ManquerDeNicotine
* Remarque
* #MacherSurLaTete
* #NeSaisPasMarcherSurLaTete
* #NeVeuxMemePasEssayer
* #JeContinueDeDireQueCestUnEchec _(vu que ça n'a pas marché)_
* Constate
* #SeDroguerAuCafé
* #MarcherSurLaTete
* #CaMarchePas
* #CaFaitMalALaTete

View file

@ -0,0 +1,26 @@
# Changer l'adresse d'un salon Matrix
### Description
1. Aller dans les **paramètres du salon**
2. Trouver la section `Adresses des salons` et les `Adresses publiées`
1. **Dépubliée l'adresse principale** (en sélectionnant `non spécifiée`)
2. **Afficher** la liste des **adresses locales** (`en savoir plus `)
1. **Supprimer** l'ancienne adresse
2. **Ajouter** votre nouvelle adresse
3. **Vérifier** qu'elle est publiée où la **publier** si nécessaire.
## Licenses
CC-BY-SA
## Auteurices
* reminec 🤪 | 🧪 [ACIDES.org](https://acides.org) 🏴‍☠️🌈 [Tedomum.net](https://tedomum.net)
## Versions
### v1.0.0
_Date : 19 mars 2023 | Temps rédaction : 20min | reminec_
## Remerciements

296
data/pages/index.md Normal file
View file

@ -0,0 +1,296 @@
# ACIDES/hlilo 🧪 Labo ACIDES.org 🏴‍☠️🌈 Tedomum.net
## Très courte Description
**H**yper **L**ost **I**n **L**earning, **O**verview. | 🧪 Labo de culture contributives
> Traduction en français : _Complètement perdu dans l'apprentissage, vue d'ensemble._
## Courte Description
`ACIDES/hlilo` est une **initiative pour tenter de faciliter la croisée entre l'apprentissage et la pratique**.
Des **#Ateliers** plus ou moins prévu à l'avance ; sur des **#Projets** libre.
C'est pour l'instant un **endroit** où quelques **zinzins contribuent ensemble** ;
Ça pourrait aussi être un **bidule culturel** où l'on essaye de **fabriquer** des trucs.
De ce fait, on va **réviser son anglais**, en tentant de **poser du français** dessus.
## Description
Dans les _vagues motivations_ qui trottent dans `ACIDES/hlilo` on y trouve l'**envie** d'**apprendre**, **pratiquer** et **contribuer** à des **projets** existants(🐈) ou à imaginer(🏴‍☠️🌈).
Par **convergences d'affinités, de besoins, d'envies**, les membres **se retrouvent au sein d'#Ateliers**.
On distingue 2 **familles** d'**#Ateliers** :
* Les **#AtelierSauvage** un peu tout le temps (Voir [Fonctionnement](#fonctionnement))
* Les **#AtelierATheme** sont _+/-_ **plannifiés en avance** afin d'être **annoncé**.
``` mermaid
flowchart TD
Occupe[Déjà occupé ?] -->|Oui| PlusTard[On s'voit plus tard]
Occupe -->|Non| AtelierEnCour[#Ateliers en cours ?]
AtelierEnCour -->|Oui| Interesse[Intéressé par l'#Ateliers ?]
Interesse -->|Oui| Rejoins[Rejoins l'#Ateliers]
Interesse -->|Non| idee[Ouvre un #Ateliers]
AtelierEnCour -->|Non| idee[Une idée ?]
idee -->|Pas d'idée| ideeNon[Demande à l'agent #AtelierSVP]
idee -->|Tout à fait| Atelier[Ouvre un #Ateliers]
ideeNon -->Rejoins
Atelier -->Rejoins
```
### Comment se déroule les #Ateliers ?
Voir la section dans [Description](#description)/[Fonctionnement](#fonctionnement)/[Les Ateliers](#les-ateliers).
## Par où commencer ?
_**C'est encore l'binz ici 😬**._
0. L'idée est pour le moment **rejoindre l'espace Matrix [#acides-hlilo:tedomum.net](https://matrix.to/#/#acides-hlilo:tedomum.net)** et les **salons recommandés**
1. Vous arrivez depuis l'espace CryptPad(😍) ?
* 🔗 _Bientôt un guide pour rejoindre Matrix_
* #Ateliers prévu semaine 14 pour l'écrire (https://framadate.org/EHioQxwDwwSrxopR)
Si vous voulez **comprendre le sens** de tout ça, le mieux est encore de lire **les sections [Description](#description)/[Fonctionnement](#fonctionnement)**.
_Bientôt a priori, un groupe mobilizon pour les #AteliersATheme_
En attendant, on tâche d'être exhaustif dans les sections **Feuilles de routes** et **Liste des tâches** ci-dessous 👇
### Feuille de route
[Feuille de route](https://git.deuxfleurs.fr/ACIDES-hlilo/hlilo-website/milestones) pour mettre en place le bouzin.
### Liste des tâches
* Tableaux
* Par projets
* Pour `#ACIDEShliloWebsite`
* [le tableau sur la forge](https://git.deuxfleurs.fr/ACIDES-hlilo/hlilo-website/projects/13)
* sur l'instance cryptpad(😍) | [Le tableau à la racine du disque](https://pad.deuxfleurs.fr/kanban/#/2/kanban/view/WBOQHX3e+HbMb6FZzv0CPf4eBRcR5+l-0NR7CGEl3RE/)
* Pour `#Offlure2023Website`
* [Le tableau sur la forge](https://git.deuxfleurs.fr/reminec/offlure2023-website/projects/11)
* Bientôt sur cryptpad(😍)
* Nouveautés
* [Sur la forge logiciel gitea](https://git.deuxfleurs.fr/ACIDES-hlilo/hlilo-website/activity)
* [Sur l'espace Matrix](https://matrix.to/#/#acides-hlilo:tedomum.net) salon ACIDES::hlilo::Journaux
* Moins à jours (La [liste des nouveautés](https://pad.deuxfleurs.fr/code/#/2/code/view/RPoLWljPwpHKusdq8zsLL3b17pqgglFVxvX2e6G1k48/) de l'espace de travail)
### La trousse à outils
##### Cryptpad(😍)
Outil pour **collaborer à plusieurs** et **en même temps** sur :
* Des saisis de **#DocumentMD** (Comme celui-ci)
* Des **#Formulaires**
* Des **#Tableaux**
* ...
###### Astuces
* 💡 Cryptpad(😍) permet entre autre de **📷 Capturer** une `versions` pour en garder l'**Historique**.
* 💡 Pour écrire sur un **#DocumentMD** au format `.md` (Markdown) sur Cryptpad(😍), vous devez selectionner **Nouveau** -> **Code**.
##### Gitea - Forge logiciel
Outil pour **construire** et **publier** une `base de connaissance`.
##### Un agent
Qu'on ressucite ```Clippy```, ou qu'on le croise sur un salon Matrix, cet `agent 🤖` vous accompagnera dans l'animation des #Ateliers.
### Fonctionnement
#### Publication sur une `base de connaissance`
``` mermaid
flowchart TD
P[Outil pour créer/éditer/collaborer à plusieurs sur du contenu ?] --> F
F[Utiliser Cryptpad] -->|Utilisé pour prises de notes, etc | Version1{Fichiers >=v1.0.0 ?}
F -->|Pas utilisé| FNon[Pourquoi ?]
Version1 -->|Oui| Version1Oui[Demande de fusion dans la forge numérique]
Version1 -->|Non| Version1Non[Capture v.0.x.y]
Version1Non -->|Tant que| Version1
Version1Oui -->Demande{Relecture et appréciation}
Demande -->|Corrections si nécessaire|Demande
Demande -->|Validation|End[Publication dans une base de connaissance]
```
#### Les Ateliers
Des **#Ateliers** sont _+/-_ **organisés** ; _a peu près_ **n'importe quand**, à priori **en distanciel**, avec l'aide d'un ~~concierge~~ `agent 🤖` :
* Une sorte d'**animateur**
* ⏰ Organise des pauses, les annonces.
* ⌚ Permets à celles et ceux qui souhaitent de rejoindre/continuer à la reprise de l'#Ateliers
* 💡 _Moment **usuellement recommandé** pour **accueillir/présenter/rejoindre** les **#Ateliers**_
* 🚸 _La maman ci-dessous 👇 permet de gérer le raffus dans les couloirs_
* Aussi maman/**animatrice**
* **Presente les projets**
* 📎🗄️ _Aide à retrouver où on a perdu la liste des trucs à faire_
* **Presente les #Ateliers**
* 📝✂️ _Distribue crayons et ciseaux pour **copier/coller**, si jamais..._
* **T'accompagne dans les #Ateliers**
* 🫢🕰️ _Peut faire un mot d'excuse si t'as raté le début_
* Faiseureuse de joyeuses rencontres
* 👨‍❤️‍👨 **Presente et accueil les membres**
* 🔀 Essaye de **faciliter** les **#AtelierSauvage** ou la prévision/communication d'**#AtelierATheme**
* 📅 _prends des #RDV ~~chez le dentiste~~ pour les **#AtelierATheme**_
* Et si **rencontre tendue** ?
* `!hocto `(gone) 🤼
##### 👩‍💼📝 #Ateliers de Documentation croisée | #AtelierDocCroisee
> La **documentation croisée** est un format dans lequel un “**expert**” instruit un “**novice**” qui en échange **produit une recette** sous licence libre.
> #### Pourquoi faire ?
> **Transmettre et documenter des savoirs** en même temps
_Source : https://www.metacartes.cc/faire-ensemble/recettes/documentation-croisee/_
``` mermaid
flowchart TD
Atelier[Atelier] -->F{Saisie et formattage de contenu}
F -->|Partager le contenu| Publication[Processus de Publication]
F -->|Pas de contenu| FNon[Ce n'est pas un #AtelierDocCroisee]
```
##### 🪚📐 #Ateliers de pratique | #AtelierPratique
On tente de faire avec ce qu'on sait 🤔; ou presque 🤨.
Aussi, on fait des **#DocumentMD** et on essaye de les **publier**.
##### 📡🛸 #Ateliers de découverte | #AtelierDecouverte
On tente de comprendre ce qu'on fait 🤯 ; tout en ne comprenant pas ce qu'on lit 🧐 ~~en anglais~~.
Aussi, on fait des **#DocumentMD** et on essaye de les **publier**.
##### 🤕🚑 #Ateliers de dépannage | #AtelierDepannage
On tente de dépatouiller des membres en galère 😤 ;
En échange le/la dépatouillue r'mets au propre sa problématique et la solution, si elle existe.
``` mermaid
flowchart TD
Atelier[Atelier] -->F{Saisie et formatage de la Question/Reponse}
F -->Publication[Processus de publication]
F -->|Pas de saisie| FNon[Ce n'est pas un #AtelierDepannage]
```
##### ⌨️🖥️ #AtelierJAM
Vous situez des ~~_punks_~~ zicos _~~qui n's'arrêtent jamais~~_ en apéro avec des instruments ? 🎸🥁🍻
La même chose derrière un clavier pour faire des trucs. ⌨️
##### 🖱️🎮 #AtelierJeux - Atelier Jeux
Vous situez des zicos _~~qui n's'arrêtent toujours pas~~_ en apéro avec des instruments ? 🗣️🍻🍻🥁
La même chose derrière clavier/souris/manette. ⌨️🖱️🎮
##### Historique
> * En hommage à une Dj `Lost In House` pour ses [télé-diffusion depuis son salon](https://www.twitch.tv/lost_in_house) _et en chaussette_
> * En hommage à un collectif `Lost in médiation` constitué de chercheureuse et travailleureuse pour leurs publications
* Comme celle ci : [Où est donc passée la culture numérique ?](https://framablog.org/2023/03/16/ou-est-donc-passee-la-culture-numerique/)
Dans la vague idée d'un endroit pour saisir du contenus et des lignes de codes.
#### Règles du jeu
Le respect des personnes, des divergences, est requis.
##### Les Licences pour les contenus
Les contenus présents ici sont placés sous la licence ```CC-BY-SA```.
License contagieuse qui permet la libre réutilisation (potentiellement commerciale) desdits contenus.
Les codes sources devrait, à priori, être publié sous la license `AGPLv3+` (voir sur la forge logiciel).
##### Versions
Merci de tendre au mieux vers un versionnement du type ```v1.2.3```
1. Ajout/Corrections majeur
2. Ajout/Corrections moyennement majeur
3. Ajout/Corrections mineur
* Cryptad(😍) gère les 📷 **captures** (snapshots) `v0.1.2`
* Git pour le reste.
### FAQ
###### Pourquoi un 'Disque' sur cryptad(😍) plutôt qu'une forge de logiciel ?
Dans l'idée d'accueillir des personnes utilisateurices d'outils numérique mais non qualifiées pour s'intégrer dans une forge de logiciel.
Une sorte d'accueil avant d'arriver à rejoindre l'espace Matrix.
Aussi, c'est un merveilleux outil pour commencer à s'organiser et partager.
On verra le reste ensuite...
###### Pourquoi le contenu est en français ?
Approcher et intégrer une notion ou un savoir est déjà difficile en soit.
La **gymnastique** intellectuelle **requise** par l'utilisation d'une **langue non-maternelle** peut-être un **frein** dans les **chemins d'aprrentissage**.
Aussi, **reformuler une explication** depuis la vue 'novice' est un **exercice** qui participe à l'**aquisition du savoir** ou de la **notion**.
### En savoir plus
* [Diataxis.fr](https://diataxis.fr) propose un cadre de travail pour la rédaction de la documentation technique.
* Jean-Michel Cornu - [chaîne sur la coopération et l'animation de groupes et de communautés qui présente en particulier les "trucs d'animation"](https://www.youtube.com/c/jmichelcornu)
## License
[CC BY-SA 2.0 FR](https://creativecommons.org/licenses/by-sa/2.0/fr/)
## Credits
### Auteurices
* reminec 🤪 | 🧪 ACIDES.org 🏴‍☠️🌈 Tedomum.net
* (v0.x) grincheuxx
### Relectures
* Trollune
* Grincheuxx
### Soutient
* tedomum.net
* deuxfleurs.fr (instance git et cryptpad)

View file

@ -0,0 +1,65 @@
# Saisie de contenu texte interprété en Markdown (Tags, FrontMatter)
## Courte Description
Interprétation du contenu au format Markdown, utilisation du FrontMatter, et des tags.
## Description
### Processus
``` mermaid
flowchart TB
Saisie["Saisie de texte"] --> |Représenter comme| Arbre("Un arbre noeudal MD")
Arbre --> |Parcours les noeuds| ProchainNoeud("Noeud")
subgraph Analyse d'un noeud
ProchainNoeud -->|Extraction de| Tags("Tags (#FichePratique #OutilsVisio)")
ProchainNoeud -->|Extraire les| MetaNoeud("Métadonnées du noeud")
ProchainNoeud -->|Extraire le | ContenuNoeud("Contenu")
ContenuNoeud -->|Extraction d'autres| MetaNoeud("Métadonnées")
Tags-->|Ajout au| MetaNoeud
ContenuNoeud --> ContenuFM("ContenuMD et FrontMatter")
MetaNoeud --> ContenuFM
end
subgraph Publication du noeud
ContenuFM -->|Interpréter| Objet("Interprétations")
Objet -->|Publier| Rendus("Différentes Vues")
end
```
#### Comportements
```gherkin-fr
Fonctionnalité: …
Dans le but de pouvoir saisir du contenu texte et de pouvoir le réutiliser
En tant qu'utilisateurice novice ou avancé
Je veux pouvoir écrire du Markdown via un éditeur, accéder à la source, le prévisualiser.
Je peut aussi avoir la main sur les métadonnées du contenu (ex: FrontMatter).
Je peut avoir un usage avancé des Tags (ou Hashtags).
Je peut avoir un usage naturel du balisage et des métadonnées
Je veux que la plupart de mon contenu saisi puisse être réutilisable
Je veux donc que la plupart de mon contenu saisi puisse être analysé, interprété, rendu.
Règle: Saisie de contenu texte interprété en Markdown
Background: ~
Scénario: Saisie d'un contenu texte
Étant donné un contenu 'sample.md'
Quand le contenu est publié
Alors il a été interprété en Markdown
Règle: Analyse et interprétation des tags
Background: ~
Scénario: Saisie d'un document texte avec des Tags
Étant donné un contenu 'FichePratique-OutilsVisio.md'
Et une métadonnée 'tags' qui contient '["DocumentMD", "OutilsVisio", "FichePratique"]'
Quand le contenu est publié
Alors il a été interprété en Markdown
Et on peut le retrouver par son tag '#FichePratique'
Et on peut le retrouver par ses tags '#FichePratique #OutilsVisio'
```gherkin

View file

@ -0,0 +1,42 @@
# Analysie et Interprétation des émojis
## Courte description
Je veux pouvoir utilisé des Emojis pour qualifier du contenu dans un #Sujet.
## Description
### Processus
``` mermaid
flowchart TB
```
### Comportements
```gherkin-fr
Fonctionnalité: Analyse et interprétation des emojis et des hashtags
Dans le but pouvoir qualifier un contenu, par exemple une 'astuce ou 'une alerte'
En tant qu'utilisateurice qui saisie du contenu Markdown
Je veux que lorsque ma ligne commence par l'emoji '💡 suivi d'un contenu qui contient le #Sujet'
Je peut retrouver cette 'astuce' dans la page relative au '#Sujet'.
Je veux aussi que mon ou mes sujets puissent être trouvé via le context
Règle: Interprétér l'émoji 💡 en début de ligne comme une astuce.
Background: ~
Scénario:
Étant donné un contenu 'FichePratique-OutilsVisio.md'
Et un contenu 'FichePratique-OutilsVisio.md'
Quand le contenu est publié
Alors il y a une astuce (💡) sur le tags
```gherkin

View file

@ -0,0 +1,53 @@
### Rédacteurice en chef
## Description
``` mermaid
flowchart TB
#### Configurer différentes vues (Versions) grace aux métadonnées
```gherkin-fr
Fonctionnalité: …
Dans le but de pouvoir avoir la main sur la publication du contenus
En tant que rédacteurice en chef
Je veux pouvoir étendre/creer/modifier/supprimer/forcer des regles sur des inclusions ou références de contenus
Je veux pouvoir via ces règles configurer la granularité du contenu inclus et/ou publié (ex: une courte, ou une très courte description ?)
Je veux pouvoir via ces règles proposer d'activer/désactiver des vues (aussi appelées, versions). (ex: suggest: 'Désactiver propos sarcastiques ?', version: '@reminec')
Règle: >
Une metadonnée "Pré-requis" peut-être ajoutée à du contenu (via 'prereqs:')
Un contenu texte peut référencer des autres contenus
On pensera a mettre une regle ici pour definir comment on référence pas comme des porcs
On choisi alors si le contenu est Lier/Prévisualiser/Citer/Inclus.
On choisi aussi son niveau de granularité
On espère pouvoir avoir la main sur l'analyse du contenu
On espère avoir la main sur l'extraction de contenu
On espère avoir la main sur le reformatage du contenu extrait
Background:
Étant donné un contenu 'FichePratique-OutilsVisio.md'
Et une métadonnée 'tags' qui contient '["DocumentMD", "OutilsVisio", "FichePratique"]'
Scénario: Référencer des pré-requis pour une FichePratique et configurer leurs affichage
Étant donné un contenu 'FichePratique-Jisty.md'
Et une métadonnée 'tags' qui contient le yaml suivant '["DocumentMD", "OutilsVisio", "FichePratique", 'Jitsy']'
Et une métadonnée qui contient le yaml suivant '[prereqs: [tags: "#OutilsVisio #FichePratique", widget: "Include", mode: "Extended", default: {collapse: true}]]'
Quand le contenu est publié
Alors la FichePratique-OutilsVisio.md apparait dans la section pré-requis en widget dépliable
Alors le widget pourrait avoir en entête le nombre de minutes (ou secondes) nécessaire à lire le contenu qui peut se déplier
Alors le widget pourrait avoir en entête le nombre d'astuces
Alors le widget pourrait avoir en entête le nombre de recommandations d'usages
Alors le widget devrait avoir en entête l'importance de attention que l'on devrait y consacrer
```gherkin

View file

@ -0,0 +1,119 @@
# Utiliser les émojis
## Très courte description
Lors d'une saisie de contenu, je veux pouvoir utilisé des Emojis pour qualifier du contenu.
## Courte description
Lorsque le premier caractère d'un noeud Markdown est un émoji, qualifier le noeud via son Emoji.
## Description
Il faut lister les émojis et leurs correspondances.
### Alternatives considérées
* Utiliser des émojis
### Élements moteur de la décision
* 🧲 Le besoin de typer le contenu pour pouvoir le réutiliser ensuite
* 🧲 Le besoin d'illustrer pour faciliter la lecture en diagonale
* 🧲 Il doit être instinctif de faire usage du bon émoji
## Conclusion
### Generales
* 📢 UNE ANNONCE
* 👍 UNE RECOMMANDATION
* 🙏 UNE DEMANDE
* 💡 UNE IDEE
* 🤔 UNE REFLEXION
* 🧐 UN INTERET
* 🤓 UNE PASSION
* 😎 UNE SATISFACTION
* 👀 UNE CURIOSITE
* 😍 UN COUP DE COEUR
* 🤩 UN COMPLIMENT
* 💩 UN DEGOUT
* 🧲 UN ATTRAIT
* ⚠️ UNE PRECAUTION
* 🚨 UNE ALERTE
* ✅ UNE VALIDATION
* 🚫 UN REFUS
* ⚖️ UNE DECISION
* 📌 UN PENSE-BETE
* 🔗 UN LIEN AVEC ...
* ❓ UNE QUESTION
* 🪚 UNE TACHE A FAIRE
* 🚧 UN CHANTIER EN COUR OU A ORGANISER
* 🧳 UN DEPLACEMENT
* 📅 UN RDV DE FIXE
* 🗺️ UN ENDROIT
* 👥 UNE RENCONTRE
* 🧪 UNE EXPERIENCE
### Dans un compte-rendu
#### Participant⋅es
* ✅ UNE PARTICIPANTE 1
* ✅ UN PARTICIPANT 2
* 🚫 UN ABSENT 1
#### Animation / Scribe
* 🗣️ UNE PARTICIPANTE 1
* 📝 UN PARTICIPANT 2
#### Convié⋅es
* 💺 UNE CONVIEE 1
* 💺 UN CONVIE 2
#### Invité⋅es
* 🤔 UNE INVITEE 1
* 🤔 UN INVITE 2
#### Ordre Du Jour (ODJ)
* 👋 Tour de table | 🕑 0-10min
* 📌 UN ODJ Obligatoire 1 | 🕑 UN TEMPS ESTIME 1
* 🎈 UN ODJ Optionnel 1 | 🕑 UN TEMPS ESTIME 2
* 👋 Tour de table | 🕑 0-10min
#### Tour de table
##### 👋 UNE PARTICIPANTE 1
UN TEXTE 1
#### 📝 UN SUJET 1
DES NOTES 1
### FAQs
#### ❓ UNE QUESTION 1
UNE REPONSE 1

6
next.config.js Normal file
View file

@ -0,0 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
module.exports = nextConfig

23
package.json Normal file
View file

@ -0,0 +1,23 @@
{
"name": "hlilo-website",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@staticcms/core": "^1.2.13",
"@types/node": "18.15.11",
"@types/react": "18.0.31",
"@types/react-dom": "18.0.11",
"eslint": "8.37.0",
"eslint-config-next": "13.2.4",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.3"
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

1
public/next.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

14
public/site.webmanifest Normal file
View file

@ -0,0 +1,14 @@
{
"short_name": "",
"name": "",
"icons": [
{
"src": "icon.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/",
"background_color": "#000000",
"theme_color": "#000000"
}

1
public/thirteen.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

1
public/vercel.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

After

Width:  |  Height:  |  Size: 629 B

60
src/components/Burger.tsx Normal file
View file

@ -0,0 +1,60 @@
type Props = {
active: boolean;
onClick: () => void;
};
export default function Burger({ active, onClick }: Props) {
return (
<div className={"container " + (active ? "active" : "")} onClick={onClick}>
<div className={"meat meat-1"} />
<div className={"meat meat-2"} />
<div className={"meat meat-3"} />
<style jsx>
{`
.container {
position: fixed;
width: 38px;
height: 38px;
cursor: pointer;
top: 1rem;
left: 1.25rem;
z-index: 2;
background-color: rgba(255, 255, 255, 0.7);
}
.meat {
position: absolute;
width: 28px;
height: 2px;
background: #222;
top: calc(50% - 2px / 2);
left: calc(50% - 28px / 2);
transition: all 150ms ease-in;
}
.meat-1 {
transform: translateY(-10px);
}
.meat-2 {
width: calc(28px - 6px);
}
.meat-3 {
transform: translateY(10px);
}
.active .meat-1 {
transform: rotate(45deg);
}
.active .meat-2 {
opacity: 0;
}
.active .meat-3 {
transform: rotate(-45deg);
}
@media (min-width: 769px) {
.container {
display: none;
}
}
`}
</style>
</div>
);
}

23
src/components/Layout.tsx Normal file
View file

@ -0,0 +1,23 @@
import Head from "next/head";
import Navigation from "./Navigation";
type Props = {
children: React.ReactNode;
};
export default function Layout({ children }: Props) {
return (
<div className="">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="apple-touch-icon" href="/icon.png" />
<meta name="theme-color" content="#fff" />
</Head>
<nav>
<Navigation />
</nav>
<main>{children}</main>
</div>
);
}

View file

@ -0,0 +1,86 @@
import Link from "next/link";
import { useRouter } from "next/router";
import Burger from "./Burger";
import { useState } from "react";
export default function Navigation() {
const router = useRouter();
const [active, setActive] = useState(false);
return (
<>
<Burger active={active} onClick={() => setActive(!active)} />
<div className={"container " + (active ? "active" : "")}>
<ul>
<li>
<Link className={router.pathname === "/" ? "active" : null} href="/">
about
</Link>
</li>
<li>
<Link className={router.pathname.startsWith("/posts") ? "active" : null} href="/posts">
blog
</Link>
</li>
</ul>
<style jsx>
{`
.container {
width: 0;
}
ul {
opacity: 0;
width: 100%;
height: 100vh;
text-align: right;
list-style: none;
margin: 0;
padding: 0;
position: fixed;
top: 0;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
transform: translateY(100%);
transition: opacity 200ms;
}
.active ul {
opacity: 1;
transform: translateY(0);
}
li {
margin-bottom: 1.75rem;
font-size: 2rem;
padding: 0 1.5rem 0 0;
}
li:last-child {
margin-bottom: 0;
}
.active {
color: #222;
}
@media (min-width: 769px) {
.container {
width: 7rem;
display: block;
}
ul {
opacity: 1;
width: 7rem;
top: auto;
display: block;
transform: translateY(0);
}
li {
font-size: 1rem;
padding: 0;
}
}
`}
</style>
</div>
</>
);
}

View file

@ -0,0 +1,46 @@
import { generatePagination } from "../lib/pagination";
import Link from "next/link";
type Props = {
current: number;
pages: number;
link: {
href: (page: number) => string;
as: (page: number) => string;
};
};
export default function Pagination({ current, pages, link }: Props) {
const pagination = generatePagination(current, pages);
return (
<ul>
{pagination.map((it, i) => (
<li key={i}>
{it.excerpt ? (
"..."
) : (
<Link className={it.page === current ? "active" : null} href={link.href(it.page)} as={link.as(it.page)}>
{it.page}
</Link>
)}
</li>
))}
<style jsx>{`
ul {
list-style: none;
margin: 3rem 0 0 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 1em;
color: #9b9b9b;
font-size: 1.25rem;
}
a.active {
color: #222;
font-weight: bold;
}
`}</style>
</ul>
);
}

View file

@ -0,0 +1,39 @@
import CMS from "@staticcms/core";
import { useEffect } from "react";
import config from "./config";
interface PostData {
title: string;
date: string;
body: string;
}
const CMSPage = () => {
useEffect(() => {
if (process.env.NODE_ENV === "development") {
config.local_backend = true;
}
CMS.init({ config });
}, []);
return (
<div>
<style jsx global>{`
html,
body {
height: 100%;
}
#__next {
display: none;
}
`}</style>
</div>
);
};
CMSPage.displayName = "CMSPage";
export default CMSPage;

View file

@ -0,0 +1,137 @@
import type { Config } from "@staticcms/core";
const config: Config = {
backend: { name: "git-gateway", branch: "static" },
media_folder: "public/images",
public_folder: "/images",
collections: [
{
name: "config",
label: "Config",
delete: false,
editor: { preview: false },
files: [
{
name: "general",
label: "Site Config",
file: "config.json",
description: "General site settings",
fields: [
{ label: "URL", name: "base_url", widget: "string", hint: "Do not enter the trailing slash of the URL" },
{ label: "Site title", name: "site_title", widget: "string" },
{ label: "Site description", name: "site_description", widget: "string" },
{
label: "Site keywords",
name: "site_keywords",
widget: "list",
summary: "{{fields.keyword.keyword}}",
fields: [{ label: "Keyword", name: "keyword", widget: "string" }],
},
{ label: "Twitter account", name: "twitter_account", widget: "string" },
{ label: "GitHub account", name: "github_account", widget: "string" },
],
},
],
},
{
name: "meta",
label: "Meta",
delete: false,
editor: { preview: false },
files: [
{
name: "authors",
label: "Authors",
file: "meta/authors.yml",
description: "Author descriptions",
fields: [
{
name: "authors",
label: "Authors",
label_singular: "Author",
widget: "list",
fields: [
{ label: "Slug", name: "slug", widget: "string", hint: "The part of a URL identifies the author" },
{ label: "Name", name: "name", widget: "string", hint: "First and Last" },
{ label: "Introduction", name: "introduction", widget: "text" },
],
},
],
},
{
name: "tags",
label: "Tags",
file: "meta/tags.yml",
description: "List of tags",
fields: [
{
name: "tags",
label: "Tags",
label_singular: "Tag",
widget: "list",
fields: [
{ label: "Slug", name: "slug", widget: "string", hint: "The part of a URL identifies the tag" },
{ label: "Display Name", name: "name", widget: "string", hint: "Tag name for displaying on the site" },
],
},
],
},
],
},
{
name: "posts",
label: "Posts",
folder: "content/posts/",
extension: "mdx",
format: "frontmatter",
create: true,
slug: "{{slug}}",
identifier_field: "slug",
summary: "{{title}}",
fields: [
{ label: "Slug", name: "slug", widget: "string" },
{ label: "Title", name: "title", widget: "string" },
{
label: "Publish Date",
name: "date",
widget: "datetime",
format: "yyyy-MM-dd",
date_format: "yyyy-MM-dd",
time_format: false,
},
{
label: "Author",
name: "author",
widget: "relation",
collection: "meta",
file: "authors",
search_fields: ["authors.*.name"],
display_fields: ["authors.*.name"],
value_field: "authors.*.slug",
},
{
label: "Tags",
label_singular: "Tag",
name: "tags",
widget: "list",
summary: "{{fields.tag}}",
fields: [
{
label: "Tag",
name: "tag",
widget: "relation",
collection: "meta",
file: "tags",
search_fields: ["tags.*.name"],
display_fields: ["tags.*.name"],
value_field: "tags.*.slug",
},
],
},
{ label: "Body", name: "body", widget: "markdown" },
],
},
],
};
export default config;

View file

@ -0,0 +1,39 @@
import Head from "next/head";
import config from "../../lib/config";
type Props = {
title?: string;
description?: string;
keywords?: string[];
author?: string;
url: string;
};
export default function BasicMeta({
title,
description,
keywords,
author,
url,
}: Props) {
return (
<Head>
<title>
{title ? [title, config.site_title].join(" | ") : config.site_title}
</title>
<meta
name="description"
content={description ? description : config.site_description}
/>
<meta
name="keywords"
content={
keywords
? keywords.join(",")
: config.site_keywords.map((it) => it.keyword).join(",")
}
/>
{author ? <meta name="author" content={author} /> : null}
<link rel="canonical" href={config.base_url + url} />
</Head>
);
}

View file

@ -0,0 +1,42 @@
import { BlogPosting } from "schema-dts";
import { jsonLdScriptProps } from "react-schemaorg";
import config from "../../lib/config";
import { formatISO } from "date-fns";
import Head from "next/head";
type Props = {
url: string;
title: string;
keywords?: string[];
date: Date;
author?: string;
image?: string;
description?: string;
};
export default function JsonLdMeta({
url,
title,
keywords,
date,
author,
image,
description,
}: Props) {
return (
<Head>
<script
{...jsonLdScriptProps<BlogPosting>({
"@context": "https://schema.org",
"@type": "BlogPosting",
mainEntityOfPage: config.base_url + url,
headline: title,
keywords: keywords ? undefined : keywords.join(","),
datePublished: formatISO(date),
author: author,
image: image,
description: description,
})}
/>
</Head>
);
}

View file

@ -0,0 +1,35 @@
import Head from "next/head";
import config from "../../lib/config";
type Props = {
url: string;
title?: string;
description?: string;
image?: string;
};
export default function OpenGraphMeta({
url,
title,
description,
image,
}: Props) {
return (
<Head>
<meta property="og:site_name" content={config.site_title} />
<meta property="og:url" content={config.base_url + url} />
<meta
property="og:title"
content={title ? [title, config.site_title].join(" | ") : ""}
/>
<meta
property="og:description"
content={description ? description : config.site_description}
/>
<meta
property="og:image"
content={image ? image : config.base_url + "/og_image.png"}
/>
<meta property="og:type" content="article" />
</Head>
);
}

View file

@ -0,0 +1,25 @@
import config from "../../lib/config";
import Head from "next/head";
type Props = {
url: string;
title?: string;
description?: string;
};
export default function TwitterCardMeta({ url, title, description }: Props) {
return (
<Head>
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content={config.twitter_account} />
<meta property="twitter:url" content={config.base_url + url} />
<meta
property="twitter:title"
content={title ? [title, config.site_title].join(" | ") : ""}
/>
<meta
property="twitter:description"
content={description ? description : config.site_description}
/>
</Head>
);
}

20
src/lib/pagination.ts Normal file
View file

@ -0,0 +1,20 @@
type Pagination = {
page: number | null;
current: boolean;
excerpt: boolean;
};
export function generatePagination(
current: number,
pages: number
): Pagination[] {
return Array.from(Array(pages).keys())
.map((it) => it + 1)
.filter((it) => it === 1 || it === pages || Math.abs(current - it) <= 2)
.map((it) => ({
page:
Math.abs(current - it) === 2 && it !== 1 && it !== pages ? null : it,
current: it === current,
excerpt: Math.abs(current - it) === 2 && it !== 1 && it !== pages,
}));
}

6
src/pages/_app.tsx Normal file
View file

@ -0,0 +1,6 @@
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}

13
src/pages/_document.tsx Normal file
View file

@ -0,0 +1,13 @@
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="fr">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}

13
src/pages/api/hello.ts Normal file
View file

@ -0,0 +1,13 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

109
src/pages/index.tsx Normal file
View file

@ -0,0 +1,109 @@
import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className={styles.description}>
<p>
Get started by editing&nbsp;
<code className={styles.code}>src/pages/index.tsx</code>
</p>
<div>
</div>
</div>
<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
<div className={styles.thirteen}>
<Image
src="/thirteen.svg"
alt="13"
width={40}
height={31}
priority
/>
</div>
</div>
<div className={styles.grid}>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
Docs <span>-&gt;</span>
</h2>
<p className={inter.className}>
Find in-depth information about Next.js features and&nbsp;API.
</p>
</a>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
Learn <span>-&gt;</span>
</h2>
<p className={inter.className}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
Templates <span>-&gt;</span>
</h2>
<p className={inter.className}>
Discover and deploy boilerplate example Next.js&nbsp;projects.
</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2 className={inter.className}>
Deploy <span>-&gt;</span>
</h2>
<p className={inter.className}>
Instantly deploy your Next.js site to a shareable URL
with&nbsp;Vercel.
</p>
</a>
</div>
</main>
</>
)
}

278
src/styles/Home.module.css Normal file
View file

@ -0,0 +1,278 @@
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
}
.description {
display: inherit;
justify-content: inherit;
align-items: inherit;
font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
font-family: var(--font-mono);
}
.description a {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.description p {
position: relative;
margin: 0;
padding: 1rem;
background-color: rgba(var(--callout-rgb), 0.5);
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
border-radius: var(--border-radius);
}
.code {
font-weight: 700;
font-family: var(--font-mono);
}
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(25%, auto));
width: var(--max-width);
max-width: 100%;
}
.card {
padding: 1rem 1.2rem;
border-radius: var(--border-radius);
background: rgba(var(--card-rgb), 0);
border: 1px solid rgba(var(--card-border-rgb), 0);
transition: background 200ms, border 200ms;
}
.card span {
display: inline-block;
transition: transform 200ms;
}
.card h2 {
font-weight: 600;
margin-bottom: 0.7rem;
}
.card p {
margin: 0;
opacity: 0.6;
font-size: 0.9rem;
line-height: 1.5;
max-width: 30ch;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 4rem 0;
}
.center::before {
background: var(--secondary-glow);
border-radius: 50%;
width: 480px;
height: 360px;
margin-left: -400px;
}
.center::after {
background: var(--primary-glow);
width: 240px;
height: 180px;
z-index: -1;
}
.center::before,
.center::after {
content: '';
left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
}
.logo,
.thirteen {
position: relative;
}
.thirteen {
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 75px;
padding: 25px 10px;
margin-left: 16px;
transform: translateZ(0);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0px 2px 8px -1px #0000001a;
}
.thirteen::before,
.thirteen::after {
content: '';
position: absolute;
z-index: -1;
}
/* Conic Gradient Animation */
.thirteen::before {
animation: 6s rotate linear infinite;
width: 200%;
height: 200%;
background: var(--tile-border);
}
/* Inner Square */
.thirteen::after {
inset: 0;
padding: 1px;
border-radius: var(--border-radius);
background: linear-gradient(
to bottom right,
rgba(var(--tile-start-rgb), 1),
rgba(var(--tile-end-rgb), 1)
);
background-clip: content-box;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.card:hover {
background: rgba(var(--card-rgb), 0.1);
border: 1px solid rgba(var(--card-border-rgb), 0.15);
}
.card:hover span {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion) {
.thirteen::before {
animation: none;
}
.card:hover span {
transform: none;
}
}
/* Mobile */
@media (max-width: 700px) {
.content {
padding: 4rem;
}
.grid {
grid-template-columns: 1fr;
margin-bottom: 120px;
max-width: 320px;
text-align: center;
}
.card {
padding: 1rem 2.5rem;
}
.card h2 {
margin-bottom: 0.5rem;
}
.center {
padding: 8rem 0 6rem;
}
.center::before {
transform: none;
height: 300px;
}
.description {
font-size: 0.8rem;
}
.description a {
padding: 1rem;
}
.description p,
.description div {
display: flex;
justify-content: center;
position: fixed;
width: 100%;
}
.description p {
align-items: center;
inset: 0 0 auto;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
background: linear-gradient(
to bottom,
rgba(var(--background-start-rgb), 1),
rgba(var(--callout-rgb), 0.5)
);
background-clip: padding-box;
backdrop-filter: blur(24px);
}
.description div {
align-items: flex-end;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
background: linear-gradient(
to bottom,
transparent 0%,
rgb(var(--background-end-rgb)) 40%
);
z-index: 1;
}
}
/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
.grid {
grid-template-columns: repeat(2, 50%);
}
}
@media (prefers-color-scheme: dark) {
.vercelLogo {
filter: invert(1);
}
.logo,
.thirteen img {
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
}
}
@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}

107
src/styles/globals.css Normal file
View file

@ -0,0 +1,107 @@
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(
to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3)
);
--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(
#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80
);
--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}

23
tsconfig.json Normal file
View file

@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

7173
yarn.lock Normal file

File diff suppressed because it is too large Load diff