Contribuer

~15 min de lecture

Où mettre mon contenu ? Important

Ce tableau indique où déposer chaque type de contenu :

Section	Dossier	À mettre ici	À ne pas mettre ici
Articles (tutoriels)	`docs/articles/`	Tutoriels, billets de blog (ex. ARP poisoning…)	Writeups, guides structurés
Articles (certifications)	`docs/certifications/`	Préparation et retours d’expérience (OSCP, CPTS, SEC1…)	Hors sujet certifs
Articles (cheat sheet)	`docs/tools/`	Fiches de référence, prise en main d’outils (Exegol, etc.)	Tutoriels longs → Parcours & guides
Writeups	`docs/writeup/` (sous-dossiers par plateforme)	Solutions de machines/challenges (HTB, VulnLab, TryHackMe, GOAD…)	Articles généraux, guides
Événements	`docs/events/`	Talks, replays, pages CTF, annonces d’événements	Writeups de machines
Parcours & guides	`docs/cybersecurity/`	Guides et parcours d’apprentissage (offensive, défensif, CTF…)	Writeups, actualités
Ressources	`docs/misc/`	Liens utiles : Discord, YouTube, Twitch, recommandations	Contenu rédactionnel long → Articles ou guides

En cas de doute, demandez sur Discord ou ouvrez une issue.

Tester le project localement MANDATORY

Le projet utilise pnpm (recommandé) ou npm :

git clone https://github.com/Frozenka/hacking-france.git
cd hacking-france
pnpm install
pnpm run dev

Avec npm : npm install puis npm run dev.

Puis, pour vérifier le build (important) :

pnpm run build

Avec npm : npm run build.

Formatage des articles Important

Le Frontmatter est obligatoire pour chaque fichier mdx, il est défini en haut des fichiers entre des séparateurs --- :

---
title: Mon titre de page
---

Le contenu de la page suit le deuxième `---`.

Chaque page doit inclure au moins un title.

Styles Inline

Le texte peut être en gras, italique, ou ~~barré~~.

Le texte peut être en **gras**, _italique_, ou ~~barré~~.

Vous pouvez lier une autre page.

