More homepage/features content, screenshots, tweaks

new/features.html

@@ -248,7 +248,7 @@
 
 
 
-			<section class="diagonal down dark feature">
+			<section class="diagonal down gray feature">
 				<div class="wrapper">
 					<h2>
 						Command line interface
@@ -473,7 +473,7 @@
 						<div class="feature-row">
 							<h4>On-Demand TLS</h4>
 							<div class="benefits">
-								Serving domains that aren't yours? Or have lots of them? No problem! With just a few lines of config, On-Demand TLS gets certificates dynamically during TLS handshakes, scaling your deployments to tens of thousands of certs. This functionality is a Caddy exclusive.
+								Serving domains that aren't yours? Or have lots of them? No problem! With just a few lines of config, On-Demand TLS gets certificates dynamically during TLS handshakes, scaling your deployments to tens of thousands of certs. This functionality is exclusive to Caddy.
 							</div>
 						</div>
 						<div class="feature-row">
@@ -514,6 +514,9 @@
 							<div class="benefits">
 								By default, HTTP requests will be redirected to HTTPS.
 							</div>
+							<div class="detail">
+								Automatic redirects
+							</div>
 						</div>
 						<div class="feature-row">
 							<h4>OCSP</h4>
@@ -530,6 +533,12 @@
 								Caddy can obtain certificates that force OCSP stapling if the CA supports it. This may grant a higher degree of security in the case of revocation.
 							</div>
 						</div>
+						<div class="feature-row">
+							<h4>Revocation handling</h4>
+							<div class="benefits">
+								Revoked certificates automatically get replaced. Because Caddy staples and refreshes OCSP responses, it can detect if your certificate has been revoked, and if so, it will replace i
+							</div>
+						</div>
 						<div class="feature-row">
 							<h4>Session ticket hardening</h4>
 							<div class="benefits">
@@ -641,10 +650,16 @@
 								<li>TLS-ALPN (default 443)</li>
 							</ul>
 						</div>
+						<div class="feature-row">
+							<h4>Smart challenge selection</h4>
+							<div class="benefits">
+								Caddy learns what challenge types are most likely to succeed and tries those first. For example, if port 80 is blocked, it will learn to prefer the TLS-ALPN challenge which does not use port 80.
+							</div>
+						</div>
 						<div class="feature-row">
 							<h4>DNS challenge integrations</h4>
 							<div class="benefits">
-								Solve the DNS challenge with integrations for dozens of DNS providers. <b>This list is incomplete;</b> <a href="https://github.com/caddy-dns">see the full list of DNS providers</a>.
+								The DNS challenge is the only one that does not require the CA being able to access your server. Solve the DNS challenge with integrations for dozens of DNS providers via <a href="https://github.com/libdns">libdns</a>. <b>This list is incomplete;</b> <a href="https://github.com/caddy-dns">see the full list of DNS providers</a>.
 							</div>
 							<ul class="detail">
 								<li class="nonstandard">ACME-DNS</li>
@@ -675,8 +690,24 @@
 								<li><a href="https://github.com/caddy-dns">See all...</a></li>
 							</ul>
 						</div>
+						<div class="feature-row">
+							<h4>Trusted CA certificates</h4>
+							<div class="benefits">
+								Optionally configure root certificates you trust when interacting with your CA of choice; this is helpful for internal PKI where trust is established without public CAs.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Preferred chains</h4>
+							<div class="benefits">
+								When the CA offers multiple certificate chains, Caddy gives you the ability to customize which one to download and use.
+							</div>
+							<ul class="detail">
+								<li>Smallest</li>
+								<li>CommonName of root</li>
+								<li>CommonName of any</li>
+							</ul>
+						</div>
 					</div>
-					
 
 				</div>
 			</section>
@@ -685,7 +716,7 @@
 
 
 
-			<section class="diagonal down gray feature">
+			<section class="diagonal down feature">
 				<div class="wrapper">
 					<h2>
 						HTTP server
@@ -697,7 +728,7 @@
 						<div class="feature-row">
 							<h4>HTTP versions</h4>
 							<div class="benefits">
-								Caddy's HTTP server supports all major versions of HTTP and enables them by default. You can customize exacttly which versions you want to serve.
+								Caddy's HTTP server supports all major versions of HTTP and enables them by default (except H2C which is insecure, but available). You can customize exactly which versions you want to serve.
 							</div>
 							<ul class="detail">
 								<li>HTTP/1.1</li>
@@ -718,7 +749,7 @@
 						<div class="feature-row">
 							<h4>Listen interfaces</h4>
 							<div class="benefits">
-								Each HTTP server can listen on one or more sockets and network interfaces. For ports, you can specify specific host interface or all interfaces with just a port. All varieties of unix sockets are also supported.
+								Each HTTP server can bind to one or more sockets and network interfaces. For ports, you can specify specific host interface or all interfaces with just a port. All varieties of unix sockets are also supported.
 							</div>
 							<ul class="detail">
 								<li>TCP</li>
@@ -777,7 +808,7 @@
 							<ul class="detail">
 								<li>TLS 1.2</li>
 								<li>TLS 1.3</li>
-								<li>Client authentication (TLS mutual auth)</li>
+								<li>Client authentication (TLS mutual auth; mTLS)</li>
 								<li>Client auth modes: request, require, verify if given, require and verify</li>
 								<li>Cipher suites</li>
 								<li>Curves</li>
