From 8154786e9bb9866f6a702ed2afd6b99b0ec0519f Mon Sep 17 00:00:00 2001 From: Azmog <80716388+AzmogEx@users.noreply.github.com> Date: Mon, 15 Jun 2026 17:01:11 +0200 Subject: [PATCH] Add initial documentation for create_repo.sh and site structure - Created example Markdown document with basic formatting and code block. - Added configuration file for site settings including base URL and author. - Introduced index page with project overview and links to documentation. - Implemented detailed documentation for create_repo.sh, including usage, prerequisites, and response codes. - Added custom 404 error page for better user experience. - Developed HTML structure for create_repo.sh documentation with styling and layout. - Created main index page with project description and links to relevant resources. - Included robots.txt and sitemap.xml for search engine optimization. - Established CSS styles for consistent design across the site. - Set up base HTML template for consistent layout and navigation. - Created templates for index and page rendering to streamline content management. --- README.html | 367 +++++++++++++++++++++++++++++ README.md | 65 +++++ exemple.html | 262 ++++++++++++++++++++ exemple.md | 17 ++ site/config.toml | 11 + site/content/_index.md | 9 + site/content/create-repo.md | 72 ++++++ site/public/404.html | 3 + site/public/create-repo/index.html | 93 ++++++++ site/public/index.html | 61 +++++ site/public/robots.txt | 4 + site/public/sitemap.xml | 9 + site/public/style.css | 266 +++++++++++++++++++++ site/static/style.css | 266 +++++++++++++++++++++ site/templates/base.html | 39 +++ site/templates/index.html | 29 +++ site/templates/page.html | 11 + 17 files changed, 1584 insertions(+) create mode 100644 README.html create mode 100644 README.md create mode 100644 exemple.html create mode 100644 exemple.md create mode 100644 site/config.toml create mode 100644 site/content/_index.md create mode 100644 site/content/create-repo.md create mode 100644 site/public/404.html create mode 100644 site/public/create-repo/index.html create mode 100644 site/public/index.html create mode 100644 site/public/robots.txt create mode 100644 site/public/sitemap.xml create mode 100644 site/public/style.css create mode 100644 site/static/style.css create mode 100644 site/templates/base.html create mode 100644 site/templates/index.html create mode 100644 site/templates/page.html diff --git a/README.html b/README.html new file mode 100644 index 0000000..01c5c65 --- /dev/null +++ b/README.html @@ -0,0 +1,367 @@ + + + + + + + Documentation - create_repo.sh + + + +
+

Documentation - create_repo.sh

+
+ +

create_repo.sh

+

Script Bash qui crée un dépôt sur la forge +(forge.gwenaelremond.fr) en appelant son API REST.

+

À quoi ça sert

+

Plutôt que de retaper une longue commande curl à chaque +fois, le script prend le nom et la +description du dépôt en arguments, et lit le +token d’authentification dans une variable +d’environnement (pour ne jamais l’écrire en dur dans le code).

+

Prérequis

+ +

Utilisation

+
# 1. Définir le token (une seule fois par session de terminal)
+export FORGE_TOKEN="ton_token"
+
+# 2. Lancer le script
+./create_repo.sh <nom_du_repo> ["description"]
+

Exemple

+
export FORGE_TOKEN="b103fb7f..."
+./create_repo.sh exercice "Adam"
+

Cela crée le dépôt exercice avec la description +Adam.

+

Détail du fonctionnement

+ ++++ + + + + + + + + + + + + + + + + + + + + + + + + +
Partie du scriptRôle
set -euo pipefailArrête le script à la moindre erreur (sécurité)
Vérification de FORGE_TOKENRefuse de tourner si le token n’est pas défini
REPO_NAME / REPO_DESCRécupère les arguments passés en ligne de commande
curl -X POST .../api/v1/user/reposEnvoie la requête de création à l’API
+

La requête envoyée

+

Le script construit cette requête HTTP :

+
curl -X POST "https://forge.gwenaelremond.fr/api/v1/user/repos" \
+  -H "Authorization: token $FORGE_TOKEN" \
+  -H "Content-Type: application/json" \
+  -H "accept: application/json" \
+  -d '{ "name": "exercice", "description": "Adam" }'
+

Codes de réponse possibles

+ + + + + + + + + + + + + + + + + + + + + +
Code HTTPSignification
201Dépôt créé avec succès
409Un dépôt portant ce nom existe déjà
401Token invalide ou manquant
+

