Compare commits
14 commits
main
...
features/n
| Author | SHA1 | Date | |
|---|---|---|---|
| 914f8b07de | |||
| 92da748a2b | |||
| b582ebe39f | |||
| fe560703dc | |||
| de1cf03fc6 | |||
| a89a644ad7 | |||
| 0e8c6d2130 | |||
| 9d1cf3bf2b | |||
| 195bf8f0a6 | |||
| 374d997ddd | |||
| b8e5d40f9e | |||
| 214314f8c6 | |||
| 595f29aad5 | |||
| e0fd4ea2b8 |
43 changed files with 9932 additions and 0 deletions
3
.eslintrc.json
Normal file
3
.eslintrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "next/core-web-vitals"
|
||||||
|
}
|
||||||
36
.gitignore
vendored
Normal file
36
.gitignore
vendored
Normal 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
|
||||||
24
README.md
24
README.md
|
|
@ -1,2 +1,26 @@
|
||||||
# hlilo-website
|
# 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
19
config.json
Normal 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"
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
101
data/miam/ateliers/001-infra-debug-synapse.md
Normal file
101
data/miam/ateliers/001-infra-debug-synapse.md
Normal 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**.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
_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
|
||||||
|
|
||||||
|
|
||||||
281
data/miam/ateliers/002-atelier-tedomum-gitlab-runner.md
Normal file
281
data/miam/ateliers/002-atelier-tedomum-gitlab-runner.md
Normal 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.
|
||||||
62
data/miam/bios/000-modele.md
Normal file
62
data/miam/bios/000-modele.md
Normal 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
|
||||||
|
* #...
|
||||||
211
data/miam/bios/001-reminec.md
Normal file
211
data/miam/bios/001-reminec.md
Normal 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 d’informatique 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 d’acteur plutôt que d’utilisateur, 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 à l’entraide entre acteurs modestes de l’Internet.
|
||||||
|
>
|
||||||
|
> ACIDES n’a pas de forme légale établie. En tant que collectif de fait, nous privilégions l’action : il s’agit de participer pour y disposer d’une voix. Toute forme de participation est la bienvenue, pas exclusivement technique ; la critique et les retours d’expé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 s’agit 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
|
||||||
|
|
@ -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
296
data/pages/index.md
Normal 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)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
@ -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
6
next.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
23
package.json
Normal file
23
package.json
Normal 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
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal 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
14
public/site.webmanifest
Normal 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
1
public/thirteen.svg
Normal 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
1
public/vercel.svg
Normal 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
60
src/components/Burger.tsx
Normal 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
23
src/components/Layout.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
86
src/components/Navigation.tsx
Normal file
86
src/components/Navigation.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
46
src/components/Pagination.tsx
Normal file
46
src/components/Pagination.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
src/components/cms/CMSPage.tsx
Normal file
39
src/components/cms/CMSPage.tsx
Normal 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;
|
||||||
137
src/components/cms/config.ts
Normal file
137
src/components/cms/config.ts
Normal 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;
|
||||||
39
src/components/meta/BasicMeta.tsx
Normal file
39
src/components/meta/BasicMeta.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
src/components/meta/JsonLdMeta.tsx
Normal file
42
src/components/meta/JsonLdMeta.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
src/components/meta/OpenGraphMeta.tsx
Normal file
35
src/components/meta/OpenGraphMeta.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
25
src/components/meta/TwitterCardMeta.tsx
Normal file
25
src/components/meta/TwitterCardMeta.tsx
Normal 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
20
src/lib/pagination.ts
Normal 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
6
src/pages/_app.tsx
Normal 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
13
src/pages/_document.tsx
Normal 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
13
src/pages/api/hello.ts
Normal 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
109
src/pages/index.tsx
Normal 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
|
||||||
|
<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>-></span>
|
||||||
|
</h2>
|
||||||
|
<p className={inter.className}>
|
||||||
|
Find in-depth information about Next.js features and 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>-></span>
|
||||||
|
</h2>
|
||||||
|
<p className={inter.className}>
|
||||||
|
Learn about Next.js in an interactive course with 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>-></span>
|
||||||
|
</h2>
|
||||||
|
<p className={inter.className}>
|
||||||
|
Discover and deploy boilerplate example Next.js 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>-></span>
|
||||||
|
</h2>
|
||||||
|
<p className={inter.className}>
|
||||||
|
Instantly deploy your Next.js site to a shareable URL
|
||||||
|
with Vercel.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
278
src/styles/Home.module.css
Normal file
278
src/styles/Home.module.css
Normal 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
107
src/styles/globals.css
Normal 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
23
tsconfig.json
Normal 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"]
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue