From 2b03c7c866b369fc84092eef335630e6c55ac3ac Mon Sep 17 00:00:00 2001 From: Matthew Holt Date: Tue, 19 Sep 2023 23:03:11 -0600 Subject: [PATCH] docs: Start building quick-assist feature --- new/docs/index.html | 326 ++++++----------------- new/includes/header.html | 4 +- new/index.html | 10 +- new/resources/css/common.css | 38 ++- new/resources/css/docs-home.css | 43 +++ new/resources/css/docs.css | 97 +++++-- new/resources/css/home.css | 6 +- new/resources/js/common.js | 2 +- new/resources/js/docs-home.js | 448 ++++++++++++++++++++++++++++++++ new/resources/js/docs.js | 27 +- 10 files changed, 709 insertions(+), 292 deletions(-) create mode 100644 new/resources/css/docs-home.css create mode 100644 new/resources/js/docs-home.js diff --git a/new/docs/index.html b/new/docs/index.html index 83001b5..5503b47 100644 --- a/new/docs/index.html +++ b/new/docs/index.html @@ -4,11 +4,13 @@ Caddy Documentation {{include "/includes/head.html"}} + + {{include "/includes/header.html" ""}} @@ -92,255 +94,91 @@ -

Administration API

-

Caddy is configured through an administration endpoint which can be accessed via HTTP using a REST API. You can configure this endpoint in your Caddy config.

-

Default address: localhost:2019

-

The default address can be changed by setting the CADDY_ADMIN environment variable. Some installation methods may set this to something different. The address in the Caddy config always takes precedence over the default.

- -

The latest configuration will be saved to disk after any changes (unless disabled). You can resume the last working config after a restart with caddy run --resume, which guarantees config durability in the event of a power cycle or similar.

-

To get started with the API, try our API tutorial or, if you only have a minute, our API quick-start guide.

-
- -

POST /load

-

Sets Caddy's configuration, overriding any previous configuration. It blocks until the reload completes or fails. Configuration changes are lightweight, efficient, and incur zero downtime. If the new config fails for any reason, the old config is rolled back into place without downtime.

-

This endpoint supports different config formats using config adapters. The request's Content-Type header indicates the config format used in the request body. Usually, this should be application/json which represents Caddy's native config format. For another config format, specify the appropriate Content-Type so that the value after the forward slash / is the name of the config adapter to use. For example, when submitting a Caddyfile, use a value like text/caddyfile; or for JSON 5, use a value such as application/json5; etc.

-

If the new config is the same as the current one, no reload will occur. To force a reload, set Cache-Control: must-revalidate in the request headers.

-

Examples

-

Set a new active configuration:

-
curl "http://localhost:2019/load" \
-	-H "Content-Type: application/json" \
-	-d @caddy.json
-

Note: curl's -d flag removes newlines, so if your config format is sensitive to line breaks (e.g. the Caddyfile), use --data-binary instead:

-
curl "http://localhost:2019/load" \
-	-H "Content-Type: text/caddyfile" \
-	--data-binary @Caddyfile
-

POST /stop

-

Gracefully shuts down the server and exits the process. To only stop the running configuration without exiting the process, use DELETE /config/.

-

Example

-

Stop the process:

-
curl -X POST "http://localhost:2019/stop"
-

GET /config/[path]

-

Exports Caddy's current configuration at the named path. Returns a JSON body.

-

Examples

-

Export entire config and pretty-print it:

-
curl "http://localhost:2019/config/" | jq
-{
-	"apps": {
-		"http": {
-			"servers": {
-				"myserver": {
-					"listen": [
-						":443"
-					],
-					"routes": [
-						{
-							"match": [
-								{
-									"host": [
-										"example.com"
-									]
-								}
-							],
-							"handle": [
-								{
-									"handler": "file_server"
-								}
-							]
-						}
-					]
-				}
-			}
-		}
-	}
-}
-

Export just the listener addresses:

-
curl "http://localhost:2019/config/apps/http/servers/myserver/listen"
-[":443"]
-

POST /config/[path]

-

Changes Caddy's configuration at the named path to the JSON body of the request. If the destination value is an array, POST appends; if an object, it creates or replaces.

-

As a special case, many items can be added to an array if:

-
    -
  1. the path ends in /...
    2. -
  2. the element of the path before /... refers to an array
    3. -
  3. the payload is an array
    4. -