Bonne pratique de sécurité

+

⚠️ Ne jamais écrire le token en clair dans le script +ni le commiter dans Git. Si un token a été exposé, le +révoquer et en générer un nouveau dans les paramètres +de la forge.

+ + diff --git a/README.md b/README.md new file mode 100644 index 0000000..5d52233 --- /dev/null +++ b/README.md @@ -0,0 +1,65 @@ +# create_repo.sh + +Script Bash qui **crée un dépôt sur la forge** (`forge.gwenaelremond.fr`) en appelant son API REST. + +## À quoi ça sert + +Plutôt que de retaper une longue commande `curl` à chaque fois, le script prend le **nom** et la **description** du dépôt en arguments, et lit le **token d'authentification** dans une variable d'environnement (pour ne jamais l'écrire en dur dans le code). + +## Prérequis + +- `curl` (installé par défaut sur macOS et Linux) +- Un **token d'accès** à la forge (Settings → Applications → Generate New Token) + +## Utilisation + +```bash +# 1. Définir le token (une seule fois par session de terminal) +export FORGE_TOKEN="ton_token" + +# 2. Lancer le script +./create_repo.sh ["description"] +``` + +### Exemple + +```bash +export FORGE_TOKEN="b103fb7f..." +./create_repo.sh exercice "Adam" +``` + +Cela crée le dépôt **exercice** avec la description **Adam**. + +## Détail du fonctionnement + +| Partie du script | Rôle | +|------------------|------| +| `set -euo pipefail` | Arrête le script à la moindre erreur (sécurité) | +| Vérification de `FORGE_TOKEN` | Refuse de tourner si le token n'est pas défini | +| `REPO_NAME` / `REPO_DESC` | Récupère les arguments passés en ligne de commande | +| `curl -X POST .../api/v1/user/repos` | Envoie la requête de création à l'API | + +### La requête envoyée + +Le script construit cette requête HTTP : + +```bash +curl -X POST "https://forge.gwenaelremond.fr/api/v1/user/repos" \ + -H "Authorization: token $FORGE_TOKEN" \ + -H "Content-Type: application/json" \ + -H "accept: application/json" \ + -d '{ "name": "exercice", "description": "Adam" }' +``` + +## Codes de réponse possibles + +| Code HTTP | Signification | +|-----------|---------------| +| `201` | Dépôt créé avec succès | +| `409` | Un dépôt portant ce nom existe déjà | +| `401` | Token invalide ou manquant | + +## Bonne pratique de sécurité + +⚠️ **Ne jamais écrire le token en clair** dans le script ni le commiter dans Git. +Si un token a été exposé, le **révoquer** et en générer un nouveau dans les paramètres de la forge. diff --git a/exemple.html b/exemple.html new file mode 100644 index 0000000..7205bfb --- /dev/null +++ b/exemple.html @@ -0,0 +1,262 @@ + + + + + + + Mon document + + + +
+

Mon document

+
+

Mon document

+

Voici un exemple de Markdown converti en HTML.

+

Une liste

+ +

Un bloc de code

+
echo "Bonjour"
+
+

Une citation pour la route.

