templating #19 HTML et CSS, modularisation #14 JS et PHP

YannisDelmas · Feb 1, 2022 · 057e724 · 057e724
1 parent aedb33e
commit 057e724
Show file tree

Hide file tree

Showing 12 changed files with 246 additions and 518 deletions.
diff --git a/_page.twig b/_page.twig
@@ -19,6 +19,7 @@
 		<h1>{% block docTitle %}Le beau code web{% endblock %}</h1>
 	</header>
 	<main>
+		{% block docIntroduction %}{% endblock %}
 		{% block docContent %}
 			{% for component in components %}
 				{% include component %}

diff --git a/docs/guide-generalites.html b/docs/guide-generalites.html
@@ -20,6 +20,7 @@ <h1>BCW-1 Recommandations générales pour le codage web</h1>
 	</header>
 	<main>
 
+
 
 				<section id="nom-fichiers">
 	<h2>

diff --git a/docs/guide-html.html b/docs/guide-html.html
@@ -1,24 +1,35 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-	<meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>BCW-2 Recommandations pour le codage en HTML — Le beau code web</title>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.css" integrity="sha512-y56hHawsGNNkestAKyhMKxX25fF3QjUkrUESd4qYTPlKqz1s890GRkp95U7vj3tS1Qr/NCYE3bbYOq9MzAXI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-	<link rel="stylesheet" href="assets/css/mint-and-grapes.css">
+
+	<!-- Ne pas modifier ce fichier produit automatiquement à partir de «guide-generalites.twig», «guide-html-010-valide.twig». -->
+
+
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>BCW-2 Recommandations pour le codage en HTML — Le beau code web</title>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+		<link rel="stylesheet" href="assets/css/mint-and-grapes.css">
+
 </head>
 <body data-glossary="principes.html .glossary">
 	<header>
 		<h1>BCW-2 Recommandations pour le codage en HTML</h1>
 	</header>
 	<main>
-		<section>
-			<h2 id="validite">
+
+
+
+				<section id="validite">
+	<h2>
+
 				Validité du code
-				<a class="self-link" href="#validite"></a>
-			</h2>
+
+		<a class="self-link" href="#validite"></a>
+	</h2>
+
 			<ol>
 				<li>
 					<p>
@@ -119,8 +130,10 @@ <h2 id="validite">
 					</aside>
 				</li>
 			</ol>
-			<details class="rationale">
-				<summary>Justification</summary>
+
+	<details class="rationale">
+		<summary>Justification</summary>
+
 				<ol>
 					<li>
 						<p>
@@ -204,15 +217,12 @@ <h2 id="validite">
 						</p>
 					</li>
 				</ol>
-			</details>
-		</section>
-		<nav>
-			<h2>Autres recommandations</h2>
-			<p>
-				D’autres recommandations sont en projet.
-				N’hésitez pas à consulter notre <a href="https://github.com/YannisDelmas/beau-code-web/"><i class="fab fa-github"></i> dépôt Github</a> pour faire des propositions.
-			</p>
-		</nav>
+
+	</details>
+</section>
+
+
+
 	</main>
 	<footer>
 		<p>
@@ -226,9 +236,9 @@ <h2>Autres recommandations</h2>
 		</p>
 	</footer>
 	<script type="module" src="assets/js/glossary.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.js" integrity="sha512-PVMnmOnCm6A2IHP8RMGclS5lEYaJyzpYkov5bfQs7MHYibBbh0JqE1/D3XQ9AkQCBzcsVmntztTnI7VOwOulXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/keep-markup/prism-keep-markup.min.js" integrity="sha512-sk5ho9bSGJw3N1ZPkk5KZJeiCj6oVRoK59/Bbo50jA6AJdzXR705fE1A1urV5+qwRWDJ+nEt5TALKvRFj+PLGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/keep-markup/prism-keep-markup.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </body>
-</html>
+</html>
diff --git a/docs/guide-style.html b/docs/guide-style.html
@@ -1,19 +1,25 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-	<meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>BCW-3 Recommandations le codage CSS — Le beau code web</title>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.css" integrity="sha512-y56hHawsGNNkestAKyhMKxX25fF3QjUkrUESd4qYTPlKqz1s890GRkp95U7vj3tS1Qr/NCYE3bbYOq9MzAXI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-	<link rel="stylesheet" href="assets/css/mint-and-grapes.css">
+
+	<!-- Ne pas modifier ce fichier produit automatiquement à partir de «guide-generalites.twig», «guide-style-010-forme.twig». -->
+
+
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>BCW-3 Recommandations le codage CSS — Le beau code web</title>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+		<link rel="stylesheet" href="assets/css/mint-and-grapes.css">
+
 </head>