Vous pouvez [lier une autre page](https://www.youtube.com/watch?v=dQw4w9WgXcQ).

Vous pouvez mettre en surbrillance du code inline avec des accents graves.

Vous pouvez mettre en surbrillance du `code inline` avec des accents graves.

Images

Les images sont incluses avec le composant astro:assets importé via:

import { Image } from 'astro:assets';
import test1 from '../../../assets/events/test1.jpg';
[...]

# Image 1
<Image src={test1} alt="Test 1" format="avif" quality={"mid"}/>

Vous pouvez utiliser le format avif pour les images, et définir la qualité de l’image avec quality={"mid"} pour une compression équilibrée.

Pour chaque image il est nécessaire de définir un nom pour l’import et le chemin de l’image dans les assets en suivant l’arborescence du repo:

Répertoiresrc
- Répertoireassets
  - Répertoirecybersecurity
    Répertoiredefensive
    nom_image.jpg
- Répertoirecontent
  - Répertoiredocs
    …
    Répertoirecybersecurity
    Répertoiredefensive
    titre_contribution.mdx
Répertoirepages/
- …

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- src
  - assets
    - cybersecurity
      - defensive
        - nom_image.jpg
  - content
    - docs
      - ...
      - cybersecurity
        - defensive
          - **titre_contribution.mdx**
- pages/

</FileTree>

Par exemple, pour une image dans le dossier defensive dans cybersecurity, le chemin de l’image sera ../../../../assets/cybersecurity/defensive/nom_image.jpg. La structure du dossier assets reprenant l’arborescence du dossier docs.

Titres

Vous pouvez structurer le contenu en utilisant un titre. Les titres en Markdown sont indiqués par un certain nombre de # au début de la ligne.

Comment structurer le contenu des pages

Le titre de la page défini dans le frontmatter sera défini comme titre de premier niveau et inclut un titre “Aperçu” en haut de la table des matières de chaque page. Nous recommandons de commencer chaque page par un texte introductif régulier et d’utiliser des titres <h2> ## et inférieurs pour structurer le contenu ###, ####…

---
title: Guide Markdown
description: Lorem ipsum dolor sit amet
---

Quisque neque risus, dignissim ut elementum non, bibendum eget lectus.

Liens d’ancrage pour les titres

L’utilisation des titres en Markdown génère automatiquement des liens d’ancrage, vous permettant de créer des liens directs vers certaines sections de votre page.

---
title: Ma page de contenu
description: Comment utiliser les liens d'ancrage
---

## Introduction

Je peux créer un lien vers [ma conclusion](#conclusion) plus bas sur la même page.

## Conclusion

`https://mon-site.com/page1/#introduction` navigue directement vers mon Introduction.


Les titres de niveau 2 (`<h2>`) et de niveau 3 (`<h3>`) apparaissent automatiquement dans la table des matières de la page.

Apprenez-en plus sur la manière dont Astro traite les identifiants de titres dans la documentation Astro.

Encadrés

Les encadrés (également appelés “admonitions” ou “callouts”) sont utiles pour afficher des informations secondaires aux côtés du contenu principal d’une page.

Les blocs d’encadré sont indiqués par une paire de triple deux-points ::: pour entourer votre contenu, et peuvent être de type note, tip, caution ou danger.

Vous pouvez imbriquer n’importe quel autre type de contenu Markdown dans un encadré, mais ils sont mieux adaptés aux courts blocs de contenu concis.

Encadré de note

Cras in ante et erat aliquam finibus. Maecenas convallis fermentum arcu eget viverra. Nam et rhoncus nunc :

package main

import "fmt"

func main() {
  fmt.Println("Hello, world!")
}

:::note
Cras in ante et erat aliquam finibus. Maecenas convallis fermentum arcu eget viverra. Nam et rhoncus nunc :

```go wrap frame="terminal" preserveIndent
package main

import "fmt"

func main() {
  fmt.Println("Hello, world!")
}
```
:::

Titres d’encadrés personnalisés

Vous pouvez spécifier un titre personnalisé pour l’encadré entre crochets après le type d’encadré, par exemple :::tip[Le saviez-vous ?].

:::tip[Le saviez-vous ?]
Cras in ante et erat aliquam finibus. Maecenas convallis fermentum arcu eget viverra. Nam et rhoncus nunc
:::

Autres types d’encadrés

Les encadrés de type caution et danger sont utiles pour attirer l’attention de l’utilisateur sur des détails importants.

:::caution
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque elit leo, vel aliquam odio accumsan ut. In vel maximus neque. Cras vitae odio egestas nisl gravida tempus sit amet ac mi. Sed semper in enim et consequat. Aenean faucibus cursus pulvinar.
:::

:::danger
lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque elit leo, vel aliquam odio accumsan ut. In vel maximus neque. Cras vitae odio egestas nisl gravida tempus sit amet ac mi. Sed semper in enim et consequat. Aenean faucibus cursus pulvinar.

- Sed semper in enim
- Aenean faucibus
- odio egestas nisl gravida
:::

Citations

lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque elit leo, vel aliquam odio accumsan ut.

Les citations sont indiquées par un > au début de chaque ligne.

> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque elit leo, vel aliquam odio accumsan ut.
>
> Les citations sont indiquées par un `>` au début de chaque ligne.

Blocs de code

Un bloc de code est indiqué par un bloc avec trois accents graves ``` au début et à la fin. Vous pouvez indiquer le langage de programmation utilisé après les accents graves d’ouverture.

// Code Javascript avec mise en évidence de la syntaxe.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};

```js wrap frame="terminal" preserveIndent
// Code Javascript avec mise en évidence de la syntaxe.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};
```

Ci-dessus, sont utilisés des attributs pour customiser l’apparence ansi que les fonctionnalités du bloc. Quand un ou plusieurs attributs sont ajoutés (comme wrap, preserveIndent ou frame par exemple), il est nécessaire d’importer le module code:

import { Code } from '@astrojs/starlight/components';

Mais également donner un titre au bloc de code:

var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};

```js title="Mon code" wrap frame="terminal" preserveIndent
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};
```

Fonctionnalité diff:

var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + 4);
  dateformat.i18n = require('./lang/' + l);
  return true;
};

```diff wrap frame="terminal" preserveIndent
var fun = function lang(l) {
-  dateformat.i18n = require('./lang/' + 4);
+  dateformat.i18n = require('./lang/' + l);
  return true;
};
```

Numéros de lignes:

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

```js showLineNumbers wrap frame="terminal"
// This code block will show line numbers
console.log('Greetings from line 2!')
```

Line Highlighting:

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

```js {1, 4, 7-8} wrap frame="terminal"
// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"
```

Ajout de titres de sections de sections dans le code:

<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15} wrap frame="terminal" preserveIndent
// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>
```

La documentation de toutes les modifications supportées est disponible ici: https://expressive-code.com/key-features/syntax-highlighting/

Les étapes

Les étapes sont utiles pour guider l’utilisateur à travers un processus en plusieurs étapes. Chaque étape est indiquée par un numéro et un titre:

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Importer le composant dans votre fichier MDX:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Wrap `<Steps>` around your ordered list items.

</Steps>

Importer le composant dans votre fichier MDX:
Fenêtre du terminal
```
import { Steps } from '@astrojs/starlight/components';
```
Entourez vos éléments de liste ordonnée avec <Steps>

Ce titre est suivi d’un badge TEXTE

## Ce titre est suivi d'un badge :badge[TEXTE]

Ce titre est suivi d’un badge custom TEXTE

## Ce titre est suivi d'un badge custom :badge[TEXTE]{variant=success}

Youtube,Twitch,Discord

Pour la modification des pages YouTube Twitch et Discord, rien de plus simple :
il vous suffit d’éditer les fichiers texte correspondants : src/assets/misc/liste_youtube.txt ou liste_twitch.txt ou liste_discord.txt Cela ajoutera automatiquement toutes les informations sur la page.