+
+ + diff --git a/exemple.md b/exemple.md new file mode 100644 index 0000000..3812820 --- /dev/null +++ b/exemple.md @@ -0,0 +1,17 @@ +# Mon document + +Voici un **exemple** de Markdown converti en HTML. + +## Une liste + +- Premier point +- Deuxième point +- Troisième point + +## Un bloc de code + +```bash +echo "Bonjour" +``` + +> Une citation pour la route. diff --git a/site/config.toml b/site/config.toml new file mode 100644 index 0000000..58d345d --- /dev/null +++ b/site/config.toml @@ -0,0 +1,11 @@ +# URL de base du site (à adapter lors du déploiement) +base_url = "http://127.0.0.1:1111" + +title = "Documentation DevOps" +description = "Documentation du script create_repo.sh" + +# Génère un index de recherche +build_search_index = false + +[extra] +author = "Adam" diff --git a/site/content/_index.md b/site/content/_index.md new file mode 100644 index 0000000..e46d18f --- /dev/null +++ b/site/content/_index.md @@ -0,0 +1,9 @@ ++++ +title = "Documentation DevOps" +sort_by = "weight" ++++ + +Bienvenue sur la documentation du projet DevOps. + +Ce site présente le script **`create_repo.sh`**, qui permet de créer un dépôt +sur la forge `forge.gwenaelremond.fr` via son API REST. diff --git a/site/content/create-repo.md b/site/content/create-repo.md new file mode 100644 index 0000000..e75b4f2 --- /dev/null +++ b/site/content/create-repo.md @@ -0,0 +1,72 @@ ++++ +title = "create_repo.sh" +description = "Créer un dépôt sur la forge via l'API REST, en passant le nom et la description en arguments." +weight = 1 ++++ + +Script Bash qui **crée un dépôt sur la forge** (`forge.gwenaelremond.fr`) en +appelant son API REST. + +## À quoi ça sert + +Plutôt que de retaper une longue commande `curl` à chaque fois, le script prend +le **nom** et la **description** du dépôt en arguments, et lit le **token +d'authentification** dans une variable d'environnement (pour ne jamais l'écrire +en dur dans le code). + +## Prérequis + +- `curl` (installé par défaut sur macOS et Linux) +- Un **token d'accès** à la forge (Settings → Applications → Generate New Token) + +## Utilisation + +```bash +# 1. Définir le token (une seule fois par session de terminal) +export FORGE_TOKEN="ton_token" + +# 2. Lancer le script +./create_repo.sh ["description"] +``` + +### Exemple + +```bash +export FORGE_TOKEN="b103fb7f..." +./create_repo.sh exercice "Adam" +``` + +Cela crée le dépôt **exercice** avec la description **Adam**. + +## Détail du fonctionnement + +| Partie du script | Rôle | +|------------------|------| +| `set -euo pipefail` | Arrête le script à la moindre erreur (sécurité) | +| Vérification de `FORGE_TOKEN` | Refuse de tourner si le token n'est pas défini | +| `REPO_NAME` / `REPO_DESC` | Récupère les arguments passés en ligne de commande | +| `curl -X POST .../api/v1/user/repos` | Envoie la requête de création à l'API | + +### La requête envoyée + +```bash +curl -X POST "https://forge.gwenaelremond.fr/api/v1/user/repos" \ + -H "Authorization: token $FORGE_TOKEN" \ + -H "Content-Type: application/json" \ + -H "accept: application/json" \ + -d '{ "name": "exercice", "description": "Adam" }' +``` + +## Codes de réponse possibles + +| Code HTTP | Signification | +|-----------|---------------| +| `201` | Dépôt créé avec succès | +| `409` | Un dépôt portant ce nom existe déjà | +| `401` | Token invalide ou manquant | + +## Bonne pratique de sécurité + +⚠️ **Ne jamais écrire le token en clair** dans le script ni le commiter dans Git. +Si un token a été exposé, le **révoquer** et en générer un nouveau dans les +paramètres de la forge. diff --git a/site/public/404.html b/site/public/404.html new file mode 100644 index 0000000..f8414f0 --- /dev/null +++ b/site/public/404.html @@ -0,0 +1,3 @@ + +404 Not Found +

404 Not Found

diff --git a/site/public/create-repo/index.html b/site/public/create-repo/index.html new file mode 100644 index 0000000..30749f8 --- /dev/null +++ b/site/public/create-repo/index.html @@ -0,0 +1,93 @@ + + + + + + create_repo.sh — Documentation DevOps + + + + + + + +
+
+ + Documentation DevOps + + +
+
+ + +
+ +
+

create_repo.sh

+

Script Bash qui crée un dépôt sur la forge (forge.gwenaelremond.fr) en +appelant son API REST.

+

À quoi ça sert

+