-

In this case, the elements in the payload's array will be expanded, and each one will be appended to the destination array. In Go terms, this would have the same effect as:

-
baseSlice = append(baseSlice, newElems...)
-

Examples

-

Add a listener address:

-
curl \
-	-H "Content-Type: application/json" \
-	-d '":8080"' \
-	"http://localhost:2019/config/apps/http/servers/myserver/listen"
-

Add multiple listener addresses:

-
curl \
-	-H "Content-Type: application/json" \
-	-d '[":8080", ":5133"]' \
-	"http://localhost:2019/config/apps/http/servers/myserver/listen/..."
-

PUT /config/[path]

-

Changes Caddy's configuration at the named path to the JSON body of the request. If the destination value is a position (index) in an array, PUT inserts; if an object, it strictly creates a new value.

-

Example

-

Add a listener address in the first slot:

-
curl -X PUT \
-	-H "Content-Type: application/json" \
-	-d '":8080"' \
-	"http://localhost:2019/config/apps/http/servers/myserver/listen/0"
-

PATCH /config/[path]

-

Changes Caddy's configuration at the named path to the JSON body of the request. PATCH strictly replaces an existing value or array element.

-

Example

-

Replace the listener addresses:

-
curl -X PATCH \
-	-H "Content-Type: application/json" \
-	-d '[":8081", ":8082"]' \
-	"http://localhost:2019/config/apps/http/servers/myserver/listen"
-

DELETE /config/[path]

-

Removes Caddy's configuration at the named path. DELETE deletes the target value.

-

Examples

-

To unload the entire current configuration but leave the process running:

-
curl -X DELETE "http://localhost:2019/config/"
-

To stop only one of your HTTP servers:

-
curl -X DELETE "http://localhost:2019/config/apps/http/servers/myserver"
-

Using @id in JSON

-

You can embed IDs in your JSON document for easier direct access to those parts of the JSON.

-

Simply add a field called "@id" to an object and give it a unique name. For example, if you had a reverse proxy handler that you wanted to access frequently:

-
{
-	"@id": "my_proxy",
-	"handler": "reverse_proxy"
-}
-

To use it, simply make a request to the /id/ API endpoint in the same way you would to the corresponding /config/ endpoint, but without the whole path. The ID takes the request directly into that scope of the config for you.

-

For example, to access the upstreams of the reverse proxy without an ID, the path would be something like

-
/config/apps/http/servers/myserver/routes/1/handle/0/upstreams
-
-

but with an ID, the path becomes

-
/id/my_proxy/upstreams
-
-

which is much easier to remember and write by hand.

-

Concurrent config changes

- -

Caddy's config API provides ACID guarantees for individual requests, but changes that involve more than a single request are subject to collisions or data loss if not properly synchronized.

-

For example, two clients may GET /config/foo at the same time, make an edit within that scope (config path), then call POST|PUT|PATCH|DELETE /config/foo/... at the same time to apply their changes, resulting in a collision: either one will overwrite the other, or the second might leave the config in an unintended state since it was applied to a different version of the config than it was prepared against. This is because the changes are not aware of each other.

-

Caddy's API does not support transactions spanning multiple requests, and HTTP is a stateless protocol. However, you can use the Etag trailer and If-Match header to detect and prevent collisions for any and all changes as a kind of optimistic concurrency control. This is useful if there is any chance that you are using Caddy's /config/... endpoints concurrently without synchronization. All responses to GET /config/... requests have an HTTP trailer called Etag that contains the path and a hash of the contents in that scope (e.g. Etag: "/config/apps/http/servers 65760b8e"). Simply set the If-Match header on a mutative request to that of an Etag trailer from a previous GET request.

-

The basic algorithm for this is as follows:

-
    -
  1. Perform a GET request to any scope S within the config. Hold onto the Etag trailer of the response.
    2. -
  2. Make your desired change on the returned config.
    3. -
  3. Perform a POST|PUT|PATCH|DELETE request within scope S, setting the If-Match header to the recent Etag value.
    4. -
  4. If the response is HTTP 412 (Precondition Failed), repeat from step 1, or give up after too many attempts.
    5. -
-

This algorithm safely allows multiple, overlapping changes to Caddy's configuration without explicit synchronization. It is designed so that simultaneous changes to different parts of the config don't require a retry: only changes that overlap the same scope of the config can possibly cause a collision and thus require a retry.

