caddyserver · ProfessorLogout · Jun 15, 2025 · Jun 18, 2025 · Jun 18, 2025
diff --git a/src/docs/index.html b/src/docs/index.html
@@ -4,6 +4,7 @@
 {{if not (fileExists $markdownFilePath)}}{{httpError 404}}{{end}}
 {{$markdownFile := (include $markdownFilePath | splitFrontMatter)}}
 {{$title := default $markdownFilename $markdownFile.Meta.title}}
+{{$headless := default false $markdownFile.Meta.headless}}
 <!DOCTYPE html>
 <html>
 	<head>
@@ -27,5 +28,8 @@
 			<div class="sidebar"></div>
 		</main>
 		{{include "/old/includes/footer.html"}}
+		{{if $headless}}
+		<script src="/resources/js/vendor/headless.min.js{{template "cacheBust"}}"></script>
+		{{end}}
 	</body>
 </html>
diff --git a/src/docs/markdown/caddyfile/directives/handle.md b/src/docs/markdown/caddyfile/directives/handle.md
@@ -1,5 +1,6 @@
 ---
 title: handle (Caddyfile directive)
+headless: true
 ---
 
 # handle
@@ -87,3 +88,46 @@ example.com {
 	}
 }
 ```
+
+## Playground
+
+Experiment with the previous example to form a better understanding of nested `handle` blocks:
+
+<tech-playground playground="caddy" output-style="boxed" output-order="command.stdout,command.stderr" show-version-selector="false">
+
+```caddy
+:80 {
+	handle /foo* {
+		handle /foo/bar* {
+			# This block only matches paths under /foo/bar
+			reverse_proxy echo.local {
+				header_up Handle-Block "/foo/bar/*"
+			}
+		}
+
+		handle {
+			# This block matches everything else under /foo/
+			reverse_proxy echo.local {
+				header_up Handle-Block "remaining /foo*"
+			}
+		}
+	}
+
+	handle {
+		# This block matches everything else (acts as a fallback)
+		reverse_proxy echo.local {
+			header_up Handle-Block "everything remaining"
+		}
+	}
+}
+```
+
+```bash
+curl --silent http://127.0.0.1/foo/bar/baz | grep -E "request_path|Handle-Block"
+
+curl --silent http://127.0.0.1/foo/baz | grep -E "request_path|Handle-Block"
+
+curl --silent http://127.0.0.1/baz | grep -E "request_path|Handle-Block"
+```
+
+</tech-playground>
diff --git a/src/docs/markdown/caddyfile/directives/handle_path.md b/src/docs/markdown/caddyfile/directives/handle_path.md
@@ -1,5 +1,6 @@
 ---
 title: handle_path (Caddyfile directive)
+headless: true
 ---
 
 <script>
@@ -58,17 +59,25 @@ handle /prefix/* {
 
 A full Caddyfile example, where `handle_path` and `handle` are mutually exclusive; but, be aware of the [subfolder problem <img src="/old/resources/images/external-link.svg" class="external-link">](https://caddy.community/t/the-subfolder-problem-or-why-cant-i-reverse-proxy-my-app-into-a-subfolder/8575)
 
+<tech-playground playground="caddy" output-style="boxed" output-order="command.stdout,command.stderr" show-version-selector="false">
+
 ```caddy
-example.com {
+:80 {
 	# Serve your API, stripping the /api prefix
 	handle_path /api/* {
-		reverse_proxy localhost:9000
+		reverse_proxy echo.local
 	}
 
 	# Serve your static site
 	handle {
-		root * /srv
+		root * /var/www/html
 		file_server
 	}
 }
 ```
+
+```bash
+http get http://127.0.0.1/api/my-endpoint
+```
+
+</tech-playground>
diff --git a/src/old/resources/css/docs.css b/src/old/resources/css/docs.css
@@ -1109,3 +1109,7 @@ blockquote {
 		border-color: #33659a;
 	}
 }
+
+tech-playground > .tech-playground-controls > * {
+	mrgin-left: 10px;
+}
diff --git a/src/resources/js/vendor/headless.min.js b/src/resources/js/vendor/headless.min.js