Plutôt que de retaper une longue commande curl à chaque fois, le script prend +le nom et la description du dépôt en arguments, et lit le token +d'authentification dans une variable d'environnement (pour ne jamais l'écrire +en dur dans le code).

+

Prérequis

+
    +
  • curl (installé par défaut sur macOS et Linux)
    • +
  • Un token d'accès à la forge (Settings → Applications → Generate New Token)
    • +
+

Utilisation

+
# 1. Définir le token (une seule fois par session de terminal)
+export FORGE_TOKEN="ton_token"
+
+# 2. Lancer le script
+./create_repo.sh <nom_du_repo> ["description"]
+
+

Exemple

+
export FORGE_TOKEN="b103fb7f..."
+./create_repo.sh exercice "Adam"
+
+

Cela crée le dépôt exercice avec la description Adam.

+

Détail du fonctionnement

+ + + + + +
Partie du scriptRôle
set -euo pipefailArrête le script à la moindre erreur (sécurité)
Vérification de FORGE_TOKENRefuse de tourner si le token n'est pas défini
REPO_NAME / REPO_DESCRécupère les arguments passés en ligne de commande
curl -X POST .../api/v1/user/reposEnvoie la requête de création à l'API
+

La requête envoyée

+
curl -X POST "https://forge.gwenaelremond.fr/api/v1/user/repos" \
+  -H "Authorization: token $FORGE_TOKEN" \
+  -H "Content-Type: application/json" \
+  -H "accept: application/json" \
+  -d '{ "name": "exercice", "description": "Adam" }'
+
+

Codes de réponse possibles

+ + + + +
Code HTTPSignification
201Dépôt créé avec succès
409Un dépôt portant ce nom existe déjà
401Token invalide ou manquant
+

Bonne pratique de sécurité

+

⚠️ Ne jamais écrire le token en clair dans le script ni le commiter dans Git. +Si un token a été exposé, le révoquer et en générer un nouveau dans les +paramètres de la forge.

+ + ← Retour à l'accueil +
+ +
+ + +
+ Généré avec Zola · Adam +
+ + + + + diff --git a/site/public/index.html b/site/public/index.html new file mode 100644 index 0000000..0eb7215 --- /dev/null +++ b/site/public/index.html @@ -0,0 +1,61 @@ + + + + + + Documentation DevOps + + + + + + + +
+
+ + Documentation DevOps + + +
+
+ + +
+ Projet DevOps · CESI +

Documentation DevOps

+

Documentation du script create_repo.sh — création automatisée + de dépôts sur la forge via l'API REST.

+
+ +
+
+ + +
📄
+

create_repo.sh

+

Créer un dépôt sur la forge via l'API REST, en passant le nom et la description en arguments.

+ Lire → + + + +
🔗
+

Dépôt sur la forge

+

Voir le projet exercice sur forge.gwenaelremond.fr

+ Ouvrir → + +
+
+ + +
+ Généré avec Zola · Adam +
+ + + + + diff --git a/site/public/robots.txt b/site/public/robots.txt new file mode 100644 index 0000000..c6daafc --- /dev/null +++ b/site/public/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Disallow: +Allow: / +Sitemap: http://127.0.0.1:1111/sitemap.xml diff --git a/site/public/sitemap.xml b/site/public/sitemap.xml new file mode 100644 index 0000000..817afaa --- /dev/null +++ b/site/public/sitemap.xml @@ -0,0 +1,9 @@ + + + + http://127.0.0.1:1111/ + + + http://127.0.0.1:1111/create-repo/ + + diff --git a/site/public/style.css b/site/public/style.css new file mode 100644 index 0000000..c1f3814 --- /dev/null +++ b/site/public/style.css @@ -0,0 +1,266 @@ +:root { + --bg: #fafbfc; + --surface: #ffffff; + --text: #1a202c; + --text-soft: #4a5568; + --muted: #718096; + --border: #e2e8f0; + --accent: #6366f1; + --accent-2: #8b5cf6; + --accent-soft: #eef2ff; + --code-bg: #1e1e2e; + --shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05); + --shadow-lg: 0 4px 12px rgba(99,102,241,.15), 0 20px 48px rgba(99,102,241,.12); + --radius: 16px; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #0f1117; + --surface: #171923; + --text: #f7fafc; + --text-soft: #cbd5e0; + --muted: #a0aec0; + --border: #2d3748; + --accent: #818cf8; + --accent-2: #a78bfa; + --accent-soft: #1e1b4b; + --code-bg: #0d0d16; + --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); + --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.35); + } +} + +* { box-sizing: border-box; } + +html { scroll-behavior: smooth; } + +body { + font-family: 'Inter', -apple-system, system-ui, sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.7; + margin: 0; + -webkit-font-smoothing: antialiased; + font-feature-settings: "cv02","cv03","cv04","cv11"; +} + +/* ---- Top bar ---- */ +.topbar { + position: sticky; + top: 0; + z-index: 50; + backdrop-filter: saturate(180%) blur(12px); + background: color-mix(in srgb, var(--surface) 80%, transparent); + border-bottom: 1px solid var(--border); +} +.topbar-inner { + max-width: 1080px; + margin: 0 auto; + padding: .9rem 1.5rem; + display: flex; + align-items: center; + gap: .6rem; +} +.brand { + font-weight: 800; + font-size: 1.05rem; + color: var(--text); + text-decoration: none; + display: flex; + align-items: center; + gap: .55rem; + letter-spacing: -.01em; +} +.brand .logo { + width: 30px; height: 30px; + display: grid; place-items: center; + border-radius: 9px; + background: linear-gradient(135deg, var(--accent), var(--accent-2)); + color: #fff; font-size: .95rem; + box-shadow: var(--shadow-lg); +} +.nav-links { margin-left: auto; display: flex; gap: 1.4rem; } +.nav-links a { + color: var(--text-soft); + text-decoration: none; + font-weight: 500; + font-size: .92rem; + transition: color .15s; +} +.nav-links a:hover { color: var(--accent); } + +/* ---- Layout ---- */ +.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; } +main { padding: 3rem 0 5rem; } + +/* ---- Hero ---- */ +.hero { + text-align: center; + padding: 4.5rem 1.5rem 3.5rem; + position: relative; + overflow: hidden; +} +.hero::before { + content: ""; + position: absolute; inset: 0; + background: + radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); + pointer-events: none; +} +.hero .eyebrow { + display: inline-block; + font-size: .78rem; + font-weight: 600; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--accent); + background: var(--accent-soft); + padding: .35rem .8rem; + border-radius: 999px; + margin-bottom: 1.2rem; +} +.hero h1 { + font-size: clamp(2.2rem, 5vw, 3.4rem); + line-height: 1.1; + letter-spacing: -.03em; + margin: 0 0 1rem; + background: linear-gradient(135deg, var(--text), var(--accent)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} +.hero p { font-size: 1.15rem; color: var(--text-soft); max-width: 640px; margin: 0 auto; } + +/* ---- Cards ---- */ +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.2rem; + margin: 2.5rem 0; +} +.card { + display: block; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.6rem; + text-decoration: none; + color: var(--text); + box-shadow: var(--shadow); + transition: transform .18s ease, box-shadow .18s ease, border-color .18s; +} +.card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: var(--accent); +} +.card .icon { + width: 44px; height: 44px; + display: grid; place-items: center; + border-radius: 12px; + background: var(--accent-soft); + color: var(--accent); + font-size: 1.3rem; + margin-bottom: 1rem; +} +.card h3 { margin: 0 0 .4rem; font-size: 1.15rem; letter-spacing: -.01em; } +.card p { margin: 0; color: var(--muted); font-size: .92rem; } +.card .arrow { color: var(--accent); font-weight: 700; margin-top: .8rem; display: inline-block; } + +/* ---- Article ---- */ +.article { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 3rem clamp(1.5rem, 5vw, 3.5rem); + box-shadow: var(--shadow); + max-width: 820px; + margin: 0 auto; +} +.article h1 { + font-size: 2.4rem; + letter-spacing: -.025em; + margin: 0 0 1.5rem; + line-height: 1.15; +} +.article h2 { + font-size: 1.6rem; + letter-spacing: -.02em; + margin: 2.5rem 0 1rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border); +} +.article h3 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; } +.article p, .article li { color: var(--text-soft); } +.article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } +.article a:hover { border-bottom-color: var(--accent); } + +/* ---- Code ---- */ +code { + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: .87em; + background: var(--accent-soft); + color: var(--accent); + padding: .15em .4em; + border-radius: 6px; +} +pre { + background: var(--code-bg) !important; + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.25rem 1.4rem !important; + overflow-x: auto; + box-shadow: inset 0 1px 0 rgba(255,255,255,.03); + position: relative; +} +pre code { + background: none; + color: #e2e8f0; + padding: 0; + font-size: .88rem; + line-height: 1.6; +} + +/* ---- Tables ---- */ +table { + border-collapse: collapse; + width: 100%; + margin: 1.5rem 0; + font-size: .92rem; + border-radius: 12px; + overflow: hidden; + box-shadow: var(--shadow); +} +th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } +th { background: var(--accent-soft); color: var(--text); font-weight: 600; } +tr:last-child td { border-bottom: none; } +tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } + +/* ---- Blockquote ---- */ +blockquote { + border-left: 4px solid var(--accent); + background: var(--accent-soft); + margin: 1.5rem 0; + padding: 1rem 1.4rem; + border-radius: 0 10px 10px 0; + color: var(--text-soft); +} +blockquote p { margin: 0; } + +.back-link { + display: inline-flex; align-items: center; gap: .4rem; + margin-top: 2.5rem; + color: var(--accent); + text-decoration: none; + font-weight: 600; +} + +/* ---- Footer ---- */ +footer { + border-top: 1px solid var(--border); + padding: 2rem 0; + text-align: center; + color: var(--muted); + font-size: .88rem; +} diff --git a/site/static/style.css b/site/static/style.css new file mode 100644 index 0000000..c1f3814 --- /dev/null +++ b/site/static/style.css @@ -0,0 +1,266 @@ +:root { + --bg: #fafbfc; + --surface: #ffffff; + --text: #1a202c; + --text-soft: #4a5568; + --muted: #718096; + --border: #e2e8f0; + --accent: #6366f1; + --accent-2: #8b5cf6; + --accent-soft: #eef2ff; + --code-bg: #1e1e2e; + --shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05); + --shadow-lg: 0 4px 12px rgba(99,102,241,.15), 0 20px 48px rgba(99,102,241,.12); + --radius: 16px; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #0f1117; + --surface: #171923; + --text: #f7fafc; + --text-soft: #cbd5e0; + --muted: #a0aec0; + --border: #2d3748; + --accent: #818cf8; + --accent-2: #a78bfa; + --accent-soft: #1e1b4b; + --code-bg: #0d0d16; + --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); + --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.35); + } +} + +* { box-sizing: border-box; } + +html { scroll-behavior: smooth; } + +body { + font-family: 'Inter', -apple-system, system-ui, sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.7; + margin: 0; + -webkit-font-smoothing: antialiased; + font-feature-settings: "cv02","cv03","cv04","cv11"; +} + +/* ---- Top bar ---- */ +.topbar { + position: sticky; + top: 0; + z-index: 50; + backdrop-filter: saturate(180%) blur(12px); + background: color-mix(in srgb, var(--surface) 80%, transparent); + border-bottom: 1px solid var(--border); +} +.topbar-inner { + max-width: 1080px; + margin: 0 auto; + padding: .9rem 1.5rem; + display: flex; + align-items: center; + gap: .6rem; +} +.brand { + font-weight: 800; + font-size: 1.05rem; + color: var(--text); + text-decoration: none; + display: flex; + align-items: center; + gap: .55rem; + letter-spacing: -.01em; +} +.brand .logo { + width: 30px; height: 30px; + display: grid; place-items: center; + border-radius: 9px; + background: linear-gradient(135deg, var(--accent), var(--accent-2)); + color: #fff; font-size: .95rem; + box-shadow: var(--shadow-lg); +} +.nav-links { margin-left: auto; display: flex; gap: 1.4rem; } +.nav-links a { + color: var(--text-soft); + text-decoration: none; + font-weight: 500; + font-size: .92rem; + transition: color .15s; +} +.nav-links a:hover { color: var(--accent); } + +/* ---- Layout ---- */ +.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; } +main { padding: 3rem 0 5rem; } + +/* ---- Hero ---- */ +.hero { + text-align: center; + padding: 4.5rem 1.5rem 3.5rem; + position: relative; + overflow: hidden; +} +.hero::before { + content: ""; + position: absolute; inset: 0; + background: + radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); + pointer-events: none; +} +.hero .eyebrow { + display: inline-block; + font-size: .78rem; + font-weight: 600; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--accent); + background: var(--accent-soft); + padding: .35rem .8rem; + border-radius: 999px; + margin-bottom: 1.2rem; +} +.hero h1 { + font-size: clamp(2.2rem, 5vw, 3.4rem); + line-height: 1.1; + letter-spacing: -.03em; + margin: 0 0 1rem; + background: linear-gradient(135deg, var(--text), var(--accent)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} +.hero p { font-size: 1.15rem; color: var(--text-soft); max-width: 640px; margin: 0 auto; } + +/* ---- Cards ---- */ +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1.2rem; + margin: 2.5rem 0; +} +.card { + display: block; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.6rem; + text-decoration: none; + color: var(--text); + box-shadow: var(--shadow); + transition: transform .18s ease, box-shadow .18s ease, border-color .18s; +} +.card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: var(--accent); +} +.card .icon { + width: 44px; height: 44px; + display: grid; place-items: center; + border-radius: 12px; + background: var(--accent-soft); + color: var(--accent); + font-size: 1.3rem; + margin-bottom: 1rem; +} +.card h3 { margin: 0 0 .4rem; font-size: 1.15rem; letter-spacing: -.01em; } +.card p { margin: 0; color: var(--muted); font-size: .92rem; } +.card .arrow { color: var(--accent); font-weight: 700; margin-top: .8rem; display: inline-block; } + +/* ---- Article ---- */ +.article { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 3rem clamp(1.5rem, 5vw, 3.5rem); + box-shadow: var(--shadow); + max-width: 820px; + margin: 0 auto; +} +.article h1 { + font-size: 2.4rem; + letter-spacing: -.025em; + margin: 0 0 1.5rem; + line-height: 1.15; +} +.article h2 { + font-size: 1.6rem; + letter-spacing: -.02em; + margin: 2.5rem 0 1rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border); +} +.article h3 { font-size: 1.25rem; margin: 1.8rem 0 .8rem; } +.article p, .article li { color: var(--text-soft); } +.article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } +.article a:hover { border-bottom-color: var(--accent); } + +/* ---- Code ---- */ +code { + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: .87em; + background: var(--accent-soft); + color: var(--accent); + padding: .15em .4em; + border-radius: 6px; +} +pre { + background: var(--code-bg) !important; + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.25rem 1.4rem !important; + overflow-x: auto; + box-shadow: inset 0 1px 0 rgba(255,255,255,.03); + position: relative; +} +pre code { + background: none; + color: #e2e8f0; + padding: 0; + font-size: .88rem; + line-height: 1.6; +} + +/* ---- Tables ---- */ +table { + border-collapse: collapse; + width: 100%; + margin: 1.5rem 0; + font-size: .92rem; + border-radius: 12px; + overflow: hidden; + box-shadow: var(--shadow); +} +th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } +th { background: var(--accent-soft); color: var(--text); font-weight: 600; } +tr:last-child td { border-bottom: none; } +tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } + +/* ---- Blockquote ---- */ +blockquote { + border-left: 4px solid var(--accent); + background: var(--accent-soft); + margin: 1.5rem 0; + padding: 1rem 1.4rem; + border-radius: 0 10px 10px 0; + color: var(--text-soft); +} +blockquote p { margin: 0; } + +.back-link { + display: inline-flex; align-items: center; gap: .4rem; + margin-top: 2.5rem; + color: var(--accent); + text-decoration: none; + font-weight: 600; +} + +/* ---- Footer ---- */ +footer { + border-top: 1px solid var(--border); + padding: 2rem 0; + text-align: center; + color: var(--muted); + font-size: .88rem; +} diff --git a/site/templates/base.html b/site/templates/base.html new file mode 100644 index 0000000..03c1523 --- /dev/null +++ b/site/templates/base.html @@ -0,0 +1,39 @@ + + + + + + {% block title %}{{ config.title }}{% endblock title %} + + + + + + + +
+
+ + {{ config.title }} + + +
+
+ + {% block body %} +
+ {% block content %}{% endblock content %} +
+ {% endblock body %} + +
+ Généré avec Zola · {{ config.extra.author }} +
+ + + + + diff --git a/site/templates/index.html b/site/templates/index.html new file mode 100644 index 0000000..74ae671 --- /dev/null +++ b/site/templates/index.html @@ -0,0 +1,29 @@ +{% extends "base.html" %} + +{% block body %} +
+ Projet DevOps · CESI +

{{ section.title }}

+

Documentation du script create_repo.sh — création automatisée + de dépôts sur la forge via l'API REST.

+
+ +
+
+ {% for page in section.pages %} + +
📄
+

{{ page.title }}

+

{{ page.description | default(value="Lire la documentation") }}

+ Lire → + + {% endfor %} + +
🔗
+

Dépôt sur la forge

+

Voir le projet exercice sur forge.gwenaelremond.fr

+ Ouvrir → + +
+
+{% endblock body %} diff --git a/site/templates/page.html b/site/templates/page.html new file mode 100644 index 0000000..9ab118b --- /dev/null +++ b/site/templates/page.html @@ -0,0 +1,11 @@ +{% extends "base.html" %} + +{% block title %}{{ page.title }} — {{ config.title }}{% endblock title %} + +{% block content %} + +{% endblock content %}