-

POST /adapt

-

Adapts a configuration to Caddy JSON without loading or running it. If successful, the resulting JSON document is returned in the response body.

-

The Content-Type header is used to specify the configuration format in the same way that /load works. For example, to adapt a Caddyfile, set Content-Type: text/caddyfile.

-

This endpoint will adapt any configuration format as long as the associated config adapter is plugged in to your Caddy build.

-

Examples

-

Adapt a Caddyfile to JSON:

-
curl "http://localhost:2019/adapt" \
-	-H "Content-Type: text/caddyfile" \
-	--data-binary @Caddyfile
-

GET /pki/ca/<id>

-

Returns information about a particular PKI app CA by its ID. If the requested CA ID is the default (local), then the CA will be provisioned if it has not already been. Other CA IDs will return an error if they have not been previously provisioned.

-
curl "http://localhost:2019/pki/ca/local" | jq
-{
-	"id": "local",
-	"name": "Caddy Local Authority",
-	"root_common_name": "Caddy Local Authority - 2022 ECC Root",
-	"intermediate_common_name": "Caddy Local Authority - ECC Intermediate",
-	"root_certificate": "-----BEGIN CERTIFICATE-----\nMIIB ... gRw==\n-----END CERTIFICATE-----\n",
-	"intermediate_certificate": "-----BEGIN CERTIFICATE-----\nMIIB ... FzQ==\n-----END CERTIFICATE-----\n"
-}
-

GET /pki/ca/<id>/certificates

-

Returns the certificate chain of a particular PKI app CA by its ID. If the requested CA ID is the default (local), then the CA will be provisioned if it has not already been. Other CA IDs will return an error if they have not been previously provisioned.

-

This endpoint is used internally by the caddy trust command to allow installing the CA's root certificate to your system's trust store.

-
curl "http://localhost:2019/pki/ca/local/certificates"
------BEGIN CERTIFICATE-----
-MIIByDCCAW2gAwIBAgIQViS12trTXBS/nyxy7Zg9JDAKBggqhkjOPQQDAjAwMS4w
-...
-By75JkP6C14OfU733oElfDUMa5ctbMY53rWFzQ==
------END CERTIFICATE-----
------BEGIN CERTIFICATE-----
-MIIBpDCCAUmgAwIBAgIQTS5a+3LUKNxC6qN3ZDR8bDAKBggqhkjOPQQDAjAwMS4w
-...
-9M9t0FwCIQCAlUr4ZlFzHE/3K6dARYKusR1ck4A3MtucSSyar6lgRw==
------END CERTIFICATE-----
-

GET /reverse_proxy/upstreams

-

Returns the current status of the configured reverse proxy upstreams (backends) as a JSON document.

-
curl "http://localhost:2019/reverse_proxy/upstreams" | jq
-[
-	{"address": "10.0.1.1:80", "num_requests": 4, "fails": 2},
-	{"address": "10.0.1.2:80", "num_requests": 5, "fails": 4},
-	{"address": "10.0.1.3:80", "num_requests": 3, "fails": 3}
-]
-

Each entry in the JSON array is a configured upstream stored in the global upstream pool.

- -

If your goal is to determine a backend's availability, you will need to cross-check relevant properties of the upstream against the handler configuration you are utilizing. For example, if you've enabled passive health checks for your proxies, then you need to also take into consideration the fails and num_requests values to determine if an upstream is considered available: check that the fails amount is less than your configured maximum amount of failures for your proxy (i.e. max_fails), and that num_requests is less than or equal to your configured amount of maximum requests per upstream (i.e. unhealthy_request_count for the whole proxy, or max_requests for individual upstreams).

-
+
+

Documentation

+ +
+
+
+ Quick Assist +
+
+

+
+
+
+
+ +
+

Getting Started

+

+ New here? Welcome! As usual, before running any server software, please make sure you: +

+
    +
  • know how to use your terminal / command line
    • +
  • are familiar with installing and using non-graphical software
    • +
  • can edit text files to configure programs
    • +
  • understand how your operating system's network stack and permissions model work
    • +
+

+ +

+
+
+

Caddyfile Directives

+

+ Quick access to all standard Caddyfile directives: +

+ +
+
+

Examples

+

+ +

