mirror of
https://github.com/caddyserver/website.git
synced 2025-04-27 07:26:17 -04:00
docs: Start building quick-assist feature
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
23e904381c
commit
4c837b4f06
10 changed files with 709 additions and 292 deletions
|
|
@ -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;
|
||||
|
|
|
|||
43
new/resources/css/docs-home.css
Normal file
43
new/resources/css/docs-home.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
448
new/resources/js/docs-home.js
Normal file
448
new/resources/js/docs-home.js
Normal file
|
|
@ -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: `<pre><code class="cmd"><span class="bash">sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https</span>
|
||||
<span class="bash">curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg</span>
|
||||
<span class="bash">curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list</span>
|
||||
<span class="bash">sudo apt update</span>
|
||||
<span class="bash">sudo apt install caddy</span></code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#debian-ubuntu-raspbian"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_rpm: {
|
||||
title: "Install Caddy via RPM",
|
||||
content: `<pre><code class="cmd"><span class="bash">dnf install 'dnf-command(copr)'</span>
|
||||
<span class="bash">dnf copr enable @caddy/caddy</span>
|
||||
<span class="bash">dnf install caddy</span></code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#fedora-redhat-centos"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_arch: {
|
||||
title: "Install Caddy on Arch/Manjaro/Parabola Linux",
|
||||
content: `<pre><code class="cmd"><span class="bash">pacman -Syu caddy</span></code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#arch-linux-manjaro-parabola"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_mac: {
|
||||
title: "Install Caddy on macOS",
|
||||
content: `<pre><code class="cmd bash">brew install caddy</code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#homebrew"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_windows: {
|
||||
title: "Install Caddy on Windows",
|
||||
content: `<p>Chocolatey:</p> <pre><code class="cmd">choco install caddy</code></pre>
|
||||
<p>Scoop:</p> <pre><code class="cmd">scoop install caddy</code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#windows"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_nix: {
|
||||
title: "Install Caddy on Nix/Nixpkgs/NixOS",
|
||||
content: `<ul>
|
||||
<li>Package name: <a href="https://search.nixos.org/packages?channel=unstable&show=caddy&query=caddy"><code>caddy</code></a></li>
|
||||
<li>NixOS module: <a href="https://search.nixos.org/options?channel=unstable&show=services.caddy.enable&query=services.caddy"><code>services.caddy</code></a></li>
|
||||
</ul>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#nixnixpkgsnixos"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_android: {
|
||||
title: "Install Caddy on Android",
|
||||
content: `In Termux: <pre><code class="cmd">pkg install caddy</code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#termux"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_other: {
|
||||
title: "Miscellaneous install methods",
|
||||
content: ` <h4>Webi</h2>
|
||||
<p>Linux and macOS:</p>
|
||||
<pre><code class="cmd bash">curl -sS https://webi.sh/caddy | sh</code></pre>
|
||||
<p>Windows:</p>
|
||||
<pre><code class="cmd">curl.exe https://webi.ms/caddy | powershell</code></pre>
|
||||
<h4>Ansible</h4>
|
||||
<pre><code class="cmd bash">ansible-galaxy install nvjacobo.caddy</code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#fedora-redhat-centos"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_docker: {
|
||||
title: "Official Docker image",
|
||||
content: `<pre><code class="cmd bash">docker pull caddy</code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/install#docker"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_build: {
|
||||
title: "Build Caddy from source",
|
||||
content: `<p>Make sure to have <code>git</code> and the latest version of <a href="https://go.dev">Go</a> installed.</p>
|
||||
<pre><code class="cmd"><span class="bash">git clone "https://github.com/caddyserver/caddy.git"</span>
|
||||
<span class="bash">cd caddy/cmd/caddy/</span>
|
||||
<span class="bash">go build</span></code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/build"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_with_plugins: {
|
||||
title: "Build Caddy with plugins",
|
||||
content: `
|
||||
<p>
|
||||
<code><a href="https://github.com/caddyserver/xcaddy">xcaddy</a></code> is a command line tool
|
||||
that helps you build Caddy with plugins. A basic build looks like:
|
||||
</p>
|
||||
<pre><code class="cmd bash">xcaddy build</code></pre>
|
||||
<p>
|
||||
To build with plugins, use <code>--with</code>:
|
||||
</p>
|
||||
<pre><code class="cmd bash">xcaddy build \\
|
||||
--with github.com/caddyserver/nginx-adapter
|
||||
--with github.com/caddyserver/ntlm-transport@v0.1.1</code></pre>`,
|
||||
options: [
|
||||
{
|
||||
text: "Learn more",
|
||||
href: "/docs/build#xcaddy"
|
||||
}
|
||||
]
|
||||
},
|
||||
install_binary: {
|
||||
title: "Install Caddy binary manually",
|
||||
content: `
|
||||
<ol>
|
||||
<li>
|
||||
Obtain a Caddy binary:
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/caddyserver/caddy/releases">from releases on GitHub</a> (expand
|
||||
"Assets")
|
||||
<ul>
|
||||
<li>Refer to <a href="/docs/signature-verification">Verifying Asset Signatures</a> for how to verify
|
||||
the asset signature</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/download">from our download page</a></li>
|
||||
<li><a href="/docs/build">by building from source</a> (either with <code>go</code> or <code>xcaddy</code>)
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/running#manual-installation">Install Caddy as a system service.</a> This is strongly recommended,
|
||||
especially for production servers.
|
||||
</li>
|
||||
</ol>
|
||||
<p>Place the binary in one of your <code>$PATH</code> (or <code>%PATH%</code> on Windows) directories so you can run
|
||||
<code>caddy</code> without typing the full path of the executable file. (Run <code>echo $PATH</code> to see the list
|
||||
of directories that qualify.)</p>
|
||||
<p>You can upgrade static binaries by replacing them with newer versions and restarting Caddy. The <a
|
||||
href="/docs/command-line#caddy-upgrade"><code>caddy upgrade</code> command</a> can make this easy.</p>`,
|
||||
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: `
|
||||
<p>In order to prevent abuse, you must first configure an <code>ask</code> endpoint so Caddy
|
||||
can check whether it should get a certificate. Add this to your global options at the top:</p>
|
||||
<pre><code>on_demand_tls {
|
||||
ask http://localhost:5555/check
|
||||
}</code></pre>
|
||||
<p>Change that endpoint to be something you've set up that will respond with HTTP 200 if the
|
||||
domain given in the <code>domain=</code> query parameter is allowed to have a certificate.</p>
|
||||
<p>Then create a site block that serves all sites/hosts on the TLS port:</p>
|
||||
<pre><code>https:// {
|
||||
tls {
|
||||
on_demand
|
||||
}
|
||||
}</code></pre>
|
||||
<p>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 <code>reverse_proxy</code>
|
||||
to your backend application.</p>`,
|
||||
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();
|
||||
});
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue