From fb856e618d61616c1775d26d20fa68ec7f87d5b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Girault?= <felix.girault@gmail.com>
Date: Mon, 10 Feb 2025 18:01:09 +0100
Subject: [PATCH] Auto opening of targeted feature examples

---
 site/index.html | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/site/index.html b/site/index.html
index 94a1b960..edac44f9 100644
--- a/site/index.html
+++ b/site/index.html
@@ -155,7 +155,7 @@ <h3>Internationalization</h3>
 						></iframe>
 					</details>
 
-					<h3 id="styling">Styling</h3>
+					<h3 id="styling" data-example="styling-example">Styling</h3>
 
 					<p>
 						Orejime provides default styles that are easily customizable,
@@ -163,9 +163,10 @@ <h3 id="styling">Styling</h3>
 						plain CSS.
 					</p>
 
-					<details>
+					<details id="styling-example">
 						<summary>Example</summary>
 						<iframe
+							style="min-height: 20lh"
 							data-src="./features/styling.html"
 							title="Example of styling"
 							loading="lazy"
@@ -395,6 +396,27 @@ <h3>Migrating from V2 to V3</h3>
 			document.querySelectorAll('details[open]').forEach(loadFeatureExample);
 		</script>
 
+		<!-- Auto opening of targeted feature examples. -->
+		<script>
+			const openFeatureExample = () => {
+				const hash = window.location.hash;
+				const target = document.getElementById(hash.slice(1));
+
+				if (!target) {
+					return;
+				}
+
+				const example = document.getElementById(target.dataset.example);
+
+				if (example) {
+					example.setAttribute('open', true);
+				}
+			};
+
+			openFeatureExample();
+			window.addEventListener('hashchange', openFeatureExample);
+		</script>
+
 		<!-- Migration form. -->
 		<script>
 			const migrationForm = document.querySelector('.MigrationForm--2-to-3');