+
+
+
- \ No newline at end of file diff --git a/new/includes/header.html b/new/includes/header.html index 10ac851..362c1fe 100644 --- a/new/includes/header.html +++ b/new/includes/header.html @@ -46,7 +46,7 @@ Install - Learn how to build or download then install Caddy + Various ways to install Caddy on your computer or server @@ -186,7 +186,7 @@
- Download + Download Sponsor
diff --git a/new/index.html b/new/index.html index 2bb964d..1469511 100644 --- a/new/index.html +++ b/new/index.html @@ -29,7 +29,11 @@ makes your sites more secure, more reliable, and more scalable more easily. - + +
+ Download + Docs +
@@ -40,10 +44,6 @@
-
- Download - Docs -
diff --git a/new/resources/css/common.css b/new/resources/css/common.css index 10c0f50..b754913 100644 --- a/new/resources/css/common.css +++ b/new/resources/css/common.css @@ -2,6 +2,7 @@ .light { --body-bg: white; --text-color: #222; + --text-color-muted: #7087a0; --header-bg: rgba(118, 179, 194, 0.11); --header-border-color: #ebf0f2; --topbar-link-color-hover: black; @@ -21,7 +22,8 @@ --dropdown-link-hover-color: #142633; --dropdown-featured-bg: linear-gradient(to bottom, rgb(239 244 247), transparent); --dropdown-featured-hover-bg: rgb(223, 233, 238); /* rgb(232, 255, 254); */ - --dropdown-shadow-color: rgb(0 0 0 / .4); + --dropdown-shadow-color: rgb(0 0 0 / .25); + --box-bg: var(--header-border-color); } .dark { @@ -47,6 +49,7 @@ --dropdown-featured-bg: linear-gradient(to bottom, rgb(46, 58, 66), transparent); --dropdown-featured-hover-bg: rgb(64, 82, 92); --dropdown-shadow-color: black; + --box-bg: var(--header-bg); } .dark #logo-light, @@ -100,6 +103,16 @@ body { tab-size: 4; background-color: var(--body-bg); color: var(--text-color); + background-image: + radial-gradient(at calc(50% - min(25vw, 800px)) -10%, hsl(137.64deg, 100%, 92.42%) 0px, transparent min(15%, 500px)), + radial-gradient(at calc(50% + min(25vw, 800px)) -10%, hsl(201.2deg, 68%, 90.2%) 0px, transparent min(15%, 500px)); +} + +/* TODO: clean this up */ +.dark body { + background-image: + radial-gradient(at calc(50% - min(35vw, 700px)) -10%, hsl(129.5deg, 100%, 12.4%) 0px, transparent min(25%, 600px)), + radial-gradient(at calc(50% + min(35vw, 700px)) -10%, hsl(201deg, 100%, 19.33%) 0px, transparent min(25%, 600px)) } main a { @@ -212,7 +225,6 @@ header nav ul { .navbar .button { text-decoration: none; transition: all 200ms; - color: inherit; font-weight: 500; } @@ -242,27 +254,35 @@ header nav ul { gap: 1em; } +button, .button { padding: .6em 1.5em; border-radius: 6px; text-decoration: none; + background: none; + cursor: pointer; /* necessary for hoversplash: */ position: relative; overflow: hidden; - display: inline-block; + display: flex; + align-items: center; } +button.primary, .button.primary { background: linear-gradient(135deg, white 25%, rgba(167, 183, 193) 80%); color: #222; font-weight: bold; + border: none; } +button.primary:hover, .button.primary:hover { color: #1a71cb; } +button:active, .button:active { transition: all 75ms; transform: scale(.95); @@ -294,12 +314,14 @@ header nav ul { animation: 1s cubic-bezier(.16, 1, .3, 1) hoverSplash; } -.button.primary .hover-splash { - background-color: rgba(255, 255, 255, 0.6); +button .hover-splash, +.button .hover-splash { + background-color: rgba(24, 156, 233, 0.6); } -.button.secondary .hover-splash { - background-color: rgba(24, 156, 233, 0.6); +button.primary .hover-splash, +.button.primary .hover-splash { + background-color: rgba(255, 255, 255, 0.6); } @@ -311,7 +333,7 @@ header nav ul { border-radius: 15px; line-height: 1.5; overflow: hidden; - box-shadow: 0 30px 75px var(--dropdown-shadow-color); + box-shadow: 0 50px 75px var(--dropdown-shadow-color); visibility: hidden; top: calc(100% - 5px); left: 0; diff --git a/new/resources/css/docs-home.css b/new/resources/css/docs-home.css new file mode 100644 index 0000000..cd7469f --- /dev/null +++ b/new/resources/css/docs-home.css @@ -0,0 +1,43 @@ +.quick-assist-history { + font-size: 90%; + + display: flex; + flex-wrap: wrap; + gap: .5em; +} + +.quick-assist-history > * { + display: inline-block; + color: var(--text-color-muted); + text-decoration: none; + cursor: pointer; +} + +.quick-assist-history > *:hover { + color: #216688; + text-decoration: underline; +} + +.quick-assist-history > :not(:first-child):before { + content: '>'; + margin-right: .5em; + display: inline-block; + color: #809783; +} + +h3.quick-assist-question { + font-size: 150%; +} + +.quick-assist-options { + margin-top: 1.5em; + display: grid; + gap: 1em; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.quick-assist button, +.quick-assist .button { + font-size: 100%; + min-height: 3.5em; +} \ No newline at end of file diff --git a/new/resources/css/docs.css b/new/resources/css/docs.css index 2c579e9..6670038 100644 --- a/new/resources/css/docs.css +++ b/new/resources/css/docs.css @@ -1,9 +1,9 @@ :root, .light { - --header-bg: white; - --button-secondary-color: rgb(64, 131, 153); - --button-secondary-border-color: rgb(198, 217, 223); - --button-secondary-color-hover: rgb(7, 86, 134); - --button-secondary-border-color-hover: rgb(155, 191, 213); + --header-bg: transparent; + --button-color: rgb(64, 131, 153); + --button-border-color: rgb(198, 217, 223); + --button-color-hover: rgb(7, 86, 134); + --button-border-color-hover: rgb(155, 191, 213); --nav-current-bg: linear-gradient(to right, #ecf1f3, transparent); --nav-link-hover-shadow-color: rgba(0, 0, 0, 0.15); --nav-link-hover-before-bg: #d2e5e7; @@ -16,10 +16,10 @@ .dark { --header-bg: rgba(44, 130, 164, 0.11); - --button-secondary-color: rgb(36, 166, 208); - --button-secondary-border-color: rgb(38, 116, 140); - --button-secondary-color-hover: rgb(0, 194, 255); - --button-secondary-border-color-hover: rgb(0, 194, 255); + --button-color: rgb(36, 166, 208); + --button-border-color: rgb(38, 116, 140); + --button-color-hover: rgb(0, 194, 255); + --button-border-color-hover: rgb(0, 194, 255); --nav-current-bg: linear-gradient(to right, #1a3c4d, transparent); --nav-link-hover-shadow-color: rgba(255, 255, 255, 0.15); --nav-link-hover-before-bg: #32494f; @@ -50,21 +50,27 @@ header { .topbar { border-bottom: 0; } + +button, +.button { + color: var(--button-color); + border: 1px solid var(--button-border-color); +} +button:hover, +.button:hover { + color: var(--button-color-hover); + border: 1px solid var(--button-border-color-hover); +} +button.primary, .button.primary { background: linear-gradient(135deg, #7ece98 25%, rgb(49, 155, 208) 80%); color: white; + border: none; } +button.primary:hover, .button.primary:hover { color: white; } -.button.secondary { - color: var(--button-secondary-color); - border: 1px solid var(--button-secondary-border-color); -} -.button.secondary:hover { - color: var(--button-secondary-color-hover); - border: 1px solid var(--button-secondary-border-color-hover); -} main { @@ -86,8 +92,12 @@ main { font-size: 16px; } -.docs nav { +.docs nav, +#pagenav { flex: 1; +} + +.docs nav { min-width: 250px; } @@ -98,6 +108,9 @@ main { display: none; } +#pagenav .heading { + display: none; +} @@ -240,6 +253,7 @@ article { max-width: 1100px; min-width: 0; + width: 100%; } /* @@ -248,7 +262,7 @@ server-side from markdown to have a constrained width, a few elements should be allowed to extend to the borders of the page */ -article > :not(.fullwidth), +article > :not(.fullwidth, .fullspan), article > .fullwidth > *, .pad { padding-left: 8%; @@ -579,9 +593,54 @@ td code { } +.box { + border-radius: 10px; + padding: 1em; + margin: 1em; + font-size: 18px; + border: 2px solid var(--box-bg); +} +.box-filled { + border: none; + background: var(--box-bg); +} +.box-capped { + padding: 0; +} +.box-capped > * { + padding: 1em; +} + +.box-cap { + border-bottom: 1px solid var(--box-bg); +} + +.box-filled .box-cap { + border-bottom: 1px solid var(--button-border-color); /* #d0dfe6; */ +} + +.box > :first-child { + margin-top: 0; +} +.box > :last-child { + margin-bottom: 0; +} + +.box:not(.box-capped) > :first-child { + padding-top: 0; +} +.box:not(.box-capped) > :last-child { + padding-bottom: 0; +} + +.box h3 { + font-size: 125%; + margin: 0 0 .5em; + text-align: left; +} #autonav { diff --git a/new/resources/css/home.css b/new/resources/css/home.css index d2262f4..c04b4df 100644 --- a/new/resources/css/home.css +++ b/new/resources/css/home.css @@ -11,20 +11,20 @@ padding: 100px 0; } -.button.secondary { +.button { color: rgb(54 206 255); border: 1px solid rgb(54 206 255); } -.button.secondary:hover { +.button:hover { color: white; border-color: white; } - .button.cool { position: relative; color: rgb(226 254 214); + border: none; /* necessary for gradient dropshadow: */ transform-style: preserve-3d; diff --git a/new/resources/js/common.js b/new/resources/js/common.js index 480b877..9f6dfbf 100644 --- a/new/resources/js/common.js +++ b/new/resources/js/common.js @@ -105,7 +105,7 @@ function nextTheme() { } // hoversplash effect! -on('mouseover', '.button', (e) => { +on('mouseover', '.button:not(.cool), button:not(.cool)', (e) => { const elem = document.createElement('span'); elem.classList.add('hover-splash'); diff --git a/new/resources/js/docs-home.js b/new/resources/js/docs-home.js new file mode 100644 index 0000000..1478055 --- /dev/null +++ b/new/resources/js/docs-home.js @@ -0,0 +1,448 @@ +quickAssist = function() { + let history = []; + + const states = { + start: { + prompt: "What are you looking for?", + options: [ + { + text: "How to install Caddy", + next: "install" + }, + { + text: "Help configuring Caddy", + next: "configure" + }, + { + text: "A solution to a problem", + next: "solution" + }, + { + text: "An example for my use case", + next: "example" + } + ] + }, + install: { + prompt: "How do you want to install Caddy?", + options: [ + { + text: "OS package manager", + next: "install_pkgmgr" + }, + { + text: "Docker", + next: "install_docker" + }, + { + text: "Build from source", + next: "install_build" + }, + { + text: "Build with plugins", + next: "install_with_plugins" + }, + { + text: "Pre-built binary", + next: "install_binary" + } + ] + }, + install_pkgmgr: { + prompt: "Which OS are you using?", + options: [ + { + text: "Linux (Debian, Ubuntu, Raspbian)", + next: "install_dpkg" + }, + { + text: "Linux (Fedora, RedHat, CentOS)", + next: "install_rpm" + }, + { + text: "Linux (Arch, Manjaro, Parabola)", + next: "install_arch" + }, + { + text: "macOS", + next: "install_mac" + }, + { + text: "Windows", + next: "install_windows" + }, + { + text: "Nix/NixOS", + next: "install_nix" + }, + { + text: "Android", + next: "install_android" + }, + { + text: "Other", + next: "install_other" + } + ] + }, + install_dpkg: { + title: "Install Caddy on Debian-based systems", + content: `
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
+curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
+curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
+sudo apt update
+sudo apt install caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#debian-ubuntu-raspbian" + } + ] + }, + install_rpm: { + title: "Install Caddy via RPM", + content: `
dnf install 'dnf-command(copr)'
+dnf copr enable @caddy/caddy
+dnf install caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#fedora-redhat-centos" + } + ] + }, + install_arch: { + title: "Install Caddy on Arch/Manjaro/Parabola Linux", + content: `
pacman -Syu caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#arch-linux-manjaro-parabola" + } + ] + }, + install_mac: { + title: "Install Caddy on macOS", + content: `
brew install caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#homebrew" + } + ] + }, + install_windows: { + title: "Install Caddy on Windows", + content: `

Chocolatey:

choco install caddy
+

Scoop:

scoop install caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#windows" + } + ] + }, + install_nix: { + title: "Install Caddy on Nix/Nixpkgs/NixOS", + content: ``, + options: [ + { + text: "Learn more", + href: "/docs/install#nixnixpkgsnixos" + } + ] + }, + install_android: { + title: "Install Caddy on Android", + content: `In Termux: 
pkg install caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#termux" + } + ] + }, + install_other: { + title: "Miscellaneous install methods", + content: `

Webi

+

Linux and macOS:

+ 
curl -sS https://webi.sh/caddy | sh
+

Windows:

+ 
curl.exe https://webi.ms/caddy | powershell
+

Ansible

+ 
ansible-galaxy install nvjacobo.caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#fedora-redhat-centos" + } + ] + }, + install_docker: { + title: "Official Docker image", + content: `
docker pull caddy
`, + options: [ + { + text: "Learn more", + href: "/docs/install#docker" + } + ] + }, + install_build: { + title: "Build Caddy from source", + content: `

Make sure to have git and the latest version of Go installed.

+ 
git clone "https://github.com/caddyserver/caddy.git"
+cd caddy/cmd/caddy/
+go build
`, + options: [ + { + text: "Learn more", + href: "/docs/build" + } + ] + }, + install_with_plugins: { + title: "Build Caddy with plugins", + content: ` +

+ xcaddy is a command line tool + that helps you build Caddy with plugins. A basic build looks like: +

+ 
xcaddy build
+

+ To build with plugins, use --with: +

+ 
xcaddy build \\
+	--with github.com/caddyserver/nginx-adapter
+	--with github.com/caddyserver/ntlm-transport@v0.1.1
`, + options: [ + { + text: "Learn more", + href: "/docs/build#xcaddy" + } + ] + }, + install_binary: { + title: "Install Caddy binary manually", + content: ` +
    +
  1. + Obtain a Caddy binary: + +
    2. +
  2. + Install Caddy as a system service. This is strongly recommended, + especially for production servers. +
    3. +
+

Place the binary in one of your $PATH (or %PATH% on Windows) directories so you can run + caddy without typing the full path of the executable file. (Run echo $PATH to see the list + of directories that qualify.)

+

You can upgrade static binaries by replacing them with newer versions and restarting Caddy. The caddy upgrade command can make this easy.

`, + options: [ + { + text: "Learn more", + href: "/docs/build#xcaddy" + } + ] + }, + + configure: { + prompt: "What are you trying to configure?", + options: [ + { + text: "On-demand TLS", + next: "cfg_ondemand" + }, + { + text: "Authentication", + next: "cfg_authentication" + }, + { + text: "Load balancing", + next: "cfg_loadbalancing" + } + ] + }, + cfg_ondemand: { + prompt: "Do you control the (DNS records of) the domain names you're serving?", + options: [ + { + text: "Yes", + breadcrumb: "I control the domains", + next: "cfg_ondemand_havecontrol" + }, + { + text: "No", + breadcrumb: "DNS out of my control", + next: "cfg_ondemand_ok" + } + ] + }, + cfg_ondemand_havecontrol: { + prompt: "Do you have hundreds or thousands of your own domain names to serve?", + options: [ + { + text: "Yes", + breadcrumb: "Lots of domains", + next: "cfg_ondemand_ok" + }, + { + text: "No", + breadcrumb: "Small scale", + next: "cfg_ondemand_smallscale" + } + ] + }, + cfg_ondemand_smallscale: { + title: "You likely don't need on-demand TLS.", + content: `On-demand TLS is designed for situations when you either don't control the domain names, + or you have too many certificates to load all at once when the server starts. For every other + use case, standard TLS automation is likely better suited.`, + options: [ + { + text: "Learn more", + href: "/docs/automatic-https#on-demand-tls" + } + ] + }, + cfg_ondemand_ok: { + prompt: "Are you using the Caddyfile or JSON to configure Caddy?", + options: [ + { + text: "Caddyfile", + next: "cfg_ondemand_caddyfile" + }, + { + text: "JSON", + next: "cfg_ondemand_json" + } + ] + }, + cfg_ondemand_caddyfile: { + title: "Setting up On-Demand TLS", + content: ` +

In order to prevent abuse, you must first configure an ask endpoint so Caddy + can check whether it should get a certificate. Add this to your global options at the top:

+ 
on_demand_tls {
+	ask http://localhost:5555/check
+}
+

Change that endpoint to be something you've set up that will respond with HTTP 200 if the + domain given in the domain= query parameter is allowed to have a certificate.

+

Then create a site block that serves all sites/hosts on the TLS port:

+ 
https:// {
+	tls {
+		on_demand
+	}
+}
+