@@ -818,13 +849,270 @@
 								Prometheus metrics, open telemetry
 							</div>
 						</div>
+						<div class="feature-row">
+							<h4>Request handling</h4>
+							<div class="benefits">
+								The HTTP server handles requests using custom routes consisting of specific handlers in the order you define. A separate error route can be defined for custom error handling. You have a high degree of flexibility with HTTP handling. See below for available HTTP handler modules.
+							</div>
+							<div class="detail">
+								Composable routes (and separate error handling routes)
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Request filters</h4>
+							<div class="benefits">
+								Apply handlers to only certain requests using matchers, which classify requests based on various properties. Matchers are also used for filtering. They are extensible and pluggable, so there's no limit to how specific and custom your routes can be! Some matchers support regular expressions. All are quite fast. And matchers can be combined in sets so they can be joined with AND, OR, and NOT logic.
+							</div>
+							<ul class="detail">
+								<li>Host</li>
+								<li>Path </li>
+								<li>Method</li>
+								<li>Headers</li>
+								<li>Protocol</li>
+								<li>Remote IP</li>
+								<li>Arbitrary CEL expression</li>
+								<li>File (existence, size, modify date)</li>
+								<li>HTTP route variable</li>
+								<li>Logical NOT</li>
+								<li class="nonstandard">Geolocation</li>
+								<li class="nonstandard">Remote host</li>
+							</ul>
+						</div>
+					</div>
+
+					<h3 class="blue">HTTP handlers</h3>
+
+					<p>
+						Handlers are modules that can be composed together to handle incoming requests precisely the way you want. Handler modules are, like the rest of Caddy, extensible and pluggable. It is not really feasible for us to list all the handlers here.
+					</p>
+					<p>
+						In practice, handlers are paired with matchers which filter or classify requests based on various properties such as their path, headers, query string, method, and more. This allows you to selectively apply any and all of these handlers to certain requests.
+					</p>
+
+					<div class="feature-list">
+						<div class="feature-row">
+							<h4>ACME server</h4>
+							<div class="benefits">
+								Right out of the box, Caddy ships with a production-ready ACME server, perfect for your internal PKI. Automate mTLS certificates inside your infrastructure with ease. Powered by <a href="https://smallstep.com">Smallstep</a> libraries.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Authelia</h4>
+							<div class="benefits">
+								Secure routes with authentication using Authelia.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Authentication</h4>
+							<div class="benefits">
+								Authenticate users with an extensible authentication module. Extended by auth providers, this handler returns an error if the user cannot be authenticated by any configured providers. HTTP basicauth is included standard, and unlike other servers, passwords are hashed when setting up basicauth (since it's essentially a password database), enhancing security.
+							</div>
+							<ul class="detail">
+								<li>HTTP Basic authentication</li>
+								<li class="nonstandard">JWT</li>
+								<li class="nonstandard">Discord</li>
+								<li class="nonstandard">Forms</li>
+								<li class="nonstandard">SAML</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Advanced auth</h4>
+							<div class="benefits">
+								With a full suite of authentication and authorization features, the caddy-security module provides a variety of robust auth solutions.
+							</div>
+							<ul class="detail nonstandard">
+								<li>Form-based</li>
+								<li>Local</li>
+								<li>Basic</li>
+								<li>LDAP</li>
+								<li>OpenID Connect</li>
+								<li>OAuth 2</li>
+								<li>SAML</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Cache</h4>
+							<div class="benefits">
+								Easily enable caching to serve more clients and increase performance. This cache module is compliant with RFC 7234 and supports tag-based cache purge, distributed and local storage, key generation tweaking, and more. Multiple backends are supported!
+							</div>
+							<ul class="detail nonstandard">
+								<li>Badger</li>
+								<li>Etcd</li>
+								<li>NutsDB</li>
+								<li>Olric</li>
+								<li>Redis</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Encode</h4>
+							<div class="benefits">
+								Compress, encode, or otherwise transform HTTP responses on-the-fly with pluggable encoding modules. Compressing responses is as easy as a single line of configuration, and encodings won't be applied to responses that are already in a compressed format or are too small to be worthwhile.
+							</div>
+							<ul class="detail">
+								<li>Gzip</li>
+								<li>Zstandard (zstd)</li>
+								<li class="nonstandard">Brotli</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>File server</h4>
+							<div class="benefits">
+								A powerful, flexible, and efficient static file server that is described in detail below.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Go package vanity paths</h4>
+							<div class="benefits">
+								A simple handler that implements vanity import paths for Go packages.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">gRPC-Web bridging</h4>
+							<div class="benefits">
+								Bridge/convert gRPC-Web requests to gRPC for your backend app.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Header manipulation</h4>
+							<div class="benefits">
+								Modify HTTP request and response headers. Adding, setting, deleting, and replacing substrings in header fields is fast, but regular expressions are also supported for advanced use. Response header manipulations can be deferred until the very end when the response starts to be written, and can even be made conditional on response status code or header values.
+							</div>
+							<ul class="detail">
+								<li>Add</li>
+								<li>Set (overwrite)</li>
+								<li>Delete</li>
+								<li>Substring replace</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Image filtering</h4>
+							<div class="benefits">
+								Perform adjustments on images on-the-fly.
+							</div>
+							<ul class="detail nonstandard">
+								<li>Crop</li>
+								<li>Fit</li>
+								<li>Flip</li>
+								<li>Resize</li>
+								<li>Rotate</li>
+								<li>Sharpen</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Map</h4>
+							<div class="benefits">
+								Assign variable/placeholder values based on input values; similar to a lookup table.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Mercure</h4>
+							<div class="benefits">
+								Make your Caddy instance a Mercure hub: an open, easy, fast, reliable and battery-efficient solution for real-time communications.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Mercure</h4>
+							<div class="benefits">
+								Make your Caddy instance a Mercure hub: an open, easy, fast, reliable and battery-efficient solution for real-time communications.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Metrics</h4>
+							<div class="benefits">
+								Expose a /metrics endpoint for use with Prometheus-compatible systems and other monitoring tools.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>HTTP/2 server push</h4>
+							<div class="benefits">
+								Proactively push resources to clients before they request it when HTTP/2 is used. (May be deprecated by browsers, but Caddy still has a valid implementation that is useful in certain applications.)
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Rate limiting</h4>
+							<div class="benefits">
+								Advanced, enterprise-grade rate limiter implemented using a ring buffer and sliding window algorithm that scales massively based on zone keys. Configure a cluster of Caddy instances with the same storage to distribute rate limiting across your fleet. No memory bound required like with other enterprise servers.
+							</div>
+							<ul class="nonstandard">
+								<li>Local or distributed</li>
+								<li>Multiple zones</li>
+								<li>Buffer pooling</li>
+								<li>Only 1 goroutine</li>
+								<li>Configurable O(Kn) memory management</li>
+								<li>State persisted through reloads</li>
+								<li>Sets Retry-After header</li>
+								<li>Optional jitter</li>
+								<li>Highly programmable</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Request body controls</h4>
+							<div class="benefits">
+								Restrict the size of the request body by rejecting requests that are too large.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">Reverse proxy</h4>
+							<div class="benefits">
+								Caddy has a world-class reverse proxy, described in detail in a section below.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Rewrite requests</h4>
+							<div class="benefits">
+								Make internal changes to requests before continuing to process them. This is useful to accept requests that need to be changed to conform to an expectation later on. Various aspects of the request can be changed such as method and URI.
+							</div>
+							<ul class="detail">
+								<li>Method</li>
+								<li>URI (path, query string)</li>
+								<li>Strip path prefix or suffix</li>
+								<li>Regular expression support</li>
+								<li>Intelligent URL-encoding and forward-slash handling</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Static responses</h4>
+							<div class="benefits">
+								Hard-code a static response into your config, with the ability to set the status code, header fields, and body. (This is often used to respond with HTTP redirects.) The connection may then be gracefully closed, or forcefully aborted if needed.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Subrouting</h4>
+							<div class="benefits">
+								Group handlers into a "subroute" to treat several handlers as one, making certain logic easier to reason about.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Templates</h4>
+							<div class="benefits">
+								Responses can be evaluated as templates, which give you the ability to turn proxied or static content into rich, dynamic content with variables, if statements, markdown rendering (with front matter support), and more.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Tracing</h4>
+							<div class="benefits">
+								Support for distributed tracing using OpenTelemetry.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Variables</h4>
+							<div class="benefits">
+								Read and write variables that can be used internally as you process requests.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4 class="nonstandard">WebDAV</h4>
+							<div class="benefits">
+								Become a WebDAV server with one or two lines of config. Compatible with most WebDAV clients.
+							</div>
+						</div>
 					</div>
 				</div>
 			</section>
 
 
 
-			<section class="diagonal up dark feature">
+			<section class="diagonal up gray feature">
 				<div class="wrapper">
 					<h2>
 						Reverse proxy
@@ -931,7 +1219,7 @@
 						<div class="feature-row">
 							<h4>Header manipulation</h4>
 							<div class="benefits">
-								Headers can be modified in the request going up to the backend and the response coming back down from the backend.
+								Headers can be modified in the request going up to the backend and the response coming back down from the backend. This is similar to the general HTTP server's header handler, but this is applied while proxying.
 							</div>
 							<ul class="detail">
 								<li>Add</li>
@@ -943,7 +1231,7 @@
 						<div class="feature-row">
 							<h4>Buffering</h4>
 							<div class="benefits">
-								The proxy can read the entire body before flushing it. This uses more memory but can be required by some backend applications or clients in some cases.
+								The proxy can optionally read the entire body before flushing it. This uses more memory but can be required by some backend applications or clients in some cases.
 							</div>
 							<ul class="detail">
 								<li>Requests</li>
@@ -1190,21 +1478,236 @@
 						Static file server
 					</h2>
 					<p>
-						Caddy's file server is the preferred way of serving static files for your website. 
+						Caddy's file server is the premier way of serving static files for your website. 
 					</p>
 					<p>
-						The way it works is simple: specify a root directory from which to serve the files, then request paths are automatically inferred as file paths relative to that root and the file is sent to the client.
+						It's simple: specify a root directory from which to serve the files, then each request path is automatically appended to the root to get the full path of the file to serve.
 					</p>
 					<div class="feature-list">
 						<div class="feature-row">
-							<h4>TODO...</h4>
+							<h4>Kernel acceleration</h4>
 							<div class="benefits">
-								TODO...
+								Caddy bypasses user-space buffers whenever possible to speed up file downloads by a significant factor.
 							</div>
 							<div class="detail">
-								TODO...
+								sendfile
 							</div>
 						</div>
+						<div class="feature-row">
+							<h4>Virtual file systems</h4>
+							<div class="benefits">
+								By default, Caddy serves files from a directory you specify on the local disk, but this file access is pluggable and can be replaced by any virtualized file system modules. This allows you to serve static files from any file store such as databases, cloud storage, or even assets embedded directly in the web server binary!
+							</div>
+							<ul class="detail">
+								<li>Local disk</li>
+								<li class="nonstandard">Embedded assets</li>
+								<li class="nonstandard">Amazon AWS S3</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Precompressed files</h4>
+							<div class="benefits">
+								If your deployment pipeline compresses site resources, Caddy can automatically detect them and serve them in their "precompressed" encoding for higher efficiency and greater throughput.
+							</div>
+							<ul class="detail">
+								<li>Gzip</li>
+								<li>Brotli</li>
+								<li>Zstandard</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Hide files and folders</h4>
+							<div class="benefits">
+								Increase your security posture by proactively hiding potentially-sensitive files and folders that do or could exist in your site root. You can specify individual file/folder paths, filenames regardless of their path, or glob matches to hide files/folders with a particular pattern.
+							</div>
+							<div class="detail">
+								Exact paths, filenames, globular matching
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Index filenames</h4>
+							<div class="benefits">
+								Index files are files that are served if a directory is requested by the client. The filenames of index files to look for are customizable. Directory browsing can optionally be enabled if an index file is not found in a requested directory.
+							</div>
+							<div class="detail">
+								index.html, index.txt (customizable)
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Conditional requests</h4>
+							<div class="benefits">
+								Etag, Last-Modified, and related headers are supported.
+							</div>
+							<ul class="detail">
+								<li>Etag</li>
+								<li>Last-Modified</li>
+								<li>If-Match</li>
+								<li>If-None-Match</li>
+								<li>If-Modified-Since</li>
+								<li>If-Unmodified-Since</li>
+								<li>If-Range</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Range requests</h4>
+							<div class="benefits">
+								Common for streaming large files and resuming downloads, clients requesting certain ranges of files will not be disappointed or surprised. Caddy properly handles HTTP requests with Range headers.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Canonical paths</h4>
+							<div class="benefits">
+								In general, there are multiple URIs for a single file or directory. For example: /, /index.html, and /index.html/ represent the same resource. Caddy uses HTTP redirects to enforce path canonicalization (removing trailing slashes from files, and adding them for directories).
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Pass-thru mode</h4>
+							<div class="benefits">
+								Sometimes you only want to serve a file if it exists, otherwise continue with the next handler in the chain, rather than returning an error to the client.
+							</div>
+						</div>
+					</div>
+
+					
+
+					<div class="split">
+						<div>
+							<h3 class="blue">File browser</h3>
+							<p>
+								Caddy's file server comes alive through its modern file browser that looks attractive on mobile and desktop. It has more features and utility than any other standard HTTP file server!
+							</p>
+						</div>
+						<picture>
+							<source srcset="/resources/images/file-browser/browse-corner-dark.png" media="(prefers-color-scheme: dark)">
+							<img src="/resources/images/file-browser/browse-corner-light.png">
+						</picture>
+					</div>
+
+					<div class="feature-list">
+						<div class="feature-row">
+							<h4>Folder listings</h4>
+							<div class="benefits">
+								Show the list of files in a folder when no index file (below) exists in that folder.
+							</div>
+							<div class="detail">
+								Exact paths, filenames, globular matching
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Day and night themes</h4>
+							<div class="benefits">
+								The color scheme automatically adjusts to match the system theme, whether it be light or dark, to avoid blinding you or being hard to read.
+								<picture>
+									<source srcset="/resources/images/file-browser/browse-themes-2.png" media="(prefers-color-scheme: dark)">
+									<img src="/resources/images/file-browser/browse-themes.png">
+								</picture>
+							</div>
+							<ul class="detail">
+								<li>Light mode</li>
+								<li>Dark mode</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Sort by columns</h4>
+							<div class="benefits">
+								Quickly distill information about each directory and find items faster with sticky column sorting.
+							</div>
+							<ul class="detail">
+								<li>File/directory</li>
+								<li>Name</li>
+								<li>Size</li>
+								<li>Date modified</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Filter</h4>
+							<div class="benefits">
+								Every page load automatically focuses the cursor on a search box, so you can start typing a filename and filter large listings instantly.
+								<picture>
+									<source srcset="/resources/images/file-browser/browse-search-dark.png" media="(prefers-color-scheme: dark)">
+									<img src="/resources/images/file-browser/browse-search-light.png">
+								</picture>
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Layout</h4>
+							<div class="benefits">
+								Files can be shown in different layouts depending on how you want to view the listing. For example, the grid view is great for galleries.
+								<picture>
+									<source srcset="/resources/images/file-browser/browse-gallery-dark.png" media="(prefers-color-scheme: dark)">
+									<img src="/resources/images/file-browser/browse-gallery-light.png">
+								</picture>
+							</div>
+							<ul class="detail">
+								<li>List</li>
+								<li>Grid</li>
+							</ul>
+						</div>
+						<div class="feature-row">
+							<h4>Responsive design</h4>
+							<div class="benefits">
+								The page width fluidly adjusts to accommodate screens of all sizes. Links are sufficiently sized to be easily tappable on touchscreens while still being information-dense enough to be useful.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>JSON API</h4>
+							<div class="benefits">
+								Requests with an <code>Accept-Encoding: application/json</code> header will be replied to with a JSON payload for programmatic or scripted access to your file listing.
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>Customizable listing template</h4>
+							<div class="benefits">
+								If the default template isn't a good fit or you want to spice things up, customize the browse template to look and act any way you want!
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>File size visualization</h4>
+							<div class="benefits">
+								File sizes are indicated by the length of the bar behind them, making it quick and easy to find outlier large and small files or to compare relative sizes at a glance.
+								<picture>
+									<source srcset="/resources/images/file-browser/browse-size-dark.png" media="(prefers-color-scheme: dark)">
+									<img src="/resources/images/file-browser/browse-size-light.png">
+								</picture>
+							</div>
+						</div>
+						<div class="feature-row">
+							<h4>File type icons</h4>
+							<div class="benefits">
+								The file server recognizes dozens of common file types and shows associated icons to make identification easier when scanning the page.
+								<picture>
+									<source srcset="/resources/images/file-browser/icons-all-dark.png" media="(prefers-color-scheme: dark)">
+									<img src="/resources/images/file-browser/icons-all-light.png">
+								</picture>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			<section class="diagonal down gray feature">
+					<div class="construction">
+						<div class="construction-images">
+							{{$n := randInt 0 5}}
+							{{if eq $n 1}}
+							<img src="/resources/images/nostalgia/under-construction-caution-tape.gif">
+							<img src="/resources/images/nostalgia/under-construction-sign.gif">
+							<img src="/resources/images/nostalgia/under-construction-caution-tape.gif">
+							{{else if eq $n 2}}
+							<img src="/resources/images/nostalgia/under-construction-blink.gif">
+							<img src="/resources/images/nostalgia/under-construction-blink.gif">
+							<img src="/resources/images/nostalgia/under-construction-blink.gif">
+							{{else if eq $n 3}}
+							<img src="/resources/images/nostalgia/under-construction-barricade.gif">
+							{{else if eq $n 4}}
+							<img src="/resources/images/nostalgia/sorry-under-construction.gif">
+							{{else}}
+							<img src="/resources/images/nostalgia/under-construction-cones.gif">
+							{{end}}
+						</div>
+						<p>
+							Caddy is a living project with a TON of features. This page is not yet a comprehensive list of all the features and benefits provided by Caddy because we're a bit behind with this page. We welcome <a href="https://github.com/caddyserver/website">contributions</a> on GitHub!
+						</p>
 					</div>
 					
 				</div>
@@ -1218,6 +1721,7 @@
 					- HTTP handlers
 					- PKI facilities
 					- 
+			-->
 
 		</main>
 

new/includes/footer.html

@@ -3,7 +3,7 @@
 		<div>
 			<img src="/resources/images/logo-dark.svg" class="logo" alt="Caddy web server">
 			<p>
-				An awesome <a href="https://github.com/caddyserver/caddy">open source</a> project
+				A free <a href="https://github.com/caddyserver/caddy">open source</a> project
 				that relies on <a href="/sponsor">sponsors</a>.
 			</p>
 			<p>
@@ -40,4 +40,16 @@
 			<a href="https://github.com/caddyserver">Email</a>
 		</div>
 	</div>
+	<div class="wrapper nostalgia">
+		<p>Caddy supports an open Web that promotes privacy, preserves data ownership, fosters innovation, freely allows varieties of client software technologies, and safeguards human sanctity.</p>
+		<div class="nostalgia-badges">
+			<img src="/resources/images/nostalgia/get.gif">
+			<img src="/resources/images/nostalgia/microsoft-ie.gif">
+			<img src="/resources/images/nostalgia/now_anim.gif">
+			<div class="w3c">
+				<img src="/resources/images/nostalgia/valid_html5_yellow.png" title="This site uses HTML 5">
+				<img src="/resources/images/nostalgia/valid_css3_blue.png" title="This site uses CSS 3">
+			</div>
+		</div>
+	</div>
 </footer>

new/index.html

@@ -106,6 +106,9 @@
 							<a href="https://iqm.com/" target="_blank">
 								<img src="/resources/images/sponsors/iqm.svg" alt="IQM" title="IQM" height="24">
 							</a>
+							<a href="https://approximated.app/" target="_blank">
+								<img src="/resources/images/sponsors/approximated.svg" alt="Approximated" title="Approximated" height="20">
+							</a>
 							<a href="/sponsor" class="button purple">
 								<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-new-section" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 									<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -137,6 +140,12 @@
 				</h2>
 
 				<div class="wrapper feature cols">
+					<div class="col">
+						<h3 class="purple">HTTPS/TLS for custom domains</h3>
+						<p>
+							The secret sauce of almost every white-label SaaS is Caddy's original On-Demand TLS feature. Grow your SaaS business by orders of magnitude with ease!
+						</p>
+					</div>
 					<div class="col">
 						<h3 class="green">Dynamically provision certificates</h3>
 						<p>
@@ -144,41 +153,12 @@
 						</p>
 					</div>
 					<div class="col">
-						<h3 class="purple">Dynamically provision certificates</h3>
+						<h3 class="blue">Massively scale your TLS</h3>
 						<p>
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+							Other web servers and scripted certificate tools fall over with hundreds of thousands of sites or thousands of instances. Caddy is designed to manage certificates reliably at this scale.
-						</p>
-					</div>
-					<div class="col">
-						<h3 class="blue">Dynamically provision certificates</h3>
-						<p>
-							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
 						</p>
 					</div>
 
-					<div class="sponsorship-primer">
-						<h3>software <b>assurance</b></h3>
-						<p>
-							Sponsorships aren't just donations. They provide your business with benefits
-						</p>
-						<a href="/sponsor" class="button purple">See sponsorships</a>
-					</div>
-
-					<div class="sponsor-experience stripe">
-						<img src="/resources/images/sponsors/stripe.svg" class="experience-logo">
-						<div class="experience-content">
-							<div class="experience-quote">
-								"Something good to say, hopefully. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet."
-							</div>
-							<div class="experience-credit">
-								<img src="" class="experience-picture">
-								<cite>
-									<b>Firstname Last</b>
-									Position or credentials
-								</cite>
-							</div>
-						</div>
-					</div>
 				</div>
 			</div>
 
@@ -191,23 +171,38 @@
 					</div>
 				</div>
 				<div class="wrapper">
+					
 					<div class="feature cols">
 						<div class="col">
-							<h3 class="green">Dynamically provision certificates</h3>
+							<h3 class="green">All you need for TLS and PKI 🔐</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Caddy securely serves all sites with TLS by default. It can also manage your internal PKI for you across a fleet of servers and clients.
 							</p>
 						</div>
 						<div class="col">
-							<h3 class="purple">Dynamically provision certificates</h3>
+							<h3 class="purple">On-line config API ⚡️</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Caddy's native configuration is a JSON document that you can export and manipulate with a RESTful config API.
 							</p>
 						</div>
 						<div class="col">
-							<h3 class="blue">Dynamically provision certificates</h3>
+							<h3 class="blue">PCI, HIPAA, and NIST compliant ✅</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Caddy's TLS defaults are secure and pass PCI, HIPAA, and NIST compliance requirements. Yes, defaults: no hassle required.
+							</p>
+						</div>
+
+						<div class="col">
+							<h3 class="purple">HTTPS for localhost 🏠</h3>
+							<p>
+								We mean it when we say Caddy serves every site on HTTPS. Even localhost and internal IPs are served with TLS using the intermediate of a fully-automated, self-managed CA that is automatically installed into most local trust stores.
+							</p>
+						</div>
+
+						<div class="col">
+							<h3 class="green">Cluster coordination 🌐</h3>
+							<p>
+								Simply configure multiple Caddy instances with the same storage, and they will automatically coordinate certificate management and share resources such as keys and OCSP staples!
 							</p>
 						</div>
 					</div>
@@ -250,6 +245,14 @@
 							</p>
 						</div>
 					</div>
+
+					<div class="sponsorship-primer">
+						<h3>sponsored by <b>users like you</b></h3>
+						<p>
+							Caddy is free software and relies on sponsorships to survive. They aren't just donations: they ensure ongoing development and provide your business with tangible benefits!
+						</p>
+						<a href="/sponsor" class="button purple">See sponsorships</a>
+					</div>
 				</div>
 			</section>
 
@@ -259,27 +262,48 @@
 						A truly forward-thinking reverse proxy
 					</h2>
 					<p>
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+						Caddy's proxy was designed to be as forward-compatible as possible and has major batteries included: load balancing, active and passive health checks, dynamic upstreams, retries, pluggable transports, and of course, best-in-class TLS security.
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
 					</p>
 					<div class="cols">
 						<div class="col">
-							<h3 class="green">Dynamically provision certificates</h3>
+							<h3 class="green">Proxy HTTP, FastCGI, WebSockets, and more</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Capable of proxying HTTP and HTTPS, but also WebSockets, gRPC, FastCGI (usually PHP), and more! The underlying transport module is extensible for any custom way to generate an HTTP response.
+							</p>
+							<h3 class="purple">Dynamic environment? No problem</h3>
+							<p>
+								Provide Caddy with a static list of backends or enable a module to retrieve backends dynamically during each request: ideal for rapidly changing environments. Caddy flows with your infrastructure!
+							</p>
+							<h3 class="blue">High availability</h3>
+							<p>
+								Caddy comes with a whole suite of high availability (HA) features: advanced health checking, graceful (hitless) config changes, circuit breaking, load limiting, on-line retries, and more. The best part? It's all free. No enterprise-level paywalls.
 							</p>
 						</div>
 						<div class="col">
-							<h3 class="purple">Dynamically provision certificates</h3>
+							<div class="sponsorship-primer">
+								<h3>software <b>assurance</b></h3>
 								<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+									Without sponsorships, Caddy could stop being developed at any time.
+									With sponsorships, you gain peace of mind knowing that the project will continue to be developed, along with tangible benefits like private support and training.
 								</p>
+								<a href="/sponsor" class="button purple">See sponsorships</a>
+							</div>
+						</div>
+
+						<div class="sponsor-experience stripe">
+							<img src="/resources/images/sponsors/stripe.svg" class="experience-logo">
+							<div class="experience-content">
+								<div class="experience-quote">
+									"With its extensible architecture and on-line config API, Caddy powers many of Stripe's internal systems."
+								</div>
+								<div class="experience-credit">
+									<img src="https://preview.tabler.io/static/avatars/002m.jpg" class="experience-picture">
+									<cite>
+										<b>Sean Lin</b>
+										Example product manager
+									</cite>
+								</div>
 							</div>
-						<div class="col">
-							<h3 class="blue">Dynamically provision certificates</h3>
-							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-							</p>
 						</div>
 					</div>
 
@@ -288,26 +312,31 @@
 						Production-grade static file server
 					</h2>
 					<p>
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+						Serving static files is a tried-and-true method of delivering sites to numerous clients efficiently. Caddy has a robust file server that can be combined with other middleware features for the ultimate effortless website.
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
 					</p>
 					<div class="cols">
 						<div class="col">
-							<h3 class="green">Dynamically provision certificates</h3>
+							<h3 class="blue">Compression</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Caddy can compress files on-the-fly or serve precompressed files for extra performance. Caddy is also the first web server to support Zstandard encoding.
 							</p>
 						</div>
 						<div class="col">
-							<h3 class="purple">Dynamically provision certificates</h3>
+							<h3 class="green">Virtual file systems</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Serve your static site from anything: the local file system, remote cloud storage, a database, or even embedded in the server binary!
 							</p>
 						</div>
 						<div class="col">
-							<h3 class="blue">Dynamically provision certificates</h3>
+							<h3 class="purple">Range requests, Etags, and more</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Unlike many simpler file servers intended for temporary local development, Caddy fully supports Range requests, Etags, and a full production feature set.
+							</p>
+						</div>
+						<div class="col">
+							<h3 class="green">Directory file browser</h3>
+							<p>
+								If a directory without an index file is requested, Caddy can show an elegant file browser with breadcrumb nav, file size visualizations, filetype icons, and a grid view.
 							</p>
 						</div>
 					</div>
@@ -317,29 +346,28 @@
 			<section class="light feature">
 				<div class="wrapper">
 					<h2>
-						Flexible configuration for all production environments
+						Flexible configuration for all workflows
 					</h2>
 					<p>
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+						Configure your server your way. Caddy's native configuration format is JSON, but with Caddy's config adapters, you can use any config format you prefer. All configuration is posted through a RESTful admin API, and Caddy's CLI helps you work with config files easily.
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
 					</p>
 					<div class="cols">
 						<div class="col">
-							<h3 class="green">Dynamically provision certificates</h3>
+							<h3 class="green">Config adapters</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Use whatever config format you like, such as NGINX config, YAML, TOML, CUE, HCL, Dhall, or even a MySQL database!
 							</p>
 						</div>
 						<div class="col">
-							<h3 class="purple">Dynamically provision certificates</h3>
+							<h3 class="purple">Human-friendly Caddyfile</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								The Caddyfile is most people's preferred format for hand-written configurations because it is simple to read and write.
 							</p>
 						</div>
 						<div class="col">
-							<h3 class="blue">Dynamically provision certificates</h3>
+							<h3 class="blue">Admin API</h3>
 							<p>
-								With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+								Caddy's config is managed through an administration API that is programmable and makes dynamic changes a breeze.
 							</p>
 						</div>
 					</div>
@@ -360,8 +388,10 @@
 						Unparalleled extensibility
 					</h2>
 					<p>
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+						Caddy is the only server in the world with such a novel modular architecture. At its core, Caddy is a configuration manager that runs apps like an HTTP server, internal certificate authority, TLS certificate manager, process supervisor, and more.
-						Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+					</p>
+					<p>
+						And because of its unique design, all these features are freely available without bloating the software: only compile in what you need.
 					</p>
 					<div class="cols">
 						<div class="col">

new/resources/css/common.css

@@ -516,6 +516,28 @@ button.primary .hover-splash,
 	text-transform: capitalize;
 }
 