-<body>
+<body data-glossary="principes.html .glossary">
 	<header>
 		<h1>BCW-3 Recommandations le codage des feuilles de style</h1>
 	</header>
 	<main>
+
 		<section>
 			<h2 class="sr-only">Introduction</h2>
 			<p>
@@ -48,11 +54,17 @@ <h2 class="sr-only">Introduction</h2>
 				</p>
 			</aside>
 		</section>
-		<section id="rec-forme">
-			<h2>
+
+
+
+				<section id="forme">
+	<h2>
+
 				Mise en forme des règles
-				<a class="self-link" href="#rec-forme"></a>
-			</h2>
+
+		<a class="self-link" href="#forme"></a>
+	</h2>
+
 			<ol>
 				<li>
 					Dans une liste de sélecteurs, il est <abbr title="" class="rfc2119">recommandé</abbr>
@@ -95,7 +107,10 @@ <h2>
 	<span id="forme-decl-ex3">font-famil<span id="forme-nosp-ex1">y:</span> Arial<span id="forme-sp-ex3">, </span>Helvetic<span id="forme-nosp-ex2">a,</span> sans-serif<span id="forme-term-ex">;</span></span>
 }</code></pre>
 		</aside>
-			<details class="rationale"><summary>Justification</summary>
+
+	<details class="rationale">
+		<summary>Justification</summary>
+
 				<ol>
 					<li value="3">
 						La même logique préside aux trois premiers points&nbsp;:
@@ -133,14 +148,81 @@ <h2>
 						à un niveau international.
 					</li>
 				</ul>
-			</details>
-		</section>
-		<nav>
-			<p>
-				Pour d’autres projets de recommandation,
-				n’hésitez pas à consulter notre <a href="https://github.com/YannisDelmas/beau-code-web/"><i class="fab fa-github"></i> dépôt Github</a> pour faire des propositions.
-			</p>
-		</nav>
+		<script src="assets/js/leader-line.min.js" defer></script>
+		<script>
+			window.addEventListener('load', function() {
+				let opt = {path: 'straight', size: 1.75, color: '#003399', startSocket: 'bottom', endSocket: 'top', dropShadow: {dx:1,dy:1,blur:1}};
+				new LeaderLine(
+					document.getElementById('forme-sel-legende'),
+					document.getElementById('forme-sel-ex1'),
+					opt
+				);
+				new LeaderLine(
+					document.getElementById('forme-sel-legende'),
+					document.getElementById('forme-sel-ex2'),
+					opt
+				);
+				new LeaderLine(
+					document.getElementById('forme-decl-legende'),
+					LeaderLine.pointAnchor(document.getElementById('forme-decl-ex1'), {x: '70%', y: 0}),
+					opt
+				);
+				new LeaderLine(
+					document.getElementById('forme-decl-legende'),
+					LeaderLine.pointAnchor(document.getElementById('forme-decl-ex2'), {x: '90%', y: 0}),
+					opt
+				);
+				new LeaderLine(
+					document.getElementById('forme-decl-legende'),
+					document.getElementById('forme-decl-ex3'),
+					opt
+				);
+				new LeaderLine(
+					document.getElementById('forme-term-legende'),
+					LeaderLine.areaAnchor(document.getElementById('forme-term-ex'), 'rect'),
+					opt
+				);
+				opt.path = 'fluid';
+				opt.color = '#339900';
+				opt.endSocket = 'right';
+				opt.startSocketGravity = [-100, +50];
+				new LeaderLine(
+					document.getElementById('forme-sp-legende'),
+					LeaderLine.areaAnchor(document.getElementById('forme-sp-ex1'), 'rect'),
+					opt
+				);
+				new LeaderLine(
+					document.getElementById('forme-sp-legende'),
+					LeaderLine.areaAnchor(document.getElementById('forme-sp-ex2'), 'rect'),
+					opt
+				);
+				new LeaderLine(
+					document.getElementById('forme-sp-legende'),
+					LeaderLine.areaAnchor(document.getElementById('forme-sp-ex3'), 'rect'),
+					opt
+				);
+				opt.color = '#990033';
+				opt.startSocketGravity = 'auto';
+				opt.endSocketGravity = [200, 100];
+				new LeaderLine(
+					document.getElementById('forme-nosp-legende'),
+					LeaderLine.areaAnchor(document.getElementById('forme-nosp-ex1'), 'rect'),
+					opt
+				);
+				opt.endSocketGravity = [100, 50];
+				new LeaderLine(
+					document.getElementById('forme-nosp-legende'),
+					LeaderLine.areaAnchor(document.getElementById('forme-nosp-ex2'), 'rect'),
+					opt
+				);
+			});
+		</script>
+
+	</details>
+</section>
+
+
+
 	</main>
 	<footer>
 		<p>