This is the minimum config to enable Caddy to accept and service TLS connections for arbitrary + hosts. This config doesn't invoke any handlers. Usually you'll also reverse_proxy + to your backend application.

`, + options: [ + { + text: "Learn more", + href: "/docs/automatic-https#on-demand-tls" + } + ] + }, + }; + + // show renders the given state into the quick assist box + function show(state) { + // reset & show prompt/content + $('.quick-assist-question').innerHTML = state.prompt || state.title; + $('.quick-assist-content').innerHTML = state.content || ''; + $('.quick-assist-options').innerHTML = ''; + + // render options + let hasNext = false; + if (state.options) { + for (const opt of state.options) { + if (opt.next) { + hasNext = true; + } + const btn = document.createElement('a'); + btn.classList.add('button'); + btn.innerText = opt.text || ""; + if (opt.next) { + btn.dataset.next = opt.next; + btn.dataset.breadcrumb = opt.breadcrumb || opt.text; + } else if (opt.href) { + btn.href = opt.href; + } + $('.quick-assist-options').append(btn); + } + } + + // if there's no "next" state, then this must be the end of + // assistance, so show a button to reset + if (!hasNext) { + const reset = document.createElement('a'); + reset.classList.add('button', 'reset'); + reset.innerText = "Reset"; + $('.quick-assist-options').append(reset); + } + + history.push(state); + } + + // reset clears history and shows the start state; it does NOT delete things + // from the UI, however. + function reset() { + history = []; + show(states.start); + } + + // clicking breadcrumbs should take you to that point in the state machine + on('click', '.quick-assist-history a', event => { + // remove later breadcrumbs + for (let sibling = event.target.nextElementSibling; sibling != null; sibling = event.target.nextElementSibling) { + sibling.remove(); + history.pop(); + } + + // show the state represented by the breadcrumb clicked + if (event.target.dataset.index) { + show(history[Number(event.target.dataset.index)]); + } else { + reset(); + } + }); + + // when an option is selected, add breadcrumb and show that state + on('click', '.quick-assist-options a[data-next]', event => { + const link = document.createElement('a'); + link.innerText = event.target.dataset.breadcrumb || event.target.innerText; + link.dataset.index = history.length; + $('.quick-assist-history').append(link); + show(states[event.target.dataset.next]); + }); + + on('click', '.quick-assist-options a.reset', event => { + $('.quick-assist-history a:first-child').dispatchEvent(new Event('click', { bubbles: true })); + }) + + // when page loads, show the start of the quick assist + reset(); +}; + + + +ready(() => { + quickAssist(); +}); \ No newline at end of file diff --git a/new/resources/js/docs.js b/new/resources/js/docs.js index 1a9e5e6..64c3087 100644 --- a/new/resources/js/docs.js +++ b/new/resources/js/docs.js @@ -11,18 +11,24 @@ ready(function() { } currentPageLink?.classList?.add('current'); - // generate in-page nav before adding anchor links to headings + // generate in-page nav before adding anchor links to headings; + // only show sidebar if there are any navigable headers + // TODO: support h3 too const spacingMS = 50; let delay = spacingMS; - $$('main article h2').forEach(elem => { - const a = document.createElement('a'); - a.innerText = elem.innerText; - a.href = `#${elem.id}`; - setTimeout(function() { - $('#pagenav').append(a); - }, delay); - delay += spacingMS; - }); + const h2elems = $$('main article h2'); + if (h2elems.length) { + $('#pagenav .heading').style.display = 'block'; + h2elems.forEach(elem => { + const a = document.createElement('a'); + a.innerText = elem.innerText; + a.href = `#${elem.id}`; + setTimeout(function() { + $('#pagenav').append(a); + }, delay); + delay += spacingMS; + }); + } // add anchor links, inspired by https://github.com/bryanbraun/anchorjs $$('article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]').forEach(function(elem) { @@ -84,6 +90,7 @@ ready(function() { }); }); +// toggle left-nav when menu link is clicked on('click', '#docs-menu', e => { const nav = $('#docs-menu-container'); if (!nav.offsetHeight) {