+.construction-images {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 20px;
+}
+
+.construction img {
+	margin-left: 20px;
+	margin-right: 20px;
+	max-width: 100%;
+}
+
+.construction p {
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	color: #e71414; 
+}
+
+
 
 
 
@@ -545,6 +567,30 @@ footer .wrapper {
 	gap: 75px;
 }
 
+footer .nostalgia {
+	display: block;
+	text-align: center;
+	margin-top: 50px;
+}
+
+footer .nostalgia-badges {
+	gap: 25px;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	display: flex;
+}
+
+footer .nostalgia p {
+	margin: 0 auto 15px;
+	color: #d2f7e7;
+}
+
+footer .w3c {
+	width: 80px;
+	line-height: 0;
+}
+
 footer .logo {
 	display: block;
 	margin-bottom: 15px;
@@ -587,9 +633,6 @@ footer .link-col a:hover {
 
 
 
-
-
-
 @media (max-width: 1150px) {
 	.dropdown {
 		display: none;

new/resources/css/features.css

@@ -93,6 +93,35 @@
 }
 
 
+.split {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-bottom: 75px;
+	align-items: center;
+}
+
+.split > * {
+	flex: 1;
+	margin-right: 50px;
+	min-width: 0;
+	min-width: 300px;
+}
+
+.split img {
+	max-width: 100%;
+}
+
+.split img,
+.benefits img {
+	margin: 2em 0 0;
+	max-width: 100%;
+	box-shadow: 0 6px 10px rgb(0 0 0 / .15);
+	border-radius: 8px;
+}
+
+
+
 /* TODO: Figure this out */
 @media (max-width: 800px) {
 	.feature-row {

new/resources/css/home.css

@@ -295,7 +295,7 @@ div.ap-wrapper:fullscreen div.ap-player {
 	background: white;
 	max-width: 1600px;
 	margin: -350px auto 0;
-	padding: 50px 50px 0;
+	padding: 100px 50px 0;
 	border-radius: 20px;
 	z-index: 0;
 	position: relative;

new/resources/css/marketing.css

@@ -322,7 +322,10 @@ section.dark h3.blue {
 
 
 
-
+.sponsor-experience,
+.sponsorship-primer {
+	max-width: 700px; /* TODO: TEMPORARY! */
+}
 
 
 
@@ -332,7 +335,6 @@ section.dark h3.blue {
 	color: #fff;
 	display: flex;
 	flex-wrap: wrap;
-	max-width: 700px; /* TODO: TEMPORARY! */
 	column-gap: 50px;
 }
 
@@ -400,7 +402,8 @@ section.dark h3.blue {
 	border-radius: 10px;
 	background: linear-gradient(50deg, #670d7f, #531cc7);
 	padding: 40px 50px;
-	color: #edb7e8;
+	margin: 50px auto;
+	color: #ffcffb;
 }
 
 .sponsorship-primer h3 {
@@ -410,10 +413,12 @@ section.dark h3.blue {
 	border: none;
 	padding-left: 0;
 	margin-left: 0;
+	margin-bottom: 0;
+	padding-bottom: 0;
 }
 
 .sponsorship-primer p {
-	margin: 1em 0;
+	margin: 1em 0 1.5em;
 	font-weight: normal;
 }
 

new/resources/js/home.js

@@ -8,8 +8,16 @@ const resp = fetch("/resources/testimonials.json").then(async resp => {
 			const tpl = cloneTemplate('#tpl-testimonial');
 			$('.testimonial-picture', tpl).src = testimonial.picture || "";
 			$('.testimonial-quote', tpl).innerText = `"${testimonial.quote}"`;
+			if (testimonial.username) {
+				$('.testimonial-name', tpl).innerText = ` @${testimonial.username}`;
+			} else {
 				$('.testimonial-name', tpl).innerText = testimonial.name || "";
+			}
 			$('.testimonial-role', tpl).innerText = testimonial.role || "";
+			if (testimonial.org) {
+				$('.testimonial-role', tpl).appendChild(document.createElement("br"));
+				$('.testimonial-role', tpl).appendChild(document.createTextNode(testimonial.org));
+			}
 			$(`.testimonial-col:nth-child(${i%3 + 1})`).append(tpl);
 		}
 	});

new/resources/testimonials.json

@@ -2,7 +2,7 @@
 	{
 		"name": "First last",
 		"role": "9999x developer",
-		"company": "Bigcorp",
+		"org": "Bigcorp",
 		"picture": "https://pbs.twimg.com/profile_images/1624497316366528512/fBMXDuiZ_400x400.jpg",
 		"quote": "Caddy is cool.",
 		"link": "https://..."
@@ -10,7 +10,7 @@
 	{
 		"name": "Brad Warren",
 		"role": "Lead Engineer of Certbot",
-		"company": "Electronic Frontier Foundation (EFF)",
+		"org": "Electronic Frontier Foundation (EFF)",
 		"picture": "https://sea1.discourse-cdn.com/letsencrypt/user_avatar/community.letsencrypt.org/bmw/144/7797_2.png",
 		"quote": "I think we should consider making Caddy the default ACME client recommendation. … It allows for better integration between the TLS server and the ACME management of those certificates. … [ACME clients with] Apache and NGINX are inherently more error prone and brittle than having the TLS server manage its certificates itself. … Caddy is written in a memory-safe language. Adoption of memory-safe programming languages is something that both ISRG and the broader computer security community have been encouraging more and more lately.",
 		"link": "https://community.letsencrypt.org/t/should-our-default-client-recommendation-be-caddy-if-not-why-not/199949?u=mholt"
@@ -18,7 +18,7 @@
 	{
 		"name": "Josh Aas",
 		"role": "Executive Director",
-		"company": "Let's Encrypt",
+		"org": "Let's Encrypt",
 		"picture": "https://sea1.discourse-cdn.com/letsencrypt/user_avatar/community.letsencrypt.org/josh/144/10641_2.png",
 		"quote": "Caddy is impressive. This is what we want, setting up a secure website.",
 		"link": "https://www.youtube.com/watch?v=OE5UhQGg_Fo"
@@ -32,5 +32,10 @@
 		"name": "Robert Melton",
 		"role": "Software Developer",
 		"quote": "Our client was in deep trouble: they were about to fail PCI compliance. We tossed Caddy in front hours before the deadline and went from 40 to 0 security errors in just minutes. … We have put over 1,000 domains on Caddy so far."
+	},
+	{
+		"username": "lost_RD",
+		"quote": "Every time I have a problem, google directs me to a \"mature\" Traefik-based solution that barely works, if at all. Then I come here and there's a Caddy solution that blows it out of the water. New plan for today then. ... It's a simple addition to an already-simple config. Traefik is complexity on complexity and a nightmare to debug.",
+		"link": "https://discord.com/channels/569842713239879680/569842713239879682/1161874875053527081"
 	}
 ]

new/sponsor.html

@@ -341,6 +341,9 @@
 							<p>
 								We advise that all large companies and enterprise organizations using Caddy should have an active plan which can mitigate costly incidents, train relevant teams, and provide the assurance of ongoing project maintenance.
 							</p>
+							<p>
+								<b>Enterpise+ is the only plan that guarantees continued development without other sponsors.</b>
+							</p>
 							<p>
 								⚠️ Limited stock. These tiers can sell-out in order to preserve service quality for existing customers.
 							</p>