@@ -153,78 +235,10 @@ <h2>
 			<a href="principes.html#mentions-legales"><i class="fas fa-scale-balanced"></i> mentions légales</a>
 		</p>
 	</footer>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.js" integrity="sha512-PVMnmOnCm6A2IHP8RMGclS5lEYaJyzpYkov5bfQs7MHYibBbh0JqE1/D3XQ9AkQCBzcsVmntztTnI7VOwOulXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/keep-markup/prism-keep-markup.min.js" integrity="sha512-sk5ho9bSGJw3N1ZPkk5KZJeiCj6oVRoK59/Bbo50jA6AJdzXR705fE1A1urV5+qwRWDJ+nEt5TALKvRFj+PLGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-	<script src="assets/js/leader-line.min.js"></script>
-	<script>
-		window.addEventListener('load', function() {
-			let opt = {path: 'straight', size: 1.75, color: '#003399', startSocket: 'bottom', endSocket: 'top', dropShadow: {dx:1,dy:1,blur:1}};
-			new LeaderLine(
-				document.getElementById('forme-sel-legende'),
-				document.getElementById('forme-sel-ex1'),
-				opt
-			);
-			new LeaderLine(
-				document.getElementById('forme-sel-legende'),
-				document.getElementById('forme-sel-ex2'),
-				opt
-			);
-			new LeaderLine(
-				document.getElementById('forme-decl-legende'),
-				LeaderLine.pointAnchor(document.getElementById('forme-decl-ex1'), {x: '70%', y: 0}),
-				opt
-			);
-			new LeaderLine(
-				document.getElementById('forme-decl-legende'),
-				LeaderLine.pointAnchor(document.getElementById('forme-decl-ex2'), {x: '90%', y: 0}),
-				opt
-			);
-			new LeaderLine(
-				document.getElementById('forme-decl-legende'),
-				document.getElementById('forme-decl-ex3'),
-				opt
-			);
-			new LeaderLine(
-				document.getElementById('forme-term-legende'),
-				LeaderLine.areaAnchor(document.getElementById('forme-term-ex'), 'rect'),
-				opt
-			);
-			opt.path = 'fluid';
-			opt.color = '#339900';
-			opt.endSocket = 'right';
-			opt.startSocketGravity = [-100, +50];
-			new LeaderLine(
-				document.getElementById('forme-sp-legende'),
-				LeaderLine.areaAnchor(document.getElementById('forme-sp-ex1'), 'rect'),
-				opt
-			);
-			new LeaderLine(
-				document.getElementById('forme-sp-legende'),
-				LeaderLine.areaAnchor(document.getElementById('forme-sp-ex2'), 'rect'),
-				opt
-			);
-			new LeaderLine(
-				document.getElementById('forme-sp-legende'),
-				LeaderLine.areaAnchor(document.getElementById('forme-sp-ex3'), 'rect'),
-				opt
-			);
-			opt.color = '#990033';
-			opt.startSocketGravity = 'auto';
-			opt.endSocketGravity = [200, 100];
-			new LeaderLine(
-				document.getElementById('forme-nosp-legende'),
-				LeaderLine.areaAnchor(document.getElementById('forme-nosp-ex1'), 'rect'),
-				opt
-			);
-			opt.endSocketGravity = [100, 50];
-			new LeaderLine(
-				document.getElementById('forme-nosp-legende'),
-				LeaderLine.areaAnchor(document.getElementById('forme-nosp-ex2'), 'rect'),
-				opt
-			);
-		});
-	</script>
+	<script type="module" src="assets/js/glossary.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/show-invisibles/prism-show-invisibles.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/keep-markup/prism-keep-markup.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </body>
 </html>
diff --git a/docs/principes.html b/docs/principes.html
@@ -2,7 +2,7 @@
 <html lang="fr">
 <head>
 
-	<!-- Ne pas modifier ce fichier produit automatiquement à partir de «guide-generalites.twig», «guide-generalites-010-fichiers.twig». -->
+	<!-- Ne pas modifier ce fichier produit automatiquement à partir de «guide-generalites.twig», «guide-style-010-forme.twig». -->
 
 
 		<meta charset="UTF-8">
@@ -20,6 +20,7 @@ <h1>BCW-0 Principes du «&nbsp;Beau code web&nbsp;»</h1>
 	</header>
 	<main>
 
+
 		<section id="public">
 			<h2>
 				À qui s’adresse ce guide