add quickstart video

This commit is contained in:
Mechiel Lukkien 2024-01-11 23:01:04 +01:00
parent 0bc3072944
commit 7b6cfcd572
No known key found for this signature in database
2 changed files with 14 additions and 3 deletions

View file

@ -44,6 +44,17 @@ or see [all releases](https://github.com/mjl-/mox/releases).
- 2023-09-24, [v0.0.7](https://github.com/mjl-/mox/releases/tag/v0.0.7) released - 2023-09-24, [v0.0.7](https://github.com/mjl-/mox/releases/tag/v0.0.7) released
## Quickstart demo
Mox is real easy to set up. Get a machine, download the mox binary, run the
quickstart, add the printed DNS records, and you're good to go. See the demo
below, or continue reading at [Install](install/).
<video controls preload="none" poster="files/video/quickstart-20240111.jpg">
<source type="video/webm" src="files/video/quickstart-20240111.webm" />
<source type="video/mp4" src="files/video/quickstart-20240111.mp4" />
</video>
## Background ## Background
Work on mox started in 2021. Admins were migrating their emails to just a few Work on mox started in 2021. Admins were migrating their emails to just a few

View file

@ -139,7 +139,7 @@ func main() {
inputstr = inputstr[len(lines[0])+1+len(lines[1])+1:] inputstr = inputstr[len(lines[0])+1+len(lines[1])+1:]
lines[0] = strings.TrimPrefix(lines[0], "#") lines[0] = strings.TrimPrefix(lines[0], "#")
lines[1] = strings.TrimPrefix(lines[1], "##") lines[1] = strings.TrimPrefix(lines[1], "##")
sep := "## Background" sep := "## Quickstart demo"
inleft, inright, found := strings.Cut(inputstr, sep) inleft, inright, found := strings.Cut(inputstr, sep)
if !found { if !found {
log.Fatalf("did not find separator %q", sep) log.Fatalf("did not find separator %q", sep)
@ -410,7 +410,7 @@ dt { font-weight: bold; margin-bottom: .5ex; }
dd { max-width: 50em; padding-left: 2em; margin-bottom: 1em; } dd { max-width: 50em; padding-left: 2em; margin-bottom: 1em; }
table { margin-bottom: 2ex; } table { margin-bottom: 2ex; }
.video { box-shadow: 0 0 20px 0 #bbb; } video { display: block; max-width: 100%; box-shadow: 0 0 20px 0 #ddd; margin: 0 auto; }
.img1 { width: 1050px; max-width: 100%; box-shadow: 0 0 20px 0 #bbb; } .img1 { width: 1050px; max-width: 100%; box-shadow: 0 0 20px 0 #bbb; }
.img2 { width: 1500px; max-width: 100%; box-shadow: 0 0 20px 0 #bbb; } .img2 { width: 1500px; max-width: 100%; box-shadow: 0 0 20px 0 #bbb; }
@ -443,7 +443,7 @@ h2 { background: linear-gradient(90deg, #6dd5fd 0%, #77e8e3 100%); display: inli
.main { padding: 1em; } .main { padding: 1em; }
.main ul, .main ol { padding-left: 1em; } .main ul, .main ol { padding-left: 1em; }
.two { display: flex; gap: 2em; } .two { display: flex; gap: 2em; }
.two > div { max-width: 50em; } .two > div { flex-basis: 50%; max-width: 50em; }
.toc { display: flex; gap: 2em; margin-bottom: 3ex; } .toc { display: flex; gap: 2em; margin-bottom: 3ex; }
.toc ul { margin-bottom: 0; } .toc ul { margin-bottom: 0; }