Use markdown syntax highlighting on frontpage

new/includes/examples/custom-ca.md

@@ -0,0 +1,26 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-custom-ca pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-custom-ca">
+
+```caddy
+{
+	pki {
+		ca corporate {
+			name "Our Corporation Authority"
+		}
+	}
+}
+
+internal.example.com {
+	# ACME endpoint: /acme/corporate/directory
+	acme_server {
+		ca corporate
+	}
+}
+```
+
+</div>

new/includes/examples/file-server.md

@@ -0,0 +1,63 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	let startElement, endElement;
+
+	startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /downloads/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span', 'encode');
+	endElement = findNextText(startElement, 'gzip');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /database/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /embedded/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span', '# (Range/Etag/etc. all work without extra config)');
+	wrapRangeWithSpan(startElement, startElement, 'rollover-range rollover-yellow');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span', 'file_server');
+	endElement = findNextText(startElement, 'browse');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple');
+
+	window.$('.ex-fs pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-fs">
+
+```caddy
+example.com
+
+root * /var/www
+
+# Serve precompressed files if present
+file_server /downloads/* {
+	precompressed gzip zstd br
+}
+
+# Compress everything else that would benefit
+encode zstd gzip
+
+# Get files from a database
+file_server /database/* {
+	fs sqlite data.sql 
+}
+
+# Get files from within the Caddy binary
+file_server /embedded/* {
+	fs embedded
+}
+
+# (Range/Etag/etc. all work without extra config)
+
+# Serve static site with directory listings as needed
+file_server browse
+```
+
+</div>

new/includes/examples/json-automate-certs.md

@@ -0,0 +1,25 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-json-automate-certs pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-json-automate-certs">
+
+```json
+{
+  "apps": {
+    "tls": {
+      "certificates": {
+        "automate": [
+          "example.com",
+          "sub.example.com",
+          "example.net"
+        ]
+      }
+    }
+  }
+}
+```
+
+</div>

new/includes/examples/local-https.md

@@ -0,0 +1,23 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-local-https pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-local-https">
+
+```caddy
+localhost {
+	respond "Hello from HTTPS!"
+}
+
+192.168.1.10 {
+	respond "Also HTTPS!"
+}
+
+http://localhost {
+	respond "Plain HTTP"
+}
+```
+
+</div>

new/includes/examples/proxy.md

@@ -0,0 +1,51 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	let startElement, endElement;
+
+	startElement = findWithContent('.ex-proxy pre.chroma code span', 'php_fastcgi');
+	endElement = findNextText(startElement, '9000');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-php rollover-green');
+
+	startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /api/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-dynamic-backends rollover-purple');
+
+	startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /service/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-ha rollover-blue');
+});
+</script>
+
+<div class="ex-proxy">
+
+```caddy
+example.com
+
+# Serve PHP sites
+handle /blog/* {
+	root * /var/www/wordpress
+	php_fastcgi localhost:9000
+	file_server
+}
+
+# Proxy an autoscaling API with dynamic backends
+reverse_proxy /api/* {
+	dynamic srv _api._tcp.example.com
+}
+
+# Proxy a compute-heavy distributed service
+# with load balancing and health checks
+reverse_proxy /service/* {
+	to              10.0.1.1:80 10.0.1.2:80 10.0.1.3:80
+	lb_policy       least_conn
+	lb_try_duration 10s
+	fail_duration   5s
+}
+
+# Proxy everything else to an HTTPS upstream
+reverse_proxy https://service.example.com {
+	header_up Host {upstream_hostport}
+}
+```
+
+</div>

new/includes/examples/website-caddyfile.md

@@ -0,0 +1,25 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-website-caddyfile pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-website-caddyfile">
+
+```caddy
+caddyserver.com
+
+root * src
+
+file_server
+templates # markdown & syntax highlighting!
+encode zstd gzip
+
+redir   /docs/json   /docs/json/
+rewrite /docs/json/* /docs/json/index.html
+rewrite /docs/*      /docs/index.html
+
+reverse_proxy /api/* localhost:9002
+```
+
+</div>